Merge branch 'main' into fix/1490-datatable-misaligned-button-icon

swisspost · Jan 18, 2024 · 5430ac4 · 5430ac4
2 parents a9ac3c5 + 6b1e740
commit 5430ac4
Show file tree

Hide file tree

Showing 610 changed files with 3,053 additions and 2,234 deletions.
diff --git a/.changeset/2024-01-14-update-icons.md b/.changeset/2024-01-14-update-icons.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-icons': minor
+---
+
+Updated icons number 1000, 1007, 1020, 1021, 1022, 1023, 1024, 1027, 1028, 1034, 1039, 1040, 1042, 1044, 1047, 1049, 2000, 2001, 2002, 2005, 2018, 2023, 2024, 2032, 2037, 2057, 2058, 2059, 2068, 2081, 2082, 2086, 2087, 2092, 2094, 2095, 2098, 2099, 2107, 2114, 2115, 2116, 2120, 2122, 2124, 2125, 2126, 2128, 2136, 2137, 2138, 2140, 2141, 2144, 2145, 2148, 2149, 2150, 2151, 2153, 2154, 2155, 2156, 2157, 2158, 2159, 2160, 2161, 2162, 2163, 2164, 2165, 2166, 2167, 2168, 2170, 2173, 2175, 2177, 2178, 2179, 2180, 2182, 2185, 2188, 2191, 2192, 2193, 2195, 2196, 2197, 2198, 2199, 2200, 2201, 2202, 2205, 2206, 2207, 2209, 2212, 2217, 2218, 2219, 2220, 2221, 2222, 2223, 2224, 2225, 2226, 2227, 2228, 2229, 2230, 2231, 2232, 2233, 2234, 2235, 2236, 2237, 2238, 2239, 2240, 2241, 2242, 2243, 2244, 2245, 2246, 2247, 2248, 2249, 2250, 2254, 2255, 2256, 2257, 2261, 2262, 2263, 2264, 2266, 2267, 2268, 2269, 2271, 2273, 2274, 2275, 2277, 2278, 2279, 2280, 2283, 2284, 2285, 2286, 2287, 2288, 2289, 2290, 2291, 2292, 2293, 2296, 2297, 2298, 2299, 2300, 2301, 2302, 2303, 2304, 2305, 2310, 2311, 2312, 2314, 2315, 2317, 2318, 2319, 2321, 2322, 2323, 2326, 2327, 2328, 2329, 2330, 2331, 2332, 2333, 2334, 2337, 2339, 2340, 2341, 2342, 2343, 2344, 2346, 2347, 2348, 2349, 2350, 2351, 2352, 2353, 2354, 2355, 2356, 2357, 2358, 2359, 2360, 2361, 2362, 2364, 2365, 2367, 2368, 2369, 2370, 2371, 2372, 2373, 2374, 2375, 2377, 2378, 2379, 2381, 2383, 2384, 2385, 2388, 2389, 2390, 2391, 2392, 2393, 2394, 2397, 2398, 2402, 2403, 2404, 2406, 2407, 2408, 2409, 2411, 2412, 2414, 2415, 2417, 2418, 2419, 2420, 2421, 2422, 2423, 2424, 2425, 2426, 2427, 2428, 2429, 2430, 2431, 2432, 2433, 2434, 2435, 2436, 2437, 2438, 2439, 2440, 2441, 2442, 2443, 2444, 2445, 2446, 2447, 2448, 2449, 2450, 2451, 2453, 2456, 2457, 2459, 2460, 2462, 2463, 2464, 2465, 2466, 2467, 2468, 2470, 2471, 2473, 2475, 2476, 2477, 2478, 2479, 2480, 2481, 2483, 2484, 2485, 2486, 2487, 2488, 2489, 2490, 2491, 2492, 2493, 2494, 2497, 2498, 2499, 2500, 2501, 2502, 2503, 2504, 2505, 2506, 2507, 2508, 2509, 2510, 2512, 2514, 2518, 2519, 2520, 2521, 2522, 2523, 2524, 2525, 2526, 2527, 2528, 2529, 2530, 2531, 2533, 2534, 2535, 2536, 2538, 2539, 2540, 2541, 2542, 2543, 2544, 2545, 2546, 2550, 2551, 2552, 2553, 2554, 2555, 2556, 2557, 2558, 2559, 2560, 2561, 2562, 2563, 2564, 2565, 2566, 2567, 3007, 3008, 3009, 3017, 3018, 3019, 3033, 3037, 3039, 3040, 3041, 3042, 3043, 3045, 3046, 3047, 3048, 3049, 3050, 3051, 3052, 3053, 3054, 3055, 3056, 3057, 3058, 3059, 3060, 3061, 3062, 3063, 3064, 3065, 3066, 3067, 3069, 3070, 3072, 3073, 3074, 3077, 3078, 3080, 3081, 3083, 3084, 3085, 3086, 3090, 3091, 3092, 3093, 3094, 3095, 3096, 3097, 3099, 3100, 3102, 3106, 3107, 3108, 3110, 3111, 3112, 3113, 3114, 3115, 3117, 3121, 3123, 3125, 3126, 3127, 3128, 3129, 3130, 3131, 3132, 3133, 3135, 3137, 3138, 3146, 3147, 3148, 3149, 3150, 3151, 3153, 3154, 3155, 3156, 3160, 3161, 3162, 3164, 3165, 3170, 3172, 3173, 3176, 3177, 3178, 3179, 3180, 3181, 3182, 3183, 3190, 3195, 3196, 3198, 3200, 3201, 3205, 3206, 3209, 3210, 3211, 3212, 3214, 3215, 3216, 3217, 3218, 3219, 3220, 3221, 3224, 3225, 3226, 3227, 3231, 3235, 3238, 3241, 3242, 3246, 3250, 3252, 3253, 3255, 3256, 3258, 3259, 3260, 8006, 8009, 8010, 8011, 8014, 8015, 8017, 8018 and 8019. Added icon number 2571.
+
diff --git a/.changeset/blue-bottles-sing.md b/.changeset/blue-bottles-sing.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Cleaned icon component controls from duplicate and null values.
diff --git a/.changeset/five-rules-dream.md b/.changeset/five-rules-dream.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Added autolink to headings to be able to copy anchor link more easily from the documentation.
diff --git a/.changeset/gorgeous-ties-help.md b/.changeset/gorgeous-ties-help.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-demo': patch
+'@swisspost/design-system-documentation': patch
+---
+
+Updated copyright year to 2024 in the footer of all documentation.
diff --git a/.changeset/poor-hounds-invent.md b/.changeset/poor-hounds-invent.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Removed intranet-header nesting in sidebar.
diff --git a/.changeset/swift-tips-kiss.md b/.changeset/swift-tips-kiss.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-components': minor
+---
+
+Updated the tooltip `min-height` and `max-width` and added a new property arrow to the tooltip, that defines wheter or not the pointer arrow is displayed.
diff --git a/.changeset/ten-garlics-relate.md b/.changeset/ten-garlics-relate.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Fixed vertical rythmn which was not applied to content inside tab like Alert component.
diff --git a/.github/actions/artifact-download/action.yaml b/.github/actions/artifact-download/action.yaml
@@ -41,7 +41,7 @@ runs:
   using: composite
   steps:
     - name: Download artifact
