From ed5f6c310b84ef1428f5692cbd0e14b856dd5a3b Mon Sep 17 00:00:00 2001
From: leagrdv <lea.gardavaud@post.ch>
Date: Fri, 4 Oct 2024 16:07:10 +0200
Subject: [PATCH 1/9] chore: add display utility variables

---
 packages/styles/src/utilities/_variables.scss | 28 ++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/packages/styles/src/utilities/_variables.scss b/packages/styles/src/utilities/_variables.scss
index d7c1bca0e7..ce2b19b5bd 100644
--- a/packages/styles/src/utilities/_variables.scss
+++ b/packages/styles/src/utilities/_variables.scss
@@ -44,6 +44,21 @@
   )
 */
 
+// To delete from here
+$post-display: (
+  -none: none,
+  -inline: inline,
+  -inline-block: inline-block,
+  -block: block,
+  -grid: grid,
+  -inline-grid: inline-grid,
+  -table: table,
+  -table-cell: table-cell,
+  -table-row: table-row,
+  -flex: flex,
+  -inline-flex: inline-flex
+);
+
 $utilities: (
   spacing: (
     tokens: tokens.$post-spacing,
@@ -82,5 +97,16 @@ $utilities: (
       ),
     ),
   ),
-  // IMPORTANT: When adding new utilities here, please ensure to remove the corresponding bootstrap utilities in `src/themes/bootstrap/_utilities.scss`.
+  display: (
+    tokens: $post-display,
+    classes: (
+      display: (
+        responsive: true,
+        prefixes: (
+          d: display,
+        ),
+      ),
+    ),
+  )
+  // IMPORTANT: When adding new utilities here, please ensure to remove the corresponding bootstrap utilities in `src/themes/bootstrap/_utilities.scss`.,,,,,,,,,,,,
 );

From 16bd8adedb80e4eb75e5d5f786710f7e6ec6ff73 Mon Sep 17 00:00:00 2001
From: leagrdv <lea.gardavaud@post.ch>
Date: Fri, 4 Oct 2024 17:31:40 +0200
Subject: [PATCH 2/9] chore: add documentation wip

---
 .../utilities/display/display.blocks.tsx      | 21 +++++
 .../utilities/display/display.docs.mdx        | 57 +++++++++++++
 .../utilities/display/display.stories.ts      | 23 +++++
 .../utilities/display/display.styles.scss     | 85 +++++++++++++++++++
 4 files changed, 186 insertions(+)
 create mode 100644 packages/documentation/src/stories/utilities/display/display.blocks.tsx
 create mode 100644 packages/documentation/src/stories/utilities/display/display.docs.mdx
 create mode 100644 packages/documentation/src/stories/utilities/display/display.stories.ts
 create mode 100644 packages/documentation/src/stories/utilities/display/display.styles.scss

