From 8fd34add8afda7847e6dd1dda95e5b93468a3fec Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Thu, 7 Sep 2023 17:07:59 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(react)=20fix=20Radio,=20Checkbox?=
 =?UTF-8?q?=20fullWidth?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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                      |  5 +++++
 .../react/src/components/Forms/Checkbox/index.scss    |  8 ++++++++
 .../src/components/Forms/Checkbox/index.stories.tsx   | 11 +++++++++++
 .../react/src/components/Forms/Checkbox/index.tsx     |  1 +
 .../src/components/Forms/Radio/index.stories.tsx      | 11 +++++++++++
 packages/react/src/components/Forms/Radio/index.tsx   |  1 +
 6 files changed, 37 insertions(+)
 create mode 100644 .changeset/stale-frogs-search.md

diff --git a/.changeset/stale-frogs-search.md b/.changeset/stale-frogs-search.md
new file mode 100644
index 0000000..cd293ab
--- /dev/null
+++ b/.changeset/stale-frogs-search.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": patch
+---
+
+fix Radio, Checkbox fullWidth
diff --git a/packages/react/src/components/Forms/Checkbox/index.scss b/packages/react/src/components/Forms/Checkbox/index.scss
index 0479109..90966f9 100644
--- a/packages/react/src/components/Forms/Checkbox/index.scss
+++ b/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;
+    }
+  }
 }
diff --git a/packages/react/src/components/Forms/Checkbox/index.stories.tsx b/packages/react/src/components/Forms/Checkbox/index.stories.tsx
index 41ffd1f..ff8a2f2 100644
--- a/packages/react/src/components/Forms/Checkbox/index.stories.tsx
+++ b/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,
 
diff --git a/packages/react/src/components/Forms/Checkbox/index.tsx b/packages/react/src/components/Forms/Checkbox/index.tsx
index 5074cbe..0a5f117 100644
--- a/packages/react/src/components/Forms/Checkbox/index.tsx
+++ b/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}>
diff --git a/packages/react/src/components/Forms/Radio/index.stories.tsx b/packages/react/src/components/Forms/Radio/index.stories.tsx
index 1f04b48..96cea8a 100644
--- a/packages/react/src/components/Forms/Radio/index.stories.tsx
+++ b/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,
 
diff --git a/packages/react/src/components/Forms/Radio/index.tsx b/packages/react/src/components/Forms/Radio/index.tsx
index 8f140d9..d428f23 100644
--- a/packages/react/src/components/Forms/Radio/index.tsx
+++ b/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}>