fix(component): breadcrumb was refactored and renamed

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

@@ -0,0 +1,144 @@
+@use '@swisspost/design-system-styles/placeholders/color' as color-ph;
+@use '@swisspost/design-system-styles/components/button';
+@use '@swisspost/design-system-styles/components/grid';
+@use '@swisspost/design-system-styles/components/spinner';
+@use '@swisspost/design-system-styles/variables/color';
+@use '@swisspost/design-system-styles/functions';
+@use '@swisspost/design-system-styles/mixins/utilities';
+@use '@swisspost/design-system-styles/variables/components/button' as button-var;
+:host {
+  @extend %color-background-light-variables;
+
+  display: block;
+  position: relative;
+}
+
+.breadcrumbs {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+}
+
+.breadcrumbs-nav {
+  white-space: nowrap;
+  // Make the nav take all the available space, used for concatenation calculation
+  flex-grow: 1;
+  flex-shrink: 1;
+  min-width: 0;
+}
+
+.breadcrumbs-list,
+.nav-link {
+  display: flex;
+  align-items: center;
+}
+
+.home-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.breadcrumbs-list {
+  li {
+    display: flex;
+    // First and middle breadcrumbs should never shrink. If there's not enough space -> collapse
+    flex-shrink: 0;
+
+    &:last-child {
+      // Ellipsis for very small viewports or very long last item paths
+      flex-shrink: 2;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+.nav-link {
+  gap: 0;
+  color: rgba(color.$black, 0.6);
+  font-weight: 400;
+}
+
+.middle-dropdown-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.middle-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background: white;
+  border: 1px solid color.$gray-10;
+  padding: 0.5rem 0;
+  z-index: 1;
+}
+
+.visually-hidden {
+  @include utilities.visuallyhidden();
+}
+
+.middle-dropdown-button {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  width: 1.5em;
+  height: 1.5em;
+  min-height: 0;
+  font-size: inherit;
+  color: inherit;
+
+  span {
+    margin: 0;
+  }
+}
+
+.overlay {
+  display: flex;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: calc(var(--header-z-index, 10) + 1);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 500ms, visibility 0s 500ms;
+
+  &.open {
+    visibility: visible;
+    opacity: 1;
+    transition: opacity 500ms, visibility 0s 0s;
+  }
+}
+
+.loader-wrapper {
+  position: absolute;
+  display: grid;
+  place-items: center;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+.loaded .loader-wrapper {
+  display: none;
+}
+
+.hidden-control-breadcrumbs {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+  z-index: -1;  
+
+  .breadcrumbs-nav {
+    flex-shrink: 0;
+  }
+}

packages/components/src/components/post-breadcrumb-new/post-breadcrumb-new.tsx → packages/components/src/components/post-breadcrumb/post-breadcrumb.tsx

@@ -1,16 +1,17 @@
-import { Component, Element, h, Host, Prop, State } from '@stencil/core';
+import { checkUrl } from '@/utils';
+import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';
 import { debounce } from 'throttle-debounce';
 
 @Component({
-  tag: 'post-breadcrumb-new',
-  styleUrl: 'post-breadcrumb-new.scss',
+  tag: 'post-breadcrumb',
+  styleUrl: 'post-breadcrumb.scss',
   shadow: true,
 })
 export class PostBreadcrumb {
   /**
    * URL for the home breadcrumb link
    */
-  @Prop() homeUrl: string = '/';
+  @Prop() homeUrl: string | URL;
 
   /**
    * Text for the home breadcrumb link
@@ -47,6 +48,11 @@ export class PostBreadcrumb {
     });
   }
 
+  @Watch('url')
+  validateUrl() {
+    checkUrl(this.homeUrl, 'The "url" property of the home-icon is invalid');
+  }
+
   private collectBreadcrumbItems() {
     const children = Array.from(this.host.children) as HTMLPostBreadcrumbItemElement[];
     this.breadcrumbItems = children.map((child) => ({
@@ -86,13 +92,17 @@ export class PostBreadcrumb {
   }
 
   private renderBreadcrumbItems(isConcatenated: boolean) {
+    console.log(this.homeUrl)
     const middleItems = this.breadcrumbItems.slice(1, -1);
     const lastItem = this.breadcrumbItems[this.breadcrumbItems.length - 1];
 
     return (
       <ol class="no-list breadcrumbs-list">
-        <li>
-          <post-breadcrumb-item url={this.homeUrl}>{this.homeText}</post-breadcrumb-item>
+        <li class="home-icon">
+          <a href={this.homeUrl.toString()} class="breadcrumb-link">
+            <post-icon name="2035" />
+            <span class="visually-hidden">{this.homeText}</span>
+          </a>
         </li>
 
         {isConcatenated ? (
@@ -132,6 +142,16 @@ export class PostBreadcrumb {
             <post-breadcrumb-item url={lastItem.url}>{lastItem.text}</post-breadcrumb-item>
           </li>
         )}
+        <post-menu-trigger for="menu-one">
+          <button class="btn btn-primary">Menu button</button>
+        </post-menu-trigger>
+        <post-menu id="menu-one">
+          <post-menu-item><button>Example 1</button></post-menu-item>
+          <post-menu-item>
+            <a href="#">Example 2</a>
+            <post-menu-item><div>Example 3</div></post-menu-item>
+          </post-menu-item>
+        </post-menu>
       </ol>
     );
   }