feat(tag): permitir o uso da paleta de cores e ícones

Agora o componente permite a utilização da paleta de cores
além de ícones e navegação através do teclado.

Fixes DTHFUI-1762

Author: mateusjmaf

projects/ui/src/lib/components/po-tag/enums/po-tag-icon.enum.ts

@@ -7,15 +7,15 @@
  */
 export enum PoTagIcon {
 
-  /** Ícone fechar */
-  Danger = 'close',
+  /** Ícone fechar. */
+  Danger = 'po-icon-close',
 
-  /** Ícone de informação */
-  Info = 'info',
+  /** Ícone de informação. */
+  Info = 'po-icon-info',
 
-  /** Ícone que representa confirmação */
-  Success = 'ok',
+  /** Ícone que representa confirmação. */
+  Success = 'po-icon-ok',
 
-  /** Ícone com ponto de exclamação */
-  Warning = 'warning'
+  /** Ícone com ponto de exclamação. */
+  Warning = 'po-icon-warning'
 }

projects/ui/src/lib/components/po-tag/po-tag-base.component.spec.ts

@@ -1,31 +1,54 @@
 import { expectPropertiesValues } from '../../util-test/util-expect.spec';
 
+import { PoColorPaletteEnum } from '../../enums/po-color-palette.enum';
+
 import { PoTagBaseComponent } from './po-tag-base.component';
