chore(documentation-v7): migrate the internet header component stories #1822
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,22 @@ | ||
| 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'; | ||
|
|
||
| defineInternetHeader(window); | ||
| definePostComponent(window); | ||
|
|
||
| if (postComponentsDocJson && internetHeaderDocJson) { | ||
| const jsonDocs: StencilJsonDocs = { | ||
| timestamp: postComponentsDocJson.timestamp, | ||
| compiler: postComponentsDocJson.compiler, | ||
| components: [ | ||
| ...postComponentsDocJson.components, | ||
| ...internetHeaderDocJson.components | ||
| ] as StencilJsonDocsComponent[], | ||
| }; | ||
|
|
||
| setStencilDocJson(jsonDocs); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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} /> | ||
|
There was a problem hiding this comment. I used |
||
| </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> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| }; | ||
|
Comment on lines
+224
to
+241
There was a problem hiding this comment. I think the move can be part of this PR |
||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not sure if this line is correct or not or if you need to remove the import