From 75bf499f075dde80fdf7aa5792897478ae5122c3 Mon Sep 17 00:00:00 2001
From: gmeigniez-pass <139768952+gmeigniez-pass@users.noreply.github.com>
Date: Fri, 3 Jan 2025 11:25:39 +0100
Subject: [PATCH 1/9] (PC-33527)[PRO] feat: Replace withBorder checkbox prop
 with box variant.

---
 .../PriceCategoriesScreen/PriceCategoriesForm.tsx     |  3 ++-
 .../IndividualOffer/StocksThing/StocksThing.tsx       |  3 ++-
 pro/src/ui-kit/form/CheckboxGroup/CheckboxGroup.tsx   |  4 ++++
 .../ui-kit/form/CheckboxGroup/CheckboxGroupItem.tsx   |  8 +++++++-
 .../form/shared/BaseCheckbox/BaseCheckbox.stories.tsx |  4 ++--
 .../ui-kit/form/shared/BaseCheckbox/BaseCheckbox.tsx  | 11 ++++++++---
 6 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/pro/src/components/IndividualOffer/PriceCategoriesScreen/PriceCategoriesForm.tsx b/pro/src/components/IndividualOffer/PriceCategoriesScreen/PriceCategoriesForm.tsx
index 3eb7df66e02..ecd5bd18e81 100644
--- a/pro/src/components/IndividualOffer/PriceCategoriesScreen/PriceCategoriesForm.tsx
+++ b/pro/src/components/IndividualOffer/PriceCategoriesScreen/PriceCategoriesForm.tsx
@@ -15,6 +15,7 @@ import { Button } from 'ui-kit/Button/Button'
 import { ButtonVariant, IconPositionEnum } from 'ui-kit/Button/types'
 import { Checkbox } from 'ui-kit/form/Checkbox/Checkbox'
 import { PriceInput } from 'ui-kit/form/PriceInput/PriceInput'
+import { CheckboxVariant } from 'ui-kit/form/shared/BaseCheckbox/BaseCheckbox'
 import { TextInput } from 'ui-kit/form/TextInput/TextInput'
 import { InfoBox } from 'ui-kit/InfoBox/InfoBox'
 
