feat(docs): add stepper documentation

.changeset/lazy-rings-march.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': minor
+---
+
+Added a documentation page for the post stepper component.

packages/documentation/.storybook/preview.ts

@@ -55,6 +55,7 @@ const preview: Preview = {
             'Pagination',
             'Popover',
             'Progressbar',
+            'Stepper',
           ],
           'Patterns',
           'Utilities',

packages/documentation/src/shared/post-component-demo-link.mdx

@@ -0,0 +1,8 @@
+<a
+  className="btn btn-rg btn-secondary btn-animated"
+  href={`https://archive.design-system.post.ch/#/post-samples/${props.component}`}
+  target="_blank"
+  rel="nofollow noopener noreferrer"
+>
+  <span>See archived documentation</span>
+</a>

packages/documentation/src/stories/components/stepper/stepper-component.sample.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'post-stepper',
+  templateUrl: 'template.html',
+})
+export class StepperDemoComponent {
+  steps = ['Sender', 'Product', 'Other details', 'Order summary'];
+  currentIndex = 2;
+
+  isCurrent(step: string): boolean {
+    return step === this.steps[this.currentIndex];
+  }
+
+  getPathTo(step: string): string {
+    return step.toLowerCase().split(' ').join('-');
+  }
+}

packages/documentation/src/stories/components/stepper/stepper-template.sample.html

@@ -0,0 +1,23 @@
+<div class="stepper-container" role="group">
+  <h2 class="visually-hidden">Order progress, step 3 of 4</h2>
+  <ngb-progressbar
+    [max]="steps.length - 1"
+    [value]="currentIndex"
+    class="stepper-bar"
+    aria-hidden="true"
+  ></ngb-progressbar>
+
+  <ol class="stepper" role="list">
+    <li
+      *ngFor="let step of steps; index as i"
+      [attr.aria-current]="isCurrent(step) ? 'step' : undefined"
+      class="stepper-item"
+    >
+      <a *ngIf="i < currentIndex" class="stepper-link" (click)="currentIndex = i" href="#">
+        <span class="visually-hidden">Complete:</span>
+        {{ step }}
+      </a>
+      <span class="stepper-link" *ngIf="i >= currentIndex">{{ step }}</span>
+    </li>
+  </ol>
+</div>

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

@@ -0,0 +1,53 @@
+import { Meta, Source } from '@storybook/blocks';
+import { PostTabs, PostTabHeader, PostTabPanel } from '@swisspost/design-system-components-react';
+import StylesPackageImport from '../../../shared/styles-package-import.mdx';
+import PostComponentDemoLink from '../../../shared/post-component-demo-link.mdx';
+import NgbComponentImport from '../../../shared/nb-bootstrap/ngb-component-import.mdx';
+import * as stepperStories from './stepper.stories';
+import stepperTemplate from './stepper-template.sample.html?raw';
+import stepperComponent from './stepper-component.sample?raw';
+
+<Meta of={stepperStories} />
+
+<div className="d-flex align-items-center justify-content-between">
+  # Stepper
+
+  <PostComponentDemoLink component="stepper" />
+</div>
+
+<p className="lead">Conveys progress through numbered steps.</p>
+
+<div className="alert alert-info mb-bigger-big">
+  <p className="alert-heading">The stepper uses ng-bootstrap's progressbar component.</p>
+</div>
+
+<ul>
+  <li>
+    <a href="#component-import" target="_self">Component Import</a>
+  </li>
+  <li>
+    <a href="#style-imports" target="_self">Style Imports</a>
+  </li>
+  <li>
+    <a href="#example" target="_self">Example</a>
+  </li>
+</ul>
+
+<NgbComponentImport module="NgbProgressbarModule" />
+
+<StylesPackageImport components={["progress", "stepper"]} />
+
+## Example
+
+<PostTabs>
+  <PostTabHeader slot="tabs" panel="template">template.html</PostTabHeader>
+  <PostTabPanel name="template">
+    <Source code={stepperTemplate} language="html"/>
+  </PostTabPanel>
+
+  <PostTabHeader slot="tabs" panel="component">component.ts</PostTabHeader>
+  <PostTabPanel name="component">
+    <Source code={stepperComponent} language="typescript"/>
+  </PostTabPanel>
+</PostTabs>
+

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

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import { BADGE } from '../../../../.storybook/constants';
+
+const meta: Meta = {
+  title: 'Components/Stepper',
+  parameters: {
+    badges: [BADGE.WEB_COMPONENT_CANDIDATE],
+  },
+};
+
+export default meta;
+
+export const Default: StoryObj = {
+  render: () => html``,
+};