Merge branch 'main' into 2134-button-group-do-not-have-focus-style-fo…

…r-checkboxradio-variants
swisspost · Nov 14, 2023 · aa46e74 · aa46e74
2 parents bec58d9 + 895bd5b
commit aa46e74
Show file tree

Hide file tree

Showing 59 changed files with 1,083 additions and 399 deletions.
diff --git a/.changeset/clean-dancers-film.md b/.changeset/clean-dancers-film.md
diff --git a/.changeset/fuzzy-forks-type.md b/.changeset/fuzzy-forks-type.md
diff --git a/.changeset/giant-teachers-shout.md b/.changeset/giant-teachers-shout.md
diff --git a/.changeset/gorgeous-clouds-trade.md b/.changeset/gorgeous-clouds-trade.md
diff --git a/.changeset/gorgeous-gorillas-confess.md b/.changeset/gorgeous-gorillas-confess.md
diff --git a/.changeset/mighty-crews-thank.md b/.changeset/mighty-crews-thank.md
diff --git a/.changeset/neat-maps-give.md b/.changeset/neat-maps-give.md
diff --git a/.changeset/tricky-tables-warn.md b/.changeset/tricky-tables-warn.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': minor
+---
+
+Added a documentation page for the `.container` and `.container-fluid` classes.
diff --git a/.changeset/wet-lions-fly.md b/.changeset/wet-lions-fly.md
diff --git a/packages/components-react/CHANGELOG.md b/packages/components-react/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @swisspost/design-system-components-react
 
+## 1.0.22
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-components@1.6.2
+
 ## 1.0.21
 
 ### Patch Changes

diff --git a/packages/components-react/package.json b/packages/components-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components-react",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "license": "Apache-2.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -19,7 +19,7 @@
     "tsc": "tsc -p ."
   },
   "dependencies": {
-    "@swisspost/design-system-components": "workspace:1.6.1"
+    "@swisspost/design-system-components": "workspace:1.6.2"
   },
   "devDependencies": {
     "@types/node": "18.18.8",

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @swisspost/design-system-components
 
+## 1.6.2
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@6.4.4
+
 ## 1.6.1
 
 ### Patch Changes

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components",
-  "version": "1.6.1",
+  "version": "1.6.2",
   "description": "A collection of web components built with Stencil JS for the Swiss Post Design System.",
   "license": "Apache-2.0",
   "main": "loader/index.cjs.js",
@@ -40,7 +40,7 @@
     "@floating-ui/dom": "1.5.3",
     "@oddbird/popover-polyfill": "0.3.1",
     "@stencil/core": "4.7.0",
-    "@swisspost/design-system-styles": "workspace:6.4.3",
+    "@swisspost/design-system-styles": "workspace:6.4.4",
     "ally.js": "1.4.1",
     "long-press-event": "2.4.6"
   },

diff --git a/packages/demo/CHANGELOG.md b/packages/demo/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @swisspost/design-system-demo
 
+## 7.0.4
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@6.4.4
+  - @swisspost/design-system-intranet-header@5.0.4
+
 ## 7.0.3
 
 ### Patch Changes

diff --git a/packages/demo/package.json b/packages/demo/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-demo",
-  "version": "7.0.3",
+  "version": "7.0.4",
   "description": "Pattern documentation, code snippets and implementation guidelines for the Design System Styles.",
   "author": "Swiss Post <[email protected]>",
   "license": "Apache-2.0",
@@ -25,8 +25,8 @@
     "@ng-bootstrap/ng-bootstrap": "15.1.2",
     "@popperjs/core": "2.11.8",
     "@swimlane/ngx-datatable": "20.1.0",
-    "@swisspost/design-system-intranet-header": "workspace:5.0.3",
-    "@swisspost/design-system-styles": "workspace:6.4.3",
+    "@swisspost/design-system-intranet-header": "workspace:5.0.4",
+    "@swisspost/design-system-styles": "workspace:6.4.4",
     "bootstrap": "5.3.2",
     "core-js": "3.33.2",
     "highlight.js": "11.9.0",

diff --git a/packages/demo/src/app/home/home.component.html b/packages/demo/src/app/home/home.component.html
@@ -60,14 +60,81 @@ <h4 class="alert-heading">The Swiss Post Design System is now compatible with An
           rel="noopener"
           target="_blank"
         >
