Merge pull request #4744 from HedvigInsurance/09-18-remove-old-Toggle…

…Card tech: Remove old ToggleCard component
HedvigInsurance · Sep 19, 2024 · b1eeb48 · b1eeb48
2 parents 0b9aade + a63761a
commit b1eeb48
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 116 deletions.
diff --git a/apps/store/src/components/Cancellation/AutoSwitchToggleCard.tsx b/apps/store/src/components/Cancellation/AutoSwitchToggleCard.tsx
@@ -1,22 +1,29 @@
 import { useTranslation } from 'next-i18next'
 import { type ComponentProps } from 'react'
-import { Text } from 'ui'
-import { ToggleCard } from '@/components/ToggleCard/ToggleCard'
+import { ToggleCard } from 'ui'
 
-type Props = Omit<ComponentProps<typeof ToggleCard>, 'label'> & {
+type Props = ComponentProps<typeof ToggleCard.Root> & {
   companyName: string
+  checked: boolean
+  onCheckedChange?: (checked: boolean) => void
 }
 
-export const AutoSwitchToggleCard = ({ checked, companyName, ...props }: Props) => {
+export const AutoSwitchToggleCard = ({
+  companyName,
+  checked,
+  onCheckedChange,
+  ...props
+}: Props) => {
   const { t } = useTranslation('purchase-form')
 
   return (
-    <ToggleCard {...props} label={t('AUTO_SWITCH_FIELD_LABEL')} defaultChecked={checked}>
-      {checked && (
-        <Text as="p" size="xs" color="textSecondary">
-          {t('AUTO_SWITCH_FIELD_MESSAGE', { COMPANY: companyName })}
-        </Text>
-      )}
-    </ToggleCard>
+    <ToggleCard.Root {...props}>
+      <ToggleCard.Label>{t('AUTO_SWITCH_FIELD_LABEL')}</ToggleCard.Label>
+      <ToggleCard.Switch checked={checked} onCheckedChange={onCheckedChange} />
+
+      <ToggleCard.Description>
+        {t('AUTO_SWITCH_FIELD_MESSAGE', { COMPANY: companyName })}
+      </ToggleCard.Description>
+    </ToggleCard.Root>
   )
 }
diff --git a/apps/store/src/components/ToggleCard/ToggleCard.css.ts b/apps/store/src/components/ToggleCard/ToggleCard.css.ts
diff --git a/apps/store/src/components/ToggleCard/ToggleCard.stories.tsx b/apps/store/src/components/ToggleCard/ToggleCard.stories.tsx
diff --git a/apps/store/src/components/ToggleCard/ToggleCard.tsx b/apps/store/src/components/ToggleCard/ToggleCard.tsx
diff --git a/apps/store/src/features/carDealership/ExtensionOfferToggle.tsx b/apps/store/src/features/carDealership/ExtensionOfferToggle.tsx
@@ -1,23 +1,31 @@
 import { atom, useAtom, useAtomValue } from 'jotai'
 import { useTranslation } from 'next-i18next'
-import { CampaignIcon, Text, theme } from 'ui'
-import { ToggleCard } from '@/components/ToggleCard/ToggleCard'
+import { CampaignIcon, sprinkles, theme, ToggleCard } from 'ui'
 
 export const ExtensionOfferToggle = () => {
   const { t } = useTranslation('carDealership')
   const [userWantsExtension, setUserWantsExtension] = useSetUserWantsExtension()
 
   return (
-    <ToggleCard
-      label={t('TOGGLE_EXTENSION_LABEL')}
-      defaultChecked={userWantsExtension}
-      onCheckedChange={setUserWantsExtension}
-      Icon={<CampaignIcon size="1rem" color={theme.colors.signalGreenElement} />}
-    >
-      <Text as="p" color="textTranslucentSecondary" size="xs">
-        {t('TOGGLE_EXTENSION_DESCRIPTION')}
-      </Text>
-    </ToggleCard>
+    <ToggleCard.Root>
+      <ToggleCard.Label
+        pre={
+          <CampaignIcon
+            size="1rem"
+            color={theme.colors.signalGreenElement}
+            className={sprinkles({ mr: 'xxs' })}
+          />
+        }
+      >
+        {t('TOGGLE_EXTENSION_LABEL')}
+      </ToggleCard.Label>
+      <ToggleCard.Switch
+        defaultChecked={userWantsExtension}
+        onCheckedChange={setUserWantsExtension}
+      />
+
+      <ToggleCard.Description>{t('TOGGLE_EXTENSION_DESCRIPTION')}</ToggleCard.Description>
+    </ToggleCard.Root>
   )
 }