feat(documentation): Set id/permalink for stories

packages/documentation/cypress/e2e/toast.cy.ts

@@ -1,8 +1,8 @@
 describe('toast', () => {
   describe('default', () => {
     beforeEach(() => {
-      cy.visit(`/iframe.html?id=components-toast--auto-close`);
-      cy.get('button.btn').as('triggerCreateToast');
+      cy.visit(`/iframe.html?id=825b65c9-7eaf-4e0a-9e20-5f5ed406726d--auto-close`);
+      cy.get('button.btn', { timeout: 30000 }).as('triggerCreateToast');
     });
 
     it('should hide on close button click', () => {

packages/documentation/src/shared/styles-package-import.mdx

@@ -5,7 +5,7 @@ import { getComponentStyleImports } from './styles-package-import-individual.sam
 
 <p>
   <small>*Make sure the `@swisspost/design-system-styles` package is already present in your project
-    or follow the [installation guidelines](http://localhost:9000/?path=/docs/getting-started-styles--docs).*</small>
+    or follow the [installation guidelines](http://localhost:9000/?path=/docs/e53e2de8-0bbf-4f70-babc-074c5466f700--docs).*</small>
 </p>
 
 To import all Design System styles:

packages/documentation/src/stories/components/accordion/accordion.snapshot.stories.tsx → packages/documentation/src/stories/components/accordion/accordion.snapshot.stories.ts

@@ -2,8 +2,10 @@ import type { StoryContext, StoryObj } from '@storybook/web-components';
 import meta, { Default } from './accordion.stories';
 import { html } from 'lit';
 
+const { id, ...metaWithoutId } = meta;
+
 export default {
-  ...meta,
+  ...metaWithoutId,
   title: 'Snapshots',
 };
 

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

@@ -4,6 +4,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta<HTMLPostAccordionElement> = {
+  id: '4d1b4185-e04d-494a-ab38-2b56c1778b0b',
   title: 'Components/Accordion',
   component: 'post-accordion',
   parameters: {

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

@@ -46,7 +46,7 @@ Alerts are intended to attract the user's attention without interrupting their o
 
       Alerts come with a preassigned icon based on their type.
       You have the option to customize this icon by using a `post-icon` element inside the alert.
-      For more information, read the [getting started with icons guide](/?path=/docs/components-icons-getting-started--docs).
+      For more information, read the [getting started with icons guide](/?path=/docs/40ed323b-9c1a-42ab-91ed-15f97f214608--docs).
 
       <Canvas of={AlertStories.CustomIcon} />
 
@@ -79,7 +79,7 @@ Alerts are intended to attract the user's attention without interrupting their o
       ## Installation
 
       The `<post-alert/>` element is part of the `@swisspost/design-system-components` package.
-      For more information, read the [getting started with components guide](/?path=/docs/getting-started-components--docs).
+      For more information, read the [getting started with components guide](/?path=/docs/edfb619b-fda1-4570-bf25-20830303d483--docs).
 
       ## Examples
 
@@ -97,7 +97,7 @@ Alerts are intended to attract the user's attention without interrupting their o
 
       Alerts come with a preassigned icon based on their type.
       You have the option to customize this icon by assigning the desired icon's name to the `icon` property of the alert.
-      Find the icon you need with the [icon search page](/?path=/docs/components-icons-search-for-icons--docs).
+      Find the icon you need with the [icon search page](/?path=/docs/5704bdc4-c5b5-45e6-b123-c54d01fce2f1--docs).
 
       <Canvas of={PostAlertStories.CustomIcon} />
 

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

@@ -1,12 +1,14 @@
 import { Args, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
-import { spreadArgs, bombArgs } from '../../../utils';
+import { bombArgs, spreadArgs } from '../../../utils';
 import alertMeta from './standard-html/alert.stories';
 import { getAlertClasses } from './standard-html/getAlertClasses';
 import { BADGE } from '../../../../.storybook/constants';
 
+const { id, ...metaWithoutId } = alertMeta;
+
 export default {
-  ...alertMeta,
+  ...metaWithoutId,
   title: 'Snapshots',
   parameters: {
     badges: [BADGE.SINCE_V1],

packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts

@@ -7,6 +7,7 @@ import { getAlertClasses } from './getAlertClasses';
 import { BADGE } from '../../../../../.storybook/constants';
 
 const meta: Meta = {
+  id: '105e67d8-31e9-4d0b-87ff-685aba31fd4c',
   title: 'Components/Alert',
   render: renderAlert,
   decorators: [externalControl],
@@ -63,7 +64,7 @@ const meta: Meta = {
         'The icon to display in the alert. By default, the icon depends on the alert type.' +
         '<span className="mt-mini alert alert-info alert-sm">' +
         'To use a custom icon, you must first ' +
-        '<a href="?path=/docs/components-icons-getting-started--docs">set up the icons in your project</a>' +
+        '<a href="?path=/docs/40ed323b-9c1a-42ab-91ed-15f97f214608--docs">set up the icons in your project</a>' +
         '.</span>',
       if: {
         arg: 'noIcon',
@@ -122,9 +123,7 @@ function externalControl(story: StoryFn, { args, context }: StoryContext) {
     </a>
   `;
 
-  return html`
-    ${args.fixed ? button : nothing} ${story(args, context)}
-  `;
+  return html` ${args.fixed ? button : nothing} ${story(args, context)} `;
 }
 
 // RENDERER
@@ -133,31 +132,19 @@ function renderAlert(args: Args) {
   const classes = getAlertClasses(args);
 
   const content = html`
-    ${args.title
-      ? html`
-          <h4 class="alert-heading">${args.title}</h4>
-        `
-      : nothing}
+    ${args.title ? html` <h4 class="alert-heading">${args.title}</h4> ` : nothing}
     ${unsafeHTML(args.content)}
   `;
 
   return html`
     <div class="${classes}" role="alert">
       ${
         /* Alert Icon */
-        args.icon
-          ? html`
-              <post-icon name=${args.icon}></post-icon>
-            `
-          : nothing
+        args.icon ? html` <post-icon name=${args.icon}></post-icon> ` : nothing
       }
       ${
         /* Alert Content */
-        args.action
-          ? html`
-              <div class="alert-content">${content}</div>
-            `
-          : content
+        args.action ? html` <div class="alert-content">${content}</div> ` : content
       }
       ${
         /* Alert Action Buttons */

packages/documentation/src/stories/components/alert/web-component/post-alert.stories.ts

@@ -4,6 +4,7 @@ import { BADGE } from '../../../../../.storybook/constants';
 import { spreadArgs } from '../../../../utils';
 
 const meta: Meta<HTMLPostAlertElement> = {
+  id: '8fd36823-966e-46a8-8432-a4439f6e208f',
   title: 'Components/Post Alert',
   component: 'post-alert',
   render: renderAlert,
@@ -107,9 +108,7 @@ function externalControl(story: StoryFn, context: StoryContext) {
 
 // RENDERER
 function renderAlert(args: Partial<HTMLPostAlertElement>) {
-  return html`
-    <post-alert ${spreadArgs(args)}></post-alert>
-  `;
+  return html` <post-alert ${spreadArgs(args)}></post-alert> `;
 }
 
 // STORIES

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

@@ -3,8 +3,10 @@ import meta from './badge.stories';
 import { html } from 'lit';
 import { bombArgs } from '../../../utils';
 
+const { id, ...metaWithoutId } = meta;
+
 export default {
-  ...meta,
+  ...metaWithoutId,
   title: 'Snapshots',
 };
 

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

@@ -5,6 +5,7 @@ import { BADGE } from '../../../../.storybook/constants';
 import { mapClasses } from '../../../utils';
 
 const meta: Meta = {
+  id: 'bec68e8b-445e-4760-8bd7-1b9970206d8d',
   title: 'Components/Badge',
   render: renderBadge,
   decorators: [externalControl],
@@ -120,20 +121,14 @@ function externalControl(story: any, { args }: StoryContext) {
     </a>
   `;
 
-  return html`
-    ${args.dismissed ? button : nothing} ${story()}
-  `;
+  return html` ${args.dismissed ? button : nothing} ${story()} `;
 }
 
 // RENDERER
 function getDefaultContent(args: Args) {
   return html`
     <span>${args.text}</span>
-    ${args.nestedBadge
-      ? html`
-          <span class="badge">10</span>
-        `
-      : nothing}
+    ${args.nestedBadge ? html` <span class="badge">10</span> ` : nothing}
   `;
 }
 
@@ -178,10 +173,7 @@ function getDismissButton(updateArgs: (args: Args) => void) {
 function renderBadge(args: Args, context: StoryContext) {
   const [_, updateArgs] = useArgs();
 
-  if (args.dismissed)
-    return html`
-      ${nothing}
-    `;
+  if (args.dismissed) return html` ${nothing} `;
 
   const isCheckable = args.interactionType === 'checkable';
   const isDismissible = args.interactionType === 'dismissible';

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

@@ -3,8 +3,10 @@ import meta from './blockquote.stories';
 import { html } from 'lit';
 import { bombArgs } from '../../../utils';
 
+const { id, ...metaWithoutId } = meta;
+
 export default {
-  ...meta,
+  ...metaWithoutId,
   title: 'Snapshots',
 };
 

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

@@ -3,6 +3,7 @@ import { html, unsafeStatic } from 'lit/static-html.js';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
+  id: 'a4c7d5fa-9f8d-4a95-820b-ae4ce9ab4f03',
   title: 'Components/Blockquote',
   render: renderBlockquote,
   parameters: {

packages/documentation/src/stories/components/button-group/button-group.snapshot.stories.ts

@@ -3,8 +3,10 @@ import meta from './button-group.stories';
 import { html } from 'lit';
 import { bombArgs } from '../../../utils';
 
+const { id, ...metaWithoutId } = meta;
+
 export default {
-  ...meta,
+  ...metaWithoutId,
   title: 'Snapshots',
 };
 

packages/documentation/src/stories/components/button-group/button-group.stories.ts

@@ -4,6 +4,7 @@ import { useArgs } from '@storybook/preview-api';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
+  id: '021d61aa-e039-4858-b4b9-b86a3e772811',
   title: 'Components/Button Group',
   render: renderButtonGroup,
   parameters: {

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

@@ -24,7 +24,7 @@ The following examples show the different characteristics of the component. Thes
 
 ### Inverted
 
-Inverted buttons don't need special classes anymore, just use any of the [background classes](/?path=/docs/utilities-background--docs) to set the background and you're done for the day.
+Inverted buttons don't need special classes anymore, just use any of the [background classes](/?path=/docs/60852fac-a861-4415-8276-bd38d68653bb--docs) to set the background and you're done for the day.
 
 <Canvas of={ButtonStories.Inverted} />
 
@@ -53,7 +53,7 @@ To achieve that, you can use classes in the format:
 
 For example, a button with classes `w-100 w-lg-auto` will use all available space only when the viewport size is smaller than `lg`.
 
-To learn more about breakpoints, see the <a href="/?path=/docs/foundations-layout-breakpoints--docs">Breakpoints documentation</a>.
+To learn more about breakpoints, see the <a href="/?path=/docs/20af6e2b-32b1-42ef-a187-b026aea7fe13--docs">Breakpoints documentation</a>.
 
 <Canvas of={ButtonStories.FullWidth} />
 

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

@@ -3,8 +3,10 @@ import meta, { Default, AccentColors, ContextualColors } from './button.stories'
 import { html } from 'lit';
 import { bombArgs } from '../../../utils';
 
+const { id, ...metaWithoutId } = meta;
+
 export default {
-  ...meta,
+  ...metaWithoutId,
   title: 'Snapshots',
 };
 

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

@@ -5,6 +5,7 @@ import { repeat } from 'lit/directives/repeat.js';
 import { BADGE } from '@geometricpanda/storybook-addon-badges';
 
 const meta: Meta = {
+  id: 'eb78afcb-ce92-4990-94b6-6536d5ec6af4',
   title: 'Components/Button',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
@@ -137,7 +138,7 @@ const meta: Meta = {
         'Defines a custom icon.' +
         '<span className="mt-mini alert alert-info alert-sm">' +
         'To use a custom icon, you must first ' +
-        '<a href="?path=/docs/components-icons-getting-started--docs">set up the icons in your project</a>' +
+        '<a href="?path=/docs/40ed323b-9c1a-42ab-91ed-15f97f214608--docs">set up the icons in your project</a>' +
         '.</span>',
       if: {
         arg: 'tag',
@@ -195,7 +196,7 @@ const meta: Meta = {
     disabled: {
       name: 'Disabled',
       description:
-        'When set to `true`, makes the component appear inactive and disables its functionality.<div className="mt-mini alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/foundations-accessibility--docs#disabled-state">disabled state accessibility guide</a>.</div>',
+        'When set to `true`, makes the component appear inactive and disables its functionality.<div className="mt-mini alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#disabled-state">disabled state accessibility guide</a>.</div>',
       control: {
         type: 'boolean',
       },
@@ -217,22 +218,12 @@ const Template = {
     const props = createProps(args, isAnimated);
 
     if (args.tag === 'input') {
-      return html`
-        <${tagName} ${spread(props)} />
-      `;
+      return html` <${tagName} ${spread(props)} /> `;
     } else {
-      const icon = html`
-        <post-icon aria-hidden="true" name="${args.icon}"></post-icon>
-      `;
-      const iconOnlyContent = html`
-        <span class="visually-hidden">${args.text}</span>
-      `;
-      const animatedContent = html`
-        <span>${args.text}</span>
-      `;
-      const text = html`
-        ${args.text}
-      `;
+      const icon = html` <post-icon aria-hidden="true" name="${args.icon}"></post-icon> `;
+      const iconOnlyContent = html` <span class="visually-hidden">${args.text}</span> `;
+      const animatedContent = html` <span>${args.text}</span> `;
+      const text = html` ${args.text} `;
 
       return html`
         <${tagName} ${spread(props)}>
@@ -271,11 +262,7 @@ export const Default: Story = {
 
 export const Inverted: Story = {
   ...Template,
-  decorators: [
-    (story: Function) => html`
-      <div class="p-3 bg-dark">${story()}</div>
-    `,
-  ],
+  decorators: [(story: Function) => html` <div class="p-3 bg-dark">${story()}</div> `],
 };
 
 const VariantsTemplate = {
@@ -285,10 +272,7 @@ const VariantsTemplate = {
     },
   },
   decorators: [
-    (story: Function) =>
-      html`
-        <div class="d-flex gap-small-r flex-wrap">${story()}</div>
-      `,
+    (story: Function) => html` <div class="d-flex gap-small-r flex-wrap">${story()}</div> `,
   ],
   render: (args: Args) =>
     html`

packages/documentation/src/stories/components/cards/card/card.docs.mdx

@@ -14,7 +14,7 @@ Built with flexbox, they offer easy alignment and mix well with other components
 
 They have no fixed width to start, so they’ll naturally fill the full width of its parent element.
 This is easily customizable using the grid for example,
-for more details read our [grid docs](/?path=/docs/foundations-layout-grid--docs).
+for more details read our [grid docs](/?path=/docs/7240f2ef-216a-490e-9bd8-c0cef19f7b31--docs).
 
 <Canvas sourceState="shown" of={CardStories.Default} />
 <div className="hide-col-default">

packages/documentation/src/stories/components/cards/card/card.snapshot.stories.ts

@@ -3,8 +3,10 @@ import meta, { Default, CustomContent, CardGroup } from './card.stories';
 import { html } from 'lit';
 import { bombArgs } from '../../../../utils';
 
+const { id, ...metaWithoutId } = meta;
+
 export default {
-  ...meta,
+  ...metaWithoutId,
   title: 'Snapshots',
 };