fix(breadcrumb): add event click on item

packages/components/breadcrumb/documentation/specifications/spec.md

@@ -12,9 +12,27 @@
 |Name | Type | Required | Default | Description|
 |---|---|:---:|---|---|
 |**`disabled`** | _boolean_ |  |  | Item should be disabled or not|
-|**`href`** | _string_ | ✴️ |  | Item link to redirect to|
+|**`href`** | _string_ |  |  | Item link to redirect to|
 |**`icon`** | `ODS_ICON_NAME` |  |  | Icon to display|
 |**`label`** | _string_ |  |  | Text to display|
 |**`referrerpolicy`** | `ODS_LINK_REFERRER_POLICY` |  |  | Link referrer policy|
 |**`rel`** | _string_ |  |  | Link relationship|
-|**`target`** | `OdsHTMLAnchorElementTarget` |  |  | Specifies where to open the link|
+|**`target`** | `OdsHTMLAnchorElementTarget` |  |  | Specifies where to open the link|
+
+### OdsBreadcrumbItemAttribute
+|Name | Type | Required | Default | Description|
+|---|---|:---:|---|---|
+|**`contrasted`** | _boolean_ |  |  | contrasted or not: see component principles|
+|**`disabled`** | _boolean_ |  |  | Item should be disabled or not|
+|**`href`** | _string_ |  |  | Item link to redirect to|
+|**`icon`** | `ODS_ICON_NAME` |  |  | Icon to display|
+|**`label`** | _string_ |  |  | Text to display|
+|**`referrerpolicy`** | _string_ |  |  | Link referrer policy|
+|**`rel`** | _string_ |  |  | Link relationship|
+|**`target`** | `OdsHTMLAnchorElementTarget` |  |  | Link target typeSpecifies where to open the link|
+
+### OdsBreadcrumbItemEvent
+|Name | Type | Required | Default | Description|
+|---|---|:---:|---|---|
+|**`odsBreadcrumbItemClick`** | `EventEmitter<OdsBreadcrumbAttributeItem & { event: MouseEvent }>` | ✴️ |  | Event triggered item click|
+|**`odsBreadcrumbItemCollapsedClick`** | `EventEmitter<void>` | ✴️ |  | Event triggered on collapsed item click|

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

