diff --git a/.changeset/clever-elephants-help.md b/.changeset/clever-elephants-help.md new file mode 100644 index 0000000000..b0cef2b997 --- /dev/null +++ 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 index 6a7dbc87fe..f5fac646ea 100644 --- 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/packages/internet-header/src/components/post-internet-breadcrumbs/post-internet-breadcrumbs.scss b/packages/internet-header/src/components/post-internet-breadcrumbs/post-internet-breadcrumbs.scss index 25d1622315..3c1cb2cbaa 100644 --- a/packages/internet-header/src/components/post-internet-breadcrumbs/post-internet-breadcrumbs.scss +++ b/packages/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/packages/internet-header/src/components/post-internet-breadcrumbs/post-internet-breadcrumbs.tsx b/packages/internet-header/src/components/post-internet-breadcrumbs/post-internet-breadcrumbs.tsx index e01dc7c23e..bb90d5b3ee 100644 --- a/packages/internet-header/src/components/post-internet-breadcrumbs/post-internet-breadcrumbs.tsx +++ b/packages/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()} > -
+ {!this.hideButtons && ( + + )} {this.overlayVisible && (