Merge branch 'main' into feat/229-component-tabs

.changeset/honest-singers-laugh.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+---
+
+Added the checkbox and radio-button card pattern. These two components are now available in the styles package

.changeset/long-pumpkins-repeat.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Fixed the `.pi-calendar` class not showing an icon in the datepicker.

.changeset/quick-parrots-cover.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': minor
+---
+
+Added a foundation breakpoints docs page.

.changeset/serious-toes-speak.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-demo': patch
+---
+
+Deprecated the `.pi-calendar` class in favor of the `.pi-3203` class to display the calendar icon in the datepicker.

.github/workflows/build-documentation-v7.yaml → .github/workflows/build-documentation-v6.yaml

@@ -10,11 +10,11 @@
 #
 ###
 
-name: Build Documentation V7
+name: Build Documentation V6
 on:
   pull_request:
     paths:
-      - 'packages/documentation-v7/**'
+      - 'packages/documentation-v6/**'
       - 'packages/styles/**'
       - 'packages/components/**'
       - 'packages/internet-header/**'
@@ -31,14 +31,14 @@ jobs:
       - name: Setup
         uses: swisspost/design-system/.github/actions/setup-pnpm@main
 
-      - name: Install documentation-v7 & dependencies
-        run: pnpm --filter design-system-documentation-v7... install
+      - name: Install documentation-v6 & dependencies
+        run: pnpm --filter design-system-documentation-v6... install
 
-      - name: Build documentation-v7 & dependencies
-        run: pnpm --filter design-system-documentation-v7... build
+      - name: Build documentation-v6 & dependencies
+        run: pnpm --filter design-system-documentation-v6... build
 
-      - name: Upload documentation-v7
+      - name: Upload documentation-v6
         uses: swisspost/design-system/.github/actions/artifact-upload@main
         with:
-          name: design-system-documentation-v7
-          folder: packages/documentation-v7/storybook-static
+          name: design-system-documentation-v6
+          folder: packages/documentation-v6/storybook-static

.github/workflows/deploy-documentation-v7.yaml → .github/workflows/deploy-documentation-v6.yaml

@@ -6,10 +6,10 @@
 #
 ###
 
-name: Deploy Documentation V7 Preview to Netlify
+name: Deploy Documentation V6 Preview to Netlify
 on:
   workflow_run:
-    workflows: ['Build Documentation V7']
+    workflows: ['Build Documentation V6']
     types: [completed]
 
 jobs:
@@ -28,10 +28,10 @@ jobs:
         uses: swisspost/design-system/.github/actions/artifact-download@main
         id: build
         with:
-          name: design-system-documentation-v7
+          name: design-system-documentation-v6
           folder: build-output
 
-      - name: Deploy documentation v7 to netlify
+      - name: Deploy documentation v6 to netlify
         uses: swisspost/design-system/.github/actions/deploy-to-netlify@main
         id: deploy
         with:

package.json

@@ -25,13 +25,13 @@
     "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'",
-    "docsv7": "pnpm --filter design-system-documentation-v7 start",
-    "docsv7:start": "pnpm --filter design-system-documentation-v7... --parallel --stream start",
-    "docsv7:build": "pnpm --filter design-system-documentation-v7 build",
-    "docsv7:headless": "pnpm --filter design-system-documentation-v7 start:headless",
-    "docsv7:e2e": "start-server-and-test docsv7:headless 9300 'pnpm --filter design-system-documentation-v7 e2e'",
-    "docsv7:e2e:watch": "start-server-and-test docsv7:headless 9300 'pnpm --filter design-system-documentation-v7 e2e:watch'",
-    "docsv7:snapshots": "start-server-and-test 'pnpm docsv7:headless' 9300 'pnpm --filter design-system-documentation-v7 snapshots'",
+    "docsv6": "pnpm --filter design-system-documentation-v6 start",
+    "docsv6:start": "pnpm --filter design-system-documentation-v6... --parallel --stream start",
+    "docsv6:build": "pnpm --filter design-system-documentation-v6 build",
+    "docsv6:headless": "pnpm --filter design-system-documentation-v6 start:headless",
+    "docsv6:e2e": "start-server-and-test docsv6:headless 9300 'pnpm --filter design-system-documentation-v6 e2e'",
+    "docsv6:e2e:watch": "start-server-and-test docsv6:headless 9300 'pnpm --filter design-system-documentation-v6 e2e:watch'",
+    "docsv6:snapshots": "start-server-and-test 'pnpm docsv6:headless' 9300 'pnpm --filter design-system-documentation-v6 snapshots'",
     "styles:start": "pnpm --filter design-system-styles start",
     "styles:build": "pnpm --filter design-system-styles build",
     "styles:test": "pnpm --filter design-system-styles test",

