From 05f92520299ad3e5da75a8d5c4b5c1da90238958 Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Mon, 16 Jan 2023 11:17:27 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(react)=20add=20icon=20to=20Button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The DS does not offer an icons set yet but it seems important to
already provide a support for external icons in Button.
---
 .../react/src/components/Button/index.scss    | 12 +++++
 .../src/components/Button/index.spec.tsx      | 18 +++++++
 .../src/components/Button/index.stories.mdx   | 13 +++++
 .../src/components/Button/index.stories.tsx   | 51 +++++++++++++++++++
 .../react/src/components/Button/index.tsx     | 20 ++++++--
 5 files changed, 111 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/components/Button/index.scss b/packages/react/src/components/Button/index.scss
index 5959124..6da857c 100644
--- a/packages/react/src/components/Button/index.scss
+++ b/packages/react/src/components/Button/index.scss
@@ -12,6 +12,18 @@
   font-size: var(--c--components--button--font-size);
   font-weight: var(--c--components--button--font-weight);
 
+  &--with-icon--left, &--with-icon--right {
+    gap: var(--c--theme--spacings--t);
+  }
+
+  &--with-icon--left {
+    padding: 0 var(--c--theme--spacings--s) 0 var(--c--theme--spacings--t);
+  }
+
+  &--with-icon--right {
+    padding: 0 var(--c--theme--spacings--t) 0 var(--c--theme--spacings--s);
+  }
+
   &--primary {
     background-color: var(--c--theme--colors--primary-500);
     color: var(--c--theme--colors--primary-text);
diff --git a/packages/react/src/components/Button/index.spec.tsx b/packages/react/src/components/Button/index.spec.tsx
index 52f02a9..c322f08 100644
--- a/packages/react/src/components/Button/index.spec.tsx
+++ b/packages/react/src/components/Button/index.spec.tsx
@@ -12,6 +12,24 @@ describe("<Button/>", () => {
     expect(button.classList.contains("c__button")).toBe(true);
   });
 
+  it("renders with custom class when using left icon", () => {
+    render(<Button icon={<div>Icon</div>}>Test button</Button>);
+    const button = screen.getByText("Test button");
+    expect(button.classList.contains("c__button")).toBe(true);
+    expect(button.classList.contains("c__button--with-icon--left")).toBe(true);
+  });
+
+  it("renders with custom class when using right icon", () => {
+    render(
+      <Button icon={<div>Icon</div>} iconPosition="right">
+        Test button
+      </Button>
+    );
+    const button = screen.getByText("Test button");
+    expect(button.classList.contains("c__button")).toBe(true);
+    expect(button.classList.contains("c__button--with-icon--right")).toBe(true);
+  });
+
   it("call onClick when click occurs", async () => {
     const user = userEvent.setup();
     const handleClick = vi.fn();
diff --git a/packages/react/src/components/Button/index.stories.mdx b/packages/react/src/components/Button/index.stories.mdx
index 3abe403..12dc759 100644
--- a/packages/react/src/components/Button/index.stories.mdx
+++ b/packages/react/src/components/Button/index.stories.mdx
@@ -22,6 +22,19 @@ The Cunningham Button behaves the same as the native html `<button>` element, bu
   code={`import { Button } from "@openfun/cunningham-react";`}
 />
 
+## Icons
+
+You can use icons within the button by passing the icon name as a prop.
+
+> Use the attribute `iconPosition` to position the icon on the left or right side of the button. The default is `left`.
+
+<Canvas withSource="open">
+  <Story id="button--icon-left"/>
+</Canvas>
+
+<Canvas withSource="open">
+  <Story id="button--icon-right"/>
+</Canvas>
 
 ## Disabled
 
diff --git a/packages/react/src/components/Button/index.stories.tsx b/packages/react/src/components/Button/index.stories.tsx
index 34e780f..0a61ae3 100644
--- a/packages/react/src/components/Button/index.stories.tsx
+++ b/packages/react/src/components/Button/index.stories.tsx
@@ -33,3 +33,54 @@ Disabled.args = {
   color: "primary",
   disabled: true,
 };
+
+export const Danger = Template.bind({});
+Danger.args = {
+  children: "Danger",
+  color: "danger",
+};
+
+export const IconLeft = Template.bind({});
+IconLeft.args = {
+  children: "Icon",
+  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>
+  ),
+  color: "primary",
+};
+
+export const IconRight = Template.bind({});
+IconRight.args = {
+  children: "Icon",
+  iconPosition: "right",
+  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>
+  ),
+  color: "primary",
+};
diff --git a/packages/react/src/components/Button/index.tsx b/packages/react/src/components/Button/index.tsx
index 5a25770..5facb23 100644
--- a/packages/react/src/components/Button/index.tsx
+++ b/packages/react/src/components/Button/index.tsx
@@ -1,13 +1,27 @@
-import React, { ButtonHTMLAttributes } from "react";
+import React, { ButtonHTMLAttributes, ReactNode } from "react";
 
 interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   color?: "primary" | "secondary" | "tertiary";
+  icon?: ReactNode;
+  iconPosition?: "left" | "right";
 }
 
-export const Button = ({ children, color = "primary", ...props }: Props) => {
+export const Button = ({
+  children,
+  color = "primary",
+  iconPosition = "left",
+  icon,
+  ...props
+}: Props) => {
+  const classes = ["c__button", "c__button--" + color];
+  if (icon) {
+    classes.push("c__button--with-icon--" + iconPosition);
+  }
   return (
-    <button className={"c__button c__button--" + color} {...props}>
+    <button className={classes.join(" ")} {...props}>
+      {!!icon && iconPosition === "left" && icon}
       {children}
+      {!!icon && iconPosition === "right" && icon}
     </button>
   );
 };