chore(documentation,styles): create display utility (#3661)

Co-authored-by: Philipp Gfeller <[email protected]>

packages/components/src/components/post-tooltip/readme.md

@@ -76,4 +76,4 @@ graph TD;
 
 ----------------------------------------------
 
-*Built with [StencilJS](https://stenciljs.com/)*
+*Built with [StencilJS](https://stenciljs.com/)*

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

@@ -0,0 +1,48 @@
+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} />
+
+# Display
+
+<div className="lead">
+  Use the display utility classes to set the display of an element to any possible display CSS
+  value.
+</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}`
+
+### Available display values
+
+The available display utilities values are the following:
+
+<ul>
+  {forEach(displayOptions, function ({ value }) {
+    return <li>{value}</li>;
+  })}
+</ul>
+
+### Usage
+
+To set a display on an element, simply add a `d-{display}` class to it.
+
+<Canvas of={DisplayStories.Default} sourceState="shown" />

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.stories.ts

@@ -0,0 +1,20 @@
+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',
+};
+
+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>
+    `,
+};

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

packages/styles/src/utilities/_variables.scss

@@ -126,6 +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`.
 );