From 8f15539011acb57ffc9b1543bb81b80508347cb3 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Tue, 30 Jan 2024 14:47:10 +0100 Subject: [PATCH] Removed utrecht and restored style and functionality --- .../css/src/components/button/button.scss | 71 +++++- packages/react/package.json | 1 - packages/react/src/Button/Button.test.tsx | 8 +- packages/react/src/Button/Button.tsx | 37 ++- pnpm-lock.yaml | 43 +--- .../{utrecht => amsterdam}/action.tokens.json | 2 +- .../src/common/utrecht/focus.tokens.json | 7 - .../components/amsterdam/button.tokens.json | 35 ++- .../src/components/utrecht/button.tokens.json | 214 ------------------ .../src/Button/Button.docs.mdx | 22 +- .../src/Button/Button.stories.tsx | 44 +++- 11 files changed, 183 insertions(+), 301 deletions(-) rename proprietary/tokens/src/common/{utrecht => amsterdam}/action.tokens.json (95%) delete mode 100644 proprietary/tokens/src/common/utrecht/focus.tokens.json delete mode 100644 proprietary/tokens/src/components/utrecht/button.tokens.json diff --git a/packages/css/src/components/button/button.scss b/packages/css/src/components/button/button.scss index 205df7d0d0..53ae9efab4 100644 --- a/packages/css/src/components/button/button.scss +++ b/packages/css/src/components/button/button.scss @@ -5,28 +5,73 @@ @import "../../../node_modules/@utrecht/components/button/css"; -@mixin reset { - -webkit-text-size-adjust: 100%; -} - -.amsterdam-button { +@mixin amsterdam-button { + border: none; + cursor: var(--amsterdam-action-activate-cursor, revert); + display: inline-flex; + font-family: var(--amsterdam-button-font-family); font-size: var(--amsterdam-button-spacious-font-size); + gap: var(--amsterdam-button-gap); line-height: var(--amsterdam-button-spacious-line-height); - - @include reset; + outline-offset: var(--amsterdam-button-outline-offset); + padding-block: var(--amsterdam-button-padding-block-start) var(--amsterdam-button-padding-block-end); + padding-inline: var(--amsterdam-button-padding-inline-start) var(--amsterdam-button-padding-inline-end); + -webkit-text-size-adjust: 100%; .amsterdam-theme--compact & { font-size: var(--amsterdam-breadcrumb-compact-font-size); line-height: var(--amsterdam-breadcrumb-compact-line-height); } + + &--busy { + cursor: var(--amsterdam-action-busy-cursor, revert); + } + + &:disabled, + &[aria-disabled="true"] { + cursor: var(--amsterdam-action-disabled-cursor, revert); + } + + &:hover:not(:disabled, [aria-disabled="true"]) { + cursor: var(--amsterdam-action-hover-cursor, pointer); + } + + @media screen and (forced-colors: active) { + background-color: ButtonFace; + border: 2px solid buttonborder; + color: ButtonText; + } +} + +.amsterdam-button--primary { + @include amsterdam-button; + + background-color: var(--amsterdam-button-primary-background-color); + color: var(--amsterdam-button-primary-color); + + &:disabled, + [aria-disabled="true"] { + background-color: var(--amsterdam-button-primary-disabled-background-color); + cursor: var(--amsterdam-action-disabled-cursor, revert); + } + + &:hover:not(:disabled, [aria-disabled="true"]) { + background-color: var(--amsterdam-button-primary-hover-background-color); + } } .amsterdam-button--secondary { + @include amsterdam-button; + + background-color: var(--amsterdam-button-secondary-background-color); box-shadow: var(--amsterdam-button-secondary-box-shadow); + color: var(--amsterdam-button-secondary-color); &:disabled, [aria-disabled="true"] { + background-color: var(--amsterdam-button-secondary-disabled-background-color); box-shadow: var(--amsterdam-button-secondary-disabled-box-shadow); + color: var(--amsterdam-button-secondary-disabled-color); } &:hover:not(:disabled, [aria-disabled="true"]) { @@ -39,8 +84,20 @@ } .amsterdam-button--tertiary { + @include amsterdam-button; + + background-color: var(--amsterdam-button-tertiary-background-color); + color: var(--amsterdam-button-tertiary-color); + + &:disabled, + [aria-disabled="true"] { + background-color: var(--amsterdam-button-tertiary-disabled-background-color); + color: var(--amsterdam-button-tertiary-disabled-color); + } + &:hover:not(:disabled, [aria-disabled="true"]) { box-shadow: var(--amsterdam-button-tertiary-hover-box-shadow); + color: var(--amsterdam-button-tertiary-hover-color); } } diff --git a/packages/react/package.json b/packages/react/package.json index fca825fd12..e83e84203f 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -33,7 +33,6 @@ ], "dependencies": { "@amsterdam/design-system-react-icons": "workspace:*", - "@utrecht/component-library-react": "3.0.0", "clsx": "2.1.0" }, "devDependencies": { diff --git a/packages/react/src/Button/Button.test.tsx b/packages/react/src/Button/Button.test.tsx index 46b35b9ee2..f782144b71 100644 --- a/packages/react/src/Button/Button.test.tsx +++ b/packages/react/src/Button/Button.test.tsx @@ -24,7 +24,7 @@ describe('Button', () => { expect(button).toBeInTheDocument() expect(button).toHaveAttribute('type', 'button') - expect(button).toHaveClass('utrecht-button--primary-action') + expect(button).toHaveClass('amsterdam-button--primary') }) it('renders a button with a specified variant', () => { @@ -49,11 +49,11 @@ describe('Button', () => { }) expect(buttonPrimary).toBeInTheDocument() - expect(buttonPrimary).toHaveClass('utrecht-button--primary-action') + expect(buttonPrimary).toHaveClass('amsterdam-button--primary') expect(buttonSecondary).toBeInTheDocument() - expect(buttonSecondary).toHaveClass('utrecht-button--secondary-action') + expect(buttonSecondary).toHaveClass('amsterdam-button--secondary') expect(buttonTertiary).toBeInTheDocument() - expect(buttonTertiary).toHaveClass('utrecht-button--subtle') + expect(buttonTertiary).toHaveClass('amsterdam-button--tertiary') }) it('renders a disabled button with a specified variant', () => { diff --git a/packages/react/src/Button/Button.tsx b/packages/react/src/Button/Button.tsx index 43859e9d68..3cb471fa0e 100644 --- a/packages/react/src/Button/Button.tsx +++ b/packages/react/src/Button/Button.tsx @@ -1,47 +1,40 @@ /** * @license EUPL-1.2+ - * Copyright (c) 2021 Robbert Broersma - * Copyright (c) 2023 Gemeente Amsterdam + * Copyright (c) 2024 Gemeente Amsterdam */ -import { Button as CommunityButton } from '@utrecht/component-library-react' import clsx from 'clsx' import { forwardRef } from 'react' import type { ButtonHTMLAttributes, ForwardedRef, PropsWithChildren } from 'react' export type ButtonProps = { variant?: 'primary' | 'secondary' | 'tertiary' + busy?: boolean + pressed?: boolean } & PropsWithChildren> -type CommunityButtonAppearance = 'primary-action-button' | 'secondary-action-button' | 'subtle-button' - -function getAppearance(variant: ButtonProps['variant']): CommunityButtonAppearance { - switch (variant) { - case 'secondary': - return 'secondary-action-button' - case 'tertiary': - return 'subtle-button' - default: - return 'primary-action-button' - } -} - export const Button = forwardRef( - ({ children, disabled, variant = 'primary', ...restProps }: ButtonProps, ref: ForwardedRef) => { + ( + { children, type, disabled, busy, pressed, variant = 'primary', ...restProps }: ButtonProps, + ref: ForwardedRef, + ) => { return ( - {children} - + ) }, ) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index adf858a6e7..a90651db53 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -120,9 +120,6 @@ importers: '@amsterdam/design-system-react-icons': specifier: workspace:* version: link:../../proprietary/react-icons - '@utrecht/component-library-react': - specifier: 3.0.0 - version: 3.0.0(react-dom@18.2.0)(react@18.2.0) clsx: specifier: 2.1.0 version: 2.1.0 @@ -177,7 +174,7 @@ importers: version: 18.2.48 jest: specifier: 29.7.0 - version: 29.7.0(@types/node@20.11.7) + version: 29.7.0 jest-environment-jsdom: specifier: 29.7.0 version: 29.7.0 @@ -5428,7 +5425,7 @@ packages: chalk: 3.0.0 css.escape: 1.5.1 dom-accessibility-api: 0.6.3 - jest: 29.7.0(@types/node@20.11.7) + jest: 29.7.0 lodash: 4.17.21 redent: 3.0.0 dev: true @@ -6077,28 +6074,6 @@ packages: resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==} dev: true - /@utrecht/component-library-react@3.0.0(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-7ftpjtQ6ygIMqlB+pWQZAT7psFo1oXkbBSlbVw/uMV5OABRDX5t3V2lN/UDTPjdMRtcj8ZBYl19zPcfkV+Gc5w==} - peerDependencies: - date-fns: ^2.30.0 - react: '18' - react-dom: '18' - react-vega: ^7.6.0 - vega: ^5.25.0 - peerDependenciesMeta: - date-fns: - optional: true - react-vega: - optional: true - vega: - optional: true - dependencies: - clsx: 1.2.1 - lodash.chunk: 4.2.0 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - dev: false - /@utrecht/components@3.0.0: resolution: {integrity: sha512-TO39Ti6Af50l+I2gt4S3iacGVuVoxBK/+G/bsK9wvii53fO35NYJul7xB98/IYSBmewaN4GtmyWGphVDdFMt1A==} dependencies: @@ -7732,7 +7707,7 @@ packages: typescript: 5.3.3 dev: true - /create-jest@29.7.0(@types/node@20.11.7): + /create-jest@29.7.0: resolution: {integrity: sha512-Adz2bdH0Vq3F53KEMJOoftQFutWCukm6J24wbPWRO4k1kMY7gS7ds/uoJkNuV8wDCtWWnuwGcJwpWcih+zEW1Q==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: @@ -10907,7 +10882,7 @@ packages: - supports-color dev: true - /jest-cli@29.7.0(@types/node@20.11.7): + /jest-cli@29.7.0: resolution: {integrity: sha512-OVVobw2IubN/GSYsxETi+gOe7Ka59EFMR/twOU3Jb2GnKKeMGJB5SGUUrEz3SFVmJASUdZUzy83sLNNQ2gZslg==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} hasBin: true @@ -10921,7 +10896,7 @@ packages: '@jest/test-result': 29.7.0 '@jest/types': 29.6.3 chalk: 4.1.2 - create-jest: 29.7.0(@types/node@20.11.7) + create-jest: 29.7.0 exit: 0.1.2 import-local: 3.1.0 jest-config: 29.7.0(@types/node@20.11.7) @@ -11289,7 +11264,7 @@ packages: supports-color: 8.1.1 dev: true - /jest@29.7.0(@types/node@20.11.7): + /jest@29.7.0: resolution: {integrity: sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} hasBin: true @@ -11302,7 +11277,7 @@ packages: '@jest/core': 29.7.0 '@jest/types': 29.6.3 import-local: 3.1.0 - jest-cli: 29.7.0(@types/node@20.11.7) + jest-cli: 29.7.0 transitivePeerDependencies: - '@types/node' - babel-plugin-macros @@ -11718,10 +11693,6 @@ packages: p-locate: 6.0.0 dev: true - /lodash.chunk@4.2.0: - resolution: {integrity: sha512-ZzydJKfUHJwHa+hF5X66zLFCBrWn5GeF28OHEr4WVWtNDXlQ/IjWKPBiikqKo2ne0+v6JgCgJ0GzJp8k8bHC7w==} - dev: false - /lodash.debounce@4.0.8: resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==} dev: true diff --git a/proprietary/tokens/src/common/utrecht/action.tokens.json b/proprietary/tokens/src/common/amsterdam/action.tokens.json similarity index 95% rename from proprietary/tokens/src/common/utrecht/action.tokens.json rename to proprietary/tokens/src/common/amsterdam/action.tokens.json index 2343257e6d..d726b9b7f6 100644 --- a/proprietary/tokens/src/common/utrecht/action.tokens.json +++ b/proprietary/tokens/src/common/amsterdam/action.tokens.json @@ -1,5 +1,5 @@ { - "utrecht": { + "amsterdam": { "action": { "activate": { "cursor": { "value": "pointer" } }, "busy": { "cursor": { "value": "wait" } }, diff --git a/proprietary/tokens/src/common/utrecht/focus.tokens.json b/proprietary/tokens/src/common/utrecht/focus.tokens.json deleted file mode 100644 index b4d2fe2f06..0000000000 --- a/proprietary/tokens/src/common/utrecht/focus.tokens.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "utrecht": { - "focus": { - "outline-offset": { "value": "2px" } - } - } -} diff --git a/proprietary/tokens/src/components/amsterdam/button.tokens.json b/proprietary/tokens/src/components/amsterdam/button.tokens.json index c07033be2a..f97394237f 100644 --- a/proprietary/tokens/src/components/amsterdam/button.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/button.tokens.json @@ -1,6 +1,13 @@ { "amsterdam": { "button": { + "font-family": { "value": "{amsterdam.typography.font-family}" }, + "gap": { "value": "1rem" }, + "padding-inline-start": { "value": "{amsterdam.spacing.inset.md}" }, + "padding-inline-end": { "value": "{amsterdam.spacing.inset.md}" }, + "padding-block-start": { "value": "{amsterdam.spacing.inset.sm}" }, + "padding-block-end": { "value": "{amsterdam.spacing.inset.sm}" }, + "outline-offset": { "value": "{amsterdam.focus.outline-offset}" }, "spacious": { "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" }, "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" } @@ -9,21 +16,43 @@ "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" }, "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" } }, + "primary": { + "background-color": { "value": "{amsterdam.color.primary-blue}" }, + "color": { "value": "{amsterdam.color.primary-white}" }, + "disabled": { + "background-color": { "value": "{amsterdam.color.neutral-grey2}" } + }, + "hover": { + "background-color": { "value": "{amsterdam.color.dark-blue}" } + } + }, "secondary": { + "background-color": { "value": "{amsterdam.color.primary-white}" }, + "color": { "value": "{amsterdam.color.primary-blue}" }, "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.primary-blue}" }, "hover": { - "box-shadow": { "value": "inset 0 0 0 3px {amsterdam.color.dark-blue}" } + "box-shadow": { "value": "inset 0 0 0 3px {amsterdam.color.dark-blue}" }, + "color": { "value": "{amsterdam.color.dark-blue}" } }, "disabled": { - "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.neutral-grey2}" } + "background-color": { "value": "{amsterdam.color.primary-white}" }, + "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.neutral-grey2}" }, + "color": { "value": "{amsterdam.color.neutral-grey2}" } }, "focus": { "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.primary-blue}" } } }, "tertiary": { + "background-color": { "value": "transparent" }, + "color": { "value": "{amsterdam.color.primary-blue}" }, "hover": { - "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.dark-blue}" } + "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.dark-blue}" }, + "color": { "value": "{amsterdam.color.dark-blue}" } + }, + "disabled": { + "background-color": { "value": "transparent" }, + "color": { "value": "{amsterdam.color.neutral-grey2}" } } } } diff --git a/proprietary/tokens/src/components/utrecht/button.tokens.json b/proprietary/tokens/src/components/utrecht/button.tokens.json deleted file mode 100644 index 3f65bac80f..0000000000 --- a/proprietary/tokens/src/components/utrecht/button.tokens.json +++ /dev/null @@ -1,214 +0,0 @@ -{ - "utrecht": { - "button": { - "background-color": { "value": "{amsterdam.color.primary-blue}" }, - "border-color": {}, - "border-radius": {}, - "border-width": {}, - "color": { "value": "{amsterdam.color.primary-white}" }, - "font-family": { "value": "{amsterdam.typography.font-family}" }, - "font-size": {}, - "line-height": {}, - "padding-inline-start": { "value": "{amsterdam.spacing.inset.md}" }, - "padding-inline-end": { "value": "{amsterdam.spacing.inset.md}" }, - "padding-block-start": { "value": "{amsterdam.spacing.inset.sm}" }, - "padding-block-end": { "value": "{amsterdam.spacing.inset.sm}" }, - "margin-inline-start": {}, - "margin-inline-end": {}, - "margin-block-start": {}, - "margin-block-end": {}, - "icon": { - "gap": {} - }, - "disabled": { - "background-color": { "value": "{amsterdam.color.neutral-grey2}" }, - "color": { "value": "{amsterdam.color.primary-white}" }, - "border-color": {} - }, - "hover": { - "background-color": {} - }, - "focus": { - "scale": {} - }, - "primary-action": { - "background-color": { "value": "{amsterdam.color.primary-blue}" }, - "border-color": {}, - "border-width": {}, - "color": { "value": "{amsterdam.color.primary-white}" }, - "disabled": { - "background-color": { "value": "{amsterdam.color.neutral-grey2}" }, - "color": {}, - "border-color": {} - }, - "hover": { - "background-color": { "value": "{amsterdam.color.dark-blue}" }, - "border-color": {}, - "color": {} - }, - "focus": { - "background-color": {}, - "border-color": {}, - "border-width": {} - }, - "ready": { - "background-color": {}, - "border-color": {}, - "color": {}, - "disabled": { - "border-color": {} - }, - "hover": { - "background-color": {}, - "border-color": {}, - "color": {} - }, - "focus": { - "background-color": {}, - "border-color": {} - } - }, - "warning": { - "background-color": {}, - "border-color": {}, - "color": {}, - "disabled": { - "border-color": {} - }, - "hover": { - "background-color": {}, - "border-color": {}, - "color": {} - }, - "focus": { - "background-color": {}, - "border-color": {} - } - }, - "danger": { - "background-color": {}, - "border-color": {}, - "color": {}, - "disabled": { - "border-color": {} - }, - "hover": { - "background-color": {}, - "border-color": {}, - "color": {} - }, - "focus": { - "background-color": {}, - "border-color": {} - } - } - }, - "secondary-action": { - "background-color": { "value": "{amsterdam.color.primary-white}" }, - "color": { "value": "{amsterdam.color.primary-blue}" }, - "border-color": {}, - "border-width": {}, - "hover": { - "background-color": {}, - "color": { "value": "{amsterdam.color.dark-blue}" }, - "border-color": {} - }, - "disabled": { - "background-color": { "value": "{amsterdam.color.primary-white}" }, - "color": { "value": "{amsterdam.color.neutral-grey2}" }, - "border-color": {} - }, - "danger": { - "background-color": {}, - "border-color": {}, - "color": {}, - "disabled": { - "border-color": {} - }, - "hover": { - "background-color": {}, - "border-color": {}, - "color": {} - }, - "focus": { - "background-color": {}, - "border-color": {} - } - }, - "warning": { - "background-color": {}, - "border-color": {}, - "color": {}, - "disabled": { - "border-color": {} - }, - "hover": { - "background-color": {}, - "border-color": {}, - "color": {} - }, - "focus": { - "background-color": {}, - "border-color": {} - } - }, - "ready": { - "background-color": {}, - "border-color": {}, - "color": {}, - "disabled": { - "border-color": {} - }, - "hover": { - "background-color": {}, - "border-color": {}, - "color": {} - }, - "focus": { - "background-color": {}, - "border-color": {} - } - } - }, - "subtle": { - "background-color": { "value": "transparent" }, - "border-color": {}, - "border-width": {}, - "color": { "value": "{amsterdam.color.primary-blue}" }, - "font-weight": {}, - "hover": { - "background-color": {}, - "color": { "value": "{amsterdam.color.dark-blue}" }, - "border-color": {} - }, - "focus": { - "background-color": {}, - "color": { "value": "{amsterdam.color.dark-blue}" }, - "border-color": {} - }, - "disabled": { - "background-color": { "value": "transparent" }, - "color": { "value": "{amsterdam.color.neutral-grey2}" } - }, - "danger": { - "color": {}, - "hover": { - "color": {} - }, - "focus": { - "color": {} - } - }, - "ready": { - "color": {}, - "hover": { - "color": {} - }, - "focus": { - "color": {} - } - } - } - } - } -} diff --git a/storybook/storybook-react/src/Button/Button.docs.mdx b/storybook/storybook-react/src/Button/Button.docs.mdx index a503ec4333..8913646d1e 100644 --- a/storybook/storybook-react/src/Button/Button.docs.mdx +++ b/storybook/storybook-react/src/Button/Button.docs.mdx @@ -1,4 +1,4 @@ -import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; +import { Canvas, Markdown, Meta } from "@storybook/blocks"; import * as ButtonStories from "./Button.stories.tsx"; import README from "../../../../packages/css/src/components/button/README.md?raw"; @@ -6,10 +6,6 @@ import README from "../../../../packages/css/src/components/button/README.md?raw {README} - - - - ## Examples Primary, secondary and tertiary buttons can be used side by side. @@ -22,6 +18,14 @@ One primary button may be used per screen. +### Primary with icon right + + + +### Primary with icon left + + + ### Secondary Use the secondary button for less prominent calls to action. @@ -29,8 +33,16 @@ It is possible to use more than 1 secondary button. +### Secondary with icon right + + + ### Tertiary Use tertiary buttons for unimportant calls to action – as many as necessary. + +### Tertiary with icon right + + diff --git a/storybook/storybook-react/src/Button/Button.stories.tsx b/storybook/storybook-react/src/Button/Button.stories.tsx index b4ecb9c145..03283ca1da 100644 --- a/storybook/storybook-react/src/Button/Button.stories.tsx +++ b/storybook/storybook-react/src/Button/Button.stories.tsx @@ -3,7 +3,8 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -import { Button } from '@amsterdam/design-system-react' +import { Button, Icon } from '@amsterdam/design-system-react' +import { CloseIcon, ShareIcon } from '@amsterdam/design-system-react-icons' import { Meta, StoryObj } from '@storybook/react' const meta = { @@ -12,6 +13,21 @@ const meta = { args: { children: 'Default', disabled: false, + variant: 'primary', + }, + argTypes: { + children: { + table: { + disable: true, + }, + }, + disabled: { + control: 'boolean', + }, + variant: { + control: 'select', + options: ['primary', 'secondary', 'tertiary'], + }, }, } satisfies Meta @@ -25,6 +41,18 @@ export const Primary: Story = { }, } +export const PrimaryWithIcon: Story = { + args: { + children: ['Primary', ], + }, +} + +export const PrimaryWithIconLeft: Story = { + args: { + children: [, 'Primary'], + }, +} + export const Secondary: Story = { args: { children: 'Secondary', @@ -32,9 +60,23 @@ export const Secondary: Story = { }, } +export const SecondaryWithIcon: Story = { + args: { + variant: 'secondary', + children: ['Secondary', ], + }, +} + export const Tertiary: Story = { args: { children: 'Tertiary', variant: 'tertiary', }, } + +export const TertiaryWithIcon: Story = { + args: { + children: ['Tertiary', ], + variant: 'tertiary', + }, +}