From 8e049bc21ea87dbe0bb8bfabb63202b9ef67734e Mon Sep 17 00:00:00 2001
From: jbpenrath <jb.penrath@gmail.com>
Date: Wed, 6 Aug 2025 17:01:30 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(react)=20disable=20button=20link?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

According to its prop, the Button component can be rendered as
a link but in this case, the prop `disabled` has no effect. So to fix
that if the Button receives a `href` prop and is disabled, we apply
a modifier class `.c__button--disabled`.
---
 .changeset/fresh-dots-happen.md                       |  5 +++++
 packages/react/src/components/Button/_index.scss      |  2 +-
 packages/react/src/components/Button/index.spec.tsx   | 11 +++++++++++
 .../react/src/components/Button/index.stories.tsx     | 10 ++++++++++
 packages/react/src/components/Button/index.tsx        |  3 +++
 5 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/fresh-dots-happen.md

diff --git a/.changeset/fresh-dots-happen.md b/.changeset/fresh-dots-happen.md
new file mode 100644
index 0000000..05ad483
--- /dev/null
+++ b/.changeset/fresh-dots-happen.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": patch
+---
+
+Apply disable style to disabled button link
diff --git a/packages/react/src/components/Button/_index.scss b/packages/react/src/components/Button/_index.scss
index b26aa2a..bd0eed4 100644
--- a/packages/react/src/components/Button/_index.scss
+++ b/packages/react/src/components/Button/_index.scss
@@ -32,7 +32,7 @@
     border-color: currentColor;
   }
 
-  &:disabled {
+  &:disabled, &.c__button--disabled {
     background-color: var(--c--theme--colors--greyscale-200);
     color: var(--c--theme--colors--greyscale-600);
     cursor: not-allowed;
diff --git a/packages/react/src/components/Button/index.spec.tsx b/packages/react/src/components/Button/index.spec.tsx
index 5f46e32..b715ea8 100644
--- a/packages/react/src/components/Button/index.spec.tsx
+++ b/packages/react/src/components/Button/index.spec.tsx
@@ -60,11 +60,22 @@ describe("<Button/>", () => {
       </Button>,
     );
     const button = screen.getByRole("button", { name: "Test button" });
+    expect(button).toHaveAttribute("disabled");
     expect(handleClick).not.toBeCalled();
     await act(async () => user.click(button));
     expect(handleClick).not.toHaveBeenCalled();
   });
 
+  it("renders disabled link", async () => {
+    render(
+      <Button href="https://perdu.com" disabled={true}>
+        Test button link
+      </Button>,
+    );
+    const button = screen.getByRole("link", { name: "Test button link" });
+    expect(button.classList).toContain("c__button--disabled");
+  });
+
   it("renders as link when href is used", () => {
     render(
       <Button
diff --git a/packages/react/src/components/Button/index.stories.tsx b/packages/react/src/components/Button/index.stories.tsx
index 00d174b..e1b09d0 100644
--- a/packages/react/src/components/Button/index.stories.tsx
+++ b/packages/react/src/components/Button/index.stories.tsx
@@ -20,6 +20,7 @@ export const All: Story = {
         <Button {...Tertiary.args} />
         <Button {...TertiaryText.args} />
         <Button {...Disabled.args} />
+        <Button {...LinkDisabled.args} />
         <Button {...Danger.args} />
       </div>
     );
@@ -70,6 +71,15 @@ export const Disabled: Story = {
   },
 };
 
+export const LinkDisabled: Story = {
+  args: {
+    children: "Disabled",
+    color: "primary",
+    disabled: true,
+    href: "https://perdu.com",
+  },
+};
+
 export const Danger: Story = {
   args: {
     children: "Danger",
diff --git a/packages/react/src/components/Button/index.tsx b/packages/react/src/components/Button/index.tsx
index 0ff2802..060dfc4 100644
--- a/packages/react/src/components/Button/index.tsx
+++ b/packages/react/src/components/Button/index.tsx
@@ -59,6 +59,9 @@ export const Button = ({
   if (["primary-text", "tertiary-text"].includes(color)) {
     classes.push("c__button--text");
   }
+  if (props.href && props.disabled) {
+    classes.push("c__button--disabled");
+  }
   const iconElement = <span className="c__button__icon">{icon}</span>;
   const tagName = props.href ? "a" : "button";
   return createElement(