feat(styles): updated vertical-align utility (#3805)

Co-authored-by: Oliver Schürch <[email protected]>

.changeset/new-goats-impress.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+---
+
+Updated vertical-align utility

packages/documentation/cypress/snapshots/utilities/vertical-align.snapshot.ts

@@ -0,0 +1,7 @@
+describe('Vetical Align', () => {
+  it('vertica-align', () => {
+    cy.visit('/iframe.html?id=snapshots--vertical-align');
+    cy.get('.vertical-align-example', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('Vertical Align', { widths: [1440] });
+  });
+});

packages/documentation/src/stories/utilities/vertical-align/vertical-align.docs.mdx

@@ -0,0 +1,29 @@
+import { Canvas, Controls, Meta, Source } from '@storybook/blocks';
+import { formatAsMap } from '@/utils/sass-export';
+import * as VerticalAlignStories from './vertical-align.stories';
+
+<Meta of={VerticalAlignStories} />
+
+# Vertical Alignment
+
+<div className="lead">
+  Use the vertical alignment utilities to adjust the alignment of elements.
+</div>
+
+Note that vertical-align applies only to `inline`, `inline-block, `inline-table`, and `table-cell` elements.
+
+## Examples
+
+With inline elements:
+
+<Canvas sourceState="shown" of={VerticalAlignStories.Default} />
+<div className="hide-col-default">
+  <Controls of={VerticalAlignStories.Default} />
+</div>
+
+With table cells:
+
+<Canvas sourceState="shown" of={VerticalAlignStories.tableVersion} />
+<div className="hide-col-default">
+  <Controls of={VerticalAlignStories.tableVersion} />
+</div>

packages/documentation/src/stories/utilities/vertical-align/vertical-align.snapshot.stories.ts

@@ -0,0 +1,33 @@
+import type { StoryObj, StoryFn, StoryContext } from '@storybook/web-components';
+import { html } from 'lit';
+import meta from './vertical-align.stories';
+import './vertical-align.styles.scss';
+
+const { id, ...metaWithoutId } = meta;
+
+export default {
+  ...metaWithoutId,
+  title: 'Snapshots',
+};
+
+type Story = StoryObj;
+
+export const VerticalAlign: Story = {
+  render: () => {
+    return html`
+      ${meta?.argTypes?.align?.options?.map(
+        align =>
+          html`<div>
+            <span>${align ? `align-${align}` : 'text'}</span>
+            <img class="logo align-${align}" alt="logo" src="/assets/images/logo-swisspost.svg" />
+          </div>`,
+      )}
+    `;
+  },
+  decorators: [
+    (story: StoryFn, context: StoryContext) => {
+      const storyTemplate = html`<div class="snapshot">${story(context.args, context)}</div>`;
+      return storyTemplate;
+    },
+  ],
+};

packages/documentation/src/stories/utilities/vertical-align/vertical-align.stories.ts

@@ -0,0 +1,68 @@
+import type { Args, StoryObj, StoryFn, StoryContext } from '@storybook/web-components';
+import { html, nothing } from 'lit';
+import './vertical-align.styles.scss';
+import { MetaExtended } from '@root/types';
+
+const alignOptions = ['baseline', 'top', 'middle', 'bottom', 'text-bottom', 'text-top'];
+
+const meta: MetaExtended = {
+  id: 'cf01f6d1-970f-444e-aaa9-8a96c25cc8b2',
+  title: 'Utilities/Vertical Align',
+  args: {
+    align: '',
+  },
+  argTypes: {
+    align: {
+      name: 'align',
+      description: 'Set the vertical alignment of the text',
+      control: {
+        type: 'select',
+      },
+      options: alignOptions,
+    },
+  },
+  render: (args: Args) => {
+    return html`<span class="align-baseline">baseline</span>
+      <span class="align-top">top</span>
+      <span class="align-middle">middle</span>
+      <span class="align-bottom">bottom</span>
+      <span class="align-text-bottom">text-bottom</span>
+      <span class="align-text-top">text-top</span>
+      <span class="${args.align ? 'align-' + args.align : nothing}">${args.align || 'text'}</span>`;
+  },
+  decorators: [
+    (story: StoryFn, context: StoryContext) => {
+      const storyTemplate = html`<div class="vertical-align-example">
+        ${story(context.args, context)}
+      </div>`;
+      return storyTemplate;
+    },
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const tableVersion: Story = {
+  argTypes: {
+    align: {
+      options: alignOptions.filter(o => !o.includes('text-')),
+    },
+  },
+  render: (args: Args) => {
+    return html`<table class="table table-bordered">
+      <tbody>
+        <tr>
+          <td class="align-baseline">baseline</td>
+          <td class="align-top">top</td>
+          <td class="align-middle">middle</td>
+          <td class="align-bottom">bottom</td>
+          <td class="${args.align ? 'align-' + args.align : nothing}">${args.align || 'text'}</td>
+        </tr>
+      </tbody>
+    </table>`;
+  },
+};

packages/documentation/src/stories/utilities/vertical-align/vertical-align.styles.scss

@@ -0,0 +1,61 @@
+.vertical-align-example {
+  :not(:has(table)) & {
+    border: 1px solid rgb(204, 204, 204);
+    line-height: 3;
+  }
+
+  table {
+    margin: 0;
+    height: 100px;
+    td:nth-of-type(5) {
+      color: red;
+    }
+  }
+
+  span {
+    padding-inline: 0.5rem;
+    &:nth-of-type(7) {
+      padding-inline-start: 2rem;
+      color: red;
+    }
+  }
+
+  .logo {
+    width: 1rem;
+    height: 1rem;
+    display: inline-block;
+  }
+
+  .snapshot {
+    gap: 2rem;
+    display: flex;
+    flex-direction: column;
+
+    & > div {
+      border: 1px solid rgb(204, 204, 204);
+      width: 320px;
+
+      span {
+        min-width: 150px;
+      }
+
+      span:nth-of-type(2) {
+        color: gray;
+      }
+    }
+  }
+
+  .box {
+    border: 1px solid rgb(204, 204, 204);
+    height: 50px;
+    width: 50px;
+    display: inline-block;
+    text-align: center;
+  }
+}
+
+#storybook-root .vertical-align-example {
+  &:not(:has(table)) {
+    border: none;
+  }
+}

packages/styles/src/themes/bootstrap/_utilities.scss

@@ -39,6 +39,8 @@ $utilities: map.remove($utilities, 'justify-content');
 
 $utilities: map.remove($utilities, 'display');
 
+$utilities: map.remove($utilities, 'vertical-align');
+
 $utilities: map.remove($utilities, 'float');
 
 $utilities: map.remove($utilities, 'opacity');

packages/styles/src/utilities/_variables.scss

@@ -22,6 +22,11 @@
 */
 
 $utilities: (
+  'align': (
+    property: vertical-align,
+    class: align,
+    values: baseline top middle bottom text-bottom text-top,
+  ),
   'float': (
     responsive: true,
     property: float,
@@ -83,7 +88,6 @@ $utilities: (
     class: ms,
     values: from-tokens('spacing', 'margin'),
   ),
-
   'padding': (
     responsive: true,
     property: padding,
@@ -126,7 +130,6 @@ $utilities: (
     class: ps,
     values: from-tokens('spacing', 'padding'),
   ),
-
   'gap': (
     responsive: true,
     property: gap,