diff --git a/.changeset/2024-01-14-update-icons.md b/.changeset/2024-01-14-update-icons.md new file mode 100644 index 0000000000..53fb3cdbbc --- /dev/null +++ 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 new file mode 100644 index 0000000000..e0050f2513 --- /dev/null +++ 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 new file mode 100644 index 0000000000..918537a9a5 --- /dev/null +++ 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 new file mode 100644 index 0000000000..e6dccee140 --- /dev/null +++ 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 new file mode 100644 index 0000000000..00fb920bd0 --- /dev/null +++ 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 new file mode 100644 index 0000000000..47785bc46e --- /dev/null +++ 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 new file mode 100644 index 0000000000..c95c06d70b --- /dev/null +++ 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 index 8baa21ff8b..727b76f9ea 100644 --- 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 index 1111ce3029..8d4ca1970d 100644 --- 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 index 47be1766f1..1913661c44 100644 --- 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/upload-artifact@v4.1.0 + if: failure() + with: + name: cypress-snapshots + path: packages/documentation/cypress/screenshots + retention-days: 14 diff --git a/README.md b/README.md index 34b79e4faf..faa5a032f9 100644 --- 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 index 22ecdf68eb..fb10e69206 100644 --- 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 index 82312b4f72..e9d1a075b8 100644 --- 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 index b31e686d65..f78c6eadb4 100644 --- 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 index d1269c89f5..ddf67df291 100644 --- 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; } 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) => 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 index f56d36b8af..6ee3780774 100644 --- 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 index f4946859fa..102373aaca 100644 --- 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: must have an id, linking it to it\'s target element using the data-tooltip-target attribute.', ); } @@ -126,7 +132,7 @@ export class PostTooltip { (this.popoverRef = el)} > diff --git a/packages/components/src/components/post-tooltip/readme.md b/packages/components/src/components/post-tooltip/readme.md index 0bad4d5a4a..cb015f8702 100644 --- 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 index 2a4d01e7e6..7e5cdc64a8 100644 --- 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 index c488c9c6d3..c0cc9b45f7 100644 --- a/packages/demo/src/app/common/footer/footer.component.html +++ b/packages/demo/src/app/common/footer/footer.component.html @@ -30,7 +30,7 @@

Support