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

# Contents Fixes in documentatie nav Design review button en Visual regression story toegevoegd. ## Checklist - [x] New features/components and bugfixes are covered by tests - ~~[ ] Changesets are created~~ - ~~[ ] Definition of Done is checked~~ --------- Co-authored-by: Jaap-Hein Wester <j.h.wester@setonix.nl>
nl-design-system · Nov 20, 2024 · 42f7522 · 42f7522
1 parent 3636be3
commit 42f7522
Show file tree

Hide file tree

Showing 6 changed files with 210 additions and 40 deletions.
diff --git a/packages/storybook/config/preview.tsx b/packages/storybook/config/preview.tsx
@@ -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',

diff --git a/packages/storybook/config/themes.ts b/packages/storybook/config/themes.ts
@@ -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';
diff --git a/packages/storybook/src/react-components/button/button.mdx b/packages/storybook/src/react-components/button/button.mdx
@@ -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";
@@ -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
@@ -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} />
diff --git a/packages/storybook/src/react-components/button/button.stories.tsx b/packages/storybook/src/react-components/button/button.stories.tsx
@@ -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>;
 
@@ -12,6 +16,7 @@ const meta = {
   subcomponents: {},
   parameters: {
     tokens,
+    tokensDefinition,
     tokensPrefix: 'utrecht-button',
   },
   argTypes: {
@@ -29,6 +34,11 @@ const meta = {
       description: 'Icon Position modifier',
       control: 'select',
       options: [undefined, 'start', 'end'],
+      table: {
+        defaultValue: {
+          summary: 'start',
+        },
+      },
     },
     busy: {
       description: 'Busy indicator',
@@ -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',
         },
       },
     },
@@ -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>
 );
 
@@ -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 = {
@@ -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: {
@@ -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: {
@@ -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: {
@@ -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,
   },
 };
 
@@ -192,7 +212,7 @@ export const Hover: Story = {
     pseudo: { hover: true },
   },
   args: {
-    children: 'Hover Button',
+    ...ButtonTemplate.args,
   },
 };
 
@@ -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,
   },
 };
@@ -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.`,
       },
     },
   },
@@ -237,6 +257,7 @@ export const Toggle: Story = {
   ...ButtonTemplate,
   name: 'Toggle',
   args: {
+    ...ButtonTemplate.args,
     appearance: 'primary-action-button',
     pressed: true,
   },
@@ -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: {
@@ -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>
+  </>
+));