From 0ea0026800258797d1813b36a18854015588aeca Mon Sep 17 00:00:00 2001 From: Nattaya Buck <166115007+bucknatt@users.noreply.github.com> Date: Wed, 13 Aug 2025 12:29:20 +0200 Subject: [PATCH 01/20] added package-info tag with default colors from tag variant on docs --- packages/documentation/src/shared/package-tag.mdx | 3 +++ .../src/stories/components/accordion/accordion.docs.mdx | 4 +++- .../stories/components/app-store-badge/app-store-badge.mdx | 5 ++++- .../src/stories/components/avatar/avatar.docs.mdx | 5 ++++- .../src/stories/components/back-to-top/back-to-top.docs.mdx | 5 ++++- .../src/stories/components/badge/badge.docs.mdx | 5 ++++- .../src/stories/components/blockquote/blockquote.docs.mdx | 5 ++++- .../src/stories/components/breadcrumb/breadcrumbs.mdx | 5 ++++- .../src/stories/components/button/button.docs.mdx | 5 ++++- .../src/stories/components/rating/post-rating.docs.mdx | 5 ++++- 10 files changed, 38 insertions(+), 9 deletions(-) create mode 100644 packages/documentation/src/shared/package-tag.mdx diff --git a/packages/documentation/src/shared/package-tag.mdx b/packages/documentation/src/shared/package-tag.mdx new file mode 100644 index 0000000000..df4543aa88 --- /dev/null +++ b/packages/documentation/src/shared/package-tag.mdx @@ -0,0 +1,3 @@ +
+
@swisspost/design-system-{props.meta.tags[0] == 'package:HTML' ? "styles" : "components"}
+
diff --git a/packages/documentation/src/stories/components/accordion/accordion.docs.mdx b/packages/documentation/src/stories/components/accordion/accordion.docs.mdx index 2cae4facaa..103318578f 100644 --- a/packages/documentation/src/stories/components/accordion/accordion.docs.mdx +++ b/packages/documentation/src/stories/components/accordion/accordion.docs.mdx @@ -1,7 +1,8 @@ import { Canvas, Controls, Meta, Source } from '@storybook/addon-docs/blocks'; -import * as accordionStories from './accordion.stories'; +import meta, * as accordionStories from './accordion.stories'; import * as accordionItemStories from './accordion-item.stories'; import SampleCustomTrigger from './accordion-custom-trigger.sample?raw'; +import PackageTag from '@/shared/package-tag.mdx'; @@ -11,6 +12,7 @@ import SampleCustomTrigger from './accordion-custom-trigger.sample?raw'; +

Toggle the visibility of a set of related content in your project.

