-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into 3414-foundations-typography-heading-h1---h6
- Loading branch information
Showing
22 changed files
with
470 additions
and
72 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| '@swisspost/design-system-documentation': minor | ||
| --- | ||
|
|
||
| Added documentation outlining the mission statement of the Design System. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| '@swisspost/design-system-documentation': minor | ||
| --- | ||
|
|
||
| Added documentation for design principles. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
153 changes: 99 additions & 54 deletions
153
packages/documentation/.storybook/addons/styles-switcher/StylesSwitcher.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
32 changes: 32 additions & 0 deletions
32
...ges/documentation/src/stories/getting-started/design-principles/design-principles.data.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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.', | ||
| }, | ||
| ]; |
25 changes: 25 additions & 0 deletions
25
...tation/src/stories/getting-started/design-principles/design-principles.docs.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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'; | ||
|
|
||
| <Meta of={DesignPrinciplesStories} /> | ||
|
|
||
| # 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 | ||
|
|
||
| <div className="row principle-container"> | ||
| {principles.map((principle, index) => ( | ||
| <div className="col-lg-3 principle-container--item" key={index}> | ||
| <div className="principle"> | ||
| <post-icon name={principle.icon} style={{ fontSize: '3rem' }}></post-icon> | ||
| <h3 className="principle--title mt-small-large">{principle.title}</h3> | ||
| <p className="principle--description">{principle.description}</p> | ||
| </div> | ||
| </div> | ||
| ))} | ||
| </div> | ||
|
|
16 changes: 16 additions & 0 deletions
16
.../documentation/src/stories/getting-started/design-principles/design-principles.stories.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 = {}; |
25 changes: 25 additions & 0 deletions
25
...documentation/src/stories/getting-started/design-principles/design-principles.styles.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } | ||
| } |
Oops, something went wrong.