chore(docs): add click blocker on stories

Author: leagrdv

.changeset/seven-cars-melt.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Added a click blocker decorator on all of the components that had links to prevent users being redirected to another page.

packages/documentation/src/shared/click-blocker.ts

@@ -0,0 +1,9 @@
+import { StoryContext, StoryFn } from '@storybook/web-components';
+import { html } from 'lit';
+
+// Click blocker decorator to prevent clicking on example links
+export function clickBlocker(story: StoryFn, context: StoryContext) {
+  return html`
+    <div @click=${(e: Event) => e.preventDefault()}>${story(context.args, context)}</div>
+  `;
+}

packages/documentation/src/stories/components/app-store-badge/app-store-badge.stories.ts

@@ -1,11 +1,13 @@
 import { StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { MetaComponent } from '@root/types';
+import { clickBlocker } from '@/shared/click-blocker';
 
 const meta: MetaComponent = {
   id: 'f1cda0ac-28d4-4afc-b56d-9182bd9bd671',
   title: 'Components/App Store Badge',
   tags: ['package:HTML'],
+  decorators: [clickBlocker],
   parameters: {
     badges: [],
     design: {

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

@@ -2,6 +2,7 @@ import { Args, StoryContext, StoryObj } from '@storybook/web-components';
 import { MetaComponent } from '@root/types';
 import { html, nothing } from 'lit';
 import { components } from '@swisspost/design-system-components/dist/docs.json';
+import { clickBlocker } from '@/shared/click-blocker';
 
 const AVATAR_ARGTYPES = components.find(c => c.tag === 'post-avatar');
 const USERID_ARGTYPE = AVATAR_ARGTYPES?.props.find(p => p.name === 'userid');
@@ -75,6 +76,7 @@ export const Default: Story = {
 };
 
 export const AnchorWrapped: Story = {
+  decorators: [clickBlocker],
   render: (args: Args, context: StoryContext) => {
     return html`<a href="#">${Default.render?.(args, context)}</a>`;
   },

packages/documentation/src/stories/components/breadcrumb/breadcrumbs.stories.ts

@@ -1,11 +1,13 @@
 import type { Args, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { MetaComponent } from '@root/types';
+import { clickBlocker } from '@/shared/click-blocker';
 
 const meta: MetaComponent = {
   id: 'b7db7391-f893-4b1e-a125-b30c6f0b028b',
   title: 'Components/Breadcrumbs',
   tags: ['package:WebComponents'],
+  decorators: [clickBlocker],
   parameters: {
     badges: [],
     design: {

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

@@ -2,6 +2,7 @@ import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { useArgs } from '@storybook/preview-api';
 import { MetaComponent } from '@root/types';
+import { clickBlocker } from '@/shared/click-blocker';
 
 const meta: MetaComponent = {
   id: '021d61aa-e039-4858-b4b9-b86a3e772811',
@@ -127,19 +128,7 @@ const meta: MetaComponent = {
       },
     },
   },
-  decorators: [
-    story =>
-      html`
-        <div
-          @click="${(e: Event) => {
-            const target = e.target as HTMLElement;
-            if (target.tagName === 'A' || target.tagName === 'BUTTON') e.preventDefault();
-          }}"
-        >
-          ${story()}
-        </div>
-      `,
-  ],
+  decorators: [clickBlocker],
 };
 
 export default meta;

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

@@ -3,11 +3,13 @@ import { html, unsafeStatic } from 'lit/static-html.js';
 import { spread } from '@open-wc/lit-helpers';
 import { repeat } from 'lit/directives/repeat.js';
 import { MetaComponent } from '@root/types';
+import { clickBlocker } from '@/shared/click-blocker';
 
 const meta: MetaComponent = {
   id: 'eb78afcb-ce92-4990-94b6-6536d5ec6af4',
   title: 'Components/Button',
   tags: ['package:HTML'],
+  decorators: [clickBlocker],
   parameters: {
     badges: [],
     design: {

packages/documentation/src/stories/components/card-product/card-product.stories.ts

@@ -2,6 +2,7 @@ import type { Args, StoryContext, StoryFn, StoryObj } from '@storybook/web-compo
 import { html, unsafeStatic } from 'lit/static-html.js';
 import { nothing } from 'lit';
 import { MetaComponent } from '@root/types';
+import { clickBlocker } from '@/shared/click-blocker';
 
 const meta: MetaComponent = {
   id: 'b4800d9e-4837-4476-a327-bb4586eb7e97',
@@ -58,13 +59,6 @@ const meta: MetaComponent = {
 
 export default meta;
 
-// DECORATORS
-function clickBlocker(story: StoryFn, context: StoryContext) {
-  return html`
-    <div @click=${(e: Event) => e.preventDefault()}>${story(context.args, context)}</div>
-  `;
-}
-
 function paddedContainer(story: StoryFn, context: StoryContext) {
   return html` <div class="p-8">${story(context.args, context)}</div> `;
 }

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

@@ -3,6 +3,7 @@ import { html, nothing } from 'lit';
 import { choose } from 'lit/directives/choose.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { MetaComponent } from '@root/types';
+import { clickBlocker } from '@/shared/click-blocker';
 
 const meta: MetaComponent = {
   id: '605c788d-3f75-4e6c-8498-be3d546843c2',
@@ -205,13 +206,6 @@ const meta: MetaComponent = {
 
 export default meta;
 
-// DECORATORS
-function clickBlocker(story: StoryFn, context: StoryContext) {
-  return html`
-    <div @click=${(e: Event) => e.preventDefault()}>${story(context.args, context)}</div>
-  `;
-}
-
 function gridContainer(story: StoryFn, context: StoryContext) {
   return html`
     <div class="row gy-16">

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

@@ -1,6 +1,7 @@
 import { Args, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { MetaComponent } from '@root/types';
+import { clickBlocker } from '@/shared/click-blocker';
 
 const GRID_CELLS = [1, 2, 3, 4];
 const LINKS_PER_CELL = [6, 8, 8, 5];
@@ -10,6 +11,7 @@ const meta: MetaComponent = {
   title: 'Components/Footer',
   component: 'post-footer',
   tags: ['package:WebComponents'],
+  decorators: [clickBlocker],
   parameters: {
     layout: 'fullscreen',
     badges: [],

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

@@ -2,6 +2,7 @@ import type { StoryObj } from '@storybook/web-components';
 import { MetaComponent } from '@root/types';
 import { html } from 'lit';
 import { fakeContent } from '@/utils';
+import { clickBlocker } from '@/shared/click-blocker';
 
 const meta: MetaComponent = {
   id: '27a2e64d-55ba-492d-ab79-5f7c5e818498',
@@ -57,7 +58,7 @@ const meta: MetaComponent = {
     story =>
       html` <div class="header-story-wrapper">
         <div class="virtual-body">${story()} ${fakeContent()}</div>
-      </div>`,
+      </div>`, clickBlocker
   ],
 };
 

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

@@ -1,6 +1,7 @@
 import type { Args, StoryObj } from '@storybook/web-components';
 import { html, nothing } from 'lit';
 import { MetaComponent } from '@root/types';
+import { clickBlocker } from '@/shared/click-blocker';
 
 export interface PostLinkarea {
   dataLink?: boolean;
@@ -14,6 +15,7 @@ const meta: MetaComponent<PostLinkarea> = {
   tags: ['package:WebComponents'],
   render: renderLinkarea,
   component: 'post-linkarea',
+  decorators: [clickBlocker],
   parameters: {
     design: {},
   },

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

@@ -1,13 +1,14 @@
 import type { Args, StoryContext, StoryFn, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { MetaComponent } from '@root/types';
+import { clickBlocker } from '@/shared/click-blocker';
 
 const meta: MetaComponent = {
   id: '5a47ba70-7831-4e59-b83e-81b6e6c32372',
   title: 'Components/List Group',
   tags: ['package:HTML'],
   render: renderListGroup,
-  decorators: [gridDecorator],
+  decorators: [gridDecorator, clickBlocker],
   parameters: {
     design: {
       type: 'figma',

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

@@ -1,11 +1,13 @@
 import type { StoryObj } from '@storybook/web-components';
 import { html } from 'lit/static-html.js';
 import { MetaExtended } from '@root/types';
+import { clickBlocker } from '@/shared/click-blocker';
 
 const meta: MetaExtended = {
   id: '2fc3b456-19ba-4ede-b1bc-499518f829b1',
   title: 'Components/Skiplinks',
   tags: ['package:HTML'],
+  decorators: [clickBlocker],
   render: renderSkiplinks,
 };
 

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

@@ -1,6 +1,7 @@
-import { Args, StoryContext, StoryFn, StoryObj } from '@storybook/web-components';
+import { Args, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { MetaComponent } from '@root/types';
+import { clickBlocker } from '@/shared/click-blocker';
 
 const meta: MetaComponent = {
   id: '87ceabbb-f552-46eb-8a47-4d84e7f8cef0',
@@ -54,13 +55,6 @@ const meta: MetaComponent = {
 
 export default meta;
 
-// DECORATOR
-function clickBlocker(story: StoryFn, context: StoryContext) {
-  return html`
-    <div @click=${(e: Event) => e.preventDefault()}>${story(context.args, context)}</div>
-  `;
-}
-
 function renderTest(args: Args) {
   return html`
     <div class="subnavigation ${args.palette}">

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

@@ -1,10 +1,12 @@
 import { Args, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { MetaComponent } from '@root/types';
+import { clickBlocker } from '@/shared/click-blocker';
 
 const meta: MetaComponent = {
   id: '68699b2c-ec1f-467d-81ae-8b3f48d7c595',
   title: 'Components/Card Teaser',
+  decorators: [clickBlocker],
   tags: ['package:HTML'],
   parameters: {
     design: {

packages/documentation/src/stories/foundations/logo/logo.stories.ts

@@ -1,6 +1,7 @@
 import { StoryContext, StoryFn, StoryObj } from '@storybook/web-components';
 import { html, nothing } from 'lit';
 import { MetaComponent } from '@root/types';
+import { clickBlocker } from '@/shared/click-blocker';
 
 const meta: MetaComponent<HTMLPostLogoElement> = {
   id: '73066e1c-0720-4a9b-8f81-a29d4250872a',
@@ -56,7 +57,7 @@ export const Link: Story = {
     url: 'https://www.post.ch/en',
   },
   render: renderLogo('the homepage'),
-  decorators: [containerWithHeight],
+  decorators: [containerWithHeight, clickBlocker],
 };
 
 export const Height: Story = {

packages/documentation/src/stories/raw-components/breadcrumbs/breadcrumbs.stories.ts

@@ -4,14 +4,15 @@ import { spread } from '@open-wc/lit-helpers';
 import { getAttributes } from '@/utils';
 import customItems from './custom-items';
 import { MetaComponent } from '@root/types';
+import { clickBlocker } from '@/shared/click-blocker';
 
 const meta: MetaComponent<HTMLSwisspostInternetBreadcrumbsElement> = {
   id: '4347e5bf-8bf2-4f44-9075-9faaa53591ed',
   title: 'Raw Components/Internet Header/Breadcrumbs',
   component: 'swisspost-internet-breadcrumbs',
   tags: ['package:InternetHeader'],
   render: renderInternetBreadcrumbs,
-  decorators: [hiddenHeader],
+  decorators: [hiddenHeader, clickBlocker],
   parameters: {
     badges: [],
     design: {

packages/documentation/src/stories/raw-components/footer/footer.stories.ts

@@ -3,14 +3,15 @@ import { html } from 'lit';
 import customFooterConfig from './custom-footer-config';
 import { spread } from '@open-wc/lit-helpers';
 import { MetaComponent } from '@root/types';
+import { clickBlocker } from '@/shared/click-blocker';
 
 const meta: MetaComponent = {
   id: '27fc009d-3eec-43a9-b3a2-55531e721817',
   title: 'Raw Components/Internet Header/Footer',
   component: 'swisspost-internet-footer',
   tags: ['package:InternetHeader'],
   render: renderInternetFooter,
-  decorators: [hiddenHeader],
+  decorators: [hiddenHeader, clickBlocker],
   parameters: {
     layout: 'fullscreen',
     badges: [],

packages/documentation/src/stories/raw-components/internet-header/header.stories.ts

@@ -5,6 +5,7 @@ import customConfig from './config/custom-config';
 import osFlyoutOverrides from './config/os-flyout-overrides';
 import languageSwitchOverrides from './config/language-switch-overrides';
 import { MetaComponent } from '@root/types';
+import { clickBlocker } from '@/shared/click-blocker';
 
 const meta: MetaComponent = {
   id: 'ebb11274-091b-4cb7-9a3f-3e0451c9a865',
@@ -158,15 +159,15 @@ const meta: MetaComponent = {
     },
   },
   decorators: [
-    story =>
-      html`
-        <div
-          class="header-story-wrapper"
-          style="--header-z-index: 1;overflow: auto;max-height: 100svh;"
-        >
-          ${story()} ${fakeContent()}
-        </div>
-      `,
+    story => html`
+      <div
+        class="header-story-wrapper"
+        style="--header-z-index: 1;overflow: auto;max-height: 100svh;"
+      >
+        ${story()} ${fakeContent()}
+      </div>
+    `,
+    clickBlocker,
   ],
 };
 

packages/documentation/src/stories/raw-components/megadropdown/megadropdown.stories.ts

@@ -2,6 +2,7 @@ import type { StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { MetaComponent } from '@root/types';
 import { StoryContext, StoryFn } from '@storybook/web-components';
+import { clickBlocker } from '@/shared/click-blocker';
 
 const meta: MetaComponent<HTMLPostMegadropdownElement> = {
   id: '212efc4e-875b-4497-912d-d28c6baf32f5',
@@ -81,7 +82,13 @@ export function megadropdownDecorator(story: StoryFn, context: StoryContext) {
         </button>
         <post-list title-hidden="">
           <h2>Main Navigation</h2>
+<<<<<<< Updated upstream
           <post-list-item> ${story(context.args, context)} </post-list-item>
+=======
+          <post-list-item>
+            ${story(context.args, context)}
+          </post-list-item>
+>>>>>>> Stashed changes
         </post-list>
       </post-mainnavigation>
     </post-header>
@@ -124,7 +131,7 @@ function render() {
 type Story = StoryObj<HTMLPostLanguageOptionElement>;
 
 export const Default: Story = {
-  decorators: [megadropdownDecorator],
+  decorators: [megadropdownDecorator, clickBlocker],
 };
 
 // No decorators on the test page

packages/documentation/src/stories/raw-components/menu-button/menu-button.stories.ts

@@ -1,12 +1,14 @@
 import { Args, StoryObj } from '@storybook/web-components';
 import { html, nothing } from 'lit';
 import { MetaComponent } from '@root/types';
+import { clickBlocker } from '@/shared/click-blocker';
 
 const meta: MetaComponent = {
   id: '8ca2bd70-56e6-4da9-b1fd-4e55388dca88',
   title: 'Raw Components/Menu Button',
   tags: ['package:WebComponents'],
   component: 'post-menu',
+  decorators: [clickBlocker],
   parameters: {
     design: {},
   },