From 7f07a15e0615db9675ea8d34bda72fe50e1000ff Mon Sep 17 00:00:00 2001
From: karimim <muhammad.karimi@post.ch>
Date: Mon, 23 Sep 2024 10:59:47 +0200
Subject: [PATCH 01/16] feat: add paragraph style

---
 packages/styles/src/elements/_index.scss    | 1 +
 packages/styles/src/elements/paragraph.scss | 9 +++++++++
 2 files changed, 10 insertions(+)
 create mode 100644 packages/styles/src/elements/paragraph.scss

diff --git a/packages/styles/src/elements/_index.scss b/packages/styles/src/elements/_index.scss
index 76b6e5d06c..14665c48b5 100644
--- a/packages/styles/src/elements/_index.scss
+++ b/packages/styles/src/elements/_index.scss
@@ -1,2 +1,3 @@
 @use 'reset';
 @use 'body';
+@use 'paragraph';
diff --git a/packages/styles/src/elements/paragraph.scss b/packages/styles/src/elements/paragraph.scss
new file mode 100644
index 0000000000..5b8a6fd818
--- /dev/null
+++ b/packages/styles/src/elements/paragraph.scss
@@ -0,0 +1,9 @@
+@use 'sass:map';
+@use '../functions/tokens';
+@use '../tokens/elements';
+
+tokens.$default-map: elements.$post-paragraph;
+
+p {
+  margin-block-start: tokens.get('post-paragraph', 'margin-block-start');
+}

From 0cd8802941c85974c393907ad22c1d7abc56eedb Mon Sep 17 00:00:00 2001
From: karimim <muhammad.karimi@post.ch>
Date: Mon, 23 Sep 2024 11:09:11 +0200
Subject: [PATCH 02/16] feat: add paragraph style

---
 .changeset/sixty-items-promise.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/sixty-items-promise.md

diff --git a/.changeset/sixty-items-promise.md b/.changeset/sixty-items-promise.md
new file mode 100644
index 0000000000..3fb44e1125
--- /dev/null
+++ b/.changeset/sixty-items-promise.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': minor
+---
+
+Added paragraph style

From af02388f7f9e4ec67f6595e1f96726743e8d83e1 Mon Sep 17 00:00:00 2001
From: karimim <muhammad.karimi@post.ch>
Date: Mon, 23 Sep 2024 14:23:04 +0200
Subject: [PATCH 03/16] feat: add story for paragraph

---
 .../elements/paragraph/paragraph.docs.mdx     | 17 ++++++++++
 .../elements/paragraph/paragraph.stories.ts   | 34 +++++++++++++++++++
 2 files changed, 51 insertions(+)
 create mode 100644 packages/documentation/src/stories/components/elements/paragraph/paragraph.docs.mdx
 create mode 100644 packages/documentation/src/stories/components/elements/paragraph/paragraph.stories.ts