diff --git a/packages/documentation/src/stories/utilities/display/display.blocks.tsx b/packages/documentation/src/stories/utilities/display/display.blocks.tsx
new file mode 100644
index 0000000000..61bdf26730
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/display/display.blocks.tsx
@@ -0,0 +1,21 @@
+export function DisplayContainer(props: { name: string }) {
+  return (
+    <article className="display-container">
+      <div className="display-container__description">
+        <h3 className="description__title h6">{props.name}</h3>
+      </div>
+      <div className="display-container__display">
+        <div className={`display__tile d-${props.name}`}>Text</div>
+        <div className={`display__tile d-${props.name}`}>Text</div>
+      </div>
+      <div className="display-container__props">
+        <dl>
+          <dt>Class</dt>
+          <dd>
+            <code>.d-{props.name}</code>
+          </dd>
+        </dl>
+      </div>
+    </article>
+  );
+}
diff --git a/packages/documentation/src/stories/utilities/display/display.docs.mdx b/packages/documentation/src/stories/utilities/display/display.docs.mdx
new file mode 100644
index 0000000000..6639ec074d
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/display/display.docs.mdx
@@ -0,0 +1,57 @@
+import { Canvas, Meta } from '@storybook/blocks';
+import { forEach } from '@/utils/react';
+import { parse } from '@/utils/sass-export';
+import { DisplayContainer } from './display.blocks';
+import * as DisplayStories from './display.stories';
+import './display.styles.scss';
+
+<Meta of={DisplayStories} />
+
+# Display
+
+<div className="lead">
+  Use the display utility classes to set the display of an element to any possible display CSS
+  value.
+</div>
+
+The available display utilities values are the following:
+
+- none
+- inline
+- inline-block
+- block
+- grid
+- inline-grid
+- table
+- table-cell
+- table-row
+- flex
+- inline-flex
+
+To set a display on an element, simply add a `.d-{display}` class to it.
+// TODO: Explain the breakpoints
+
+<Canvas of={DisplayStories.Default} sourceState="shown" />
+
+### Available Display
+
+<section className="display-container__section">
+  {forEach(
+    [
+      'none',
+      'inline',
+      'inline-block',
+      'block',
+      'grid',
+      'inline-grid',
+      'table',
+      'table-cell',
+      'table-row',
+      'flex',
+      'inline-flex',
+    ],
+    function ({ key, value }) {
+      return <DisplayContainer key={key} name={value} />;
+    },
+  )}
+</section>
diff --git a/packages/documentation/src/stories/utilities/display/display.stories.ts b/packages/documentation/src/stories/utilities/display/display.stories.ts
new file mode 100644
index 0000000000..9a63625dc0
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/display/display.stories.ts
@@ -0,0 +1,23 @@
+import type { StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import { MetaExtended } from '@root/types';
+
+const meta: MetaExtended = {
+  id: '1bb8a4a7-8205-4dcb-a41c-8f7ab1de1c99',
+  title: 'Utilities/Display',
+  parameters: {
+    badges: [],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () =>
+    html`
+      <div class="d-inline bg-yellow p-8">Content</div>
+      <div class="d-inline bg-black p-8">Content</div>
+    `,
+};
diff --git a/packages/documentation/src/stories/utilities/display/display.styles.scss b/packages/documentation/src/stories/utilities/display/display.styles.scss
new file mode 100644
index 0000000000..eb6225df58
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/display/display.styles.scss
@@ -0,0 +1,85 @@
+@use '@swisspost/design-system-styles/core' as post;
+
+.display-container__section {
+  display: grid;
+  grid-template-columns: minmax(max-content, 25%) minmax(100px, auto) minmax(max-content, 50%);
+
+  @include post.media-breakpoint-down(md) {
+    display: block;
+  }
+}
+
+.display-container {
+  display: contents;
+
+  > * {
+    padding: post.$size-mini (post.$size-regular * 0.5);
+    border-top: post.$border-width solid post.$border-color;
+
+    &:first-child {
+      padding-inline-start: 0;
+    }
+    &:last-child {
+      padding-inline-end: 0;
+    }
+  }
+
+  .display-container__description {
+    .description__title {
+      &:first-letter {
+        text-transform: uppercase;
+      }
+    }
+  }
+
+  .display-container__display {
+    .display__tile {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 1rem;
+      height: 100%;
+      border-radius: post.$border-radius;
+      box-shadow: post.$elevation-1;
+      min-height: 1rem * post.$line-height-base * 2.5;
+    }
+  }
+
+  .display-container__props {
+    dl {
+      display: grid;
+      grid-template-columns: max-content auto;
+      gap: 0 post.$size-mini;
+      margin: 0;
+
+      dt,
+      dd {
+        margin: 0;
+      }
+    }
+  }
+
+  @include post.media-breakpoint-down(md) {
+    display: grid;
+    grid-template-rows: auto auto;
+    grid-template-columns: 40% 60%;
+
+    .display-container__description {
+      grid-row: 1;
+      grid-column: 1;
+    }
+
+    .display-container__display {
+      grid-row: 2;
+      grid-column: 1 / 3;
+      padding-top: 0;
+      padding-inline: 0;
+      border-top: 0 none;
+    }
+
+    .display-container__props {
+      grid-row: 1;
+      grid-column: 2;
+    }
+  }
+}

From b8d99513b9f5227f886dfdd32b00e08fb8cd961f Mon Sep 17 00:00:00 2001
From: leagrdv <lea.gardavaud@post.ch>
Date: Mon, 7 Oct 2024 09:35:11 +0200
Subject: [PATCH 3/9] chore: remove unused code and update docs

---
 .../utilities/display/display.blocks.tsx      | 21 -----
 .../utilities/display/display.docs.mdx        | 40 +++------
 .../utilities/display/display.styles.scss     | 85 -------------------
 .../src/themes/bootstrap/_utilities.scss      |  2 +
 packages/styles/src/utilities/_variables.scss | 31 +++----
 5 files changed, 26 insertions(+), 153 deletions(-)
 delete mode 100644 packages/documentation/src/stories/utilities/display/display.blocks.tsx
 delete mode 100644 packages/documentation/src/stories/utilities/display/display.styles.scss

diff --git a/packages/documentation/src/stories/utilities/display/display.blocks.tsx b/packages/documentation/src/stories/utilities/display/display.blocks.tsx
deleted file mode 100644
index 61bdf26730..0000000000
--- a/packages/documentation/src/stories/utilities/display/display.blocks.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-export function DisplayContainer(props: { name: string }) {
-  return (
-    <article className="display-container">
-      <div className="display-container__description">
-        <h3 className="description__title h6">{props.name}</h3>
-      </div>
-      <div className="display-container__display">
-        <div className={`display__tile d-${props.name}`}>Text</div>
-        <div className={`display__tile d-${props.name}`}>Text</div>
-      </div>
-      <div className="display-container__props">
-        <dl>
-          <dt>Class</dt>
-          <dd>
-            <code>.d-{props.name}</code>
-          </dd>
-        </dl>
-      </div>
-    </article>
-  );
-}
diff --git a/packages/documentation/src/stories/utilities/display/display.docs.mdx b/packages/documentation/src/stories/utilities/display/display.docs.mdx
index 6639ec074d..c3ed9642bc 100644
--- a/packages/documentation/src/stories/utilities/display/display.docs.mdx
+++ b/packages/documentation/src/stories/utilities/display/display.docs.mdx
@@ -1,9 +1,6 @@
 import { Canvas, Meta } from '@storybook/blocks';
-import { forEach } from '@/utils/react';
-import { parse } from '@/utils/sass-export';
-import { DisplayContainer } from './display.blocks';
 import * as DisplayStories from './display.stories';
-import './display.styles.scss';
+import { breakpoints, firstBreakpoint } from '../spacing/spacing.docs.mdx';
 
 <Meta of={DisplayStories} />
 
@@ -14,8 +11,13 @@ import './display.styles.scss';
   value.
 </div>
 
-The available display utilities values are the following:
+The naming convention for display utilities follows this pattern:
+- For all breakpoints (<code>{firstBreakpoint}</code> and up): `d-{display}`
+- Starting from a specific breakpoint  ({breakpoints.map(([b, isLast]) => (<span key={b}><code>{b}</code>{isLast ? ', ' : ''}</span>))}): `d-{breakpoint}-{display}`
+
+### Available display values
 
+The available display utilities values are the following:
 - none
 - inline
 - inline-block
@@ -28,30 +30,8 @@ The available display utilities values are the following:
 - flex
 - inline-flex
 
-To set a display on an element, simply add a `.d-{display}` class to it.
-// TODO: Explain the breakpoints
+### Usage
 
-<Canvas of={DisplayStories.Default} sourceState="shown" />
+To set a display on an element, simply add a `d-{display}` class to it.
 
-### Available Display
-
-<section className="display-container__section">
-  {forEach(
-    [
-      'none',
-      'inline',
-      'inline-block',
-      'block',
-      'grid',
-      'inline-grid',
-      'table',
-      'table-cell',
-      'table-row',
-      'flex',
-      'inline-flex',
-    ],
-    function ({ key, value }) {
-      return <DisplayContainer key={key} name={value} />;
-    },
-  )}
-</section>
+<Canvas of={DisplayStories.Default} sourceState="shown" />
diff --git a/packages/documentation/src/stories/utilities/display/display.styles.scss b/packages/documentation/src/stories/utilities/display/display.styles.scss
deleted file mode 100644
index eb6225df58..0000000000
--- a/packages/documentation/src/stories/utilities/display/display.styles.scss
+++ /dev/null
@@ -1,85 +0,0 @@
-@use '@swisspost/design-system-styles/core' as post;
-
-.display-container__section {
-  display: grid;
-  grid-template-columns: minmax(max-content, 25%) minmax(100px, auto) minmax(max-content, 50%);
-
-  @include post.media-breakpoint-down(md) {
-    display: block;
-  }
-}
-
-.display-container {
-  display: contents;
-
-  > * {
-    padding: post.$size-mini (post.$size-regular * 0.5);
-    border-top: post.$border-width solid post.$border-color;
-
-    &:first-child {
-      padding-inline-start: 0;
-    }
-    &:last-child {
-      padding-inline-end: 0;
-    }
-  }
-
-  .display-container__description {
-    .description__title {
-      &:first-letter {
-        text-transform: uppercase;
-      }
-    }
-  }
-
-  .display-container__display {
-    .display__tile {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding: 1rem;
-      height: 100%;
-      border-radius: post.$border-radius;
-      box-shadow: post.$elevation-1;
-      min-height: 1rem * post.$line-height-base * 2.5;
-    }
-  }
-
-  .display-container__props {
-    dl {
-      display: grid;
-      grid-template-columns: max-content auto;
-      gap: 0 post.$size-mini;
-      margin: 0;
-
-      dt,
-      dd {
-        margin: 0;
-      }
-    }
-  }
-
-  @include post.media-breakpoint-down(md) {
-    display: grid;
-    grid-template-rows: auto auto;
-    grid-template-columns: 40% 60%;
-
-    .display-container__description {
-      grid-row: 1;
-      grid-column: 1;
-    }
-
-    .display-container__display {
-      grid-row: 2;
-      grid-column: 1 / 3;
-      padding-top: 0;
-      padding-inline: 0;
-      border-top: 0 none;
-    }
-
-    .display-container__props {
-      grid-row: 1;
-      grid-column: 2;
-    }
-  }
-}
diff --git a/packages/styles/src/themes/bootstrap/_utilities.scss b/packages/styles/src/themes/bootstrap/_utilities.scss
index 01cb191d0c..2c21df1b4b 100644
--- a/packages/styles/src/themes/bootstrap/_utilities.scss
+++ b/packages/styles/src/themes/bootstrap/_utilities.scss
@@ -26,4 +26,6 @@ $utilities: map.remove($utilities, 'gap');
 $utilities: map.remove($utilities, 'row-gap');
 $utilities: map.remove($utilities, 'column-gap');
 
+$utilities: map.remove($utilities, 'display');
+
 @import 'bootstrap/scss/utilities/api';
diff --git a/packages/styles/src/utilities/_variables.scss b/packages/styles/src/utilities/_variables.scss
index ce2b19b5bd..08e1f8b134 100644
--- a/packages/styles/src/utilities/_variables.scss
+++ b/packages/styles/src/utilities/_variables.scss
@@ -44,21 +44,6 @@
   )
 */
 
-// To delete from here
-$post-display: (
-  -none: none,
-  -inline: inline,
-  -inline-block: inline-block,
-  -block: block,
-  -grid: grid,
-  -inline-grid: inline-grid,
-  -table: table,
-  -table-cell: table-cell,
-  -table-row: table-row,
-  -flex: flex,
-  -inline-flex: inline-flex
-);
-
 $utilities: (
   spacing: (
     tokens: tokens.$post-spacing,
@@ -98,7 +83,19 @@ $utilities: (
     ),
   ),
   display: (
-    tokens: $post-display,
+    tokens: (
+      -none: none,
+      -inline: inline,
+      -inline-block: inline-block,
+      -block: block,
+      -grid: grid,
+      -inline-grid: inline-grid,
+      -table: table,
+      -table-cell: table-cell,
+      -table-row: table-row,
+      -flex: flex,
+      -inline-flex: inline-flex,
+    ),
     classes: (
       display: (
         responsive: true,
@@ -108,5 +105,5 @@ $utilities: (
       ),
     ),
   )
-  // IMPORTANT: When adding new utilities here, please ensure to remove the corresponding bootstrap utilities in `src/themes/bootstrap/_utilities.scss`.,,,,,,,,,,,,
+  // IMPORTANT: When adding new utilities here, please ensure to remove the corresponding bootstrap utilities in `src/themes/bootstrap/_utilities.scss`.,,,,,,,,,,,,,
 );

From bf466ec7c45d41aa434af71c838b75573c84d48a Mon Sep 17 00:00:00 2001
From: leagrdv <lea.gardavaud@post.ch>
Date: Mon, 7 Oct 2024 09:41:13 +0200
Subject: [PATCH 4/9] fix pr lint error

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

diff --git a/packages/styles/src/utilities/_variables.scss b/packages/styles/src/utilities/_variables.scss
index 08e1f8b134..3af315dee3 100644
--- a/packages/styles/src/utilities/_variables.scss
+++ b/packages/styles/src/utilities/_variables.scss
@@ -105,5 +105,5 @@ $utilities: (
       ),
     ),
   )
