chore(z-index): add Z-Index utility

.changeset/slick-banks-report.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+---
+
+Internalized bootstrap z-index utilities.

packages/documentation/cypress/snapshots/utilities/z-index.snapshot.ts

@@ -0,0 +1,7 @@
+describe('Z-Index', () => {
+  it('z-index', () => {
+    cy.visit('/iframe.html?id=snapshots--z-index');
+    cy.get('.container-examples', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('Z-Index', { widths: [1440] });
+  });
+});

packages/documentation/src/stories/utilities/z-index/z-index.docs.mdx

@@ -0,0 +1,24 @@
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
+import * as ZIndexStories from './z-index.stories';
+
+<Meta of={ZIndexStories} />
+
+# Z-Index
+
+<div className="lead">
+  Use our <code>{".z-{value}"}</code> utility classes to control element stacking. Each element must have a non-static position (e.g. <code>relative</code>, <code>absolute</code> or <code>fixed</code>) for the z-index to take effect.
+</div>
+
+**Available classes:**
+- <code>.z-n1</code>
+- <code>.z-0</code>
+- <code>.z-1</code>
+- <code>.z-2</code>
+- <code>.z-3</code>
+
+## Example
+
+<Canvas sourceState="shown" of={ZIndexStories.ZIndex} />
+<div className="hide-col-default">
+  <Controls of={ZIndexStories.ZIndex} />
+</div>

packages/documentation/src/stories/utilities/z-index/z-index.snapshot.stories.ts

@@ -0,0 +1,31 @@
+import type { StoryObj } from '@storybook/web-components-vite';
+import { html } from 'lit';
+import { COLOR_SCHEMES, schemes } from '@/shared/snapshots/schemes';
+import meta from './z-index.stories';
+import './z-index.styles.scss';
+
+const { id, ...metaWithoutId } = meta;
+
+export default {
+  ...metaWithoutId,
+  title: 'Snapshots',
+};
+
+type Story = StoryObj;
+
+export const ZIndex: Story = {
+  render: () => {
+    return schemes(
+      () => html`
+        <div class="container-examples">
+          <div class="position-absolute z-3">z-3</div>
+          <div class="position-absolute z-2">z-2</div>
+          <div class="position-absolute z-1">z-1</div>
+          <div class="position-absolute z-0">z-0</div>
+          <div class="position-absolute z-n1">z-n1</div>
+        </div>
+      `,
+      { filter: scheme => scheme === COLOR_SCHEMES.light },
+    );
+  },
+};

packages/documentation/src/stories/utilities/z-index/z-index.stories.ts

@@ -0,0 +1,50 @@
+import type { Args, StoryObj } from '@storybook/web-components-vite';
+import { html } from 'lit';
+import './z-index.styles.scss';
+import { MetaExtended } from '@root/types';
+
+const meta: MetaExtended = {
+  id: 'd4b7f8a2-1c3e-4b5d-9f1a-2e6b0c7a9f3d',
+  title: 'Utilities/Z-Index',
+  args: {
+    zIndex1: '0',
+    zIndex2: '1',
+    zIndex3: '2',
+  },
+  argTypes: {
+    zIndex1: {
+      name: 'Box 1 z-Index',
+      description: 'z-index first box',
+      control: { type: 'select' },
+      options: ['n1', '0', '1', '2', '3'],
+      table: { category: 'Boxes' },
+    },
+    zIndex2: {
+      name: 'Box 2 z-Index',
+      description: 'z-index second box',
+      control: { type: 'select' },
+      options: ['n1', '0', '1', '2', '3'],
+      table: { category: 'Boxes' },
+    },
+    zIndex3: {
+      name: 'Box 3 z-Index',
+      description: 'z-index third box ',
+      control: { type: 'select' },
+      options: ['n1', '0', '1', '2', '3'],
+      table: { category: 'Boxes' },
+    },
+  },
+  render: (args: Args) => {
+    return html`
+      <div class="container-examples">
+        <div class="z-${args.zIndex1} position-absolute">z-${args.zIndex1}</div>
+        <div class="z-${args.zIndex2} position-absolute">z-${args.zIndex2}</div>
+        <div class="z-${args.zIndex3} position-absolute">z-${args.zIndex3}</div>
+      </div>
+    `;
+  },
+};
+
+export default meta;
+type Story = StoryObj;
+export const ZIndex: Story = {};

packages/documentation/src/stories/utilities/z-index/z-index.styles.scss

@@ -0,0 +1,28 @@
+@use '@swisspost/design-system-styles/core' as post;
+
+.container-examples {
+  position: relative;
+  height: 250px;
+  z-index: 0;
+}
+
+.container-examples > div{
+  width: 100px;
+  height: 100px;
+  background-color: post.$yellow;
+  color: post.$black;
+  font-weight: bold;
+  display: flex;
+  align-items: end;
+  justify-content: start;
+  border: post.$white 2px solid  ;
+  border-radius: 0.5rem;
+}
+
+@for $i from 1 through 5 {
+  .container-examples > div:nth-child(#{$i}) {
+    top: #{($i - 1) * 30}px;
+    left: #{($i - 1) * 40}px;
+  }
+}
+

packages/styles/src/utilities/_variables.scss

@@ -576,4 +576,15 @@ $utilities: (
     class: pe,
     values: none auto,
   ),
+  'z-index': (
+    property: z-index,
+    class: z,
+    values: (
+      n1: -1,
+      0: 0,
+      1: 1,
+      2: 2,
+      3: 3,
+    ),
+  ),
 );