Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(docs): Fixes Design review button en Visual regression #337

Merged
merged 3 commits into from
Nov 20, 2024
Merged

chore(docs): Fixes Design review button en Visual regression #337

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
356cbd1
WIP: Better docs
Nov 8, 2024
68ce00c
Visual regression tests added
Nov 13, 2024
88d6d19
Only "Button"
Nov 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/storybook/config/preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@ const preview: Preview = {
'DigiD dark': 'lux-theme--digid-dark',
'Logius light': 'lux-theme--logius-light',
'Logius dark': 'lux-theme--logius-dark',
'Mijn Aansluitingen light': 'lux-theme--eva-light',
'Mijn Aansluitingen dark': 'lux-theme--eva-dark',
'Mijn Overheid light': 'lux-theme--mijnoverheid-light',
'Mijn Overheid dark': 'lux-theme--mijnoverheid-dark',
'NLdoc light': 'lux-theme--nldoc-light',
Expand Down
1 change: 1 addition & 0 deletions packages/storybook/config/themes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,6 @@
*/
import '@lux-design-system/design-tokens/dist/digid/index-theme.css';
import '@lux-design-system/design-tokens/dist/logius/index-theme.css';
import '@lux-design-system/design-tokens/dist/eva/index-theme.css';
import '@lux-design-system/design-tokens/dist/mijnoverheid/index-theme.css';
import '@lux-design-system/design-tokens/dist/nldoc/index-theme.css';
56 changes: 50 additions & 6 deletions packages/storybook/src/react-components/button/button.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Canvas, Controls, Markdown, Meta } from "@storybook/blocks";
import { Canvas, Controls, Description, Markdown, Meta } from "@storybook/blocks";
import markdown from "@utrecht/button-css/README.md?raw";
import * as ButtonStories from "./button.stories.tsx";
import { CitationDocumentation } from "../../utils/CitationDocumentation.tsx";
Expand All @@ -12,6 +12,8 @@ import { CitationDocumentation } from "../../utils/CitationDocumentation.tsx";
url="https://nl-design-system.github.io/utrecht/storybook-css/index.html?path=/docs/css-button--docs"
/>

{/* TODO: New way of doc md */}

<Markdown>{markdown}</Markdown>

## Opmerkingen
Expand All @@ -24,26 +26,68 @@ import { CitationDocumentation } from "../../utils/CitationDocumentation.tsx";
<Canvas of={ButtonStories.Playground} />
<Controls of={ButtonStories.Playground} />

## Small Button

<Canvas of={ButtonStories.SmallButton} />

## Variants

### Primary / primary action button

<Description of={ButtonStories.Primary} />
<Canvas of={ButtonStories.Primary} />

### Secondary / secondary action button

<Description of={ButtonStories.Secondary} />
<Canvas of={ButtonStories.Secondary} />

### Tertiary / subtle button

<Description of={ButtonStories.Tertiary} />
<Canvas of={ButtonStories.Tertiary} />

## Button states
### Small Button

<Description of={ButtonStories.SmallButton} />
<Canvas of={ButtonStories.SmallButton} />

<h2 id="states_examples">States</h2>

### Active

<Description of={ButtonStories.Active} />
<Canvas of={ButtonStories.Active} />

### Focus

<Description of={ButtonStories.Focus} />
<Canvas of={ButtonStories.Focus} />

### Hover

<Description of={ButtonStories.Hover} />
<Canvas of={ButtonStories.Hover} />

### Disabled

<Description of={ButtonStories.Disabled} />
<Canvas of={ButtonStories.Disabled} />

### Busy

<Description of={ButtonStories.Busy} />
<Canvas of={ButtonStories.Busy} />

### Toggle / Pressed

<Description of={ButtonStories.Toggle} />
<Canvas of={ButtonStories.Toggle} />

## Button With Icon

### At start position

<Description of={ButtonStories.ButtonWithIconAtPositionStart} />
<Canvas of={ButtonStories.ButtonWithIconAtPositionStart} />

