feat(components, documentation): add documentation and e2e tests for megadropdown

.changeset/selfish-donuts-rest.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': patch
+'@swisspost/design-system-components': patch
+---
+
+Added documentation and e2e tests for `post-megadropdown` web component.

packages/components/cypress/e2e/megadropdown.cy.ts

@@ -0,0 +1,76 @@
+const MEGADROPDOWN_ID = '212efc4e-875b-4497-912d-d28c6baf32f5';
+
+describe('megadropdown', () => {
+  describe('default', () => {
+    describe('desktop', () => {
+      beforeEach(() => {
+        cy.viewport(1920, 1080);
+        cy.getComponents(
+          MEGADROPDOWN_ID,
+          'tests',
+          'post-megadropdown',
+          'post-megadropdown-trigger',
+        );
+        cy.get('@megadropdown').find('.back-button').as('back-btn');
+        cy.get('@megadropdown').find('.close-button').as('close-btn');
+      });
+
+      it('should render', () => {
+        cy.get('@megadropdown').should('exist');
+        cy.get('@megadropdown-trigger').should('exist');
+        cy.get('@megadropdown').should(`be.hidden`);
+      });
+
+      it('should open on trigger click', () => {
+        cy.get('@megadropdown-trigger').should('exist');
+        cy.get('@megadropdown-trigger').click();
+        cy.get('@megadropdown').should(`be.visible`);
+      });
+
+      it('should show close button', () => {
+        cy.get('@megadropdown-trigger').click();
+        cy.get('@close-btn').should(`be.visible`);
+      });
+
+      it('should not show back button', () => {
+        cy.get('@megadropdown-trigger').click();
+        cy.get('@back-btn').should(`be.hidden`);
+      });
+
+      it('should close on close button click', () => {
+        cy.get('@megadropdown-trigger').click();
+        cy.get('@close-btn').click();
+        cy.get('@megadropdown').should(`be.hidden`);
+      });
+    });
+
+    describe('mobile', () => {
+      beforeEach(() => {
+        cy.viewport(500, 1200);
+        cy.getComponents(
+          MEGADROPDOWN_ID,
+          'tests',
+          'post-megadropdown',
+          'post-megadropdown-trigger',
+        );
+        cy.get('@megadropdown').find('.back-button').as('back-btn');
+        cy.get('@megadropdown').find('.close-button').as('close-btn');
+      });
+
+      it('should open on trigger click', () => {
+        cy.get('@megadropdown-trigger').click();
+        cy.get('@megadropdown').should(`be.visible`);
+      });
+
+      it('should show back button', () => {
+        cy.get('@megadropdown-trigger').click();
+        cy.get('@back-btn').should(`be.visible`);
+      });
+
+      it('should not show close button', () => {
+        cy.get('@megadropdown-trigger').click();
+        cy.get('@close-btn').should(`be.hidden`);
+      });
+    });
+  });
+});

packages/components/src/components/post-megadropdown/post-megadropdown.tsx

