fix(SelectableCard): indented prop selectable card

.changeset/fruity-cloths-flash.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+`SelectableCard`: new prop `indented` (true by default) to add or remove an indent in order to align the children with the label

packages/form/src/components/SelectableCardField/__tests__/__snapshots__/index.test.tsx.snap

@@ -24,7 +24,7 @@ exports[`selectableCardField > should render correctly 1`] = `
         >
           <div
             aria-disabled="false"
-            class="uv_475tndc uv_17da2jl3"
+            class="uv_475tndd uv_17da2jl3"
             data-checked="false"
             data-error="false"
           >
@@ -109,7 +109,7 @@ exports[`selectableCardField > should render correctly checked 1`] = `
         >
           <div
             aria-disabled="false"
-            class="uv_475tndc uv_17da2jl3"
+            class="uv_475tndd uv_17da2jl3"
             data-checked="true"
             data-error="false"
           >
@@ -194,7 +194,7 @@ exports[`selectableCardField > should render correctly disabled 1`] = `
         >
           <div
             aria-disabled="true"
-            class="uv_475tndc uv_17da2jl3"
+            class="uv_475tndd uv_17da2jl3"
             data-checked="false"
             data-error="false"
           >
@@ -280,7 +280,7 @@ exports[`selectableCardField > should render correctly with errors 1`] = `
         >
           <div
             aria-disabled="false"
-            class="uv_475tndc uv_17da2jl3"
+            class="uv_475tndd uv_17da2jl3"
             data-checked="false"
             data-error="true"
           >
@@ -370,7 +370,7 @@ exports[`selectableCardField > should trigger events correctly 1`] = `
         >
           <div
             aria-disabled="false"
-            class="uv_475tndc uv_17da2jl3"
+            class="uv_475tndd uv_17da2jl3"
             data-checked="true"
             data-error="false"
           >

packages/form/src/components/SelectableCardGroupField/__tests__/__snapshots__/index.test.tsx.snap

@@ -42,7 +42,7 @@ exports[`selectableCardField > should render correctly 1`] = `
                 >
                   <div
                     aria-disabled="false"
-                    class="uv_475tndc uv_17da2jl3"
+                    class="uv_475tndd uv_17da2jl3"
                     data-checked="false"
                     data-error="false"
                   >
@@ -105,7 +105,7 @@ exports[`selectableCardField > should render correctly 1`] = `
                 >
                   <div
                     aria-disabled="false"
-                    class="uv_475tndc uv_17da2jl3"
+                    class="uv_475tndd uv_17da2jl3"
                     data-checked="false"
                     data-error="false"
                   >
@@ -202,7 +202,7 @@ exports[`selectableCardField > should render correctly checked as a checkbox 1`]
               >
                 <div
                   aria-disabled="false"
-                  class="uv_475tndc uv_9pjq8o6"
+                  class="uv_475tndd uv_9pjq8o6"
                   data-checked="true"
                   data-error="false"
                 >
@@ -314,7 +314,7 @@ exports[`selectableCardField > should render correctly checked as radiofield 1`]
                 >
                   <div
                     aria-disabled="false"
-                    class="uv_475tndc uv_17da2jl3"
+                    class="uv_475tndd uv_17da2jl3"
                     data-checked="true"
                     data-error="false"
                   >
@@ -411,7 +411,7 @@ exports[`selectableCardField > should trigger events correctly 1`] = `
               >
                 <div
                   aria-disabled="false"
-                  class="uv_475tndc uv_9pjq8o6"
+                  class="uv_475tndd uv_9pjq8o6"
                   data-checked="false"
                   data-error="false"
                 >
@@ -482,7 +482,7 @@ exports[`selectableCardField > should trigger events correctly 1`] = `
               >
                 <div
                   aria-disabled="false"
-                  class="uv_475tndc uv_9pjq8o6"
+                  class="uv_475tndd uv_9pjq8o6"
                   data-checked="false"
                   data-error="false"
                 >

packages/form/src/components/SelectableCardOptionGroupField/__tests__/__snapshots__/index.test.tsx.snap

@@ -42,7 +42,7 @@ exports[`selectableCardOptionGroupField > should render correctly 1`] = `
                 >
                   <div
                     aria-disabled="false"
-                    class="uv_475tndc uv_17da2jl3"
+                    class="uv_475tndd uv_17da2jl3"
                     data-checked="true"
                     data-error="false"
                   >
@@ -183,7 +183,7 @@ exports[`selectableCardOptionGroupField > should render correctly 1`] = `
                 >
                   <div
                     aria-disabled="false"
-                    class="uv_475tndc uv_17da2jl3"
+                    class="uv_475tndd uv_17da2jl3"
                     data-checked="false"
                     data-error="false"
                   >
@@ -323,7 +323,7 @@ exports[`selectableCardOptionGroupField > should render correctly 1`] = `
                 >
                   <div
                     aria-disabled="false"
-                    class="uv_475tndc uv_17da2jl3"
+                    class="uv_475tndd uv_17da2jl3"
                     data-checked="false"
                     data-error="false"
                   >

packages/form/src/components/SwitchButtonField/__tests__/__snapshots__/index.test.tsx.snap

@@ -30,7 +30,7 @@ exports[`switchButtonField > should render correctly 1`] = `
             >
               <div
                 aria-disabled="false"
-                class="uv_475tndc uv_17da2jl3"
+                class="uv_475tndd uv_17da2jl3"
                 data-checked="false"
               >
                 <input
@@ -92,7 +92,7 @@ exports[`switchButtonField > should render correctly 1`] = `
             >
               <div
                 aria-disabled="false"
-                class="uv_475tndc uv_17da2jl3"
+                class="uv_475tndd uv_17da2jl3"
                 data-checked="false"
               >
                 <input
