diff --git a/.changeset/selfish-donuts-rest.md b/.changeset/selfish-donuts-rest.md new file mode 100644 index 0000000000..16608722c1 --- /dev/null +++ b/.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. diff --git a/packages/components/cypress/e2e/megadropdown.cy.ts b/packages/components/cypress/e2e/megadropdown.cy.ts new file mode 100644 index 0000000000..bae52d55fb --- /dev/null +++ b/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`); + }); + }); + }); +}); diff --git a/packages/components/src/components/post-megadropdown/post-megadropdown.tsx b/packages/components/src/components/post-megadropdown/post-megadropdown.tsx index 0ccbc975d6..b6ebdcc94e 100644 --- a/packages/components/src/components/post-megadropdown/post-megadropdown.tsx +++ b/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(); } diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss index 8e4983d47c..a21d734600 100644 --- a/packages/documentation/.storybook/styles/preview.scss +++ b/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) { diff --git a/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.docs.mdx b/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.docs.mdx new file mode 100644 index 0000000000..1507cf127d --- /dev/null +++ b/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'; + + + +
+ # Mega dropdown + + +
+ +

+ The megadropdown is used within the `post-header` main navigation to display submenus. +

+ + + + + +## Installation + +The `` 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). diff --git a/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.snapshot.stories.ts b/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.snapshot.stories.ts new file mode 100644 index 0000000000..0a181fba8a --- /dev/null +++ b/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; + +export const Megadropdown: Story = { + render: ( + _args: HTMLPostMegadropdownElement, + context: StoryContext, + ) => { + return schemes(() => html` ${meta.render?.({ ...context.args }, context)} `); + }, +}; diff --git a/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.stories.ts b/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.stories.ts new file mode 100644 index 0000000000..b29381a353 --- /dev/null +++ b/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 = { + 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` + + + ${story(context.args, context)} + + + `; +} + +function render() { + return html` + Pakete + + + Schliessen +

Pakete title

+ +

Pakete senden

+ Pakete Schweiz + Kleinwaren Ausland + Waren Ausland + Express und Kurier + + +

Schritt für Schritt

+ Pakete Schweiz + Kleinwaren Ausland + Waren Ausland + Express und Kurier + + + `; +} + +// STORIES +type Story = StoryObj; + +export const Default: Story = { + decorators: [megadropdownDecorator], +}; + +// No decorators on the test page +export const Tests: Story = {};