From 0a1f3081526fb7b57ec3a9ea4586274dc01ee62e Mon Sep 17 00:00:00 2001 From: Alona Zherdetska <138328641+alionazherdetska@users.noreply.github.com> Date: Fri, 27 Sep 2024 09:30:47 +0200 Subject: [PATCH] feat(docs): create a design principles docs page (#3565) 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/six-spiders-smoke.md | 5 +++ packages/documentation/.storybook/preview.ts | 1 + .../design-principles.data.ts | 32 +++++++++++++++++++ .../design-principles.docs.mdx | 25 +++++++++++++++ .../design-principles.stories.ts | 16 ++++++++++ .../design-principles.styles.scss | 25 +++++++++++++++ 6 files changed, 104 insertions(+) create mode 100644 .changeset/six-spiders-smoke.md create mode 100644 packages/documentation/src/stories/getting-started/design-principles/design-principles.data.ts create mode 100644 packages/documentation/src/stories/getting-started/design-principles/design-principles.docs.mdx create mode 100644 packages/documentation/src/stories/getting-started/design-principles/design-principles.stories.ts create mode 100644 packages/documentation/src/stories/getting-started/design-principles/design-principles.styles.scss diff --git a/.changeset/six-spiders-smoke.md b/.changeset/six-spiders-smoke.md new file mode 100644 index 0000000000..d5412eccd1 --- /dev/null +++ b/.changeset/six-spiders-smoke.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-documentation': minor +--- + +Added documentation for design principles. diff --git a/packages/documentation/.storybook/preview.ts b/packages/documentation/.storybook/preview.ts index 6feb7e62e2..ba2aca3353 100644 --- a/packages/documentation/.storybook/preview.ts +++ b/packages/documentation/.storybook/preview.ts @@ -33,6 +33,7 @@ const preview: Preview = { 'Getting Started', [ 'Introduction', + 'Design Principles', 'Mission', 'Angular', 'Compatibility', diff --git a/packages/documentation/src/stories/getting-started/design-principles/design-principles.data.ts b/packages/documentation/src/stories/getting-started/design-principles/design-principles.data.ts new file mode 100644 index 0000000000..1a0d44aa5d --- /dev/null +++ b/packages/documentation/src/stories/getting-started/design-principles/design-principles.data.ts @@ -0,0 +1,32 @@ +interface Principles { + icon: string; + title: string; + description: string; +} + +export const principles: Principles[] = [ + { + icon: '2525', + title: 'Easy to use', + description: + 'Create easy-to-use design patterns that consider the five elements of usability: Effectiveness, Efficiency, Engagement, Error Tolerance, and Ease of learning. This helps us to promote industry standards amongst our community and lowers the barrier of entry for new employees.', + }, + { + icon: '2526', + title: 'Trustworthy', + description: + 'We establish mutual trust with our stakeholders by creating robust and consistent patterns, maintaining comprehensive documentation, communicating transparently, and actively engaging with our community. Through these efforts, we ensure that our stakeholders can rely on our work. As a result, we can scale adoption across the organization, unlocking our full efficiency potential.', + }, + { + icon: '2527', + title: 'Cordial', + description: + 'We approach our customers on equal footing. By aligning our communication patterns with the Posts’ guidelines, we ensure that our interactions mirror how Post employees engage with clients: cordially, courteously, anticipatively, and empathically. Our goal is to foster the same strong bond between customers and the Post that exists beyond digital channels.', + }, + { + icon: '2524', + title: 'Inclusive', + description: + 'We promote inclusivity. We’re designing for diverse abilities, access to technology, literacy, economic circumstances, educational backgrounds, geographic locations, ages, and languages. With this approach, we ensure that everyone can use the public services we provide.', + }, +]; diff --git a/packages/documentation/src/stories/getting-started/design-principles/design-principles.docs.mdx b/packages/documentation/src/stories/getting-started/design-principles/design-principles.docs.mdx new file mode 100644 index 0000000000..bd4c8d292b --- /dev/null +++ b/packages/documentation/src/stories/getting-started/design-principles/design-principles.docs.mdx @@ -0,0 +1,25 @@ +import { Meta } from '@storybook/blocks'; +import * as DesignPrinciplesStories from './design-principles.stories'; +import './design-principles.styles.scss'; +import { principles } from './design-principles.data'; + + + +# Design Principles + +Our aim is to make things simple, trustworthy, and inclusive. We create easy-to-use designs, build trust with clear communication, and ensure everyone feels included. + +## Core Principles + +
+ {principles.map((principle, index) => ( +
+
+ +

{principle.title}

+

{principle.description}

+
+
+ ))} +
+ diff --git a/packages/documentation/src/stories/getting-started/design-principles/design-principles.stories.ts b/packages/documentation/src/stories/getting-started/design-principles/design-principles.stories.ts new file mode 100644 index 0000000000..93a86e9a40 --- /dev/null +++ b/packages/documentation/src/stories/getting-started/design-principles/design-principles.stories.ts @@ -0,0 +1,16 @@ +import { MetaExtended } from '@root/types'; +import { StoryObj } from '@storybook/web-components'; + +const meta: MetaExtended = { + id: '43f5818c-98a0-48ba-84f1-bf4d8fe1e70d', + title: 'Getting Started/Design Principles', + parameters: { + badges: [], + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = {}; diff --git a/packages/documentation/src/stories/getting-started/design-principles/design-principles.styles.scss b/packages/documentation/src/stories/getting-started/design-principles/design-principles.styles.scss new file mode 100644 index 0000000000..39a8de1101 --- /dev/null +++ b/packages/documentation/src/stories/getting-started/design-principles/design-principles.styles.scss @@ -0,0 +1,25 @@ +@use '@swisspost/design-system-styles/core.scss' as post; + +.principle-container { + padding: 0; + + &-container--item { + display: flex; + align-items: stretch; + } +} + +.principle { + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); + padding: 2rem; + height: 100%; + + &--title { + font-size: post.$font-size-regular; + } + + &--description { + font-size: post.$font-size-sm; + margin-top: 1rem; + } +}