packages/components/.eslintrc.json

@@ -8,17 +8,14 @@
     "plugin:@typescript-eslint/recommended",
     "plugin:@stencil-community/recommended"
   ],
-  "overrides": [
-  ],
+  "overrides": [],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaVersion": "latest",
     "sourceType": "module",
     "project": "./tsconfig.eslint.json"
   },
-  "plugins": [
-    "@typescript-eslint"
-  ],
+  "plugins": ["@typescript-eslint"],
   "rules": {
     "indent": [
       "error",
@@ -27,14 +24,8 @@
         "SwitchCase": 1
       }
     ],
-    "quotes": [
-      "error",
-      "single"
-    ],
-    "semi": [
-      "error",
-      "always"
-    ],
+    "quotes": ["error", "single"],
+    "semi": ["error", "always"],
     "@typescript-eslint/no-unused-vars": [
       "error",
       {
@@ -44,21 +35,9 @@
       }
     ],
     "@stencil-community/strict-boolean-conditions": "off",
-    "@stencil-community/required-prefix": [
-      "error",
-      [
-        "post"
-      ]
-    ],
+    "@stencil-community/required-prefix": ["error", ["post"]],
     "@stencil-community/async-methods": "error",
-    "@stencil-community/ban-prefix": [
-      "error",
-      [
-        "stencil",
-        "stnl",
-        "st"
-      ]
-    ],
+    "@stencil-community/ban-prefix": ["error", ["stencil", "stnl", "st"]],
     "@stencil-community/decorators-context": "error",
     "@stencil-community/decorators-style": [
       "error",

packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-demo-page/datepicker-demo-page.component.html

@@ -3,6 +3,11 @@ <h1 class="bold font-curve-large">Datepicker</h1>
   <app-dependency-link></app-dependency-link>
 </div>
 
+<div class="alert alert-warning mb-bigger-big">
+  <p>The <code>.pi-calendar</code> class previously used to display the calendar icon in the datepicker button
+    has been deprecated in favor of the <code>.pi-3203</code> class which shows the same icon.</p>
+</div>
+
 <section>
   <p id="languageSelectorTitle" class="light font-curve-regular">Choose a language:</p>
 

packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-simple/datepicker-simple-lg.component.html

@@ -10,6 +10,6 @@
          type="text"/>
   <label for="dpSimple" class="form-label">Simple datepicker</label>
   <button class="ngb-dp-open" (click)="dpSimple.toggle()" aria-label="Open calendar">
-    <i class="pi pi-calendar" aria-hidden="true"></i>
+    <i class="pi pi-3203" aria-hidden="true"></i>
   </button>
 </div>

packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-simple/datepicker-simple.component.html

@@ -11,6 +11,6 @@
          placeholder="yyyy-mm-dd"
          type="text">
   <button class="ngb-dp-open" (click)="dpSimple.toggle()" aria-label="Open calendar">
-    <i class="pi pi-calendar" aria-hidden="true"></i>
+    <i class="pi pi-3203" aria-hidden="true"></i>
   </button>
 </div>

packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-validation/datepicker-validation-lg.component.html

@@ -14,7 +14,7 @@
   <label for="dpValidation" class="form-label">Datepicker with validation</label>
 
   <button class="ngb-dp-open" (click)="dpValidation.toggle()" aria-label="Open calendar">
-    <i class="pi pi-calendar" aria-hidden="true"></i>
+    <i class="pi pi-3203" aria-hidden="true"></i>
   </button>
 
   <p class="valid-feedback">Valid feedback</p>

packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-validation/datepicker-validation.component.html

@@ -14,7 +14,7 @@
          type="text">
 
   <button class="ngb-dp-open" (click)="dpValidation.toggle()" aria-label="Open calendar">
-    <i class="pi pi-calendar" aria-hidden="true"></i>
+    <i class="pi pi-3203" aria-hidden="true"></i>
   </button>
 
   <p class="valid-feedback">Valid feedback</p>

packages/demo/src/styles.scss

@@ -52,10 +52,6 @@ body {
   @include post.pi(2104, 'white');
 }
 
-.pi-calendar {
-  @include post.pi(3203);
-}
-
 .code-sample {
   margin-top: 35px;
   text-align: center;

packages/documentation-v6/.gitignore

@@ -0,0 +1,2 @@
+# Storybook specific
+storybook-static

packages/documentation/.storybook/main.js → packages/documentation-v6/.storybook/main.js

@@ -4,10 +4,10 @@ module.exports = {
   addons: [
     '@storybook/addon-docs',
     '@storybook/addon-controls',
-    '@storybook/addon-links',
+    // '@storybook/addon-links',
     '@storybook/addon-measure',
     '@storybook/addon-viewport',
-    '@storybook/addon-a11y',
+    // '@storybook/addon-a11y',
     '@pxtrn/storybook-addon-docs-stencil',
     'storybook-dark-mode',
     '@geometricpanda/storybook-addon-badges',

packages/documentation-v7/.storybook/manager-head.html → packages/documentation-v6/.storybook/manager-head.html

@@ -9,26 +9,48 @@
 <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
 <link rel="manifest" href="/site.webmanifest" />
 
-<!-- customize the manager ui -->
-<link rel="stylesheet" href="/manager/ui.css" />
-
 <!-- customize the sidebar icons -->
-<svg xmlns="http://www.w3.org/2000/svg" data-chromatic="ignore" style="position: absolute; width: 0px; height: 0px">
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  data-chromatic="ignore"
+  style="position: absolute; width: 0px; height: 0px"
+>
   <symbol id="icon--folder" viewBox="0 0 32 32">
-    <path fill="currentColor" stroke="currentColor" stroke-width="1"
-      d="M28.667 8H14.934c-.533 0-.933-.133-1.2-.4l-2.933-2.8c-.533-.533-1.333-.8-2.133-.8H3.335c-1.067 0-2 .933-2 2v22h29.333V10c0-1.067-.933-2-2-2zm.666 18.667H2.666V6c0-.4.267-.667.667-.667h5.333c.533 0 .933.133 1.2.4l2.8 2.8c.667.533 1.467.8 2.267.8h13.733c.4 0 .667.267.667.667v16.667z" />
+    <path
+      fill="currentColor"
+      stroke="currentColor"
+      stroke-width="1"
+      d="M28.667 8H14.934c-.533 0-.933-.133-1.2-.4l-2.933-2.8c-.533-.533-1.333-.8-2.133-.8H3.335c-1.067 0-2 .933-2 2v22h29.333V10c0-1.067-.933-2-2-2zm.666 18.667H2.666V6c0-.4.267-.667.667-.667h5.333c.533 0 .933.133 1.2.4l2.8 2.8c.667.533 1.467.8 2.267.8h13.733c.4 0 .667.267.667.667v16.667z"
+    />
   </symbol>
   <symbol id="icon--component" viewBox="0 0 32 32">
-    <path fill="currentColor" stroke="currentColor" stroke-width="1"
-      d="M28 9.333V4.266c0-.8-.8-1.6-1.6-1.6h-5.067c-.667 0-1.2.267-1.733.667l-1.733 1.733c-.133.133-.4.267-.8.267H5.6c-.8 0-1.6.8-1.6 1.6v2.4H0v20h32v-20h-4zm-22.667-2.4c0-.133.133-.267.267-.267h11.467c.667 0 1.2-.267 1.733-.667l1.733-1.733c.267-.133.533-.267.8-.267h4.933c.267 0 .4.133.4.267v5.067H5.333v-2.4zM30.667 28H1.334V10.667h29.333V28z" />
-    <path fill="currentColor" stroke="currentColor" stroke-width="1" d="M10.667 14.667h10.667V16H10.667v-1.333z" />
+    <path
+      fill="currentColor"
+      stroke="currentColor"
+      stroke-width="1"
+      d="M28 9.333V4.266c0-.8-.8-1.6-1.6-1.6h-5.067c-.667 0-1.2.267-1.733.667l-1.733 1.733c-.133.133-.4.267-.8.267H5.6c-.8 0-1.6.8-1.6 1.6v2.4H0v20h32v-20h-4zm-22.667-2.4c0-.133.133-.267.267-.267h11.467c.667 0 1.2-.267 1.733-.667l1.733-1.733c.267-.133.533-.267.8-.267h4.933c.267 0 .4.133.4.267v5.067H5.333v-2.4zM30.667 28H1.334V10.667h29.333V28z"
+    />
+    <path
+      fill="currentColor"
+      stroke="currentColor"
+      stroke-width="1"
+      d="M10.667 14.667h10.667V16H10.667v-1.333z"
+    />
   </symbol>
   <symbol id="icon--document" viewBox="0 0 32 32">
-    <path fill="currentColor" stroke="currentColor" stroke-width="1"
-      d="M5.333 2.667v26.666H20l6.667-6.666v-20H5.333zM20.667 26.78v-3.554h3.554l-3.554 3.554zm4.666-4.888h-6V28H6.667V4h18.666v17.893zM22.667 8.667H9.333V7.333h13.334v1.334zm0 4H9.333v-1.334h13.334v1.334zm0 4H9.333v-1.334h13.334v1.334z" />
+    <path
+      fill="currentColor"
+      stroke="currentColor"
+      stroke-width="1"
+      d="M5.333 2.667v26.666H20l6.667-6.666v-20H5.333zM20.667 26.78v-3.554h3.554l-3.554 3.554zm4.666-4.888h-6V28H6.667V4h18.666v17.893zM22.667 8.667H9.333V7.333h13.334v1.334zm0 4H9.333v-1.334h13.334v1.334zm0 4H9.333v-1.334h13.334v1.334z"
+    />
   </symbol>
   <symbol id="icon--bookmarkhollow" viewBox="0 0 32 32">
-    <path fill="currentColor" stroke="currentColor" stroke-width="1"
-      d="M20.9 1.3H4.6c-1.1 0-2 .9-2 2v16l4.098-3.21v.338H6.7V30.6H28V8.4l-7.1-7.1zm.4 6.6V3.6l2.2 2.2L25.7 8h-4.4v-.1zM4.6 2.7h8.1c.3 0 .6.3.6.6v13.3l-3.8-3-.8-.6-.8.6-3.8 3V3.3c-.1-.3.2-.6.5-.6zm22.1 26.7H8V15.2l-.001.001v-.13L8.6 14.6l6 4.7v-16c0-.2 0-.4-.1-.6H20v6.6h6.7v20.1z" />
+    <path
+      fill="currentColor"
+      stroke="currentColor"
+      stroke-width="1"
+      d="M20.9 1.3H4.6c-1.1 0-2 .9-2 2v16l4.098-3.21v.338H6.7V30.6H28V8.4l-7.1-7.1zm.4 6.6V3.6l2.2 2.2L25.7 8h-4.4v-.1zM4.6 2.7h8.1c.3 0 .6.3.6.6v13.3l-3.8-3-.8-.6-.8.6-3.8 3V3.3c-.1-.3.2-.6.5-.6zm22.1 26.7H8V15.2l-.001.001v-.13L8.6 14.6l6 4.7v-16c0-.2 0-.4-.1-.6H20v6.6h6.7v20.1z"
+    />
   </symbol>
-</svg>
+</svg>

packages/documentation-v6/.storybook/preview-head.html

@@ -0,0 +1,11 @@
+<!--
+  Do whatever you can do in an normal html header.
+  Storybook will inject these tags into the preview iframe where your components render, not the Storybook application UI.
+-->
+
+<link rel="icon" type="image/x-icon" href="favicon.ico" />
+<meta name="design-system-settings" data-post-icon-base="/post-icons" />
+
+<script>
+  window.global = window;
+</script>

packages/documentation/.storybook/preview.js → packages/documentation-v6/.storybook/preview.js

@@ -106,6 +106,7 @@ export const parameters = {
       dt: null,
       dd: null,
       a: null,
+      div: null,
     },
     source: {
       excludeDecorators: true,

packages/documentation-v7/CHANGELOG.md → packages/documentation-v6/CHANGELOG.md

@@ -1,6 +1,10 @@
-# @swisspost/design-system-documentation-v7
+# @swisspost/design-system-documentation
 
-## 1.1.2
+## 1.12.0
+
+### Minor Changes
+
+- Added a gray notification variant for cookie banners. (by [@alizedebray](https://github.com/alizedebray) with [#1350](https://github.com/swisspost/design-system/pull/1350))
 
 ### Patch Changes
 
@@ -11,18 +15,14 @@
   - @swisspost/design-system-components@1.3.10
   - @swisspost/design-system-components-react@1.0.16
 
-## 1.1.1
+## 1.11.3
 
 ### Patch Changes
 
 - Updated dependencies:
   - @swisspost/internet-header@1.8.3
 
-## 1.1.0
-
-### Minor Changes
-
-- Created a storybook v7 package, set up with vite and lit. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#1613](https://github.com/swisspost/design-system/pull/1613))
+## 1.11.2
 
 ### Patch Changes
 
@@ -33,6 +33,17 @@
   - @swisspost/design-system-components@1.3.9
   - @swisspost/design-system-components-react@1.0.15
 
+## 1.11.1
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-icons@1.0.8
+  - @swisspost/design-system-styles@6.2.5
+  - @swisspost/design-system-components@1.3.8
+  - @swisspost/internet-header@1.8.1
+  - @swisspost/design-system-components-react@1.0.14
+
 ## 1.11.0
 
 ### Minor Changes

packages/documentation-v7/CONTRIBUTING.md → packages/documentation-v6/CONTRIBUTING.md

@@ -1,4 +1,4 @@
-# Contributing to Design System Documentation-V7
+# Contributing to Design System Documentation
 
 These contribution guidelines extend the [general contribution guidelines](../../CONTRIBUTING.md), where you can find instructions on how to set up the repository for contributing.