From b0afe98489653d5f82c1e7d4eff4879a621f40bf Mon Sep 17 00:00:00 2001
From: leagrdv <lea.gardavaud@post.ch>
Date: Wed, 14 May 2025 16:54:33 +0200
Subject: [PATCH 1/2] chore(docs): add click blocker on stories

---
 .changeset/seven-cars-melt.md                 |  5 +++++
 .../documentation/src/shared/click-blocker.ts |  9 +++++++++
 .../app-store-badge.stories.ts                |  2 ++
 .../components/avatar/avatar.stories.ts       |  2 ++
 .../breadcrumb/breadcrumbs.stories.ts         |  2 ++
 .../button-group/button-group.stories.ts      | 15 ++-------------
 .../components/button/button.stories.ts       |  2 ++
 .../card-product/card-product.stories.ts      |  8 +-------
 .../stories/components/card/card.stories.ts   |  8 +-------
 .../components/footer/footer.stories.ts       |  2 ++
 .../components/header/header.stories.ts       |  3 ++-
 .../components/linkarea/linkarea.stories.ts   |  2 ++
 .../list-group/list-group.stories.ts          |  3 ++-
 .../components/skiplinks/skiplinks.stories.ts |  2 ++
 .../subnavigation/subnavigation.stories.ts    | 10 ++--------
 .../components/teaser/teaser.stories.ts       |  2 ++
 .../stories/foundations/logo/logo.stories.ts  |  3 ++-
 .../breadcrumbs/breadcrumbs.stories.ts        |  3 ++-
 .../raw-components/footer/footer.stories.ts   |  3 ++-
 .../internet-header/header.stories.ts         | 19 ++++++++++---------
 .../megadropdown/megadropdown.stories.ts      |  9 ++++++++-
 .../menu-button/menu-button.stories.ts        |  2 ++
 .../error-page/error-page.stories.ts          | 12 ++++--------
 .../stories/utilities/text/text.stories.ts    |  3 ++-
 24 files changed, 72 insertions(+), 59 deletions(-)
 create mode 100644 .changeset/seven-cars-melt.md
 create mode 100644 packages/documentation/src/shared/click-blocker.ts

diff --git a/.changeset/seven-cars-melt.md b/.changeset/seven-cars-melt.md
new file mode 100644
index 0000000000..979827945f
--- /dev/null
+++ b/.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.
diff --git a/packages/documentation/src/shared/click-blocker.ts b/packages/documentation/src/shared/click-blocker.ts
new file mode 100644
index 0000000000..c836c49cc5
--- /dev/null
+++ b/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>
+  `;
+}
diff --git a/packages/documentation/src/stories/components/app-store-badge/app-store-badge.stories.ts b/packages/documentation/src/stories/components/app-store-badge/app-store-badge.stories.ts
index ffec33c92c..b203017db9 100644
--- a/packages/documentation/src/stories/components/app-store-badge/app-store-badge.stories.ts
+++ b/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: {
diff --git a/packages/documentation/src/stories/components/avatar/avatar.stories.ts b/packages/documentation/src/stories/components/avatar/avatar.stories.ts
index d7854c2561..0fb3c78d84 100644
--- a/packages/documentation/src/stories/components/avatar/avatar.stories.ts
+++ b/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>`;
   },
