feat: foundations typography legend (#3614)

Co-authored-by: karimim <[email protected]>
Co-authored-by: Philipp Gfeller <[email protected]>

.changeset/beige-jobs-do.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+---
+
+Updated and tokenized styles for the legend element.

packages/documentation/src/stories/foundation/legend/legend.docs.mdx

@@ -0,0 +1,17 @@
+import { Meta, Controls, Canvas } from '@storybook/blocks';
+import * as LegendStories from './legend.stories';
+
+<Meta of={LegendStories} />
+
+<div className="docs-title">
+  # Legend
+  <nav>
+    <link-design of={JSON.stringify(LegendStories)}></link-design>
+  </nav>
+</div>
+
+A legend is in general the title of a group of related (interactive) elements in a form. Not to be confused with caption.
+
+<Canvas of={LegendStories.Default} sourceState="shown" />
+
+<Controls of={LegendStories.Default} />

packages/documentation/src/stories/foundation/legend/legend.stories.ts

@@ -0,0 +1,53 @@
+import type { Args, StoryObj } from '@storybook/web-components';
+import { html, unsafeStatic } from 'lit/static-html.js';
+import { MetaExtended } from '@root/types';
+
+const meta: MetaExtended = {
+  id: '61faccd2-de2c-48f0-9a06-c051a56580ef',
+  title: 'Foundations/Typography/Legend',
+  parameters: {
+    badges: [],
+    design: {
+      type: 'figma',
+      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',
+        },
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: (args: Args) => html`
+    <fieldset>
+      <legend ${args.type !== 'small' && args.type ? unsafeStatic(`class=${args.type}`) : ''}>
+        Default legend
+      </legend>
+    </fieldset>
+  `,
+};

packages/styles/src/elements/_index.scss

@@ -1,3 +1,4 @@
 @use 'reset';
 @use 'body';
 @use 'heading';
+@use 'fieldset-legend';

packages/styles/src/elements/fieldset-legend.scss

@@ -0,0 +1,18 @@
+@use '../functions/tokens';
+@use '../tokens/elements';
+
+tokens.$default-map: elements.$post-legend;
+
+legend {
+  font-weight: tokens.get('legend', 'font-weight');
+  line-height: tokens.get('legend', 'line-height');
+  width: 100%;
+
+  &.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');
+  }
+}

packages/styles/src/elements/reset.scss

@@ -142,3 +142,12 @@ th {
   border-style: solid;
   border-width: 0;
 }
+
+fieldset,
+legend {
+  padding: 0;
+}
+
+fieldset {
+  border: 0;
+}