From 86a6afd28b7adc91859b29e9e5de018a5414da67 Mon Sep 17 00:00:00 2001 From: Jaap-Hein Wester Date: Tue, 13 Aug 2024 10:03:59 +0200 Subject: [PATCH] feat(components) LUX Button (#163) Wrapped Utrecht-button as LUX-button --------- Co-authored-by: Jaap-Hein Wester Co-authored-by: AlineNap <59806622+AlineNap@users.noreply.github.com> Co-authored-by: Remy Parzinski --- packages/storybook/.stylelintrc.json | 7 +- packages/storybook/package.json | 3 + packages/storybook/src/styles/theme.css | 51 +- .../components/DesignTokenBorderPreview.tsx | 8 +- .../components/DesignTokenColorPreview.tsx | 2 +- .../components/DesignTokenFontPreview.tsx | 8 +- .../components/DesignTokenSizingPreview.tsx | 6 +- .../components/DesignTokenSpacingPreview.tsx | 4 +- .../src/utils/createVisualRegressionStory.tsx | 2 +- .../button-login/button-login.mdx | 6 +- .../src/web-components/button/button.mdx | 75 + .../web-components/button/button.stories.tsx | 316 ++++ .../src/web-components/button/tokens.json | 1273 +++++++++++++++++ packages/web-components-stencil/package.json | 3 +- .../src/components/button/button.scss | 14 + .../src/components/button/button.tsx | 115 ++ .../web-components-stencil/src/global/app.ts | 5 + .../src/icons/chevron-left.tsx | 29 + .../src/icons/chevron-right.tsx | 29 + .../web-components-stencil/src/icons/icon.css | 5 + .../src/utils/helpers/attrBoolean.ts | 17 + .../web-components-stencil/stencil.config.ts | 2 + pnpm-lock.yaml | 862 ++++++++--- .../design-tokens/src/imported/$metadata.json | 1 + .../design-tokens/src/imported/$themes.json | 5 +- .../src/imported/nl/utrecht-button.json | 80 +- .../src/imported/nl/utrecht-focus.json | 28 + .../src/imported/nl/utrecht-link.json | 2 +- 28 files changed, 2656 insertions(+), 302 deletions(-) create mode 100644 packages/storybook/src/web-components/button/button.mdx create mode 100644 packages/storybook/src/web-components/button/button.stories.tsx create mode 100644 packages/storybook/src/web-components/button/tokens.json create mode 100644 packages/web-components-stencil/src/components/button/button.scss create mode 100644 packages/web-components-stencil/src/components/button/button.tsx create mode 100644 packages/web-components-stencil/src/global/app.ts create mode 100644 packages/web-components-stencil/src/icons/chevron-left.tsx create mode 100644 packages/web-components-stencil/src/icons/chevron-right.tsx create mode 100644 packages/web-components-stencil/src/icons/icon.css create mode 100644 packages/web-components-stencil/src/utils/helpers/attrBoolean.ts create mode 100644 proprietary/design-tokens/src/imported/nl/utrecht-focus.json diff --git a/packages/storybook/.stylelintrc.json b/packages/storybook/.stylelintrc.json index aa1fa850a..066583d71 100644 --- a/packages/storybook/.stylelintrc.json +++ b/packages/storybook/.stylelintrc.json @@ -1,6 +1,11 @@ { "extends": ["stylelint-config-standard-scss"], "rules": { - "selector-class-pattern": "^(dt-[a-z]+(--[a-z]+(-[a-z])+)?|docs-story|visual-regression-wrapper|section)" + "selector-class-pattern": [ + "^(sb-?|storybook-|docs-|lux-|lsb-)([a-z-]+)+$", + { + "message": "Please use the prefix `lsb-` for our custom Storybook components." + } + ] } } diff --git a/packages/storybook/package.json b/packages/storybook/package.json index 8edcb68e2..b8624a0fd 100644 --- a/packages/storybook/package.json +++ b/packages/storybook/package.json @@ -44,15 +44,18 @@ "@storybook/preview-api": "8.2.7", "@storybook/react": "8.2.7", "@storybook/react-vite": "8.2.7", + "@storybook/test": "8.2.7", "@storybook/testing-library": "0.2.2", "@types/react": "18.3.3", "@types/react-dom": "18.3.0", + "@utrecht/button-css": "1.2.0", "@vitejs/plugin-react": "4.3.1", "chromatic": "11.7.0", "react": "18.3.1", "react-dom": "18.3.1", "require-from-string": "2.0.2", "rimraf": "6.0.1", + "shadow-dom-testing-library": "1.11.2", "storybook": "8.2.7", "typescript": "5.5.4", "vite": "5.3.5" diff --git a/packages/storybook/src/styles/theme.css b/packages/storybook/src/styles/theme.css index 9fc8ec7bf..9cf28db8f 100644 --- a/packages/storybook/src/styles/theme.css +++ b/packages/storybook/src/styles/theme.css @@ -2,13 +2,13 @@ background-color: var(--lux-color-background-default); } -.visual-regression-wrapper { +.lsb-visual-regression-wrapper { display: flex; flex-flow: column wrap; gap: 16px 32px; } -.section { +.lsb-section { display: flex; flex-direction: column; border: solid 1px #a7a7a7; @@ -17,7 +17,7 @@ list-style: none; } -.section li { +.lsb-section li { display: flex; justify-content: space-between; align-items: start; @@ -26,11 +26,11 @@ padding-block: 24px; } -.section li + li { +.lsb-section li + li { border-top: solid 1px #a7a7a7; } -.dt-preview { +.lsb-dt-preview { display: flex; flex-direction: row; justify-content: start; @@ -38,13 +38,13 @@ gap: var(--lux-space-1x, 0.5rem); } -.dt-preview--spacing, -.dt-preview--sizing { +.lsb-dt-preview--spacing, +.lsb-dt-preview--sizing { --dt-border-radius: 0; --dt-background-color: var(--lux-color-background-subdued); } -.dt-preview:not(.dt-preview--font)::before { +.lsb-dt-preview:not(.lsb-dt-preview--font)::before { display: inline-block; border-width: var(--dt-border-width, 1px); border-style: var(--dt-border-style, solid); @@ -56,10 +56,41 @@ content: ""; } -.dt-value--line-height-reset { +.lsb-dt-value--line-height-reset { line-height: 1 !important; } -.dt-set { +.lsb-dt-set { text-transform: capitalize; } + +.lsb-citation { + display: inline-block; + margin-block-end: var(--lux-space-50); + background-color: var(--lux-color-background-subdued); + padding-inline: var(--lux-space-100); + padding-block: var(--lux-space-50); + font-style: normal; + font-size: var(--lux-font-size-s); + font-family: var(--lux-font-family-primary); + + a { + color: var(--lux-color-foreground-link); + } + + p { + margin: 0; + } + + &, + p { + color: var(--lux-color-foreground-default); + } +} + +.lsb-story-grid { + display: grid; + grid-auto-flow: column; + justify-content: start; + gap: var(--lux-grid-gutter); +} diff --git a/packages/storybook/src/utils/components/DesignTokenBorderPreview.tsx b/packages/storybook/src/utils/components/DesignTokenBorderPreview.tsx index d45f6ce7a..aa1651bcf 100644 --- a/packages/storybook/src/utils/components/DesignTokenBorderPreview.tsx +++ b/packages/storybook/src/utils/components/DesignTokenBorderPreview.tsx @@ -35,22 +35,22 @@ const DesignTokenBorderPreview = ({ token, value, set, group = 'border' }: Props return ( - + {token} {value ? ( - {value} + {value} ) : ( - {tokenValue} + {tokenValue} )} {set ? ( - {set} + {set} ) : null} diff --git a/packages/storybook/src/utils/components/DesignTokenColorPreview.tsx b/packages/storybook/src/utils/components/DesignTokenColorPreview.tsx index f23465743..c0fad9362 100644 --- a/packages/storybook/src/utils/components/DesignTokenColorPreview.tsx +++ b/packages/storybook/src/utils/components/DesignTokenColorPreview.tsx @@ -23,7 +23,7 @@ const DesignTokenColorPreview = ({ token, reference, set }: Props) => { diff --git a/packages/storybook/src/utils/components/DesignTokenFontPreview.tsx b/packages/storybook/src/utils/components/DesignTokenFontPreview.tsx index 52eb89efa..0fb8f4b4f 100644 --- a/packages/storybook/src/utils/components/DesignTokenFontPreview.tsx +++ b/packages/storybook/src/utils/components/DesignTokenFontPreview.tsx @@ -34,25 +34,25 @@ const DesignTokenFontPreview = ({ token, value, set, reference }: Props) => { return ( - + {token} {!reference && value ? ( - + {value} ) : null} {reference ? ( - {reference} + {reference} ) : null} {set ? ( - {set} + {set} ) : null} diff --git a/packages/storybook/src/utils/components/DesignTokenSizingPreview.tsx b/packages/storybook/src/utils/components/DesignTokenSizingPreview.tsx index 184cc572d..0f21e6413 100644 --- a/packages/storybook/src/utils/components/DesignTokenSizingPreview.tsx +++ b/packages/storybook/src/utils/components/DesignTokenSizingPreview.tsx @@ -23,15 +23,15 @@ const DesignTokenSizingPreview = ({ token, value, set }: Props) => { return ( - + {token} - {value} + {value} - {set} + {set} ); diff --git a/packages/storybook/src/utils/components/DesignTokenSpacingPreview.tsx b/packages/storybook/src/utils/components/DesignTokenSpacingPreview.tsx index 62c6aad8b..2cd34016e 100644 --- a/packages/storybook/src/utils/components/DesignTokenSpacingPreview.tsx +++ b/packages/storybook/src/utils/components/DesignTokenSpacingPreview.tsx @@ -23,12 +23,12 @@ const DesignTokenSpacingPreview = ({ token }: Props) => { return ( - + {token} - {tokenValue} + {tokenValue} ); diff --git a/packages/storybook/src/utils/createVisualRegressionStory.tsx b/packages/storybook/src/utils/createVisualRegressionStory.tsx index 8b8b38b0d..9cab6adbf 100644 --- a/packages/storybook/src/utils/createVisualRegressionStory.tsx +++ b/packages/storybook/src/utils/createVisualRegressionStory.tsx @@ -66,5 +66,5 @@ export const VisualRegressionWrapper = ({ children, className, }: PropsWithChildren<{ className: string }>): React.ReactElement => { - return
{children}
; + return
{children}
; }; diff --git a/packages/storybook/src/web-components/button-login/button-login.mdx b/packages/storybook/src/web-components/button-login/button-login.mdx index 7dcf9f477..c31a1b756 100644 --- a/packages/storybook/src/web-components/button-login/button-login.mdx +++ b/packages/storybook/src/web-components/button-login/button-login.mdx @@ -92,7 +92,7 @@ Schaal het icoon mee met de hoogte van de button. Houd de button minimaal 48px h ## State -
    +
    • Default @@ -113,7 +113,7 @@ Schaal het icoon mee met de hoogte van de button. Houd de button minimaal 48px h ## Agent -
        +
        • Digid @@ -140,7 +140,7 @@ Gebruik de onderstaande Engelse vertalingen door het `label` attribuut toe te wi ``` -
            +
            • Digid diff --git a/packages/storybook/src/web-components/button/button.mdx b/packages/storybook/src/web-components/button/button.mdx new file mode 100644 index 000000000..94cafdc04 --- /dev/null +++ b/packages/storybook/src/web-components/button/button.mdx @@ -0,0 +1,75 @@ +import { Canvas, Controls, Description, Markdown, Meta } from "@storybook/blocks"; +import markdown from "@utrecht/button-css/README.md?raw"; +import * as ButtonStories from "./button.stories"; + + + + + Documentatie afkomstig van + Utrecht Button + +{markdown} + +## Playground + + + + +## Variants (appearance) + +Voor Lux zijn er drie varianten van de button. In de community komen ook andere varianten voor. Kies je een variant die +niet bestaat in onze tokens dan zal je een paarse styling zien, als visuele waarschuwing. + +### Primary / primary action Button + + + + +### Secondary / secondary action button + + + + +### Tertiary / subtle button + + + + +## States + +### Active + + + + +### Hover + + + + +### Focus + + + + +### Busy + + + + +### Toggle / Pressed + + + + +## Icons + +### Start Icon + + + + +### End Icon + + + diff --git a/packages/storybook/src/web-components/button/button.stories.tsx b/packages/storybook/src/web-components/button/button.stories.tsx new file mode 100644 index 000000000..b0a1bae3a --- /dev/null +++ b/packages/storybook/src/web-components/button/button.stories.tsx @@ -0,0 +1,316 @@ +import tokens from '@lux-design-system/design-tokens/dist/index.json'; +import { + LuxButton as Button, + LuxIconChevronLeft as IconChevronLeft, + LuxIconChevronRight as IconChevronRight, +} from '@lux-design-system/web-components-react'; +import type { JSX } from '@lux-design-system/web-components-stencil'; +import { useArgs } from '@storybook/preview-api'; +import type { Meta, StoryObj } from '@storybook/react'; +import { userEvent } from '@storybook/test'; +import { type PropsWithChildren } from 'react'; +import { within } from 'shadow-dom-testing-library'; +import tokensDefinition from './tokens.json'; +import { createDesignTokensStory } from '../../utils'; + +const LuxButton = (props: PropsWithChildren) =>