chore(documentation-v7): migrate the internet header component stories (

#1822) Co-authored-by: Philipp Gfeller <[email protected]> Co-authored-by: Loïc Fürhoff <[email protected]>
swisspost · Aug 17, 2023 · 4422186 · 4422186
1 parent e2f3357
commit 4422186
Show file tree

Hide file tree

Showing 10 changed files with 665 additions and 25 deletions.
diff --git a/packages/documentation-v7/.storybook/helpers/register-web-components.ts b/packages/documentation-v7/.storybook/helpers/register-web-components.ts
@@ -1,14 +1,22 @@
-import { defineCustomElements, JSX as LocalJSX } from '@swisspost/design-system-components/loader';
-import { HTMLAttributes } from 'react';
+import { defineCustomElements as defineInternetHeader } from '@swisspost/internet-header/loader';
+import { defineCustomElements as definePostComponent } from '@swisspost/design-system-components/loader';
+import { setStencilDocJson } from '@pxtrn/storybook-addon-docs-stencil';
+import { StencilJsonDocs, StencilJsonDocsComponent } from '@pxtrn/storybook-addon-docs-stencil/dist/types';
+import postComponentsDocJson from '@swisspost/design-system-components/dist/docs.json';
+import internetHeaderDocJson from '@swisspost/internet-header/dist/docs.json';
 
-type StencilToReact<T> = {
-  [P in keyof T]?: T[P] & Omit<HTMLAttributes<Element>, 'className'> & { class?: string };
-};
+defineInternetHeader(window);
+definePostComponent(window);
 
-declare global {
-  export namespace JSX {
-    interface IntrinsicElements extends StencilToReact<LocalJSX.IntrinsicElements> {}
-  }
-}
+if (postComponentsDocJson && internetHeaderDocJson) {
+  const jsonDocs: StencilJsonDocs = {
+    timestamp: postComponentsDocJson.timestamp,
+    compiler: postComponentsDocJson.compiler,
+    components: [
+      ...postComponentsDocJson.components,
+      ...internetHeaderDocJson.components
+    ] as StencilJsonDocsComponent[],
+  };
 
-defineCustomElements(window);
+  setStencilDocJson(jsonDocs);
+}
diff --git a/packages/documentation-v7/.storybook/preview.ts b/packages/documentation-v7/.storybook/preview.ts
@@ -1,11 +1,6 @@
 import type { Preview } from '@storybook/web-components';
 
-import {
-  extractArgTypes,
-  extractComponentDescription,
-  setStencilDocJson,
-} from '@pxtrn/storybook-addon-docs-stencil';
-import { StencilJsonDocs } from '@pxtrn/storybook-addon-docs-stencil/dist/types';
+import { extractArgTypes, extractComponentDescription } from '@pxtrn/storybook-addon-docs-stencil';
 import { format } from 'prettier';
 import DocsLayout from './blocks/layout';
 import { badgesConfig, prettierOptions, resetComponents } from './helpers';
@@ -18,10 +13,6 @@ import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss';
 
 SyntaxHighlighter.registerLanguage('scss', scss);
 
-import docJson from '@swisspost/design-system-components/dist/docs.json';
-
-if (docJson) setStencilDocJson(docJson as StencilJsonDocs);
-
 const preview: Preview = {
   parameters: {
     options: {
@@ -34,7 +25,7 @@ const preview: Preview = {
           ['Typography', 'Color', 'Layout', 'Elevation', 'Accessibility'],
           'Components',
           'Internet Header',
-          ['Getting started', 'Migration Guide', 'Components', ['Header', 'Breadcrumbs', 'Footer']],
+          ['Getting started', 'Migration Guide', 'Header Component', 'Breadcrumbs Component', 'Footer Component'],
           'Intranet Header',
           ['Getting started'],
           'Icons',
@@ -55,7 +46,6 @@ const preview: Preview = {
       },
       components: resetComponents,
       extractArgTypes,
-      extractComponentDescription,
     },
     actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {

diff --git a/...ocumentation-v7/src/stories/internet-header/components/internet-header.docs.mdx b/...ocumentation-v7/src/stories/internet-header/components/internet-header.docs.mdx
@@ -0,0 +1,54 @@
+import { Canvas, ArgTypes, Meta } from '@storybook/blocks';
+import * as InternetHeaderStories from './internet-header.stories';
+
+<Meta of={InternetHeaderStories} />
+
+# Header
+
+<div className="lead">
+  Customizable navigation header tailored for Swiss Post customer-facing applications,
+  ensuring complete accessibility and responsiveness.
+</div>
+
+The `<swisspost-internet-header>` element needs
+to be nested directly inside the `<body>` for the sticky scrolling to work.
+
+If you want to render the header element with Angular,
+have a look at [portals](https://medium.com/angular-in-depth/how-do-cdk-portals-work-7c097c14a494).
+
+<a
+  className="btn btn-primary btn-animated"
+  href="/iframe.html?viewMode=story&id=internet-header-header-component--default"
+  target="_blank"
+>
+  <span>Open Header in New Tab</span>
+</a>
+
+<Canvas of={InternetHeaderStories.Default} />
+
+<div className="hide-col-default">
+  <ArgTypes of={InternetHeaderStories.Default} />
+</div>
+
+## Examples
+
+### Custom Navigation Item
+
+<Canvas of={InternetHeaderStories.CustomNavigation} />
+
+### Custom Online Service Flyout
+
+<Canvas of={InternetHeaderStories.CustomOnlineServiceFlyout} />
+
+### Full Width
+
+By default, on viewports with a width greater than 1440px, header content is padded right and left.
+To make the header span the full width of the viewport, set the `full-width` property to `true`.
+
+<a
+  className="btn btn-secondary btn-animated"
+  href="/iframe.html?viewMode=story&id=internet-header-header-component--full-width"
+  target="_blank"
+>
+  <span>See Fullwidth Header</span>
+</a>
diff --git a/packages/documentation-v7/src/stories/internet-header/components/internet-header.stories.tsx b/packages/documentation-v7/src/stories/internet-header/components/internet-header.stories.tsx
@@ -0,0 +1,241 @@
+import { Args, Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import { spread } from '@open-wc/lit-helpers';
+import { BADGE } from '../../../../.storybook/constants';
+import './internet-header.styles.scss';
+
+const meta: Meta<HTMLSwisspostInternetHeaderElement> = {
+  title: 'Internet Header/Header Component',
+  component: 'swisspost-internet-header',
+  render: renderInternetHeader,
+  parameters: {
+    layout: 'fullscreen',
+    actions: {
+      handles: ['headerLoaded', 'languageChanged'],
+    },
+    badges: [BADGE.STABLE],
+    controls: {
+      exclude: ['config-proxy']
+    },
+  },
+  args: {
+    'project': 'test'
+  },
+  argTypes: {
+    activeRoute: {
+      name: 'active-route',
+      control: 'text',
+    },
+    customConfig: {
+      name: 'custom-config',
+      control: 'object',
+    },
+    language: {
+      control: 'select',
+      options: ['de', 'fr', 'it', 'en'],
+    },
+    languageCookieKey: {
+      name: 'language-cookie-key',
+      control: 'text',
+    },
+    languageLocalStorageKey: {
+      name: 'language-local-storage-key',
+      control: 'text',
+    },
+    languageSwitchOverrides: {
+      name: 'language-switch-overrides',
+      control: 'object',
+    },
+    osFlyoutOverrides: {
+      name: 'os-flyout-overrides',
+      control: 'object',
+    },
+    stickyness: {
+      control: 'select',
+    },
+  },
+};
+
+export default meta;
+
+// DECORATORS
+function mockPage(story: any) {
+  return html`
+    <div class="page-wrapper">
+      ${story()}
+      <main class="container mt-huge-r">
+        <swisspost-internet-breadcrumbs/>
+        <h1 class="mt-huge-r mb-big-r bold">Swiss Post Internet Header</h1>
+        <p class="fake-content my-big"></p>
+        <p class="fake-content my-big"></p>
+      </main>
+      <swisspost-internet-footer/>
+    </div>
+  `;
+}
+
+// RENDERER
+function renderInternetHeader(args: HTMLSwisspostInternetHeaderElement) {
+  const attributes = getAttributes(args, arg => arg !== null && arg !== undefined);
+  return html`
+    <swisspost-internet-header ${spread(attributes)}></swisspost-internet-header>
+  `;
+}
+
+// STORIES
+type Story = StoryObj<HTMLSwisspostInternetHeaderElement>;
+
+export const Default: Story = {
+  decorators: [ mockPage ],
+  parameters: {
+    docs: {
+      story: {
+        inline: false,
+        height: '40em',
+      },
+    },
+  },
+};
+
+export const FullWidth: Story = {
+  decorators: [ mockPage ],
+  args: {
+    fullWidth: true,
+  },
+};
+
+export const CustomNavigation: Story = {
+  args: {
+    customConfig: {
+      de: {
+        header: {
+          navMain: [
+            {
+              title: 'Meine Links (custom config)',
+              text: 'Meine Links',
+              url: '#',
+              flyout: [
+                {
+                  title: 'Google',
+                  linkList: [
+                    { url: 'https://maps.google.com', title: 'Google Maps', target: '_blank' },
+                    { url: 'https://translate.google.com', title: 'Google Translate' },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      },
+      fr: {
+        header: {
+          navMain: [
+            {
+              title: 'Meine Links (custom config)',
+              text: 'Meine Links',
+              url: '#',
+              flyout: [
+                {
+                  title: 'Google',
+                  linkList: [
+                    { url: 'https://maps.google.com', title: 'Google Maps', target: '_blank' },
+                    { url: 'https://translate.google.com', title: 'Google Translate' },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      },
+      it: {
+        header: {
+          navMain: [
+            {
+              title: 'Meine Links (custom config)',
+              text: 'Meine Links',
+              url: '#',
+              flyout: [
+                {
+                  title: 'Google',
+                  linkList: [
+                    { url: 'https://maps.google.com', title: 'Google Maps', target: '_blank' },
+                    { url: 'https://translate.google.com', title: 'Google Translate' },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      },
+      en: {
+        header: {
+          navMain: [
+            {
+              title: 'Meine Links (custom config)',
+              text: 'Meine Links',
+              url: '#',
+              flyout: [
+                {
+                  title: 'Google',
+                  linkList: [
+                    { url: 'https://maps.google.com', title: 'Google Maps', target: '_blank' },
+                    { url: 'https://translate.google.com', title: 'Google Translate' },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      },
+    },
+  },
+};
+
+export const CustomOnlineServiceFlyout: Story = {
+  args: {
+    osFlyoutOverrides: {
+      title: 'Custom OS Flyout',
+      text: 'Custom OS Flyout',
+      url: '#',
+      flyout: [
+        {
+          title: 'A title',
+          linkList: [
+            {
+              url: '#bla',
+              title: 'Another link',
+            },
+          ],
+        },
+        {
+          title: 'Another column',
+          linkList: [
+            {
+              url: '#foo',
+              title: 'Foo',
+            },
+          ],
+        },
+      ],
+    },
+  },
+};
+
+// TODO: move to utils
+const getAttributes = (args: Args, condition?: (arg: any) => boolean): Args => {
+  const attrs: { [key: string]: any } = {};
+
+  for (const key in args) {
+    if (args.hasOwnProperty(key) && condition && condition(args[key])) {
+      const attrKey = key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+
+      // Cast boolean false to string so it's displayed in the docs code block. False values are otherwise omitted
+      attrs[attrKey] = args[key] === false ? 'false' : args[key];
+      if (typeof args[key] === 'object') {
+        attrs[attrKey] = JSON.stringify(args[key]);
+      }
+    }
+  }
+
+  return attrs;
+};