feat(docs): create a design principles docs page (#3565)

Co-authored-by: Zherdetska Alona, IT21.1 <[email protected]>
Co-authored-by: Alizé Debray <[email protected]>

.changeset/six-spiders-smoke.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': minor
+---
+
+Added documentation for design principles.

packages/documentation/.storybook/preview.ts

@@ -33,6 +33,7 @@ const preview: Preview = {
           'Getting Started',
           [
             'Introduction',
+            'Design Principles',
             'Mission',
             'Angular',
             'Compatibility',

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.',
+  },
+];

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';
+
+<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>
+

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 = {};

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;
+  }
+}