feat(components): create the post-breadcrumb-item (#3659)

Co-authored-by: Zherdetska Alona, IT21.1 <[email protected]>
Co-authored-by: Alizé Debray <[email protected]>

.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.

packages/components/src/components.d.ts

@@ -93,6 +93,12 @@ export namespace Components {
          */
         "userid"?: string;
     }
+    interface PostBreadcrumbItem {
+        /**
+          * The optional URL to which the breadcrumb item will link.
+         */
+        "url"?: string | URL;
+    }
     /**
      * @class PostCardControl - representing a stencil component
      */
@@ -442,6 +448,12 @@ declare global {
         prototype: HTMLPostAvatarElement;
         new (): HTMLPostAvatarElement;
     };
+    interface HTMLPostBreadcrumbItemElement extends Components.PostBreadcrumbItem, HTMLStencilElement {
+    }
+    var HTMLPostBreadcrumbItemElement: {
+        prototype: HTMLPostBreadcrumbItemElement;
+        new (): HTMLPostBreadcrumbItemElement;
+    };
     interface HTMLPostCardControlElementEventMap {
         "postInput": { state: boolean; value: string };
         "postChange": { state: boolean; value: string };
@@ -617,6 +629,7 @@ declare global {
         "post-accordion-item": HTMLPostAccordionItemElement;
         "post-alert": HTMLPostAlertElement;
         "post-avatar": HTMLPostAvatarElement;
+        "post-breadcrumb-item": HTMLPostBreadcrumbItemElement;
         "post-card-control": HTMLPostCardControlElement;
         "post-collapsible": HTMLPostCollapsibleElement;
         "post-collapsible-trigger": HTMLPostCollapsibleTriggerElement;
@@ -701,6 +714,12 @@ declare namespace LocalJSX {
          */
         "userid"?: string;
     }
+    interface PostBreadcrumbItem {
+        /**
+          * The optional URL to which the breadcrumb item will link.
+         */
+        "url"?: string | URL;
+    }
     /**
      * @class PostCardControl - representing a stencil component
      */
@@ -952,6 +971,7 @@ declare namespace LocalJSX {
         "post-accordion-item": PostAccordionItem;
         "post-alert": PostAlert;
         "post-avatar": PostAvatar;
+        "post-breadcrumb-item": PostBreadcrumbItem;
         "post-card-control": PostCardControl;
         "post-collapsible": PostCollapsible;
         "post-collapsible-trigger": PostCollapsibleTrigger;
@@ -978,6 +998,7 @@ 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-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/styles/src/components/breadcrumb.scss

@@ -18,24 +18,3 @@
   font-weight: type.$font-weight-normal;
   white-space: nowrap;
 }
-
-.breadcrumb-item {
-  display: flex;
-  align-items: center;
-
-  .ppm-breadcrumb-divider {
-    fill: breadcrumbs.$breadcrumb-divider-color;
-  }
-
-  a {
-    display: flex;
-    align-content: center;
-    align-items: center;
-    color: breadcrumbs.$breadcrumb-link-color;
-    text-decoration: none;
-
-    &:hover {
-      color: breadcrumbs.$breadcrumb-hover-color;
-    }
-  }
-}