diff --git a/packages/documentation/src/stories/components/elements/paragraph/paragraph.docs.mdx b/packages/documentation/src/stories/components/elements/paragraph/paragraph.docs.mdx
new file mode 100644
index 0000000000..3bef85f0e8
--- /dev/null
+++ b/packages/documentation/src/stories/components/elements/paragraph/paragraph.docs.mdx
@@ -0,0 +1,17 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+import * as ParagraphStories from './paragraph.stories';
+import StylesPackageImport from '@/shared/styles-package-import.mdx';
+
+<Meta of={ParagraphStories} />
+
+<div className="docs-title">
+  # Paragraph
+
+  <nav>
+    <link-design of={JSON.stringify(ParagraphStories)}></link-design>
+  </nav>
+</div>
+
+This is a default paragraph without size variants.
+
+<Canvas of={ParagraphStories.Default} sourceState="shown" />
diff --git a/packages/documentation/src/stories/components/elements/paragraph/paragraph.stories.ts b/packages/documentation/src/stories/components/elements/paragraph/paragraph.stories.ts
new file mode 100644
index 0000000000..92f5cdc4ba
--- /dev/null
+++ b/packages/documentation/src/stories/components/elements/paragraph/paragraph.stories.ts
@@ -0,0 +1,34 @@
+import type { StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import { MetaExtended } from '@root/types';
+
+const meta: MetaExtended = {
+  id: '7ecd87f1-de96-4e39-a057-ba1798eb69593',
+  title: 'Elements/Paragraph',
+  parameters: {
+    badges: [],
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=26-49',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () => html`
+    <p>
+      This is a paragraph. It is a block of text that is separated from other blocks of text by a
+      blank line. It is usually indented at the beginning of the first line. The first word of a
+      paragraph is often indented more than the rest of the paragraph.
+    </p>
+    <p>
+      This is a paragraph. It is a block of text that is separated from other blocks of text by a
+      blank line. It is usually indented at the beginning of the first line. The first word of a
+      paragraph is often indented more than the rest of the paragraph.
+    </p>
+  `,
+};

From b9c36265725e06e9719ebfc654129b8f3c863b07 Mon Sep 17 00:00:00 2001
From: karimim <muhammad.karimi@post.ch>
Date: Mon, 23 Sep 2024 14:58:22 +0200
Subject: [PATCH 04/16] chore: edit text

---
 .../stories/components/elements/paragraph/paragraph.docs.mdx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/documentation/src/stories/components/elements/paragraph/paragraph.docs.mdx b/packages/documentation/src/stories/components/elements/paragraph/paragraph.docs.mdx
index 3bef85f0e8..d9be9afb9c 100644
--- a/packages/documentation/src/stories/components/elements/paragraph/paragraph.docs.mdx
+++ b/packages/documentation/src/stories/components/elements/paragraph/paragraph.docs.mdx
@@ -12,6 +12,6 @@ import StylesPackageImport from '@/shared/styles-package-import.mdx';
   </nav>
 </div>
 
-This is a default paragraph without size variants.
+Default paragraph without size variants.
 
 <Canvas of={ParagraphStories.Default} sourceState="shown" />

From 52ec3d0fbd44166267af54ff66553b6e0756b040 Mon Sep 17 00:00:00 2001
From: karimim <muhammad.karimi@post.ch>
Date: Mon, 23 Sep 2024 15:04:24 +0200
Subject: [PATCH 05/16] feat: add changeset for paragraph element

---
 .changeset/strange-bottles-impress.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/strange-bottles-impress.md

diff --git a/.changeset/strange-bottles-impress.md b/.changeset/strange-bottles-impress.md
new file mode 100644
index 0000000000..5a85bd3e8f
--- /dev/null
+++ b/.changeset/strange-bottles-impress.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': minor
+---
+
+Added paragraph element

From c231ce8b936ffd4fa1c5766fe3c62a9d2b8ce507 Mon Sep 17 00:00:00 2001
From: Muhammad Bashir <bashirkarimi5@gmail.com>
Date: Wed, 25 Sep 2024 11:39:44 +0200
Subject: [PATCH 06/16] Update .changeset/sixty-items-promise.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com>
---
 .changeset/sixty-items-promise.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/sixty-items-promise.md b/.changeset/sixty-items-promise.md
index 3fb44e1125..d6de1b72b9 100644
--- a/.changeset/sixty-items-promise.md
+++ b/.changeset/sixty-items-promise.md
@@ -2,4 +2,4 @@
 '@swisspost/design-system-styles': minor
 ---
 
-Added paragraph style
+Added paragraph style.

From 4ad01deb7f3d885c0e45811f31158241a3a0b120 Mon Sep 17 00:00:00 2001
From: Muhammad Bashir <bashirkarimi5@gmail.com>
Date: Wed, 25 Sep 2024 11:39:55 +0200
Subject: [PATCH 07/16] Update packages/styles/src/elements/paragraph.scss
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com>
---
 packages/styles/src/elements/paragraph.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/styles/src/elements/paragraph.scss b/packages/styles/src/elements/paragraph.scss
index 5b8a6fd818..3e62b983b9 100644
--- a/packages/styles/src/elements/paragraph.scss
+++ b/packages/styles/src/elements/paragraph.scss
@@ -5,5 +5,5 @@
 tokens.$default-map: elements.$post-paragraph;
 
 p {
-  margin-block-start: tokens.get('post-paragraph', 'margin-block-start');
+  margin-block-start: tokens.get('paragraph', 'margin-block-start');
 }

From f68fc9cb11c3851ac3454e3632b40e64f7817d59 Mon Sep 17 00:00:00 2001
From: karimim <muhammad.karimi@post.ch>
Date: Wed, 2 Oct 2024 15:31:29 +0200
Subject: [PATCH 08/16] chore: move paragraph element to Typography category

---
 .../{components => }/elements/paragraph/paragraph.docs.mdx      | 0
 .../{components => }/elements/paragraph/paragraph.stories.ts    | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename packages/documentation/src/stories/{components => }/elements/paragraph/paragraph.docs.mdx (100%)
 rename packages/documentation/src/stories/{components => }/elements/paragraph/paragraph.stories.ts (97%)

diff --git a/packages/documentation/src/stories/components/elements/paragraph/paragraph.docs.mdx b/packages/documentation/src/stories/elements/paragraph/paragraph.docs.mdx
similarity index 100%
rename from packages/documentation/src/stories/components/elements/paragraph/paragraph.docs.mdx
rename to packages/documentation/src/stories/elements/paragraph/paragraph.docs.mdx
diff --git a/packages/documentation/src/stories/components/elements/paragraph/paragraph.stories.ts b/packages/documentation/src/stories/elements/paragraph/paragraph.stories.ts
similarity index 97%
rename from packages/documentation/src/stories/components/elements/paragraph/paragraph.stories.ts
rename to packages/documentation/src/stories/elements/paragraph/paragraph.stories.ts
index 92f5cdc4ba..26e204b3ea 100644
--- a/packages/documentation/src/stories/components/elements/paragraph/paragraph.stories.ts
+++ b/packages/documentation/src/stories/elements/paragraph/paragraph.stories.ts
@@ -4,7 +4,7 @@ import { MetaExtended } from '@root/types';
 
 const meta: MetaExtended = {
   id: '7ecd87f1-de96-4e39-a057-ba1798eb69593',
-  title: 'Elements/Paragraph',
+  title: 'Typography/Paragraph',
   parameters: {
     badges: [],
     design: {

From 3297e30ce12ec5a89e390abc46a32674a2a2ef71 Mon Sep 17 00:00:00 2001
From: Muhammad Bashir <bashirkarimi5@gmail.com>
Date: Fri, 4 Oct 2024 08:06:21 +0200
Subject: [PATCH 09/16] Update .changeset/strange-bottles-impress.md

Co-authored-by: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com>
---
 .changeset/strange-bottles-impress.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/strange-bottles-impress.md b/.changeset/strange-bottles-impress.md
index 5a85bd3e8f..79f561cfb8 100644
--- a/.changeset/strange-bottles-impress.md
+++ b/.changeset/strange-bottles-impress.md
@@ -2,4 +2,4 @@
 '@swisspost/design-system-documentation': minor
 ---
 
-Added paragraph element
+Added paragraph element.

From 5858f8b424be0cb4f3125f123e9943d7ae3cf776 Mon Sep 17 00:00:00 2001
From: karimim <muhammad.karimi@post.ch>
Date: Fri, 4 Oct 2024 08:15:18 +0200
Subject: [PATCH 10/16] chore: move the story under foundation category

---
 .../src/stories/elements/paragraph/paragraph.stories.ts         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/documentation/src/stories/elements/paragraph/paragraph.stories.ts b/packages/documentation/src/stories/elements/paragraph/paragraph.stories.ts
index 26e204b3ea..855c1c7cef 100644
--- a/packages/documentation/src/stories/elements/paragraph/paragraph.stories.ts
+++ b/packages/documentation/src/stories/elements/paragraph/paragraph.stories.ts
@@ -4,7 +4,7 @@ import { MetaExtended } from '@root/types';
 
 const meta: MetaExtended = {
   id: '7ecd87f1-de96-4e39-a057-ba1798eb69593',
-  title: 'Typography/Paragraph',
+  title: 'Foundations/Typography/Paragraph',
   parameters: {
     badges: [],
     design: {

From b56d6503ec87bb9959e8e9884d5fda739b616f44 Mon Sep 17 00:00:00 2001
From: Muhammad Bashir <bashirkarimi5@gmail.com>
Date: Mon, 7 Oct 2024 14:12:04 +0200
Subject: [PATCH 11/16] Update packages/styles/src/elements/paragraph.scss
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Oliver Schürch <oliver.schuerch@post.ch>
---
 packages/styles/src/elements/paragraph.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/styles/src/elements/paragraph.scss b/packages/styles/src/elements/paragraph.scss
index 3e62b983b9..867bd601e1 100644
--- a/packages/styles/src/elements/paragraph.scss
+++ b/packages/styles/src/elements/paragraph.scss
@@ -6,4 +6,8 @@ tokens.$default-map: elements.$post-paragraph;
 
 p {
   margin-block-start: tokens.get('paragraph', 'margin-block-start');
+  
+  &:first-child {
+    margin-block-start: 0;
+  }
 }

From 0bc7f1d3a2e77ab7886d24f2a48c00e158ec5239 Mon Sep 17 00:00:00 2001
From: Muhammad Bashir <bashirkarimi5@gmail.com>
Date: Mon, 7 Oct 2024 14:12:28 +0200
Subject: [PATCH 12/16] Update
 packages/documentation/src/stories/elements/paragraph/paragraph.stories.ts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Oliver Schürch <oliver.schuerch@post.ch>
---
 .../src/stories/elements/paragraph/paragraph.stories.ts         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/documentation/src/stories/elements/paragraph/paragraph.stories.ts b/packages/documentation/src/stories/elements/paragraph/paragraph.stories.ts
index 855c1c7cef..59b739b3ce 100644
--- a/packages/documentation/src/stories/elements/paragraph/paragraph.stories.ts
+++ b/packages/documentation/src/stories/elements/paragraph/paragraph.stories.ts
@@ -9,7 +9,7 @@ const meta: MetaExtended = {
     badges: [],
     design: {
       type: 'figma',
-      url: 'https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=26-49',
+      url: 'https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=178-6713&node-type=frame&t=Zs4iDGVBTA88pChW-0',
     },
   },
 };

From 97c808258b97b83874ad9aeb8e1b4886b627bd9b Mon Sep 17 00:00:00 2001
From: karimim <muhammad.karimi@post.ch>
Date: Mon, 7 Oct 2024 15:00:50 +0200
Subject: [PATCH 13/16] feat: add decorator

---
 .../src/stories/elements/paragraph/paragraph.stories.ts      | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/documentation/src/stories/elements/paragraph/paragraph.stories.ts b/packages/documentation/src/stories/elements/paragraph/paragraph.stories.ts
index 59b739b3ce..2a9d17b4a5 100644
--- a/packages/documentation/src/stories/elements/paragraph/paragraph.stories.ts
+++ b/packages/documentation/src/stories/elements/paragraph/paragraph.stories.ts
@@ -1,4 +1,4 @@
-import type { StoryObj } from '@storybook/web-components';
+import type { StoryObj, StoryFn, StoryContext } from '@storybook/web-components';
 import { html } from 'lit';
 import { MetaExtended } from '@root/types';
 
@@ -19,6 +19,9 @@ export default meta;
 type Story = StoryObj;
 
 export const Default: Story = {
+  decorators: [
+    (story: StoryFn, context: StoryContext) => html` <div>${story(context.args, context)}</div> `,
+  ],
   render: () => html`
     <p>
       This is a paragraph. It is a block of text that is separated from other blocks of text by a

From 711e2c2bce345d79a7451c2b4b4995ae30142096 Mon Sep 17 00:00:00 2001
From: karimim <muhammad.karimi@post.ch>
Date: Mon, 7 Oct 2024 15:10:44 +0200
Subject: [PATCH 14/16] style: format code

---
 packages/styles/src/elements/paragraph.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/styles/src/elements/paragraph.scss b/packages/styles/src/elements/paragraph.scss
index 867bd601e1..fb5c155423 100644
--- a/packages/styles/src/elements/paragraph.scss
+++ b/packages/styles/src/elements/paragraph.scss
@@ -6,7 +6,7 @@ tokens.$default-map: elements.$post-paragraph;
 
 p {
   margin-block-start: tokens.get('paragraph', 'margin-block-start');
-  
+
   &:first-child {
     margin-block-start: 0;
   }

From b8e38d97fa17ad41f8e03b2b82f6cc30ddcd9bf5 Mon Sep 17 00:00:00 2001
From: karimim <muhammad.karimi@post.ch>
Date: Mon, 14 Oct 2024 16:18:53 +0200
Subject: [PATCH 15/16] fix: remove key property

---
 packages/styles/src/elements/paragraph.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/styles/src/elements/paragraph.scss b/packages/styles/src/elements/paragraph.scss
index fb5c155423..d45fec4903 100644
--- a/packages/styles/src/elements/paragraph.scss
+++ b/packages/styles/src/elements/paragraph.scss
@@ -5,7 +5,7 @@
 tokens.$default-map: elements.$post-paragraph;
 
 p {
-  margin-block-start: tokens.get('paragraph', 'margin-block-start');
+  margin-block-start: tokens.get('paragraph-margin-block-start');
 
   &:first-child {
     margin-block-start: 0;

From 1d463c29df858f45abdca93e8a75613e8b143fb2 Mon Sep 17 00:00:00 2001
From: karimim <muhammad.karimi@post.ch>
Date: Tue, 15 Oct 2024 08:22:08 +0200
Subject: [PATCH 16/16] chore: add margin block and remove space from last
 child

---
 packages/styles/src/elements/paragraph.scss | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/styles/src/elements/paragraph.scss b/packages/styles/src/elements/paragraph.scss
index d45fec4903..12e638dd65 100644
--- a/packages/styles/src/elements/paragraph.scss
+++ b/packages/styles/src/elements/paragraph.scss
@@ -5,9 +5,13 @@
 tokens.$default-map: elements.$post-paragraph;
 
 p {
-  margin-block-start: tokens.get('paragraph-margin-block-start');
+  margin-block: tokens.get('paragraph-margin-block-start');
 
   &:first-child {
     margin-block-start: 0;
   }
+
+  &:last-child {
+    margin-block-end: 0;
+  }
 }