🐛(react) fix Radio, Checkbox fullWidth

The fullWidth was buggy for those components, the label was floating
in the middle of the empty space where it feels correct to keep it
aligned on the left.

.changeset/stale-frogs-search.md

@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": patch
+---
+
+fix Radio, Checkbox fullWidth

packages/react/src/components/Forms/Checkbox/index.scss

@@ -125,4 +125,12 @@
       color: var(--c--theme--colors--greyscale-600);
     }
   }
+
+  &--full-width {
+    width: 100%;
+
+    .c__field {
+      align-items: flex-start;
+    }
+  }
 }

packages/react/src/components/Forms/Checkbox/index.stories.tsx

@@ -68,6 +68,17 @@ export const WithTexts = {
   },
 };
 
+export const FullWidth = {
+  render: Template,
+
+  args: {
+    checked: true,
+    fullWidth: true,
+    label: "Label",
+    text: "This is an optional text",
+  },
+};
+
 export const Disabled = {
   render: Template,
 

packages/react/src/components/Forms/Checkbox/index.tsx

@@ -37,6 +37,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
       <label
         className={classNames("c__checkbox", {
           "c__checkbox--disabled": props.disabled,
+          "c__checkbox--full-width": props.fullWidth,
         })}
       >
         <Field compact={true} {...props}>

packages/react/src/components/Forms/Radio/index.stories.tsx

@@ -59,6 +59,17 @@ export const WithText = {
   },
 };
 
+export const FullWidth = {
+  render: Template,
+
+  args: {
+    checked: true,
+    fullWidth: true,
+    label: "Label",
+    text: "This is an optional text",
+  },
+};
+
 export const Disabled = {
   render: Template,
 

packages/react/src/components/Forms/Radio/index.tsx

@@ -17,6 +17,7 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
       <label
         className={classNames("c__checkbox", "c__radio", {
           "c__checkbox--disabled": props.disabled,
+          "c__checkbox--full-width": props.fullWidth,
         })}
       >
         <Field compact={true} {...props}>