@@ -176,7 +176,7 @@ exports[`switchButtonField > should works with defaultValues 1`] = `
             >
               <div
                 aria-disabled="false"
-                class="uv_475tndc uv_17da2jl3"
+                class="uv_475tndd uv_17da2jl3"
                 data-checked="false"
               >
                 <input
@@ -238,7 +238,7 @@ exports[`switchButtonField > should works with defaultValues 1`] = `
             >
               <div
                 aria-disabled="false"
-                class="uv_475tndc uv_17da2jl3"
+                class="uv_475tndd uv_17da2jl3"
                 data-checked="false"
               >
                 <input

packages/ui/src/components/SelectableCard/__stories__/Examples.stories.tsx

@@ -4,6 +4,7 @@ import { Badge } from '../../Badge'
 import { Button } from '../../Button'
 import { Row } from '../../Row'
 import { SelectInput } from '../../SelectInput'
+import { Separator } from '../../Separator'
 import { Stack } from '../../Stack'
 import { Text } from '../../Text'
 import { TextArea } from '../../TextArea'
@@ -110,10 +111,11 @@ export const Examples: StoryFn = args => {
           type="checkbox"
           value="label-20"
         >
-          <Stack gap={1}>
-            <Text as="p" prominence="weak" sentiment="neutral" variant="body">
+          <Text as="p" prominence="weak" sentiment="neutral" variant="body">
+            <Stack gap={3} width="100%">
               This option will cost you 1.99€ and provide you with a lot of
               happiness
+              <Separator />
               <SelectInput
                 label="Select a sub option"
                 options={[
@@ -122,9 +124,9 @@ export const Examples: StoryFn = args => {
                     value: 'option1',
                   },
                 ]}
-              />
-            </Text>
-          </Stack>
+              />{' '}
+            </Stack>
+          </Text>
         </SelectableCard>
         <SelectableCard
           {...args}
@@ -419,3 +421,7 @@ Examples.decorators = [
     </Stack>
   ),
 ]
+
+Examples.args = {
+  indented: true,
+}

packages/ui/src/components/SelectableCard/__stories__/Indented.stories.tsx

@@ -0,0 +1,118 @@
+import type { StoryFn } from '@storybook/react-vite'
+import { useState } from 'react'
+import { SelectInput } from '../../SelectInput'
+import { Separator } from '../../Separator'
+import { Stack } from '../../Stack'
+import { Text } from '../../Text'
+import { SelectableCard } from '..'
+
+export const Indented: StoryFn = args => {
+  const [value2, onChange2] = useState({ 'label-20': true, 'label-21': false })
+
+  return (
+    <Stack flex={1} gap={8}>
+      <Stack flex={1} gap={1}>
+        <SelectableCard
+          {...args}
+          checked={value2['label-20']}
+          label={
+            <Stack direction="row" flex={1} justifyContent="space-between">
+              <Text as="span" variant="bodyStrong">
+                Default layout (indented is set to true)
+              </Text>
+              <Text as="span" variant="bodyStronger">
+                4.99€
+              </Text>
+            </Stack>
+          }
+          name="label-20"
+          onChange={event =>
+            onChange2(prevState => ({
+              ...prevState,
+              'label-20': event.currentTarget.checked,
+            }))
+          }
+          showTick
+          type="checkbox"
+          value="label-20"
+        >
+          <Text as="p" prominence="weak" sentiment="neutral" variant="body">
+            <Stack gap={3} width="100%">
+              This option will cost you 1.99€ and provide you with a lot of
+              happiness
+              <Separator />
+              <SelectInput
+                label="Select a sub option"
+                options={[
+                  {
+                    label: 'Sub option 1',
+                    value: 'option1',
+                  },
+                ]}
+              />{' '}
+            </Stack>
+          </Text>
+        </SelectableCard>
+        <SelectableCard
+          {...args}
+          checked={value2['label-21']}
+          indented={false}
+          label={
+            <Stack direction="row" flex={1} justifyContent="space-between">
+              <Text as="span" variant="bodyStrong">
+                Intended set to false
+              </Text>
+              <Text as="span" variant="bodyStronger">
+                4.99€
+              </Text>
+            </Stack>
+          }
+          name="label-21"
+          onChange={event =>
+            onChange2(prevState => ({
+              ...prevState,
+              'label-21': event.currentTarget.checked,
+            }))
+          }
+          showTick
+          type="checkbox"
+          value="label-21"
+        >
+          <Text as="p" prominence="weak" sentiment="neutral" variant="body">
+            <Stack gap={3} width="100%">
+              This option will cost you 1.99€ and provide you with a lot of
+              happiness
+              <Separator />
+              <SelectInput
+                label="Select a sub option"
+                options={[
+                  {
+                    label: 'Sub option 1',
+                    value: 'option1',
+                  },
+                ]}
+              />
+            </Stack>
+          </Text>
+        </SelectableCard>
+      </Stack>
+    </Stack>
+  )
+}
+
+Indented.decorators = [
+  StoryComponent => (
+    <Stack direction="row" gap={2}>
+      <StoryComponent />
+    </Stack>
+  ),
+]
+
+Indented.parameters = {
+  docs: {
+    description: {
+      story:
+        'By default, the content of the card (children) is aligned with the label when `showTick` is set to `true`. It is possible to disabled this alignment by setting prop `indented` to `false`.',
+    },
+  },
+}

packages/ui/src/components/SelectableCard/__stories__/index.stories.tsx

@@ -15,4 +15,5 @@ export { ShowTick } from './ShowTick.stories'
 export { Tooltip } from './Tooltip.stories'
 export { Type } from './Type.stories'
 export { Illustration } from './Illustration.stories'
+export { Indented } from './Indented.stories'
 export { Examples } from './Examples.stories'