-  // IMPORTANT: When adding new utilities here, please ensure to remove the corresponding bootstrap utilities in `src/themes/bootstrap/_utilities.scss`.,,,,,,,,,,,,,
+  // IMPORTANT: When adding new utilities here, please ensure to remove the corresponding bootstrap utilities in `src/themes/bootstrap/_utilities.scss`.,,,,,,,,,,,,,,,,
 );

From 2dde17633479c75b2600df569b8bbf85e63c870d Mon Sep 17 00:00:00 2001
From: leagrdv <lea.gardavaud@post.ch>
Date: Mon, 7 Oct 2024 10:26:20 +0200
Subject: [PATCH 5/9] update variable names

---
 packages/styles/src/utilities/_variables.scss | 27 ++++++++++---------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/packages/styles/src/utilities/_variables.scss b/packages/styles/src/utilities/_variables.scss
index 3af315dee3..f30a9a00c0 100644
--- a/packages/styles/src/utilities/_variables.scss
+++ b/packages/styles/src/utilities/_variables.scss
@@ -84,17 +84,17 @@ $utilities: (
   ),
   display: (
     tokens: (
-      -none: none,
-      -inline: inline,
-      -inline-block: inline-block,
-      -block: block,
-      -grid: grid,
-      -inline-grid: inline-grid,
-      -table: table,
-      -table-cell: table-cell,
-      -table-row: table-row,
-      -flex: flex,
-      -inline-flex: inline-flex,
+      post-utility-display-none: none,
+      post-utility-display-inline: inline,
+      post-utility-display-inline-block: inline-block,
+      post-utility-display-block: block,
+      post-utility-display-grid: grid,
+      post-utility-display-inline-grid: inline-grid,
+      post-utility-display-table: table,
+      post-utility-display-table-cell: table-cell,
+      post-utility-display-table-row: table-row,
+      post-utility-display-flex: flex,
+      post-utility-display-inline-flex: inline-flex,
     ),
     classes: (
       display: (
@@ -104,6 +104,7 @@ $utilities: (
         ),
       ),
     ),
-  )
-  // IMPORTANT: When adding new utilities here, please ensure to remove the corresponding bootstrap utilities in `src/themes/bootstrap/_utilities.scss`.,,,,,,,,,,,,,,,,
+  ),
 );
