Merge branch 'main' into 1242-component-menu-button

.changeset/new-goats-impress.md

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

.changeset/proud-cheetahs-act.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-components': major
+'@swisspost/design-system-styles': major
+---
+
+Removed the `.breadcrumb-item` class, which previously handled styling for breadcrumb items. Introduced a new `post-breadcrumb-item` that should be used in place of the `.breadcrumb-item` class.

.changeset/rich-timers-listen.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+---
+
+Added the skiplinks component to styles and documentation.

packages/components/CONTRIBUTING.md

@@ -113,6 +113,10 @@ By setting a component's name as a `component` property in your stories' metadat
 All components should have automated tests.
 These tests are available in the `cypress/e2e` folder.
 
+### Set inital component Visibility to hidden
+
+To prevent flickering while components load, add each new component to the list in `packages/styles/src/utilities/_not-defined.scss`, which applies `visibility: hidden` to all listed components until they are registered by the browser (when the hydrated attribute actually starts to take effect).
+
 ## Stencil
 
 ![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)

packages/components/src/components.d.ts

@@ -93,12 +93,6 @@ export namespace Components {
          */
         "userid"?: string;
     }
-    interface PostBreadcrumb {
-        /**
-          * The optional URL to which the breadcrumb item will link.
-         */
-        "url"?: string | URL;
-    }
     interface PostBreadcrumbItem {
         /**
           * The optional URL to which the breadcrumb item will link.
@@ -485,12 +479,6 @@ declare global {
         prototype: HTMLPostAvatarElement;
         new (): HTMLPostAvatarElement;
     };
-    interface HTMLPostBreadcrumbElement extends Components.PostBreadcrumb, HTMLStencilElement {
-    }
-    var HTMLPostBreadcrumbElement: {
-        prototype: HTMLPostBreadcrumbElement;
-        new (): HTMLPostBreadcrumbElement;
-    };
     interface HTMLPostBreadcrumbItemElement extends Components.PostBreadcrumbItem, HTMLStencilElement {
     }
     var HTMLPostBreadcrumbItemElement: {
@@ -701,7 +689,6 @@ declare global {
         "post-accordion-item": HTMLPostAccordionItemElement;
         "post-alert": HTMLPostAlertElement;
         "post-avatar": HTMLPostAvatarElement;
-        "post-breadcrumb": HTMLPostBreadcrumbElement;
         "post-breadcrumb-item": HTMLPostBreadcrumbItemElement;
         "post-card-control": HTMLPostCardControlElement;
         "post-collapsible": HTMLPostCollapsibleElement;
@@ -790,12 +777,6 @@ declare namespace LocalJSX {
          */
         "userid"?: string;
     }
