🐛(react) disable button link

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

@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": patch
+---
+
+Apply disable style to disabled button link

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;

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

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

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(