Merge pull request #51 from ec-europa/FRONT-4240-Broken-tag

fix(tag): Fixing and enhancing component - FRONT-4240
ec-europa · Feb 2, 2024 · 298935d · 298935d · github-actions · Feb 2, 2024
2 parents 4d4020a + 2159dca
commit 298935d
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 27 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -753,7 +753,7 @@ export namespace Components {
         "external": boolean;
         "styleClass": string;
         "theme": string;
-        "toBeRemoved": boolean;
+        "url": string;
         "variant": string;
     }
     interface EclText {
@@ -814,6 +814,10 @@ export interface EclSelectCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLEclSelectElement;
 }
+export interface EclTagCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLEclTagElement;
+}
 export interface EclTextareaCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLEclTextareaElement;
@@ -1310,7 +1314,18 @@ declare global {
         prototype: HTMLEclSpinnerElement;
         new (): HTMLEclSpinnerElement;
     };
+    interface HTMLEclTagElementEventMap {
+        "removeTag": boolean;
+    }
     interface HTMLEclTagElement extends Components.EclTag, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLEclTagElementEventMap>(type: K, listener: (this: HTMLEclTagElement, ev: EclTagCustomEvent<HTMLEclTagElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLEclTagElementEventMap>(type: K, listener: (this: HTMLEclTagElement, ev: EclTagCustomEvent<HTMLEclTagElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLEclTagElement: {
         prototype: HTMLEclTagElement;
@@ -2193,9 +2208,10 @@ declare namespace LocalJSX {
     }
     interface EclTag {
         "external"?: boolean;
+        "onRemoveTag"?: (event: EclTagCustomEvent<boolean>) => void;
         "styleClass"?: string;
         "theme"?: string;
-        "toBeRemoved"?: boolean;
+        "url"?: string;
         "variant"?: string;
     }
     interface EclText {

diff --git a/src/components/ecl-tag/ecl-tag.stories.ts b/src/components/ecl-tag/ecl-tag.stories.ts
@@ -1,7 +1,9 @@
+import { randomizedLink } from "../../utils/randomizedLink"; 
+
 const getArgs = () => {
   return {
     variant: 'link',
-    url: '',
+    url: randomizedLink('/example.html'),
     external: false,
     ariaLabel: 'aria label',
   };
@@ -14,6 +16,11 @@ const getArgTypes = () => {
       options: ['link', 'removable'],
       description: "Tag variant"
     },
+    url: {
+      type: { name: 'string' },
+      description: "Link url",
+      if: { arg: 'variant', eq: 'link' },
+    },
     external: {
       name: 'external',
       type: { name: 'boolean' },

diff --git a/src/components/ecl-tag/ecl-tag.tsx b/src/components/ecl-tag/ecl-tag.tsx
@@ -1,4 +1,4 @@
-import { Component, Prop, h, Element } from '@stencil/core';
+import { Component, Prop, h, State, Event, EventEmitter } from '@stencil/core';
 
 @Component({
   tag: 'ecl-tag',
@@ -10,12 +10,14 @@ import { Component, Prop, h, Element } from '@stencil/core';
   scoped: true,
 })
 export class EclTag {
-  @Element() el: HTMLElement;
   @Prop() theme: string = 'ec';
   @Prop() styleClass: string;
   @Prop() external: boolean = false;
   @Prop() variant: string = 'display';
-  @Prop() toBeRemoved: boolean = false;
+  @Prop() url: string = '';
+  @State() toBeRemoved: boolean = false;
+
+  @Event() removeTag: EventEmitter<boolean>;
 
   getClass(): string {
     return [
@@ -28,15 +30,15 @@ export class EclTag {
   getTag(variant) {
     switch (variant) {
       case 'link':
-        return 'a'
+        return 'a';
 
       case 'display':
         return 'span';
 
       case 'removable':
         return 'button';
 
-       default:
+      default:
     }
   }
 
@@ -45,7 +47,7 @@ export class EclTag {
       <ecl-icon 
         icon="external"
         style-class={`ecl-tag__icon ecl-tag__icon--external sc-ecl-tag-${this.theme}`}
-        size = "2xs"
+        size="2xs"
       >
       </ecl-icon>
     )  
@@ -55,6 +57,10 @@ export class EclTag {
     return (
       <span
         class="ecl-tag__icon"
+        onClick={() => {
+          this.toBeRemoved = true;
+          this.removeTag.emit(true); // Emit the custom event
+        }}
       >
         <ecl-icon 
           icon="close"
@@ -69,26 +75,17 @@ export class EclTag {
     )
   }
 
-  componentDidRender() {
-    const closeButton = this.el.querySelector('.ecl-tag__icon');
-
-    if (closeButton) {
-      closeButton.addEventListener('click', () => {
-        this.toBeRemoved = true;
-      });
-    }
-  }
-
   render() {
     const Element = this.getTag(this.variant);
     return (
       <Element 
         class={this.getClass()}
+        {...(this.variant === 'link' && this.url && { href: this.url })}
       >
         <slot></slot>
         { this.variant === 'link' && this.external ? this.getExternal() : '' }
         { this.variant === 'removable' ? this.getRemovable() : '' }
       </Element>
     )
   }
-}
+}
diff --git a/src/components/ecl-tag/readme.md b/src/components/ecl-tag/readme.md
@@ -7,13 +7,20 @@
 
 ## Properties
 
-| Property      | Attribute       | Description | Type      | Default     |
-| ------------- | --------------- | ----------- | --------- | ----------- |
-| `external`    | `external`      |             | `boolean` | `false`     |
-| `styleClass`  | `style-class`   |             | `string`  | `undefined` |
-| `theme`       | `theme`         |             | `string`  | `'ec'`      |
-| `toBeRemoved` | `to-be-removed` |             | `boolean` | `false`     |
-| `variant`     | `variant`       |             | `string`  | `'display'` |
+| Property     | Attribute     | Description | Type      | Default     |
+| ------------ | ------------- | ----------- | --------- | ----------- |
+| `external`   | `external`    |             | `boolean` | `false`     |
+| `styleClass` | `style-class` |             | `string`  | `undefined` |
+| `theme`      | `theme`       |             | `string`  | `'ec'`      |
+| `url`        | `url`         |             | `string`  | `''`        |
+| `variant`    | `variant`     |             | `string`  | `'display'` |
+
+
+## Events
+
+| Event       | Description | Type                   |
+| ----------- | ----------- | ---------------------- |
+| `removeTag` |             | `CustomEvent<boolean>` |
 
 
 ## Dependencies