-    interface PostBreadcrumb {
-        /**
-          * The optional URL to which the breadcrumb item will link.
-         */
-        "url"?: string | URL;
-    }
     interface PostBreadcrumbItem {
         /**
           * The optional URL to which the breadcrumb item will link.
@@ -1071,7 +1052,6 @@ declare namespace LocalJSX {
         "post-accordion-item": PostAccordionItem;
         "post-alert": PostAlert;
         "post-avatar": PostAvatar;
-        "post-breadcrumb": PostBreadcrumb;
         "post-breadcrumb-item": PostBreadcrumbItem;
         "post-card-control": PostCardControl;
         "post-collapsible": PostCollapsible;
@@ -1102,7 +1082,6 @@ declare module "@stencil/core" {
             "post-accordion-item": LocalJSX.PostAccordionItem & JSXBase.HTMLAttributes<HTMLPostAccordionItemElement>;
             "post-alert": LocalJSX.PostAlert & JSXBase.HTMLAttributes<HTMLPostAlertElement>;
             "post-avatar": LocalJSX.PostAvatar & JSXBase.HTMLAttributes<HTMLPostAvatarElement>;
-            "post-breadcrumb": LocalJSX.PostBreadcrumb & JSXBase.HTMLAttributes<HTMLPostBreadcrumbElement>;
             "post-breadcrumb-item": LocalJSX.PostBreadcrumbItem & JSXBase.HTMLAttributes<HTMLPostBreadcrumbItemElement>;
             /**
              * @class PostCardControl - representing a stencil component

packages/components/src/components/post-breadcrumb-item/post-breadcrumb-item.scss

@@ -0,0 +1,44 @@
+@use 'sass:map';
+@use '@swisspost/design-system-styles/mixins/media';
+@use '@swisspost/design-system-styles/functions/tokens';
+@use '@swisspost/design-system-styles/tokens/components';
+@use '@swisspost/design-system-styles/mixins/utilities';
+
+tokens.$default-map: components.$post-breadcrumb;
+
+:host {
+  display: inline-block;
+  @include utilities.focus-style;
+}
+
+.breadcrumb-item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding-block: tokens.get('breadcrumb-padding-block-text');
+  gap: tokens.get('breadcrumb-gap-inline-inner');
+  color: tokens.get('breadcrumb-enabled-fg');
+  text-decoration: tokens.get('breadcrumb-link-enabled-text-decoration');
+
+  post-icon {
+    height: tokens.get('breadcrum-icon-size');
+    width: tokens.get('breadcrum-icon-size');
+  }
+
+  &:hover {
+    color: tokens.get('breadcrumb-hover-fg');
+    text-decoration: tokens.get('breadcrumb-link-hover-text-decoration');
+  }
+
+  @include utilities.high-contrast-mode() {
+    &,
+    &:focus,
+    &:hover {
+      color: LinkText !important;
+    }
+
+    &:visited {
+      color: VisitedText !important;
+    }
+  }
+}

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

@@ -0,0 +1,60 @@
+import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';
+import { version } from '@root/package.json';
+import { checkEmptyOrUrl } from '@/utils';
+
+/**
+ * @slot default - Slot for placing the text inside the breadcrumb item.
+ */
+@Component({
+  tag: 'post-breadcrumb-item',
+  styleUrl: 'post-breadcrumb-item.scss',
+  shadow: true,
+})
+export class PostBreadcrumbItem {
+  @Element() host: HTMLPostBreadcrumbItemElement;
+
+  /**
+   * The optional URL to which the breadcrumb item will link.
+   */
+  @Prop() url?: string | URL;
+
+  private validUrl?: string;
+
+  @Watch('url')
+  validateUrl() {
+    try {
+      this.validUrl = this.constructUrl(this.url);
+    } catch (error) {
+      this.validUrl = undefined;
+    }
+  }
+
+  // Helper to construct a valid URL string or return undefined
+  private constructUrl(value: unknown): string | undefined {
+    const hasBaseURL = /^https?:\/\//.test(String(this.url));
+    if (typeof value === 'string') {
+      const urlString = hasBaseURL
+        ? value
+        : `${window.location.origin}${value}`;
+      checkEmptyOrUrl(urlString, 'The "url" property of the post-breadcrumb-item is invalid');
+      return urlString;
+    } return undefined;
+  }
+
+  connectedCallback() {
+    this.validateUrl();
+  }
+
+  render() {
+    const BreadcrumbTag = this.validUrl ? 'a' : 'span';
+
+    return (
+      <Host data-version={version}>
+        <BreadcrumbTag class="breadcrumb-item" {...(this.validUrl ? { href: this.validUrl } : {})}>
+          <post-icon name="2111" class="breadcrumb-item-icon" />
+          <slot></slot>
+        </BreadcrumbTag>
+      </Host>
+    );
+  }
+}

packages/components/src/components/post-breadcrumb-item/readme.md

@@ -0,0 +1,37 @@
+# post-breadcrumb-item
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description                                              | Type            | Default     |
+| -------- | --------- | -------------------------------------------------------- | --------------- | ----------- |
+| `url`    | `url`     | The optional URL to which the breadcrumb item will link. | `URL \| string` | `undefined` |
+
+
+## Slots
+
+| Slot        | Description                                           |
+| ----------- | ----------------------------------------------------- |
+| `"default"` | Slot for placing the text inside the breadcrumb item. |
+
+
+## Dependencies
+
+### Depends on
+
+- [post-icon](../post-icon)
+
+### Graph
+```mermaid
+graph TD;
+  post-breadcrumb-item --> post-icon
+  style post-breadcrumb-item fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

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

@@ -23,6 +23,7 @@ some content
 ### Used by
 
  - [post-alert](../post-alert)
+ - [post-breadcrumb-item](../post-breadcrumb-item)
  - [post-card-control](../post-card-control)
  - [post-rating](../post-rating)
  - [post-tag](../post-tag)
@@ -31,6 +32,7 @@ some content
 ```mermaid
 graph TD;
   post-alert --> post-icon
+  post-breadcrumb-item --> post-icon
   post-card-control --> post-icon
   post-rating --> post-icon
   post-tag --> post-icon

packages/components/src/index.ts

@@ -4,6 +4,7 @@ export { Components, JSX } from './components';
 export { PostAccordion } from './components/post-accordion/post-accordion';
 export { PostAccordionItem } from './components/post-accordion-item/post-accordion-item';
 export { PostAlert } from './components/post-alert/post-alert';
+export { PostBreadcrumbItem } from './components/post-breadcrumb-item/post-breadcrumb-item';
 export { PostAvatar } from './components/post-avatar/post-avatar';
 export { PostCardControl } from './components/post-card-control/post-card-control';
 export { PostCollapsible } from './components/post-collapsible/post-collapsible';

packages/documentation/cypress/e2e/components/skiplinks.cy.ts

@@ -0,0 +1,24 @@
+describe('Skiplinks', () => {
+  beforeEach(() => {
+    cy.visit('/iframe.html?id=snapshots--skiplinks');
+    cy.get('.skiplinks-container', { timeout: 30000 }).should('be.visible');
+  });
+
+  it('should take no space by default and be visible on focus', () => {
+    cy.get('.skiplinks a[href="#navigation"]').should(el => {
+      const clipValue = el.css('clip');
+      const width = el.width();
+
+      expect(clipValue).to.equal('rect(0px, 0px, 0px, 0px)');
+      expect(width).to.equal(0);
+    });
+    cy.get('.skiplinks a[href="#navigation"]').focus();
+    cy.get('.skiplinks a[href="#navigation"]').should(el => {
+      const clipValue = el.css('clip');
+      const width = el.width();
+
+      expect(clipValue).to.equal('auto');
+      expect(width).to.be.greaterThan(20);
+    });
+  });
+});

packages/documentation/cypress/snapshots/components/skiplinks.snapshot.ts

@@ -0,0 +1,7 @@
+describe('Skiplinks', () => {
+  it('default', () => {
+    cy.visit('/iframe.html?id=2fc3b456-19ba-4ede-b1bc-499518f829b1--default');
+    cy.get('.skiplinks-container', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('Skiplinks', { widths: [1440] });
+  });
+});

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/components/skiplinks/skiplinks.docs.mdx

@@ -0,0 +1,20 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+import * as Skiplinks from './skiplinks.stories.ts';
+import StylesPackageImport from '@/shared/styles-package-import.mdx';
+
+<Meta of={Skiplinks} />
+
+<div className="docs-title">
+# Skiplinks
+</div>
+
+<div className="lead">
+  People using keyboard, screen readers, switch controls and other assistive technologies use skip
+  links to reach main content or other important sections easier and faster.
+</div>
+
+For the skiplinks to work, don't forget to add corresponding ID to the element that needs to be skipped to.
+
+<Canvas sourceState="shown" of={Skiplinks.Default} />
+
+<StylesPackageImport components={['skiplinks']} />

packages/documentation/src/stories/components/skiplinks/skiplinks.snapshot.stories.ts

@@ -0,0 +1,18 @@
+import type { StoryObj } from '@storybook/web-components';
+import meta, { renderSkiplinks } from './skiplinks.stories';
+import { html } from 'lit';
+
+const { id, ...metaWithoutId } = meta;
+
+export default {
+  ...metaWithoutId,
+  title: 'Snapshots',
+};
+
+type Story = StoryObj;
+
+export const Skiplinks: Story = {
+  render: () => {
+    return html`<div class="skiplinks-container">${renderSkiplinks()}</div> `;
+  },
+};

packages/documentation/src/stories/components/skiplinks/skiplinks.stories.ts

@@ -0,0 +1,41 @@
+import type { StoryObj } from '@storybook/web-components';
+import { html } from 'lit/static-html.js';
+import { MetaExtended } from '@root/types';
+
+const meta: MetaExtended = {
+  id: '2fc3b456-19ba-4ede-b1bc-499518f829b1',
+  title: 'Components/Skiplinks',
+  tags: ['package:HTML'],
+  render: renderSkiplinks,
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export function renderSkiplinks() {
+  return html`
+    <div class="skiplinks">
+      <a href="#navigation" target="_self">Navigation</a>
+      <a href="#main-content" target="_self">Main</a>
+    </div>
+    <div id="navigation" role="navigation">
+      Navigation
+      <ul>
+        <li>
+          <a href="#">Link</a>
+        </li>
+      </ul>
+    </div>
+    <div id="main-content" role="main" tabindex="-1">
+      Main content
+      <ul>
+        <li>
+          <a href="#">Link</a>
+        </li>
+      </ul>
+    </div>
+  `;
+}
+
+export const Default: Story = {};