From 2dc3114bb633ad84f2bffc7824ea73b9fd1ab9a1 Mon Sep 17 00:00:00 2001 From: imagoiq <12294151+imagoiq@users.noreply.github.com> Date: Tue, 27 Feb 2024 12:01:49 +0100 Subject: [PATCH 01/36] chore(documentation): Rework getting started section and add Angular CUSTOM_ELEMENTS_SCHEMA info --- .../complex-card-demo.component.html | 2 +- packages/documentation/.storybook/preview.ts | 38 +--- .../alert/standard-html/alert.stories.ts | 2 +- .../components/button/button.stories.ts | 2 +- .../icons/{components => }/icon.docs.mdx | 0 .../icons/{components => }/icon.stories.ts | 8 +- .../breadcrumbs/breadcrumbs.docs.mdx | 0 .../breadcrumbs/breadcrumbs.stories.ts | 4 +- .../overrides/breadcrumbs-config.docs.mdx | 0 .../overrides/breadcrumbs-config.stories.ts | 0 .../breadcrumbs/overrides/custom-items.ts | 0 .../custom-config/custom-footer-config.ts | 0 .../custom-config/footer-config.docs.mdx | 0 .../custom-config/footer-config.stories.ts | 0 .../{components => }/footer/footer.docs.mdx | 0 .../{components => }/footer/footer.stories.ts | 2 +- .../internet-header/getting-started.docs.mdx | 100 ---------- .../header/config/custom-config.ts | 0 .../config/language-switch-overrides.ts | 0 .../header/config/os-flyout-overrides.ts | 0 .../{components => }/header/header.docs.mdx | 0 .../{components => }/header/header.scss | 0 .../{components => }/header/header.stories.ts | 4 +- .../header-custom-config.docs.mdx | 0 .../header-custom-config.stories.ts | 0 .../header-custom-content.docs.mdx | 0 .../header-custom-content.stories.ts | 0 .../header-language-switch-overrides.docs.mdx | 0 ...eader-language-switch-overrides.stories.ts | 0 .../header-os-flyout-overrides.docs.mdx | 0 .../header-os-flyout-overrides.stories.ts | 0 .../internet-header-lazy-loaded.sample.js | 4 - .../internet-header/migration-guide.docs.mdx | 91 --------- .../migration-guide.stories.ts | 16 -- .../intranet-header/intranet-header.docs.mdx | 6 +- .../notification-overlay.stories.ts | 1 + .../stories/components/toast/toast.stories.ts | 2 +- .../icons}/search-icons.blocks.tsx | 2 +- .../icons}/search-icons.docs.mdx | 2 +- .../icons}/search-icons.stories.ts | 2 +- .../icons}/search-icons.styles.scss | 2 +- .../getting-started/angular/angular.docs.mdx | 77 ++++++++ .../angular/angular.stories.ts | 15 ++ .../angular/sample-icons-config.sample.json} | 0 ...b-components-angular-manually.component.ts | 6 + .../compatibility/compatibility.docs.mdx | 49 ++++- .../getting-started/getting-started.docs.mdx | 109 +++++++++++ .../getting-started.stories.ts | 7 +- .../angular-app-component.sample.html | 0 .../angular-app-module.sample.ts | 0 .../components-angular/angular.docs.mdx | 0 .../components-angular/angular.stories.ts | 4 +- ...ponents-cdn-bare-component-all.sample.html | 0 ...components-cdn-lazy-loaded-all.sample.html | 0 ...nents-cdn-lazy-loaded-specific.sample.html | 0 .../components/components-js-all.sample.js | 0 .../components-js-specific.sample.js | 0 .../components/components.docs.mdx | 0 .../components/components.stories.ts | 4 +- .../package-icons-icon-meta.sample.html} | 0 .../package-icons-node-16.7.0.sample.json} | 0 .../icons/package-icons-node-old.sample.js} | 0 .../icons/package-icons-node-old.sample.json} | 0 .../packages/icons/package-icons.mdx} | 24 +-- .../packages/icons/package-icons.stories.ts} | 4 +- .../internet-header-bare-component.sample.js | 0 ...rnet-header-cdn-bare-component.sample.html | 0 ...nternet-header-cdn-lazy-loaded.sample.html | 0 ...internet-header-fix-app-styles.sample.html | 0 .../internet-header-frameworks.sample.html | 0 .../internet-header-install.sample.html | 0 .../internet-header-lazy-loaded.sample.js | 4 + .../internet-header-old.sample.html | 0 .../internet-header-reference.sample.ts | 0 .../internet-header/internet-header.docs.mdx | 181 ++++++++++++++++++ .../internet-header.stories.ts | 16 ++ .../intranet-header/intranet-header.docs.mdx | 32 ++++ .../intranet-header.stories.ts | 16 ++ .../styles/styles-variable.sample.scss | 5 + .../{ => packages}/styles/styles.docs.mdx | 0 .../{ => packages}/styles/styles.stories.ts | 4 +- .../styles/styles-variable.sample.scss | 5 - .../documentation/src/stories/home.docs.mdx | 2 +- 83 files changed, 550 insertions(+), 304 deletions(-) rename packages/documentation/src/stories/components/icons/{components => }/icon.docs.mdx (100%) rename packages/documentation/src/stories/components/icons/{components => }/icon.stories.ts (96%) rename packages/documentation/src/stories/components/internet-header/{components => }/breadcrumbs/breadcrumbs.docs.mdx (100%) rename packages/documentation/src/stories/components/internet-header/{components => }/breadcrumbs/breadcrumbs.stories.ts (93%) rename packages/documentation/src/stories/components/internet-header/{components => }/breadcrumbs/overrides/breadcrumbs-config.docs.mdx (100%) rename packages/documentation/src/stories/components/internet-header/{components => }/breadcrumbs/overrides/breadcrumbs-config.stories.ts (100%) rename packages/documentation/src/stories/components/internet-header/{components => }/breadcrumbs/overrides/custom-items.ts (100%) rename packages/documentation/src/stories/components/internet-header/{components => }/footer/custom-config/custom-footer-config.ts (100%) rename packages/documentation/src/stories/components/internet-header/{components => }/footer/custom-config/footer-config.docs.mdx (100%) rename packages/documentation/src/stories/components/internet-header/{components => }/footer/custom-config/footer-config.stories.ts (100%) rename packages/documentation/src/stories/components/internet-header/{components => }/footer/footer.docs.mdx (100%) rename packages/documentation/src/stories/components/internet-header/{components => }/footer/footer.stories.ts (95%) delete mode 100644 packages/documentation/src/stories/components/internet-header/getting-started.docs.mdx rename packages/documentation/src/stories/components/internet-header/{components => }/header/config/custom-config.ts (100%) rename packages/documentation/src/stories/components/internet-header/{components => }/header/config/language-switch-overrides.ts (100%) rename packages/documentation/src/stories/components/internet-header/{components => }/header/config/os-flyout-overrides.ts (100%) rename packages/documentation/src/stories/components/internet-header/{components => }/header/header.docs.mdx (100%) rename packages/documentation/src/stories/components/internet-header/{components => }/header/header.scss (100%) rename packages/documentation/src/stories/components/internet-header/{components => }/header/header.stories.ts (97%) rename packages/documentation/src/stories/components/internet-header/{components => }/header/overrides-stories/header-custom-config.docs.mdx (100%) rename packages/documentation/src/stories/components/internet-header/{components => }/header/overrides-stories/header-custom-config.stories.ts (100%) rename packages/documentation/src/stories/components/internet-header/{components => }/header/overrides-stories/header-custom-content.docs.mdx (100%) rename packages/documentation/src/stories/components/internet-header/{components => }/header/overrides-stories/header-custom-content.stories.ts (100%) rename packages/documentation/src/stories/components/internet-header/{components => }/header/overrides-stories/header-language-switch-overrides.docs.mdx (100%) rename packages/documentation/src/stories/components/internet-header/{components => }/header/overrides-stories/header-language-switch-overrides.stories.ts (100%) rename packages/documentation/src/stories/components/internet-header/{components => }/header/overrides-stories/header-os-flyout-overrides.docs.mdx (100%) rename packages/documentation/src/stories/components/internet-header/{components => }/header/overrides-stories/header-os-flyout-overrides.stories.ts (100%) delete mode 100644 packages/documentation/src/stories/components/internet-header/internet-header-lazy-loaded.sample.js delete mode 100644 packages/documentation/src/stories/components/internet-header/migration-guide.docs.mdx delete mode 100644 packages/documentation/src/stories/components/internet-header/migration-guide.stories.ts rename packages/documentation/src/stories/{components/icons/search-icons => foundation/icons}/search-icons.blocks.tsx (97%) rename packages/documentation/src/stories/{components/icons/search-icons => foundation/icons}/search-icons.docs.mdx (96%) rename packages/documentation/src/stories/{components/icons/search-icons => foundation/icons}/search-icons.stories.ts (82%) rename packages/documentation/src/stories/{components/icons/search-icons => foundation/icons}/search-icons.styles.scss (96%) create mode 100644 packages/documentation/src/stories/getting-started/angular/angular.docs.mdx create mode 100644 packages/documentation/src/stories/getting-started/angular/angular.stories.ts rename packages/documentation/src/stories/{components/icons/getting-started-angular-config.sample.json => getting-started/angular/sample-icons-config.sample.json} (100%) create mode 100644 packages/documentation/src/stories/getting-started/angular/sample-web-components-angular-manually.component.ts create mode 100644 packages/documentation/src/stories/getting-started/getting-started.docs.mdx rename packages/documentation/src/stories/{components/internet-header => getting-started}/getting-started.stories.ts (50%) rename packages/documentation/src/stories/getting-started/{ => packages}/components-angular/angular-app-component.sample.html (100%) rename packages/documentation/src/stories/getting-started/{ => packages}/components-angular/angular-app-module.sample.ts (100%) rename packages/documentation/src/stories/getting-started/{ => packages}/components-angular/angular.docs.mdx (100%) rename packages/documentation/src/stories/getting-started/{ => packages}/components-angular/angular.stories.ts (69%) rename packages/documentation/src/stories/getting-started/{ => packages}/components/components-cdn-bare-component-all.sample.html (100%) rename packages/documentation/src/stories/getting-started/{ => packages}/components/components-cdn-lazy-loaded-all.sample.html (100%) rename packages/documentation/src/stories/getting-started/{ => packages}/components/components-cdn-lazy-loaded-specific.sample.html (100%) rename packages/documentation/src/stories/getting-started/{ => packages}/components/components-js-all.sample.js (100%) rename packages/documentation/src/stories/getting-started/{ => packages}/components/components-js-specific.sample.js (100%) rename packages/documentation/src/stories/getting-started/{ => packages}/components/components.docs.mdx (100%) rename packages/documentation/src/stories/getting-started/{ => packages}/components/components.stories.ts (71%) rename packages/documentation/src/stories/{components/icons/getting-started-icon-meta.sample.html => getting-started/packages/icons/package-icons-icon-meta.sample.html} (100%) rename packages/documentation/src/stories/{components/icons/getting-started-node-16.7.0.sample.json => getting-started/packages/icons/package-icons-node-16.7.0.sample.json} (100%) rename packages/documentation/src/stories/{components/icons/getting-started-node-old.sample.js => getting-started/packages/icons/package-icons-node-old.sample.js} (100%) rename packages/documentation/src/stories/{components/icons/getting-started-node-old.sample.json => getting-started/packages/icons/package-icons-node-old.sample.json} (100%) rename packages/documentation/src/stories/{components/icons/getting-started.docs.mdx => getting-started/packages/icons/package-icons.mdx} (78%) rename packages/documentation/src/stories/{components/icons/getting-started.stories.ts => getting-started/packages/icons/package-icons.stories.ts} (72%) rename packages/documentation/src/stories/{components => getting-started/packages}/internet-header/internet-header-bare-component.sample.js (100%) rename packages/documentation/src/stories/{components => getting-started/packages}/internet-header/internet-header-cdn-bare-component.sample.html (100%) rename packages/documentation/src/stories/{components => getting-started/packages}/internet-header/internet-header-cdn-lazy-loaded.sample.html (100%) rename packages/documentation/src/stories/{components => getting-started/packages}/internet-header/internet-header-fix-app-styles.sample.html (100%) rename packages/documentation/src/stories/{components => getting-started/packages}/internet-header/internet-header-frameworks.sample.html (100%) rename packages/documentation/src/stories/{components => getting-started/packages}/internet-header/internet-header-install.sample.html (100%) create mode 100644 packages/documentation/src/stories/getting-started/packages/internet-header/internet-header-lazy-loaded.sample.js rename packages/documentation/src/stories/{components => getting-started/packages}/internet-header/internet-header-old.sample.html (100%) rename packages/documentation/src/stories/{components => getting-started/packages}/internet-header/internet-header-reference.sample.ts (100%) create mode 100644 packages/documentation/src/stories/getting-started/packages/internet-header/internet-header.docs.mdx create mode 100644 packages/documentation/src/stories/getting-started/packages/internet-header/internet-header.stories.ts create mode 100644 packages/documentation/src/stories/getting-started/packages/intranet-header/intranet-header.docs.mdx create mode 100644 packages/documentation/src/stories/getting-started/packages/intranet-header/intranet-header.stories.ts create mode 100644 packages/documentation/src/stories/getting-started/packages/styles/styles-variable.sample.scss rename packages/documentation/src/stories/getting-started/{ => packages}/styles/styles.docs.mdx (100%) rename packages/documentation/src/stories/getting-started/{ => packages}/styles/styles.stories.ts (71%) delete mode 100644 packages/documentation/src/stories/getting-started/styles/styles-variable.sample.scss diff --git a/packages/demo/src/app/bootstrap/components/card/complex-card-demo/complex-card-demo.component.html b/packages/demo/src/app/bootstrap/components/card/complex-card-demo/complex-card-demo.component.html index 2c48d5536a..09f66490b8 100644 --- a/packages/demo/src/app/bootstrap/components/card/complex-card-demo/complex-card-demo.component.html +++ b/packages/demo/src/app/bootstrap/components/card/complex-card-demo/complex-card-demo.component.html @@ -140,7 +140,7 @@
Card title

