chore(documentation): complete internet header docs (#1855)

Co-authored-by: Philipp Gfeller <[email protected]> Co-authored-by: Philipp Gfeller <[email protected]> Co-authored-by: Oliver Schürch <[email protected]> Co-authored-by: Loïc Fürhoff <[email protected]>
swisspost · Sep 21, 2023 · 77f4383 · 77f4383
1 parent 80c3643
commit 77f4383
Show file tree

Hide file tree

Showing 56 changed files with 876 additions and 798 deletions.
diff --git a/.changeset/olive-zebras-dress.md b/.changeset/olive-zebras-dress.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/internet-header': minor
+---
+
+Enabled nesting the header in a different scroll container than the `<body>` element. The header stickyness and logo animation logic will automatically attach to the nearest scrolling container instead of the document when nested in a container that has `overflow: auto | scroll` set.
diff --git a/.changeset/quick-feet-wink.md b/.changeset/quick-feet-wink.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/internet-header': patch
+---
+
+Fixed an issue with custom configuration that was not applied when the prop "language" was not set on the internet header.
diff --git a/packages/documentation/.storybook/blocks/layout.tsx b/packages/documentation/.storybook/blocks/layout.tsx
@@ -1,5 +1,5 @@
 import { DocsContainer, DocsContainerProps, Unstyled } from '@storybook/blocks';
-import React, { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 import '../styles/layout.scss';
 import Footer from './footer';
 import Header from './header';
@@ -12,13 +12,18 @@ function shouldShowFooter() {
   return window.location !== window.parent.location;
 }
 
-export default ({ children, context }: PropsWithChildren<DocsContainerProps>) => {
+export default (props: PropsWithChildren<DocsContainerProps>) => {
+  const { children, context } = props;
+  const container =
+    context.channel.data.docsPrepared[0].parameters.layout === 'fullscreen'
+      ? 'container-fluid'
+      : 'container';
   return (
     <DocsContainer context={context}>
       <Unstyled>
-        {shouldShowHeader() && <Header/>}
-        <div className="container">{children}</div>
-        {shouldShowFooter() && <Footer/>}
+        {shouldShowHeader() && <Header />}
+        <div className={container}>{children}</div>
+        {shouldShowFooter() && <Footer />}
       </Unstyled>
     </DocsContainer>
   );

diff --git a/packages/documentation/.storybook/main.ts b/packages/documentation/.storybook/main.ts
@@ -18,7 +18,6 @@ const config: StorybookConfig = {
         backgrounds: false,
         highlight: false,
         outline: false,
-        toolbars: false,
       },
     },
     '@storybook/addon-links',

diff --git a/packages/documentation/.storybook/preview.ts b/packages/documentation/.storybook/preview.ts
@@ -27,13 +27,7 @@ const preview: Preview = {
           ['Typography', 'Color', 'Layout', 'Elevation', 'Accessibility'],
           'Components',
           'Internet Header',
-          [
-            'Getting Started',
-            'Migration Guide',
-            'Header Component',
-            'Breadcrumbs Component',
-            'Footer Component',
-          ],
+          ['Getting Started', 'Migration Guide', 'Header', 'Breadcrumbs', 'Footer'],
           'Intranet Header',
           ['Getting Started'],
           'Icons',

diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss
@@ -157,3 +157,25 @@
     }
   }
 }
+
+.fake-content {
+  position: relative;
+  min-height: calc(1.6rem * 8);
+  background: repeating-linear-gradient(
+    rgb(230, 230, 230),
+    rgb(230, 230, 230) 1rem,
+    transparent 1rem,
+    transparent 1.6rem
+  );
+
+  &::after {
+    content: '';
+    background: white;
+    width: 33%;
+    height: 1.7rem;
+    display: block;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+  }
+}
diff --git a/...ntation/src/stories/internet-header/components/breadcrumbs/breadcrumbs.docs.mdx b/...ntation/src/stories/internet-header/components/breadcrumbs/breadcrumbs.docs.mdx
@@ -0,0 +1,14 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+import * as BreadcrumbsStories from './breadcrumbs.stories';
+
+<Meta of={BreadcrumbsStories} />
+
+# Breadcrumbs
+
+<div className="lead">Indicate the current page’s location within the navigational hierarchy.</div>
+
+The breadcrumbs element usually needs to be placed in a container so it only spans the width of the content.
+
+<Canvas of={BreadcrumbsStories.Default} />
+
+<Controls of={BreadcrumbsStories.Default} />
diff --git a/...s/documentation/src/stories/internet-header/components/breadcrumbs/breadcrumbs.stories.ts b/...s/documentation/src/stories/internet-header/components/breadcrumbs/breadcrumbs.stories.ts
@@ -0,0 +1,59 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import { spread } from '@open-wc/lit-helpers';
+import { BADGE } from '../../../../../.storybook/constants';
+import { getAttributes } from '../../../../utils';
+import customItems from './overrides/custom-items';
+
+const meta: Meta<HTMLSwisspostInternetBreadcrumbsElement> = {
+  title: 'Internet Header/Breadcrumbs',
+  component: 'swisspost-internet-breadcrumbs',
+  render: renderInternetBreadcrumbs,
+  decorators: [hiddenHeader],
+  parameters: {
+    badges: [BADGE.STABLE],
+  },
+  argTypes: {
+    customItems: {
+      name: 'custom-items',
+      control: 'object',
+      description:
+        "Add custom breadcrumb items to the end of the pre-configured list. Handy if your online service has it's own navigation structure.",
+      table: {
+        type: {
+          summary: 'IBreadcrumbItem',
+          detail: JSON.stringify(customItems),
+        },
+      },
+    },
+  },
+};
+
+export default meta;
+
+// DECORATORS
+function hiddenHeader(story: any) {
+  return html`
+    <swisspost-internet-header project="test" hidden></swisspost-internet-header>
+    ${story()}
+  `;
+}
+
+// RENDERER
+function renderInternetBreadcrumbs(args: Partial<HTMLSwisspostInternetBreadcrumbsElement>) {
+  const attributes = getAttributes(args, arg => arg !== null && arg !== undefined);
+  return html`
+    <swisspost-internet-breadcrumbs ${spread(attributes)}></swisspost-internet-breadcrumbs>
+  `;
+}
+
+// STORIES
+type Story = StoryObj<HTMLSwisspostInternetBreadcrumbsElement>;
+
+export const Default: Story = {};
+
+export const CustomItems: Story = {
+  args: {
+    customItems: customItems,
+  },
+};
diff --git a/...es/internet-header/components/breadcrumbs/overrides/breadcrumbs-config.docs.mdx b/...es/internet-header/components/breadcrumbs/overrides/breadcrumbs-config.docs.mdx
@@ -0,0 +1,12 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+import * as BreadcrumbStories from './breadcrumbs-config.stories';
+
+<Meta of={BreadcrumbStories} />
+
+# Breadcrumbs with custom items
+
+<div className="lead">When you need to add your own breadcrumb items.</div>
+
+<Canvas of={BreadcrumbStories.Default} />
+
+<Controls of={BreadcrumbStories.Default} />
diff --git a/...rc/stories/internet-header/components/breadcrumbs/overrides/breadcrumbs-config.stories.ts b/...rc/stories/internet-header/components/breadcrumbs/overrides/breadcrumbs-config.stories.ts
@@ -0,0 +1,5 @@
+import * as BreadcrumbsStories from '../breadcrumbs.stories';
+
+export default { ...BreadcrumbsStories.default, title: 'Internet Header/Breadcrumbs/Custom Items' };
+
+export const Default = BreadcrumbsStories.CustomItems;
diff --git a/...ocumentation/src/stories/internet-header/components/breadcrumbs/overrides/custom-items.ts b/...ocumentation/src/stories/internet-header/components/breadcrumbs/overrides/custom-items.ts
@@ -0,0 +1,5 @@
+export default [
+  { text: 'X', url: '/x' },
+  { text: 'XY', url: '/x/xy' },
+  { text: 'XYZ', url: '/x/xy/xyz' },
+];
diff --git a/...ation/src/stories/internet-header/components/footer/custom-config/custom-footer-config.ts b/...ation/src/stories/internet-header/components/footer/custom-config/custom-footer-config.ts
@@ -0,0 +1,23 @@
+const footerBlock = (lang: string) => ({
+  footer: {
+    block: {
+      title: `Eigene Footer-Konfiguration (${lang})`,
+      links: [
+        { url: 'https://fireship.io', text: 'Fireship.io', target: '_blank' },
+        { url: 'https://css-tricks.com', text: 'CSS-Tricks', target: '_blank' },
+        { url: 'https://web.dev', text: 'web.dev', target: '_blank' },
+        { url: 'https://developer.mozilla.org', text: 'MDN Web Docs', target: '_blank' },
+        { url: 'https://getbootstrap.com', text: 'Bootstrap', target: '_blank' },
+        { url: 'https://google.com', text: 'Google', target: '_blank' },
+        { url: 'https://microsoft.com', text: 'Microsoft', target: '_blank' },
+      ],
+    },
+  },
+});
+
+export default {
+  de: footerBlock('de'),
+  fr: footerBlock('fr'),
+  it: footerBlock('it'),
+  en: footerBlock('en'),
+};
diff --git a/.../stories/internet-header/components/footer/custom-config/footer-config.docs.mdx b/.../stories/internet-header/components/footer/custom-config/footer-config.docs.mdx
@@ -0,0 +1,15 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+import * as FooterConfig from './footer-config.stories';
+
+<Meta of={FooterConfig} />
+
+<div className="container">
+  <h1>Footer with custom config</h1>
+  <div className="lead">When you need to add your own footer links.</div>
+</div>
+
+<Canvas of={FooterConfig.Default} />
+
+<div className="container">
+  <Controls of={FooterConfig.Default} />
+</div>
diff --git a/...tion/src/stories/internet-header/components/footer/custom-config/footer-config.stories.ts b/...tion/src/stories/internet-header/components/footer/custom-config/footer-config.stories.ts
@@ -0,0 +1,5 @@
+import * as FooterStories from '../footer.stories';
+
+export default { ...FooterStories.default, title: 'Internet Header/Footer/Custom Config' };
+
+export const Default = FooterStories.CustomConfig;
diff --git a/...ges/documentation/src/stories/internet-header/components/footer/footer.docs.mdx b/...ges/documentation/src/stories/internet-header/components/footer/footer.docs.mdx
@@ -0,0 +1,18 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+import * as FooterStories from './footer.stories';
+
+<Meta of={FooterStories} />
+
+<div className="container">
+  <h1>Footer</h1>
+  <div className="lead">
+    Provides key app-wide information such as contact details and legal links.
+  </div>
+  <p>The footer comes with its own container and can be placed at the end of your content.</p>
+</div>
+
+<Canvas of={FooterStories.Default} />
+
+<div className="container">
+  <Controls of={FooterStories.Default} />
+</div>
diff --git a/packages/documentation/src/stories/internet-header/components/footer/footer.stories.ts b/packages/documentation/src/stories/internet-header/components/footer/footer.stories.ts
@@ -0,0 +1,61 @@
+import { Args, Meta, StoryContext, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import { BADGE } from '../../../../../.storybook/constants';
+import customFooterConfig from './custom-config/custom-footer-config';
+import { spread } from '@open-wc/lit-helpers';
+
+const meta: Meta = {
+  title: 'Internet Header/Footer',
+  component: 'swisspost-internet-footer',
+  render: renderInternetFooter,
+  decorators: [hiddenHeader],
+  parameters: {
+    layout: 'fullscreen',
+    badges: [BADGE.STABLE],
+  },
+  argTypes: {
+    customConfig: {
+      control: 'object',
+      table: {
+        type: {
+          summary: 'ICustomConfig',
+          detail: JSON.stringify(customFooterConfig),
+        },
+      },
+    },
+  },
+};
+
+export default meta;
+
+// DECORATORS
+function hiddenHeader(story: any, { args }: StoryContext) {
+  return html`
+    <style>
+      swisspost-internet-header {
+        display: none;
+      }
+    </style>
+    ${story()}
+  `;
+}
+
+// RENDERER
+function renderInternetFooter(args: Args) {
+  const props = args.customConfig ? { 'custom-config': JSON.stringify(args.customConfig) } : {};
+  return html`
+    <swisspost-internet-header ${spread(props)} project="test"></swisspost-internet-header>
+    <swisspost-internet-footer></swisspost-internet-footer>
+  `;
+}
+
+// STORIES
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const CustomConfig: Story = {
+  args: {
+    customConfig: customFooterConfig,
+  },
+};