feat(docs): added basic header story (#4132)

This initial story only contains markup for the header. Options and other controls can be added later.
swisspost · Dec 4, 2024 · 36433b6 · 36433b6
1 parent a61d0d5
commit 36433b6
Show file tree

Hide file tree

Showing 3 changed files with 153 additions and 0 deletions.
diff --git a/packages/documentation/src/stories/components/header/components/header.markup.ts b/packages/documentation/src/stories/components/header/components/header.markup.ts
@@ -0,0 +1,103 @@
+import { html } from 'lit-html';
+
+export default html`<post-header>
+  <!-- Logo -->
+  <post-logo>Homepage</post-logo>
+
+  <!-- Audience Navigation -->
+  <ul class="list-inline" slot="audience-navigation">
+    <li><a href="">Privatkunden</a></li>
+    <li><a href="">Geschäftskunden</a></li>
+    <li><a href="">Behörden</a></li>
+  </ul>
+
+  <!-- Meta navigation -->
+  <ul class="list-inline" slot="meta-navigation">
+    <li><a href="">Über uns</a></li>
+    <li><a href="">Jobs</a></li>
+  </ul>
+
+  <!-- Menu button for mobile -->
+  <post-toggle-button slot="post-togglebutton"> = Menu </post-toggle-button>
+
+  <!-- Language switch -->
+  <post-language-switch slot="post-language-switch">
+    <post-language-option>
+      <a href="#">DE</a>
+    </post-language-option>
+    <post-language-option>
+      <a href="#">FR</a>
+    </post-language-option>
+    <post-language-option>
+      <a href="#">IT</a>
+    </post-language-option>
+    <post-language-option>
+      <a href="#">EN</a>
+    </post-language-option>
+  </post-language-switch>
+
+  <!-- Application title (optional) -->
+  <h1 slot="title">Application title</h1>
+
+  <!-- Custom content (optional) -->
+  <ul class="list-inline">
+    <li><a href="#">Search</a></li>
+    <li><a href="#">Login</a></li>
+  </ul>
+
+  <!-- Main navigation -->
+  <post-mainnavigation caption="Hauptnavigation">
+    <button slot="back-button"><- Back</button>
+    <post-list>
+      <h2><a href="/privatkunden">Privatkunden</a></h2>
+      <!-- Link only level 1 -->
+      <post-list-item><a href="/briefe">Briefe</a></post-list-item>
+
+      <!-- Level 1 with megadropdown -->
+      <post-list-item>
+        <post-megadropdown-trigger> Briefe </post-megadropdown-trigger>
+        <post-megadropdown>
+          <button slot="back-button"><- Zurück</button>
+          <h2><a href="">Briefe title</a></h2>
+          <post-list>
+            <h3>Briefe senden</h3>
+            <post-list-item><a href="/sch">Briefe Schweiz</a></post-list-item>
+            <post-list-item><a href="/kl">Kleinwaren Ausland</a></post-list-item>
+            <post-list-item><a href="">Waren Ausland</a></post-list-item>
+            <post-list-item><a href="">Express und Kurier</a></post-list-item>
+          </post-list>
+          <post-list>
+            <h3><a href="/schritt-für-schritt">Schritt für Schritt</a></h3>
+            <post-list-item><a href="/sch">Pakete Schweiz</a></post-list-item>
+            <post-list-item><a href="/kl">Kleinwaren Ausland</a></post-list-item>
+            <post-list-item><a href="">Waren Ausland</a></post-list-item>
+            <post-list-item><a href="">Express und Kurier</a></post-list-item>
+          </post-list>
+          <post-closebutton>Schliessen</post-closebutton>
+        </post-megadropdown>
+      </post-list-item>
+      <post-list-item>
+        <post-megadropdown-trigger> Pakete </post-megadropdown-trigger>
+        <post-megadropdown>
+          <button slot="back-button"><- Zurück</button>
+          <h2><a href="">Pakete title</a></h2>
+          <post-list>
+            <h3>Pakete senden</h3>
+            <post-list-item><a href="/sch">Pakete Schweiz</a></post-list-item>
+            <post-list-item><a href="/kl">Kleinwaren Ausland</a></post-list-item>
+            <post-list-item><a href="">Waren Ausland</a></post-list-item>
+            <post-list-item><a href="">Express und Kurier</a></post-list-item>
+          </post-list>
+          <post-list>
+            <h3><a href="/schritt-für-schritt">Schritt für Schritt</a></h3>
+            <post-list-item><a href="/sch">Pakete Schweiz</a></post-list-item>
+            <post-list-item><a href="/kl">Kleinwaren Ausland</a></post-list-item>
+            <post-list-item><a href="">Waren Ausland</a></post-list-item>
+            <post-list-item><a href="">Express und Kurier</a></post-list-item>
+          </post-list>
+          <post-closebutton>Schliessen</post-closebutton>
+        </post-megadropdown>
+      </post-list-item>
+    </post-list>
+  </post-mainnavigation>
+</post-header>`;
diff --git a/packages/documentation/src/stories/components/header/header.docs.mdx b/packages/documentation/src/stories/components/header/header.docs.mdx
@@ -0,0 +1,21 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+import * as HeaderStories from './header.stories';
+
+<Meta of={HeaderStories} />
+
+<div className="docs-title">
+  # Header
+
+  <nav>
+    <link-design of={JSON.stringify(HeaderStories)}></link-design>
+  </nav>
+</div>
+
+<div className="lead">
+  The header of the Post.
+</div>
+
+<Canvas sourceState="shown" of={HeaderStories.Default} />
+<div className="hide-col-default">
+  <Controls of={HeaderStories.Default} />
+</div>
diff --git a/packages/documentation/src/stories/components/header/header.stories.ts b/packages/documentation/src/stories/components/header/header.stories.ts
@@ -0,0 +1,29 @@
+import type { StoryObj } from '@storybook/web-components';
+import { MetaComponent } from '@root/types';
+import HeaderMarkup from './components/header.markup';
+
+const meta: MetaComponent = {
+  id: 'header',
+  title: 'Components/Header',
+  tags: ['package:HTML'],
+  parameters: {
+    layout: 'fullscreen',
+    badges: [],
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=558-7012&t=ywmfJhyvd2euoiGI-1',
+    },
+  },
+  args: {},
+  argTypes: {},
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () => {
+    return HeaderMarkup;
+  },
+};