@@ -82,7 +82,7 @@ export class PostMegadropdown {
 
   private handleFocusout(event: FocusEvent) {
     const relatedTarget = event.relatedTarget as HTMLElement;
-    const megadropdown= this.popoverRef.querySelector('.megadropdown');
+    const megadropdown = this.popoverRef.querySelector('.megadropdown');
     if (!megadropdown.contains(relatedTarget)) {
       this.hide();
     }

packages/documentation/.storybook/styles/preview.scss

@@ -61,7 +61,8 @@ $monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier
 
   .sbdocs-content .container {
     // Support for autolink-headings
-    :is(h1, h2, h3, h4, h5, h6) {
+    .docs-title :is(h1, h2, h3, h4, h5, h6),
+    > :is(h1, h2, h3, h4, h5, h6) {
       position: relative;
 
       @media (hover: hover) {

packages/documentation/src/stories/raw-components/megadropdown/megadropdown.docs.mdx

@@ -0,0 +1,25 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+import * as megadropdownStories from './megadropdown.stories';
+
+<Meta of={megadropdownStories} />
+
+<div className="docs-title">
+  # Mega dropdown
+
+  <nav>
+    <link-design of={JSON.stringify(megadropdownStories)}></link-design>
+  </nav>
+</div>
+
+<p className="lead">
+  The megadropdown is used within the `post-header` main navigation to display submenus.
+</p>
+
+<Canvas sourceState="shown" of={megadropdownStories.Default} />
+
+<Controls of={megadropdownStories.Default} />
+
+## Installation
+
+The `<post-megadropdown>` element is part of the `@swisspost/design-system-components` package.
+For more information, read the [getting started with components guide](/?path=/docs/edfb619b-fda1-4570-bf25-20830303d483--docs).

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

@@ -0,0 +1,23 @@
+import type { StoryContext, StoryObj } from '@storybook/web-components';
+import meta, { megadropdownDecorator } from './megadropdown.stories';
+import { html } from 'lit';
+import { schemes } from '@/shared/snapshots/schemes';
+
+const { id, ...metaWithoutId } = meta;
+
+export default {
+  ...metaWithoutId,
+  title: 'Snapshots',
+  decorators: [megadropdownDecorator],
+};
+
+type Story = StoryObj<HTMLPostMegadropdownElement>;
+
+export const Megadropdown: Story = {
+  render: (
+    _args: HTMLPostMegadropdownElement,
+    context: StoryContext<HTMLPostMegadropdownElement>,
+  ) => {
+    return schemes(() => html` ${meta.render?.({ ...context.args }, context)} `);
+  },
+};

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

@@ -0,0 +1,70 @@
+import type { StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import { MetaComponent } from '@root/types';
+import { StoryContext, StoryFn } from '@storybook/web-components';
+
+const meta: MetaComponent<HTMLPostMegadropdownElement> = {
+  id: '212efc4e-875b-4497-912d-d28c6baf32f5',
+  title: 'Raw Components/Megadropdown',
+  tags: ['package:WebComponents'],
+  component: 'post-megadropdown',
+  render: render,
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=2908-30413&m=dev',
+    },
+  },
+  args: {},
+  argTypes: {},
+};
+
+export default meta;
+
+export function megadropdownDecorator(story: StoryFn, context: StoryContext) {
+  return html`
+    <post-mainnavigation>
+      <post-list title-hidden="">
+        <post-list-item> ${story(context.args, context)} </post-list-item>
+      </post-list>
+    </post-mainnavigation>
+  `;
+}
+
+function render() {
+  return html`
+    <post-megadropdown-trigger for="pakete">Pakete</post-megadropdown-trigger>
+    <post-megadropdown id="pakete">
+      <button slot="back-button" class="btn btn-tertiary px-0">
+        <post-icon name="arrowright"></post-icon>
+        Zurück
+      </button>
+      <post-closebutton slot="close-button">Schliessen</post-closebutton>
+      <h2 slot="megadropdown-title"><a href="">Pakete title</a></h2>
+      <post-list>
+        <h3>Pakete senden</h3>
+        <post-list-item><a href="/sch">Pakete Schweiz</a></post-list-item>
+        <post-list-item><a href="/kl">Kleinwaren Ausland</a></post-list-item>
+        <post-list-item><a href="">Waren Ausland</a></post-list-item>
+        <post-list-item><a href="">Express und Kurier</a></post-list-item>
+      </post-list>
+      <post-list>
+        <h3><a href="/schritt-für-schritt">Schritt für Schritt</a></h3>
+        <post-list-item><a href="/sch">Pakete Schweiz</a></post-list-item>
+        <post-list-item><a href="/kl">Kleinwaren Ausland</a></post-list-item>
+        <post-list-item><a href="">Waren Ausland</a></post-list-item>
+        <post-list-item><a href="">Express und Kurier</a></post-list-item>
+      </post-list>
+    </post-megadropdown>
+  `;
+}
+
+// STORIES
+type Story = StoryObj<HTMLPostLanguageOptionElement>;
+
+export const Default: Story = {
+  decorators: [megadropdownDecorator],
+};
+
+// No decorators on the test page
+export const Tests: Story = {};