feat(internet-header): Add possibility to hide buttons in the breadcr…

…umbs (#2027)
swisspost · Oct 17, 2023 · a51f238 · a51f238
1 parent 1dd91b0
commit a51f238
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 16 deletions.
diff --git a/.changeset/clever-elephants-help.md b/.changeset/clever-elephants-help.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/internet-header': patch
+---
+
+Added hide-buttons prop to hide all breadcrumbs buttons.
diff --git a/packages/internet-header/src/components.d.ts b/packages/internet-header/src/components.d.ts
@@ -70,6 +70,10 @@ export namespace Components {
     }
     interface SwisspostInternetBreadcrumbs {
         "customItems"?: string | IBreadcrumbItem[];
+        /**
+          * Hide all buttons.
+         */
+        "hideButtons": boolean;
         /**
           * Toggle an overlay associated with a button.
           * @param overlayId
@@ -265,6 +269,10 @@ declare namespace LocalJSX {
     }
     interface SwisspostInternetBreadcrumbs {
         "customItems"?: string | IBreadcrumbItem[];
+        /**
+          * Hide all buttons.
+         */
+        "hideButtons"?: boolean;
     }
     interface SwisspostInternetFooter {
     }

diff --git a/...s/internet-header/src/components/post-internet-breadcrumbs/post-internet-breadcrumbs.scss b/...s/internet-header/src/components/post-internet-breadcrumbs/post-internet-breadcrumbs.scss
@@ -4,6 +4,7 @@
 @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/variables/components/button' as button-var;
 @use '../../utils/utils.scss';
 @use '../../utils/mixins.scss';
 
@@ -18,6 +19,7 @@
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
+  min-height: button-var.$btn-height-md; // Avoid visual shift when buttons are hidden.
 
   @include mixins.max(rg) {
     font-size: functions.px-to-rem(14px);

diff --git a/...es/internet-header/src/components/post-internet-breadcrumbs/post-internet-breadcrumbs.tsx b/...es/internet-header/src/components/post-internet-breadcrumbs/post-internet-breadcrumbs.tsx
@@ -17,6 +17,12 @@ import { prefersReducedMotion } from '../../utils/utils';
 })
 export class PostInternetBreadcrumbs {
   @Prop() customItems?: string | IBreadcrumbItem[];
+
+  /**
+   * Hide all buttons.
+   */
+  @Prop() hideButtons: boolean = false;
+
   @State() customBreadcrumbItems?: IBreadcrumbItem[];
   @State() overlayVisible: boolean;
   @State() isConcatenated: boolean; // Don't set an initial value, this has to be calculated first, otherwise reactivity problems ensue
@@ -294,19 +300,23 @@ export class PostInternetBreadcrumbs {
               clickHandler={() => this.handleToggleDropdown()}
             ></BreadcrumbList>
           </nav>
-          <div class="breadcrumb-buttons">
-            {breadcrumbConfig.buttons.map(button => (
-              <button
-                class="btn btn-secondary btn-icon"
-                key={button.text}
-                aria-expanded={`${this.overlayVisible && this.currentOverlay === button.overlay}`}
-                onClick={() => this.toggleOverlay(button.overlay, true)}
-              >
-                <SvgIcon name={button.svgIcon.name}></SvgIcon>
-                <span class="visually-hidden">{button.text}</span>
-              </button>
-            ))}
-          </div>
+          {!this.hideButtons && (
+            <div class="breadcrumb-buttons">
+              {breadcrumbConfig.buttons.map(button => (
+                <button
+                  class="btn btn-secondary btn-icon"
+                  key={button.text}
+                  aria-expanded={`${Boolean(
+                    this.overlayVisible && this.currentOverlay === button.overlay,
+                  )}`}
+                  onClick={() => this.toggleOverlay(button.overlay, true)}
+                >
+                  <SvgIcon name={button.svgIcon.name}></SvgIcon>
+                  <span class="visually-hidden">{button.text}</span>
+                </button>
+              ))}
+            </div>
+          )}
           {this.overlayVisible && (
             <OverlayComponent
               overlayRef={e => e !== undefined && this.overlayRef(e)}

diff --git a/packages/internet-header/src/components/post-internet-breadcrumbs/readme.md b/packages/internet-header/src/components/post-internet-breadcrumbs/readme.md
@@ -7,9 +7,10 @@
 
 ## Properties
 
-| Property      | Attribute      | Description | Type                                       | Default     |
-| ------------- | -------------- | ----------- | ------------------------------------------ | ----------- |
-| `customItems` | `custom-items` |             | `IBreadcrumbItem[] \| string \| undefined` | `undefined` |
+| Property      | Attribute      | Description       | Type                                       | Default     |
+| ------------- | -------------- | ----------------- | ------------------------------------------ | ----------- |
+| `customItems` | `custom-items` |                   | `IBreadcrumbItem[] \| string \| undefined` | `undefined` |
+| `hideButtons` | `hide-buttons` | Hide all buttons. | `boolean`                                  | `false`     |
 
 
 ## Methods