-import { PoTagIcon } from './enums/po-tag-icon.enum';
 import { PoTagOrientation } from './enums/po-tag-orientation.enum';
 import { PoTagType } from './enums/po-tag-type.enum';
 
 describe('PoTagBaseComponent:', () => {
   const component = new PoTagBaseComponent();
+  const poTagColors = (<any>Object).values(PoColorPaletteEnum);
 
   it('should be created', () => {
     expect(component instanceof PoTagBaseComponent).toBeTruthy();
   });
 
   describe('Properties:', () => {
 
-    it('icon: should update with true value.', () => {
+    it('color: should update to true value.', () => {
+      const colorsValidTrueValues = poTagColors;
+
+      expectPropertiesValues(component, 'color', colorsValidTrueValues, colorsValidTrueValues);
+    });
+
+    it('color: shouldn´t update to false value.', () => {
+      const colorsInalidTrueValues = [undefined, null, 2, 'string', 0, NaN];
+
+      expectPropertiesValues(component, 'color', colorsInalidTrueValues, undefined);
+    });
+
+    it('icon: should update to true value with `type`.', () => {
+      component.type = PoTagType.Info;
       const booleanValidTrueValues = [true, 'true', 1, ''];
 
       expectPropertiesValues(component, 'icon', booleanValidTrueValues, true);
     });
 
-    it('icon: should update with false value.', () => {
+    it('icon: should update to false if `type` is true.', () => {
+      component.type = PoTagType.Info;
       const booleanInvalidValues = [undefined, null, 2, 'string', 0, NaN];
 
       expectPropertiesValues(component, 'icon', booleanInvalidValues, false);
     });
 
+    it('icon: should update to true if `type` is undefined.', () => {
+      component.type = undefined;
+      const validValues = ['po-icon-ok', 'po-icon-company', 'po-icon-portinari'];
+
+      expectPropertiesValues(component, 'icon', validValues, validValues);
+    });
+
     it('orientation: should update property with valid values', () => {
       const validValues = (<any>Object).values(PoTagOrientation);
 
@@ -47,21 +70,7 @@ describe('PoTagBaseComponent:', () => {
     it('type: should update property with `info` if values are invalid', () => {
       const invalidValues = [undefined, null, '', true, false, 0, -1, 12, 15, 'aa', [], {}];
 
-      expectPropertiesValues(component, 'type', invalidValues, 'info');
-    });
-
-    it('iconFromType: should update property with valid values', () => {
-      component.type = PoTagType.Danger;
-      expect(component.iconFromType).toBe(PoTagIcon.Danger);
-
-      component.type = PoTagType.Danger;
-      expect(component.iconFromType).toBe(PoTagIcon.Danger);
-
-      component.type = PoTagType.Danger;
-      expect(component.iconFromType).toBe(PoTagIcon.Danger);
-
-      component.type = PoTagType.Danger;
-      expect(component.iconFromType).toBe(PoTagIcon.Danger);
+      expectPropertiesValues(component, 'type', invalidValues, undefined);
     });
 
   });

projects/ui/src/lib/components/po-tag/po-tag-base.component.ts

@@ -1,27 +1,32 @@
 import { EventEmitter, Input, Output } from '@angular/core';
 
 import { convertToBoolean } from '../../utils/util';
+import { PoColorPaletteEnum } from '../../enums/po-color-palette.enum';
 
-import { PoTagIcon } from './enums/po-tag-icon.enum';
 import { PoTagItem } from './interfaces/po-tag-item.interface';
 import { PoTagOrientation } from './enums/po-tag-orientation.enum';
 import { PoTagType } from './enums/po-tag-type.enum';
 
+const poTagColors = (<any>Object).values(PoColorPaletteEnum);
 const poTagOrientationDefault = PoTagOrientation.Vertical;
-const poTagTypeDefault = PoTagType.Info;
 
 /**
  * @description
  *
- * Este componente apresenta um valor em um marcador colorido que pode conter ícone e *label*, as cores são definidas conforme o tipo
- * escolhido.
- * Seu uso é indicado para informações que necessitam de destaque em forma de marcação.
+ * Este componente permite exibir um valor em forma de um marcador colorido, sendo possível definir uma legenda e realizar customizações
+ * na cor, iconografia e tipo.
+ *
+ * Além disso, é possível definir uma ação que será executada tanto ao *click* quanto através das teclas *enter/space* enquanto navega
+ * utilizando a tecla *tab*.
+ *
+ * Seu uso é recomendado para informações que necessitem de destaque em forma de marcação.
  */
 export class PoTagBaseComponent {
 
-  private _icon?: boolean;
+  private _color?: string;
+  private _icon?: boolean | string;
   private _orientation?: PoTagOrientation = poTagOrientationDefault;
-  private _type?: PoTagType = poTagTypeDefault;
+  private _type?: PoTagType;
 
   public readonly poTagOrientation = PoTagOrientation;
 
@@ -30,27 +35,60 @@ export class PoTagBaseComponent {
    *
    * @description
    *
-   * Texto antes da tag.
+   * Define uma cor para a *tag*.
+   *
+   * Valores válidos:
+   *  - <span class="dot po-color-01"></span> `color-01`
+   *  - <span class="dot po-color-02"></span> `color-02`
+   *  - <span class="dot po-color-03"></span> `color-03`
+   *  - <span class="dot po-color-04"></span> `color-04`
+   *  - <span class="dot po-color-05"></span> `color-05`
+   *  - <span class="dot po-color-06"></span> `color-06`
+   *  - <span class="dot po-color-07"></span> `color-07`
+   *  - <span class="dot po-color-08"></span> `color-08`
+   *  - <span class="dot po-color-09"></span> `color-09`
+   *  - <span class="dot po-color-10"></span> `color-10`
+   *  - <span class="dot po-color-11"></span> `color-11`
+   *  - <span class="dot po-color-12"></span> `color-12`
+   *
+   * > **Atenção:** A propriedade `p-type` sobrepõe esta definição.
    */
-  @Input('p-label') label?: string;
+  @Input('p-color') set color(value: string) {
+    this._color = poTagColors.includes(value) ? value : undefined;
+  }
+
+  get color(): string {
+    return this._color;
+  }
 
   /**
    * @optional
    *
    * @description
    *
-   * Apresenta um ícone na tag conforme o tipo:
-   * - `danger`: <span class="po-icon po-icon-close"></span>
-   * - `info`: <span class="po-icon po-icon-info"></span>
-   * - `success`: <span class="po-icon po-icon-ok"></span>
-   * - `warning`: <span class="po-icon po-icon-warning"></span>
+   * Define ou ativa um ícone que será exibido ao lado do valor da *tag*.
+   *
+   * > Veja os valores válidos na [biblioteca de ícones](guides/icons).
+   *
+   * Quando `p-type` estiver definida, basta informar um valor igual a `true` para que o ícone seja exibido conforme descrições abaixo:
+   * - <span class="po-icon po-icon-ok"></span> - `success`
+   * - <span class="po-icon po-icon-warning"></span> - `warning`
+   * - <span class="po-icon po-icon-close"></span> - `danger`
+   * - <span class="po-icon po-icon-info"></span> - `info`
    *
    * @default `false`
    */
-  @Input('p-icon') set icon(value: boolean) {
-    this._icon = <any>value === '' ? true : convertToBoolean(value);
+  @Input('p-icon') set icon(value: boolean | string) {
+    if (this.type) {
+      this._icon = convertToBoolean(value);
+
+    } else {
+      this._icon = value;
+
+    }
   }
-  get icon(): boolean {
+
+  get icon(): boolean | string {
     return this._icon;
   }
 
@@ -59,13 +97,23 @@ export class PoTagBaseComponent {
    *
    * @description
    *
-   * Define o layout de exibição.
+   * Define uma legenda que será exibida acima ou ao lado da *tag*, de acordo com a `p-orientation`.
+   */
+  @Input('p-label') label?: string;
+
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Define o *layout* de exibição.
    *
    * @default `vertical`
    */
   @Input('p-orientation') set orientation(value: PoTagOrientation) {
     this._orientation = (<any>Object).values(PoTagOrientation).includes(value) ? value : poTagOrientationDefault;
   }
+
   get orientation(): PoTagOrientation {
     return this._orientation;
   }
@@ -75,19 +123,22 @@ export class PoTagBaseComponent {
    *
    * @description
    *
-   * Define o tipo e determina a cor do `po-tag`.
+   * Define o tipo da *tag*.
    *
    * Valores válidos:
    *  - `success`: cor verde utilizada para simbolizar sucesso ou êxito.
    *  - `warning`: cor amarela que representa aviso ou advertência.
    *  - `danger`: cor vermelha para erro ou aviso crítico.
    *  - `info`: cor cinza escuro que caracteriza conteúdo informativo.
    *
+   * > Quando esta propriedade for definida, irá sobrepor a definição de `p-color` e `p-icon` somente será exibido caso seja `true`.
+   *
    * @default `info`
    */
   @Input('p-type') set type(value: PoTagType) {
-    this._type = (<any>Object).values(PoTagType).includes(value) ? value : poTagTypeDefault;
+    this._type = (<any>Object).values(PoTagType).includes(value) ? value : undefined;
   }
+
   get type(): PoTagType {
     return this._type;
   }
@@ -100,21 +151,8 @@ export class PoTagBaseComponent {
    *
    * @description
    *
-   * Ação que será executada quando o usuário clicar sobre o `po-tag`
-   * e que receberá como parâmetro um objeto contendo o valor e tipo de tag.
+   * Ação que será executada ao clicar sobre o `po-tag` e que receberá como parâmetro um objeto contendo o seu valor e tipo.
    */
   @Output('p-click') click?: EventEmitter<any> = new EventEmitter<PoTagItem>();
 
-  get iconFromType() {
-    switch (this.type) {
-      case PoTagType.Danger: return PoTagIcon.Danger;
-
-      case PoTagType.Info: return PoTagIcon.Info;
-
-      case PoTagType.Success: return PoTagIcon.Success;
-
-      case PoTagType.Warning: return PoTagIcon.Warning;
-    }
-  }
-
 }

projects/ui/src/lib/components/po-tag/po-tag.component.html

@@ -1,12 +1,19 @@
-<div class="po-tag-container" [class.po-tag-container-horizontal]="orientation === poTagOrientation.Horizontal">
+<div class="po-tag-container" [class.po-tag-container-horizontal]="tagOrientation">
   <div *ngIf="label" class="po-tag-title po-text-nowrap">
-    <span class="po-tag-label">{{ orientation === poTagOrientation.Horizontal ? label + ':' : label }}</span>
+    <span class="po-tag-label">{{ tagOrientation ? label + ':' : label }}</span>
   </div>
-  <div 
-    class="po-tag po-tag-{{ type }}" 
-    [ngClass]="{'po-clickable': isClickable}"
-    (click)="onClick()">
-    <span *ngIf="icon" class="po-icon po-icon-{{ iconFromType }}"></span>
-    <span class="po-tag-value">{{value}}</span>
+
+  <div class="po-tag-sub-container">
+    <div class="po-tag"
+      [class.po-clickable]="isClickable"
+      [ngClass]="tagColor"
+      tabindex="0"
+      (click)="onClick()"
+      (keydown)="onKeyPressed($event, 'enter')"
+      (keyup)="onKeyPressed($event, 'space')">
+
+      <span *ngIf="icon" class="po-icon" [ngClass]="!type && iconTypeString ? icon : iconFromType"></span>
+      <span class="po-tag-value">{{value}}</span>
+    </div>
   </div>
 </div>