### At end position

<Description of={ButtonStories.ButtonWithIconAtPositionEnd} />
<Canvas of={ButtonStories.ButtonWithIconAtPositionEnd} />
136 changes: 102 additions & 34 deletions packages/storybook/src/react-components/button/button.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@ import { LuxButton } from '@lux-design-system/components-react';
import tokens from '@lux-design-system/design-tokens/dist/index.json';
import { useArgs } from '@storybook/preview-api';
import type { Meta, StoryFn, StoryObj } from '@storybook/react';
import tokensDefinition from '@utrecht/button-css/src/tokens.json';
import { InteractiveStates, PropertyStates } from './visual/States';
import { Appearances, Sizes } from './visual/Variants';
import { createDesignTokensStory, createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';

type Story = StoryObj<typeof meta>;

Expand All @@ -12,6 +16,7 @@ const meta = {
subcomponents: {},
parameters: {
tokens,
tokensDefinition,
tokensPrefix: 'utrecht-button',
},
argTypes: {
Expand All @@ -29,6 +34,11 @@ const meta = {
description: 'Icon Position modifier',
control: 'select',
options: [undefined, 'start', 'end'],
table: {
defaultValue: {
summary: 'start',
},
},
},
busy: {
description: 'Busy indicator',
Expand All @@ -40,19 +50,19 @@ const meta = {
},
icon: {
description: 'Icon Node',
control: 'object',
control: 'boolean',
table: {
type: {
summary: 'HTML Content',
summary: 'HTML/SVG Content / React Node',
detail: 'Use the boolean switch to show an Icon',
},
},
},
label: {
description: 'Label Node',
control: 'object',
children: {
description: 'Label (children)',
table: {
type: {
summary: 'HTML Content',
summary: 'HTML Content / React Node',
},
},
},
Expand All @@ -63,8 +73,8 @@ export default meta;

//TODO replace icon in #308
const ExampleIcon = (
<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg">
<circle r="6" cx="7" cy="7" fill="white" stroke="green" />
<svg height="16" width="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<circle r="6" cx="7" cy="7" fill="white" stroke="currentColor" />
</svg>
);

Expand All @@ -76,9 +86,13 @@ const ButtonTemplate: Story = {
icon: undefined,
pressed: false,
busy: false,
label: 'Klik hier!',
children: 'Button',
},
render: ({ ...args }) => <LuxButton {...args}>{args['children']}</LuxButton>,
render: ({ icon, children, ...args }: { icon: boolean; children: any; args: unknown }) => (
<LuxButton icon={icon ? ExampleIcon : null} {...args}>
{children}
</LuxButton>
),
};

const AllButtonVariantsTemplate: Story = {
Expand Down Expand Up @@ -116,24 +130,12 @@ export const Playground: Story = {
tags: ['!autodocs'],
};

export const SmallButton: Story = {
...ButtonTemplate,
args: {
...ButtonTemplate.args,
size: 'small',
},
parameters: {
docs: {
sourceState: 'shown',
},
},
};

export const Primary: Story = {
...ButtonTemplate,
name: 'Primary',
args: {
...ButtonTemplate.args,
appearance: 'primary-action-button',
children: 'Primary Button',
},
parameters: {
docs: {
Expand All @@ -145,10 +147,11 @@ export const Primary: Story = {
};

export const Secondary: Story = {
...ButtonTemplate,
name: 'Secondary',
args: {
...ButtonTemplate.args,
appearance: 'secondary-action-button',
children: 'Secondary Button',
},
parameters: {
docs: {
Expand All @@ -160,10 +163,11 @@ export const Secondary: Story = {
};

export const Tertiary: Story = {
...ButtonTemplate,
name: 'Tertiary',
args: {
...ButtonTemplate.args,
appearance: 'subtle-button',
children: 'Tertiary Button',
},
parameters: {
docs: {
Expand All @@ -174,14 +178,30 @@ export const Tertiary: Story = {
},
};

export const SmallButton: Story = {
...ButtonTemplate,
name: 'Small',
args: {
...ButtonTemplate.args,
size: 'small',
},
parameters: {
docs: {
description: {
story: 'Een kleine variant zet je met `size="small"`.',
},
},
},
};

export const Active: Story = {
...AllButtonVariantsTemplate,
name: 'Active',
parameters: {
pseudo: { active: true },
},
args: {
children: 'Active Button',
...ButtonTemplate.args,
},
};

Expand All @@ -192,7 +212,7 @@ export const Hover: Story = {
pseudo: { hover: true },
},
args: {
children: 'Hover Button',
...ButtonTemplate.args,
},
};

Expand All @@ -203,15 +223,15 @@ export const Focus: Story = {
pseudo: { focus: true, focusVisible: true },
},
args: {
children: 'Focus Button',
...ButtonTemplate.args,
},
};

export const Disabled: Story = {
...AllButtonVariantsTemplate,
name: 'Disabled',
args: {
children: 'Disabled Button',
...ButtonTemplate.args,
disabled: true,
},
};
Expand All @@ -220,14 +240,14 @@ export const Busy: Story = {
...AllButtonVariantsTemplate,
name: 'Busy',
args: {
children: 'Busy Button',
...ButtonTemplate.args,
busy: true,
},
parameters: {
docs: {
description: {
story:
'Een busy button zet je met het `busy`-attribute (`true`/`false`, default: `undefined`). Toont een `wait` cursor en `aria-busy`-attribute.',
story: `Een busy button zet je met het \`busy\`-attribute (\`true\`/\`false\`, default: \`undefined\`). Toont een \`wait\` cursor en \`aria-busy\`-attribute. Dit gebruik je
bijvoorbeeld als een gebruiker met een knop een actie in gang zet die langer kan duren, zoals een download.`,
},
},
},
Expand All @@ -237,6 +257,7 @@ export const Toggle: Story = {
...ButtonTemplate,
name: 'Toggle',
args: {
...ButtonTemplate.args,
appearance: 'primary-action-button',
pressed: true,
},
Expand All @@ -249,10 +270,20 @@ export const Toggle: Story = {

return (
<LuxButton {...args} onClick={onPress}>
Toggle Button {args.pressed ? 'pressed' : 'not pressed'}
Button {args.pressed ? 'pressed' : 'not pressed'}
</LuxButton>
);
},
argTypes: {
pressed: {
control: 'boolean',
},
children: {
table: {
disable: true,
},
},
},
parameters: {
docs: {
description: {
Expand Down Expand Up @@ -290,3 +321,40 @@ export const ButtonWithIconAtPositionEnd: Story = {
},
},
};

export const DesignTokens = createDesignTokensStory(meta);

export const Visual = createVisualRegressionStory(() => (
<>
<h4 className="utrecht-heading-3">Light</h4>
<h5 className="utrecht-heading-4">Logius</h5>
<VisualRegressionWrapper className={`lux-theme--logius-light`}>
<Appearances />
<Sizes />
<InteractiveStates />
<PropertyStates />
</VisualRegressionWrapper>
<h5 className="utrecht-heading-4">MijnAansluitingen</h5>
<VisualRegressionWrapper className={`lux-theme--eva-light`}>
<Appearances />
<Sizes />
<InteractiveStates />
<PropertyStates />
</VisualRegressionWrapper>
<h4 className="utrecht-heading-3">Dark</h4>
<h5 className="utrecht-heading-4">Logius</h5>
<VisualRegressionWrapper className={`lux-theme--logius-dark`}>
<Appearances />
<Sizes />
<InteractiveStates />
<PropertyStates />
</VisualRegressionWrapper>
<h5 className="utrecht-heading-4">MijnAansluitingen</h5>
<VisualRegressionWrapper className={`lux-theme--eva-dark`}>
<Appearances />
<Sizes />
<InteractiveStates />
<PropertyStates />
</VisualRegressionWrapper>
</>
));
Loading