-          Support chanel
+          Support channel
         </a>
         in Teams.
       </p>
     </div>
+    <section>
+      <h3>Compatibility</h3>
 
-    <section class="migration-options mb-huge">
-      <div class="row">
+      <p id="compatibility-desc">List of compatible version numbers with external dependencies.</p>
+
+      <div class="row gx-5 mt-4">
+        <div class="col-md-6 col-sm-12 table-responsive">
+          <h4>Styles</h4>
+          <table aria-describedby="compatibility-desc" class="table caption-top">
+            <caption>Package @swisspost/design-system-styles</caption>
+            <thead>
+              <tr>
+                <th scope="col">Version</th>
+                <th scope="col">Bootstrap</th>
+                <th scope="col">Angular</th>
+                <th scope="col">Ng-Bootstrap</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <th scope="col">5.x</th>
+                <td>5.0</td>
+                <td>14.x</td>
+                <td>13.x</td>
+              </tr>
+              <tr>
+                <th scope="col">6.2</th>
+                <td>5.2</td>
+                <td>15.x</td>
+                <td>14.x</td>
+              </tr>
+              <tr>
+                <th scope="col">6.4</th>
+                <td>5.3</td>
+                <td>16.x</td>
+                <td>15.x</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="col-md-6 col-sm-12 table-responsive">
+          <h4>Common Web Frontend</h4>
+          <table aria-describedby="compatibility-desc" class="table caption-top">
+            <caption>Package @ch-post-common/common-web-frontend</caption>
+            <thead>
+              <tr>
+                <th scope="col">Version</th>
+                <th scope="col">Bootstrap</th>
+                <th scope="col">Angular</th>
+                <th scope="col">Ng-Bootstrap</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <th scope="col">4.x</th>
+                <td>4.6</td>
+                <td>12.x</td>
+                <td>9.x</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </section>
+
+    <section>
+      <h3>Setup for migration instructions</h3>
+      <div class="row migration-options mb-huge">
         <div class="col-md-6">
           <fieldset>
             <legend class="font-curve-small bold">What environment is your application for?</legend>

diff --git a/packages/demo/src/app/intranet-layout/intranet-layout.component.html b/packages/demo/src/app/intranet-layout/intranet-layout.component.html
@@ -9,25 +9,40 @@ <h2 class="bold">Installation</h2>
     <a href="https://angular.io/">Angular</a>
     component and as such, only works with Angular projects.
   </p>
-  <p id="version-support">The supported Angular versions are:</p>
-  <table aria-describedby="version-support" class="table table-sm w-auto mb-regular-r">
-    <thead>
-      <tr>
-        <th scope="col" class="pe-regular">Intranet Header</th>
-        <th scope="col">Angular</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <th scope="row">4.x</th>
-        <td>15.x</td>
-      </tr>
-      <tr>
-        <th scope="row">5.x</th>
-        <td>16.x</td>
-      </tr>
-    </tbody>
-  </table>
+  <div class="table-responsive">
+    <table class="table caption-top mb-regular-r">
+      <caption>List of compatible version numbers with external dependencies.</caption>
+      <thead>
+        <tr>
+          <th scope="col">Intranet-header</th>
+          <th scope="col">Bootstrap</th>
+          <th scope="col">Angular</th>
+          <th scope="col">Ng-Bootstrap</th>
+        </tr>
+      </thead>
+
+      <tbody>
+        <tr>
+          <th scope="row">3.x</th>
+          <td>4.x</td>
+          <td>14.x</td>
+          <td>13.x</td>
+        </tr>
+        <tr>
+          <th scope="row">4.x</th>
+          <td>5.2</td>
+          <td>15.x</td>
+          <td>14.x</td>
+        </tr>
+        <tr>
+          <th scope="row">5.x</th>
+          <td>5.2</td>
+          <td>16.x</td>
+          <td>15.x</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
   <p>Install the latest version of the Intranet Header with:</p>
   <code
     class="block mb-regular-r bash"

