From 907248dec3f278173dfb82b7e09ceb2e81c8dc2c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= Date: Tue, 3 Dec 2024 15:08:39 +0100 Subject: [PATCH 01/21] deps(components): install design-system-icons package and add copy task to make icons available in the package for development --- packages/components/package.json | 1 + packages/components/stencil.config.ts | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/packages/components/package.json b/packages/components/package.json index 98518267d4..b34c2f57f7 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -40,6 +40,7 @@ "dependencies": { "@floating-ui/dom": "1.6.8", "@oddbird/popover-polyfill": "0.3.7", + "@swisspost/design-system-icons": "workspace:9.0.0-next.6", "@swisspost/design-system-styles": "workspace:9.0.0-next.6", "ally.js": "1.4.1", "long-press-event": "2.5.0" diff --git a/packages/components/stencil.config.ts b/packages/components/stencil.config.ts index 73a7418ec9..d5324640b0 100644 --- a/packages/components/stencil.config.ts +++ b/packages/components/stencil.config.ts @@ -35,6 +35,10 @@ export const config: Config = { src: '../node_modules/@swisspost/design-system-styles/*.css', dest: 'assets/css', }, + { + src: '../node_modules/@swisspost/design-system-icons/public/post-icons/*.svg', + dest: 'assets/icons', + }, ], serviceWorker: null, // disable service workers, }, From b98bec2f84de7615b0c48e602deaf199a01e410a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= Date: Tue, 3 Dec 2024 15:49:38 +0100 Subject: [PATCH 02/21] fix(icons): remove fill and stroke attributes from svg elements --- packages/icons/svgo.config.ui.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/icons/svgo.config.ui.ts b/packages/icons/svgo.config.ui.ts index c133772b09..78a9d08f3d 100644 --- a/packages/icons/svgo.config.ui.ts +++ b/packages/icons/svgo.config.ui.ts @@ -27,7 +27,7 @@ export default { name: 'removeAttrs', params: { elemSeparator: '::', - attrs: ['style', 'data-.*', 'svg::(width|height|xml:space)'], + attrs: ['style', 'fill', 'stroke', 'data-.*', 'svg::(width|height|xml:space)'], }, }, ], From 6ea46193f0a1c61e400bd6f4f1f6a8815d0a5aaf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= Date: Tue, 3 Dec 2024 17:24:12 +0100 Subject: [PATCH 03/21] feat(icons): update output of icons to make them available in css --- packages/icons/src/constants.ts | 32 +++++++++++++++++++++++ packages/icons/src/utilities/buildSVGs.ts | 2 +- 2 files changed, 33 insertions(+), 1 deletion(-) diff --git a/packages/icons/src/constants.ts b/packages/icons/src/constants.ts index f63e060e18..20385f5c78 100644 --- a/packages/icons/src/constants.ts +++ b/packages/icons/src/constants.ts @@ -19,7 +19,35 @@ export const ICON_V1_TEMPLATE = ` {uses} `; +const ICON_V2_CONTAINER_STYLES = ICON_V2_SIZES.map((size, i) => { + const nextSize = ICON_V2_SIZES[i + 1]; + const min = i !== 0 && `(min-width: ${size}px)`; + const max = i < ICON_V2_SIZES.length - 1 && `(max-width: ${nextSize - 1}px)`; + + return `@container pi ${[min, max].filter(Boolean).join(' and ')} { + g { + --pis-${size}: block; + } + }`; +}); + +const ICON_V2_TEMPLATE_STYLES = ``; + export const ICON_V2_TEMPLATE = ` + ${ICON_V2_TEMPLATE_STYLES.split('\n') + .map(line => line.trim()) + .map(line => (line.startsWith('@') ? line : line.replace(/(\s|\t|\n)/g, ''))) + .join('')} @@ -29,4 +57,8 @@ export const ICON_V2_TEMPLATE = ` {uses} + + + + `; diff --git a/packages/icons/src/utilities/buildSVGs.ts b/packages/icons/src/utilities/buildSVGs.ts index 53b94a1616..615a2df6ec 100644 --- a/packages/icons/src/utilities/buildSVGs.ts +++ b/packages/icons/src/utilities/buildSVGs.ts @@ -159,7 +159,7 @@ function createFiles(groupedFilePaths: Record) { function createSvg(id: string, template: string, symbols: string[], uses: string[]): string { const file = template - .replace('{id}', `${ID_PREFIX}-${id}`) + .replaceAll('{id}', `${ID_PREFIX}-${id}`) .replace('{symbols}', symbols.join('')) .replace('{uses}', uses.join('')); From 26eee7a1073a9838a859569573855f14875c8e85 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= Date: Tue, 3 Dec 2024 17:25:11 +0100 Subject: [PATCH 04/21] feat(styles): add post-icon mixin to use our icons in styles package. --- packages/styles/src/mixins/_icons.scss | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/styles/src/mixins/_icons.scss b/packages/styles/src/mixins/_icons.scss index 0d3683626d..c3a5f80185 100644 --- a/packages/styles/src/mixins/_icons.scss +++ b/packages/styles/src/mixins/_icons.scss @@ -14,6 +14,20 @@ forced-color-adjust: preserve-parent-color; } +@mixin post-icon( + $base: 'https://unpkg.com/@swisspost/design-system-icons/public/post-icons', + $name: '', + $color: currentColor +) { + display: inline-block; + width: 1em; + height: 1em; + vertical-align: -0.15em; + background-color: currentColor; + color: $color; + mask-image: url('#{$base}/#{$name}.svg'); +} + @mixin remove-icon() { mask-image: none; } From 183ec7bf652a3792d4e7eee33bcc4e10a27f7a4c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= Date: Tue, 3 Dec 2024 17:25:22 +0100 Subject: [PATCH 05/21] chore: update pnpm-lock --- pnpm-lock.yaml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 15b4017db3..92bdb2c0a7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -46,6 +46,9 @@ importers: '@oddbird/popover-polyfill': specifier: 0.3.7 version: 0.3.7 + '@swisspost/design-system-icons': + specifier: workspace:9.0.0-next.6 + version: link:../icons '@swisspost/design-system-styles': specifier: workspace:9.0.0-next.6 version: link:../styles/dist From 2b18dbcfe087ccf514879e54ccf82671d9e87712 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= Date: Tue, 3 Dec 2024 17:25:50 +0100 Subject: [PATCH 06/21] feat(documentation): update icon docs page to show how to use the post-icon mixin --- .../stories/foundations/icons/icon.docs.mdx | 80 +++++++++++++++---- .../stories/foundations/icons/icon.stories.ts | 22 +++++ .../foundations/icons/icon.styles.scss | 39 +++++++++ .../foundations/icons/mixin.sample.scss | 11 +++ 4 files changed, 136 insertions(+), 16 deletions(-) create mode 100644 packages/documentation/src/stories/foundations/icons/icon.styles.scss create mode 100644 packages/documentation/src/stories/foundations/icons/mixin.sample.scss diff --git a/packages/documentation/src/stories/foundations/icons/icon.docs.mdx b/packages/documentation/src/stories/foundations/icons/icon.docs.mdx index b2fb68e6e2..654b04f996 100644 --- a/packages/documentation/src/stories/foundations/icons/icon.docs.mdx +++ b/packages/documentation/src/stories/foundations/icons/icon.docs.mdx @@ -1,7 +1,9 @@ -import { Canvas, Controls, Meta } from '@storybook/blocks'; +import { Canvas, Controls, Meta, Source } from '@storybook/blocks'; import * as IconStories from './icon.stories'; import { PostTabHeader, PostTabPanel, PostTabs } from '@swisspost/design-system-components-react'; +import SampleMixin from './mixin.sample.scss?raw'; import { Search } from './search/search-icons.blocks'; +import './icon.styles.scss'; @@ -14,19 +16,12 @@ import { Search } from './search/search-icons.blocks';
- The official Swiss Post Icon Library for the web with over 800 high-quality scalable vector - graphics. + The official Swiss Post Icon Library with 900+ high-quality svg icons and the official Swiss Post UI Icons Library, exclusivley designed and provided for the web with 160+ icons and size-dependent level-of-detail.
- - Usage - - Our <post-icon> component renders SVGs, so it scales quickly and easily and can - be styled with CSS. - - - - + + Installation + ## Installation ### Icon Component @@ -38,8 +33,64 @@ import { Search } from './search/search-icons.blocks'; The SVG files for icons should be hosted within your project. For guidelines on how to set this up, please refer to the [icon package documentation](/?path=/docs/40ed323b-9c1a-42ab-91ed-15f97f214608--docs#usage). + - ## Examples + Usage in CSS + + ## Usage in CSS + + To define one of our icons in your own CSS, you need the `@swisspost/design-system-styles` package and use our `post-icon` mixin. The icons can have a different level-of-detail, dependant on how big they are rendered on the page. + + Note: The used classes in the example below are only there for demonstration purposes. + + + + ### Mixin + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionDefault
`$name`The name of the icon which should be used.
Find the name of your desired icon in one of the tabs above.		-
`$base`The base URL, where to load the icon from. Keep this undefined to get the icons loaded from unpkg.com (NOT recommended) or specifiy a path to your self-hosted icons.`https://unpkg.com/`
`$color`The color in which the icon should be implemented.
You can change that also by just overriding the `color` property on the icon selector.		`currentColor`
+ + + + Usage as Web-Component + + ## Usage as Web-Component + + Our <post-icon> component renders SVGs, so it scales quickly and easily and can + be styled with CSS. + + + ### Color @@ -102,9 +153,6 @@ import { Search } from './search/search-icons.blocks'; Find your Icon - The icons are designed to work with the Swiss Post Design System components. They are SVGs, so they scale and can be styled with CSS.
- Use the grid below to browse all available icons. - diff --git a/packages/documentation/src/stories/foundations/icons/icon.stories.ts b/packages/documentation/src/stories/foundations/icons/icon.stories.ts index ee403f21c2..c476b93ee9 100644 --- a/packages/documentation/src/stories/foundations/icons/icon.stories.ts +++ b/packages/documentation/src/stories/foundations/icons/icon.stories.ts @@ -254,3 +254,25 @@ export const Animate: Story = { generateDecorators(story, context, 'd-flex flex-wrap text-center'), ], }; + +export const ScssMixin: Story = { + render: () => { + return html` +
+
+
+
+
+
+
+
+
+
+
+
+ `; + }, +}; diff --git a/packages/documentation/src/stories/foundations/icons/icon.styles.scss b/packages/documentation/src/stories/foundations/icons/icon.styles.scss new file mode 100644 index 0000000000..b916229228 --- /dev/null +++ b/packages/documentation/src/stories/foundations/icons/icon.styles.scss @@ -0,0 +1,39 @@ +@use '@swisspost/design-system-styles/core' as post; + +.my-accessibility-icon { + @include post.post-icon($name: 'accessibility', $base: '/post-icons'); +} + +.my-handvictory-icon { + @include post.post-icon($name: 'handvictory', $base: '/post-icons', $color: #666666); +} + +.my-icon-1 { + width: 16px; + height: 16px; +} + +.my-icon-2 { + width: 24px; + height: 24px; +} + +.my-icon-3 { + width: 32px; + height: 32px; +} + +.my-icon-4 { + width: 40px; + height: 40px; +} + +.my-icon-5 { + width: 48px; + height: 48px; +} + +.my-icon-6 { + width: 64px; + height: 64px; +} diff --git a/packages/documentation/src/stories/foundations/icons/mixin.sample.scss b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss new file mode 100644 index 0000000000..736236e69a --- /dev/null +++ b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss @@ -0,0 +1,11 @@ +@use '@swisspost/design-system-styles/core' as post; + +.my-icon { + @include post.post-icon( + $name: 'accessibility', + // optional + $base: '/optional/path/to/your/self-hosted/svgs', + // optional + $color: '#fc0' + ); +} From 727823c4b04c6b20f47454a6825da0fc182c3ad5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= Date: Tue, 3 Dec 2024 17:30:34 +0100 Subject: [PATCH 07/21] chore: changeset --- .changeset/lovely-mails-clap.md | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 .changeset/lovely-mails-clap.md diff --git a/.changeset/lovely-mails-clap.md b/.changeset/lovely-mails-clap.md new file mode 100644 index 0000000000..0ba7bb852c --- /dev/null +++ b/.changeset/lovely-mails-clap.md @@ -0,0 +1,8 @@ +--- +'@swisspost/design-system-documentation': minor +'@swisspost/design-system-styles': minor +'@swisspost/design-system-icons': minor +--- + +Updated the output structure of our UI-Icons. +Added a `post-icon` mixin, to use any of our icons from within SCSS. From 6747db28c884d845e4070039198bd21e164b99b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= Date: Wed, 4 Dec 2024 08:32:46 +0100 Subject: [PATCH 08/21] revert(components): revert component package, they will be added with another pr --- packages/components/package.json | 1 - packages/components/stencil.config.ts | 4 ---- 2 files changed, 5 deletions(-) diff --git a/packages/components/package.json b/packages/components/package.json index b34c2f57f7..98518267d4 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -40,7 +40,6 @@ "dependencies": { "@floating-ui/dom": "1.6.8", "@oddbird/popover-polyfill": "0.3.7", - "@swisspost/design-system-icons": "workspace:9.0.0-next.6", "@swisspost/design-system-styles": "workspace:9.0.0-next.6", "ally.js": "1.4.1", "long-press-event": "2.5.0" diff --git a/packages/components/stencil.config.ts b/packages/components/stencil.config.ts index d5324640b0..73a7418ec9 100644 --- a/packages/components/stencil.config.ts +++ b/packages/components/stencil.config.ts @@ -35,10 +35,6 @@ export const config: Config = { src: '../node_modules/@swisspost/design-system-styles/*.css', dest: 'assets/css', }, - { - src: '../node_modules/@swisspost/design-system-icons/public/post-icons/*.svg', - dest: 'assets/icons', - }, ], serviceWorker: null, // disable service workers, }, From e59d97601baff8e340df6ca94beb77e54362fb94 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= Date: Wed, 4 Dec 2024 09:42:38 +0100 Subject: [PATCH 09/21] chore(components): update lock file --- pnpm-lock.yaml | 3 --- 1 file changed, 3 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 92bdb2c0a7..15b4017db3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -46,9 +46,6 @@ importers: '@oddbird/popover-polyfill': specifier: 0.3.7 version: 0.3.7 - '@swisspost/design-system-icons': - specifier: workspace:9.0.0-next.6 - version: link:../icons '@swisspost/design-system-styles': specifier: workspace:9.0.0-next.6 version: link:../styles/dist From 815b5251eee29b30904d3169a4704bb4aae31ebd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= Date: Wed, 4 Dec 2024 11:25:36 +0100 Subject: [PATCH 10/21] fix(icons): rename closex-soliid source icons --- .../{CloseX_Solid_Shape__16.svg => CloseX_Solid_Shape_16.svg} | 0 .../{CloseX_Solid_Shape__24.svg => CloseX_Solid_Shape_24.svg} | 0 .../{CloseX_Solid_Shape__32.svg => CloseX_Solid_Shape_32.svg} | 0 .../{CloseX_Solid_Shape__40.svg => CloseX_Solid_Shape_40.svg} | 0 .../{CloseX_Solid_Shape__48.svg => CloseX_Solid_Shape_48.svg} | 0 .../{CloseX_Solid_Shape__64.svg => CloseX_Solid_Shape_64.svg} | 0 6 files changed, 0 insertions(+), 0 deletions(-) rename packages/icons/src/icons/ui/CloseX/{CloseX_Solid_Shape__16.svg => CloseX_Solid_Shape_16.svg} (100%) rename packages/icons/src/icons/ui/CloseX/{CloseX_Solid_Shape__24.svg => CloseX_Solid_Shape_24.svg} (100%) rename packages/icons/src/icons/ui/CloseX/{CloseX_Solid_Shape__32.svg => CloseX_Solid_Shape_32.svg} (100%) rename packages/icons/src/icons/ui/CloseX/{CloseX_Solid_Shape__40.svg => CloseX_Solid_Shape_40.svg} (100%) rename packages/icons/src/icons/ui/CloseX/{CloseX_Solid_Shape__48.svg => CloseX_Solid_Shape_48.svg} (100%) rename packages/icons/src/icons/ui/CloseX/{CloseX_Solid_Shape__64.svg => CloseX_Solid_Shape_64.svg} (100%) diff --git a/packages/icons/src/icons/ui/CloseX/CloseX_Solid_Shape__16.svg b/packages/icons/src/icons/ui/CloseX/CloseX_Solid_Shape_16.svg similarity index 100% rename from packages/icons/src/icons/ui/CloseX/CloseX_Solid_Shape__16.svg rename to packages/icons/src/icons/ui/CloseX/CloseX_Solid_Shape_16.svg diff --git a/packages/icons/src/icons/ui/CloseX/CloseX_Solid_Shape__24.svg b/packages/icons/src/icons/ui/CloseX/CloseX_Solid_Shape_24.svg similarity index 100% rename from packages/icons/src/icons/ui/CloseX/CloseX_Solid_Shape__24.svg rename to packages/icons/src/icons/ui/CloseX/CloseX_Solid_Shape_24.svg diff --git a/packages/icons/src/icons/ui/CloseX/CloseX_Solid_Shape__32.svg b/packages/icons/src/icons/ui/CloseX/CloseX_Solid_Shape_32.svg similarity index 100% rename from packages/icons/src/icons/ui/CloseX/CloseX_Solid_Shape__32.svg rename to packages/icons/src/icons/ui/CloseX/CloseX_Solid_Shape_32.svg diff --git a/packages/icons/src/icons/ui/CloseX/CloseX_Solid_Shape__40.svg b/packages/icons/src/icons/ui/CloseX/CloseX_Solid_Shape_40.svg similarity index 100% rename from packages/icons/src/icons/ui/CloseX/CloseX_Solid_Shape__40.svg rename to packages/icons/src/icons/ui/CloseX/CloseX_Solid_Shape_40.svg diff --git a/packages/icons/src/icons/ui/CloseX/CloseX_Solid_Shape__48.svg b/packages/icons/src/icons/ui/CloseX/CloseX_Solid_Shape_48.svg similarity index 100% rename from packages/icons/src/icons/ui/CloseX/CloseX_Solid_Shape__48.svg rename to packages/icons/src/icons/ui/CloseX/CloseX_Solid_Shape_48.svg diff --git a/packages/icons/src/icons/ui/CloseX/CloseX_Solid_Shape__64.svg b/packages/icons/src/icons/ui/CloseX/CloseX_Solid_Shape_64.svg similarity index 100% rename from packages/icons/src/icons/ui/CloseX/CloseX_Solid_Shape__64.svg rename to packages/icons/src/icons/ui/CloseX/CloseX_Solid_Shape_64.svg From 8cede7048e2b71e205d3023bc58ea26ea58a5ab2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= Date: Tue, 17 Dec 2024 12:56:24 +0100 Subject: [PATCH 11/21] chore(components): update autogenerated readme.md and components.d.ts files --- packages/components/src/components.d.ts | 16 ---------------- .../components/post-language-option/readme.md | 15 +++++++-------- .../components/post-language-switch/readme.md | 1 - pnpm-lock.yaml | 16 ++++++++++++---- 4 files changed, 19 insertions(+), 29 deletions(-) diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts index 9acbc7fda6..5d8f389ea1 100644 --- a/packages/components/src/components.d.ts +++ b/packages/components/src/components.d.ts @@ -218,10 +218,6 @@ export namespace Components { * The ISO 639 language code, formatted according to [RFC 5646 (also known as BCP 47)](https://datatracker.ietf.org/doc/html/rfc5646). For example, "de". */ "code": string; - /** - * Used on parent component (post-language-switch) to detect elements that are manually added - */ - "generated": boolean; /** * The full name of the language. For example, "Deutsch". */ @@ -248,10 +244,6 @@ export namespace Components { * A descriptive text for the list of language options */ "description": string; - /** - * The name of the language switch, which will be used on the dropdown as an ID - */ - "name": string; /** * Variant that determines the rendering of the language switch either as a list (used on mobile in the header) or a dropdown (used on desktop in the header) */ @@ -1046,10 +1038,6 @@ declare namespace LocalJSX { * The ISO 639 language code, formatted according to [RFC 5646 (also known as BCP 47)](https://datatracker.ietf.org/doc/html/rfc5646). For example, "de". */ "code": string; - /** - * Used on parent component (post-language-switch) to detect elements that are manually added - */ - "generated"?: boolean; /** * The full name of the language. For example, "Deutsch". */ @@ -1076,10 +1064,6 @@ declare namespace LocalJSX { * A descriptive text for the list of language options */ "description"?: string; - /** - * The name of the language switch, which will be used on the dropdown as an ID - */ - "name"?: string; /** * Variant that determines the rendering of the language switch either as a list (used on mobile in the header) or a dropdown (used on desktop in the header) */ diff --git a/packages/components/src/components/post-language-option/readme.md b/packages/components/src/components/post-language-option/readme.md index 1b9514058f..8aff93a8a1 100644 --- a/packages/components/src/components/post-language-option/readme.md +++ b/packages/components/src/components/post-language-option/readme.md @@ -7,14 +7,13 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | ----------- | -| `active` | `active` | If set to `true`, the language option is considered the current language for the page. | `boolean` | `undefined` | -| `code` _(required)_ | `code` | The ISO 639 language code, formatted according to [RFC 5646 (also known as BCP 47)](https://datatracker.ietf.org/doc/html/rfc5646). For example, "de". | `string` | `undefined` | -| `generated` | `generated` | Used on parent component (post-language-switch) to detect elements that are manually added | `boolean` | `undefined` | -| `name` | `name` | The full name of the language. For example, "Deutsch". | `string` | `undefined` | -| `url` | `url` | The URL used for the href attribute of the internal anchor. This field is optional; if not provided, a button will be used internally instead of an anchor. | `string` | `undefined` | -| `variant` | `variant` | The variant of the post-language-switch parent (dynamically set by the parent) | `"dropdown" \| "list"` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | ----------- | +| `active` | `active` | If set to `true`, the language option is considered the current language for the page. | `boolean` | `undefined` | +| `code` _(required)_ | `code` | The ISO 639 language code, formatted according to [RFC 5646 (also known as BCP 47)](https://datatracker.ietf.org/doc/html/rfc5646). For example, "de". | `string` | `undefined` | +| `name` | `name` | The full name of the language. For example, "Deutsch". | `string` | `undefined` | +| `url` | `url` | The URL used for the href attribute of the internal anchor. This field is optional; if not provided, a button will be used internally instead of an anchor. | `string` | `undefined` | +| `variant` | `variant` | The variant of the post-language-switch parent (dynamically set by the parent) | `"dropdown" \| "list"` | `undefined` | ## Events diff --git a/packages/components/src/components/post-language-switch/readme.md b/packages/components/src/components/post-language-switch/readme.md index c2079be7d3..8beb610dfa 100644 --- a/packages/components/src/components/post-language-switch/readme.md +++ b/packages/components/src/components/post-language-switch/readme.md @@ -9,7 +9,6 @@ | ------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | ----------- | | `caption` | `caption` | A title for the list of language options | `string` | `undefined` | | `description` | `description` | A descriptive text for the list of language options | `string` | `undefined` | -| `name` | `name` | The name of the language switch, which will be used on the dropdown as an ID | `string` | `undefined` | | `variant` | `variant` | Variant that determines the rendering of the language switch either as a list (used on mobile in the header) or a dropdown (used on desktop in the header) | `"dropdown" \| "list"` | `'list'` | diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 147b78436b..5031b6aa97 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -15803,7 +15803,7 @@ snapshots: axios@1.7.7: dependencies: - follow-redirects: 1.15.6(debug@4.3.7) + follow-redirects: 1.15.6(debug@4.3.6) form-data: 4.0.0 proxy-from-env: 1.1.0 transitivePeerDependencies: @@ -18513,7 +18513,7 @@ snapshots: http-proxy-middleware@2.0.6(@types/express@4.17.21): dependencies: '@types/http-proxy': 1.17.15 - http-proxy: 1.18.1(debug@4.3.7) + http-proxy: 1.18.1 is-glob: 4.0.3 is-plain-obj: 3.0.0 micromatch: 4.0.8 @@ -18533,6 +18533,14 @@ snapshots: transitivePeerDependencies: - supports-color + http-proxy@1.18.1: + dependencies: + eventemitter3: 4.0.7 + follow-redirects: 1.15.6(debug@4.3.6) + requires-port: 1.0.0 + transitivePeerDependencies: + - debug + http-proxy@1.18.1(debug@4.3.7): dependencies: eventemitter3: 4.0.7 @@ -18548,7 +18556,7 @@ snapshots: corser: 2.0.1 he: 1.2.0 html-encoding-sniffer: 3.0.0 - http-proxy: 1.18.1(debug@4.3.7) + http-proxy: 1.18.1 mime: 1.6.0 minimist: 1.2.8 opener: 1.5.2 @@ -19684,7 +19692,7 @@ snapshots: dom-serialize: 2.2.1 glob: 7.2.3 graceful-fs: 4.2.11 - http-proxy: 1.18.1(debug@4.3.7) + http-proxy: 1.18.1 isbinaryfile: 4.0.10 lodash: 4.17.21 log4js: 6.9.1 From e16f29bebc323345999a17984488f4ac163a0a49 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= Date: Tue, 17 Dec 2024 12:58:03 +0100 Subject: [PATCH 12/21] refactor(icons): ui-icon template to use media queries --- packages/icons/src/constants.ts | 37 ++++++++++------------- packages/icons/src/utilities/buildSVGs.ts | 3 +- 2 files changed, 17 insertions(+), 23 deletions(-) diff --git a/packages/icons/src/constants.ts b/packages/icons/src/constants.ts index 20385f5c78..784a0aba86 100644 --- a/packages/icons/src/constants.ts +++ b/packages/icons/src/constants.ts @@ -9,8 +9,6 @@ export const ID_UNWANTED_PARTS = ['shape']; export const ID_SYMBOL_PREFIX = 's'; export const ID_SYMBOL_SEPERATOR = ''; -export const ICON_SIZE_VAR_NAME = 'pis'; - export const ICON_V1_TEMPLATE = ` {symbols} @@ -19,40 +17,37 @@ export const ICON_V1_TEMPLATE = ` {uses} `; -const ICON_V2_CONTAINER_STYLES = ICON_V2_SIZES.map((size, i) => { - const nextSize = ICON_V2_SIZES[i + 1]; - const min = i !== 0 && `(min-width: ${size}px)`; - const max = i < ICON_V2_SIZES.length - 1 && `(max-width: ${nextSize - 1}px)`; - - return `@container pi ${[min, max].filter(Boolean).join(' and ')} { - g { - --pis-${size}: block; - } - }`; -}); - const ICON_V2_TEMPLATE_STYLES = ``; + ${ICON_V2_SIZES.map((size, i) => { + const isFirst = size === ICON_V2_SIZES[0]; + const isLast = size === ICON_V2_SIZES[ICON_V2_SIZES.length - 1]; + const nextSize = ICON_V2_SIZES[i + 1]; + const min = !isFirst && `(min-width: ${size}px)`; + const max = !isLast && `(max-width: ${nextSize - 1}px)`; + + return `@media ${[min, max].filter(Boolean).join(' and ')} { + g { + --${ID_SYMBOL_PREFIX}${size}: block; + } + }`; + }).join('\n\n')} + `; export const ICON_V2_TEMPLATE = ` ${ICON_V2_TEMPLATE_STYLES.split('\n') .map(line => line.trim()) .map(line => (line.startsWith('@') ? line : line.replace(/(\s|\t|\n)/g, ''))) .join('')} + } - - {symbols} - + {symbols} {uses} diff --git a/packages/icons/src/utilities/buildSVGs.ts b/packages/icons/src/utilities/buildSVGs.ts index 615a2df6ec..93083c003e 100644 --- a/packages/icons/src/utilities/buildSVGs.ts +++ b/packages/icons/src/utilities/buildSVGs.ts @@ -17,7 +17,6 @@ import { ID_UNWANTED_PARTS, ID_SYMBOL_PREFIX, ID_SYMBOL_SEPERATOR, - ICON_SIZE_VAR_NAME, ICON_V1_TEMPLATE, ICON_V2_TEMPLATE, } from '../constants'; @@ -147,7 +146,7 @@ function createFiles(groupedFilePaths: Record) { const useElement = parse('').querySelector('use') as HTMLElement; if (size !== null) - useElement.setAttribute('style', `display: var(--${ICON_SIZE_VAR_NAME}-${size}, none)`); + useElement.setAttribute('style', `display: var(--${ID_SYMBOL_PREFIX}${size}, none)`); useElement.setAttribute('href', `#${getSymbolId(symbolId, size)}`); return useElement.toString(); From 56c77b9dd6b9dbc49dcb58f6324b33368a0141f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= Date: Tue, 17 Dec 2024 12:58:26 +0100 Subject: [PATCH 13/21] chore(styles): update icons mixin and make it more backward compatible --- packages/styles/src/mixins/_icons.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/styles/src/mixins/_icons.scss b/packages/styles/src/mixins/_icons.scss index c3a5f80185..e2f57e707a 100644 --- a/packages/styles/src/mixins/_icons.scss +++ b/packages/styles/src/mixins/_icons.scss @@ -16,8 +16,8 @@ @mixin post-icon( $base: 'https://unpkg.com/@swisspost/design-system-icons/public/post-icons', - $name: '', - $color: currentColor + $name, + $color: inherit ) { display: inline-block; width: 1em; @@ -25,6 +25,7 @@ vertical-align: -0.15em; background-color: currentColor; color: $color; + -webkit-mask-image: url('#{$base}/#{$name}.svg'); mask-image: url('#{$base}/#{$name}.svg'); } From ff4ce88ed71c377c5ba3600aead337370d3d3176 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= Date: Tue, 17 Dec 2024 16:39:31 +0100 Subject: [PATCH 14/21] chore(styles): udpate post-icon mixin and use some more mask-image properties --- packages/styles/src/mixins/_icons.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/styles/src/mixins/_icons.scss b/packages/styles/src/mixins/_icons.scss index e2f57e707a..aad0b97019 100644 --- a/packages/styles/src/mixins/_icons.scss +++ b/packages/styles/src/mixins/_icons.scss @@ -27,6 +27,12 @@ color: $color; -webkit-mask-image: url('#{$base}/#{$name}.svg'); mask-image: url('#{$base}/#{$name}.svg'); + -webkit-mask-position: center center; + mask-position: center center; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100%; + mask-size: 100%; } @mixin remove-icon() { From 651449bb3ecdc1b0f1f3c862d721ed9524d739a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= Date: Tue, 17 Dec 2024 16:40:33 +0100 Subject: [PATCH 15/21] feat(icons): improve icons v2 template --- packages/icons/src/constants.ts | 20 ++++++-------------- 1 file changed, 6 insertions(+), 14 deletions(-) diff --git a/packages/icons/src/constants.ts b/packages/icons/src/constants.ts index 784a0aba86..e5407f257b 100644 --- a/packages/icons/src/constants.ts +++ b/packages/icons/src/constants.ts @@ -13,17 +13,10 @@ export const ICON_V1_TEMPLATE = ` {symbols} - {uses} `; const ICON_V2_TEMPLATE_STYLES = ` ); } From 285864f3c9dee28ee8402e521d29b7a5309188ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= Date: Tue, 17 Dec 2024 21:43:56 +0100 Subject: [PATCH 17/21] Update packages/documentation/src/stories/foundations/icons/icon.docs.mdx Co-authored-by: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com> --- .../documentation/src/stories/foundations/icons/icon.docs.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation/src/stories/foundations/icons/icon.docs.mdx b/packages/documentation/src/stories/foundations/icons/icon.docs.mdx index 654b04f996..e6133649ee 100644 --- a/packages/documentation/src/stories/foundations/icons/icon.docs.mdx +++ b/packages/documentation/src/stories/foundations/icons/icon.docs.mdx @@ -16,7 +16,7 @@ import './icon.styles.scss';
- The official Swiss Post Icon Library with 900+ high-quality svg icons and the official Swiss Post UI Icons Library, exclusivley designed and provided for the web with 160+ icons and size-dependent level-of-detail. + The official Swiss Post Icon Library with 900+ high-quality svg icons and the brand new UI Icon Set, exclusively designed and provided for the web with 160+ icons and responsive level-of-detail.
From 8f7ac21ceb3a0d644500100ddd1b71e1230fe0bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= Date: Tue, 17 Dec 2024 21:44:06 +0100 Subject: [PATCH 18/21] Update packages/documentation/src/stories/foundations/icons/icon.docs.mdx Co-authored-by: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com> --- .../documentation/src/stories/foundations/icons/icon.docs.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation/src/stories/foundations/icons/icon.docs.mdx b/packages/documentation/src/stories/foundations/icons/icon.docs.mdx index e6133649ee..7deea373a8 100644 --- a/packages/documentation/src/stories/foundations/icons/icon.docs.mdx +++ b/packages/documentation/src/stories/foundations/icons/icon.docs.mdx @@ -39,7 +39,7 @@ import './icon.styles.scss'; ## Usage in CSS - To define one of our icons in your own CSS, you need the `@swisspost/design-system-styles` package and use our `post-icon` mixin. The icons can have a different level-of-detail, dependant on how big they are rendered on the page. + To define an icon in your own CSS, you need the `@swisspost/design-system-styles` package and use our `post-icon` mixin. The icons are responsive and can have a different level-of-detail, depending on how big they are rendered on the page. Note: The used classes in the example below are only there for demonstration purposes. From be23a95ac91fd6fa5e74df59e76882b89bdb31c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= Date: Wed, 18 Dec 2024 15:16:49 +0100 Subject: [PATCH 19/21] feat(documentation): upate icon documentation page --- .../stories/foundations/icons/icon.docs.mdx | 112 +++++---- .../stories/foundations/icons/icon.stories.ts | 216 ++++++++---------- .../foundations/icons/icon.styles.scss | 57 ++--- 3 files changed, 183 insertions(+), 202 deletions(-) diff --git a/packages/documentation/src/stories/foundations/icons/icon.docs.mdx b/packages/documentation/src/stories/foundations/icons/icon.docs.mdx index d38a0744bd..e2e45316ae 100644 --- a/packages/documentation/src/stories/foundations/icons/icon.docs.mdx +++ b/packages/documentation/src/stories/foundations/icons/icon.docs.mdx @@ -35,53 +35,6 @@ import './icon.styles.scss'; For guidelines on how to set this up, please refer to the [icon package documentation](/?path=/docs/40ed323b-9c1a-42ab-91ed-15f97f214608--docs#usage). - Usage in CSS - - ## Usage in CSS - - To define an icon in your own CSS, you need the `@swisspost/design-system-styles` package and use our `post-icon` mixin. The icons are responsive and can have a different level-of-detail, depending on how big they are rendered on the page. - - Note: The used classes in the example below are only there for demonstration purposes. - - - - ### Mixin - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDescriptionDefault
`$name`The name of the icon which should be used.
Find the name of your desired icon in one of the tabs above.		-
`$base`The base URL, where to load the icon from. Keep this undefined to get the icons loaded from unpkg.com (NOT recommended) or specifiy a path to your self-hosted icons.`https://unpkg.com/`
`$color`The color in which the icon should be implemented.
You can change that also by just overriding the `color` property on the icon selector.		`currentColor`
- - - Usage as Web-Component ## Usage as Web-Component @@ -89,33 +42,34 @@ import './icon.styles.scss'; Our <post-icon> component renders SVGs, so it scales quickly and easily and can be styled with CSS. + + ### UI Icons + + UI icons are responsive and can have a different level-of-detail, depending on how big they are rendered on the page. + Use the resize handle in the example to see how the icon changes while you change its size. + + + ### Color By default, icons inherit the current text color of their parent element.
- You can therefore colorize an icon using our [text color utilities](/?path=/docs/c55681df-4d21-469d-a5b3-c67686e7c104--docs) - or by setting the CSS directly through a style attribute or self-defined classes. + You can therefore colorize an icon by simply changing the `color` css property of the element itself. ### Size - Icons have a default `width` of `1em`, which means they will scale with the size of the current `font-size`. - Therefore, you can manage the size of an icon using our [font-size utilities](/?path=/docs/c55681df-4d21-469d-a5b3-c67686e7c104--docs) - or by setting the CSS directly through a style attribute or self-defined classes. + Icons have a default `width` of `1em`, which means they will scale with the size of the current `font-size` css property. - ### Style - - With the use of our [border](#TODO) and [padding](#TODO) utilities, you can create various styling effects. - - - ### Transformations + The following examples are available by default only in the `` web-component. To do something similar with the CSS mixin, you would need to use the `transform` property or add your own css animations. + #### Flipping Flip the icon horizontally and/or vertically with the `flip-h` and `flip-v` props. @@ -151,9 +105,49 @@ import './icon.styles.scss'; + Usage as CSS-Background + + ## Usage in CSS + + To define an icon in your own CSS, you need the `@swisspost/design-system-styles` package and use our `post-icon` mixin. The icons are responsive and can have a different level-of-detail, depending on how big they are rendered on the page. + +

The used classes in the examples below are only there for demonstration purposes.

+ + ### Post Icons + + + + ### UI Icons + + UI icons are responsive and can have a different level-of-detail, depending on how big they are rendered on the page. Use the resize handle in the example to see how the icon changes while you change its size. + + + + ### Colors + + By default, icons inherit the current text color of their parent element. + You can therefore colorize an icon by simply changing the `color` css property of the element itself. + + + + ### Size + + Icons have a default `width` of `1em`, which means they will scale with the size of the current `font-size` css property. + + + + ### Mixin usage + + + + + Find your Icon - diff --git a/packages/documentation/src/stories/foundations/icons/icon.stories.ts b/packages/documentation/src/stories/foundations/icons/icon.stories.ts index f6c033c045..6acf655705 100644 --- a/packages/documentation/src/stories/foundations/icons/icon.stories.ts +++ b/packages/documentation/src/stories/foundations/icons/icon.stories.ts @@ -58,14 +58,21 @@ const meta: MetaComponent = { options: [null, 'cylon', 'cylon-vertical', 'spin', 'spin-reverse', 'fade', 'throb'], }, }, - render: args => html` `, + render: args => html``, }; +export default meta; +type Story = StoryObj; + function normalizeArgs(args: Args) { // remove attribute with falsy values return Object.fromEntries(Object.entries(args).filter(([_, v]) => v)); } +const generateDecorators = (story: StoryFn, context: StoryContext, className?: string) => { + return html`
${story(context.args, context)}
`; +}; + const renderVariants = ( args: Args, customAttrs: { [key: string]: string | boolean | number | undefined }[], @@ -73,35 +80,39 @@ const renderVariants = ( return html` ${customAttrs.map( variantArgs => - html` `, + html``, )} `; }; -const generateDecorators = (story: StoryFn, context: StoryContext, className?: string) => { +const renderAnimateVariants = (args: Args, customAttrs: { name: string; animation: string }[]) => { return html` -
- ${story(context.args, context)} -
+ ${customAttrs.map( + variantArgs => + html` +
+

Animation: ${variantArgs.animation}

+ +
+ `, + )} `; }; -export default meta; - -type Story = StoryObj; - export const Default: Story = { - decorators: [(story: StoryFn, context: StoryContext) => generateDecorators(story, context)], + decorators: [ + (story: StoryFn, context: StoryContext) => generateDecorators(story, context, 'fs-32'), + ], }; -const colorVariants = [ - { class: 'text-primary' }, - { class: 'text-info' }, - { class: 'text-success' }, - { style: 'color: blue' }, - { style: 'color:#800080' }, - { style: 'color: rgb(230, 0, 0)' }, -]; +export const UI: Story = { + args: { + name: 'accessibility', + }, + decorators: [ + (story: StoryFn, context: StoryContext) => generateDecorators(story, context, 'resizer'), + ], +}; export const Color: Story = { parameters: { @@ -109,166 +120,141 @@ export const Color: Story = { exclude: ['base', 'flip-h', 'flip-v', 'scale', 'rotate', 'animation'], }, }, - render: args => renderVariants(args, colorVariants), + render: args => + renderVariants(args, [ + { style: 'color: blue' }, + { style: 'color:#800080' }, + { style: 'color: rgb(230, 0, 0)' }, + ]), decorators: [ (story: StoryFn, context: StoryContext) => - generateDecorators(story, context, 'd-flex flex-wrap gap-8'), + generateDecorators(story, context, 'd-flex flex-wrap gap-8 fs-32'), ], }; -const sizeVariants = [ - { style: 'font-size: 1rem' }, - { class: 'h3 my-0' }, - { class: 'h1 my-0' }, - { class: 'fs-huge' }, - { style: 'font-size: 4rem' }, - { style: 'font-size: 6rem' }, -]; - export const Size: Story = { parameters: { controls: { exclude: ['base', 'flip-h', 'flip-v', 'scale', 'rotate', 'animation'], }, }, - render: args => renderVariants(args, sizeVariants), + render: args => + renderVariants(args, [ + { style: 'font-size: 1rem' }, + { style: 'font-size: 3rem' }, + { style: 'font-size: 6rem' }, + ]), decorators: [ (story: StoryFn, context: StoryContext) => generateDecorators(story, context, 'd-flex flex-column'), ], }; -const styleVariants = [ - { class: 'border rounded p-16', style: 'font-size: 4rem' }, - { class: 'border border-success rounded p-16 text-success', style: 'font-size: 4rem' }, - { class: 'rounded-circle p-16', style: 'font-size: 4rem; background-color: #cce4ee' }, -]; - -export const Style: Story = { +export const Flip: Story = { parameters: { controls: { exclude: ['base', 'flip-h', 'flip-v', 'scale', 'rotate', 'animation'], }, }, - render: args => renderVariants(args, styleVariants), + render: args => + renderVariants(args, [ + {}, + { 'flip-h': true }, + { 'flip-v': true }, + { 'flip-h': true, 'flip-v': true }, + ]), decorators: [ (story: StoryFn, context: StoryContext) => - generateDecorators(story, context, 'd-flex flex-wrap gap-8'), + generateDecorators(story, context, 'd-flex flex-wrap gap-8 fs-32'), ], }; -const flipVariants = [ - {}, - { 'flip-h': true }, - { 'flip-v': true }, - { 'flip-h': true, 'flip-v': true }, -]; - -export const Flip: Story = { +export const Scale: Story = { parameters: { controls: { exclude: ['base', 'flip-h', 'flip-v', 'scale', 'rotate', 'animation'], }, }, - render: args => renderVariants(args, flipVariants), + render: args => renderVariants(args, [{ scale: 0.5 }, {}, { scale: 1.5 }]), decorators: [ (story: StoryFn, context: StoryContext) => - generateDecorators(story, context, 'd-flex flex-wrap gap-8'), + generateDecorators(story, context, 'd-flex flex-wrap gap-24 fs-32 scale-container'), ], }; -const scaleVariants = [{ scale: 0.5 }, {}, { scale: 1.5 }]; - -export const Scale: Story = { +export const Rotate: Story = { parameters: { controls: { exclude: ['base', 'flip-h', 'flip-v', 'scale', 'rotate', 'animation'], }, }, - render: args => renderVariants(args, scaleVariants), + render: args => + renderVariants(args, [ + { rotate: -365 }, + { rotate: -249 }, + { rotate: -35.5 }, + { rotate: 0 }, + { rotate: 98 }, + { rotate: 365 }, + { rotate: 753 }, + ]), decorators: [ (story: StoryFn, context: StoryContext) => - generateDecorators(story, context, 'd-flex flex-wrap gap-24 scale-container'), + generateDecorators(story, context, 'd-flex flex-wrap gap-8 fs-32'), ], }; -const rotateVariants = [ - { rotate: -365 }, - { rotate: -249 }, - { rotate: -35.5 }, - { rotate: 0 }, - { rotate: 98 }, - { rotate: 365 }, - { rotate: 753 }, -]; - -export const Rotate: Story = { +export const Animate: Story = { parameters: { controls: { - exclude: ['base', 'flip-h', 'flip-v', 'scale', 'rotate', 'animation'], + exclude: ['name', 'base', 'flip-h', 'flip-v', 'scale', 'rotate', 'animation'], }, }, - render: args => renderVariants(args, rotateVariants), + render: args => + renderAnimateVariants(args, [ + { name: '2253', animation: 'cylon' }, + { name: '2252', animation: 'cylon-vertical' }, + { name: '2041', animation: 'spin' }, + { name: '2042', animation: 'spin-reverse' }, + { name: '2151', animation: 'fade' }, + { name: '2063', animation: 'throb' }, + ]), decorators: [ (story: StoryFn, context: StoryContext) => - generateDecorators(story, context, 'd-flex flex-wrap gap-8'), + generateDecorators(story, context, 'd-flex flex-wrap text-center fs-32'), ], }; -const animateVariants = [ - { name: '2253', animation: 'cylon' }, - { name: '2252', animation: 'cylon-vertical' }, - { name: '2041', animation: 'spin' }, - { name: '2042', animation: 'spin-reverse' }, - { name: '2151', animation: 'fade' }, - { name: '2063', animation: 'throb' }, -]; +export const CSS_Default: Story = { + render: () => { + return html`
`; + }, + decorators: [ + (story: StoryFn, context: StoryContext) => generateDecorators(story, context, 'fs-32'), + ], +}; -const renderAnimateVariants = (args: Args, customAttrs: { name: string; animation: string }[]) => { - return html` - ${customAttrs.map( - variantArgs => - html` -
-

Animation: ${variantArgs.animation}

- -
- `, - )} - `; +export const CSS_UI: Story = { + render: () => { + return html`
`; + }, + decorators: [ + (story: StoryFn, context: StoryContext) => generateDecorators(story, context, 'resizer'), + ], }; -export const Animate: Story = { - parameters: { - controls: { - exclude: ['name', 'base', 'flip-h', 'flip-v', 'scale', 'rotate', 'animation'], - }, +export const CSS_Color: Story = { + render: () => { + return html`
`; }, - render: args => renderAnimateVariants(args, animateVariants), decorators: [ - (story: StoryFn, context: StoryContext) => - generateDecorators(story, context, 'd-flex flex-wrap text-center'), + (story: StoryFn, context: StoryContext) => generateDecorators(story, context, 'fs-32'), ], }; -export const ScssMixin: Story = { +export const CSS_Size: Story = { render: () => { - return html` -
-
-
-
-
-
-
-
-
-
-
-
- `; + return html`
`; }, + decorators: [(story: StoryFn, context: StoryContext) => generateDecorators(story, context)], }; diff --git a/packages/documentation/src/stories/foundations/icons/icon.styles.scss b/packages/documentation/src/stories/foundations/icons/icon.styles.scss index 8574218cc9..27e7ac3232 100644 --- a/packages/documentation/src/stories/foundations/icons/icon.styles.scss +++ b/packages/documentation/src/stories/foundations/icons/icon.styles.scss @@ -1,43 +1,44 @@ @use '@swisspost/design-system-styles/core' as post; -.scale-container post-icon { - background-color: post.$info; -} - -.my-accessibility-icon { - @include post.post-icon($name: 'accessibility', $base: '/post-icons'); -} +$resizer-padding: 1rem; +$resizer-border-width: 1px; +$resizer-border-color: #999; +$resizer-min-width: 16px; +$resizer-max-width: 64px; -.my-handvictory-icon { - @include post.post-icon($name: 'handvictory', $base: '/post-icons', $color: #666666); -} +.resizer { + display: inline-flex; + resize: horizontal; + overflow: hidden; + aspect-ratio: 1 / 1; + padding: $resizer-padding; + border: $resizer-border-width solid $resizer-border-color; + min-width: calc(#{$resizer-padding} * 2 + #{$resizer-border-width} * 2 + #{$resizer-min-width}); + max-width: calc(#{$resizer-padding} * 2 + #{$resizer-border-width} * 2 + #{$resizer-max-width}); -.my-icon-1 { - width: 16px; - height: 16px; + > * { + display: block !important; + width: 100% !important; + height: 100% !important; + } } -.my-icon-2 { - width: 24px; - height: 24px; +.fs-32 { + font-size: 32px; } -.my-icon-3 { - width: 32px; - height: 32px; +.scale-container post-icon { + background-color: post.$info; } -.my-icon-4 { - width: 40px; - height: 40px; +.my-1022-icon { + @include post.post-icon($name: '1022', $base: '/post-icons'); } -.my-icon-5 { - width: 48px; - height: 48px; +.my-accessibility-icon { + @include post.post-icon($name: 'accessibility', $base: '/post-icons'); } -.my-icon-6 { - width: 64px; - height: 64px; +.my-handvictory-icon { + @include post.post-icon($name: 'handvictory', $base: '/post-icons', $color: #666666); } From aac356f73f46e035defe08fc0c8e113e38b06f7a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= Date: Wed, 18 Dec 2024 15:25:35 +0100 Subject: [PATCH 20/21] chore(style): add stylelint-disable-next-line property-no-vendor-prefix to keep maximum backwards compatibility --- packages/styles/src/mixins/_icons.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/styles/src/mixins/_icons.scss b/packages/styles/src/mixins/_icons.scss index aad0b97019..5469997e38 100644 --- a/packages/styles/src/mixins/_icons.scss +++ b/packages/styles/src/mixins/_icons.scss @@ -25,12 +25,16 @@ vertical-align: -0.15em; background-color: currentColor; color: $color; + /* stylelint-disable-next-line property-no-vendor-prefix */ -webkit-mask-image: url('#{$base}/#{$name}.svg'); mask-image: url('#{$base}/#{$name}.svg'); + /* stylelint-disable-next-line property-no-vendor-prefix */ -webkit-mask-position: center center; mask-position: center center; + /* stylelint-disable-next-line property-no-vendor-prefix */ -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; + /* stylelint-disable-next-line property-no-vendor-prefix */ -webkit-mask-size: 100%; mask-size: 100%; } From 2c7ce5d983bbff83cb2f42abf301cc86d5740b67 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= Date: Fri, 20 Dec 2024 08:21:07 +0100 Subject: [PATCH 21/21] test(components): fix e2e test of card-control component --- packages/components/cypress/e2e/card-control.cy.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/cypress/e2e/card-control.cy.ts b/packages/components/cypress/e2e/card-control.cy.ts index 7ceb108cac..965b73523c 100644 --- a/packages/components/cypress/e2e/card-control.cy.ts +++ b/packages/components/cypress/e2e/card-control.cy.ts @@ -156,7 +156,7 @@ describe('Card-Control', () => { .invoke('attr', 'icon', '1000') .find('.card-control--icon slot[name="icon"] post-icon') .should('exist') - .find('use[href*="/1000.svg"]') + .find('[style*="/1000.svg"]') .should('exist'); cy.get('@card-control') .invoke('removeAttr', 'icon')