-      uses: dawidd6/action-download-artifact@v2
+      uses: dawidd6/action-download-artifact@v3
       with:
         name: ${{ inputs.name }}
         run_id: ${{ github.event.workflow_run.id }}

diff --git a/.github/actions/artifact-upload/action.yaml b/.github/actions/artifact-upload/action.yaml
@@ -40,7 +40,7 @@ runs:
       run: cd ${{ inputs.folder }} && zip artifacts.zip . -r
 
     - name: Upload artifacts
-      uses: actions/upload-artifact@v3
+      uses: actions/upload-artifact@v4
       with:
         name: ${{ inputs.name }}
         path: ${{ inputs.folder }}/artifacts.zip
diff --git a/.github/workflows/e2e-tests.yaml b/.github/workflows/e2e-tests.yaml
@@ -39,3 +39,11 @@ jobs:
 
       - name: Run tests
         run: pnpm e2e:ci
+
+      - name: Upload screenshots
+        uses: actions/[email protected]
+        if: failure()
+        with:
+          name: cypress-snapshots
+          path: packages/documentation/cypress/screenshots
+          retention-days: 14
diff --git a/README.md b/README.md
@@ -1,63 +1,28 @@
 # Swiss Post Design System
 
-![Swiss Post Design System splash screen](https://github.com/swisspost/design-system/assets/1659006/c11afbac-8a71-4416-ae3c-ec87f4e10412)
+![Swiss Post Design System splash screen](https://github.com/swisspost/design-system/assets/1659006/e58acc52-3e6a-47b3-84b5-0726250ec225)
 
 The Swiss Post Design System pattern library for a unified and accessible user experience across the web platform.
 
+## Documentation
 
-## Packages
-
-### Styles
-
-[![npm](https://img.shields.io/npm/v/@swisspost/design-system-styles)](https://www.npmjs.com/package/@swisspost/design-system-styles)
-
-[Documentation](https://design-system.post.ch) · [Changelog](/packages/styles/CHANGELOG.md)
-
-The styling package, including theming for [Bootstrap](https://getbootstrap.com/) and [ng-bootstrap](https://ng-bootstrap.github.io/#/home) components.
-
-```bash
-npm install @swisspost/design-system-styles
-```
-
-### Internet Header
-
-[![npm](https://img.shields.io/npm/v/@swisspost/internet-header)](https://www.npmjs.com/package/@swisspost/internet-header)
-
-[Documentation](https://next.design-system.post.ch/?path=/docs/internet-header-getting-started--docs) · [Changelog](/packages/internet-header/CHANGELOG.md)
-
-The header for client facing applications.
+[Current documentation](https://design-system.post.ch/#/home) - Migration guides, `bootstrap` & `ng-bootstrap` documentation
 
-```bash
-npm install @swisspost/internet-header
-```
+[Next documentation](https://next.design-system.post.ch/?path=/docs/home--docs) - styles, internet header and web components documentation
 
-### Intranet Header
+[Figma design files](https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=3209%3A72270&mode=design&t=jhmGcSqeWq2SgQXT-1) - Figma component library
 
-[![npm](https://img.shields.io/npm/v/@swisspost/design-system-intranet-header)](https://www.npmjs.com/package/@swisspost/design-system-intranet-header)
+🔒 [Experience Hub](https://www.experience-hub.ch/document/2803) - Pattern usage documentation ([request access](https://www.experience-hub.ch/request-access/))
 
-[Documentation](https://design-system.post.ch/#/post-samples/intranet-layout) · [Changelog](/packages/intranet-header-workspace/CHANGELOG.md)
-
-The Header Angular component for internal usage.
-
-```bash
-npm install @swisspost/design-system-intranet-header
-```
-
-### Components
-
-[![npm](https://img.shields.io/npm/v/@swisspost/design-system-components)](https://www.npmjs.com/package/@swisspost/design-system-components)
-
-[Documentation](https://next.design-system.post.ch) · [Changelog](/packages/components/CHANGELOG.md)
-
-A set of standard web components for easy integration with every framework or no framework at all.
-
-```bash
-npm install @swisspost/design-system-components
-```
-
-## Design Documentation
+## Packages
 
-🔒 **[Experience Hub](https://www.experience-hub.ch/document/2803)** - pattern usage documentation ([request access](https://www.experience-hub.ch/request-access/))
+| Name                                                                                                               | Description                                                                                                                                             | Version                                                                                                                                                                                                                                                  | Changelog URL                                                                 |
+| :----------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------- |
+| [Styles](https://next.design-system.post.ch/?path=/docs/getting-started-styles--docs)                              | The styling package, including theming for [Bootstrap](https://getbootstrap.com/) and [ng-bootstrap](https://ng-bootstrap.github.io/#/home) components. | [![Styles pacakge version shield for npm](https://img.shields.io/npm/v/%40swisspost%2Fdesign-system-styles?style=flat-square&logo=npm&label=%20&color=%23fc0)](https://www.npmjs.com/package/@swisspost/design-system-styles)                            | [Styles changelog](/packages/styles/CHANGELOG.md)                             |
+| [Components](https://next.design-system.post.ch/?path=/docs/getting-started-components--docs)                      | A set of standard web components for easy integration with every framework or no framework at all.                                                      | [![Components package version shield for npm](https://img.shields.io/npm/v/%40swisspost%2Fdesign-system-components?style=flat-square&logo=npm&label=%20&color=%23fc0)](https://www.npmjs.com/package/@swisspost/design-system-components)                | [Components changelog](/packages/components/CHANGELOG.md)                     |
+| [Internet Header](https://next.design-system.post.ch/?path=/docs/components-internet-header-getting-started--docs) | The header for client facing applications.                                                                                                              | [![Internet Header package version shield for npm](https://img.shields.io/npm/v/%40swisspost%2Finternet-header?style=flat-square&logo=npm&label=%20&color=%23fc0)](https://www.npmjs.com/package/@swisspost/internet-header)                             | [Interet Header changelog](/packages/internet-header/CHANGELOG.md)            |
+| [Intranet Header](https://next.design-system.post.ch/?path=/docs/components-intranet-header-getting-started--docs) | The Angular component for internal usage.                                                                                                               | [![Intranet Header package version shield for npm](https://img.shields.io/npm/v/%40swisspost%2Fdesign-system-intranet-header?style=flat-square&logo=npm&label=%20&color=%23fc0)](https://www.npmjs.com/package/@swisspost/design-system-intranet-header) | [Intranet Header changelog](/packages/intranet-header-workspace/CHANGELOG.md) |
+| [Icons](https://next.design-system.post.ch/?path=/docs/components-icons-getting-started--docs)                     | A collection of Post icons in svg format.                                                                                                               | [![Icons package version shield for npm](https://img.shields.io/npm/v/%40swisspost%2Fdesign-system-icons?style=flat-square&logo=npm&label=%20&color=%23fc0)](https://www.npmjs.com/package/@swisspost/design-system-icons)                               | [Icons changelog](/packages/icons/CHANGELOG.md)                               |
 
 ## Contribute
 
@@ -73,4 +38,4 @@ In order to keep our community open and inclusive, we expect you to read and fol
 
 Software contained in this repository is published by the Swiss Post Ltd. under the [Apache 2.0 License](./LICENSE).
 
-© 2022 Swiss Post, Ltd.
+© 2024 Swiss Post, Ltd.
diff --git a/packages/components-react/package.json b/packages/components-react/package.json
@@ -22,15 +22,15 @@
     "@swisspost/design-system-components": "workspace:1.7.1"
   },
   "devDependencies": {
-    "@types/node": "18.19.5",
-    "@types/react": "18.2.47",
+    "@types/node": "18.19.7",
+    "@types/react": "18.2.48",
     "@types/react-dom": "18.2.18",
     "@typescript-eslint/eslint-plugin": "5.62.0",
     "@typescript-eslint/parser": "5.62.0",
     "eslint": "8.56.0",
     "eslint-config-standard-with-typescript": "43.0.0",
     "eslint-plugin-import": "2.29.1",
-    "eslint-plugin-n": "16.6.1",
+    "eslint-plugin-n": "16.6.2",
     "eslint-plugin-promise": "6.1.1",
     "eslint-plugin-react": "7.33.2",
     "react": "18.2.0",

diff --git a/packages/components/README.md b/packages/components/README.md
@@ -29,4 +29,4 @@ In order to keep our community open and inclusive, we expect you to read and fol
 
 Software contained in this repository is published by the Swiss Post Ltd. under the [Apache 2.0 License](./LICENSE).
 
-© 2022 Swiss Post, Ltd.
+© 2024 Swiss Post, Ltd.
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -47,7 +47,7 @@
     "@percy/cli": "1.27.7",
     "@percy/cypress": "3.1.2",
     "@stencil-community/eslint-plugin": "0.7.1",
-    "@stencil/core": "4.9.0",
+    "@stencil/core": "4.10.0",
     "@stencil/react-output-target": "0.5.3",
     "@stencil/sass": "3.0.8",
     "@types/jest": "29.5.11",

diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
@@ -190,6 +190,10 @@ export namespace Components {
         "show": (panelName: string) => Promise<void>;
     }
     interface PostTooltip {
+        /**
+          * Wheter or not to display a little pointer arrow
+         */
+        "arrow"?: boolean;
         /**
           * Programmatically hide this tooltip
          */
@@ -492,6 +496,10 @@ declare namespace LocalJSX {
         "onTabChange"?: (event: PostTabsCustomEvent<HTMLPostTabPanelElement['name']>) => void;
     }
     interface PostTooltip {
+        /**
+          * Wheter or not to display a little pointer arrow
+         */
+        "arrow"?: boolean;
         /**
           * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries.
          */

diff --git a/packages/components/src/components/post-tooltip/post-tooltip.scss b/packages/components/src/components/post-tooltip/post-tooltip.scss
@@ -12,5 +12,7 @@
 post-popovercontainer {
   &::part(popover) {
     padding: spacing.$size-micro spacing.$size-mini;
+    max-width: 2 * spacing.$size-bigger-giant - spacing.$size-mini;
+    min-height: spacing.$size-regular;
   }
 }
diff --git a/packages/components/src/components/post-tooltip/post-tooltip.tsx b/packages/components/src/components/post-tooltip/post-tooltip.tsx
@@ -25,6 +25,11 @@ export class PostTooltip {
    */
   @Prop() readonly placement?: Placement = 'top';
 
+  /**
+   * Wheter or not to display a little pointer arrow
+   */
+  @Prop() readonly arrow?: boolean = true;
+
   constructor() {
     // Create local versions of event handlers for de-registration
     // https://stackoverflow.com/questions/33859113/javascript-removeeventlistener-not-working-inside-a-class
@@ -35,6 +40,7 @@ export class PostTooltip {
   connectedCallback() {
     if (!this.host.id) {
       throw new Error(
+        /*prettier-ignore*/
         'No id set: <post-tooltip> must have an id, linking it to it\'s target element using the data-tooltip-target attribute.',
       );
     }
@@ -126,7 +132,7 @@ export class PostTooltip {
         <post-popovercontainer
           role="tooltip"
           tabindex="-1"
-          arrow
+          arrow={this.arrow}
           placement={this.placement}
           ref={(el: HTMLPostPopovercontainerElement) => (this.popoverRef = el)}
         >

diff --git a/packages/components/src/components/post-tooltip/readme.md b/packages/components/src/components/post-tooltip/readme.md
@@ -9,6 +9,7 @@
 
 | Property    | Attribute   | Description                                                                                                                                                                                                                                                                                                               | Type                                                                                                                                                                 | Default |
 | ----------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
+| `arrow`     | `arrow`     | Wheter or not to display a little pointer arrow                                                                                                                                                                                                                                                                           | `boolean`                                                                                                                                                            | `true`  |
 | `placement` | `placement` | Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries. | `"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"` | `'top'` |
 
 

diff --git a/packages/demo/package.json b/packages/demo/package.json
@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@angular/animations": "16.2.12",
-    "@angular/cdk": "16.2.12",
+    "@angular/cdk": "16.2.13",
     "@angular/common": "16.2.12",
     "@angular/compiler": "16.2.12",
     "@angular/core": "16.2.12",
@@ -35,7 +35,7 @@
     "prettier": "2.8.8",
     "rxjs": "7.8.1",
     "tslib": "2.6.2",
-    "zone.js": "0.14.2"
+    "zone.js": "0.14.3"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "16.2.11",
@@ -51,8 +51,8 @@
     "@types/jasmine": "5.1.4",
     "@types/jasminewd2": "2.0.13",
     "@types/node": "18.17.19",
-    "@typescript-eslint/eslint-plugin": "6.18.0",
-    "@typescript-eslint/parser": "6.18.0",
+    "@typescript-eslint/eslint-plugin": "6.19.0",
+    "@typescript-eslint/parser": "6.19.0",
     "eslint": "8.56.0",
     "jasmine-core": "5.1.1",
     "jasmine-marbles": "0.9.2",

diff --git a/packages/demo/src/app/common/footer/footer.component.html b/packages/demo/src/app/common/footer/footer.component.html
@@ -30,7 +30,7 @@ <h2 class="bold">Support</h2>
 </footer>
 
 <footer class="container d-flex justify-content-between py-regular">
-  <span class="bold">&copy; 2022 Swiss Post Ltd.</span>
+  <span class="bold">&copy; 2024 Swiss Post Ltd.</span>
   <a href="https://github.com/swisspost/design-system" target="_blank" rel="noopener">
     Improve this page
   </a>

diff --git a/packages/documentation/.storybook/blocks/footer.tsx b/packages/documentation/.storybook/blocks/footer.tsx
@@ -83,7 +83,7 @@ export default (params: { pathToStoryFile?: String }) => (
       </div>
 
       <div className="container d-flex justify-content-between py-regular">
-        <strong>&copy; 2022 Swiss Post Ltd.</strong>
+        <strong>&copy; {new Date().getFullYear()} Swiss Post Ltd.</strong>
         <div className="d-flex gap-3">
           <a
             href="https://www.post.ch/en/pages/footer/data-protection-and-disclaimer"
Original file line number	Diff line number	Diff line change
Expand Up		@@ -29,4 +29,4 @@ In order to keep our community open and inclusive, we expect you to read and fol

		Software contained in this repository is published by the Swiss Post Ltd. under the [Apache 2.0 License](./LICENSE).

		© 2022 Swiss Post, Ltd.
		© 2024 Swiss Post, Ltd.