feat(selectable-card-group): add Label component

packages/form/src/components/SelectableCardGroupField/SelectableCardGroupField.tsx

@@ -74,8 +74,10 @@ const SelectableCardGroupFieldComponent = <
 
 type SelectableCardGroupFieldType = typeof SelectableCardGroupFieldComponent & {
   Card: typeof SelectableCardGroup.Card
+  Label: typeof SelectableCardGroup.Label
 }
 
 export const SelectableCardGroupField: SelectableCardGroupFieldType = Object.assign(SelectableCardGroupFieldComponent, {
   Card: SelectableCardGroup.Card,
+  Label: SelectableCardGroup.Label,
 })

packages/form/src/components/SelectableCardGroupField/__stories__/WithLabel.stories.tsx

@@ -0,0 +1,40 @@
+import type { StoryFn } from '@storybook/react-vite'
+import type { ComponentProps } from 'react'
+import { SelectableCardGroupField } from '../..'
+
+export const WithLabel: StoryFn<ComponentProps<typeof SelectableCardGroupField>> = args => (
+  <SelectableCardGroupField {...args}>
+    <SelectableCardGroupField.Card
+      label={
+        <SelectableCardGroupField.Label
+          label="Option avec Badge"
+          labelDescription="Description de l'option"
+          badgeText="Nouveau"
+          badgeSentiment="primary"
+        />
+      }
+      value="value-1"
+    />
+    <SelectableCardGroupField.Card
+      label={
+        <SelectableCardGroupField.Label
+          label="Option avec Badge et Side Text"
+          badgeText="Populaire"
+          badgeSentiment="success"
+          sideText="5€"
+        />
+      }
+      value="value-2"
+    />
+    <SelectableCardGroupField.Card
+      label={<SelectableCardGroupField.Label label="Option simple" labelDescription="Sans badge" />}
+      value="value-3"
+    />
+  </SelectableCardGroupField>
+)
+
+WithLabel.args = {
+  legend: 'Sélectionnez une option',
+  name: 'withLabel',
+  type: 'radio',
+}

packages/ui/src/components/Badge/index.tsx

@@ -8,7 +8,7 @@ import { TEXT_VARIANT } from './constant'
 import { badgeStyle } from './styles.css'
 import type { BadgeVariants } from './styles.css'
 
-type BadgeProps = {
+export type BadgeProps = {
   className?: string
   children: ReactNode
   'data-testid'?: string

packages/ui/src/components/SelectableCardGroup/Label.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import type { BadgeProps } from '../Badge'
+import { Badge } from '../Badge'
+import { Stack } from '../Stack'
+import { Text } from '../Text'
+
+type SelectableCardGroupLabelProps = {
+  label: ReactNode
+  labelDescription?: ReactNode
+  badgeText?: ReactNode
+  badgeProminence?: BadgeProps['prominence']
+  badgeSentiment?: BadgeProps['sentiment']
+  badgeSize?: BadgeProps['size']
+  sideText?: ReactNode
+  disabled?: boolean
+}
+
+export const SelectableCardGroupLabel = ({
+  label,
+  labelDescription,
+  badgeText,
+  badgeProminence = 'default',
+  badgeSentiment = 'neutral',
+  badgeSize = 'medium',
+  sideText,
+  disabled = false,
+}: SelectableCardGroupLabelProps) => (
+  <Stack alignItems="center" direction="row" gap={1}>
+    <Stack alignItems="center" direction="row" gap={0.5}>
+      {label}
+      {labelDescription && typeof labelDescription === 'function' ? labelDescription : null}
+      {labelDescription && typeof labelDescription !== 'function' ? (
+        <Text as="span" disabled={disabled} variant="body">
+          {labelDescription}
+        </Text>
+      ) : null}
+      {badgeText ? (
+        <Badge disabled={disabled} prominence={badgeProminence} sentiment={badgeSentiment} size={badgeSize}>
+          {badgeText}
+        </Badge>
+      ) : null}
+    </Stack>
+    {sideText ? (
+      <Text as="span" disabled={disabled} sentiment="primary" variant="bodySmallStronger">
+        {sideText}
+      </Text>
+    ) : null}
+  </Stack>
+)

packages/ui/src/components/SelectableCardGroup/__stories__/WithLabel.stories.tsx

@@ -0,0 +1,48 @@
+import type { StoryFn } from '@storybook/react-vite'
+import { useState } from 'react'
+import { SelectableCardGroup } from '..'
+
+export const WithLabel: StoryFn<typeof SelectableCardGroup> = args => {
+  const [value, onChange] = useState('value-1')
+
+  return (
+    <SelectableCardGroup
+      {...args}
+      onChange={(event: React.ChangeEvent<HTMLInputElement>) => onChange(event.currentTarget.value)}
+      value={value}
+    >
+      <SelectableCardGroup.Card
+        label={
+          <SelectableCardGroup.Label
+            label="Option avec Badge"
+            labelDescription="Description de l'option"
+            badgeText="Nouveau"
+            badgeSentiment="primary"
+          />
+        }
+        value="value-1"
+      />
+      <SelectableCardGroup.Card
+        label={
+          <SelectableCardGroup.Label
+            label="Option avec Badge et Side Text"
+            badgeText="Populaire"
+            badgeSentiment="success"
+            sideText="5€"
+          />
+        }
+        value="value-2"
+      />
+      <SelectableCardGroup.Card
+        label={<SelectableCardGroup.Label label="Option simple" labelDescription="Sans badge" />}
+        value="value-3"
+      />
+    </SelectableCardGroup>
+  )
+}
+
+WithLabel.args = {
+  legend: 'Sélectionnez une option',
+  name: 'with-label',
+  type: 'radio',
+}