feat(component): breadcrumb (#4065)

Co-authored-by: Philipp Gfeller <[email protected]>
swisspost · Dec 13, 2024 · 8d4a5aa · 8d4a5aa
1 parent 2cebad2
commit 8d4a5aa
Show file tree

Hide file tree

Showing 18 changed files with 731 additions and 16 deletions.
diff --git a/.changeset/real-gorillas-behave.md b/.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.
diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
@@ -97,6 +97,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.
@@ -554,6 +564,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: {
@@ -835,6 +851,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;
@@ -933,6 +950,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.
@@ -1261,6 +1288,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;
@@ -1300,6 +1328,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

diff --git a/packages/components/src/components/post-breadcrumb-item/post-breadcrumb-item.scss b/packages/components/src/components/post-breadcrumb-item/post-breadcrumb-item.scss
@@ -2,34 +2,43 @@
 @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/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('breadcrumb-icon-size');
     width: tokens.get('breadcrumb-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');
+  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,

diff --git a/packages/components/src/components/post-breadcrumb-item/post-breadcrumb-item.tsx b/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>

diff --git a/packages/components/src/components/post-breadcrumb-item/readme.md b/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
 ```
 

diff --git a/packages/components/src/components/post-breadcrumb/post-breadcrumb.scss b/packages/components/src/components/post-breadcrumb/post-breadcrumb.scss
@@ -0,0 +1,203 @@
+@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('breadcrumb-icon-size');
+  width: tokens.get('breadcrumb-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.6rem;
+  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();
+}