diff --git a/packages/documentation/src/stories/components/app-store-badge/app-store-badge.mdx b/packages/documentation/src/stories/components/app-store-badge/app-store-badge.mdx index a4904fa918..6cc7d5afe0 100644 --- a/packages/documentation/src/stories/components/app-store-badge/app-store-badge.mdx +++ b/packages/documentation/src/stories/components/app-store-badge/app-store-badge.mdx @@ -1,5 +1,6 @@ import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks'; -import * as AppStoreBadgeStories from './app-store-badge.stories'; +import meta, * as AppStoreBadgeStories from './app-store-badge.stories'; +import PackageTag from '@/shared/package-tag.mdx'; @@ -9,6 +10,8 @@ import * as AppStoreBadgeStories from './app-store-badge.stories'; + +
The app store badge leads the user to the respective product page in the Apple Store or Google Play, so the user can download the app.
diff --git a/packages/documentation/src/stories/components/avatar/avatar.docs.mdx b/packages/documentation/src/stories/components/avatar/avatar.docs.mdx index 63ea1514bc..0da9fed579 100644 --- a/packages/documentation/src/stories/components/avatar/avatar.docs.mdx +++ b/packages/documentation/src/stories/components/avatar/avatar.docs.mdx @@ -1,6 +1,7 @@ import { Canvas, Controls, Meta, Source } from '@storybook/addon-docs/blocks'; -import * as AvatarPictureStories from './avatar.stories'; +import meta, * as AvatarPictureStories from './avatar.stories'; import AvatarSample from './avatar.sample.scss?raw'; +import PackageTag from '@/shared/package-tag.mdx'; @@ -10,6 +11,8 @@ import AvatarSample from './avatar.sample.scss?raw'; + +
Display a user's profile picture or their initials if the picture is unavailable.
diff --git a/packages/documentation/src/stories/components/back-to-top/back-to-top.docs.mdx b/packages/documentation/src/stories/components/back-to-top/back-to-top.docs.mdx index bb448d9509..9006376605 100644 --- a/packages/documentation/src/stories/components/back-to-top/back-to-top.docs.mdx +++ b/packages/documentation/src/stories/components/back-to-top/back-to-top.docs.mdx @@ -1,6 +1,7 @@ import { Meta, Source } from '@storybook/addon-docs/blocks'; -import * as BackToTopStories from './back-to-top.stories.ts'; +import meta, * as BackToTopStories from './back-to-top.stories.ts'; import BackToTop from './back-to-top.sample.html?raw'; +import PackageTag from '@/shared/package-tag.mdx'; @@ -10,6 +11,8 @@ import BackToTop from './back-to-top.sample.html?raw'; + +
The Back to top component enables the user to scroll back to the top of the page with only a click. This is especially helpful for pages which require a lot of scrolling to reach the end. diff --git a/packages/documentation/src/stories/components/badge/badge.docs.mdx b/packages/documentation/src/stories/components/badge/badge.docs.mdx index 6074e73c36..ef7972ec36 100644 --- a/packages/documentation/src/stories/components/badge/badge.docs.mdx +++ b/packages/documentation/src/stories/components/badge/badge.docs.mdx @@ -1,6 +1,7 @@ import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks'; -import * as badgeStories from './badge.stories'; +import meta, * as badgeStories from './badge.stories'; import StylesPackageImport from '@/shared/styles-package-import.mdx'; +import PackageTag from '@/shared/package-tag.mdx'; @@ -10,6 +11,8 @@ import StylesPackageImport from '@/shared/styles-package-import.mdx';
+ +
Highlight a numerical characteristic or mark an item with a status.
diff --git a/packages/documentation/src/stories/components/blockquote/blockquote.docs.mdx b/packages/documentation/src/stories/components/blockquote/blockquote.docs.mdx index 16c9a1a1a6..c5e18c5ccc 100644 --- a/packages/documentation/src/stories/components/blockquote/blockquote.docs.mdx +++ b/packages/documentation/src/stories/components/blockquote/blockquote.docs.mdx @@ -1,6 +1,7 @@ import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks'; -import * as BlockquoteStories from './blockquote.stories.ts'; +import meta, * as BlockquoteStories from './blockquote.stories.ts'; import StylesPackageImport from '@/shared/styles-package-import.mdx'; +import PackageTag from '@/shared/package-tag.mdx'; @@ -10,6 +11,8 @@ import StylesPackageImport from '@/shared/styles-package-import.mdx'; + +
For quoting blocks of content from another source within your document. Wrap `
@@ -9,6 +10,8 @@ import * as BreadcrumbsStories from './breadcrumbs.stories';
+ +
The breadcrumbs is a secondary navigation pattern that helps users understand the hierarchy among levels and navigate back through them.
diff --git a/packages/documentation/src/stories/components/button/button.docs.mdx b/packages/documentation/src/stories/components/button/button.docs.mdx index 1f05ec8d86..93608eee26 100644 --- a/packages/documentation/src/stories/components/button/button.docs.mdx +++ b/packages/documentation/src/stories/components/button/button.docs.mdx @@ -1,6 +1,7 @@ import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks'; -import * as ButtonStories from './button.stories'; +import meta, * as ButtonStories from './button.stories'; import StylesPackageImport from '@/shared/styles-package-import.mdx'; +import PackageTag from '@/shared/package-tag.mdx'; @@ -10,6 +11,8 @@ import StylesPackageImport from '@/shared/styles-package-import.mdx'; + +
Use our custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. diff --git a/packages/documentation/src/stories/components/rating/post-rating.docs.mdx b/packages/documentation/src/stories/components/rating/post-rating.docs.mdx index 1a67e89a83..a3a913ab23 100644 --- a/packages/documentation/src/stories/components/rating/post-rating.docs.mdx +++ b/packages/documentation/src/stories/components/rating/post-rating.docs.mdx @@ -1,6 +1,7 @@ import { Canvas, Controls, Meta, Source } from '@storybook/addon-docs/blocks'; -import * as RatingStories from './post-rating.stories'; +import meta, * as RatingStories from './post-rating.stories'; import SampleEvents from './post-rating.events.sample?raw'; +import PackageTag from '@/shared/package-tag.mdx' @@ -10,6 +11,8 @@ import SampleEvents from './post-rating.events.sample?raw';
+ +

Our Rating Web Component allows you to easily integrate a customizable star rating system, providing an interactive and visually appealing way to gather and display user feedback.

From f753c84252de8dd74f5608e74485c6f73a78f12c Mon Sep 17 00:00:00 2001 From: Nattaya Buck <166115007+bucknatt@users.noreply.github.com> Date: Wed, 13 Aug 2025 13:38:42 +0200 Subject: [PATCH 02/20] added package-info tag with default colors from tag variant on docs --- .../stories/components/button-close/button-close.docs.mdx | 5 ++++- .../stories/components/button-group/button-group.docs.mdx | 5 ++++- .../stories/components/card-product/card-product.docs.mdx | 6 ++++-- .../documentation/src/stories/components/card/card.docs.mdx | 5 ++++- .../src/stories/components/checkbox/checkbox.docs.mdx | 6 +++++- .../documentation/src/stories/components/chip/chip.docs.mdx | 5 ++++- .../src/stories/components/collapsible/collapsible.docs.mdx | 5 ++++- .../src/stories/components/dialog/dialog.docs.mdx | 5 ++++- .../stories/components/togglebutton/togglebutton.docs.mdx | 5 ++++- 9 files changed, 37 insertions(+), 10 deletions(-) diff --git a/packages/documentation/src/stories/components/button-close/button-close.docs.mdx b/packages/documentation/src/stories/components/button-close/button-close.docs.mdx index 0db91d52e0..ebbdd034b2 100644 --- a/packages/documentation/src/stories/components/button-close/button-close.docs.mdx +++ b/packages/documentation/src/stories/components/button-close/button-close.docs.mdx @@ -1,5 +1,6 @@ import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks'; -import * as CloseButtonStories from './button-close.stories'; +import meta, * as CloseButtonStories from './button-close.stories'; +import PackageTag from '@/shared/package-tag.mdx'; @@ -9,6 +10,8 @@ import * as CloseButtonStories from './button-close.stories'; + +
The close button is a web component. It is a slightly adapted version of the icon button, intended for a specific use case. diff --git a/packages/documentation/src/stories/components/button-group/button-group.docs.mdx b/packages/documentation/src/stories/components/button-group/button-group.docs.mdx index 4d21a8b69e..78f99de9ef 100644 --- a/packages/documentation/src/stories/components/button-group/button-group.docs.mdx +++ b/packages/documentation/src/stories/components/button-group/button-group.docs.mdx @@ -1,6 +1,7 @@ import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks'; -import * as ButtonGroupStories from './button-group.stories'; +import meta, * as ButtonGroupStories from './button-group.stories'; import StylesPackageImport from '@/shared/styles-package-import.mdx'; +import PackageTag from '@/shared/package-tag.mdx'; @@ -10,6 +11,8 @@ import StylesPackageImport from '@/shared/styles-package-import.mdx';
+ +
Group a series of buttons together on a single line.
diff --git a/packages/documentation/src/stories/components/card-product/card-product.docs.mdx b/packages/documentation/src/stories/components/card-product/card-product.docs.mdx index 7e5e93c4ad..3b3d999892 100644 --- a/packages/documentation/src/stories/components/card-product/card-product.docs.mdx +++ b/packages/documentation/src/stories/components/card-product/card-product.docs.mdx @@ -1,8 +1,9 @@ import { Canvas, Controls, Meta, Source } from '@storybook/addon-docs/blocks'; -import * as ProductCardStories from './card-product.stories'; +import meta, * as ProductCardStories from './card-product.stories'; import StylesPackageImport from '@/shared/styles-package-import.mdx'; import ProductCardSyncHeights from './card-product.sample.js?raw'; import ProductCardAngularSyncHeights from './card-product.sample.ts?raw'; +import PackageTag from '@/shared/package-tag.mdx'; @@ -10,9 +11,10 @@ import ProductCardAngularSyncHeights from './card-product.sample.ts?raw'; # Card for Products - + +
Highlight essential product details and provide an entry point to access in-depth information.
diff --git a/packages/documentation/src/stories/components/card/card.docs.mdx b/packages/documentation/src/stories/components/card/card.docs.mdx index e83751b092..dd7cff0e29 100644 --- a/packages/documentation/src/stories/components/card/card.docs.mdx +++ b/packages/documentation/src/stories/components/card/card.docs.mdx @@ -1,6 +1,7 @@ import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks'; -import * as CardStories from './card.stories'; +import meta, * as CardStories from './card.stories'; import StylesPackageImport from '@/shared/styles-package-import.mdx'; +import PackageTag from '@/shared/package-tag.mdx'; @@ -10,6 +11,8 @@ import StylesPackageImport from '@/shared/styles-package-import.mdx'; + +
Cards provide a flexible and extensible content container with multiple variants and options.
diff --git a/packages/documentation/src/stories/components/checkbox/checkbox.docs.mdx b/packages/documentation/src/stories/components/checkbox/checkbox.docs.mdx index e2839e1a74..a18de41ca9 100644 --- a/packages/documentation/src/stories/components/checkbox/checkbox.docs.mdx +++ b/packages/documentation/src/stories/components/checkbox/checkbox.docs.mdx @@ -1,6 +1,8 @@ import { Canvas, Controls, Meta, Source } from '@storybook/addon-docs/blocks'; -import * as checkboxStories from './checkbox.stories'; +import meta, * as checkboxStories from './checkbox.stories'; import StylesPackageImport from '@/shared/styles-package-import.mdx'; +import PackageTag from '@/shared/package-tag.mdx'; + @@ -10,6 +12,8 @@ import StylesPackageImport from '@/shared/styles-package-import.mdx'; + +
Create consistent cross-browser and cross-device checkboxes with our completely custom checks component. diff --git a/packages/documentation/src/stories/components/chip/chip.docs.mdx b/packages/documentation/src/stories/components/chip/chip.docs.mdx index e2309cdd87..0fd028aa47 100644 --- a/packages/documentation/src/stories/components/chip/chip.docs.mdx +++ b/packages/documentation/src/stories/components/chip/chip.docs.mdx @@ -1,11 +1,14 @@ import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks'; -import * as ChipStories from './chip.stories'; +import meta, * as ChipStories from './chip.stories'; import StylesPackageImport from '@/shared/styles-package-import.mdx'; +import PackageTag from '@/shared/package-tag.mdx'; # Chip + +
Chips contain small labels which represent single values or a collection of values. These discrete pieces of information can be inputs, status, properties, categories or any other pieces of meta diff --git a/packages/documentation/src/stories/components/collapsible/collapsible.docs.mdx b/packages/documentation/src/stories/components/collapsible/collapsible.docs.mdx index 832c72aefd..dda8b86743 100644 --- a/packages/documentation/src/stories/components/collapsible/collapsible.docs.mdx +++ b/packages/documentation/src/stories/components/collapsible/collapsible.docs.mdx @@ -1,11 +1,14 @@ import { Canvas, Controls, Meta, Source } from '@storybook/addon-docs/blocks'; -import * as CollapsibleStories from './collapsible.stories'; +import meta, * as CollapsibleStories from './collapsible.stories'; import SampleCustomTrigger from './collapsible-custom-trigger.sample?raw'; +import PackageTag from '@/shared/package-tag.mdx'; # Collapsible + +

Toggle the visibility of content across your project.

The `` component is used to show and hide content. diff --git a/packages/documentation/src/stories/components/dialog/dialog.docs.mdx b/packages/documentation/src/stories/components/dialog/dialog.docs.mdx index d44441a420..9b9d95a710 100644 --- a/packages/documentation/src/stories/components/dialog/dialog.docs.mdx +++ b/packages/documentation/src/stories/components/dialog/dialog.docs.mdx @@ -1,12 +1,15 @@ import { Canvas, Controls, Meta, Source } from '@storybook/addon-docs/blocks'; -import * as DialogStories from './dialog.stories'; +import meta, * as DialogStories from './dialog.stories'; import JSFormData from './samples/js-form-data?raw'; import StylesPackageImport from '@/shared/styles-package-import.mdx'; +import PackageTag from '@/shared/package-tag.mdx'; # Dialog + +

Communicate crucial information and request user action.

For more information on the dialog element, please refer to the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog). diff --git a/packages/documentation/src/stories/components/togglebutton/togglebutton.docs.mdx b/packages/documentation/src/stories/components/togglebutton/togglebutton.docs.mdx index e30984038f..a78a6e213e 100644 --- a/packages/documentation/src/stories/components/togglebutton/togglebutton.docs.mdx +++ b/packages/documentation/src/stories/components/togglebutton/togglebutton.docs.mdx @@ -1,10 +1,13 @@ import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks'; -import * as toggleButtonStories from './togglebutton.stories'; +import meta, * as toggleButtonStories from './togglebutton.stories'; +import PackageTag from '@/shared/package-tag.mdx'; # Button Toggle + +

A toggle button component to switch between two states and display different content based on the current state.

From 1761274a7bf9d39fc352880c48f4e348f2978e36 Mon Sep 17 00:00:00 2001 From: Nattaya Buck <166115007+bucknatt@users.noreply.github.com> Date: Wed, 13 Aug 2025 13:40:22 +0200 Subject: [PATCH 03/20] added tags as keyvalue for meta in dialog compo on docs --- .../src/stories/components/dialog/dialog.stories.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/documentation/src/stories/components/dialog/dialog.stories.ts b/packages/documentation/src/stories/components/dialog/dialog.stories.ts index ff944c0d7d..23d5b68498 100644 --- a/packages/documentation/src/stories/components/dialog/dialog.stories.ts +++ b/packages/documentation/src/stories/components/dialog/dialog.stories.ts @@ -4,6 +4,7 @@ import { html, nothing } from 'lit-html'; const meta: Meta = { id: '562eac2b-6dc1-4007-ba8e-4e981cef0cbc', title: 'Components/Dialog', + tags: ['package:HTML'], parameters: { design: { type: 'figma', From 0dc66ea5623ce40c70cc0169fc8ea4127afdb678 Mon Sep 17 00:00:00 2001 From: Nattaya Buck <166115007+bucknatt@users.noreply.github.com> Date: Wed, 13 Aug 2025 14:33:35 +0200 Subject: [PATCH 04/20] added package-info tag with default colors from tag variant on docs --- .../src/stories/components/footer/footer.docs.mdx | 7 +++++-- .../stories/components/form-footer/form-footer.docs.mdx | 5 ++++- .../src/stories/components/forms/hint/hint.docs.mdx | 5 ++++- .../components/forms/validation/validation.docs.mdx | 5 ++++- .../src/stories/components/header/header.docs.mdx | 5 ++++- .../src/stories/components/input/input.docs.mdx | 5 ++++- .../components/language-switch/language-switch.docs.mdx | 5 ++++- .../src/stories/components/linkarea/linkarea.docs.mdx | 5 ++++- .../components/list-interactive/list-interactive.docs.mdx | 5 ++++- .../src/stories/components/popover/popover.docs.mdx | 5 ++++- .../src/stories/components/radio/radio.docs.mdx | 4 ++++ .../documentation/src/stories/components/search/search.mdx | 7 +++++-- .../components/segmented-button/segmented-button.docs.mdx | 5 ++++- .../src/stories/components/select/select.docs.mdx | 5 ++++- .../src/stories/components/skiplinks/skiplinks.docs.mdx | 5 ++++- .../src/stories/components/spinner/spinner.docs.mdx | 5 ++++- .../src/stories/components/stepper/stepper.docs.mdx | 5 ++++- .../components/subnavigation/subnavigation.docs.mdx | 7 +++++-- .../src/stories/components/switch/switch.docs.mdx | 5 ++++- 19 files changed, 79 insertions(+), 21 deletions(-) diff --git a/packages/documentation/src/stories/components/footer/footer.docs.mdx b/packages/documentation/src/stories/components/footer/footer.docs.mdx index 7954dcb96b..900be60448 100644 --- a/packages/documentation/src/stories/components/footer/footer.docs.mdx +++ b/packages/documentation/src/stories/components/footer/footer.docs.mdx @@ -1,5 +1,6 @@ import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks'; -import * as FooterStories from './footer.stories'; +import meta, * as FooterStories from './footer.stories'; +import PackageTag from '@/shared/package-tag.mdx'; @@ -9,6 +10,8 @@ import * as FooterStories from './footer.stories';
+ +

The composable footer component for your Swiss Post page.

Internally the `` component has a fix structure, but it offers a number of slots, which can be used to add your very own content, so it ultimatly fulfills everyones requirements. @@ -16,4 +19,4 @@ Internally the `` component has a fix structure, but it offers a nu - \ No newline at end of file + diff --git a/packages/documentation/src/stories/components/form-footer/form-footer.docs.mdx b/packages/documentation/src/stories/components/form-footer/form-footer.docs.mdx index fd93b802f9..dccf14f1ed 100644 --- a/packages/documentation/src/stories/components/form-footer/form-footer.docs.mdx +++ b/packages/documentation/src/stories/components/form-footer/form-footer.docs.mdx @@ -1,5 +1,6 @@ import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks'; -import * as FormFooterStories from './form-footer.stories'; +import meta, * as FormFooterStories from './form-footer.stories'; +import PackageTag from '@/shared/package-tag.mdx'; @@ -9,6 +10,8 @@ import * as FormFooterStories from './form-footer.stories';
+ +
The form footer is placed at the end/bottom of a form or a form step, in case the form is splitted with a stepper. It provides workflow-related actions to the form or form step.
diff --git a/packages/documentation/src/stories/components/forms/hint/hint.docs.mdx b/packages/documentation/src/stories/components/forms/hint/hint.docs.mdx index bd165faeec..eb74ddafca 100644 --- a/packages/documentation/src/stories/components/forms/hint/hint.docs.mdx +++ b/packages/documentation/src/stories/components/forms/hint/hint.docs.mdx @@ -1,6 +1,7 @@ import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks'; -import * as HintStories from './hint.stories'; +import meta, * as HintStories from './hint.stories'; import StylesPackageImport from '@/shared/styles-package-import.mdx'; +import PackageTag from '@/shared/package-tag.mdx'; @@ -10,6 +11,8 @@ import StylesPackageImport from '@/shared/styles-package-import.mdx'; + +
Form hint or assistive text is used under a form element to give guidance to users on how to best fill in fields. diff --git a/packages/documentation/src/stories/components/forms/validation/validation.docs.mdx b/packages/documentation/src/stories/components/forms/validation/validation.docs.mdx index e8109def1f..f5e8de77a2 100644 --- a/packages/documentation/src/stories/components/forms/validation/validation.docs.mdx +++ b/packages/documentation/src/stories/components/forms/validation/validation.docs.mdx @@ -1,5 +1,6 @@ import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks'; -import * as ValidationStories from './validation.stories'; +import meta, * as ValidationStories from './validation.stories'; +import PackageTag from '@/shared/package-tag.mdx'; @@ -9,6 +10,8 @@ import * as ValidationStories from './validation.stories';
+ +
The Validation component is a reusable component designed to provide consistent validation feedback across all components that require input validation. diff --git a/packages/documentation/src/stories/components/header/header.docs.mdx b/packages/documentation/src/stories/components/header/header.docs.mdx index dd18d96a56..a2a4cb3e54 100644 --- a/packages/documentation/src/stories/components/header/header.docs.mdx +++ b/packages/documentation/src/stories/components/header/header.docs.mdx @@ -1,7 +1,8 @@ import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks'; -import * as HeaderStories from './header.stories'; +import meta, * as HeaderStories from './header.stories'; import './header.styles.scss'; import StylesPackageImport from '@/shared/styles-package-import.mdx'; +import PackageTag from '@/shared/package-tag.mdx'; @@ -11,6 +12,8 @@ import StylesPackageImport from '@/shared/styles-package-import.mdx';
+ +
The header of the Post.
diff --git a/packages/documentation/src/stories/components/input/input.docs.mdx b/packages/documentation/src/stories/components/input/input.docs.mdx index 26a53de915..cd9ff1a907 100644 --- a/packages/documentation/src/stories/components/input/input.docs.mdx +++ b/packages/documentation/src/stories/components/input/input.docs.mdx @@ -1,6 +1,7 @@ import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks'; -import * as InputStories from './input.stories'; +import meta, * as InputStories from './input.stories'; import StylesPackageImport from '@/shared/styles-package-import.mdx'; +import PackageTag from '@/shared/package-tag.mdx'; @@ -10,6 +11,8 @@ import StylesPackageImport from '@/shared/styles-package-import.mdx'; + +
Customize the native `` with CSS that changes the element’s initial appearance.
diff --git a/packages/documentation/src/stories/components/language-switch/language-switch.docs.mdx b/packages/documentation/src/stories/components/language-switch/language-switch.docs.mdx index 732469da2b..b0f09abb50 100644 --- a/packages/documentation/src/stories/components/language-switch/language-switch.docs.mdx +++ b/packages/documentation/src/stories/components/language-switch/language-switch.docs.mdx @@ -1,6 +1,7 @@ import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks'; -import * as languageSwitchStories from './language-switch.stories'; +import meta, * as languageSwitchStories from './language-switch.stories'; import { PostBanner } from '@swisspost/design-system-components-react'; +import PackageTag from '@/shared/package-tag.mdx'; @@ -11,6 +12,8 @@ import { PostBanner } from '@swisspost/design-system-components-react'; + +

The language option switch is a web component which enables users to select their preferred language. diff --git a/packages/documentation/src/stories/components/linkarea/linkarea.docs.mdx b/packages/documentation/src/stories/components/linkarea/linkarea.docs.mdx index 127ebbc0c4..9bc253ba4b 100644 --- a/packages/documentation/src/stories/components/linkarea/linkarea.docs.mdx +++ b/packages/documentation/src/stories/components/linkarea/linkarea.docs.mdx @@ -1,10 +1,13 @@ import { Canvas, Controls, Meta, } from '@storybook/addon-docs/blocks'; -import * as linkareaStories from './linkarea.stories'; +import meta, * as linkareaStories from './linkarea.stories'; +import PackageTag from '@/shared/package-tag.mdx'; # Link Area + +

A web component that delegates clicks on it's area.

diff --git a/packages/documentation/src/stories/components/list-interactive/list-interactive.docs.mdx b/packages/documentation/src/stories/components/list-interactive/list-interactive.docs.mdx index d08e1dffd9..37ca990f15 100644 --- a/packages/documentation/src/stories/components/list-interactive/list-interactive.docs.mdx +++ b/packages/documentation/src/stories/components/list-interactive/list-interactive.docs.mdx @@ -1,6 +1,7 @@ import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks'; -import * as ListGroup from './list-interactive.stories'; +import meta, * as ListGroup from './list-interactive.stories'; import StylesPackageImport from '@/shared/styles-package-import.mdx'; +import PackageTag from '@/shared/package-tag.mdx'; @@ -11,6 +12,8 @@ import StylesPackageImport from '@/shared/styles-package-import.mdx'; + +
Lists consist of related content grouped together and organized vertically.
diff --git a/packages/documentation/src/stories/components/popover/popover.docs.mdx b/packages/documentation/src/stories/components/popover/popover.docs.mdx index 9301ab4d99..0891d3b864 100644 --- a/packages/documentation/src/stories/components/popover/popover.docs.mdx +++ b/packages/documentation/src/stories/components/popover/popover.docs.mdx @@ -1,5 +1,6 @@ import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks'; -import * as PopoverStories from './popover.stories'; +import meta, * as PopoverStories from './popover.stories'; +import PackageTag from '@/shared/package-tag.mdx'; @@ -9,6 +10,8 @@ import * as PopoverStories from './popover.stories'; + +
For longer, informative messages or explanations and also simple interactive elements like links.
diff --git a/packages/documentation/src/stories/components/radio/radio.docs.mdx b/packages/documentation/src/stories/components/radio/radio.docs.mdx index 97590aea3c..48af5b9f59 100644 --- a/packages/documentation/src/stories/components/radio/radio.docs.mdx +++ b/packages/documentation/src/stories/components/radio/radio.docs.mdx @@ -1,5 +1,7 @@ import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks'; +import meta, * as StepperStories from './radio.stories'; import StylesPackageImport from '@/shared/styles-package-import.mdx'; +import PackageTag from '@/shared/package-tag.mdx'; import * as RadioStories from './radio.stories'; @@ -11,6 +13,8 @@ import * as RadioStories from './radio.stories'; + +
Customize the native <input type="radio"> with CSS that changes the element’s initial appearance. Consistent, cross-browser and cross-device. diff --git a/packages/documentation/src/stories/components/search/search.mdx b/packages/documentation/src/stories/components/search/search.mdx index de5b99a3d5..737baea13f 100644 --- a/packages/documentation/src/stories/components/search/search.mdx +++ b/packages/documentation/src/stories/components/search/search.mdx @@ -1,6 +1,7 @@ import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks'; -import * as SearchInputStories from './search.stories'; +import meta, * as SearchInputStories from './search.stories'; import StylesPackageImport from '@/shared/styles-package-import.mdx'; +import PackageTag from '@/shared/package-tag.mdx'; @@ -10,6 +11,8 @@ import StylesPackageImport from '@/shared/styles-package-import.mdx';
+ +
Customize the native `` element with CSS that changes the element’s initial appearance.
@@ -20,4 +23,4 @@ import StylesPackageImport from '@/shared/styles-package-import.mdx'; - \ No newline at end of file + diff --git a/packages/documentation/src/stories/components/segmented-button/segmented-button.docs.mdx b/packages/documentation/src/stories/components/segmented-button/segmented-button.docs.mdx index 743cab6b89..988808e4fe 100644 --- a/packages/documentation/src/stories/components/segmented-button/segmented-button.docs.mdx +++ b/packages/documentation/src/stories/components/segmented-button/segmented-button.docs.mdx @@ -1,6 +1,7 @@ import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks'; -import * as SegmentedButtonStories from './segmented-button.stories'; +import meta, * as SegmentedButtonStories from './segmented-button.stories'; import StylesPackageImport from '@/shared/styles-package-import.mdx'; +import PackageTag from '@/shared/package-tag.mdx'; @@ -10,6 +11,8 @@ import StylesPackageImport from '@/shared/styles-package-import.mdx'; + + The segmented button is a single-select component. It allows users to toggle between two or more content sections within the same area on the screen. diff --git a/packages/documentation/src/stories/components/select/select.docs.mdx b/packages/documentation/src/stories/components/select/select.docs.mdx index 3f1e67ae0e..62e8a61f3e 100644 --- a/packages/documentation/src/stories/components/select/select.docs.mdx +++ b/packages/documentation/src/stories/components/select/select.docs.mdx @@ -1,6 +1,7 @@ import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks'; -import * as SelectStories from './select.stories'; +import meta, * as SelectStories from './select.stories'; import StylesPackageImport from '@/shared/styles-package-import.mdx'; +import PackageTag from '@/shared/package-tag.mdx'; @@ -10,6 +11,8 @@ import StylesPackageImport from '@/shared/styles-package-import.mdx'; + +
Customize the native `