Merge branch 'main' into 3653-utilities-shadows

.changeset/chatty-pigs-hear.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+---
+
+Implemented gutter utility classes.

.changeset/lucky-grapes-wink.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Reduced the length of random IDs generated in the components; they are now generated using the [nanoid library](https://github.com/ai/nanoid) instead of the [Web Crypto API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API).

.changeset/silent-vans-care.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Updated header overflow in tablet and mobile for long application titles.

packages/components/src/components/post-accordion-item/post-accordion-item.tsx

@@ -2,6 +2,7 @@ import { Component, Element, h, Host, Listen, Method, Prop, State, Watch } from
 import { version } from '@root/package.json';
 import { HEADING_LEVELS, HeadingLevel } from '@/types';
 import { checkEmptyOrOneOf } from '@/utils';
+import { nanoid } from 'nanoid';
 
 /**
  * @part button - The pseudo-element, used to override styles on the components internal header `button` element.
@@ -46,7 +47,7 @@ export class PostAccordionItem {
   }
 
   componentWillLoad() {
-    this.id = this.host.id || `a${crypto.randomUUID()}`;
+    this.id = this.host.id || `p${nanoid(6)}`;
   }
 
   componentDidLoad() {

packages/components/src/components/post-banner/post-banner.tsx

@@ -14,6 +14,7 @@ import { version } from '@root/package.json';
 import { fadeOut } from '@/animations';
 import { checkEmptyOrOneOf, checkEmptyOrPattern, checkNonEmpty, checkType } from '@/utils';
 import { BANNER_TYPES, BannerType } from './banner-types';
+import { nanoid } from 'nanoid';
 
 /**
  * @slot heading - Slot for placing custom content within the banner's heading.
@@ -29,7 +30,7 @@ import { BANNER_TYPES, BannerType } from './banner-types';
 export class PostBanner {
   @Element() host: HTMLPostBannerElement;
 
-  @State() bannerId = crypto.randomUUID();
+  @State() bannerId = `p${nanoid(6)}`;
   @State() classes: string;
   @State() hasActions: boolean;
   @State() hasHeading: boolean;

packages/components/src/components/post-header/post-header.scss

@@ -11,6 +11,7 @@
   --global-header-height: 72px;
   --global-header-minimal-height: 24px;
   --main-header-height: 56px;
+  --main-header-min-height: 56px;
   --header-height: calc(var(--global-header-height) + var(--main-header-height));
 
   @include media.min(lg) {
@@ -27,6 +28,7 @@
   @include media.max(lg) {
     --global-header-height: 64px;
     --main-header-height: 48px;
+    --main-header-min-height: 48px;
   }
 }
 
@@ -66,7 +68,6 @@ slot[name='post-logo'] {
   display: flex;
   align-items: center;
   gap: var(--post-core-dimension-24);
-  height: var(--global-header-height);
 }
 
 .align-end {
@@ -91,14 +92,15 @@ slot[name='post-logo'] {
   display: flex;
   padding-left: 0;
   gap: 1rem;
+  flex-shrink: 0 !important;
 }
 
 .title-header {
   display: flex;
   align-items: center;
+  gap: var(--post-core-dimension-8);
+  min-height: var(--main-header-min-height);
   justify-content: space-between;
-  gap: var(--post-core-dimension-4);
-  height: var(--main-header-height);
   background: var(--post-core-color-brand-white);
 
   @include media.min(lg) {
@@ -111,6 +113,8 @@ slot[name='post-logo'] {
     z-index: 1;
     inset-block-start: var(--global-header-height);
     padding-inline: var(--post-core-dimension-8) var(--post-core-dimension-16);
+    padding-block: var(--post-core-dimension-9);
+    flex-wrap: wrap;
 
     &.title-header-mobile-extended {
       border-bottom: 1px solid var(--post-core-color-sandgrey-012);
@@ -124,13 +128,15 @@ slot[name='post-logo'] {
 
 ::slotted(h1) {
   margin: 0 !important;
+  flex-shrink: 10;
 
   @include media.min(lg) {
     font-size: var(--post-core-font-size-28) !important;
   }
 
   @include media.max(lg) {
     font-size: var(--post-core-font-size-20) !important;
+    max-width: calc(100vw - var(--post-core-dimension-8) - var(--post-core-dimension-16));
   }
 }
 

packages/components/src/components/post-header/post-header.tsx

@@ -113,6 +113,9 @@ export class PostHeader {
       this.mobileMenuAnimation.finish(); // no animation
     }
 
+    const mhh = this.host.shadowRoot.querySelector('.title-header').clientHeight;
+    this.host.style.setProperty('--main-header-height', `${mhh}px`);
+
     // Apply only on change for doing work only when necessary
     if (newDevice !== previousDevice) {
       this.device = newDevice;

packages/components/src/components/post-list/post-list.tsx

@@ -1,5 +1,6 @@
 import { Component, Element, Prop, Host, State, h } from '@stencil/core';
 import { version } from '@root/package.json';
+import { nanoid } from 'nanoid';
 
 /**
  * @slot default - Slot for placing the list title.
@@ -35,7 +36,7 @@ export class PostList {
     /**
      * Get the id set on the host element or use a random id by default
      */
-    this.titleId = `title-${this.host.id || crypto.randomUUID()}`;
+    this.titleId = `title-${this.host.id || nanoid(6)}`;
   }
 
   componentDidLoad() {

packages/components/src/components/post-megadropdown/post-megadropdown.scss

@@ -26,10 +26,6 @@
 }
 
 post-popovercontainer {
-  --post-global-header-height: 72px;
-  --post-main-header-height: 56px;
-  --post-header-height: calc(var(--post-global-header-height) + var(--post-main-header-height));
-
   background-color: #fafafa;
   border: none;
   border-top: 1px solid #e1e0dc;
@@ -38,9 +34,8 @@ post-popovercontainer {
   box-shadow: 0 8px 6px rgba(0, 0, 0, 16%);
 
   @include media.max(lg) {
-    --post-global-header-height: 64px;
     position: absolute;
-    top: var(--post-header-height) !important;
+    top: var(--header-height) !important;
     bottom: 0;
     left: 0;
     width: 100%;

packages/components/src/components/post-tab-header/post-tab-header.tsx

@@ -1,6 +1,7 @@
 import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';
 import { version } from '@root/package.json';
 import { checkNonEmpty } from '@/utils';
+import { nanoid } from 'nanoid';
 
 /**
  * @slot default - Slot for the content of the tab header.
@@ -27,7 +28,7 @@ export class PostTabHeader {
   }
 
   componentWillLoad() {
-    this.tabId = `tab-${this.host.id || crypto.randomUUID()}`;
+    this.tabId = `tab-${this.host.id || nanoid(6)}`;
   }
 
   render() {

packages/components/src/components/post-tab-panel/post-tab-panel.tsx

@@ -1,5 +1,6 @@
 import { Component, Element, h, Host, Prop, State } from '@stencil/core';
 import { version } from '@root/package.json';
+import { nanoid } from 'nanoid';
 
 /**
  * @slot default - Slot for placing the content of the tab panel.
@@ -22,7 +23,7 @@ export class PostTabPanel {
 
   componentWillLoad() {
     // get the id set on the host element or use a random id by default
-    this.panelId = `panel-${this.host.id || crypto.randomUUID()}`;
+    this.panelId = `panel-${this.host.id || nanoid(6)}`;
   }
 
   render() {

packages/documentation/cypress/snapshots/utilities/gutters.snapshot.ts

@@ -0,0 +1,7 @@
+describe('Gutters', () => {
+  it('Gutters', () => {
+    cy.visit('/iframe.html?id=snapshots--gutters');
+    cy.get('.gutters-example', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('Gutters', { widths: [320, 780, 1024, 1440] });
+  });
+});

packages/documentation/src/stories/foundations/layout/grid/grid.docs.mdx

@@ -106,6 +106,11 @@ To control the space between your columns, add either `.g-*` (horizontal and ver
 
 <Canvas of={GridStories.Gutters} />
 
+<div className="banner banner-info my-24">
+  You can find additional information and examples of grid gutters{' '}
+  <a href="/?path=/docs/64b63483-79fa-4e9f-9441-f7d6b2eabae2--docs">here</a>.
+</div>
+
 ## Nesting
 
 To nest your content with the default grid, add a new `.row` and set of `.col-*` columns within an existing `.col-*` column. Nested rows should include a set of columns that add up to 12 or fewer.

packages/documentation/src/stories/utilities/gutters/gutters.docs.mdx

@@ -0,0 +1,58 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+import * as GutterStories from './gutters.stories';
+
+export const firstBreakpoint = Object.values(GutterStories.SCSS_VARIABLES.firstBreakpoint)[0];
+export const breakpoints = Object.values(GutterStories.SCSS_VARIABLES.breakpoints).map(
+  (breakpoint, i, arr) => [breakpoint, i !== arr.length - 1],
+);
+
+<Meta of={GutterStories} />
+
+# Gutters
+
+Gutters are the spaces between column content in grid elements (e.g., `.row`, `.col`, `.col-*`). They are implemented by applying an inline-padding to each column, along with matching negative margins to offset the padding at the row's edges.
+
+## Horizontal gutters
+
+The `.gx-{size}` classes can be used to set the horizontal gutters within the columns (`.col`) of a `.row`.
+
+### Example
+
+<Canvas sourceState="shown" of={GutterStories.HorizontalGutters} />
+<div className="hide-col-default">
+  <Controls of={GutterStories.HorizontalGutters} />
+</div>
+
+## Vertical gutters
+
+The `.gy-{size}` classes can be used to set the vertical gutter width when a `.row` wraps to new lines.
+
+### Example
+
+<Canvas sourceState="shown" of={GutterStories.VerticalGutters} />
+<div className="hide-col-default">
+  <Controls of={GutterStories.VerticalGutters} />
+</div>
+
+## Horizontal and vertical gutters
+
+The `.g-{size}` classes can be used to set both the horizontal and vertical gutter widths.
+
+### Example
+
+<Canvas sourceState="shown" of={GutterStories.GeneralGutters} />
+<div className="hide-col-default">
+  <Controls of={GutterStories.GeneralGutters} />
+</div>
+
+## No gutters
+
+Gutters can be eliminated by applying the classes `.g-0`, `.gx-0`, or `.gy-0`, which remove all gutters, horizontal gutters, or vertical gutters, respectively.
+
+## Relative to breakpoints
+
+Breakpoint-specific classes allow precise control of horizontal, vertical, and general gutters at various screen sizes.
+
+- `.gx-{breakpoint}-{size}` (e.g. `gx-lg-24`)
+- `.gy-{breakpoint}-{size}` (e.g. `gy-sm-32`)
+- `.g-{breakpoint}-{size}` (e.g. `g-md-12`)

packages/documentation/src/stories/utilities/gutters/gutters.module.scss

@@ -0,0 +1,18 @@
+@use 'sass:list';
+@use 'sass:map';
+@use '@swisspost/design-system-styles/core' as post;
+@use '@swisspost/design-system-styles/tokens/utilities' as tokens;
+
+:export {
+  @each $key, $value in tokens.$post-spacing {
+    spacing_#{$key}: #{$value};
+  }
+  @each $breakpoint in post.$grid-breakpoints-list {
+    @if (map.get(post.$grid-breakpoints, $breakpoint) == 0) {
+      firstBreakpoint_#{$breakpoint}: $breakpoint;
+    }
+    @if (map.get(post.$grid-breakpoints, $breakpoint) != 0) {
+      breakpoints_#{$breakpoint}: $breakpoint;
+    }
+  }
+}

packages/documentation/src/stories/utilities/gutters/gutters.snapshot.stories.ts

@@ -0,0 +1,44 @@
+import type { Args, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import { COLOR_SCHEMES, schemes } from '@/shared/snapshots/schemes';
+import meta from './gutters.stories';
+import './gutters.styles.scss';
+import { bombArgs } from '@/utils';
+
+const { id, ...metaWithoutId } = meta;
+
+export default {
+  ...metaWithoutId,
+  title: 'Snapshots',
+};
+
+const sizes = ['0', '1', '2', '4', '8', '12', '24', '32', '48'];
+const gutterType = ['g', 'gx', 'gy'];
+
+export const Gutters: StoryObj = {
+  render: () => {
+    return schemes(
+      () => {
+        return html`
+          ${bombArgs({
+            gutterType: gutterType,
+            sizes: sizes,
+          }).map(
+            (args: Args) =>
+              html`
+                <div class="container my-24 mx-0">
+                  <div class="row ${args.gutterType}-${args.sizes}">
+                    <div class="col-6">${args.gutterType}-${args.sizes}</div>
+                    <div class="col-6">${args.gutterType}-${args.sizes}</div>
+                    <div class="col-6">${args.gutterType}-${args.sizes}</div>
+                    <div class="col-6">${args.gutterType}-${args.sizes}</div>
+                  </div>
+                </div>
+              `,
+          )}
+        `;
+      },
+      { filter: scheme => scheme === COLOR_SCHEMES.light },
+    );
+  },
+};