feat(docs, styles): create html/css Divider component

.changeset/purple-papayas-guess.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+---
+
+Implemented a `Divider` html/css component using tokens for styles. Divider documentation is also added to /Foundations/Typography page.

packages/documentation/cypress/e2e/components/divider.cy.ts

@@ -0,0 +1,13 @@
+describe('Divider', () => {
+  describe('Accessibility', () => {
+    beforeEach(() => {
+      cy.visit('/iframe.html?id=snapshots--divider');
+      cy.get('hr', { timeout: 30000 }).should('be.visible');
+      cy.injectAxe();
+    });
+
+    it('Has no detectable a11y violations on load for all variants', () => {
+      cy.checkA11y('#root-inner');
+    });
+  });
+});

packages/documentation/src/stories/components/divider/divider.docs.mdx

@@ -0,0 +1,28 @@
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
+import meta, * as DividerStories from './divider.stories';
+import StylesPackageImport from '@/shared/styles-package-import.mdx';
+import PackageTag from '@/shared/package-tag';
+
+<Meta of={DividerStories} />
+
+<div className="docs-title">
+  # Divider
+
+  <link-design of={JSON.stringify(DividerStories)}></link-design>
+</div>
+
+<PackageTag meta={meta}/>
+
+<p className="lead">A Divider is a horizontal line used to visually separate or group content, improving the readability of a page.</p>
+<p>Dividers can be used in various contexts, for example within forms, lists or sections. The `<hr>` HTML tag represents a thematic break between paragraph elements.</p>
+
+<Canvas sourceState="shown" of={DividerStories.Default} />
+<div className="hide-col-default">
+  <Controls of={DividerStories.Default} />
+</div>
+
+<StylesPackageImport components={['divider']} />
+
+## Usage
+
+Dividers are often used within forms.

packages/documentation/src/stories/components/divider/divider.snapshot.stories.ts

@@ -0,0 +1,35 @@
+import type { Args, StoryContext, StoryObj } from '@storybook/web-components-vite';
+import meta from './divider.stories';
+import { html } from 'lit';
+import { schemes } from '@/shared/snapshots/schemes';
+import { bombArgs } from '@/utils';
+
+const { id, ...metaWithoutId } = meta;
+
+export default {
+  ...metaWithoutId,
+  title: 'Snapshots',
+};
+
+type Story = StoryObj;
+
+export const Divider: Story = {
+  render: (_args: Args, context: StoryContext) => {
+    return schemes(
+      () => html`
+        <div class="d-flex flex-column gap-32 p-16">
+          ${bombArgs({
+            marginTop: context.argTypes.marginTop.options,
+            marginBottom: context.argTypes.marginBottom.options,
+          }).map((args: Args) => {
+            return html`
+              <div class="position-relative" style="width: 600px;">
+                ${meta.render?.({ ...context.args, ...args }, context)}
+              </div>
+            `;
+          })}
+        </div>
+      `,
+    );
+  },
+};

packages/documentation/src/stories/components/divider/divider.stories.ts

@@ -0,0 +1,87 @@
+import { MetaComponent } from '@root/types';
+import type { Args, StoryObj } from '@storybook/web-components-vite';
+import { html } from 'lit/static-html.js';
+import { nothing } from 'lit';
+
+const meta: MetaComponent = {
+  id: 'a1eef11e-b5db-4066-99a8-9723a6cdef12',
+  title: 'Components/Divider',
+  tags: ['package:Styles', 'status:Experimental'],
+  render,
+  parameters: {
+    badges: [],
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations---Components-Next-Level?node-id=13995-180113&t=w6yq9dykdA3NLIPh-4',
+    },
+  },
+  args: {
+    marginTop: 'null',
+    marginBottom: 'null',
+  },
+  argTypes: {
+    marginTop: {
+      name: 'Margin top',
+      description: 'Sets the margin between the divider line and the content above.',
+      control: {
+        type: 'select',
+        labels: {
+          'mt-4': '4',
+          'null': '8 (default)',
+          'mt-16': '16',
+          'mt-24': '24',
+          'mt-32': '32',
+          'mt-40': '40',
+        },
+      },
+      options: ['mt-4', 'null', 'mt-16', 'mt-24', 'mt-32', 'mt-40'],
+      table: {
+        category: 'General',
+      },
+    },
+    marginBottom: {
+      name: 'Margin bottom',
+      description: 'Sets the margin between the divider line and the content below.',
+      control: {
+        type: 'select',
+        labels: {
+          'mb-4': '4',
+          'null': '8 (default)',
+          'mb-16': '16',
+          'mb-24': '24',
+          'mb-32': '32',
+          'mb-40': '40',
+        },
+      },
+      options: ['mb-4', 'null', 'mb-16', 'mb-24', 'mb-32', 'mb-40'],
+      table: {
+        category: 'General',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+//
+// RENDERER
+//
+function render(args: Args) {
+  const classes = [
+    args.marginTop !== 'null' ? args.marginTop : '',
+    args.marginBottom !== 'null' ? args.marginBottom : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return html`
+    <p>This is some content above the divider.</p>
+
+    <hr class="${classes || nothing}" />
+
+    <p>This is some content below the divider.</p>
+  `;
+}
+export const Default: Story = {};

packages/styles/src/components/_index.scss

@@ -15,6 +15,7 @@
 @use 'form-select';
 @use 'form-textarea';
 @use 'dialog';
+@use 'divider';
 @use 'form-check';
 @use 'radio-button';
 @use 'checkbox';

packages/styles/src/components/divider.scss

@@ -0,0 +1,10 @@
+@use '../functions/tokens';
+@use '../tokens/components';
+
+tokens.$default-map: components.$post-divider;
+
+hr {
+  border-color: tokens.get('post-divider-border');
+  border-width: tokens.get('post-divider-border-width');
+  margin-block: tokens.get('post-divider-margin-block');
+}