From 7a75aea19628d46e74b462b4369f21e4637572ca Mon Sep 17 00:00:00 2001 From: "Debray Alize, IT16.12" Date: Mon, 29 Jan 2024 18:29:32 +0100 Subject: [PATCH] feat(docs): add stepper documentation --- .changeset/lazy-rings-march.md | 5 ++ packages/documentation/.storybook/preview.ts | 1 + .../src/shared/post-component-demo-link.mdx | 8 +++ .../stepper/stepper-component.sample.ts | 18 +++++++ .../stepper/stepper-template.sample.html | 23 ++++++++ .../components/stepper/stepper.docs.mdx | 53 +++++++++++++++++++ .../components/stepper/stepper.stories.ts | 16 ++++++ 7 files changed, 124 insertions(+) create mode 100644 .changeset/lazy-rings-march.md create mode 100644 packages/documentation/src/shared/post-component-demo-link.mdx create mode 100644 packages/documentation/src/stories/components/stepper/stepper-component.sample.ts create mode 100644 packages/documentation/src/stories/components/stepper/stepper-template.sample.html create mode 100644 packages/documentation/src/stories/components/stepper/stepper.docs.mdx create mode 100644 packages/documentation/src/stories/components/stepper/stepper.stories.ts diff --git a/.changeset/lazy-rings-march.md b/.changeset/lazy-rings-march.md new file mode 100644 index 0000000000..23cabaae80 --- /dev/null +++ b/.changeset/lazy-rings-march.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-documentation': minor +--- + +Added a documentation page for the post stepper component. diff --git a/packages/documentation/.storybook/preview.ts b/packages/documentation/.storybook/preview.ts index 05f9bc9df0..6df370ed66 100644 --- a/packages/documentation/.storybook/preview.ts +++ b/packages/documentation/.storybook/preview.ts @@ -55,6 +55,7 @@ const preview: Preview = { 'Pagination', 'Popover', 'Progressbar', + 'Stepper', ], 'Patterns', 'Utilities', diff --git a/packages/documentation/src/shared/post-component-demo-link.mdx b/packages/documentation/src/shared/post-component-demo-link.mdx new file mode 100644 index 0000000000..6f1acdaa79 --- /dev/null +++ b/packages/documentation/src/shared/post-component-demo-link.mdx @@ -0,0 +1,8 @@ + + See archived documentation + diff --git a/packages/documentation/src/stories/components/stepper/stepper-component.sample.ts b/packages/documentation/src/stories/components/stepper/stepper-component.sample.ts new file mode 100644 index 0000000000..5df6b5129d --- /dev/null +++ b/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('-'); + } +} diff --git a/packages/documentation/src/stories/components/stepper/stepper-template.sample.html b/packages/documentation/src/stories/components/stepper/stepper-template.sample.html new file mode 100644 index 0000000000..b91caf9142 --- /dev/null +++ b/packages/documentation/src/stories/components/stepper/stepper-template.sample.html @@ -0,0 +1,23 @@ +
+ + + +
    +
  1. + + + {{ step }} + + {{ step }} +
    2. +
+
diff --git a/packages/documentation/src/stories/components/stepper/stepper.docs.mdx b/packages/documentation/src/stories/components/stepper/stepper.docs.mdx new file mode 100644 index 0000000000..ae5915f5d2 --- /dev/null +++ b/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'; + + + +
+ # Stepper + + +
+ +

Conveys progress through numbered steps.

+ +
+

The stepper uses ng-bootstrap's progressbar component.

+
+ + + + + + + +## Example + + + template.html + + + + + component.ts + + + + + diff --git a/packages/documentation/src/stories/components/stepper/stepper.stories.ts b/packages/documentation/src/stories/components/stepper/stepper.stories.ts new file mode 100644 index 0000000000..f6dc11dabd --- /dev/null +++ b/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``, +};