From f28edf11dfcc852d8ba36bffbab90d6046017d4b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Sch=C3=A4r?= <59233938+schaertim@users.noreply.github.com> Date: Wed, 25 Sep 2024 11:23:45 +0200 Subject: [PATCH 1/3] feat(tokens): add new tokens (#3583) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Oliver Schürch Co-authored-by: Travaglini Alessio <158268546+Vandapanda@users.noreply.github.com> Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com> --- .../tokens/tokensstudio-generated/tokens.json | 124 +++++++++++++++--- 1 file changed, 109 insertions(+), 15 deletions(-) diff --git a/packages/tokens/tokensstudio-generated/tokens.json b/packages/tokens/tokensstudio-generated/tokens.json index aac47ad70e..3aeba6d967 100644 --- a/packages/tokens/tokensstudio-generated/tokens.json +++ b/packages/tokens/tokensstudio-generated/tokens.json @@ -186,6 +186,16 @@ "colorless": { "$type": "color", "$value": "rgba(255,255,255,0)" + }, + "cargo": { + "green": { + "$type": "color", + "$value": "#00411C" + }, + "blue": { + "$type": "color", + "$value": "#AADCFF" + } } }, "dimension": { @@ -482,6 +492,10 @@ "swiss-post": { "$type": "fontFamilies", "$value": "Swiss Post Sans v005" + }, + "caveat": { + "$type": "fontFamilies", + "$value": "Caveat" } }, "elevation": { @@ -1311,6 +1325,10 @@ "$type": "color", "$value": "{post.core.color.notification.green}" }, + "stroke4": { + "$type": "color", + "$value": "{post.core.color.notification.green}" + }, "stroke2": { "$type": "color", "$value": "{post.core.color.brand.white}" @@ -2501,6 +2519,10 @@ "dropdown": { "$type": "borderWidth", "$value": "{post.core.dimension.3}" + }, + "switch": { + "$type": "borderWidth", + "$value": "{post.core.dimension.1}" } } } @@ -5666,6 +5688,10 @@ "success": { "$type": "color", "$value": "{post.mode.color.signal.success-dark}" + }, + "disabled": { + "$type": "color", + "$value": "{post.mode.color.interactive.primary.disabled.fg1}" } }, "focus": { @@ -5676,36 +5702,80 @@ "border-width": { "$type": "borderWidth", "$value": "{post.device.border-width.focus}" + }, + "outline": { + "offset": { + "$type": "spacing", + "$value": "{post.device.spacing.padding.2}" + } + }, + "border-radius": { + "$type": "borderRadius", + "$value": "{post.device.border-radius.focus}" + }, + "border-style": { + "$type": "other", + "$value": "{post.core.border-style.solid}" } }, - "element": { - "enabled-fg": { + "handle": { + "enabled": { "$type": "color", "$value": "{post.mode.color.interactive.primary.enabled.fg3}" }, + "selected": { + "$type": "color", + "$value": "{post.mode.color.interactive.primary.selected.fg3}" + }, + "selected-stroke": { + "$type": "color", + "$value": "{post.mode.color.interactive.primary.selected.stroke3}" + }, + "hover": { + "$type": "color", + "$value": "{post.mode.color.interactive.primary.hover.fg3}" + }, + "hover-stroke": { + "$type": "color", + "$value": "{post.mode.color.interactive.primary.hover.stroke3}" + }, + "disabled": { + "$type": "color", + "$value": "{post.mode.color.interactive.primary.disabled.fg3}" + }, + "disabled-stroke": { + "$type": "color", + "$value": "{post.mode.color.interactive.primary.disabled.stroke2}" + }, + "enabled-stroke": { + "$type": "color", + "$value": "{post.mode.color.interactive.primary.enabled.stroke3}" + } + }, + "element": { "enabled-bg": { "$type": "color", "$value": "{post.mode.color.interactive.primary.enabled.bg2}" }, - "selected-fg": { + "enabled-stroke": { "$type": "color", - "$value": "{post.mode.color.interactive.primary.selected.fg3}" + "$value": "{post.mode.color.interactive.primary.enabled.stroke}" }, "selected-bg": { "$type": "color", "$value": "{post.mode.color.interactive.primary.selected.bg2}" }, - "hover-fg": { + "selected-stroke": { "$type": "color", - "$value": "{post.mode.color.interactive.primary.enabled.fg3}" + "$value": "{post.mode.color.interactive.primary.selected.stroke4}" }, "hover-bg": { "$type": "color", "$value": "{post.mode.color.interactive.primary.hover.bg2}" }, - "disabled-fg": { + "hover-stroke": { "$type": "color", - "$value": "{post.mode.color.interactive.primary.disabled.fg3}" + "$value": "{post.mode.color.interactive.primary.hover.stroke}" }, "disabled-bg": { "$type": "color", @@ -5760,7 +5830,15 @@ "disabled": { "$type": "other", "$value": "{post.core.border-style.dash}" + }, + "default": { + "$type": "other", + "$value": "{post.core.border-style.solid}" } + }, + "border-width": { + "$type": "borderWidth", + "$value": "{post.device.border-width.switch}" } } } @@ -7919,6 +7997,7 @@ "post.mode.color.interactive.primary.hover.stroke3": "14a61f7a4a47175acaef2dd2464dca3c3b7bfb68", "post.mode.color.interactive.primary.disabled.bg4": "cbd472c5f53fe207babc9d0e2f387dd7235ca8b6", "post.mode.color.interactive.primary.disabled.stroke3": "b6f6a8caf670f7786560c10a897be950454f63ee", + "post.mode.color.interactive.primary.selected.stroke4": "353c807b673deaaff93fcad6cb2dd45c6e1370e8", "post.mode.color.interactive.primary.selected.stroke2": "1970ea4439a04f01188d4140ac306585206f56ad", "post.mode.color.interactive.primary.selected.stroke3": "b88b12d27abd17687a1e6a0d24ab3922070fa022", "post.mode.color.interactive.notification.info.fg": "e6f2ca071f61c4adc7af9dfc4d1ff088e2002a0a", @@ -8063,6 +8142,7 @@ "post.mode.color.interactive.primary.selected.stroke1": "550b96f317e985b79917fd707c1f6d236784f93b", "post.mode.color.interactive.primary.selected.fg3": "3bc8c4d9ce8927f0cea9dd992737f3a6d6293953", "post.mode.color.interactive.primary.selected.bg2": "7a0bd1da8b79f4a8df41671ea87ff9459da972b9", + "post.mode.color.interactive.primary.selected.stroke4": "353c807b673deaaff93fcad6cb2dd45c6e1370e8", "post.mode.color.interactive.primary.selected.stroke2": "1970ea4439a04f01188d4140ac306585206f56ad", "post.mode.color.interactive.primary.selected.stroke3": "b88b12d27abd17687a1e6a0d24ab3922070fa022", "post.mode.color.interactive.notification.info.fg": "e6f2ca071f61c4adc7af9dfc4d1ff088e2002a0a", @@ -8237,7 +8317,8 @@ "post.device.border-radius.focus2": "3ff458677ebb45c67aa0d62f737f529bf937fc1d", "post.device.border-width.default": "e5f71facc552cd21f6cd7daa18a64c8e8e5ce6a6", "post.device.border-width.focus": "36b85b12779fa51b466bbb29ec9f9a54b1ab7dcc", - "post.device.border-width.dropdown": "ee4d9dfc6effe80e3529f2cf085a3e3c60cdda30" + "post.device.border-width.dropdown": "ee4d9dfc6effe80e3529f2cf085a3e3c60cdda30", + "post.device.border-width.switch": "3304b579ebb55075ec45251e69d38c803cecf378" } }, { @@ -8380,7 +8461,8 @@ "post.device.border-radius.focus2": "3ff458677ebb45c67aa0d62f737f529bf937fc1d", "post.device.border-width.default": "e5f71facc552cd21f6cd7daa18a64c8e8e5ce6a6", "post.device.border-width.focus": "36b85b12779fa51b466bbb29ec9f9a54b1ab7dcc", - "post.device.border-width.dropdown": "ee4d9dfc6effe80e3529f2cf085a3e3c60cdda30" + "post.device.border-width.dropdown": "ee4d9dfc6effe80e3529f2cf085a3e3c60cdda30", + "post.device.border-width.switch": "3304b579ebb55075ec45251e69d38c803cecf378" } }, { @@ -8530,7 +8612,8 @@ "post.device.font-weight.black": "e4cfc49770e938bbde9dd1499500d3c90db21bbf", "post.device.border-width.default": "e5f71facc552cd21f6cd7daa18a64c8e8e5ce6a6", "post.device.border-width.focus": "36b85b12779fa51b466bbb29ec9f9a54b1ab7dcc", - "post.device.border-width.dropdown": "ee4d9dfc6effe80e3529f2cf085a3e3c60cdda30" + "post.device.border-width.dropdown": "ee4d9dfc6effe80e3529f2cf085a3e3c60cdda30", + "post.device.border-width.switch": "3304b579ebb55075ec45251e69d38c803cecf378" } }, { @@ -9150,15 +9233,21 @@ "post.switch.icon.success": "7e344a6a3c5ecf08f4d78441e5cfcf81ae31e621", "post.switch.focus.stroke": "cc7404ba6c33820a9d8a3f46da5f480a57f0396a", "post.switch.focus.border-width": "4b43ee21ab1f74866a20fc2a52a85758b251fa08", - "post.switch.element.enabled-fg": "159a42184822eb3538fd9468fbf9c6b63fbf1bcf", + "post.switch.handle.enabled": "159a42184822eb3538fd9468fbf9c6b63fbf1bcf", "post.switch.element.enabled-bg": "37fb6c23301facfc96d382de26a14360537fdd97", - "post.switch.element.selected-fg": "2f079a496bed636dcee54a30516d00f400de1f52", + "post.switch.element.enabled-stroke": "00a540c9a955281331681f6fc44963f93bb85ce7", + "post.switch.handle.selected": "2f079a496bed636dcee54a30516d00f400de1f52", + "post.switch.handle.selected-stroke": "18d9b72bedfc5af7007948148e850f31754c6efb", "post.switch.element.selected-bg": "292407a115b9c5819acd71fbbb8a7994c4b17b5a", - "post.switch.element.hover-fg": "367b21171b85011ace3484d3caaf20ca4de50580", + "post.switch.element.selected-stroke": "d7bda56904422c2dc2873f41275e915ce36fbdd6", + "post.switch.handle.hover": "367b21171b85011ace3484d3caaf20ca4de50580", + "post.switch.handle.hover-stroke": "9a48352912e77688b3638c63de7b650745b69c0e", "post.switch.element.hover-bg": "beaf5e6053691c5f8676c64899f0d146c194f8ff", - "post.switch.element.disabled-fg": "87edfd0659df5be763802e5b407c9cd64220fb49", + "post.switch.element.hover-stroke": "3a916db6238187c672c6be218f714d9cb6bf87f3", + "post.switch.handle.disabled": "87edfd0659df5be763802e5b407c9cd64220fb49", "post.switch.element.disabled-bg": "5ef2c2c58f565ae99b8655056dd15c48ac67e696", "post.switch.element.disabled-stroke": "d3b935fe8ebcbf2e85582f53fa9f5a8138250b11", + "post.switch.handle.disabled-stroke": "68580f77c8c59cfe3fd6ed8092787242604fa765", "post.switch.element.width": "2c777f81d27d17b298a80176a9321eb9728da712", "post.switch.element.height": "2bb770e36f1b556d983d21b595509f3e91a47655", "post.switch.element.handle": "c09fd2baa596cab64d62c4fb1fca8fa8c26291c5", @@ -9166,6 +9255,11 @@ "post.switch.padding.block.text": "fdf8cc0d615a1cd0116f36d0e88f0909474b74c2", "post.switch.padding.inline.handle": "b512bd24b1efc090fbf71338c7581b91be49db5c", "post.switch.border-radius.round": "4cc09b8f409accc41f0553e1fb332ba603b3e501", + "post.switch.handle.enabled-stroke": "5faf69a23034b7d86ae53ae4b6e45d758ad291a5", + "post.switch.border-width": "c45a9f2a969bb1f731fbb1f2c1433a57d238be0e", + "post.switch.icon.disabled": "34c32196503b8fd0e443b51da233db8104427d3f", + "post.switch.focus.outline.offset": "2c42767ea35fb51cdc8dc4a15d6cbb3f6f26ac63", + "post.switch.focus.border-radius": "ee07bb6fbecfe55279bca6b6b57dca40019d8523", "post.textarea.color.enabled-bg": "9f294c42d575aff74d6cf90d734367a803194216", "post.textarea.color.enabled-fg": "7d5bb970bd293753c57df39aaeaa38b7d279a90c", "post.textarea.color.hover-bg": "91d02a0756c0a534d57e42cdb64636d2d2e368dd", From cedf5c367592eeb1c22bda06a99a45f28b32e9c8 Mon Sep 17 00:00:00 2001 From: Alona Zherdetska <138328641+alionazherdetska@users.noreply.github.com> Date: Wed, 25 Sep 2024 11:35:23 +0200 Subject: [PATCH 2/3] feat(docs): create a mission statement docs page (#3568) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Zherdetska Alona, IT21.1 Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com> --- .changeset/lemon-clocks-clean.md | 5 ++ packages/documentation/.storybook/preview.ts | 10 ++- .../mission/mission.blocks.tsx | 54 +++++++++++++++ .../getting-started/mission/mission.docs.mdx | 65 +++++++++++++++++++ .../mission/mission.stories.ts | 16 +++++ .../mission/mission.styles.scss | 55 ++++++++++++++++ 6 files changed, 204 insertions(+), 1 deletion(-) create mode 100644 .changeset/lemon-clocks-clean.md create mode 100644 packages/documentation/src/stories/getting-started/mission/mission.blocks.tsx create mode 100644 packages/documentation/src/stories/getting-started/mission/mission.docs.mdx create mode 100644 packages/documentation/src/stories/getting-started/mission/mission.stories.ts create mode 100644 packages/documentation/src/stories/getting-started/mission/mission.styles.scss diff --git a/.changeset/lemon-clocks-clean.md b/.changeset/lemon-clocks-clean.md new file mode 100644 index 0000000000..558225f41c --- /dev/null +++ b/.changeset/lemon-clocks-clean.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-documentation': minor +--- + +Added documentation outlining the mission statement of the Design System. diff --git a/packages/documentation/.storybook/preview.ts b/packages/documentation/.storybook/preview.ts index abef0ed326..6feb7e62e2 100644 --- a/packages/documentation/.storybook/preview.ts +++ b/packages/documentation/.storybook/preview.ts @@ -31,7 +31,15 @@ const preview: Preview = { // Category - Getting Started 'Getting Started', - ['Introduction', 'Angular', 'Compatibility', 'Packages', 'Changelogs', 'Migration Guide'], + [ + 'Introduction', + 'Mission', + 'Angular', + 'Compatibility', + 'Packages', + 'Changelogs', + 'Migration Guide', + ], // Category - Foundations 'Foundations', diff --git a/packages/documentation/src/stories/getting-started/mission/mission.blocks.tsx b/packages/documentation/src/stories/getting-started/mission/mission.blocks.tsx new file mode 100644 index 0000000000..ddb370d6a5 --- /dev/null +++ b/packages/documentation/src/stories/getting-started/mission/mission.blocks.tsx @@ -0,0 +1,54 @@ +interface Role { + role: string; + description: string; +} + +interface Stakeholder { + role: string; +} + +interface TeamMembers { + name: string; + icon: string; +} + +export const stakeholders: Stakeholder[] = [ + { + role: 'Management', + }, + { + role: 'DevOps Team', + }, + { + role: 'Architecture', + }, + { + role: 'Project Management', + }, + { + role: 'Branding', + }, +]; + +export const roles: Role[] = [ + { + role: 'Web & Mobile Developers', + description: 'Utilize the system to build responsive, accessible, and consistent interfaces.', + }, + { + role: 'Digital Designers', + description: + 'Rely on standardized components to create user-friendly and cohesive experiences.', + }, + { + role: 'Digital Product Owners', + description: + 'Ensure product development aligns with Swiss Post’s design principles and standards.', + }, +]; + +export const teamMembers: TeamMembers[] = [ + { name: 'Development', icon: '2546' }, + { name: 'Visual Design', icon: '2591' }, + { name: 'User Experience', icon: '2336' }, +]; diff --git a/packages/documentation/src/stories/getting-started/mission/mission.docs.mdx b/packages/documentation/src/stories/getting-started/mission/mission.docs.mdx new file mode 100644 index 0000000000..4ce3c9399d --- /dev/null +++ b/packages/documentation/src/stories/getting-started/mission/mission.docs.mdx @@ -0,0 +1,65 @@ +import { Meta } from '@storybook/blocks'; +import * as MissionStories from './mission.stories'; +import { roles, stakeholders, teamMembers } from './mission.blocks'; +import './mission.styles.scss'; + + + +# Swiss Post Mission + +The Swiss Post Design System enables project teams to create seamless user experiences across all digital touchpoints by providing patterns, guidance and tools. + +## Who Uses the Design System? + + + +### The Design System is well represented and supported by our stakeholders, including: + + + + +### Documentation + +Entry points to the Design System are public. All documentation is written in English and uses common terminology. The documentation platforms are in sync with implementations and cross-linked. Regular updates ensure that the documentation stays aligned with the latest changes and best practices. + +### Core Team + + + +These contributors are responsible for major implementations and play a central role in shaping the system. To ensure meaningful input, they have allocated time and budget to actively participate in the project, both in Figma and Web development. + +### Quality & Compliance + +People are using the Design System because it has a low barrier of entry, excellent documentation, is easy to use, and improves the time to market for their product significantly. It fulfills the standards of the Web Content Accessibility Guidelines (WCAG), Level AA. + +
+

Onboarding is mandatory for external agencies.

+
+ +

+ The quality of the Design System is being measured by pre-defined KPIs and is constantly improved. +

+ +### Tooling + +Design System tooling fosters collaboration between diverse disciplines and encourages contribution. It is built to provide flexibility, allowing teams to choose the platform or framework that best suits their needs. diff --git a/packages/documentation/src/stories/getting-started/mission/mission.stories.ts b/packages/documentation/src/stories/getting-started/mission/mission.stories.ts new file mode 100644 index 0000000000..afd260fdbd --- /dev/null +++ b/packages/documentation/src/stories/getting-started/mission/mission.stories.ts @@ -0,0 +1,16 @@ +import { MetaExtended } from '@root/types'; +import { StoryObj } from '@storybook/web-components'; + +const meta: MetaExtended = { + id: 'b421ac9b-bac4-4e95-a909-64fdb58fc3a6', + title: 'Getting Started/Mission', + parameters: { + badges: [], + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = {}; diff --git a/packages/documentation/src/stories/getting-started/mission/mission.styles.scss b/packages/documentation/src/stories/getting-started/mission/mission.styles.scss new file mode 100644 index 0000000000..f44ca7bd30 --- /dev/null +++ b/packages/documentation/src/stories/getting-started/mission/mission.styles.scss @@ -0,0 +1,55 @@ +@use '@swisspost/design-system-styles/core.scss' as post; + +.no-style-list { + margin: 0; + padding: 0; + list-style: none; +} + +.roles-list { + display: grid; + grid-template-rows: repeat(3, 1fr); + justify-content: center; +} + +.role-item { + margin-bottom: 1rem; + padding: 1rem; + border: 1px solid #ddd; + border-radius: 6px; +} + +.stakeholders-list { + justify-content: center; + align-items: center; +} + +.stakeholder-item { + padding: 1rem; + border: 1px solid #dee2e6; + text-align: center; +} + +.team-list { + justify-content: center; + margin-bottom: 1rem; +} + +.team-item { + display: flex; + justify-content: center; + border: 1px solid #dee2e6; + align-items: center; + padding: 1rem; + gap: 1rem; + font-weight: bold; +} + +.alert { + margin-top: 1rem; +} + +.quality-text { + margin-top: 1rem; + text-align: left; +} From 8c78c13f56e51f79a126e2aa8d5a740b40a35172 Mon Sep 17 00:00:00 2001 From: Alona Zherdetska <138328641+alionazherdetska@users.noreply.github.com> Date: Wed, 25 Sep 2024 11:37:32 +0200 Subject: [PATCH 3/3] fix(readme): fix the typo in the README.md (#3581) Co-authored-by: Zherdetska Alona, IT21.1 --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 2a3dcd198f..fbf5aef6c7 100644 --- a/README.md +++ b/README.md @@ -13,10 +13,10 @@ ## Packages | Name | Description | Version | Changelog URL | -| :------------------------------------------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------- | +| :------------------------------------------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |:------------------------------------------------------------------------------| | [Styles](https://design-system.post.ch/?path=/docs/e53e2de8-0bbf-4f70-babc-074c5466f700--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://design-system.post.ch/?path=/docs/edfb619b-fda1-4570-bf25-20830303d483--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://design-system.post.ch/?path=/docs/9b02bcb2-3b6a-4271-b550-675a62ff3890--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) | +| [Internet Header](https://design-system.post.ch/?path=/docs/9b02bcb2-3b6a-4271-b550-675a62ff3890--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) | [Internet Header changelog](/packages/internet-header/CHANGELOG.md) | | [Intranet Header](https://design-system.post.ch/?path=/docs/d59a459b-6f14-47c6-9f98-a36a3f79a6e3--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://design-system.post.ch/?path=/docs/40ed323b-9c1a-42ab-91ed-15f97f214608--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) |