✨(react) add fullWidth props to Button

Can be useful in many situations.

.changeset/nice-garlics-dance.md

@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": minor
+---
+
+add fullWidth props to Button

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.

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);

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",

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}

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>;
+};