+
+// IMPORTANT: When adding new utilities here, please ensure to remove the corresponding bootstrap utilities in `src/themes/bootstrap/_utilities.scss`.

From 19a1f75c5d8954efa55ba913f2d104081f8c71c3 Mon Sep 17 00:00:00 2001
From: leagrdv <lea.gardavaud@post.ch>
Date: Mon, 7 Oct 2024 14:05:18 +0200
Subject: [PATCH 6/9] Add non-regression tests

---
 .../snapshots/utilities/display.snapshot.ts   |  7 ++++
 .../utilities/display/display.docs.mdx        | 35 ++++++++++++-------
 .../display/display.snapshot.stories.ts       | 31 ++++++++++++++++
 .../utilities/display/display.styles.scss     | 11 ++++++
 packages/styles/src/utilities/_variables.scss | 15 ++------
 .../styles/src/utilities/temp/_display.scss   | 13 +++++++
 6 files changed, 87 insertions(+), 25 deletions(-)
 create mode 100644 packages/documentation/cypress/snapshots/utilities/display.snapshot.ts
 create mode 100644 packages/documentation/src/stories/utilities/display/display.snapshot.stories.ts
 create mode 100644 packages/documentation/src/stories/utilities/display/display.styles.scss
 create mode 100644 packages/styles/src/utilities/temp/_display.scss

