chore: combine stories and add controls

swisspost · Oct 8, 2024 · 9b3d18b · 9b3d18b
1 parent 4125c12
commit 9b3d18b
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 27 deletions.
diff --git a/packages/documentation/src/stories/elements/legend/legend.docs.mdx b/packages/documentation/src/stories/elements/legend/legend.docs.mdx
@@ -1,4 +1,4 @@
-import { Meta, Canvas } from '@storybook/blocks';
+import { Meta, Controls, Canvas } from '@storybook/blocks';
 import * as LegendStories from './legend.stories';
 
 <Meta of={LegendStories} />
@@ -12,10 +12,6 @@ import * as LegendStories from './legend.stories';
 
 A legend is in general the title of a group of related (interactive) elements in a form. Not to be confused with caption.
 
-### Default
-
 <Canvas of={LegendStories.Default} sourceState="shown" />
 
-### Large
-
-<Canvas of={LegendStories.Large} sourceState="shown" />
+<Controls of={LegendStories.Default} />
diff --git a/packages/documentation/src/stories/elements/legend/legend.stories.ts b/packages/documentation/src/stories/elements/legend/legend.stories.ts
@@ -1,5 +1,5 @@
-import type { StoryObj } from '@storybook/web-components';
-import { html } from 'lit';
+import type { Args, StoryObj } from '@storybook/web-components';
+import { html, unsafeStatic } from 'lit/static-html.js';
 import { MetaExtended } from '@root/types';
 
 const meta: MetaExtended = {
@@ -9,7 +9,31 @@ const meta: MetaExtended = {
     badges: [],
     design: {
       type: 'figma',
-      url: 'https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=26-49',
+      url: 'https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=1495-27801&node-type=instance&m=dev',
+    },
+  },
+  args: {
+    type: 'small',
+  },
+  argTypes: {
+    type: {
+      name: 'Type',
+      description:
+        'Large: Used for the title of a section in a form. Small: Used for the title of group of selection options.',
+      control: {
+        type: 'radio',
+        labels: {
+          large: 'Large',
+          small: 'Small',
+        },
+      },
+      options: ['large', 'small'],
+      table: {
+        category: 'General',
+        type: {
+          summary: 'HTML class attribute',
+        },
+      },
     },
   },
 };
@@ -19,17 +43,11 @@ export default meta;
 type Story = StoryObj;
 
 export const Default: Story = {
-  render: () => html`
-    <fieldset>
-      <legend>Default legend</legend>
-    </fieldset>
-  `,
-};
-
-export const Large: Story = {
-  render: () => html`
+  render: (args: Args) => html`
     <fieldset>
-      <legend class="legend-large">Large legend</legend>
+      <legend ${args.type !== 'small' && args.type ? unsafeStatic(`class=${args.type}`) : ''}>
+        Default legend
+      </legend>
     </fieldset>
   `,
 };
diff --git a/packages/styles/src/elements/fieldset-legend.scss b/packages/styles/src/elements/fieldset-legend.scss
@@ -7,13 +7,12 @@ legend {
   font-weight: tokens.get('legend', 'font-weight');
   line-height: tokens.get('legend', 'line-height');
   width: 100%;
-}
-
-.legend-large {
-  font-size: tokens.get('legend', 'large-font-size');
-  margin-block-start: tokens.get('legend', 'large-margin-block-start');
-  margin-block-end: tokens.get('legend', 'large-margin-block-end');
-  padding-block-end: tokens.get('legend', 'large-padding-block-end');
 
-  border-bottom: tokens.get('legend', 'large-border-bottom');
+  &.large {
+    font-size: tokens.get('legend', 'large-font-size');
+    margin-block-start: tokens.get('legend', 'large-margin-block-start');
+    margin-block-end: tokens.get('legend', 'large-margin-block-end');
+    padding-block-end: tokens.get('legend', 'large-padding-block-end');
+    border-bottom: tokens.get('legend', 'large-border-bottom');
+  }
 }