From e90a5dd6e6e920c90412e1be773472fd2ce571bb Mon Sep 17 00:00:00 2001 From: Nathan Vasse Date: Wed, 20 Dec 2023 11:01:54 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(react)=20add=20text=20variants=20to?= =?UTF-8?q?=20Button?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 | 5 ++ .../react/src/components/Button/_index.scss | 56 +++++++++++++++++-- .../src/components/Button/index.stories.tsx | 15 +++++ .../react/src/components/Button/index.tsx | 11 +++- .../react/src/components/Button/tokens.ts | 2 + 5 files changed, 83 insertions(+), 6 deletions(-) create mode 100644 .changeset/gold-brooms-enjoy.md diff --git a/.changeset/gold-brooms-enjoy.md b/.changeset/gold-brooms-enjoy.md new file mode 100644 index 0000000..febe064 --- /dev/null +++ b/.changeset/gold-brooms-enjoy.md @@ -0,0 +1,5 @@ +--- +"@openfun/cunningham-react": minor +--- + +add text variants to Button diff --git a/packages/react/src/components/Button/_index.scss b/packages/react/src/components/Button/_index.scss index accfbcc..b26aa2a 100644 --- a/packages/react/src/components/Button/_index.scss +++ b/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); diff --git a/packages/react/src/components/Button/index.stories.tsx b/packages/react/src/components/Button/index.stories.tsx index 81c5c1a..669929c 100644 --- a/packages/react/src/components/Button/index.stories.tsx +++ b/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: bolt, + }, +}; + 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", diff --git a/packages/react/src/components/Button/index.tsx b/packages/react/src/components/Button/index.tsx index 545c3fc..c7739d4 100644 --- a/packages/react/src/components/Button/index.tsx +++ b/packages/react/src/components/Button/index.tsx @@ -8,7 +8,13 @@ import React, { export type ButtonProps = ButtonHTMLAttributes & AnchorHTMLAttributes & { - 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( if (fullWidth) { classes.push("c__button--full-width"); } + if (["primary-text", "tertiary-text"].includes(color)) { + classes.push("c__button--text"); + } const iconElement = {icon}; const tagName = props.href ? "a" : "button"; return createElement( diff --git a/packages/react/src/components/Button/tokens.ts b/packages/react/src/components/Button/tokens.ts index 6626c3a..f4d54fe 100644 --- a/packages/react/src/components/Button/tokens.ts +++ b/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, }; };