feat(component): breadcrumb

.changeset/real-gorillas-behave.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-components': minor
+---
+
+Added the `post-breadcrumb` component to provide a standalone breadcrumb navigation solution.

packages/components/src/components.d.ts

@@ -95,6 +95,16 @@ export namespace Components {
          */
         "type": BannerType;
     }
+    interface PostBreadcrumb {
+        /**
+          * The text label for the home breadcrumb item.
+         */
+        "homeText": string;
+        /**
+          * The URL for the home breadcrumb item.
+         */
+        "homeUrl": string;
+    }
     interface PostBreadcrumbItem {
         /**
           * The optional URL to which the breadcrumb item will link.
@@ -529,6 +539,12 @@ declare global {
         prototype: HTMLPostBannerElement;
         new (): HTMLPostBannerElement;
     };
+    interface HTMLPostBreadcrumbElement extends Components.PostBreadcrumb, HTMLStencilElement {
+    }
+    var HTMLPostBreadcrumbElement: {
+        prototype: HTMLPostBreadcrumbElement;
+        new (): HTMLPostBreadcrumbElement;
+    };
     interface HTMLPostBreadcrumbItemElement extends Components.PostBreadcrumbItem, HTMLStencilElement {
     }
     var HTMLPostBreadcrumbItemElement: {
@@ -798,6 +814,7 @@ declare global {
         "post-avatar": HTMLPostAvatarElement;
         "post-back-to-top": HTMLPostBackToTopElement;
         "post-banner": HTMLPostBannerElement;
+        "post-breadcrumb": HTMLPostBreadcrumbElement;
         "post-breadcrumb-item": HTMLPostBreadcrumbItemElement;
         "post-card-control": HTMLPostCardControlElement;
         "post-closebutton": HTMLPostClosebuttonElement;
@@ -894,6 +911,16 @@ declare namespace LocalJSX {
          */
         "type"?: BannerType;
     }