diff --git a/packages/documentation/.storybook/preview.ts b/packages/documentation/.storybook/preview.ts
@@ -22,13 +22,13 @@ const preview: Preview = {
         order: [
           'Home',
           'Getting Started',
-          ['Styles', 'Components'],
+          ['Styles', 'Components', 'Compatibility'],
           'Foundations',
           [
             'Typography',
             'Color',
             'Layout',
-            ['Breakpoints', 'Grid', 'Column', 'TODOS'],
+            ['Breakpoints', 'Containers', 'Grid', 'TODOS'],
             'Elevation',
             'Accessibility',
           ],

diff --git a/packages/documentation/CHANGELOG.md b/packages/documentation/CHANGELOG.md
@@ -1,5 +1,22 @@
 # @swisspost/design-system-documentation
 
+## 2.4.0
+
+### Minor Changes
+
+- Added docs page on how to use columns. (by [@davidritter-dotcom](https://github.com/davidritter-dotcom) with [#2062](https://github.com/swisspost/design-system/pull/2062))
+
+### Patch Changes
+
+- Added official way to use label in a floating-label select as a placeholder. (by [@imagoiq](https://github.com/imagoiq) with [#2200](https://github.com/swisspost/design-system/pull/2200))
+
+- Extended the `@swisspost/design-system-components` package getting-started docs page to show multiple ways how it can be used/imported in different project setups. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#2214](https://github.com/swisspost/design-system/pull/2214))
+- Updated dependencies:
+  - @swisspost/internet-header@1.13.0
+  - @swisspost/design-system-styles@6.4.4
+  - @swisspost/design-system-components@1.6.2
+  - @swisspost/design-system-components-react@1.0.22
+
 ## 2.3.1
 
 ### Patch Changes

diff --git a/packages/documentation/cypress/snapshots/components/select.snapshot.ts b/packages/documentation/cypress/snapshots/components/select.snapshot.ts
@@ -6,9 +6,9 @@ describe('Select', () => {
     multiple.forEach(multiple => {
       it(multiple, () => {
         cy.visit(`${SELECTBASEURL}${multiple}`);
+        cy.get('.form-select', { timeout: 30000 }).should('be.visible');
         cy.percySnapshot(`Selects-${multiple}`, { widths: [400] });
       });
     });
-
   });
 });
diff --git a/packages/documentation/package.json b/packages/documentation/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-documentation",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "description": "Swiss Post Design System Documentation.",
   "author": "Swiss Post <[email protected]>",
   "license": "Apache-2.0",
@@ -25,11 +25,11 @@
     "snapshots": "percy exec -- cypress run --config-file ./cypress.snapshot.config.js --record --key 0995e768-43ec-42bd-a127-ff944a2ad8c9"
   },
   "dependencies": {
-    "@swisspost/design-system-components": "workspace:1.6.1",
-    "@swisspost/design-system-components-react": "workspace:1.0.21",
+    "@swisspost/design-system-components": "workspace:1.6.2",
+    "@swisspost/design-system-components-react": "workspace:1.0.22",
     "@swisspost/design-system-icons": "workspace:1.0.14",
-    "@swisspost/design-system-styles": "workspace:6.4.3",
-    "@swisspost/internet-header": "workspace:1.12.1",
+    "@swisspost/design-system-styles": "workspace:6.4.4",
+    "@swisspost/internet-header": "workspace:1.13.0",
     "bootstrap": "5.3.2"
   },
   "devDependencies": {

diff --git a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.docs.mdx b/packages/documentation/src/stories/components/topic-teaser/topic-teaser.docs.mdx
@@ -1,9 +1,12 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks';
 import * as TopicTeaserStories from './topic-teaser.stories';
 import StylesPackageImport from '../../../shared/styles-package-import.mdx';
+import './topic-teaser.styles.scss';
 
 <Meta of={TopicTeaserStories} />
 
+<div className="hide-col-default container">
+
 # Topic Teaser
 
 <div className="lead">
@@ -13,9 +16,14 @@ import StylesPackageImport from '../../../shared/styles-package-import.mdx';
 
 If you use multiple topic teasers on one page, each topic teaser must have a different background.
 
-<Canvas sourceState="shown" of={TopicTeaserStories.Default} />
-<div className="hide-col-default">
+</div>
+
+<Canvas className="topic-teaser-full-width-storybook" of={TopicTeaserStories.Default} />
+
+<div className="hide-col-default container">
   <Controls of={TopicTeaserStories.Default} />
 </div>
 
-<StylesPackageImport components={["topic-teaser"]} />
+<div className="hide-col-default container">
+  <StylesPackageImport components={['topic-teaser']} />
+</div>