Card columns

-

Card columns can be checked out in the swiss post example below.

+

Card columns can be checked out in the Swiss post example below.

Default diff --git a/packages/documentation/.storybook/preview.ts b/packages/documentation/.storybook/preview.ts index e853b66118..1ed06a4592 100644 --- a/packages/documentation/.storybook/preview.ts +++ b/packages/documentation/.storybook/preview.ts @@ -25,13 +25,14 @@ const preview: Preview = { // Category - Getting Started 'Getting Started', - ['Styles', 'Components', 'Components-Angular', 'Compatibility'], + ['Getting Started', 'Angular', 'Compatibility', 'Packages'], // Category - Foundations 'Foundations', [ 'Typography', 'Color', + 'Icons', 'Layout', ['Breakpoints', 'Containers', 'Grid', 'Columns', 'TODOS'], 'Elevation', @@ -40,41 +41,6 @@ const preview: Preview = { // Category - Components 'Components', - [ - 'Accordion', - 'Alert', - 'Badge', - 'Blockquote', - 'Button', - 'Button Group', - 'Cards', - 'Carousel', - 'Collapsible', - 'Datepicker', - 'Dropdown', - 'Forms', - 'Heading', - 'Icons', - ['Getting Started'], - 'Internet Header', - ['Getting Started', 'Header'], - 'Intranet Header', - 'Modal', - 'Notification overlay', - 'Pagination', - 'Popover', - 'Progressbar', - 'Spinner', - 'Stepper', - 'Subnavigation', - 'Table', - 'Tabs', - 'Timepicker', - 'Toast', - 'Tooltip', - 'Topic Teaser', - 'Typeahead', - ], // Category - Patterns 'Patterns', diff --git a/packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts b/packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts index e30a253577..dbc7345204 100644 --- a/packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts +++ b/packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts @@ -64,7 +64,7 @@ const meta: Meta = { 'The icon to display in the alert. By default, the icon depends on the alert type.' + '' + 'To use a custom icon, you must first ' + - 'set up the icons in your project' + + 'set up the icons in your project' + '.', if: { arg: 'noIcon', diff --git a/packages/documentation/src/stories/components/button/button.stories.ts b/packages/documentation/src/stories/components/button/button.stories.ts index 4dd96e21ae..d302c742da 100644 --- a/packages/documentation/src/stories/components/button/button.stories.ts +++ b/packages/documentation/src/stories/components/button/button.stories.ts @@ -138,7 +138,7 @@ const meta: Meta = { 'Defines a custom icon.' + '' + 'To use a custom icon, you must first ' + - 'set up the icons in your project' + + 'set up the icons in your project' + '.', if: { arg: 'tag', diff --git a/packages/documentation/src/stories/components/icons/components/icon.docs.mdx b/packages/documentation/src/stories/components/icons/icon.docs.mdx similarity index 100% rename from packages/documentation/src/stories/components/icons/components/icon.docs.mdx rename to packages/documentation/src/stories/components/icons/icon.docs.mdx diff --git a/packages/documentation/src/stories/components/icons/components/icon.stories.ts b/packages/documentation/src/stories/components/icons/icon.stories.ts similarity index 96% rename from packages/documentation/src/stories/components/icons/components/icon.stories.ts rename to packages/documentation/src/stories/components/icons/icon.stories.ts index c659175bac..1a404e466b 100644 --- a/packages/documentation/src/stories/components/icons/components/icon.stories.ts +++ b/packages/documentation/src/stories/components/icons/icon.stories.ts @@ -1,14 +1,14 @@ import { spread } from '@open-wc/lit-helpers'; import { Args, Meta, StoryObj } from '@storybook/web-components'; -import { Components } from '@swisspost/design-system-components'; import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; -import { BADGE } from '../../../../../.storybook/constants'; -import { spreadArgs } from '../../../../utils'; +import { BADGE } from '../../../../.storybook/constants'; +import { spreadArgs } from '../../../utils'; +import { Components } from '@swisspost/design-system-components/src'; const meta: Meta = { id: '0dcfe3c0-bfc0-4107-b43b-7e9d825b805f', - title: 'Components/Icons/Icon Component', + title: 'Components/Icon', component: 'post-icon', parameters: { badges: [BADGE.NEEDS_REVISION, BADGE.SINCE_V1], diff --git a/packages/documentation/src/stories/components/internet-header/components/breadcrumbs/breadcrumbs.docs.mdx b/packages/documentation/src/stories/components/internet-header/breadcrumbs/breadcrumbs.docs.mdx similarity index 100% rename from packages/documentation/src/stories/components/internet-header/components/breadcrumbs/breadcrumbs.docs.mdx rename to packages/documentation/src/stories/components/internet-header/breadcrumbs/breadcrumbs.docs.mdx diff --git a/packages/documentation/src/stories/components/internet-header/components/breadcrumbs/breadcrumbs.stories.ts b/packages/documentation/src/stories/components/internet-header/breadcrumbs/breadcrumbs.stories.ts similarity index 93% rename from packages/documentation/src/stories/components/internet-header/components/breadcrumbs/breadcrumbs.stories.ts rename to packages/documentation/src/stories/components/internet-header/breadcrumbs/breadcrumbs.stories.ts index b19a213166..208f5154eb 100644 --- a/packages/documentation/src/stories/components/internet-header/components/breadcrumbs/breadcrumbs.stories.ts +++ b/packages/documentation/src/stories/components/internet-header/breadcrumbs/breadcrumbs.stories.ts @@ -1,8 +1,8 @@ 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 { BADGE } from '../../../../../.storybook/constants'; +import { getAttributes } from '../../../../utils'; import customItems from './overrides/custom-items'; const meta: Meta = { diff --git a/packages/documentation/src/stories/components/internet-header/components/breadcrumbs/overrides/breadcrumbs-config.docs.mdx b/packages/documentation/src/stories/components/internet-header/breadcrumbs/overrides/breadcrumbs-config.docs.mdx similarity index 100% rename from packages/documentation/src/stories/components/internet-header/components/breadcrumbs/overrides/breadcrumbs-config.docs.mdx rename to packages/documentation/src/stories/components/internet-header/breadcrumbs/overrides/breadcrumbs-config.docs.mdx diff --git a/packages/documentation/src/stories/components/internet-header/components/breadcrumbs/overrides/breadcrumbs-config.stories.ts b/packages/documentation/src/stories/components/internet-header/breadcrumbs/overrides/breadcrumbs-config.stories.ts similarity index 100% rename from packages/documentation/src/stories/components/internet-header/components/breadcrumbs/overrides/breadcrumbs-config.stories.ts rename to packages/documentation/src/stories/components/internet-header/breadcrumbs/overrides/breadcrumbs-config.stories.ts diff --git a/packages/documentation/src/stories/components/internet-header/components/breadcrumbs/overrides/custom-items.ts b/packages/documentation/src/stories/components/internet-header/breadcrumbs/overrides/custom-items.ts similarity index 100% rename from packages/documentation/src/stories/components/internet-header/components/breadcrumbs/overrides/custom-items.ts rename to packages/documentation/src/stories/components/internet-header/breadcrumbs/overrides/custom-items.ts diff --git a/packages/documentation/src/stories/components/internet-header/components/footer/custom-config/custom-footer-config.ts b/packages/documentation/src/stories/components/internet-header/footer/custom-config/custom-footer-config.ts similarity index 100% rename from packages/documentation/src/stories/components/internet-header/components/footer/custom-config/custom-footer-config.ts rename to packages/documentation/src/stories/components/internet-header/footer/custom-config/custom-footer-config.ts diff --git a/packages/documentation/src/stories/components/internet-header/components/footer/custom-config/footer-config.docs.mdx b/packages/documentation/src/stories/components/internet-header/footer/custom-config/footer-config.docs.mdx similarity index 100% rename from packages/documentation/src/stories/components/internet-header/components/footer/custom-config/footer-config.docs.mdx rename to packages/documentation/src/stories/components/internet-header/footer/custom-config/footer-config.docs.mdx diff --git a/packages/documentation/src/stories/components/internet-header/components/footer/custom-config/footer-config.stories.ts b/packages/documentation/src/stories/components/internet-header/footer/custom-config/footer-config.stories.ts similarity index 100% rename from packages/documentation/src/stories/components/internet-header/components/footer/custom-config/footer-config.stories.ts rename to packages/documentation/src/stories/components/internet-header/footer/custom-config/footer-config.stories.ts diff --git a/packages/documentation/src/stories/components/internet-header/components/footer/footer.docs.mdx b/packages/documentation/src/stories/components/internet-header/footer/footer.docs.mdx similarity index 100% rename from packages/documentation/src/stories/components/internet-header/components/footer/footer.docs.mdx rename to packages/documentation/src/stories/components/internet-header/footer/footer.docs.mdx diff --git a/packages/documentation/src/stories/components/internet-header/components/footer/footer.stories.ts b/packages/documentation/src/stories/components/internet-header/footer/footer.stories.ts similarity index 95% rename from packages/documentation/src/stories/components/internet-header/components/footer/footer.stories.ts rename to packages/documentation/src/stories/components/internet-header/footer/footer.stories.ts index db351b18b6..6b96109cf8 100644 --- a/packages/documentation/src/stories/components/internet-header/components/footer/footer.stories.ts +++ b/packages/documentation/src/stories/components/internet-header/footer/footer.stories.ts @@ -1,6 +1,6 @@ import { Args, Meta, StoryContext, StoryObj } from '@storybook/web-components'; import { html } from 'lit'; -import { BADGE } from '../../../../../../.storybook/constants'; +import { BADGE } from '../../../../../.storybook/constants'; import customFooterConfig from './custom-config/custom-footer-config'; import { spread } from '@open-wc/lit-helpers'; diff --git a/packages/documentation/src/stories/components/internet-header/getting-started.docs.mdx b/packages/documentation/src/stories/components/internet-header/getting-started.docs.mdx deleted file mode 100644 index df41f3f0b8..0000000000 --- a/packages/documentation/src/stories/components/internet-header/getting-started.docs.mdx +++ /dev/null @@ -1,100 +0,0 @@ -import { Meta, Source } from '@storybook/blocks'; -import { PostTabs, PostTabHeader, PostTabPanel } from '@swisspost/design-system-components-react'; -import SampleFrameworks from './internet-header-frameworks.sample.html?raw'; -import SampleLazyLoaded from './internet-header-lazy-loaded.sample.js?raw'; -import SampleBareComponent from './internet-header-bare-component.sample.js?raw'; -import SampleCDNLazyLoaded from './internet-header-cdn-lazy-loaded.sample.html?raw'; -import SampleCDNBareComponent from './internet-header-cdn-bare-component.sample.html?raw'; -import { SourceDarkMode } from '../../../../.storybook/preview'; -import * as GettingStartedStories from './getting-started.stories'; - - - -# @swisspost/internet-header - -[![npm version](https://badge.fury.io/js/@swisspost%2Finternet-header.svg)](https://badge.fury.io/js/@swisspost%2Finternet-header) - -The header for client-facing applications. - -

- -## Installation - -### Choosing between lazy-loaded or bare component version - -Internet-header package provide two versions: - -- Lazy-loaded (default): it allows better performance by dynamically load the component when used, so it reduces bundle size, startup time and first paint. -- Bare component: if you already manage the lazy-loading or don't need it for any reason, you can use the component without any overhead. - -### Angular, Vue.js, React (or any other bundler setup) - -All the popular frameworks come with some form of bundler. -This makes it easy to use npm packages like the Internet Header as you can import, -bundle and deliver the header with your own code. - -When working with Angular or any other framework, the easiest installation method is via npm. - - - - - - - Lazy-Loaded - - - - - Bare Component - - - - - -### Include from a CDN - -If you are not using any bundler or don't want to install from npm, you can load the `internet-header` from your favourite [CDN](https://en.wikipedia.org/wiki/Content_delivery_network).
-Make sure to replace `{version}` with the version you want to use or remove `@{version}` to use the latest version. - -Available CDNs: - -- [jsDelivr](https://www.jsdelivr.com/): replace `{cdnURL}` with [https://cdn.jsdelivr.net/npm/@swisspost/internet-header](https://cdn.jsdelivr.net/npm/@swisspost/internet-header). -- [unpkg](https://unpkg.com/): replace `{cdnURL}` with [https://unpkg.com/@swisspost/internet-header](https://unpkg.com/@swisspost/internet-header). - - - Lazy-Loaded - - - - - Bare Component - - - - -## Configuration - -The Internet Header is built to support the already existing Portal Configuration used for the old Internet Header. - -If you're working on a new project, you probably need a new configuration. Please click the button below. - -Contact Post Portal Team - -Not every Online Service has configurations for all environments. -For example, "TOPOS" only has `int02` configured and cannot use `int01` as value for environment. -If you are not sure what's configured for your project, please reach out to the post-portal team as well. - -For settings on the header itself, see the examples provided in the left menu bar. - -## Help - -If you noticed a bug or need assistance with migrating to the new Internet Header, please post your enquiry at the [Design System GitHub Discussions](https://github.com/swisspost/design-system/discussions/categories/q-a). diff --git a/packages/documentation/src/stories/components/internet-header/components/header/config/custom-config.ts b/packages/documentation/src/stories/components/internet-header/header/config/custom-config.ts similarity index 100% rename from packages/documentation/src/stories/components/internet-header/components/header/config/custom-config.ts rename to packages/documentation/src/stories/components/internet-header/header/config/custom-config.ts diff --git a/packages/documentation/src/stories/components/internet-header/components/header/config/language-switch-overrides.ts b/packages/documentation/src/stories/components/internet-header/header/config/language-switch-overrides.ts similarity index 100% rename from packages/documentation/src/stories/components/internet-header/components/header/config/language-switch-overrides.ts rename to packages/documentation/src/stories/components/internet-header/header/config/language-switch-overrides.ts diff --git a/packages/documentation/src/stories/components/internet-header/components/header/config/os-flyout-overrides.ts b/packages/documentation/src/stories/components/internet-header/header/config/os-flyout-overrides.ts similarity index 100% rename from packages/documentation/src/stories/components/internet-header/components/header/config/os-flyout-overrides.ts rename to packages/documentation/src/stories/components/internet-header/header/config/os-flyout-overrides.ts diff --git a/packages/documentation/src/stories/components/internet-header/components/header/header.docs.mdx b/packages/documentation/src/stories/components/internet-header/header/header.docs.mdx similarity index 100% rename from packages/documentation/src/stories/components/internet-header/components/header/header.docs.mdx rename to packages/documentation/src/stories/components/internet-header/header/header.docs.mdx diff --git a/packages/documentation/src/stories/components/internet-header/components/header/header.scss b/packages/documentation/src/stories/components/internet-header/header/header.scss similarity index 100% rename from packages/documentation/src/stories/components/internet-header/components/header/header.scss rename to packages/documentation/src/stories/components/internet-header/header/header.scss diff --git a/packages/documentation/src/stories/components/internet-header/components/header/header.stories.ts b/packages/documentation/src/stories/components/internet-header/header/header.stories.ts similarity index 97% rename from packages/documentation/src/stories/components/internet-header/components/header/header.stories.ts rename to packages/documentation/src/stories/components/internet-header/header/header.stories.ts index 5e286c28db..4fe0d4f2a2 100644 --- a/packages/documentation/src/stories/components/internet-header/components/header/header.stories.ts +++ b/packages/documentation/src/stories/components/internet-header/header/header.stories.ts @@ -1,7 +1,7 @@ import { Args, Meta, StoryObj } from '@storybook/web-components'; -import { BADGE } from '../../../../../../.storybook/constants'; +import { BADGE } from '../../../../../.storybook/constants'; import { html } from 'lit'; -import { spreadArgs } from '../../../../../utils'; +import { spreadArgs } from '../../../../utils'; import customConfig from './config/custom-config'; import osFlyoutOverrides from './config/os-flyout-overrides'; import languageSwitchOverrides from './config/language-switch-overrides'; diff --git a/packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-custom-config.docs.mdx b/packages/documentation/src/stories/components/internet-header/header/overrides-stories/header-custom-config.docs.mdx similarity index 100% rename from packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-custom-config.docs.mdx rename to packages/documentation/src/stories/components/internet-header/header/overrides-stories/header-custom-config.docs.mdx diff --git a/packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-custom-config.stories.ts b/packages/documentation/src/stories/components/internet-header/header/overrides-stories/header-custom-config.stories.ts similarity index 100% rename from packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-custom-config.stories.ts rename to packages/documentation/src/stories/components/internet-header/header/overrides-stories/header-custom-config.stories.ts diff --git a/packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-custom-content.docs.mdx b/packages/documentation/src/stories/components/internet-header/header/overrides-stories/header-custom-content.docs.mdx similarity index 100% rename from packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-custom-content.docs.mdx rename to packages/documentation/src/stories/components/internet-header/header/overrides-stories/header-custom-content.docs.mdx diff --git a/packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-custom-content.stories.ts b/packages/documentation/src/stories/components/internet-header/header/overrides-stories/header-custom-content.stories.ts similarity index 100% rename from packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-custom-content.stories.ts rename to packages/documentation/src/stories/components/internet-header/header/overrides-stories/header-custom-content.stories.ts diff --git a/packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-language-switch-overrides.docs.mdx b/packages/documentation/src/stories/components/internet-header/header/overrides-stories/header-language-switch-overrides.docs.mdx similarity index 100% rename from packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-language-switch-overrides.docs.mdx rename to packages/documentation/src/stories/components/internet-header/header/overrides-stories/header-language-switch-overrides.docs.mdx diff --git a/packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-language-switch-overrides.stories.ts b/packages/documentation/src/stories/components/internet-header/header/overrides-stories/header-language-switch-overrides.stories.ts similarity index 100% rename from packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-language-switch-overrides.stories.ts rename to packages/documentation/src/stories/components/internet-header/header/overrides-stories/header-language-switch-overrides.stories.ts diff --git a/packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-os-flyout-overrides.docs.mdx b/packages/documentation/src/stories/components/internet-header/header/overrides-stories/header-os-flyout-overrides.docs.mdx similarity index 100% rename from packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-os-flyout-overrides.docs.mdx rename to packages/documentation/src/stories/components/internet-header/header/overrides-stories/header-os-flyout-overrides.docs.mdx diff --git a/packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-os-flyout-overrides.stories.ts b/packages/documentation/src/stories/components/internet-header/header/overrides-stories/header-os-flyout-overrides.stories.ts similarity index 100% rename from packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-os-flyout-overrides.stories.ts rename to packages/documentation/src/stories/components/internet-header/header/overrides-stories/header-os-flyout-overrides.stories.ts diff --git a/packages/documentation/src/stories/components/internet-header/internet-header-lazy-loaded.sample.js b/packages/documentation/src/stories/components/internet-header/internet-header-lazy-loaded.sample.js deleted file mode 100644 index 80b5bf4cc3..0000000000 --- a/packages/documentation/src/stories/components/internet-header/internet-header-lazy-loaded.sample.js +++ /dev/null @@ -1,4 +0,0 @@ -// main.ts / index.js / ... -import { defineCustomElements } from '@swisspost/internet-header/loader'; - -defineCustomElements(); diff --git a/packages/documentation/src/stories/components/internet-header/migration-guide.docs.mdx b/packages/documentation/src/stories/components/internet-header/migration-guide.docs.mdx deleted file mode 100644 index a1f9857575..0000000000 --- a/packages/documentation/src/stories/components/internet-header/migration-guide.docs.mdx +++ /dev/null @@ -1,91 +0,0 @@ -import { Meta, Source } from '@storybook/blocks'; -import SampleReference from './internet-header-reference.sample.ts?raw'; -import SampleInstall from './internet-header-install.sample.html?raw'; -import SampleFixAppStyles from './internet-header-fix-app-styles.sample.html?raw'; -import SampleOld from './internet-header-old.sample.html?raw'; -import { SourceDarkMode } from '../../../../.storybook/preview'; -import * as MigrationGuideStories from './migration-guide.stories'; - - - -# Migration from the old header - -This guide aims to give a broad overview of how a migration can be performed. -Different projects have different levels of integration with the header, -and therefore require more steps to migrate. - -## Architecture - -The "new" -Internet Header Web Component aims -to encapsulate as much as possible whereas the old header had a big influence on the page — -limiting design decisions and flexibility of the markup structure. -The Web Component Header consists of one script and three standard Web Components that can be freely placed on the page. -It's even possible to render those elements with Angular -(or any other framework) to easier pass settings into the component. - -The new header is built -to work with the existing Sitecore configuration -already existing for your project to make the migration as smooth as possible. - -## Support - -If you need support during your migration, -don't hesitate -to contact the [Design System Team](https://github.com/swisspost/design-system/discussions/categories/general) on GitHub. - -## 1. Remove the old header - -In your index.html, you should find three scripts associated with the old header. -One to load static assets, one to configure it and one to load it. - -- You can remove the configuration and the loader scripts, but remember your `serviceid`. -- Try to remove the `staticassets` script to check if you still need it - - - -## 2. Fix your app styles - -The old header was responsible for wrapping your main code (here `#os_content`) with custom `
`s. -The new header does not provide those wrappers. -Instead, every page has control over the main markup structure. -A possible replacement of the above code could be: - - - -- Likely you'll need the class `container` around your main content to align it properly in the center. -- For bonus points on semantic markup, use the [`
` tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main) around the main page content -- Check if you need the `staticasset` stylesheets linked in the header - -If you need to do any other changes, -please make a post to the [Design System Teams Channel](https://teams.microsoft.com/l/channel/19%3ae7fa68fb13eb40b4bf4604edea5f4b3e%40thread.tacv2/%25F0%259F%259A%2591%2520Support?groupId=123c7c9e-052a-40e6-98d3-6cc6d46bad0a&tenantId=3ae7c479-0cf1-47f4-8f84-929f364eff67) -in order to inform the devs to update this guide and provide useful information for other developers. - -## 3. jQuery - -The new Header does not ship jQuery anymore. -While jQuery v3.6 is an internal dependency for the Login Widget, -every project is now responsible for loading and updating jQuery individually. -If you are depending on an older (<3.5) version of jQuery, please update. -There is a long list of [known jQuery vulnerabilities](https://security.snyk.io/package/npm/jquery). - -## 4. Install the new header - -Please refer to the [Internet Header installation instructions](/?path=/docs/9b02bcb2-3b6a-4271-b550-675a62ff3890--docs) for an installation guide. - -After installation, you're ready to add the new tags to your markup: - - - -Place the new elements as described (and needed) as shown above. -The breadcrumbs need a `container` wrapper to align themselves with the content of your page, -the header and the footer already provide a container. -If you don't have breadcrumbs, you can just delete the `