@@ -232,7 +233,7 @@ export const PriceCategoriesForm = ({
                 label="Accepter les réservations “Duo“"
                 name="isDuo"
                 disabled={isDisabled}
-                withBorder
+                variant={CheckboxVariant.BOX}
               />
             </FormLayout.Row>
           </FormLayout.Section>
diff --git a/pro/src/components/IndividualOffer/StocksThing/StocksThing.tsx b/pro/src/components/IndividualOffer/StocksThing/StocksThing.tsx
index 5023d4d7830..61e70645f36 100644
--- a/pro/src/components/IndividualOffer/StocksThing/StocksThing.tsx
+++ b/pro/src/components/IndividualOffer/StocksThing/StocksThing.tsx
@@ -34,6 +34,7 @@ import {
   Quantity,
   QuantityInput,
 } from 'ui-kit/form/QuantityInput/QuantityInput'
+import { CheckboxVariant } from 'ui-kit/form/shared/BaseCheckbox/BaseCheckbox'
 import { TextInput } from 'ui-kit/form/TextInput/TextInput'
 import { InfoBox } from 'ui-kit/InfoBox/InfoBox'
 
@@ -469,7 +470,7 @@ export const StocksThing = ({ offer }: StocksThingProps): JSX.Element => {
                   label="Accepter les réservations “Duo“"
                   name="isDuo"
                   disabled={isDisabled}
-                  withBorder
+                  variant={CheckboxVariant.BOX}
                 />
               </FormLayout.Row>
             </FormLayout.Section>
diff --git a/pro/src/ui-kit/form/CheckboxGroup/CheckboxGroup.tsx b/pro/src/ui-kit/form/CheckboxGroup/CheckboxGroup.tsx
index bd59ecf5a81..536c4ead60d 100644
--- a/pro/src/ui-kit/form/CheckboxGroup/CheckboxGroup.tsx
+++ b/pro/src/ui-kit/form/CheckboxGroup/CheckboxGroup.tsx
@@ -1,6 +1,7 @@
 import cn from 'classnames'
 import { useField } from 'formik'
 
+import { CheckboxVariant } from '../shared/BaseCheckbox/BaseCheckbox'
 import { FieldSetLayout } from '../shared/FieldSetLayout/FieldSetLayout'
 
 import styles from './CheckboxGroup.module.scss'
@@ -19,6 +20,7 @@ interface CheckboxGroupProps {
   className?: string
   disabled?: boolean
   isOptional?: boolean
+  variant?: CheckboxVariant
 }
 
 export const CheckboxGroup = ({
@@ -28,6 +30,7 @@ export const CheckboxGroup = ({
   className,
   disabled,
   isOptional,
+  variant,
 }: CheckboxGroupProps): JSX.Element => {
   const [, meta, helpers] = useField({ name: groupName })
   const hasError = meta.touched && !!meta.error
@@ -53,6 +56,7 @@ export const CheckboxGroup = ({
             disabled={disabled}
             onChange={item.onChange}
             {...(hasError ? { ariaDescribedBy: `error-${groupName}` } : {})}
+            variant={variant}
           />
         </div>
       ))}
diff --git a/pro/src/ui-kit/form/CheckboxGroup/CheckboxGroupItem.tsx b/pro/src/ui-kit/form/CheckboxGroup/CheckboxGroupItem.tsx
index 0aa7734c9e8..aaaf8901086 100644
--- a/pro/src/ui-kit/form/CheckboxGroup/CheckboxGroupItem.tsx
+++ b/pro/src/ui-kit/form/CheckboxGroup/CheckboxGroupItem.tsx
@@ -1,6 +1,9 @@
 import { useField } from 'formik'
 
-import { BaseCheckbox } from 'ui-kit/form/shared/BaseCheckbox/BaseCheckbox'
+import {
+  BaseCheckbox,
+  CheckboxVariant,
+} from 'ui-kit/form/shared/BaseCheckbox/BaseCheckbox'
 
 interface CheckboxGroupItemProps {
   setGroupTouched(): void
@@ -12,6 +15,7 @@ interface CheckboxGroupItemProps {
   disabled?: boolean
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
   ariaDescribedBy?: string
+  variant?: CheckboxVariant
 }
 
 export const CheckboxGroupItem = ({
@@ -23,6 +27,7 @@ export const CheckboxGroupItem = ({
   disabled,
   onChange,
   ariaDescribedBy,
+  variant,
 }: CheckboxGroupItemProps): JSX.Element => {
   const [field] = useField({ name, type: 'checkbox' })
 
@@ -43,6 +48,7 @@ export const CheckboxGroupItem = ({
       onChange={onCustomChange}
       disabled={disabled}
       ariaDescribedBy={ariaDescribedBy}
+      variant={variant}
     />
   )
 }
diff --git a/pro/src/ui-kit/form/shared/BaseCheckbox/BaseCheckbox.stories.tsx b/pro/src/ui-kit/form/shared/BaseCheckbox/BaseCheckbox.stories.tsx
index 9d0cd4829d1..4b1a6835de9 100644
--- a/pro/src/ui-kit/form/shared/BaseCheckbox/BaseCheckbox.stories.tsx
+++ b/pro/src/ui-kit/form/shared/BaseCheckbox/BaseCheckbox.stories.tsx
@@ -2,7 +2,7 @@ import type { StoryObj } from '@storybook/react'
 
 import strokeAccessibilityEye from 'icons/stroke-accessibility-eye.svg'
 
-import { BaseCheckbox } from './BaseCheckbox'
+import { BaseCheckbox, CheckboxVariant } from './BaseCheckbox'
 
 export default {
   title: 'ui-kit/forms/shared/BaseCheckbox',
@@ -28,6 +28,6 @@ export const WithBorder: StoryObj<typeof BaseCheckbox> = {
   args: {
     label: 'Checkbox Label with border',
     icon: strokeAccessibilityEye,
-    withBorder: true,
+    variant: CheckboxVariant.BOX,
   },
 }
diff --git a/pro/src/ui-kit/form/shared/BaseCheckbox/BaseCheckbox.tsx b/pro/src/ui-kit/form/shared/BaseCheckbox/BaseCheckbox.tsx
index fbcc1d99fd8..4a3383faa85 100644
--- a/pro/src/ui-kit/form/shared/BaseCheckbox/BaseCheckbox.tsx
+++ b/pro/src/ui-kit/form/shared/BaseCheckbox/BaseCheckbox.tsx
@@ -11,6 +11,11 @@ export enum PartialCheck {
   UNCHECKED = 'unchecked',
 }
 
+export enum CheckboxVariant {
+  DEFAULT = 'default',
+  BOX = 'box',
+}
+
 export interface BaseCheckboxProps
   extends React.InputHTMLAttributes<HTMLInputElement> {
   label: string | React.ReactNode
@@ -19,7 +24,7 @@ export interface BaseCheckboxProps
   inputClassName?: string
   labelClassName?: string
   icon?: string
-  withBorder?: boolean
+  variant?: CheckboxVariant
   partialCheck?: boolean
   exceptionnallyHideLabelDespiteA11y?: boolean
   description?: string
@@ -35,7 +40,7 @@ export const BaseCheckbox = forwardRef(
       inputClassName,
       labelClassName,
       icon,
-      withBorder,
+      variant = CheckboxVariant.DEFAULT,
       partialCheck,
       exceptionnallyHideLabelDespiteA11y,
       description,
@@ -61,7 +66,7 @@ export const BaseCheckbox = forwardRef(
       labelClassName
     )
     const containerClasses = cn(styles['base-checkbox'], className, {
-      [styles['with-border']]: withBorder,
+      [styles['with-border']]: variant === CheckboxVariant.BOX,
       [styles['has-error']]: hasError,
       [styles['is-disabled']]: props.disabled,
     })

From 64544de893d03269c5728f67bc12d6a1891d2ccd Mon Sep 17 00:00:00 2001
From: gmeigniez-pass <139768952+gmeigniez-pass@users.noreply.github.com>
Date: Fri, 3 Jan 2025 12:24:57 +0100
Subject: [PATCH 2/9] (PC-33527)[PRO] feat: Rework base checkbox styles to
 match figma designs.

---
 .../UsefulInformationForm.module.scss         |  6 --
 .../UsefulInformationForm.tsx                 |  1 -
 .../CheckboxGroup/CheckboxGroup.module.scss   | 12 +---
 .../form/CheckboxGroup/CheckboxGroup.tsx      | 39 +++++++------
 .../BaseCheckbox/BaseCheckbox.module.scss     | 56 ++++++++++++++-----
 .../form/shared/BaseCheckbox/BaseCheckbox.tsx | 21 +++----
 6 files changed, 75 insertions(+), 60 deletions(-)

diff --git a/pro/src/pages/IndividualOffer/IndividualOfferInformations/components/UsefulInformationForm/UsefulInformationForm.module.scss b/pro/src/pages/IndividualOffer/IndividualOfferInformations/components/UsefulInformationForm/UsefulInformationForm.module.scss
index 91fa1808199..1603dd4fd27 100644
--- a/pro/src/pages/IndividualOffer/IndividualOfferInformations/components/UsefulInformationForm/UsefulInformationForm.module.scss
+++ b/pro/src/pages/IndividualOffer/IndividualOfferInformations/components/UsefulInformationForm/UsefulInformationForm.module.scss
@@ -1,11 +1,5 @@
 @use "styles/mixins/_rem.scss" as rem;
 
-.accessibility-checkbox-group {
-  legend {
-    margin-bottom: rem.torem(24px);
-  }
-}
-
 .info-banners {
   margin-bottom: rem.torem(24px);
 }
diff --git a/pro/src/pages/IndividualOffer/IndividualOfferInformations/components/UsefulInformationForm/UsefulInformationForm.tsx b/pro/src/pages/IndividualOffer/IndividualOfferInformations/components/UsefulInformationForm/UsefulInformationForm.tsx
index d1ffe5f7a6c..a273de6fdf0 100644
--- a/pro/src/pages/IndividualOffer/IndividualOfferInformations/components/UsefulInformationForm/UsefulInformationForm.tsx
+++ b/pro/src/pages/IndividualOffer/IndividualOfferInformations/components/UsefulInformationForm/UsefulInformationForm.tsx
@@ -253,7 +253,6 @@ export const UsefulInformationForm = ({
       <FormLayout.Section title="Modalités d’accessibilité">
         <FormLayout.Row>
           <CheckboxGroup
-            className={styles['accessibility-checkbox-group']}
             group={accessibilityOptionsGroups}
             groupName="accessibility"
             disabled={readOnlyFields.includes('accessibility')}
diff --git a/pro/src/ui-kit/form/CheckboxGroup/CheckboxGroup.module.scss b/pro/src/ui-kit/form/CheckboxGroup/CheckboxGroup.module.scss
index 1d10271d070..bcfa3f1b0f4 100644
--- a/pro/src/ui-kit/form/CheckboxGroup/CheckboxGroup.module.scss
+++ b/pro/src/ui-kit/form/CheckboxGroup/CheckboxGroup.module.scss
@@ -1,13 +1,7 @@
 @use "styles/mixins/_rem.scss" as rem;
 
 .checkbox-group {
-  &-item {
-    // RomainC: I don't understand why it doesn't exactly match the sketch
-    margin-bottom: rem.torem(12px);
-    width: max-content;
-
-    &:last-of-type {
-      margin-bottom: 0;
-    }
-  }
+  display: flex;
+  flex-direction: column;
+  gap: rem.torem(16px);
 }
diff --git a/pro/src/ui-kit/form/CheckboxGroup/CheckboxGroup.tsx b/pro/src/ui-kit/form/CheckboxGroup/CheckboxGroup.tsx
index 536c4ead60d..80663746340 100644
--- a/pro/src/ui-kit/form/CheckboxGroup/CheckboxGroup.tsx
+++ b/pro/src/ui-kit/form/CheckboxGroup/CheckboxGroup.tsx
@@ -17,7 +17,6 @@ interface CheckboxGroupProps {
     icon?: string
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
   }[]
-  className?: string
   disabled?: boolean
   isOptional?: boolean
   variant?: CheckboxVariant
@@ -27,7 +26,6 @@ export const CheckboxGroup = ({
   group,
   groupName,
   legend,
-  className,
   disabled,
   isOptional,
   variant,
@@ -37,29 +35,30 @@ export const CheckboxGroup = ({
 
   return (
     <FieldSetLayout
-      className={cn(styles['checkbox-group'], className)}
       error={hasError ? meta.error : undefined}
       legend={legend}
       name={groupName}
       isOptional={isOptional}
     >
-      {group.map((item) => (
-        <div className={styles['checkbox-group-item']} key={item.name}>
-          <CheckboxGroupItem
-            icon={item.icon}
-            hasError={hasError}
-            label={item.label}
-            name={item.name}
-            setGroupTouched={() =>
-              !meta.touched ? helpers.setTouched(true) : null
-            }
-            disabled={disabled}
-            onChange={item.onChange}
-            {...(hasError ? { ariaDescribedBy: `error-${groupName}` } : {})}
-            variant={variant}
-          />
-        </div>
-      ))}
+      <div className={styles['checkbox-group']}>
+        {group.map((item) => (
+          <div className={styles['checkbox-group-item']} key={item.name}>
+            <CheckboxGroupItem
+              icon={item.icon}
+              hasError={hasError}
+              label={item.label}
+              name={item.name}
+              setGroupTouched={() =>
+                !meta.touched ? helpers.setTouched(true) : null
+              }
+              disabled={disabled}
+              onChange={item.onChange}
+              {...(hasError ? { ariaDescribedBy: `error-${groupName}` } : {})}
+              variant={variant}
+            />
+          </div>
+        ))}
+      </div>
     </FieldSetLayout>
   )
 }
diff --git a/pro/src/ui-kit/form/shared/BaseCheckbox/BaseCheckbox.module.scss b/pro/src/ui-kit/form/shared/BaseCheckbox/BaseCheckbox.module.scss
index 1ff51b640f3..c4ded33f818 100644
--- a/pro/src/ui-kit/form/shared/BaseCheckbox/BaseCheckbox.module.scss
+++ b/pro/src/ui-kit/form/shared/BaseCheckbox/BaseCheckbox.module.scss
@@ -6,7 +6,6 @@
 
 .base-checkbox {
   display: inline-flex;
-  cursor: pointer;
   width: 100%;
 
   &-label-row {
@@ -16,10 +15,8 @@
   }
 
   &-label {
-    display: inline-flex;
-    flex-direction: column;
     width: 100%;
-    justify-items: center;
+    cursor: pointer;
   }
 
   &-description {
@@ -32,8 +29,8 @@
   &-icon {
     margin-right: rem.torem(8px);
     display: inline-flex;
+    vertical-align: text-bottom;
     flex-direction: column;
-    vertical-align: middle;
 
     &-svg {
       width: rem.torem(20px);
@@ -43,7 +40,6 @@
 
   &-input {
     appearance: none;
-    background-color: var(--color-input-bg-color);
     border: rem.torem(2px) solid var(--color-grey-dark);
     border-radius: rem.torem(3px);
     transition:
@@ -82,9 +78,8 @@
     }
 
     &:focus-visible {
-      outline: rem.torem(1px) solid var(--color-input-text-color);
+      outline: rem.torem(1px) solid var(--color-black);
       outline-offset: rem.torem(4px);
-      border-radius: rem.torem(4px);
     }
   }
 
@@ -141,22 +136,55 @@
   }
 }
 
-.with-border {
+.box-vairant,
+.inline-box-vairant {
   border: rem.torem(1px) solid var(--color-grey-semi-dark);
-  border-radius: rem.torem(6px);
+  border-radius: rem.torem(8px);
   min-width: 100%;
   padding-left: rem.torem(16px);
-  padding-top: rem.torem(16px);
-  padding-bottom: rem.torem(16px);
+
+  &.is-checked {
+    background-color: var(--color-background-secondary);
+    border-color: var(--color-secondary);
+  }
+
+  &.is-disabled .base-checkbox-input:checked {
+    background-color: var(--color-grey-semi-dark);
+    border-color: var(--color-grey-semi-dark);
+  }
+
+  &.has-error {
+    background-color: transparent;
+    border-color: var(--color-error);
+  }
+
+  &.is-disabled {
+    background-color: var(--color-grey-light);
+    border-color: var(--color-grey-medium);
+  }
 
   .base-checkbox-input:focus-visible {
     outline: none;
   }
 
+  .base-checkbox-label {
+    padding: rem.torem(16px) rem.torem(16px) rem.torem(16px) 0;
+  }
+
   &:focus-within {
-    outline: rem.torem(1px) solid var(--color-input-text-color);
+    outline: rem.torem(1px) solid var(--color-black);
     outline-offset: rem.torem(4px);
-    border-radius: rem.torem(4px);
+  }
+
+  @supports selector(:has(*)) {
+    &:focus-within {
+      outline: none;
+    }
+
+    &:has(.base-checkbox-input:focus-visible) {
+      outline: rem.torem(1px) solid var(--color-black);
+      outline-offset: rem.torem(4px);
+    }
   }
 }
 
diff --git a/pro/src/ui-kit/form/shared/BaseCheckbox/BaseCheckbox.tsx b/pro/src/ui-kit/form/shared/BaseCheckbox/BaseCheckbox.tsx
index 4a3383faa85..adc4eaf5cbe 100644
--- a/pro/src/ui-kit/form/shared/BaseCheckbox/BaseCheckbox.tsx
+++ b/pro/src/ui-kit/form/shared/BaseCheckbox/BaseCheckbox.tsx
@@ -66,9 +66,10 @@ export const BaseCheckbox = forwardRef(
       labelClassName
     )
     const containerClasses = cn(styles['base-checkbox'], className, {
-      [styles['with-border']]: variant === CheckboxVariant.BOX,
+      [styles['box-vairant']]: variant === CheckboxVariant.BOX,
       [styles['has-error']]: hasError,
       [styles['is-disabled']]: props.disabled,
+      [styles['is-checked']]: props.checked,
     })
 
     return (
@@ -83,16 +84,16 @@ export const BaseCheckbox = forwardRef(
             className={cn(styles['base-checkbox-input'], inputClassName)}
             id={id}
           />
-          {icon && (
-            <span className={styles['base-checkbox-icon']}>
-              <SvgIcon
-                src={icon}
-                alt=""
-                className={styles['base-checkbox-icon-svg']}
-              />
-            </span>
-          )}
           <label className={labelClasses} htmlFor={id}>
+            {icon && (
+              <span className={styles['base-checkbox-icon']}>
+                <SvgIcon
+                  src={icon}
+                  alt=""
+                  className={styles['base-checkbox-icon-svg']}
+                />
+              </span>
+            )}
             {label}
             {description && (
               <p className={styles['base-checkbox-description']}>

From 4200a0211c4bfa86dc7d410a6e045ef02397611a Mon Sep 17 00:00:00 2001
From: gmeigniez-pass <139768952+gmeigniez-pass@users.noreply.github.com>
Date: Fri, 3 Jan 2025 14:38:39 +0100
Subject: [PATCH 3/9] (PC-33527)[PRO] feat: Add inline variation for checkbox
 group.

---
 .../form/CheckboxGroup/CheckboxGroup.module.scss       |  4 ++++
 pro/src/ui-kit/form/CheckboxGroup/CheckboxGroup.tsx    | 10 ++++++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/pro/src/ui-kit/form/CheckboxGroup/CheckboxGroup.module.scss b/pro/src/ui-kit/form/CheckboxGroup/CheckboxGroup.module.scss
index bcfa3f1b0f4..0ffc90032fa 100644
--- a/pro/src/ui-kit/form/CheckboxGroup/CheckboxGroup.module.scss
+++ b/pro/src/ui-kit/form/CheckboxGroup/CheckboxGroup.module.scss
@@ -5,3 +5,7 @@
   flex-direction: column;
   gap: rem.torem(16px);
 }
+
+.inline {
+  flex-flow: row wrap;
+}
diff --git a/pro/src/ui-kit/form/CheckboxGroup/CheckboxGroup.tsx b/pro/src/ui-kit/form/CheckboxGroup/CheckboxGroup.tsx
index 80663746340..a0e5abc9efc 100644
--- a/pro/src/ui-kit/form/CheckboxGroup/CheckboxGroup.tsx
+++ b/pro/src/ui-kit/form/CheckboxGroup/CheckboxGroup.tsx
@@ -1,4 +1,4 @@
-import cn from 'classnames'
+import classNames from 'classnames'
 import { useField } from 'formik'
 
 import { CheckboxVariant } from '../shared/BaseCheckbox/BaseCheckbox'
@@ -20,6 +20,7 @@ interface CheckboxGroupProps {
   disabled?: boolean
   isOptional?: boolean
   variant?: CheckboxVariant
+  inline?: boolean
 }
 
 export const CheckboxGroup = ({
@@ -29,6 +30,7 @@ export const CheckboxGroup = ({
   disabled,
   isOptional,
   variant,
+  inline = false,
 }: CheckboxGroupProps): JSX.Element => {
   const [, meta, helpers] = useField({ name: groupName })
   const hasError = meta.touched && !!meta.error
@@ -40,7 +42,11 @@ export const CheckboxGroup = ({
       name={groupName}
       isOptional={isOptional}
     >
-      <div className={styles['checkbox-group']}>
+      <div
+        className={classNames(styles['checkbox-group'], {
+          [styles['inline']]: inline,
+        })}
+      >
         {group.map((item) => (
           <div className={styles['checkbox-group-item']} key={item.name}>
             <CheckboxGroupItem

From 2976e6f5cc614d4fe05dfb8378fd03fc7502e6a0 Mon Sep 17 00:00:00 2001
From: gmeigniez-pass <139768952+gmeigniez-pass@users.noreply.github.com>
Date: Fri, 3 Jan 2025 15:38:52 +0100
Subject: [PATCH 4/9] (PC-33527)[PRO] feat: Add the children prop to radio
 inputs.

---
 pro/src/ui-kit/form/Checkbox/Checkbox.tsx     | 13 +---
 .../form/CheckboxGroup/CheckboxGroup.tsx      | 39 +++++++----
 .../form/CheckboxGroup/CheckboxGroupItem.tsx  |  3 +
 pro/src/ui-kit/form/RadioGroup/RadioGroup.tsx |  2 +-
 .../BaseCheckbox/BaseCheckbox.module.scss     | 50 ++++++++-----
 .../form/shared/BaseCheckbox/BaseCheckbox.tsx | 70 +++++++++++--------
 .../form/shared/BaseRadio/BaseRadio.tsx       | 13 ++--
 7 files changed, 106 insertions(+), 84 deletions(-)

diff --git a/pro/src/ui-kit/form/Checkbox/Checkbox.tsx b/pro/src/ui-kit/form/Checkbox/Checkbox.tsx
index b7ea34d849e..070a3f7d3f1 100644
--- a/pro/src/ui-kit/form/Checkbox/Checkbox.tsx
+++ b/pro/src/ui-kit/form/Checkbox/Checkbox.tsx
@@ -1,6 +1,5 @@
 import cn from 'classnames'
 import { useField } from 'formik'
-import { ForwardedRef } from 'react'
 
 import {
   BaseCheckbox,
@@ -15,29 +14,19 @@ interface CheckboxProps extends BaseCheckboxProps {
   name: string
   className?: string
   hideFooter?: boolean
-  /**
-   * A forward ref to the input element.
-   */
-  refForInput?: ForwardedRef<HTMLInputElement>
 }
 
 export const Checkbox = ({
   name,
   className,
   hideFooter,
-  refForInput,
   ...props
 }: CheckboxProps): JSX.Element => {
   const [field, meta] = useField({ name, type: 'checkbox' })
   const hasError = meta.touched && !!meta.error
   return (
     <div className={cn(styles['checkbox'], className)}>
-      <BaseCheckbox
-        ref={refForInput}
-        hasError={hasError}
-        {...field}
-        {...props}
-      />
+      <BaseCheckbox hasError={hasError} {...field} {...props} />
       {!hideFooter && (
         <div className={styles['checkbox-error']}>
           {hasError && <FieldError name={name}>{meta.error}</FieldError>}
diff --git a/pro/src/ui-kit/form/CheckboxGroup/CheckboxGroup.tsx b/pro/src/ui-kit/form/CheckboxGroup/CheckboxGroup.tsx
index a0e5abc9efc..d00bb676f02 100644
--- a/pro/src/ui-kit/form/CheckboxGroup/CheckboxGroup.tsx
+++ b/pro/src/ui-kit/form/CheckboxGroup/CheckboxGroup.tsx
@@ -1,32 +1,38 @@
 import classNames from 'classnames'
 import { useField } from 'formik'
 
+import { RequireAtLeastOne } from '../RadioGroup/RadioGroup'
 import { CheckboxVariant } from '../shared/BaseCheckbox/BaseCheckbox'
 import { FieldSetLayout } from '../shared/FieldSetLayout/FieldSetLayout'
 
 import styles from './CheckboxGroup.module.scss'
 import { CheckboxGroupItem } from './CheckboxGroupItem'
 
-interface CheckboxGroupProps {
-  groupName: string
-  legend: string
-  group: {
-    name: string
-    label: string
-    description?: string
-    icon?: string
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
-  }[]
-  disabled?: boolean
-  isOptional?: boolean
-  variant?: CheckboxVariant
-  inline?: boolean
-}
+type CheckboxGroupProps = RequireAtLeastOne<
+  {
+    groupName: string
+    legend?: string
+    describedBy?: string
+    group: {
+      name: string
+      label: string
+      icon?: string
+      onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
+      childrenOnChecked?: JSX.Element
+    }[]
+    disabled?: boolean
+    isOptional?: boolean
+    variant?: CheckboxVariant
+    inline?: boolean
+  },
+  'legend' | 'describedBy'
+>
 
 export const CheckboxGroup = ({
   group,
   groupName,
   legend,
+  describedBy,
   disabled,
   isOptional,
   variant,
@@ -40,7 +46,9 @@ export const CheckboxGroup = ({
       error={hasError ? meta.error : undefined}
       legend={legend}
       name={groupName}
+      ariaDescribedBy={describedBy}
       isOptional={isOptional}
+      hideFooter
     >
       <div
         className={classNames(styles['checkbox-group'], {
@@ -61,6 +69,7 @@ export const CheckboxGroup = ({
               onChange={item.onChange}
               {...(hasError ? { ariaDescribedBy: `error-${groupName}` } : {})}
               variant={variant}
+              childrenOnChecked={item.childrenOnChecked}
             />
           </div>
         ))}
diff --git a/pro/src/ui-kit/form/CheckboxGroup/CheckboxGroupItem.tsx b/pro/src/ui-kit/form/CheckboxGroup/CheckboxGroupItem.tsx
index aaaf8901086..45aec419418 100644
--- a/pro/src/ui-kit/form/CheckboxGroup/CheckboxGroupItem.tsx
+++ b/pro/src/ui-kit/form/CheckboxGroup/CheckboxGroupItem.tsx
@@ -16,6 +16,7 @@ interface CheckboxGroupItemProps {
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
   ariaDescribedBy?: string
   variant?: CheckboxVariant
+  childrenOnChecked?: JSX.Element
 }
 
 export const CheckboxGroupItem = ({
@@ -28,6 +29,7 @@ export const CheckboxGroupItem = ({
   onChange,
   ariaDescribedBy,
   variant,
+  childrenOnChecked,
 }: CheckboxGroupItemProps): JSX.Element => {
   const [field] = useField({ name, type: 'checkbox' })
 
@@ -49,6 +51,7 @@ export const CheckboxGroupItem = ({
       disabled={disabled}
       ariaDescribedBy={ariaDescribedBy}
       variant={variant}
+      childrenOnChecked={childrenOnChecked}
     />
   )
 }
diff --git a/pro/src/ui-kit/form/RadioGroup/RadioGroup.tsx b/pro/src/ui-kit/form/RadioGroup/RadioGroup.tsx
index a845219da6e..82130c054d1 100644
--- a/pro/src/ui-kit/form/RadioGroup/RadioGroup.tsx
+++ b/pro/src/ui-kit/form/RadioGroup/RadioGroup.tsx
@@ -7,7 +7,7 @@ import { FieldSetLayout } from '../shared/FieldSetLayout/FieldSetLayout'
 
 import styles from './RadioGroup.module.scss'
 
-type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<
+export type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<
   T,
   Exclude<keyof T, Keys>
 > &
diff --git a/pro/src/ui-kit/form/shared/BaseCheckbox/BaseCheckbox.module.scss b/pro/src/ui-kit/form/shared/BaseCheckbox/BaseCheckbox.module.scss
index c4ded33f818..8b0a82f77cd 100644
--- a/pro/src/ui-kit/form/shared/BaseCheckbox/BaseCheckbox.module.scss
+++ b/pro/src/ui-kit/form/shared/BaseCheckbox/BaseCheckbox.module.scss
@@ -5,9 +5,6 @@
 @use "styles/mixins/_a11y.scss" as a11y;
 
 .base-checkbox {
-  display: inline-flex;
-  width: 100%;
-
   &-label-row {
     display: inline-flex;
     width: 100%;
@@ -83,20 +80,6 @@
     }
   }
 
-  &:hover {
-    text-decoration: underline;
-
-    .base-checkbox-input {
-      border-color: var(--color-secondary-light);
-
-      &:checked,
-      &:indeterminate {
-        border-color: var(--color-grey-dark);
-        background-color: var(--color-grey-dark);
-      }
-    }
-  }
-
   &.has-error {
     .base-checkbox-input {
       border-color: var(--color-input-border-color-error);
@@ -136,8 +119,27 @@
   }
 }
 
-.box-vairant,
-.inline-box-vairant {
+.base-checkbox-row {
+  display: inline-flex;
+  width: 100%;
+
+  &:hover {
+    text-decoration: underline;
+
+    .base-checkbox-input {
+      border-color: var(--color-secondary-light);
+
+      &:checked,
+      &:indeterminate {
+        border-color: var(--color-grey-dark);
+        background-color: var(--color-grey-dark);
+      }
+    }
+  }
+}
+
+.box-variant,
+.inline-box-variant {
   border: rem.torem(1px) solid var(--color-grey-semi-dark);
   border-radius: rem.torem(8px);
   min-width: 100%;
@@ -191,3 +193,13 @@
 .visually-hidden {
   @include a11y.visually-hidden;
 }
+
+.base-checkbox-children-on-checked {
+  padding: 0 rem.torem(16px) rem.torem(16px) 0;
+}
+
+.base-checkbox.has-children {
+  &.is-checked:not(.is-disabled) {
+    background: none;
+  }
+}
diff --git a/pro/src/ui-kit/form/shared/BaseCheckbox/BaseCheckbox.tsx b/pro/src/ui-kit/form/shared/BaseCheckbox/BaseCheckbox.tsx
index adc4eaf5cbe..677bd0e8447 100644
--- a/pro/src/ui-kit/form/shared/BaseCheckbox/BaseCheckbox.tsx
+++ b/pro/src/ui-kit/form/shared/BaseCheckbox/BaseCheckbox.tsx
@@ -29,6 +29,7 @@ export interface BaseCheckboxProps
   exceptionnallyHideLabelDespiteA11y?: boolean
   description?: string
   ariaDescribedBy?: string
+  childrenOnChecked?: JSX.Element
 }
 
 export const BaseCheckbox = forwardRef(
@@ -45,6 +46,7 @@ export const BaseCheckbox = forwardRef(
       exceptionnallyHideLabelDespiteA11y,
       description,
       ariaDescribedBy,
+      childrenOnChecked,
       ...props
     }: BaseCheckboxProps,
     forwardedRef: ForwardedRef<HTMLInputElement>
@@ -66,42 +68,52 @@ export const BaseCheckbox = forwardRef(
       labelClassName
     )
     const containerClasses = cn(styles['base-checkbox'], className, {
-      [styles['box-vairant']]: variant === CheckboxVariant.BOX,
+      [styles['box-variant']]: variant === CheckboxVariant.BOX,
       [styles['has-error']]: hasError,
       [styles['is-disabled']]: props.disabled,
       [styles['is-checked']]: props.checked,
+      [styles['has-children']]: childrenOnChecked,
     })
 
     return (
       <div className={containerClasses}>
-        <span className={styles['base-checkbox-label-row']}>
-          <input
-            ref={forwardedRef ?? innerRef}
-            aria-invalid={hasError}
-            {...(ariaDescribedBy && { 'aria-describedby': ariaDescribedBy })}
-            type="checkbox"
-            {...props}
-            className={cn(styles['base-checkbox-input'], inputClassName)}
-            id={id}
-          />
-          <label className={labelClasses} htmlFor={id}>
-            {icon && (
-              <span className={styles['base-checkbox-icon']}>
-                <SvgIcon
-                  src={icon}
-                  alt=""
-                  className={styles['base-checkbox-icon-svg']}
-                />
-              </span>
-            )}
-            {label}
-            {description && (
-              <p className={styles['base-checkbox-description']}>
-                {description}
-              </p>
-            )}
-          </label>
-        </span>
+        <div className={styles['base-checkbox-row']}>
+          <span className={styles['base-checkbox-label-row']}>
+            <input
+              ref={forwardedRef ?? innerRef}
+              aria-invalid={hasError}
+              {...(ariaDescribedBy && { 'aria-describedby': ariaDescribedBy })}
+              type="checkbox"
+              {...props}
+              className={cn(styles['base-checkbox-input'], inputClassName)}
+              id={id}
+            />
+            <label className={labelClasses} htmlFor={id}>
+              {icon && (
+                <span className={styles['base-checkbox-icon']}>
+                  <SvgIcon
+                    src={icon}
+                    alt=""
+                    className={styles['base-checkbox-icon-svg']}
+                  />
+                </span>
+              )}
+              {label}
+              {description && (
+                <p className={styles['base-checkbox-description']}>
+                  {description}
+                </p>
+              )}
+            </label>
+          </span>
+        </div>
+        <div>
+          {childrenOnChecked && props.checked && (
+            <div className={styles['base-checkbox-children-on-checked']}>
+              {childrenOnChecked}
+            </div>
+          )}
+        </div>
       </div>
     )
   }
diff --git a/pro/src/ui-kit/form/shared/BaseRadio/BaseRadio.tsx b/pro/src/ui-kit/form/shared/BaseRadio/BaseRadio.tsx
index 631ed83c8b9..5a2c7180d56 100644
--- a/pro/src/ui-kit/form/shared/BaseRadio/BaseRadio.tsx
+++ b/pro/src/ui-kit/form/shared/BaseRadio/BaseRadio.tsx
@@ -28,7 +28,6 @@ export const BaseRadio = ({
   ...props
 }: BaseRadioProps): JSX.Element => {
   const id = useId()
-  const childrenContainerId = useId()
 
   return (
     <div
@@ -63,13 +62,11 @@ export const BaseRadio = ({
           {label}
         </label>
       </div>
-      <div id={childrenContainerId}>
-        {childrenOnChecked && props.checked && (
-          <div className={styles['base-radio-children-on-checked']}>
-            {childrenOnChecked}
-          </div>
-        )}
-      </div>
+      {childrenOnChecked && props.checked && (
+        <div className={styles['base-radio-children-on-checked']}>
+          {childrenOnChecked}
+        </div>
+      )}
     </div>
   )
 }

From 9f1cc1392967bac99a3e0acb886c323ad0290b9f Mon Sep 17 00:00:00 2001
From: gmeigniez-pass <139768952+gmeigniez-pass@users.noreply.github.com>
Date: Fri, 3 Jan 2025 15:43:51 +0100
Subject: [PATCH 5/9] (PC-33527)[PRO] feat: Update storybook stories for
 checkbox group and base checkbox.

---
 .../CheckboxGroup/CheckboxGroup.stories.tsx   | 91 ++++++++++++++++++-
 .../BaseCheckbox/BaseCheckbox.stories.tsx     | 32 +++++--
 2 files changed, 115 insertions(+), 8 deletions(-)

diff --git a/pro/src/ui-kit/form/CheckboxGroup/CheckboxGroup.stories.tsx b/pro/src/ui-kit/form/CheckboxGroup/CheckboxGroup.stories.tsx
index 12448ce75b3..3c8a9bebf65 100644
--- a/pro/src/ui-kit/form/CheckboxGroup/CheckboxGroup.stories.tsx
+++ b/pro/src/ui-kit/form/CheckboxGroup/CheckboxGroup.stories.tsx
@@ -1,13 +1,17 @@
 import { Formik } from 'formik'
 
 import { CheckboxGroup } from './CheckboxGroup'
+import { CheckboxVariant } from '../shared/BaseCheckbox/BaseCheckbox'
 
 export default {
   title: 'ui-kit/forms/CheckboxGroup',
   component: CheckboxGroup,
   decorators: [
     (Story: any) => (
-      <Formik initialValues={{ accessibility: false }} onSubmit={() => {}}>
+      <Formik
+        initialValues={{ checkBoxes: { foo: true, bar: false, baz: false } }}
+        onSubmit={() => {}}
+      >
         {({ getFieldProps }) => {
           return <Story {...getFieldProps('group')} />
         }}
@@ -26,3 +30,88 @@ export const Default = {
     legend: 'This is the legend',
   },
 }
+
+export const Box = {
+  args: {
+    group: ['foo', 'bar', 'baz'].map((item) => ({
+      label: item,
+      name: `checkBoxes.${item}`,
+    })),
+    variant: CheckboxVariant.BOX,
+    groupName: 'checkBoxes',
+    legend: 'This is the legend',
+  },
+}
+
+export const BoxInline = {
+  args: {
+    group: ['foo', 'bar', 'baz'].map((item) => ({
+      label: item,
+      name: `checkBoxes.${item}`,
+    })),
+    inline: true,
+    variant: CheckboxVariant.BOX,
+    groupName: 'checkBoxes',
+    legend: 'This is the legend',
+  },
+}
+
+export const BoxWithChildren = {
+  args: {
+    group: ['foo', 'bar', 'baz'].map((item) => ({
+      label: item,
+      name: `checkBoxes.${item}`,
+      childrenOnChecked: <span>Child content for {item}</span>,
+    })),
+    variant: CheckboxVariant.BOX,
+    groupName: 'checkBoxes',
+    legend: 'This is the legend',
+  },
+}
+
+export const BoxWithCheckboxGroupChildren = {
+  args: {
+    group: ['foo', 'bar', 'baz'].map((item) => ({
+      label: item,
+      name: `checkBoxes.${item}`,
+      childrenOnChecked: (
+        <CheckboxGroup
+          legend="Sub group legend"
+          groupName="sub-name"
+          group={[
+            { label: 'sub-foo', name: 'checkBoxes.sub-foo' },
+            { label: 'sub-bar', name: 'checkBoxes.sub-bar' },
+          ]}
+          variant={CheckboxVariant.BOX}
+        />
+      ),
+    })),
+    variant: CheckboxVariant.BOX,
+    groupName: 'checkBoxes',
+    legend: 'This is the legend',
+  },
+}
+
+export const BoxWithCheckboxGroupChildrenNoLegend = {
+  args: {
+    group: ['foo', 'bar', 'baz'].map((item, i) => ({
+      label: <span id="parent-name-id">{item}</span>,
+      name: `checkBoxes.${item}`,
+      childrenOnChecked: (
+        <CheckboxGroup
+          describedBy="parent-name-id"
+          groupName="sub-name"
+          group={[
+            { label: 'sub-foo', name: `checkBoxes.sub-foo-${i}` },
+            { label: 'sub-bar', name: `checkBoxes.sub-bar-${i}` },
+          ]}
+          variant={CheckboxVariant.BOX}
+          inline={i === 0}
+        />
+      ),
+    })),
+    variant: CheckboxVariant.BOX,
+    groupName: 'checkBoxes',
+    legend: 'This is the legend',
+  },
+}
diff --git a/pro/src/ui-kit/form/shared/BaseCheckbox/BaseCheckbox.stories.tsx b/pro/src/ui-kit/form/shared/BaseCheckbox/BaseCheckbox.stories.tsx
index 4b1a6835de9..f635bb7d1e0 100644
--- a/pro/src/ui-kit/form/shared/BaseCheckbox/BaseCheckbox.stories.tsx
+++ b/pro/src/ui-kit/form/shared/BaseCheckbox/BaseCheckbox.stories.tsx
@@ -11,23 +11,41 @@ export default {
 
 export const Default: StoryObj<typeof BaseCheckbox> = {
   args: {
-    label: 'Checkbox Label',
+    label: 'Checkbox label',
     icon: strokeAccessibilityEye,
   },
 }
 
-export const WithPartialCheck: StoryObj<typeof BaseCheckbox> = {
+export const Checked: StoryObj<typeof BaseCheckbox> = {
   args: {
-    label: 'Checkbox Label',
-    icon: strokeAccessibilityEye,
+    label: 'Checkbox checked',
+    checked: true,
+    onChange: () => {},
+  },
+}
+
+export const PartialCheck: StoryObj<typeof BaseCheckbox> = {
+  args: {
+    label: 'Checkbox with partial check',
     partialCheck: true,
   },
 }
 
-export const WithBorder: StoryObj<typeof BaseCheckbox> = {
+export const Box: StoryObj<typeof BaseCheckbox> = {
   args: {
-    label: 'Checkbox Label with border',
-    icon: strokeAccessibilityEye,
+    label: 'Checkbox with border',
+    variant: CheckboxVariant.BOX,
+    checked: true,
+    onChange: () => {},
+  },
+}
+
+export const BoxWithChildren: StoryObj<typeof BaseCheckbox> = {
+  args: {
+    label: 'Checkbox with border and children',
     variant: CheckboxVariant.BOX,
+    checked: true,
+    childrenOnChecked: <span>Child content</span>,
+    onChange: () => {},
   },
 }

From bcd1c4699de7055362ef386559de5e3b38fbcc3f Mon Sep 17 00:00:00 2001
From: gmeigniez-pass <139768952+gmeigniez-pass@users.noreply.github.com>
Date: Fri, 3 Jan 2025 16:02:29 +0100
Subject: [PATCH 6/9] (PC-33527)[PRO] test: Add unit tests for base checkbox.

---
 .../shared/BaseCheckbox/BaseCheckbox.spec.tsx | 36 +++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 pro/src/ui-kit/form/shared/BaseCheckbox/BaseCheckbox.spec.tsx

diff --git a/pro/src/ui-kit/form/shared/BaseCheckbox/BaseCheckbox.spec.tsx b/pro/src/ui-kit/form/shared/BaseCheckbox/BaseCheckbox.spec.tsx
new file mode 100644
index 00000000000..6a605a216d2
--- /dev/null
+++ b/pro/src/ui-kit/form/shared/BaseCheckbox/BaseCheckbox.spec.tsx
@@ -0,0 +1,36 @@
+import { render, screen } from '@testing-library/react'
+
+import { BaseCheckbox } from './BaseCheckbox'
+
+describe('BaseCHeckbox', () => {
+  it('should render a checkbox with a label', () => {
+    render(<BaseCheckbox label="My label" checked onChange={() => {}} />)
+
+    expect(screen.getByLabelText('My label')).toBeChecked()
+  })
+
+  it('should show the checkbox children when the input is checked', () => {
+    render(
+      <BaseCheckbox
+        label="My label"
+        checked
+        onChange={() => {}}
+        childrenOnChecked={<span>My child</span>}
+      />
+    )
+
+    expect(screen.getByText('My child')).toBeInTheDocument()
+  })
+
+  it('should not show the checkbox children when the input is not checked', () => {
+    render(
+      <BaseCheckbox
+        label="My label"
+        onChange={() => {}}
+        childrenOnChecked={<span>My child</span>}
+      />
+    )
+
+    expect(screen.queryByText('My child')).not.toBeInTheDocument()
+  })
+})

From 6f973df2660797547382633caf0f8d16e9af1fcd Mon Sep 17 00:00:00 2001
From: ahello-pass <185243577+ahello-pass@users.noreply.github.com>
Date: Mon, 13 Jan 2025 11:00:44 +0100
Subject: [PATCH 7/9] (PC-33527)[PRO] fix: CheckboxGroup gap between items

---
 pro/src/ui-kit/form/CheckboxGroup/CheckboxGroup.module.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/pro/src/ui-kit/form/CheckboxGroup/CheckboxGroup.module.scss b/pro/src/ui-kit/form/CheckboxGroup/CheckboxGroup.module.scss
index 0ffc90032fa..54b8a4aba89 100644
--- a/pro/src/ui-kit/form/CheckboxGroup/CheckboxGroup.module.scss
+++ b/pro/src/ui-kit/form/CheckboxGroup/CheckboxGroup.module.scss
@@ -3,9 +3,10 @@
 .checkbox-group {
   display: flex;
   flex-direction: column;
-  gap: rem.torem(16px);
+  gap: rem.torem(8px);
 }
 
 .inline {
   flex-flow: row wrap;
+  gap: rem.torem(16px);
 }

From 6414c41f37e56fbd687928455622132f5ea58206 Mon Sep 17 00:00:00 2001
From: ahello-pass <185243577+ahello-pass@users.noreply.github.com>
Date: Mon, 13 Jan 2025 11:02:25 +0100
Subject: [PATCH 8/9] (PC-33527)[PRO] refactor: refactor CheckboxGroup story
 and add disabled case

---
 .../CheckboxGroup/CheckboxGroup.stories.tsx   | 72 +++++++++++++------
 1 file changed, 50 insertions(+), 22 deletions(-)

diff --git a/pro/src/ui-kit/form/CheckboxGroup/CheckboxGroup.stories.tsx b/pro/src/ui-kit/form/CheckboxGroup/CheckboxGroup.stories.tsx
index 3c8a9bebf65..169aeeed449 100644
--- a/pro/src/ui-kit/form/CheckboxGroup/CheckboxGroup.stories.tsx
+++ b/pro/src/ui-kit/form/CheckboxGroup/CheckboxGroup.stories.tsx
@@ -1,15 +1,28 @@
 import { Formik } from 'formik'
 
-import { CheckboxGroup } from './CheckboxGroup'
 import { CheckboxVariant } from '../shared/BaseCheckbox/BaseCheckbox'
 
+import { CheckboxGroup } from './CheckboxGroup'
+
 export default {
   title: 'ui-kit/forms/CheckboxGroup',
   component: CheckboxGroup,
   decorators: [
     (Story: any) => (
       <Formik
-        initialValues={{ checkBoxes: { foo: true, bar: false, baz: false } }}
+        initialValues={{
+          checkBoxes: {
+            foo: true,
+            bar: false,
+            baz: false,
+            'sub-foo-0': true,
+            'sub-bar-0': false,
+            'sub-foo-1': false,
+            'sub-bar-1': false,
+            'sub-foo-2': false,
+            'sub-bar-2': false,
+          },
+        }}
         onSubmit={() => {}}
       >
         {({ getFieldProps }) => {
@@ -28,50 +41,41 @@ export const Default = {
     })),
     groupName: 'checkBoxes',
     legend: 'This is the legend',
+    disabled: false,
   },
 }
 
 export const Box = {
   args: {
-    group: ['foo', 'bar', 'baz'].map((item) => ({
-      label: item,
-      name: `checkBoxes.${item}`,
-    })),
+    ...Default.args,
     variant: CheckboxVariant.BOX,
-    groupName: 'checkBoxes',
-    legend: 'This is the legend',
   },
 }
 
 export const BoxInline = {
   args: {
-    group: ['foo', 'bar', 'baz'].map((item) => ({
-      label: item,
-      name: `checkBoxes.${item}`,
-    })),
+    ...Default.args,
     inline: true,
     variant: CheckboxVariant.BOX,
-    groupName: 'checkBoxes',
-    legend: 'This is the legend',
   },
 }
 
 export const BoxWithChildren = {
   args: {
+    ...Default.args,
     group: ['foo', 'bar', 'baz'].map((item) => ({
       label: item,
       name: `checkBoxes.${item}`,
       childrenOnChecked: <span>Child content for {item}</span>,
     })),
     variant: CheckboxVariant.BOX,
-    groupName: 'checkBoxes',
-    legend: 'This is the legend',
   },
 }
 
 export const BoxWithCheckboxGroupChildren = {
   args: {
-    group: ['foo', 'bar', 'baz'].map((item) => ({
+    ...Default.args,
+    group: ['foo', 'bar', 'baz'].map((item, i) => ({
       label: item,
       name: `checkBoxes.${item}`,
       childrenOnChecked: (
@@ -79,23 +83,46 @@ export const BoxWithCheckboxGroupChildren = {
           legend="Sub group legend"
           groupName="sub-name"
           group={[
-            { label: 'sub-foo', name: 'checkBoxes.sub-foo' },
-            { label: 'sub-bar', name: 'checkBoxes.sub-bar' },
+            { label: 'sub-foo', name: `checkBoxes.sub-foo-${i}` },
+            { label: 'sub-bar', name: `checkBoxes.sub-bar-${i}` },
           ]}
           variant={CheckboxVariant.BOX}
         />
       ),
     })),
     variant: CheckboxVariant.BOX,
-    groupName: 'checkBoxes',
-    legend: 'This is the legend',
   },
 }
 
 export const BoxWithCheckboxGroupChildrenNoLegend = {
   args: {
+    ...Default.args,
+    group: ['foo', 'bar', 'baz'].map((item, i) => ({
+      label: <span>{item}</span>,
+      name: `checkBoxes.${item}`,
+      childrenOnChecked: (
+        <CheckboxGroup
+          describedBy="parent-name-id"
+          groupName="sub-name"
+          group={[
+            { label: 'sub-foo', name: `checkBoxes.sub-foo-${i}` },
+            { label: 'sub-bar', name: `checkBoxes.sub-bar-${i}` },
+          ]}
+          variant={CheckboxVariant.BOX}
+          inline={i === 0}
+        />
+      ),
+    })),
+    variant: CheckboxVariant.BOX,
+  },
+}
+
+export const BoxWithCheckboxGroupChildrenDisabled = {
+  args: {
+    ...Default.args,
+    disabled: true,
     group: ['foo', 'bar', 'baz'].map((item, i) => ({
-      label: <span id="parent-name-id">{item}</span>,
+      label: <span>{item}</span>,
       name: `checkBoxes.${item}`,
       childrenOnChecked: (
         <CheckboxGroup
@@ -107,6 +134,7 @@ export const BoxWithCheckboxGroupChildrenNoLegend = {
           ]}
           variant={CheckboxVariant.BOX}
           inline={i === 0}
+          disabled={true}
         />
       ),
     })),

From 806d693244e7577dd608603f6ecc2999a1952dee Mon Sep 17 00:00:00 2001
From: ahello-pass <185243577+ahello-pass@users.noreply.github.com>
Date: Mon, 13 Jan 2025 11:07:46 +0100
Subject: [PATCH 9/9] (BSR)[PRO] feat: add disabled with children component
 case to RadioGroup story

---
 .../form/RadioGroup/RadioGroup.stories.tsx    | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/pro/src/ui-kit/form/RadioGroup/RadioGroup.stories.tsx b/pro/src/ui-kit/form/RadioGroup/RadioGroup.stories.tsx
index 7464a58e386..feb3cce7818 100644
--- a/pro/src/ui-kit/form/RadioGroup/RadioGroup.stories.tsx
+++ b/pro/src/ui-kit/form/RadioGroup/RadioGroup.stories.tsx
@@ -111,3 +111,27 @@ export const InnerRadioGroupWithNoLegend = {
     ],
   },
 }
+
+export const WithChildrenDisabled = {
+  args: {
+    ...defaultArgs,
+    disabled: true,
+    variant: RadioVariant.BOX,
+    group: defaultArgs.group.map((g, i) => ({
+      ...g,
+      childrenOnChecked: (
+        <RadioGroup
+          legend="Choisir une sous-option"
+          name="name 4"
+          variant={RadioVariant.BOX}
+          group={[
+            { label: `Sous-option ${i + 1} 1`, value: `option${i}1` },
+            { label: `Sous-option ${i + 1} 2`, value: `option${i}2` },
+          ]}
+          disabled={true}
+        />
+      ),
+    })),
+    name: 'name 3',
+  },
+}