Add ProductCard with switching variant

HedvigInsurance · Sep 19, 2024 · a55f080 · a55f080
1 parent 2e3d0df
commit a55f080
Show file tree

Hide file tree

Showing 2 changed files with 120 additions and 11 deletions.
diff --git a/apps/store/src/components/InputDay/InputDay.css.ts b/apps/store/src/components/InputDay/InputDay.css.ts
@@ -85,6 +85,7 @@ export const popoverContent = style({
       animationFillMode: 'forwards',
     },
   },
+  zIndex: 1,
 })
 
 export const dayPicker = style({

diff --git a/apps/store/src/components/ProductCard/ProductCard.stories.tsx b/apps/store/src/components/ProductCard/ProductCard.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import { type ComponentProps } from 'react'
+import { useState, type ComponentProps } from 'react'
 import {
   Alert,
   Badge,
@@ -11,7 +11,9 @@ import {
   InfoIcon,
   sprinkles,
   Text,
+  ToggleCard,
   tokens,
+  yStack,
 } from 'ui'
 import { CurrencyCode } from '@/services/graphql/graphql'
 import { InputStartDay } from '../InputDay/InputStartDay'
@@ -180,17 +182,19 @@ export const Info: Story = {
           </ProductCardDetails.Content>
         </ProductCardDetails.Root>
 
-        <InputStartDay />
+        <div className={yStack({ gap: 'xxs' })}>
+          <InputStartDay />
 
-        <Alert.Root variant="info">
-          <Alert.Icon icon={InfoIcon} />
-          <Alert.Body>
-            <Alert.Message>
-              Unfortunately we are unable to cancel your old insurance with Folksam. Please provide
-              your end date above.
-            </Alert.Message>
-          </Alert.Body>
-        </Alert.Root>
+          <Alert.Root variant="info">
+            <Alert.Icon icon={InfoIcon} />
+            <Alert.Body>
+              <Alert.Message>
+                Unfortunately we are unable to cancel your old insurance with Folksam. Please
+                provide your end date above.
+              </Alert.Message>
+            </Alert.Body>
+          </Alert.Root>
+        </div>
 
         <DetailsList.Root>
           <DetailsList.Item>
@@ -230,3 +234,107 @@ export const Info: Story = {
     variant: 'primary',
   },
 }
+
+export const WithSwitching: Story = {
+  render: (args: Controls) => {
+    const [shouldAutoSwitch, setShouldAutoSwitch] = useState(true)
+
+    return (
+      <div style={{ maxWidth: '400px' }}>
+        <Card.Root variant={args.variant}>
+          <Card.Aside>
+            <IconButton variant="secondary">
+              <CrossIcon />
+            </IconButton>
+          </Card.Aside>
+          <Card.Header>
+            <Card.Media>
+              <BasePillow fill={tokens.colors.amber300} />
+            </Card.Media>
+            <Card.Heading>
+              <Card.Title>Homeowner Insurance</Card.Title>
+              <Card.Subtitle>Bellmansgatan 19A</Card.Subtitle>
+            </Card.Heading>
+          </Card.Header>
+
+          <ProductCardDetails.Root>
+            <ProductCardDetails.Trigger>
+              {(isOpen) => (isOpen ? 'Hide details' : 'Show details')}
+            </ProductCardDetails.Trigger>
+
+            <ProductCardDetails.Content className={sprinkles({ paddingBlock: 'md' })}>
+              <Text className={sprinkles({ mb: 'xxs' })}>Details</Text>
+              <DetailsList.Root size="md" className={sprinkles({ mb: 'md' })}>
+                <DetailsList.Item>
+                  <DetailsList.Label>Home type</DetailsList.Label>
+                  <DetailsList.Value>Homeowner</DetailsList.Value>
+                </DetailsList.Item>
+
+                <DetailsList.Item>
+                  <DetailsList.Label>Address</DetailsList.Label>
+                  <DetailsList.Value>Bellmansgatan 19A</DetailsList.Value>
+                </DetailsList.Item>
+
+                <DetailsList.Item>
+                  <DetailsList.Label>Zip code</DetailsList.Label>
+                  <DetailsList.Value>118 47</DetailsList.Value>
+                </DetailsList.Item>
+              </DetailsList.Root>
+              <Button variant="secondary" size="medium" fullWidth>
+                Edit information
+              </Button>
+            </ProductCardDetails.Content>
+          </ProductCardDetails.Root>
+
+          <div className={yStack({ gap: 'xxs' })}>
+            <ToggleCard.Root>
+              <ToggleCard.Label>Automatic switching</ToggleCard.Label>
+              <ToggleCard.Switch checked={shouldAutoSwitch} onCheckedChange={setShouldAutoSwitch} />
+              <ToggleCard.Description>
+                Hedvig will cancel your current insurance at Folksam. Your insurance at Hedvig
+                activates automatically when it expires
+              </ToggleCard.Description>
+            </ToggleCard.Root>
+
+            {!shouldAutoSwitch ? <InputStartDay /> : null}
+          </div>
+
+          <DetailsList.Root>
+            <DetailsList.Item>
+              <DetailsList.Label>
+                Homeowner Insurance{' '}
+                <Badge color="pinkFill1" size="tiny">
+                  Max
+                </Badge>
+              </DetailsList.Label>
+              <DetailsList.Value>379 kr/mo</DetailsList.Value>
+            </DetailsList.Item>
+
+            <DetailsList.Item>
+              <DetailsList.Label>Extended travel 60 days</DetailsList.Label>
+              <DetailsList.Value>79 kr/mo</DetailsList.Value>
+            </DetailsList.Item>
+          </DetailsList.Root>
+
+          <Divider />
+
+          <DetailsList.Root size="md">
+            <DetailsList.Item className={sprinkles({ color: 'textPrimary' })}>
+              <DetailsList.Label>Total</DetailsList.Label>
+              <DetailsList.Value>
+                <Price
+                  className={sprinkles({ justifyContent: 'flex-end' })}
+                  currencyCode={CurrencyCode.Sek}
+                  amount={458}
+                />
+              </DetailsList.Value>
+            </DetailsList.Item>
+          </DetailsList.Root>
+        </Card.Root>
+      </div>
+    )
+  },
+  args: {
+    variant: 'primary',
+  },
+}