✨(react) add text variants to Button

These variant are smaller buttons without background that can be used
in cases where we want the Button to have a minimal design.

.changeset/gold-brooms-enjoy.md

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

packages/react/src/components/Button/_index.scss

@@ -39,6 +39,10 @@
     pointer-events: none;
   }
 
+  &--text {
+    font-weight: var(--c--components--button--text-font-weight);
+  }
+
   &--full-width {
     width: 100%;
     justify-content: center;
@@ -49,6 +53,10 @@
     font-size: var(--c--components--button--medium-font-size);
     padding: 0 var(--c--theme--spacings--s);
 
+    &.c__button--text {
+      height: var(--c--components--button--medium-text-height);
+    }
+
     &.c__button--icon-only {
       width: var(--c--components--button--medium-height);
     }
@@ -119,6 +127,24 @@
     }
   }
 
+  &--primary-text {
+    color: var(--c--theme--colors--primary-600);
+    background-color: transparent;
+
+    &:hover, &:focus-visible {
+      background-color: var(--c--theme--colors--primary-100);
+      color: var(--c--theme--colors--primary-700);
+    }
+
+    &:active, &.c__button--active {
+      background-color: transparent;
+    }
+
+    &:disabled {
+      background-color: transparent;
+    }
+  }
+
   &--secondary {
     background-color: var(--c--theme--colors--primary-100);
     color: var(--c--theme--colors--primary-700);
@@ -135,16 +161,17 @@
   }
 
   &--tertiary {
-    background-color: transparent;
-    color: var(--c--theme--colors--greyscale-800);
+    background-color: var(--c--theme--colors--greyscale-100);
+    color: var(--c--theme--colors--greyscale-700);
+    font-weight: var(--c--theme--font--weights--medium);
 
     &:hover, &:focus-visible {
-      background-color: var(--c--theme--colors--greyscale-200);
-      color: var(--c--theme--colors--greyscale-900);
+      background-color: var(--c--theme--colors--greyscale-700);
+      color: var(--c--theme--colors--greyscale-000);
     }
 
     &:active, &.c__button--active {
-      background-color: var(--c--theme--colors--greyscale-100);
+      background-color: var(--c--theme--colors--greyscale-000);
       color: var(--c--theme--colors--greyscale-800);
     }
 
@@ -153,6 +180,25 @@
     }
   }
 
+  &--tertiary-text {
+    color: var(--c--theme--colors--greyscale-700);
+    background-color: transparent;
+
+    &:hover, &:focus-visible {
+      background-color: var(--c--theme--colors--greyscale-100);
+      color: var(--c--theme--colors--greyscale-800);
+    }
+
+    &:active, &.c__button--active {
+      background-color: transparent;
+    }
+
+    &:disabled {
+      background-color: transparent;
+    }
+  }
+
+
   &--danger {
     background-color: var(--c--theme--colors--danger-500);
     color: var(--c--theme--colors--danger-text);

packages/react/src/components/Button/index.stories.tsx

@@ -17,6 +17,14 @@ export const Primary: Story = {
   },
 };
 
+export const PrimaryText: Story = {
+  args: {
+    children: "Primary Text",
+    color: "primary-text",
+    icon: <span className="material-icons">bolt</span>,
+  },
+};
+
 export const Secondary: Story = {
   args: {
     children: "Secondary",
@@ -31,6 +39,13 @@ export const Tertiary: Story = {
   },
 };
 
+export const TertiaryText: Story = {
+  args: {
+    children: "Tertiary Text",
+    color: "tertiary-text",
+  },
+};
+
 export const Disabled: Story = {
   args: {
     children: "Disabled",

packages/react/src/components/Button/index.tsx

@@ -8,7 +8,13 @@ import React, {
 
 export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
   AnchorHTMLAttributes<HTMLAnchorElement> & {
-    color?: "primary" | "secondary" | "tertiary" | "danger";
+    color?:
+      | "primary"
+      | "primary-text"
+      | "secondary"
+      | "tertiary"
+      | "tertiary-text"
+      | "danger";
     size?: "medium" | "small" | "nano";
     icon?: ReactNode;
     iconPosition?: "left" | "right";
@@ -51,6 +57,9 @@ export const Button = forwardRef<ButtonElement, ButtonProps>(
     if (fullWidth) {
       classes.push("c__button--full-width");
     }
+    if (["primary-text", "tertiary-text"].includes(color)) {
+      classes.push("c__button--text");
+    }
     const iconElement = <span className="c__button__icon">{icon}</span>;
     const tagName = props.href ? "a" : "button";
     return createElement(

packages/react/src/components/Button/tokens.ts

@@ -5,6 +5,7 @@ export const tokens = (defaults: DefaultTokens) => {
     "border-radius": "8px",
     "border-radius--active": "2px",
     "border-radius--focus": "8px",
+    "medium-text-height": "36px",
     "medium-height": "48px",
     "small-height": "32px",
     "nano-height": "24px",
@@ -16,5 +17,6 @@ export const tokens = (defaults: DefaultTokens) => {
     "nano-icon-font-size": defaults.theme.font.sizes.l,
     "font-weight": defaults.theme.font.weights.regular,
     "font-family": defaults.theme.font.families.base,
+    "text-font-weight": defaults.theme.font.weights.medium,
   };
 };