Add non-regression tests

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

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
 

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

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

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,

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,
+);