From 30d08a956bd55fc49bb958ab239bea394c59cf92 Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Thu, 25 May 2023 15:41:07 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(react)=20add=20fullWidth=20props=20to?=
 =?UTF-8?q?=20Button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Can be useful in many situations.
---
 .changeset/nice-garlics-dance.md              |  5 +++
 .../react/src/components/Button/index.mdx     | 11 +++++++
 .../react/src/components/Button/index.scss    |  5 +++
 .../src/components/Button/index.stories.tsx   | 32 +++++++++++++++++++
 .../react/src/components/Button/index.tsx     |  5 +++
 .../Forms/Examples/index.stories.tsx          |  9 ++++++
 6 files changed, 67 insertions(+)
 create mode 100644 .changeset/nice-garlics-dance.md
 create mode 100644 packages/react/src/components/Forms/Examples/index.stories.tsx

diff --git a/.changeset/nice-garlics-dance.md b/.changeset/nice-garlics-dance.md
new file mode 100644
index 0000000..1ce19e3
--- /dev/null
+++ b/.changeset/nice-garlics-dance.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": minor
+---
+
+add fullWidth props to Button
diff --git a/packages/react/src/components/Button/index.mdx b/packages/react/src/components/Button/index.mdx
index e0fb15e..ab94249 100644
--- a/packages/react/src/components/Button/index.mdx
+++ b/packages/react/src/components/Button/index.mdx
@@ -52,6 +52,17 @@ The button can be disabled. The disabled button will render the same no matter w
   <Story id="components-button--disabled"/>
 </Canvas>
 
+## Full width
+
+The button can be set to full width. You can use the `fullWidth` prop to do so.
+
+<Canvas sourceState="shown">
+  <Story id="components-button--full-width"/>
+</Canvas>
+<Canvas sourceState="shown">
+  <Story id="components-button--full-width-with-icon"/>
+</Canvas>
+
 ## Props
 
 You can use all the props of the native html `<button>` element props plus the following.
diff --git a/packages/react/src/components/Button/index.scss b/packages/react/src/components/Button/index.scss
index f9fd4ec..702f69c 100644
--- a/packages/react/src/components/Button/index.scss
+++ b/packages/react/src/components/Button/index.scss
@@ -30,6 +30,11 @@
     pointer-events: none;
   }
 
+  &--full-width {
+    width: 100%;
+    justify-content: center;
+  }
+
   &--medium {
     height: var(--c--components--button--medium-height);
     font-size: var(--c--components--button--medium-font-size);
diff --git a/packages/react/src/components/Button/index.stories.tsx b/packages/react/src/components/Button/index.stories.tsx
index 143cd28..f841cda 100644
--- a/packages/react/src/components/Button/index.stories.tsx
+++ b/packages/react/src/components/Button/index.stories.tsx
@@ -54,6 +54,38 @@ export const Small: Story = {
   },
 };
 
+export const FullWidth: Story = {
+  args: {
+    children: "Primary",
+    color: "primary",
+    fullWidth: true,
+  },
+};
+
+export const FullWidthWithIcon: Story = {
+  args: {
+    children: "Primary",
+    color: "primary",
+    fullWidth: true,
+    icon: (
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fill="currentColor"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M17.8724 10.0166H13.248L16.6251 4.07749C16.9258 3.54846 16.2447 3.01176 15.8005 3.42755L6.57343 12.0655C6.22192 12.3946 6.45489 12.9838 6.93615 12.9838H11.5606L8.18353 18.9229C7.88275 19.4519 8.56335 19.9886 9.00746 19.5728L18.2352 10.9349C18.5867 10.6058 18.3537 10.0166 17.8724 10.0166Z"
+        />
+      </svg>
+    ),
+  },
+};
+
 export const IconLeft: Story = {
   args: {
     children: "Icon",
diff --git a/packages/react/src/components/Button/index.tsx b/packages/react/src/components/Button/index.tsx
index cfb3b62..ecb6cb5 100644
--- a/packages/react/src/components/Button/index.tsx
+++ b/packages/react/src/components/Button/index.tsx
@@ -6,6 +6,7 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   icon?: ReactNode;
   iconPosition?: "left" | "right";
   active?: boolean;
+  fullWidth?: boolean;
 }
 
 export const Button = forwardRef<HTMLButtonElement, Props>(
@@ -18,6 +19,7 @@ export const Button = forwardRef<HTMLButtonElement, Props>(
       icon,
       active,
       className,
+      fullWidth,
       ...props
     },
     ref
@@ -37,6 +39,9 @@ export const Button = forwardRef<HTMLButtonElement, Props>(
     if (active) {
       classes.push("c__button--active");
     }
+    if (fullWidth) {
+      classes.push("c__button--full-width");
+    }
     return (
       <button className={classes.join(" ")} {...props} ref={ref}>
         {!!icon && iconPosition === "left" && icon}
diff --git a/packages/react/src/components/Forms/Examples/index.stories.tsx b/packages/react/src/components/Forms/Examples/index.stories.tsx
new file mode 100644
index 0000000..a12d806
--- /dev/null
+++ b/packages/react/src/components/Forms/Examples/index.stories.tsx
@@ -0,0 +1,9 @@
+import { Meta } from "@storybook/react";
+
+export default {
+  title: "Components/Forms/Examples",
+} as Meta;
+
+export const Login = () => {
+  return <div>DOUDOU</div>;
+};