diff --git a/packages/documentation/cypress/snapshots/utilities/display.snapshot.ts b/packages/documentation/cypress/snapshots/utilities/display.snapshot.ts
new file mode 100644
index 0000000000..bc776e5392
--- /dev/null
+++ b/packages/documentation/cypress/snapshots/utilities/display.snapshot.ts
@@ -0,0 +1,7 @@
+describe('Display', () => {
+  it('display', () => {
+    cy.visit('/iframe.html?id=snapshots--display');
+    cy.get('.display-example', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('Display', { widths: [320, 1440] });
+  });
+});
diff --git a/packages/documentation/src/stories/utilities/display/display.docs.mdx b/packages/documentation/src/stories/utilities/display/display.docs.mdx
index c3ed9642bc..9d3f04c309 100644
--- a/packages/documentation/src/stories/utilities/display/display.docs.mdx
+++ b/packages/documentation/src/stories/utilities/display/display.docs.mdx
@@ -1,6 +1,21 @@
 import { Canvas, Meta } from '@storybook/blocks';
 import * as DisplayStories from './display.stories';
 import { breakpoints, firstBreakpoint } from '../spacing/spacing.docs.mdx';
+import { forEach } from '@/utils/react';
+
+export const displayOptions = [
+  'none',
+  'inline',
+  'inline-block',
+  'block',
+  'grid',
+  'inline-grid',
+  'table',
+  'table-cell',
+  'table-row',
+  'flex',
+  'inline-flex',
+];
 
 <Meta of={DisplayStories} />
 
@@ -12,23 +27,19 @@ import { breakpoints, firstBreakpoint } from '../spacing/spacing.docs.mdx';
 </div>
 
 The naming convention for display utilities follows this pattern:
+
 - For all breakpoints (<code>{firstBreakpoint}</code> and up): `d-{display}`
-- Starting from a specific breakpoint  ({breakpoints.map(([b, isLast]) => (<span key={b}><code>{b}</code>{isLast ? ', ' : ''}</span>))}): `d-{breakpoint}-{display}`
+- Starting from a specific breakpoint ({breakpoints.map(([b, isLast]) => (<span key={b}><code>{b}</code>{isLast ? ', ' : ''}</span>))}): `d-{breakpoint}-{display}`
 
 ### Available display values
 
 The available display utilities values are the following:
-- none
-- inline
-- inline-block
-- block
-- grid
-- inline-grid
-- table
-- table-cell
-- table-row
-- flex
-- inline-flex
+
+<ul>
+  {forEach(displayOptions, function ({ value }) {
+    return <li>{value}</li>;
+  })}
+</ul>
 
 ### Usage
 
diff --git a/packages/documentation/src/stories/utilities/display/display.snapshot.stories.ts b/packages/documentation/src/stories/utilities/display/display.snapshot.stories.ts
new file mode 100644
index 0000000000..6600a7ed1c
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/display/display.snapshot.stories.ts
@@ -0,0 +1,31 @@
+import type { StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import meta from './display.stories';
+import { displayOptions } from './display.docs.mdx';
+import './display.styles.scss';
+
+const { id, ...metaWithoutId } = meta;
+
+export default {
+  ...metaWithoutId,
+  title: 'Snapshots',
+};
+
+type Story = StoryObj;
+
+export const Display: Story = {
+  render: () => {
+    return html`
+      <div class="display-example">
+        ${displayOptions.map(
+          display => html`
+            <div class="display-container p-8">
+              <div class="d-${display} p-8">${display}</div>
+              <div class="d-${display} p-8">${display}</div>
+            </div>
+          `,
+        )}
+      </div>
+    `;
+  },
+};
diff --git a/packages/documentation/src/stories/utilities/display/display.styles.scss b/packages/documentation/src/stories/utilities/display/display.styles.scss
new file mode 100644
index 0000000000..eb981a09ce
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/display/display.styles.scss
@@ -0,0 +1,11 @@
+@use 'sass:color';
+@use '@swisspost/design-system-styles/core' as post;
+
+.display-container {
+  border: post.$border-width solid post.$border-color;
+
+  > * {
+    border: post.$border-width solid post.$border-color;
+    background-color: color.adjust(post.$border-color, $lightness: 15%);
+  }
+}
diff --git a/packages/styles/src/utilities/_variables.scss b/packages/styles/src/utilities/_variables.scss
index f30a9a00c0..458ebbe6c4 100644
--- a/packages/styles/src/utilities/_variables.scss
+++ b/packages/styles/src/utilities/_variables.scss
@@ -1,4 +1,5 @@
 @use '../tokens/utilities' as tokens;
+@use './temp/display' as display;
 
 /*
   Add new utilities using the following structure:
@@ -83,19 +84,7 @@ $utilities: (
     ),
   ),
   display: (
-    tokens: (
-      post-utility-display-none: none,
-      post-utility-display-inline: inline,
-      post-utility-display-inline-block: inline-block,
-      post-utility-display-block: block,
-      post-utility-display-grid: grid,
-      post-utility-display-inline-grid: inline-grid,
-      post-utility-display-table: table,
-      post-utility-display-table-cell: table-cell,
-      post-utility-display-table-row: table-row,
-      post-utility-display-flex: flex,
-      post-utility-display-inline-flex: inline-flex,
-    ),
+    tokens: display.$variables,
     classes: (
       display: (
         responsive: true,
diff --git a/packages/styles/src/utilities/temp/_display.scss b/packages/styles/src/utilities/temp/_display.scss
new file mode 100644
index 0000000000..092ac11fe5
--- /dev/null
+++ b/packages/styles/src/utilities/temp/_display.scss
@@ -0,0 +1,13 @@
+$variables: (
+  post-utility-display-none: none,
+  post-utility-display-inline: inline,
+  post-utility-display-inline-block: inline-block,
+  post-utility-display-block: block,
+  post-utility-display-grid: grid,
+  post-utility-display-inline-grid: inline-grid,
+  post-utility-display-table: table,
+  post-utility-display-table-cell: table-cell,
+  post-utility-display-table-row: table-row,
+  post-utility-display-flex: flex,
+  post-utility-display-inline-flex: inline-flex,
+);

From 08503a85eb46df56916015bfc8cfa986f657b5ac Mon Sep 17 00:00:00 2001
From: leagrdv <lea.gardavaud@post.ch>
Date: Wed, 9 Oct 2024 17:24:43 +0200
Subject: [PATCH 7/9] chore: update display with new utilities API

---
 .../src/components/post-tooltip/readme.md           |  2 +-
 packages/styles/src/utilities/_variables.scss       | 12 ++++++++----
 packages/styles/src/utilities/temp/_display.scss    | 13 -------------
 3 files changed, 9 insertions(+), 18 deletions(-)
 delete mode 100644 packages/styles/src/utilities/temp/_display.scss

diff --git a/packages/components/src/components/post-tooltip/readme.md b/packages/components/src/components/post-tooltip/readme.md
index 215b2f07f9..a9f6a8672d 100644
--- a/packages/components/src/components/post-tooltip/readme.md
+++ b/packages/components/src/components/post-tooltip/readme.md
@@ -75,4 +75,4 @@ graph TD;
 
 ----------------------------------------------
 
-*Built with [StencilJS](https://stenciljs.com/)*
+*Built with [StencilJS](https://stenciljs.com/)*
\ No newline at end of file
diff --git a/packages/styles/src/utilities/_variables.scss b/packages/styles/src/utilities/_variables.scss
index dc08d89901..ddeb97c37a 100644
--- a/packages/styles/src/utilities/_variables.scss
+++ b/packages/styles/src/utilities/_variables.scss
@@ -1,5 +1,4 @@
 @use '../tokens/utilities' as tokens;
-@use './temp/display' as display;
 
 @use './functions' as *;
 
@@ -127,8 +126,13 @@ $utilities: (
     class: column-gap,
     values: from-tokens('spacing', 'gap'),
   ),
-
+  'display': (
+    responsive: true,
+    print: true,
+    property: display,
+    class: d,
+    values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex
+      none,
+  ),
   // IMPORTANT: When adding new utilities here, please ensure to remove the corresponding bootstrap utilities in `src/themes/bootstrap/_utilities.scss`.
 );
-
-// IMPORTANT: When adding new utilities here, please ensure to remove the corresponding bootstrap utilities in `src/themes/bootstrap/_utilities.scss`.
diff --git a/packages/styles/src/utilities/temp/_display.scss b/packages/styles/src/utilities/temp/_display.scss
deleted file mode 100644
index 092ac11fe5..0000000000
--- a/packages/styles/src/utilities/temp/_display.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-$variables: (
-  post-utility-display-none: none,
-  post-utility-display-inline: inline,
-  post-utility-display-inline-block: inline-block,
-  post-utility-display-block: block,
-  post-utility-display-grid: grid,
-  post-utility-display-inline-grid: inline-grid,
-  post-utility-display-table: table,
-  post-utility-display-table-cell: table-cell,
-  post-utility-display-table-row: table-row,
-  post-utility-display-flex: flex,
-  post-utility-display-inline-flex: inline-flex,
-);

From 4672c239027928b6d951cd6edb4c35b80ba37466 Mon Sep 17 00:00:00 2001
From: leagrdv <lea.gardavaud@post.ch>
Date: Wed, 9 Oct 2024 17:26:28 +0200
Subject: [PATCH 8/9] revert merge issue

---
 .../components/src/components/post-tooltip/readme.md     | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/components/post-tooltip/readme.md b/packages/components/src/components/post-tooltip/readme.md
index a9f6a8672d..46b675438a 100644
--- a/packages/components/src/components/post-tooltip/readme.md
+++ b/packages/components/src/components/post-tooltip/readme.md
@@ -26,15 +26,16 @@ Type: `Promise<void>`
 
 
 
-### `show(target: HTMLElement) => Promise<void>`
+### `show(target: HTMLElement, triggeredByFocus?: boolean) => Promise<void>`
 
 Programmatically display the tooltip
 
 #### Parameters
 
-| Name     | Type          | Description                                                                  |
-| -------- | ------------- | ---------------------------------------------------------------------------- |
-| `target` | `HTMLElement` | An element with [data-tooltip-target="id"] where the tooltip should be shown |
+| Name               | Type          | Description                                                                  |
+| ------------------ | ------------- | ---------------------------------------------------------------------------- |
+| `target`           | `HTMLElement` | An element with [data-tooltip-target="id"] where the tooltip should be shown |
+| `triggeredByFocus` | `boolean`     | A boolean indicating if the tooltip was triggered by a focus event.          |
 
 #### Returns
 

From ff4e05d88e085101cadd0978dcfecab8c5f55df5 Mon Sep 17 00:00:00 2001
From: Lea <lea.gardavaud@post.ch>
Date: Fri, 11 Oct 2024 07:57:56 +0200
Subject: [PATCH 9/9] Update
 packages/documentation/src/stories/utilities/display/display.stories.ts

Co-authored-by: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com>
---
 .../src/stories/utilities/display/display.stories.ts           | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/documentation/src/stories/utilities/display/display.stories.ts b/packages/documentation/src/stories/utilities/display/display.stories.ts
index 9a63625dc0..91b3a91143 100644
--- a/packages/documentation/src/stories/utilities/display/display.stories.ts
+++ b/packages/documentation/src/stories/utilities/display/display.stories.ts
@@ -5,9 +5,6 @@ import { MetaExtended } from '@root/types';
 const meta: MetaExtended = {
   id: '1bb8a4a7-8205-4dcb-a41c-8f7ab1de1c99',
   title: 'Utilities/Display',
-  parameters: {
-    badges: [],
-  },
 };
 
 export default meta;