diff --git a/packages/documentation/src/stories/components/breadcrumb/breadcrumbs.stories.ts b/packages/documentation/src/stories/components/breadcrumb/breadcrumbs.stories.ts
index a60cb42f8d..ee4a767c41 100644
--- a/packages/documentation/src/stories/components/breadcrumb/breadcrumbs.stories.ts
+++ b/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: {
diff --git a/packages/documentation/src/stories/components/button-group/button-group.stories.ts b/packages/documentation/src/stories/components/button-group/button-group.stories.ts
index 93b0bbbd8c..29d8be5328 100644
--- a/packages/documentation/src/stories/components/button-group/button-group.stories.ts
+++ b/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;
diff --git a/packages/documentation/src/stories/components/button/button.stories.ts b/packages/documentation/src/stories/components/button/button.stories.ts
index be006877d7..56fd65da2d 100644
--- a/packages/documentation/src/stories/components/button/button.stories.ts
+++ b/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: {
diff --git a/packages/documentation/src/stories/components/card-product/card-product.stories.ts b/packages/documentation/src/stories/components/card-product/card-product.stories.ts
index 350cd3e64e..49c10b15cb 100644
--- a/packages/documentation/src/stories/components/card-product/card-product.stories.ts
+++ b/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> `;
 }
diff --git a/packages/documentation/src/stories/components/card/card.stories.ts b/packages/documentation/src/stories/components/card/card.stories.ts
index 2cab6edbfd..146d009e9d 100644
--- a/packages/documentation/src/stories/components/card/card.stories.ts
+++ b/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">
diff --git a/packages/documentation/src/stories/components/footer/footer.stories.ts b/packages/documentation/src/stories/components/footer/footer.stories.ts
index 320cb2f2ec..195525498f 100644
--- a/packages/documentation/src/stories/components/footer/footer.stories.ts
+++ b/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: [],
diff --git a/packages/documentation/src/stories/components/header/header.stories.ts b/packages/documentation/src/stories/components/header/header.stories.ts
index cd4f75723a..bff3cce0b0 100644
--- a/packages/documentation/src/stories/components/header/header.stories.ts
+++ b/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
   ],
 };
 
diff --git a/packages/documentation/src/stories/components/linkarea/linkarea.stories.ts b/packages/documentation/src/stories/components/linkarea/linkarea.stories.ts
index a7552188c7..972d5843a9 100644
--- a/packages/documentation/src/stories/components/linkarea/linkarea.stories.ts
+++ b/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: {},
   },
diff --git a/packages/documentation/src/stories/components/list-group/list-group.stories.ts b/packages/documentation/src/stories/components/list-group/list-group.stories.ts
index 3e8bf5ab93..3cd10ccf7d 100644
--- a/packages/documentation/src/stories/components/list-group/list-group.stories.ts
+++ b/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',
diff --git a/packages/documentation/src/stories/components/skiplinks/skiplinks.stories.ts b/packages/documentation/src/stories/components/skiplinks/skiplinks.stories.ts
index aa14b2b864..11843d08f6 100644
--- a/packages/documentation/src/stories/components/skiplinks/skiplinks.stories.ts
+++ b/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,
 };
 
diff --git a/packages/documentation/src/stories/components/subnavigation/subnavigation.stories.ts b/packages/documentation/src/stories/components/subnavigation/subnavigation.stories.ts
index 8229f2ae73..d7d06f0d50 100644
--- a/packages/documentation/src/stories/components/subnavigation/subnavigation.stories.ts
+++ b/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}">
diff --git a/packages/documentation/src/stories/components/teaser/teaser.stories.ts b/packages/documentation/src/stories/components/teaser/teaser.stories.ts
index 97748f59ef..06b86d16bb 100644
--- a/packages/documentation/src/stories/components/teaser/teaser.stories.ts
+++ b/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: {
diff --git a/packages/documentation/src/stories/foundations/logo/logo.stories.ts b/packages/documentation/src/stories/foundations/logo/logo.stories.ts
index d22154f419..95de5fcd55 100644
--- a/packages/documentation/src/stories/foundations/logo/logo.stories.ts
+++ b/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 = {
diff --git a/packages/documentation/src/stories/raw-components/breadcrumbs/breadcrumbs.stories.ts b/packages/documentation/src/stories/raw-components/breadcrumbs/breadcrumbs.stories.ts
index 96fcb2f2de..97d4029a8f 100644
--- a/packages/documentation/src/stories/raw-components/breadcrumbs/breadcrumbs.stories.ts
+++ b/packages/documentation/src/stories/raw-components/breadcrumbs/breadcrumbs.stories.ts
@@ -4,6 +4,7 @@ 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',
@@ -11,7 +12,7 @@ const meta: MetaComponent<HTMLSwisspostInternetBreadcrumbsElement> = {
   component: 'swisspost-internet-breadcrumbs',
   tags: ['package:InternetHeader'],
   render: renderInternetBreadcrumbs,
-  decorators: [hiddenHeader],
+  decorators: [hiddenHeader, clickBlocker],
   parameters: {
     badges: [],
     design: {
diff --git a/packages/documentation/src/stories/raw-components/footer/footer.stories.ts b/packages/documentation/src/stories/raw-components/footer/footer.stories.ts
index 85fd8c1677..0e48e80bbf 100644
--- a/packages/documentation/src/stories/raw-components/footer/footer.stories.ts
+++ b/packages/documentation/src/stories/raw-components/footer/footer.stories.ts
@@ -3,6 +3,7 @@ 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',
@@ -10,7 +11,7 @@ const meta: MetaComponent = {
   component: 'swisspost-internet-footer',
   tags: ['package:InternetHeader'],
   render: renderInternetFooter,
-  decorators: [hiddenHeader],
+  decorators: [hiddenHeader, clickBlocker],
   parameters: {
     layout: 'fullscreen',
     badges: [],
diff --git a/packages/documentation/src/stories/raw-components/internet-header/header.stories.ts b/packages/documentation/src/stories/raw-components/internet-header/header.stories.ts
index 6d0160d865..1b005f84b0 100644
--- a/packages/documentation/src/stories/raw-components/internet-header/header.stories.ts
+++ b/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,
   ],
 };
 
diff --git a/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.stories.ts b/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.stories.ts
index bfbfbbb9e5..ee2500f19b 100644
--- a/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.stories.ts
+++ b/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
diff --git a/packages/documentation/src/stories/raw-components/menu-button/menu-button.stories.ts b/packages/documentation/src/stories/raw-components/menu-button/menu-button.stories.ts
index b8c66d6fd0..e300af32e3 100644
--- a/packages/documentation/src/stories/raw-components/menu-button/menu-button.stories.ts
+++ b/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: {},
   },
diff --git a/packages/documentation/src/stories/templates/error-page/error-page.stories.ts b/packages/documentation/src/stories/templates/error-page/error-page.stories.ts
index f3439b36a1..f149935e5e 100644
--- a/packages/documentation/src/stories/templates/error-page/error-page.stories.ts
+++ b/packages/documentation/src/stories/templates/error-page/error-page.stories.ts
@@ -1,9 +1,11 @@
+import { clickBlocker } from '@/shared/click-blocker';
 import { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 
 const meta: Meta = {
   id: 'a536a61d-cac2-4f39-adbf-092bdd445ce5',
   title: 'Templates/Error page',
+  decorators: [clickBlocker],
   parameters: {
     layout: 'fullscreen',
   },
@@ -28,14 +30,8 @@ function render() {
               page.
             </p>
             <div class="d-flex gap-16 mt-24">
-              <a class="btn btn-primary" href="/" @click="${(e: Event) => e.preventDefault()}"
-                >Home page</a
-              >
-              <a
-                class="btn btn-secondary"
-                href="https://www.post.ch/de/pages/suche#t=AllTab"
-                @click="${(e: Event) => e.preventDefault()}"
-              >
+              <a class="btn btn-primary" href="/">Home page</a>
+              <a class="btn btn-secondary" href="https://www.post.ch/de/pages/suche#t=AllTab">
                 Search
               </a>
             </div>
diff --git a/packages/documentation/src/stories/utilities/text/text.stories.ts b/packages/documentation/src/stories/utilities/text/text.stories.ts
index e6f2353f88..0f5f3c4fa9 100644
--- a/packages/documentation/src/stories/utilities/text/text.stories.ts
+++ b/packages/documentation/src/stories/utilities/text/text.stories.ts
@@ -1,6 +1,7 @@
 import type { StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { MetaExtended } from '@root/types';
+import { clickBlocker } from '@/shared/click-blocker';
 
 const meta: MetaExtended = {
   id: 'c55681df-4d21-469d-a5b3-c67686e7c104',
@@ -52,7 +53,7 @@ export const LineHeight: Story = {
 };
 
 export const TextColorReset: Story = {
-  decorators: [story => html` <div @click=${(e: Event) => e.preventDefault()}>${story()}</div> `],
+  decorators: [clickBlocker],
   render: () => html`
     <p class="my-colored-text">
       This is a colored text with a

From ffad0b9fc89fd2aa1abb9a6d3de9583251b1cdc0 Mon Sep 17 00:00:00 2001
From: leagrdv <lea.gardavaud@post.ch>
Date: Fri, 16 May 2025 16:13:51 +0200
Subject: [PATCH 2/2] fix merge miss

---
 .../raw-components/megadropdown/megadropdown.stories.ts     | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.stories.ts b/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.stories.ts
index ee2500f19b..135062ddef 100644
--- a/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.stories.ts
+++ b/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.stories.ts
@@ -82,13 +82,7 @@ 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>