fix(breadcrum): add link complement argument

packages/components/breadcrumb/src/components/osds-breadcrumb-item/constants/default-attributes.ts

@@ -1,11 +1,14 @@
 import type { OdsBreadcrumbItemAttribute } from '../interfaces/attributes';
+import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';
 
 const DEFAULT_ATTRIBUTE: OdsBreadcrumbItemAttribute = Object.freeze({
   contrasted: false,
+  disabled: false,
   href: '',
   isCollapsed: false,
   isExpandableItem: false,
   isLast: false,
+  target: OdsHTMLAnchorElementTarget._self,
 });
 
 export {

packages/components/breadcrumb/src/components/osds-breadcrumb-item/interfaces/attributes.ts

@@ -1,8 +1,11 @@
 import type { ODS_ICON_NAME } from '@ovhcloud/ods-component-icon';
+import type { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';
 
 interface OdsBreadcrumbItemAttribute {
   /** contrasted or not: see component principles */
   contrasted?: boolean
+  /** Item should be disabled or not */
+  disabled?: boolean;
   /** Item link to redirect to */
   href: string
   /** Icon to display */
@@ -15,6 +18,15 @@ interface OdsBreadcrumbItemAttribute {
   isLast: boolean
   /** Text to display */
   label?: string
+  /** Link referrer policy */
+  referrerpolicy?: HTMLLinkElement['referrerPolicy'];
+  /**  Link relationship */
+  rel?: HTMLLinkElement['rel'];
+  /**
+   * Link target type
+   * Specifies where to open the link
+   */
+  target?: OdsHTMLAnchorElementTarget;
 }
 
 export {

packages/components/breadcrumb/src/components/osds-breadcrumb-item/osds-breadcrumb-item.e2e.ts

@@ -83,19 +83,34 @@ describe('e2e:osds-breadcrumb-item', () => {
       expect(iconElement.getAttribute('name')).toBe(dummyIcon);
     });
 
-    it('should render link disabled', async() => {
+    it('should render link disabled because of last', async() => {
       await setupItem({ href: dummyHref, isLast: true });
 
       expect(itemLinkElement.getAttribute('href')).toBe(dummyHref);
       expect(itemLinkElement.getAttribute('disabled')).not.toBeNull();
     });
 
+    it('should render link disabled', async() => {
+      await setupItem({ href: dummyHref, disabled: true });
+
+      expect(itemLinkElement.getAttribute('href')).toBe(dummyHref);
+      expect(itemLinkElement.getAttribute('disabled')).not.toBeNull();
+    });
+
     it('should render contrasted', async() => {
       await setupItem({ contrasted: true, href: dummyHref, icon: dummyIcon, label: dummyLabel });
 
       expect(itemLinkElement.getAttribute('contrasted')).not.toBeNull();
       expect(iconElement.getAttribute('contrasted')).not.toBeNull();
     });
+
+
+    it('should render link with rel & referrerpolicy', async() => {
+      await setupItem({ href: dummyHref, label: dummyLabel, referrerpolicy: 'no-referrer', rel: 'stylesheets' });
+
+      expect(itemLinkElement.getAttribute('referrerpolicy')).toBe('no-referrer');
+      expect(itemLinkElement.getAttribute('rel')).toBe('stylesheets');
+    });
   });
 
   describe('collapsed item', () => {

packages/components/breadcrumb/src/components/osds-breadcrumb-item/osds-breadcrumb-item.tsx

@@ -1,5 +1,6 @@
 import type { OdsBreadcrumbItemAttribute } from './interfaces/attributes';
 
+import type { ODS_LINK_REFERRER_POLICY } from '@ovhcloud/ods-component-link';
 import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import { ODS_ICON_NAME, ODS_ICON_SIZE } from '@ovhcloud/ods-component-icon';
 import { Component, Element, Event, EventEmitter, Host, Prop, h } from '@stencil/core';
@@ -22,6 +23,9 @@ export class OsdsBreadcrumbItem implements OdsBreadcrumbItemAttribute {
   /** @see OdsBreadcrumbItemAttribute.contrasted */
   @Prop({ reflect: true }) public contrasted? = DEFAULT_ATTRIBUTE.contrasted;
 
+  /** @see OdsBreadcrumbItemAttribute.disabled */
+  @Prop({ reflect: true }) public disabled? = DEFAULT_ATTRIBUTE.disabled;
+
   /** @internal */
   @Prop() isCollapsed = DEFAULT_ATTRIBUTE.isCollapsed;
 
@@ -40,6 +44,15 @@ export class OsdsBreadcrumbItem implements OdsBreadcrumbItemAttribute {
   /** @see OdsBreadcrumbItemAttribute.label */
   @Prop({ reflect: true }) label?: string;
 
+  /** @see OdsBreadcrumbItemAttribute.referrerpolicy */
+  @Prop({ reflect: true }) referrerpolicy?: ODS_LINK_REFERRER_POLICY;
+
+  /** @see OdsBreadcrumbItemAttribute.rel */
+  @Prop({ reflect: true }) rel?: HTMLLinkElement['rel'];
+
+  /** @see OdsBreadcrumbItemAttribute.disabled */
+  @Prop({ reflect: true }) target = DEFAULT_ATTRIBUTE.target;
+
   /** @see OdsBreadcrumbItemEvent.odsBreadcrumbItemCollapsedClick */
   @Event() odsBreadcrumbItemCollapsedClick!: EventEmitter<void>;
 
@@ -55,8 +68,11 @@ export class OsdsBreadcrumbItem implements OdsBreadcrumbItemAttribute {
         <div class="item">
           <osds-link color={this.defaultColorIntent}
             contrasted={this.contrasted}
-            disabled={this.isLast}
-            href={this.href}>
+            disabled={this.disabled || this.isLast}
+            href={this.href}
+            referrerpolicy={this.referrerpolicy}
+            rel={this.rel}
+            target={this.target}>
             {
               !!this.icon
               && <span slot="start">

packages/components/breadcrumb/src/components/osds-breadcrumb/interfaces/attributes.ts

@@ -1,12 +1,22 @@
 import type { ODS_ICON_NAME } from '@ovhcloud/ods-component-icon';
+import type { ODS_LINK_REFERRER_POLICY } from '@ovhcloud/ods-component-link';
+import type { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';
 
 interface OdsBreadcrumbAttributeItem {
+  /** Item should be disabled or not */
+  disabled?: boolean;
   /** Item link to redirect to */
   href: string
   /** Icon to display */
   icon?: ODS_ICON_NAME
   /** Text to display */
   label?: string
+  /** Link referrer policy */
+  referrerpolicy?: ODS_LINK_REFERRER_POLICY;
+  /**  Link relationship */
+  rel?: HTMLLinkElement['rel'];
+  /** Specifies where to open the link */
+  target: OdsHTMLAnchorElementTarget;
 }
 
 interface OdsBreadcrumbAttribute {

packages/components/breadcrumb/src/index.html

@@ -37,8 +37,8 @@ <h3>Contrasted</h3>
 <script>
   document.querySelector('#default-breadcrumb').items = JSON.stringify([
     { href: "#home", label: "Home" },
-    { href: "#services", label: "Services" },
-    { href: "#products", label: "Products" },
+    { href: "#services", label: "Services", target: '_blank' },
+    { href: "#products", label: "Products", disabled: true },
     { href: "#web", label: "Web" },
   ]);