From b06dc60313f0f05e9aaf4d834ad62850ebe39613 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= Date: Tue, 31 Oct 2023 10:30:04 +0100 Subject: [PATCH 1/3] chore: update dev-server ports (#2146) --- .github/workflows/e2e-tests.yaml | 4 +- CONTRIBUTING.md | 40 ++-- package.json | 41 +++- packages/components/cypress.config.js | 2 +- packages/components/package.json | 2 +- packages/demo/README.md | 2 +- packages/demo/package.json | 2 +- packages/documentation/cypress.config.js | 2 +- .../documentation/cypress.snapshot.config.js | 2 +- packages/documentation/package.json | 4 +- .../assets/config/test-configuration.json | 2 +- packages/icons/package.json | 2 +- packages/internet-header/cypress.config.js | 2 +- .../internet-header/test-configuration.json | 2 +- packages/internet-header/package.json | 2 +- packages/intranet-header-workspace/.gitignore | 1 + packages/intranet-header-workspace/README.md | 6 +- .../intranet-header-workspace/package.json | 2 +- packages/styles/cypress.config.js | 2 +- pnpm-lock.yaml | 201 +++++++++--------- 20 files changed, 172 insertions(+), 151 deletions(-) diff --git a/.github/workflows/e2e-tests.yaml b/.github/workflows/e2e-tests.yaml index 81bdb69819..8d504dd659 100644 --- a/.github/workflows/e2e-tests.yaml +++ b/.github/workflows/e2e-tests.yaml @@ -41,7 +41,7 @@ jobs: run: pnpm --filter design-system-documentation... build - name: Cypress info - run: pnpm --filter internet-header exec cypress info + run: pnpm --filter design-system-documentation exec cypress info - name: Run tests - run: pnpm exec start-server-and-test 'http-server packages/documentation/storybook-static --silent --port 9300' 9300 'pnpm --filter "...[origin/main]" --workspace-concurrency=1 e2e' + run: pnpm exec start-server-and-test 'http-server packages/documentation/storybook-static --silent --port 9001' 9001 'pnpm --filter "...[origin/main]" --workspace-concurrency=1 e2e' diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index c216f1ca14..dd68d35c45 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -34,7 +34,7 @@ Other root scripts are available for convenience: Use these commands whenever you want to work on one of these packages. Ideally, these commands start a watcher for file changes and a GUI where you can see what changed for all relevant packages. The start scripts always assume that you previously ran `pnpm bootstrap` and therefore have all packages built on disk. | Command | Description | -|-----------------------------------|----------------------------------------------------------------------------------------------| +| --------------------------------- | -------------------------------------------------------------------------------------------- | | `pnpm start` or `pnpm docs:start` | starts the design-system-documentation storybook and the `start` scripts of all dependencies | | `pnpm demo:start` | starts the demo Angular application and the `start` scripts of all dependencies | | `pnpm intranet-header:start` | starts the intranet header demo application | @@ -48,7 +48,7 @@ Use these commands whenever you want to work on one of these packages. Ideally, For easy test runs, the following commands are available (not all packages might have all commands available). | Command | Description | -|---------------------------------------|-------------------------------------------------------------------------------------------| +| ------------------------------------- | ----------------------------------------------------------------------------------------- | | `pnpm test` | runs the `test` command for all packages recursively | | `pnpm [package shortname]:test` | runs unit and end-to-end tests for the package in headless mode | | `pnpm [package shortname]:unit` | runs unit tests for the package | @@ -181,28 +181,30 @@ As per resolution of the [discussion about sass variables vs. CSS custom propert For some packages it's necessary to run multiple dev servers at the same time. To prevent port conflicts, the following ranges are given to each package. The ranges 9000 - 9400 are chosen for compatibility with [port ranges used by Browserstack](https://www.browserstack.com/question/39572). -### Default DevServer: 9000-9099 +### Documentation DevServer: 9000-9099 -| Package | Port | -|:---------------|-----:| -| Demo | 9000 | -| IntranetHeader | 9001 | +| Package | Port | +| :----------------- | ---: | +| Storybook | 9000 | +| Storybook Headless | 9001 | +| Demo | 9010 | -### Storybook DevServers: 9200-9299 +### Components DevServer: 9200-9299 -| Package | Port | -|:--------------|-----:| -| Documentation | 9200 | -| Styles | 9201 | -| Components | 9203 | +| Package | Port | +| :------------------------ | ---: | +| Components | 9200 | +| Components-Angular | 9210 | +| Components-React (unused) | 9220 | -### Storybook TestServers: 9300-9399 +### Other Packages DevServers: 9300-9399 -| Package | Port | -|:--------------|-----:| -| Documentation | 9300 | -| Styles | 9301 | -| Components | 9303 | +| Package | Port | +| :-------------- | ---: | +| Styles (unused) | 9300 | +| Internet-Header | 9310 | +| Intranet-Header | 9320 | +| Icons | 9330 | ## Branching diff --git a/package.json b/package.json index 3a3d957751..02b1c4f09f 100644 --- a/package.json +++ b/package.json @@ -16,15 +16,15 @@ "start": "pnpm docs:start", "test": "pnpm -r test", "unit": "pnpm -r unit", - "e2e": "start-server-and-test docs:headless 9300 'pnpm -r --parallel e2e'", - "snapshots": "start-server-and-test 'pnpm docs:headless' 9300 'pnpm --filter design-system-documentation snapshots'", + "e2e": "start-server-and-test docs:headless 9001 'pnpm -r --stream e2e'", + "snapshots": "start-server-and-test 'pnpm docs:headless' 9001 'pnpm --filter design-system-documentation snapshots'", "demo:start": "pnpm --filter design-system-demo... --parallel --stream start", "docs:start": "pnpm --filter design-system-documentation... --parallel --stream start", "docs:build": "pnpm --filter design-system-documentation build", "docs:headless": "pnpm --filter design-system-documentation start:headless", "docs:test": "pnpm --filter design-system-documentation test", - "docs:e2e": "start-server-and-test docs:headless 9300 'pnpm --filter design-system-documentation e2e'", - "docs:e2e:watch": "start-server-and-test docs:headless 9300 'pnpm --filter design-system-documentation e2e:watch'", + "docs:e2e": "start-server-and-test docs:headless 9001 'pnpm --filter design-system-documentation e2e'", + "docs:e2e:watch": "start-server-and-test docs:headless 9001 'pnpm --filter design-system-documentation e2e:watch'", "styles:start": "pnpm --filter design-system-styles start", "styles:build": "pnpm --filter design-system-styles build", "styles:test": "pnpm --filter design-system-styles test", @@ -33,18 +33,20 @@ "components:test": "pnpm --filter design-system-components test", "components:unit": "pnpm --filter design-system-components unit", "components:unit:watch": "pnpm --filter design-system-components unit:watch", - "components:e2e": "start-server-and-test docs:headless 9300 'pnpm --filter design-system-components e2e'", - "components:e2e:watch": "start-server-and-test docs:headless 9300 'pnpm --filter design-system-components e2e:watch'", - "components:snapshots": "start-server-and-test docs:headless 9300 'pnpm --filter design-system-components snapshots'", - "intranet-header:start": "pnpm --filter design-system-intranet-header-workspace start", + "components:e2e": "start-server-and-test docs:headless 9001 'pnpm --filter design-system-components e2e'", + "components:e2e:watch": "start-server-and-test docs:headless 9001 'pnpm --filter design-system-components e2e:watch'", + "components:snapshots": "start-server-and-test docs:headless 9001 'pnpm --filter design-system-components snapshots'", + "components-angular:start": "pnpm --filter design-system-components-angular-workspace start", + "components-angular:build": "pnpm --filter design-system-components-angular-workspace build", "header:start": "pnpm --filter internet-header dev", "header:build": "pnpm --filter internet-header build", "header:test": "pnpm --filter internet-header test", "header:unit": "pnpm --filter internet-header unit", "header:unit:watch": "pnpm --filter internet-header unit:watch", - "header:e2e": "start-server-and-test docs:headless 9300 'pnpm --filter internet-header e2e'", - "header:e2e:watch": "start-server-and-test docs:headless 9300 'pnpm --filter internet-header e2e:watch'", - "header:snapshots": "start-server-and-test docs:headless 9300 'pnpm --filter internet-header snapshots'", + "header:e2e": "start-server-and-test docs:headless 9001 'pnpm --filter internet-header e2e'", + "header:e2e:watch": "start-server-and-test docs:headless 9001 'pnpm --filter internet-header e2e:watch'", + "header:snapshots": "start-server-and-test docs:headless 9001 'pnpm --filter internet-header snapshots'", + "intranet-header:start": "pnpm --filter design-system-intranet-header-workspace start", "icons:start": "pnpm --filter design-system-icons dev", "icons:test": "pnpm --filter design-system-icons test", "icons:unit": "pnpm --filter design-system-icons test", @@ -75,6 +77,23 @@ "react-dom": ">=18", "stylelint": ">=15" } + }, + "overrides": { + "platform@0.4.0 ≤ Version ≤ 1.3.5": "", + "merge@< 2.1.1": "2.1.1", + "glob-parent@< 5.1.2": "5.1.2", + "platform@1.3.3": "", + "jsbn@≤ 1.1.0": "", + "ejs@3.1.9": "", + "semver@< 5.7.2||6.0.0 ≤ Version < 6.3.1||7.0.0 ≤ Version < 7.5.2": "5.7.2||6.3.1||7.5.2", + "@babel/traverse@< 7.23.2||8.0.0-alpha.0 ≤ Version < 8.0.0-alpha.4": "7.23.2||8.0.0-alpha.4", + "merge@<2.1.1": ">=2.1.1", + "glob-parent@<5.1.2": ">=5.1.2", + "socket.io-parser@>=4.0.4 <4.2.3": ">=4.2.3", + "semver@<5.7.2": ">=5.7.2", + "semver@>=7.0.0 <7.5.2": ">=7.5.2", + "postcss@<8.4.31": ">=8.4.31", + "@babel/traverse@<7.23.2": ">=7.23.2" } } } diff --git a/packages/components/cypress.config.js b/packages/components/cypress.config.js index 85b0c1e71b..2de9de6719 100644 --- a/packages/components/cypress.config.js +++ b/packages/components/cypress.config.js @@ -2,7 +2,7 @@ const { defineConfig } = require('cypress'); module.exports = defineConfig({ e2e: { - baseUrl: 'http://localhost:9300', + baseUrl: 'http://localhost:9001', specPattern: ['cypress/e2e/**/*.cy.{ts,tsx}'], includeShadowDom: true, viewportWidth: 1024, diff --git a/packages/components/package.json b/packages/components/package.json index 53bdc4cbd4..827b01bbc3 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -24,7 +24,7 @@ "linkDirectory": true }, "scripts": { - "dev": "stencil build --serve --watch --docs-readme", + "dev": "stencil build --serve --port 9200 --watch --docs-readme", "start": "stencil build --watch --docs-readme", "build": "stencil build --docs-readme", "clean": "rimraf www dist loader", diff --git a/packages/demo/README.md b/packages/demo/README.md index a256c9e7a8..5fc5f9cfad 100644 --- a/packages/demo/README.md +++ b/packages/demo/README.md @@ -14,7 +14,7 @@ These contribution guidelines extend the [general contribution guidelines](../.. npm start ``` -The default URL is [`http://localhost:9000/`](http://localhost:9000/). The app will automatically reload if you change any of the source files. +The default URL is [`http://localhost:9010/`](http://localhost:9010/). The app will automatically reload if you change any of the source files. ## Code scaffolding diff --git a/packages/demo/package.json b/packages/demo/package.json index 6518584b52..ab1a2789c2 100644 --- a/packages/demo/package.json +++ b/packages/demo/package.json @@ -7,7 +7,7 @@ "private": true, "scripts": { "clean": "rimraf dist", - "start": "ng serve --port 9000", + "start": "ng serve --port 9010", "build": "ng build", "lint": "ng lint" }, diff --git a/packages/documentation/cypress.config.js b/packages/documentation/cypress.config.js index 85b0c1e71b..2de9de6719 100644 --- a/packages/documentation/cypress.config.js +++ b/packages/documentation/cypress.config.js @@ -2,7 +2,7 @@ const { defineConfig } = require('cypress'); module.exports = defineConfig({ e2e: { - baseUrl: 'http://localhost:9300', + baseUrl: 'http://localhost:9001', specPattern: ['cypress/e2e/**/*.cy.{ts,tsx}'], includeShadowDom: true, viewportWidth: 1024, diff --git a/packages/documentation/cypress.snapshot.config.js b/packages/documentation/cypress.snapshot.config.js index f060334cf2..865d0cb1c9 100644 --- a/packages/documentation/cypress.snapshot.config.js +++ b/packages/documentation/cypress.snapshot.config.js @@ -3,7 +3,7 @@ const { defineConfig } = require('cypress'); module.exports = defineConfig({ projectId: 'f9aegu', e2e: { - baseUrl: 'http://localhost:9300', + baseUrl: 'http://localhost:9001', specPattern: ['cypress/**/*.snapshot.{ts,tsx}'], includeShadowDom: true, viewportWidth: 1024, diff --git a/packages/documentation/package.json b/packages/documentation/package.json index 994e1482e3..439b90f0ef 100644 --- a/packages/documentation/package.json +++ b/packages/documentation/package.json @@ -16,8 +16,8 @@ "private": true, "scripts": { "prebuild:managerui": "sass --update --load-path=node_modules .storybook/styles/manager.scss public/manager/ui.css", - "start": "pnpm clean & pnpm prebuild:managerui --style=expanded & storybook dev -p 9200 --quiet --docs", - "start:headless": "pnpm clean & pnpm prebuild:managerui --style=expanded & storybook dev -p 9300 --quiet --no-open --docs", + "start": "pnpm clean & pnpm prebuild:managerui --style=expanded & storybook dev -p 9000 --quiet --docs", + "start:headless": "pnpm clean & pnpm prebuild:managerui --style=expanded & storybook dev -p 9001 --quiet --no-open --docs", "build": "pnpm clean & pnpm prebuild:managerui --style=compressed --no-source-map & storybook build --quiet --docs", "clean": "rimraf storybook-static public/manager", "e2e": "cypress run", diff --git a/packages/documentation/public/assets/config/test-configuration.json b/packages/documentation/public/assets/config/test-configuration.json index fc32740863..bf83d4edbe 100644 --- a/packages/documentation/public/assets/config/test-configuration.json +++ b/packages/documentation/public/assets/config/test-configuration.json @@ -71,7 +71,7 @@ }, "search": { "isSearchHidden": false, - "searchPageUrl": "http://localhost:9300/de/pages/suche", + "searchPageUrl": "http://localhost:9001/de/pages/suche", "redirectPattern": "^[A-Za-z0-9.]{11,23}$", "searchBoxSuggestionsThreshold": "0", "searchBoxSuggestionsAllNumber": "0", diff --git a/packages/icons/package.json b/packages/icons/package.json index 0dce944714..9947485419 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -21,7 +21,7 @@ ], "private": false, "scripts": { - "dev": "http-server ./public -o -a localhost -p 9005", + "dev": "http-server ./public -o -a localhost -p 9330", "fetchSVGs": "ts-node src/index.ts", "test": "jest", "test:watch": "jest --watch", diff --git a/packages/internet-header/cypress.config.js b/packages/internet-header/cypress.config.js index 85b0c1e71b..2de9de6719 100644 --- a/packages/internet-header/cypress.config.js +++ b/packages/internet-header/cypress.config.js @@ -2,7 +2,7 @@ const { defineConfig } = require('cypress'); module.exports = defineConfig({ e2e: { - baseUrl: 'http://localhost:9300', + baseUrl: 'http://localhost:9001', specPattern: ['cypress/e2e/**/*.cy.{ts,tsx}'], includeShadowDom: true, viewportWidth: 1024, diff --git a/packages/internet-header/cypress/fixtures/internet-header/test-configuration.json b/packages/internet-header/cypress/fixtures/internet-header/test-configuration.json index 8c9e20df91..65e5f7a3f2 100644 --- a/packages/internet-header/cypress/fixtures/internet-header/test-configuration.json +++ b/packages/internet-header/cypress/fixtures/internet-header/test-configuration.json @@ -71,7 +71,7 @@ }, "search": { "isSearchHidden": false, - "searchPageUrl": "http://localhost:9300/de/pages/suche", + "searchPageUrl": "http://localhost:9001/de/pages/suche", "redirectPattern": "^[A-Za-z0-9.]{11,23}$", "searchBoxSuggestionsThreshold": "0", "searchBoxSuggestionsAllNumber": "0", diff --git a/packages/internet-header/package.json b/packages/internet-header/package.json index fb86d87f49..4e177df655 100644 --- a/packages/internet-header/package.json +++ b/packages/internet-header/package.json @@ -27,7 +27,7 @@ "loader/" ], "scripts": { - "dev": "stencil build --serve --watch --docs-readme", + "dev": "stencil build --serve --port 9310 --watch --docs-readme", "start": "stencil build --watch --docs-readme", "build": "stencil build --docs-readme", "clean": "rimraf www dist loader", diff --git a/packages/intranet-header-workspace/.gitignore b/packages/intranet-header-workspace/.gitignore index 0711527ef9..32adfc53ea 100644 --- a/packages/intranet-header-workspace/.gitignore +++ b/packages/intranet-header-workspace/.gitignore @@ -12,6 +12,7 @@ npm-debug.log yarn-error.log # IDEs and editors +.vscode/ .idea/ .project .classpath diff --git a/packages/intranet-header-workspace/README.md b/packages/intranet-header-workspace/README.md index 58261578e9..9d85f3242b 100644 --- a/packages/intranet-header-workspace/README.md +++ b/packages/intranet-header-workspace/README.md @@ -1,8 +1,8 @@ -# Angular Components +# Intranet-Header-Workspace This is the wrapper package for any Angular related components in the Design System. This package itself is not published anywhere. -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.2.5. +This project was generated with [Angular CLI](https://github.com/angular/angular-cli). ## Setup @@ -10,7 +10,7 @@ These guidelines extend the [general contribution guidelines](../../CONTRIBUTING ## Development server -Run `ng serve` for a dev server. Navigate to `http://localhost:9001/`. The app will automatically reload if you change any of the source files. +Run `npm run start` for a dev server. Navigate to `http://localhost:9320/`. The app will automatically reload if you change any of the source files. ## Code scaffolding diff --git a/packages/intranet-header-workspace/package.json b/packages/intranet-header-workspace/package.json index bb26939dc2..14b7de2656 100644 --- a/packages/intranet-header-workspace/package.json +++ b/packages/intranet-header-workspace/package.json @@ -5,7 +5,7 @@ "private": true, "scripts": { "clean": "rimraf dist", - "start": "ng serve --port 9001", + "start": "ng serve --port 9320", "build": "ng build intranet-header", "lint": "ng lint" }, diff --git a/packages/styles/cypress.config.js b/packages/styles/cypress.config.js index 85b0c1e71b..2de9de6719 100644 --- a/packages/styles/cypress.config.js +++ b/packages/styles/cypress.config.js @@ -2,7 +2,7 @@ const { defineConfig } = require('cypress'); module.exports = defineConfig({ e2e: { - baseUrl: 'http://localhost:9300', + baseUrl: 'http://localhost:9001', specPattern: ['cypress/e2e/**/*.cy.{ts,tsx}'], includeShadowDom: true, viewportWidth: 1024, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b3ec445dd4..d4f57458fa 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -4,6 +4,23 @@ settings: autoInstallPeers: true excludeLinksFromLockfile: false +overrides: + platform@0.4.0 ≤ Version ≤ 1.3.5: '' + merge@< 2.1.1: 2.1.1 + glob-parent@< 5.1.2: 5.1.2 + platform@1.3.3: '' + jsbn@≤ 1.1.0: '' + ejs@3.1.9: '' + semver@< 5.7.2||6.0.0 ≤ Version < 6.3.1||7.0.0 ≤ Version < 7.5.2: 5.7.2||6.3.1||7.5.2 + '@babel/traverse@< 7.23.2||8.0.0-alpha.0 ≤ Version < 8.0.0-alpha.4': 7.23.2||8.0.0-alpha.4 + merge@<2.1.1: '>=2.1.1' + glob-parent@<5.1.2: '>=5.1.2' + socket.io-parser@>=4.0.4 <4.2.3: '>=4.2.3' + semver@<5.7.2: '>=5.7.2' + semver@>=7.0.0 <7.5.2: '>=7.5.2' + postcss@<8.4.31: '>=8.4.31' + '@babel/traverse@<7.23.2': '>=7.23.2' + importers: .: @@ -943,7 +960,7 @@ packages: '@ngtools/webpack': 16.2.3(@angular/compiler-cli@16.2.6)(typescript@4.9.5)(webpack@5.88.2) '@vitejs/plugin-basic-ssl': 1.0.1(vite@4.4.7) ansi-colors: 4.1.3 - autoprefixer: 10.4.14(postcss@8.4.27) + autoprefixer: 10.4.14(postcss@8.4.31) babel-loader: 9.1.3(@babel/core@7.22.9)(webpack@5.88.2) babel-plugin-istanbul: 6.1.1 browserslist: 4.21.10 @@ -972,8 +989,8 @@ packages: parse5-html-rewriting-stream: 7.0.0 picomatch: 2.3.1 piscina: 4.0.0 - postcss: 8.4.27 - postcss-loader: 7.3.3(postcss@8.4.27)(webpack@5.88.2) + postcss: 8.4.31 + postcss-loader: 7.3.3(postcss@8.4.31)(webpack@5.88.2) resolve-url-loader: 5.0.0 rxjs: 7.8.1 sass: 1.64.1 @@ -1068,7 +1085,7 @@ packages: '@ngtools/webpack': 16.2.3(@angular/compiler-cli@16.2.6)(typescript@4.9.5)(webpack@5.88.2) '@vitejs/plugin-basic-ssl': 1.0.1(vite@4.4.7) ansi-colors: 4.1.3 - autoprefixer: 10.4.14(postcss@8.4.27) + autoprefixer: 10.4.14(postcss@8.4.31) babel-loader: 9.1.3(@babel/core@7.22.9)(webpack@5.88.2) babel-plugin-istanbul: 6.1.1 browserslist: 4.21.10 @@ -1096,8 +1113,8 @@ packages: parse5-html-rewriting-stream: 7.0.0 picomatch: 2.3.1 piscina: 4.0.0 - postcss: 8.4.27 - postcss-loader: 7.3.3(postcss@8.4.27)(webpack@5.88.2) + postcss: 8.4.31 + postcss-loader: 7.3.3(postcss@8.4.31)(webpack@5.88.2) resolve-url-loader: 5.0.0 rxjs: 7.8.1 sass: 1.64.1 @@ -1616,7 +1633,7 @@ packages: '@babel/helpers': 7.22.15 '@babel/parser': 7.22.16 '@babel/template': 7.22.15 - '@babel/traverse': 7.22.20 + '@babel/traverse': 7.23.2 '@babel/types': 7.22.19 convert-source-map: 1.9.0 debug: 4.3.4(supports-color@8.1.1) @@ -1639,7 +1656,7 @@ packages: '@babel/helpers': 7.22.11 '@babel/parser': 7.22.11 '@babel/template': 7.22.15 - '@babel/traverse': 7.22.11 + '@babel/traverse': 7.23.2 '@babel/types': 7.22.11 convert-source-map: 1.9.0 debug: 4.3.4(supports-color@8.1.1) @@ -1661,7 +1678,7 @@ packages: '@babel/helpers': 7.22.15 '@babel/parser': 7.22.16 '@babel/template': 7.22.15 - '@babel/traverse': 7.22.20 + '@babel/traverse': 7.23.2 '@babel/types': 7.22.19 convert-source-map: 1.9.0 debug: 4.3.4(supports-color@8.1.1) @@ -1691,6 +1708,15 @@ packages: jsesc: 2.5.2 dev: true + /@babel/generator@7.23.0: + resolution: {integrity: sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/types': 7.23.0 + '@jridgewell/gen-mapping': 0.3.3 + '@jridgewell/trace-mapping': 0.3.18 + jsesc: 2.5.2 + /@babel/helper-annotate-as-pure@7.22.5: resolution: {integrity: sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==} engines: {node: '>=6.9.0'} @@ -1826,12 +1852,20 @@ packages: dependencies: '@babel/template': 7.22.15 '@babel/types': 7.22.19 + dev: true + + /@babel/helper-function-name@7.23.0: + resolution: {integrity: sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/template': 7.22.15 + '@babel/types': 7.23.0 /@babel/helper-hoist-variables@7.22.5: resolution: {integrity: sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.22.19 + '@babel/types': 7.23.0 /@babel/helper-member-expression-to-functions@7.22.5: resolution: {integrity: sha512-aBiH1NKMG0H2cGZqspNvsaBe6wNGjbJjuLy29aU+eDZjSbbN53BaxlpB02xm9v34pLTZ1nIQPFYn2qMZoa5BQQ==} @@ -1992,7 +2026,7 @@ packages: engines: {node: '>=6.9.0'} dependencies: '@babel/template': 7.22.15 - '@babel/traverse': 7.22.20 + '@babel/traverse': 7.23.2 '@babel/types': 7.22.19 transitivePeerDependencies: - supports-color @@ -2002,7 +2036,7 @@ packages: engines: {node: '>=6.9.0'} dependencies: '@babel/template': 7.22.15 - '@babel/traverse': 7.22.20 + '@babel/traverse': 7.23.2 '@babel/types': 7.22.19 transitivePeerDependencies: - supports-color @@ -2030,6 +2064,13 @@ packages: dependencies: '@babel/types': 7.22.19 + /@babel/parser@7.23.0: + resolution: {integrity: sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==} + engines: {node: '>=6.0.0'} + hasBin: true + dependencies: + '@babel/types': 7.23.0 + /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.22.5(@babel/core@7.22.20): resolution: {integrity: sha512-NP1M5Rf+u2Gw9qfSO4ihjcTGW5zXTi36ITLd4/EoAcEhIZ0yjMqmftDNl3QC19CX7olhrjpyU454g/2W7X0jvQ==} engines: {node: '>=6.9.0'} @@ -3932,35 +3973,18 @@ packages: '@babel/types': 7.22.19 dev: true - /@babel/traverse@7.22.11: - resolution: {integrity: sha512-mzAenteTfomcB7mfPtyi+4oe5BZ6MXxWcn4CX+h4IRJ+OOGXBrWU6jDQavkQI9Vuc5P+donFabBfFCcmWka9lQ==} + /@babel/traverse@7.23.2: + resolution: {integrity: sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==} engines: {node: '>=6.9.0'} dependencies: '@babel/code-frame': 7.22.13 - '@babel/generator': 7.22.15 - '@babel/helper-environment-visitor': 7.22.20 - '@babel/helper-function-name': 7.22.5 - '@babel/helper-hoist-variables': 7.22.5 - '@babel/helper-split-export-declaration': 7.22.6 - '@babel/parser': 7.22.16 - '@babel/types': 7.22.19 - debug: 4.3.4(supports-color@8.1.1) - globals: 11.12.0 - transitivePeerDependencies: - - supports-color - - /@babel/traverse@7.22.20: - resolution: {integrity: sha512-eU260mPZbU7mZ0N+X10pxXhQFMGTeLb9eFS0mxehS8HZp9o1uSnFeWQuG1UPrlxgA7QoUzFhOnilHDp0AXCyHw==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/code-frame': 7.22.13 - '@babel/generator': 7.22.15 + '@babel/generator': 7.23.0 '@babel/helper-environment-visitor': 7.22.20 - '@babel/helper-function-name': 7.22.5 + '@babel/helper-function-name': 7.23.0 '@babel/helper-hoist-variables': 7.22.5 '@babel/helper-split-export-declaration': 7.22.6 - '@babel/parser': 7.22.16 - '@babel/types': 7.22.19 + '@babel/parser': 7.23.0 + '@babel/types': 7.23.0 debug: 4.3.4(supports-color@8.1.1) globals: 11.12.0 transitivePeerDependencies: @@ -3982,6 +4006,14 @@ packages: '@babel/helper-validator-identifier': 7.22.20 to-fast-properties: 2.0.0 + /@babel/types@7.23.0: + resolution: {integrity: sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/helper-string-parser': 7.22.5 + '@babel/helper-validator-identifier': 7.22.20 + to-fast-properties: 2.0.0 + /@bcoe/v8-coverage@0.2.3: resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==} dev: true @@ -7307,7 +7339,7 @@ packages: dependencies: '@babel/generator': 7.22.15 '@babel/parser': 7.22.16 - '@babel/traverse': 7.22.20 + '@babel/traverse': 7.23.2 '@babel/types': 7.22.19 '@storybook/csf': 0.1.0 '@storybook/types': 7.4.5 @@ -9130,19 +9162,19 @@ packages: hasBin: true dev: true - /autoprefixer@10.4.14(postcss@8.4.27): + /autoprefixer@10.4.14(postcss@8.4.31): resolution: {integrity: sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==} engines: {node: ^10 || ^12 || >=14} hasBin: true peerDependencies: - postcss: ^8.1.0 + postcss: '>=8.4.31' dependencies: browserslist: 4.21.10 caniuse-lite: 1.0.30001538 fraction.js: 4.3.6 normalize-range: 0.1.2 picocolors: 1.0.0 - postcss: 8.4.27 + postcss: 8.4.31 postcss-value-parser: 4.2.0 dev: true @@ -9151,7 +9183,7 @@ packages: engines: {node: ^10 || ^12 || >=14} hasBin: true peerDependencies: - postcss: ^8.1.0 + postcss: '>=8.4.31' dependencies: browserslist: 4.21.10 caniuse-lite: 1.0.30001538 @@ -9942,7 +9974,7 @@ packages: anymatch: 2.0.0 async-each: 1.0.6 braces: 2.3.2 - glob-parent: 3.1.0 + glob-parent: 6.0.2 inherits: 2.0.4 is-binary-path: 1.0.1 is-glob: 4.0.3 @@ -10451,7 +10483,7 @@ packages: dependencies: nice-try: 1.0.5 path-key: 2.0.1 - semver: 5.7.1 + semver: 7.5.4 shebang-command: 1.2.0 which: 1.3.1 dev: true @@ -11960,7 +11992,7 @@ packages: /exec-sh@0.2.2: resolution: {integrity: sha512-FIUCJz1RbuS0FKTdaAafAByGS0CPvU3R0MeHxgtl+djzCc//F8HakL8GzmVNZanasTbTAY/3DRFA0KpVqj/eAw==} dependencies: - merge: 1.2.1 + merge: 2.1.1 dev: false /execa@4.1.0: @@ -12824,13 +12856,6 @@ packages: resolution: {integrity: sha512-wIh+gKBI9Nshz2o46B0B3f5k/W+WI9ZAv6y5Dn5WJ5SK1t0TnDimB4WE5rmTD05ZAIn8HALCZVmCsvj0w0v0lw==} dev: true - /glob-parent@3.1.0: - resolution: {integrity: sha512-E8Ak/2+dZY6fnzlR7+ueWvhsH1SjHr4jjss4YS/h4py44jY9MhK/VFdaZJAWDz6BbL21KeteKxFSFpq8OS5gVA==} - dependencies: - is-glob: 3.1.0 - path-dirname: 1.0.2 - dev: true - /glob-parent@5.1.2: resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==} engines: {node: '>= 6'} @@ -12850,7 +12875,7 @@ packages: dependencies: extend: 3.0.2 glob: 7.2.3 - glob-parent: 3.1.0 + glob-parent: 6.0.2 is-negated-glob: 1.0.0 ordered-read-streams: 1.0.1 pumpify: 1.5.1 @@ -13109,7 +13134,7 @@ packages: resolution: {integrity: sha512-9QUHam5JyXwGUxaaMvoFQVT44tohpEFpM8xBdPfdwTYGM0AItS1iTQz0MpsF8Jroh7GF5Jt2GVPaYgvy8qD2Fw==} engines: {node: ^10 || ^12 || >=14} peerDependencies: - postcss: ^8.0.0 + postcss: '>=8.4.31' dependencies: fancy-log: 1.3.3 plugin-error: 1.0.1 @@ -13557,7 +13582,7 @@ packages: resolution: {integrity: sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==} engines: {node: ^10 || ^12 || >= 14} peerDependencies: - postcss: ^8.1.0 + postcss: '>=8.4.31' dependencies: postcss: 8.4.31 dev: true @@ -15064,7 +15089,7 @@ packages: '@babel/core': 7.22.20 '@babel/generator': 7.22.15 '@babel/plugin-syntax-typescript': 7.21.4(@babel/core@7.22.20) - '@babel/traverse': 7.22.20 + '@babel/traverse': 7.23.2 '@babel/types': 7.22.19 '@jest/transform': 27.5.1 '@jest/types': 27.5.1 @@ -16031,7 +16056,7 @@ packages: engines: {node: '>=6'} dependencies: pify: 4.0.1 - semver: 5.7.1 + semver: 7.5.4 dev: true /make-dir@3.1.0: @@ -16249,8 +16274,8 @@ packages: resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==} engines: {node: '>= 8'} - /merge@1.2.1: - resolution: {integrity: sha512-VjFo4P5Whtj4vsLzsYBu5ayHhoHJ0UqNm7ibvShmbmoz7tGi0vXaoJbGdB+GmDMLUdg8DpQXEIeVDAe8MaABvQ==} + /merge@2.1.1: + resolution: {integrity: sha512-jz+Cfrg9GWOZbQAnDQ4hlVnQky+341Yk5ru8bZSe6sIDTCIg8n9i/u7hSQGSVOF3C7lH6mGtqjkiT9G4wFLL0w==} dev: false /methods@1.1.2: @@ -16799,7 +16824,7 @@ packages: dependencies: hosted-git-info: 2.8.9 resolve: 1.22.3 - semver: 5.7.1 + semver: 7.5.4 validate-npm-package-license: 3.0.4 dev: true @@ -17466,10 +17491,6 @@ packages: engines: {node: '>=0.10.0'} dev: true - /path-dirname@1.0.2: - resolution: {integrity: sha512-ALzNPpyNq9AqXMBjeymIjFDAkAFH06mHJH/cSBHAgU0s4vfpBn6b2nf8tiRLvagKD8RbTpq2FKTBg7cl9l3c7Q==} - dev: true - /path-exists@2.1.0: resolution: {integrity: sha512-yTltuKuhtNeFJKa1PiRzfLAU5182q1y4Eb4XCJ3PBqyzEDkAZRzBrKKBct682ls9reBVHf9udYLN5Nd+K1B9BQ==} engines: {node: '>=0.10.0'} @@ -17734,7 +17755,7 @@ packages: resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==} engines: {node: '>= 10'} peerDependencies: - postcss: '>=8.0.9' + postcss: '>=8.4.31' ts-node: '>=9.0.0' peerDependenciesMeta: postcss: @@ -17747,16 +17768,16 @@ packages: yaml: 1.10.2 dev: true - /postcss-loader@7.3.3(postcss@8.4.27)(webpack@5.88.2): + /postcss-loader@7.3.3(postcss@8.4.31)(webpack@5.88.2): resolution: {integrity: sha512-YgO/yhtevGO/vJePCQmTxiaEwER94LABZN0ZMT4A0vsak9TpO+RvKRs7EmJ8peIlB9xfXCsS7M8LjqncsUZ5HA==} engines: {node: '>= 14.15.0'} peerDependencies: - postcss: ^7.0.0 || ^8.0.1 + postcss: '>=8.4.31' webpack: ^5.0.0 dependencies: cosmiconfig: 8.2.0 jiti: 1.20.0 - postcss: 8.4.27 + postcss: 8.4.31 semver: 7.5.4 webpack: 5.88.2(esbuild@0.18.17) dev: true @@ -17769,7 +17790,7 @@ packages: resolution: {integrity: sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==} engines: {node: ^10 || ^12 || >= 14} peerDependencies: - postcss: ^8.1.0 + postcss: '>=8.4.31' dependencies: postcss: 8.4.31 dev: true @@ -17778,7 +17799,7 @@ packages: resolution: {integrity: sha512-2/u2zraspoACtrbFRnTijMiQtb4GW4BvatjaG/bCjYQo8kLTdevCUlwuBHx2sCnSyrI3x3qj4ZK1j5LQBgzmwA==} engines: {node: ^10 || ^12 || >= 14} peerDependencies: - postcss: ^8.1.0 + postcss: '>=8.4.31' dependencies: icss-utils: 5.1.0(postcss@8.4.31) postcss: 8.4.31 @@ -17790,7 +17811,7 @@ packages: resolution: {integrity: sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==} engines: {node: ^10 || ^12 || >= 14} peerDependencies: - postcss: ^8.1.0 + postcss: '>=8.4.31' dependencies: postcss: 8.4.31 postcss-selector-parser: 6.0.13 @@ -17800,7 +17821,7 @@ packages: resolution: {integrity: sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==} engines: {node: ^10 || ^12 || >= 14} peerDependencies: - postcss: ^8.1.0 + postcss: '>=8.4.31' dependencies: icss-utils: 5.1.0(postcss@8.4.31) postcss: 8.4.31 @@ -17814,7 +17835,7 @@ packages: resolution: {integrity: sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==} engines: {node: '>=12.0'} peerDependencies: - postcss: ^8.3.3 + postcss: '>=8.4.31' dependencies: postcss: 8.4.31 dev: true @@ -17823,7 +17844,7 @@ packages: resolution: {integrity: sha512-Cr0X8Eu7xMhE96PJck6ses/uVVXDtE5ghUTKNUYgm8ozgP2TkgV3LWs3WgLV1xaSSLq8ZFiXaUrj0LVgG1fGEA==} engines: {node: '>=12.0'} peerDependencies: - postcss: ^8.4.29 + postcss: '>=8.4.31' dependencies: postcss: 8.4.31 dev: true @@ -17839,7 +17860,7 @@ packages: /postcss-sorting@7.0.1(postcss@8.4.31): resolution: {integrity: sha512-iLBFYz6VRYyLJEJsBJ8M3TCqNcckVzz4wFounSc5Oez35ogE/X+aoC5fFu103Ot7NyvjU3/xqIXn93Gp3kJk4g==} peerDependencies: - postcss: ^8.3.9 + postcss: '>=8.4.31' dependencies: postcss: 8.4.31 dev: true @@ -17848,7 +17869,7 @@ packages: resolution: {integrity: sha512-FUzyxfI5l2tKmXdYc6VTu3TWZsInayEKPbiyW+P6vmmIrrb4I6CGX0BFoewgYHLK+oIL5FECEK02REYRpBvUCw==} engines: {node: '>=10'} peerDependencies: - postcss: ^8.0.0 + postcss: '>=8.4.31' dependencies: make-dir: 3.1.0 mime: 2.5.2 @@ -17861,15 +17882,6 @@ packages: resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==} dev: true - /postcss@8.4.27: - resolution: {integrity: sha512-gY/ACJtJPSmUFPDCHtX78+01fHa64FaU4zaaWfuh1MhGJISufJAH4cun6k/8fwsHYeK4UQmENQK+tRLCFJE8JQ==} - engines: {node: ^10 || ^12 || >=14} - dependencies: - nanoid: 3.3.6 - picocolors: 1.0.0 - source-map-js: 1.0.2 - dev: true - /postcss@8.4.31: resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==} engines: {node: ^10 || ^12 || >=14} @@ -19031,23 +19043,10 @@ packages: sver-compat: 1.5.0 dev: true - /semver@5.7.1: - resolution: {integrity: sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==} - hasBin: true - dev: true - /semver@6.3.1: resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==} hasBin: true - /semver@7.5.1: - resolution: {integrity: sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==} - engines: {node: '>=10'} - hasBin: true - dependencies: - lru-cache: 6.0.0 - dev: true - /semver@7.5.3: resolution: {integrity: sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==} engines: {node: '>=10'} @@ -19311,8 +19310,8 @@ packages: - utf-8-validate dev: true - /socket.io-parser@4.2.2: - resolution: {integrity: sha512-DJtziuKypFkMMHCm2uIshOYC7QaylbtzQwiMYDuCKy3OPkjLzu4B2vAhTlqipRHHzrI0NJeBAizTK7X+6m1jVw==} + /socket.io-parser@4.2.4: + resolution: {integrity: sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==} engines: {node: '>=10.0.0'} dependencies: '@socket.io/component-emitter': 3.1.0 @@ -19330,7 +19329,7 @@ packages: debug: 4.3.4(supports-color@8.1.1) engine.io: 6.4.2 socket.io-adapter: 2.5.2 - socket.io-parser: 4.2.2 + socket.io-parser: 4.2.4 transitivePeerDependencies: - bufferutil - supports-color @@ -19831,7 +19830,7 @@ packages: resolution: {integrity: sha512-N06PsVsrgKijQ3YT5hqKA7x3NUkgELTRI1cbWMqcYiCGG6MjzvNk6Cb5YYA1PrvrksBV76BvY9P9bAswojVMqA==} engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} peerDependencies: - postcss: ^8.3.3 + postcss: '>=8.4.31' stylelint: ^14.0.1 || >=15 dependencies: postcss: 8.4.31 @@ -20393,7 +20392,7 @@ packages: json5: 2.2.3 lodash.memoize: 4.1.2 make-error: 1.3.6 - semver: 7.5.1 + semver: 7.5.4 typescript: 4.9.5 yargs-parser: 20.2.9 dev: true From 644616125170655c43410946266170f676760765 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lo=C3=AFc=20F=C3=BCrhoff?= <12294151+imagoiq@users.noreply.github.com> Date: Tue, 31 Oct 2023 11:07:43 +0100 Subject: [PATCH 2/3] chore(components, internet-header): 2080 Upgrade to Stencil 4 (#2116) Fixes #2080 --- .changeset/silly-kids-live.md | 6 +++ packages/components/package.json | 4 +- packages/components/src/components.d.ts | 22 ++++++++++ packages/components/tsconfig.json | 17 ++++++-- packages/internet-header/package.json | 6 +-- packages/internet-header/src/components.d.ts | 46 ++++++++++++++++++++ pnpm-lock.yaml | 44 +++++++++---------- 7 files changed, 114 insertions(+), 31 deletions(-) create mode 100644 .changeset/silly-kids-live.md diff --git a/.changeset/silly-kids-live.md b/.changeset/silly-kids-live.md new file mode 100644 index 0000000000..573d7f8f57 --- /dev/null +++ b/.changeset/silly-kids-live.md @@ -0,0 +1,6 @@ +--- +'@swisspost/internet-header': major +'@swisspost/design-system-components': major +--- + +Upgraded builder Stenciljs from version 3 to 4. diff --git a/packages/components/package.json b/packages/components/package.json index 827b01bbc3..2bbf6343c2 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -39,7 +39,7 @@ "dependencies": { "@floating-ui/dom": "1.5.1", "@oddbird/popover-polyfill": "0.2.2", - "@stencil/core": "3.4.2", + "@stencil/core": "4.6.0", "@swisspost/design-system-styles": "workspace:6.4.2", "ally.js": "1.4.1", "long-press-event": "2.4.6" @@ -49,7 +49,7 @@ "@percy/cypress": "3.1.2", "@stencil-community/eslint-plugin": "0.5.0", "@stencil/react-output-target": "0.5.3", - "@stencil/sass": "3.0.5", + "@stencil/sass": "3.0.7", "@types/jest": "27.5.2", "@typescript-eslint/eslint-plugin": "5.62.0", "@typescript-eslint/parser": "5.62.0", diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts index fe6f0afa76..c95142495b 100644 --- a/packages/components/src/components.d.ts +++ b/packages/components/src/components.d.ts @@ -144,7 +144,18 @@ export interface PostTabsCustomEvent extends CustomEvent { target: HTMLPostTabsElement; } declare global { + interface HTMLPostAlertElementEventMap { + "dismissed": void; + } interface HTMLPostAlertElement extends Components.PostAlert, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLPostAlertElement, ev: PostAlertCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLPostAlertElement, ev: PostAlertCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLPostAlertElement: { prototype: HTMLPostAlertElement; @@ -177,7 +188,18 @@ declare global { prototype: HTMLPostTabPanelElement; new (): HTMLPostTabPanelElement; }; + interface HTMLPostTabsElementEventMap { + "tabChange": HTMLPostTabPanelElement['name']; + } interface HTMLPostTabsElement extends Components.PostTabs, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLPostTabsElement, ev: PostTabsCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLPostTabsElement, ev: PostTabsCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLPostTabsElement: { prototype: HTMLPostTabsElement; diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json index ad921dfef0..46d74c1d44 100644 --- a/packages/components/tsconfig.json +++ b/packages/components/tsconfig.json @@ -4,7 +4,10 @@ "allowUnreachableCode": false, "declaration": false, "experimentalDecorators": true, - "lib": ["dom", "es2017"], + "lib": [ + "dom", + "es2017" + ], "moduleResolution": "node", "module": "esnext", "target": "es2017", @@ -12,8 +15,14 @@ "noUnusedParameters": true, "jsx": "react", "jsxFactory": "h", - "resolveJsonModule": true + "resolveJsonModule": true, + "skipLibCheck": true }, - "include": ["src"], - "exclude": ["node_modules", "**/tests"] + "include": [ + "src" + ], + "exclude": [ + "node_modules", + "**/tests" + ] } diff --git a/packages/internet-header/package.json b/packages/internet-header/package.json index 4e177df655..ff3a125648 100644 --- a/packages/internet-header/package.json +++ b/packages/internet-header/package.json @@ -41,8 +41,8 @@ "generate": "stencil generate" }, "dependencies": { - "@stencil/core": "3.4.2", - "@stencil/store": "2.0.9", + "@stencil/core": "4.6.0", + "@stencil/store": "2.0.11", "@swisspost/design-system-styles": "workspace:6.4.2", "body-scroll-lock": "4.0.0-beta.0", "iframe-resizer": "4.3.7", @@ -56,7 +56,7 @@ "@percy/cli": "1.27.2", "@percy/cypress": "3.1.2", "@stencil-community/eslint-plugin": "0.5.0", - "@stencil/sass": "3.0.5", + "@stencil/sass": "3.0.7", "@types/body-scroll-lock": "3.1.0", "@types/iframe-resizer": "3.5.9", "@types/jest": "27.5.2", diff --git a/packages/internet-header/src/components.d.ts b/packages/internet-header/src/components.d.ts index bcf11dd8e5..fe9426d4bc 100644 --- a/packages/internet-header/src/components.d.ts +++ b/packages/internet-header/src/components.d.ts @@ -185,7 +185,19 @@ declare global { prototype: HTMLPostKlpLoginWidgetElement; new (): HTMLPostKlpLoginWidgetElement; }; + interface HTMLPostLanguageSwitchElementEventMap { + "dropdownToggled": DropdownEvent; + "languageChanged": string; + } interface HTMLPostLanguageSwitchElement extends Components.PostLanguageSwitch, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLPostLanguageSwitchElement, ev: PostLanguageSwitchCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLPostLanguageSwitchElement, ev: PostLanguageSwitchCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLPostLanguageSwitchElement: { prototype: HTMLPostLanguageSwitchElement; @@ -197,7 +209,19 @@ declare global { prototype: HTMLPostLogoElement; new (): HTMLPostLogoElement; }; + interface HTMLPostMainNavigationElementEventMap { + "dropdownToggled": DropdownEvent; + "flyoutToggled": string | null; + } interface HTMLPostMainNavigationElement extends Components.PostMainNavigation, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLPostMainNavigationElement, ev: PostMainNavigationCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLPostMainNavigationElement, ev: PostMainNavigationCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLPostMainNavigationElement: { prototype: HTMLPostMainNavigationElement; @@ -209,7 +233,18 @@ declare global { prototype: HTMLPostMetaNavigationElement; new (): HTMLPostMetaNavigationElement; }; + interface HTMLPostSearchElementEventMap { + "dropdownToggled": DropdownEvent; + } interface HTMLPostSearchElement extends Components.PostSearch, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLPostSearchElement, ev: PostSearchCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLPostSearchElement, ev: PostSearchCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLPostSearchElement: { prototype: HTMLPostSearchElement; @@ -233,7 +268,18 @@ declare global { prototype: HTMLSwisspostInternetFooterElement; new (): HTMLSwisspostInternetFooterElement; }; + interface HTMLSwisspostInternetHeaderElementEventMap { + "headerLoaded": void; + } interface HTMLSwisspostInternetHeaderElement extends Components.SwisspostInternetHeader, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLSwisspostInternetHeaderElement, ev: SwisspostInternetHeaderCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLSwisspostInternetHeaderElement, ev: SwisspostInternetHeaderCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLSwisspostInternetHeaderElement: { prototype: HTMLSwisspostInternetHeaderElement; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d4f57458fa..3425d562a3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -64,8 +64,8 @@ importers: specifier: 0.2.2 version: 0.2.2 '@stencil/core': - specifier: 3.4.2 - version: 3.4.2 + specifier: 4.6.0 + version: 4.6.0 '@swisspost/design-system-styles': specifier: workspace:6.4.2 version: link:../styles/dist @@ -87,10 +87,10 @@ importers: version: 0.5.0(@typescript-eslint/eslint-plugin@5.62.0)(@typescript-eslint/parser@5.62.0)(eslint-plugin-react@7.33.2)(eslint@8.50.0)(typescript@4.9.5) '@stencil/react-output-target': specifier: 0.5.3 - version: 0.5.3(@stencil/core@3.4.2) + version: 0.5.3(@stencil/core@4.6.0) '@stencil/sass': - specifier: 3.0.5 - version: 3.0.5(@stencil/core@3.4.2) + specifier: 3.0.7 + version: 3.0.7(@stencil/core@4.6.0) '@types/jest': specifier: 27.5.2 version: 27.5.2 @@ -536,11 +536,11 @@ importers: packages/internet-header: dependencies: '@stencil/core': - specifier: 3.4.2 - version: 3.4.2 + specifier: 4.6.0 + version: 4.6.0 '@stencil/store': - specifier: 2.0.9 - version: 2.0.9(@stencil/core@3.4.2) + specifier: 2.0.11 + version: 2.0.11(@stencil/core@4.6.0) '@swisspost/design-system-styles': specifier: workspace:6.4.2 version: link:../styles/dist @@ -576,8 +576,8 @@ importers: specifier: 0.5.0 version: 0.5.0(@typescript-eslint/eslint-plugin@5.62.0)(@typescript-eslint/parser@5.62.0)(eslint-plugin-react@7.33.2)(eslint@8.50.0)(typescript@4.9.5) '@stencil/sass': - specifier: 3.0.5 - version: 3.0.5(@stencil/core@3.4.2) + specifier: 3.0.7 + version: 3.0.7(@stencil/core@4.6.0) '@types/body-scroll-lock': specifier: 3.1.0 version: 3.1.0 @@ -6578,35 +6578,35 @@ packages: typescript: 4.9.5 dev: true - /@stencil/core@3.4.2: - resolution: {integrity: sha512-FAUhUVaakCy29nU2GwO/HQBRV1ihPRvncz3PUc8oR+UJLAxGabTmP8PLY7wvHfbw+Cvi4VXfJFTBvdfDu6iKPQ==} - engines: {node: '>=14.10.0', npm: '>=6.0.0'} + /@stencil/core@4.6.0: + resolution: {integrity: sha512-5Y6/fP28aspPDRB+Tz5GuB1jRVGuUEk5/rnyE8ACGcuzEOG+zR0A/IHRJSU3XmCxUlVDKfKoO6St5W84oUCVMA==} + engines: {node: '>=16.0.0', npm: '>=7.10.0'} hasBin: true - /@stencil/react-output-target@0.5.3(@stencil/core@3.4.2): + /@stencil/react-output-target@0.5.3(@stencil/core@4.6.0): resolution: {integrity: sha512-68jwRp35CjAcwhTJ9yFD/3n+jrHOqvEH2jreVuPVvZK+4tkhPlYlwz0d1E1RlF3jyifUSfdkWUGgXIEy8Fo3yw==} peerDependencies: '@stencil/core': '>=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0' dependencies: - '@stencil/core': 3.4.2 + '@stencil/core': 4.6.0 dev: true - /@stencil/sass@3.0.5(@stencil/core@3.4.2): - resolution: {integrity: sha512-9nyllMXOEvHywo6fP2iwXgnq32A+OOUE36Aq7iUjzwT3wdr04qsvupO1JNIyRvmvCDF15hOKXztrZH1/wDu2Zg==} + /@stencil/sass@3.0.7(@stencil/core@4.6.0): + resolution: {integrity: sha512-HcBjrh2CJ6aJnkOrBNSVyf1+x3FnUneYFk44rcx/jDK6Lx7R4w0dXMEsIR5MXqtROYWonZt7WtR8wsM1vcD+6w==} engines: {node: '>=12.0.0', npm: '>=6.0.0'} peerDependencies: '@stencil/core': '>=2.0.0 || >=3.0.0-beta.0 || >= 4.0.0-beta.0 || >= 4.0.0' dependencies: - '@stencil/core': 3.4.2 + '@stencil/core': 4.6.0 dev: true - /@stencil/store@2.0.9(@stencil/core@3.4.2): - resolution: {integrity: sha512-wPVkgOEeOVZ6OGuUy7lV/qYyhj7Ra3vZkebqT58HdkaaAAmaUCtinUG02e05iTQIoOWpN7oNhq/MWvhY7H/Wyw==} + /@stencil/store@2.0.11(@stencil/core@4.6.0): + resolution: {integrity: sha512-iU803qQl8DXR1S6X4xJz6VVNgPnbhktbfLxAGe+Kx0PLJ92lBuiLKpYtPkrZNWwPOOJd3z3uSDz9UGajU4krHg==} engines: {node: '>=12.0.0', npm: '>=6.0.0'} peerDependencies: '@stencil/core': '>=2.0.0 || >=3.0.0 || >= 4.0.0-beta.0 || >= 4.0.0' dependencies: - '@stencil/core': 3.4.2 + '@stencil/core': 4.6.0 dev: false /@storybook/addon-actions@7.4.5(@types/react@18.2.22)(react-dom@18.2.0)(react@18.2.0): From 26d2cc4f2724fefc7cd46835ba43957599006a36 Mon Sep 17 00:00:00 2001 From: Lukas Blaser <141234680+b1aserlu@users.noreply.github.com> Date: Tue, 31 Oct 2023 11:22:36 +0100 Subject: [PATCH 3/3] feat(documentation): adds tabs for multi option code-snippets (#2130) --- .changeset/hip-zoos-grab.md | 5 ++ .../stories/foundation/color/color.docs.mdx | 42 ++++----- .../stories/icons/getting-started.docs.mdx | 85 +++++++++---------- .../internet-header/getting-started.docs.mdx | 40 +++++---- .../intranet-header/intranet-header.docs.mdx | 39 ++++++--- 5 files changed, 117 insertions(+), 94 deletions(-) create mode 100644 .changeset/hip-zoos-grab.md diff --git a/.changeset/hip-zoos-grab.md b/.changeset/hip-zoos-grab.md new file mode 100644 index 0000000000..1b0a3c4985 --- /dev/null +++ b/.changeset/hip-zoos-grab.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-documentation': minor +--- + +Used the new tabs to improve the presentation of some code snippets. diff --git a/packages/documentation/src/stories/foundation/color/color.docs.mdx b/packages/documentation/src/stories/foundation/color/color.docs.mdx index 519c1faf13..95fe2482bf 100644 --- a/packages/documentation/src/stories/foundation/color/color.docs.mdx +++ b/packages/documentation/src/stories/foundation/color/color.docs.mdx @@ -1,5 +1,6 @@ import { Meta, Source } from '@storybook/blocks'; import LinkTo from '@storybook/addon-links/react'; +import { PostTabs, PostTabHeader, PostTabPanel } from '@swisspost/design-system-components-react'; import { forEach } from '../../../utils/react'; import * as ColorStories from './color.stories'; import { ColorSwatch, SCSS_VARIABLES } from './color.blocks'; @@ -18,15 +19,15 @@ They theme our elements and components. For accessibility reasons, you should always make sure that your individually created color combinations are sufficiently contrasting. There may be a better solution than coloring elements individually. - For example, use the background utilities to get elements - with a specific background color and the best possible contrast color for its content. +For example, use the background utilities to get elements +with a specific background color and the best possible contrast color for its content. ## Brand colors
- {forEach(SCSS_VARIABLES.brand, function(data) { + {forEach(SCSS_VARIABLES.brand, function (data) { return ; })}
@@ -34,7 +35,7 @@ They theme our elements and components. ## Shades of gray
- {forEach(SCSS_VARIABLES.gray, function(data) { + {forEach(SCSS_VARIABLES.gray, function (data) { return ; })}
@@ -42,7 +43,7 @@ They theme our elements and components. ## Page Backgrounds
- {forEach(SCSS_VARIABLES.pagebackgrounds, function(data) { + {forEach(SCSS_VARIABLES.pagebackgrounds, function (data) { return ; })}
@@ -50,7 +51,7 @@ They theme our elements and components. ## Signal colors
- {forEach(SCSS_VARIABLES.contextual, function(data) { + {forEach(SCSS_VARIABLES.contextual, function (data) { return ; })}
@@ -58,7 +59,7 @@ They theme our elements and components. ## Dark accent colors
- {forEach(SCSS_VARIABLES.accent.dark, function(data) { + {forEach(SCSS_VARIABLES.accent.dark, function (data) { return ; })}
@@ -66,28 +67,27 @@ They theme our elements and components. ## Bright accent colors
- {forEach(SCSS_VARIABLES.accent.bright, function(data) { + {forEach(SCSS_VARIABLES.accent.bright, function (data) { return ; })}
# Usage -## CSS + + CSS + + CSS variables are globally available on your page. -CSS variables are globally available on your page. + - + -## Sass + Sass + + Import the color variables from the `core` file with `@use`. This way, the color variables are scoped and don't mix with your own variables. -Import the color variables from the `core` file with `@use`. This way, the color variables are scoped and don't mix with your own variables. - - + + + diff --git a/packages/documentation/src/stories/icons/getting-started.docs.mdx b/packages/documentation/src/stories/icons/getting-started.docs.mdx index 98280b8b4e..4d3412fbb7 100644 --- a/packages/documentation/src/stories/icons/getting-started.docs.mdx +++ b/packages/documentation/src/stories/icons/getting-started.docs.mdx @@ -1,5 +1,6 @@ import { Meta, Source } from '@storybook/blocks'; import LinkTo from '@storybook/addon-links/react'; +import { PostTabs, PostTabHeader, PostTabPanel } from '@swisspost/design-system-components-react'; import * as GettingStartedStories from './getting-started.stories'; import SampleAngularConfig from './getting-started-angular-config.sample.json?raw'; import SampleNode16 from './getting-started-node-16.7.0.sample.json?raw'; @@ -16,18 +17,27 @@ import SampleIconMeta from './getting-started-icon-meta.sample.html?raw'; The comprehensive collection of Swiss Post icons. ## Installation - - + +{/* prettier-ignore */}
If you want to use our icon component to render the icons (which we strongly recommend), you must also install the{' '} @@ -49,36 +59,25 @@ Read on to find out what the possible solutions look like... It is very easy to serve the icons from the `node_modules` folder directly into your angular application. Just open your `angular.json` file and add the following to the `build.options.assets`: - + ### Copy & paste the icons with a postinstall script Add a `postinstall` script to your `package.json`, to copy & paste the icons to a public folder within your web project.
If you want to know more about pre & post scripts and how they are handled, please read the npm documentation. -#### NodeJS version 16.7.0 or newer - -package.json - - - -#### Older NodeJS versions + + NodeJS version 16.7.0 or newer + + + - - - + Older NodeJS versions + + + + + ### Configure the icons base-path @@ -88,19 +87,17 @@ You can do this with two different solutions: 1. Use the **meta-tag** solution to configure the `base-path` globally for all icons on the page. 2. Use the **base-attribute** solution, to configure the `base-path` on every `icon` component. This can also be used to overwrite the global `base-path` for a single icon. -#### Meta-tag solution (recommended) - - - -#### Base-attribute solution - -`} - language="html" -/> + + Meta-tag solution (recommended) + + + + + Base-attribute solution + + `} language="html"/> + + ## CDN approach diff --git a/packages/documentation/src/stories/internet-header/getting-started.docs.mdx b/packages/documentation/src/stories/internet-header/getting-started.docs.mdx index e158682793..155ee77565 100644 --- a/packages/documentation/src/stories/internet-header/getting-started.docs.mdx +++ b/packages/documentation/src/stories/internet-header/getting-started.docs.mdx @@ -1,4 +1,5 @@ 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'; @@ -42,13 +43,17 @@ When working with Angular or any other framework, the easiest installation metho -#### Lazy-loaded + + Lazy-Loaded + + + - - -#### Bare component - - + Bare Component + + + + ### Include from a CDN @@ -60,14 +65,17 @@ 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 - - - + + Lazy-Loaded + + + + + Bare Component + + + + ## Configuration The Internet Header is built to support the already existing Portal Configuration used for the old Internet Header. @@ -79,7 +87,9 @@ If you're working on a new project, you probably need a new configuration. Pleas href="mailto:digitalconsulting@post.ch" target="_blank" rel="noopener" ->Contact Post Portal Team +> + 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. diff --git a/packages/documentation/src/stories/intranet-header/intranet-header.docs.mdx b/packages/documentation/src/stories/intranet-header/intranet-header.docs.mdx index 308417e887..f95878831f 100644 --- a/packages/documentation/src/stories/intranet-header/intranet-header.docs.mdx +++ b/packages/documentation/src/stories/intranet-header/intranet-header.docs.mdx @@ -1,4 +1,5 @@ import { ArgTypes, Meta, Source } from '@storybook/blocks'; +import { PostTabs, PostTabHeader, PostTabPanel } from '@swisspost/design-system-components-react'; import * as IntranetHeaderStories from './intranet-header.stories'; import SampleUse from './intranet-header-use.sample?raw'; import SampleNavigationBar from './intranet-header-navigation-bar.sample.html?raw'; @@ -22,13 +23,19 @@ The Header Angular component for internal usage. @@ -83,14 +90,18 @@ The Header Angular component for internal usage. ## Examples -### Header with a navigation bar - - - -### Header with a side navigation - - - -### "Postweb" intranet header - - + + Header with a navigation bar + + + + + Header with a side navigation + + + + "Postweb" intranet header + + + +