@@ -7,7 +7,7 @@ interface OdsBreadcrumbItemAttribute {
   /** Item should be disabled or not */
   disabled?: boolean;
   /** Item link to redirect to */
-  href: string
+  href?: string
   /** Icon to display */
   icon?: ODS_ICON_NAME
   /** @internal */

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

@@ -1,8 +1,15 @@
+import type { EventEmitter } from '@stencil/core';
+import type { OdsBreadcrumbAttributeItem } from '../../osds-breadcrumb/public-api';
+
 interface OdsBreadcrumbItemEvent {
   /**
    * Event triggered on collapsed item click
    */
-  odsBreadcrumbItemCollapsedClick: void;
+  odsBreadcrumbItemCollapsedClick: EventEmitter<void>;
+  /**
+   * Event triggered item click
+   */
+  odsBreadcrumbItemClick: EventEmitter<OdsBreadcrumbAttributeItem & { event: MouseEvent }>;
 }
 
 export {

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

@@ -104,13 +104,40 @@ describe('e2e:osds-breadcrumb-item', () => {
       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');
     });
+
+    it('should send en event odsBreadcrumbItemClick', async() => {
+      await setupItem({ href: dummyHref, label: dummyLabel });
+
+      const spy = await page.spyOnEvent('odsBreadcrumbItemClick');
+      await itemLinkElement.click();
+
+      expect(spy).toHaveReceivedEventTimes(1);
+      expect(spy.firstEvent.detail).toEqual(expect.objectContaining({ href: dummyHref, label: dummyLabel }));
+    });
+
+    it('should not send en event odsBreadcrumbItemClick because is disabled', async() => {
+      await setupItem({ href: dummyHref, label: dummyLabel, disabled: true });
+
+      const spy = await page.spyOnEvent('odsBreadcrumbItemClick');
+      await itemLinkElement.click();
+
+      expect(spy).not.toHaveReceivedEvent();
+    });
+
+    it('should not send en event odsBreadcrumbItemClick because isLast', async() => {
+      await setupItem({ href: dummyHref, label: dummyLabel, isLast: true });
+
+      const spy = await page.spyOnEvent('odsBreadcrumbItemClick');
+      await itemLinkElement.click();
+
+      expect(spy).not.toHaveReceivedEvent();
+    });
   });
 
   describe('collapsed item', () => {

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

@@ -7,6 +7,8 @@ import { ODS_ICON_NAME, ODS_ICON_SIZE } from '@ovhcloud/ods-component-icon';
 import { Component, Element, Event, EventEmitter, Host, Prop, h } from '@stencil/core';
 
 import { DEFAULT_ATTRIBUTE } from './constants/default-attributes';
+import { OdsBreadcrumbItemEvent } from './interfaces/events';
+import { OdsBreadcrumbAttributeItem } from '../osds-breadcrumb/public-api';
 
 /**
  * @slot (unnamed) - Breadcrumb Item content
@@ -16,7 +18,7 @@ import { DEFAULT_ATTRIBUTE } from './constants/default-attributes';
   styleUrl: 'osds-breadcrumb-item.scss',
   shadow: true,
 })
-export class OsdsBreadcrumbItem implements OdsBreadcrumbItemAttribute {
+export class OsdsBreadcrumbItem implements OdsBreadcrumbItemAttribute, OdsBreadcrumbItemEvent {
   private defaultColorIntent = ODS_THEME_COLOR_INTENT.primary;
 
   @Element() el!: HTMLElement;
@@ -57,10 +59,32 @@ export class OsdsBreadcrumbItem implements OdsBreadcrumbItemAttribute {
   /** @see OdsBreadcrumbItemEvent.odsBreadcrumbItemCollapsedClick */
   @Event() odsBreadcrumbItemCollapsedClick!: EventEmitter<void>;
 
-  private onCollapsedElementClick() {
+   /** @see OdsBreadcrumbItemEvent.odsBreadcrumbItemClick */
+   @Event() odsBreadcrumbItemClick!: EventEmitter<OdsBreadcrumbAttributeItem & { event: MouseEvent }>;
+
+  private onCollapsedElementClick(): void {
     this.odsBreadcrumbItemCollapsedClick.emit();
   }
 
+  private onElementClick(event: MouseEvent): void {
+    if (this.isDisabled()) {
+      return;
+    }
+    this.odsBreadcrumbItemClick.emit({
+      disabled: this.disabled,
+      href: this.href,
+      label: this.label,
+      referrerpolicy: this.referrerpolicy,
+      rel: this.rel,
+      target: this.target,
+      event,
+    });
+  }
+
+  private isDisabled() {
+    return this.disabled || this.isLast;
+  }
+
   render() {
     const showSeparator = this.isLast ? false : this.isCollapsed ? this.isExpandableItem : true;
 
@@ -69,11 +93,12 @@ export class OsdsBreadcrumbItem implements OdsBreadcrumbItemAttribute {
         <div class="item">
           <osds-link color={this.defaultColorIntent}
             contrasted={this.contrasted}
-            disabled={this.disabled || this.isLast}
+            disabled={this.isDisabled()}
             href={this.href}
             referrerpolicy={this.referrerpolicy}
             rel={this.rel}
-            target={this.target}>
+            target={this.target}
+            onClick={(event: MouseEvent) => this.onElementClick(event)}>
             {
               !!this.icon
               && <span slot="start">

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

@@ -6,11 +6,11 @@ interface OdsBreadcrumbAttributeItem {
   /** Item should be disabled or not */
   disabled?: boolean;
   /** Item link to redirect to */
-  href: string
+  href?: string;
   /** Icon to display */
-  icon?: ODS_ICON_NAME
+  icon?: ODS_ICON_NAME;
   /** Text to display */
-  label?: string
+  label?: string;
   /** Link referrer policy */
   referrerpolicy?: ODS_LINK_REFERRER_POLICY;
   /**  Link relationship */

packages/components/breadcrumb/src/index.html

@@ -37,7 +37,7 @@ <h3>Contrasted</h3>
 <script>
   document.querySelector('#default-breadcrumb').items = JSON.stringify([
     { href: "#home", label: "Home" },
-    { href: "#services", label: "Services", target: '_blank' },
+    { label: "Services" },
     { href: "#products", label: "Products", disabled: true },
     { href: "#web", label: "Web" },
   ]);
@@ -50,13 +50,18 @@ <h3>Contrasted</h3>
     { href: "#domains", label: "Domains" },
     { href: "#ovh", label: "ovh.com" },
   ];
+  document.querySelector('#collapsed-breadcrumb').addEventListener('odsBreadcrumbItemCollapsedClick', () => console.log('odsBreadcrumbItemCollapsedClick'))
 
-  document.querySelector('#icon-breadcrumb').items = [
+  const iconBreadcrumb = document.querySelector('#icon-breadcrumb')
+  iconBreadcrumb.items = [
     { href: "#home", icon: "home" },
     { href: "#services", label: "Services", icon: "book" },
-    { href: "#products", label: "Products" },
+    { label: "Products" },
     { href: "#web", label: "Web" },
   ];
+  iconBreadcrumb.addEventListener('odsBreadcrumbItemClick', (event) => {
+    console.log('event', event);
+  })
 
   document.querySelector('#contrasted-breadcrumb').items = [
     { href: "#home", icon: "home" },

packages/components/breadcrumb/src/index.ts

@@ -1 +1,2 @@
 export * from './components/osds-breadcrumb/public-api';
+export * from './components/osds-breadcrumb-item/public-api';