+    interface PostBreadcrumb {
+        /**
+          * The text label for the home breadcrumb item.
+         */
+        "homeText"?: string;
+        /**
+          * The URL for the home breadcrumb item.
+         */
+        "homeUrl"?: string;
+    }
     interface PostBreadcrumbItem {
         /**
           * The optional URL to which the breadcrumb item will link.
@@ -1194,6 +1221,7 @@ declare namespace LocalJSX {
         "post-avatar": PostAvatar;
         "post-back-to-top": PostBackToTop;
         "post-banner": PostBanner;
+        "post-breadcrumb": PostBreadcrumb;
         "post-breadcrumb-item": PostBreadcrumbItem;
         "post-card-control": PostCardControl;
         "post-closebutton": PostClosebutton;
@@ -1231,6 +1259,7 @@ declare module "@stencil/core" {
             "post-avatar": LocalJSX.PostAvatar & JSXBase.HTMLAttributes<HTMLPostAvatarElement>;
             "post-back-to-top": LocalJSX.PostBackToTop & JSXBase.HTMLAttributes<HTMLPostBackToTopElement>;
             "post-banner": LocalJSX.PostBanner & JSXBase.HTMLAttributes<HTMLPostBannerElement>;
+            "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

@@ -2,34 +2,45 @@
 @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/tokens/helpers';
+@use '@swisspost/design-system-styles/tokens/elements';
 @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;
+  display: flex;
   align-items: center;
-  justify-content: center;
-  padding-block: tokens.get('breadcrumb-padding-block-text');
+  justify-content: start;
   gap: tokens.get('breadcrumb-gap-inline-inner');
-  color: tokens.get('breadcrumb-enabled-fg');
-  text-decoration: tokens.get('breadcrumb-link-enabled-text-decoration');
 
   post-icon {
+    box-sizing: border-box;
     height: tokens.get('breadcrum-icon-size');
     width: tokens.get('breadcrum-icon-size');
+    padding-block: tokens.get('breadcrumb-padding-block-icon-link');
+    padding-inline: tokens.get('breadcrumb-padding-inline-icon-link');
   }
+}
+
+.breadcrumb-item {
+  white-space: nowrap;
+  line-height: 150%;
+  padding-block: tokens.get('breadcrumb-padding-block-text');
+  font-size: tokens.get('body-font-size', elements.$post-body);
+  color: tokens.get('breadcrumb-enabled-fg');
+  text-decoration: tokens.get('breadcrumb-link-enabled-text-decoration');
+  @include utilities.focus-style();
 
   &:hover {
     color: tokens.get('breadcrumb-hover-fg');
     text-decoration: tokens.get('breadcrumb-link-hover-text-decoration');
   }
 
+  &:focus-visible {
+    border-radius: tokens.get('focus-border-radius', helpers.$post-focus);
+  }
+
   @include utilities.high-contrast-mode() {
     &,
     &:focus,

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

@@ -45,13 +45,24 @@ export class PostBreadcrumbItem {
     this.validateUrl();
   }
 
+  private handleKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      const linkElement = this.host.shadowRoot?.querySelector('a');
+      if (linkElement) {
+        event.preventDefault();
+        (linkElement as HTMLElement).click();
+      }
+    }
+  }
+
   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" />
+        <post-icon name="2111" class="breadcrumb-item-icon" />
+        <BreadcrumbTag class="breadcrumb-item" {...(this.validUrl ? { href: this.validUrl } : {})}
+          onKeyDown={(event) => this.handleKeyDown(event)}>
           <slot></slot>
         </BreadcrumbTag>
       </Host>

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

@@ -21,6 +21,10 @@
 
 ## Dependencies
 
+### Used by
+
+ - [post-breadcrumb](../post-breadcrumb)
+
 ### Depends on
 
 - [post-icon](../post-icon)
@@ -29,6 +33,7 @@
 ```mermaid
 graph TD;
   post-breadcrumb-item --> post-icon
+  post-breadcrumb --> post-breadcrumb-item
   style post-breadcrumb-item fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

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

@@ -0,0 +1,201 @@
+@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/tokens/elements';
+@use '@swisspost/design-system-styles/mixins/utilities';
+@use '@swisspost/design-system-styles/core' as post;
+@use '@swisspost/design-system-styles/tokens/helpers';
+
+tokens.$default-map: components.$post-breadcrumb;
+
+:host {
+  display: flex;
+  align-items: center;
+}
+
+.breadcrumbs-nav {
+  display: flex;
+  align-items: center;
+
+  .hidden-items {
+    gap: tokens.get('breadcrumb-gap-inline-outer');
+    position: absolute;
+    height: 0;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  .breadcrumbs-list {
+    display: flex;
+    flex-wrap: nowrap;
+    position: relative;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    align-items: center;
+    height: 100%;
+    gap: tokens.get('breadcrumb-gap-inline-outer');
+
+    post-icon {
+      display: inline-block;
+      box-sizing: border-box;
+      color: tokens.get('breadcrumb-enabled-fg');
+      height: tokens.get('breadcrum-icon-size');
+      width: tokens.get('breadcrum-icon-size');
+    }
+
+    .breadcrumb-item-icon {
+      padding-block: tokens.get('breadcrumb-padding-block-icon-link');
+      padding-inline: tokens.get('breadcrumb-padding-inline-icon-link');
+    }
+
+    li {
+      a {
+        display: flex;
+        align-items: center;
+        @include utilities.focus-style;
+
+        &:focus {
+          border-radius: tokens.get('focus-border-radius', helpers.$post-focus);
+        }
+
+      .home-icon {
+        padding-block: tokens.get('breadcrumb-padding-block-icon-home');
+        padding-inline: tokens.get('breadcrumb-padding-inline-icon-home');
+
+        &:hover {
+          color: tokens.get('breadcrumb-hover-fg');
+        }
+
+        @include utilities.high-contrast-mode() {
+          a,
+          &:focus,
+          &:hover {
+            color: CanvasText !important;
+          }
+        }
+        }
+      }
+    }
+    .menu-trigger-wrapper {
+      display: flex;
+      align-items: center;
+      gap: tokens.get('breadcrumb-gap-inline-inner');
+
+      .actual-menu {
+        display: flex;
+        align-items: center;
+
+        post-menu-trigger {
+          display: flex;
+          align-items: center;
+          padding-block: tokens.get('breadcrumb-padding-block-text');
+          @include utilities.focus-style;
+
+            &:focus {
+              border-radius: tokens.get('focus-border-radius', helpers.$post-focus);
+            }
+
+          button {
+            background: none;
+            border: none;
+            line-height: 150%;
+            font-size: tokens.get('body-font-size', elements.$post-body);
+            cursor: pointer;
+            padding: 0;
+            color: tokens.get('breadcrumb-enabled-fg');
+
+            &:hover {
+              color: tokens.get('breadcrumb-hover-fg');
+            }
+
+            @include utilities.high-contrast-mode() {
+              a,
+              &:focus,
+              &:hover {
+                color: LinkText !important;
+              }
+            }
+          }
+        }
+
+        post-menu::part(popover-container) {
+          display: flex;
+          flex-direction: column;
+          align-items: start;
+          padding: 0.3rem;
+          gap: tokens.get('breadcrumb-gap-inline-outer');
+
+          ::slotted(post-menu-item:not(:last-child)) {
+            margin-bottom: tokens.get('breadcrumb-gap-inline-outer');
+          }
+        }
+
+        .breadcrumb-item {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: tokens.get('breadcrumb-gap-inline-inner');
+
+          a {
+            text-decoration: none;
+            color: inherit;
+            line-height: 150%;
+            padding-block: tokens.get('breadcrumb-padding-block-text');
+            font-size: tokens.get('body-font-size', elements.$post-body);
+            @include utilities.focus-style;
+
+            &:hover {
+              color: tokens.get('breadcrumb-hover-fg');
+              text-decoration: tokens.get('breadcrumb-link-hover-text-decoration');
+            }
+
+            &:focus-visible {
+              border-radius: tokens.get('focus-border-radius', helpers.$post-focus);
+            }
+          }
+
+          span {
+            &:hover {
+              color: tokens.get('breadcrumb-hover-fg');
+              text-decoration: tokens.get('breadcrumb-link-hover-text-decoration');
+            }
+
+            &:focus-visible {
+              border-radius: tokens.get('focus-border-radius', helpers.$post-focus);
+            }
+          }
+
+          @include utilities.high-contrast-mode() {
+            a,
+            &:focus,
+            &:hover {
+              color: LinkText !important;
+            }
+
+            &:visited {
+              color: VisitedText !important;
+            }
+          }
+        }
+      }
+    }
+
+    post-breadcrumb-item:last-of-type {
+      pointer-events: none;
+      color: tokens.get('breadcrumb-selected-fg');
+      font-weight: tokens.get('breadcrumb-selected-font-weight');
+      text-decoration: tokens.get('breadcrumb-link-selected-text-decoration');
+
+      &:hover {
+        color: tokens.get('breadcrumb-selected-fg');
+        text-decoration: none;
+      }
+    }
+
+    .visually-hidden {
+      @include post.visually-hidden();
+    }
+  }
+}