feat(badge): implementa definições do AnimaliaDS

definições do AnimaliaDS no componente `po-badge`

Fixes DTHFUI-7933

projects/portal/src/index.html

@@ -197,6 +197,7 @@ <h4>
     </div>
 
     <script src="https://vlibras.gov.br/app/vlibras-plugin.js"></script>
+    <script src="https://unpkg.com/@phosphor-icons/web"></script>
     <script>
       new window.VLibras.Widget('https://vlibras.gov.br/app');
     </script>

projects/ui/src/lib/components/components.module.ts

@@ -45,6 +45,7 @@ import { PoToolbarModule } from './po-toolbar/po-toolbar.module';
 import { PoTreeViewModule } from './po-tree-view/po-tree-view.module';
 import { PoWidgetModule } from './po-widget/po-widget.module';
 import { PoSearchModule } from './po-search';
+import { PoBadgeModule } from './po-badge/po-badge.module';
 
 @NgModule({
   imports: [
@@ -92,7 +93,8 @@ import { PoSearchModule } from './po-search';
     PoImageModule,
     PoPageSlideModule,
     PoSwitchModule,
-    PoSearchModule
+    PoSearchModule,
+    PoBadgeModule
   ],
   exports: [
     PoAccordionModule,
@@ -139,7 +141,8 @@ import { PoSearchModule } from './po-search';
     PoImageModule,
     PoPageSlideModule,
     PoSwitchModule,
-    PoSearchModule
+    PoSearchModule,
+    PoBadgeModule
   ],
   providers: [],
   bootstrap: [],

projects/ui/src/lib/components/index.ts

@@ -2,6 +2,7 @@ export * from './components.module';
 
 export * from './po-accordion/index';
 export * from './po-avatar/index';
+export * from './po-badge/index';
 export * from './po-breadcrumb/index';
 export * from './po-button-group/index';
 export * from './po-button/index';

projects/ui/src/lib/components/po-badge/interfaces/po-badge-literals-default.ts

@@ -0,0 +1,18 @@
+export const PoBadgeLiteralsDefault = {
+  en: {
+    notification: 'new notification',
+    notifications: 'new notifications'
+  },
+  es: {
+    notification: 'nueva notificación',
+    notifications: 'nuevas notificaciones'
+  },
+  pt: {
+    notification: 'nova notificação',
+    notifications: 'nova notificaçoes'
+  },
+  ru: {
+    notification: 'новое уведомление',
+    notifications: 'новые уведомления'
+  }
+};

projects/ui/src/lib/components/po-badge/interfaces/po-badge-literals.interface.ts

@@ -0,0 +1,14 @@
+/**
+ * @usedBy PoBadgeComponent
+ *
+ * @description
+ *
+ * Interface para definição das literais usadas no `po-badge`.
+ */
+export interface PoBadgeLiterals {
+  /** Texto exibido na propriedade `aria-label` do `po-badge` ao ter somente uma notificação. */
+  notification: string;
+
+  /** Texto exibido na propriedade `aria-label` do `po-badge` ao ter mais de uma notificação. */
+  notifications: string;
+}

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

@@ -39,6 +39,18 @@ describe('PoBadgeBaseComponent:', () => {
       expectPropertiesValues(component, 'value', invalidValues, undefined);
       expect(component['setBadgeValue']).toHaveBeenCalled();
     });
+
+    it('p-icon: should set icon when value if isnt null', () => {
+      const iconFake = 'po-icon-minus';
+      component.icon = iconFake;
+      expect(component.icon).toBe(iconFake);
+    });
+
+    it('p-icon: should set icon undefined when  value if null', () => {
+      const iconFake = '';
+      component.icon = iconFake;
+      expect(component.icon).toBe(undefined);
+    });
   });
 
   describe('Methods:', () => {
@@ -51,13 +63,13 @@ describe('PoBadgeBaseComponent:', () => {
     it(`setBadgeValue: should set 'badgeValue' with '99+' if value is greater than '99'`, () => {
       component['setBadgeValue'](100);
 
-      expect(component.badgeValue).toBe('99+');
+      expect(component.badgeValue).toBe('9+');
     });
 
     it(`setBadgeValue: should set 'badgeValue' with '55' if value is '55'`, () => {
       component['setBadgeValue'](55);
 
-      expect(component.badgeValue).toBe('55');
+      expect(component.badgeValue).toBe('9+');
     });
 
     it(`setBadgeValue: should set 'badgeValue' with '0' if value is '0'`, () => {
@@ -69,7 +81,15 @@ describe('PoBadgeBaseComponent:', () => {
     it(`setBadgeValue: should set 'badgeValue' with '99' if value is '99'`, () => {
       component['setBadgeValue'](99);
 
-      expect(component.badgeValue).toBe('99');
+      expect(component.badgeValue).toBe('9+');
+    });
+
+    it(`setSize: should set 'size' with 'large' if value is 'large'`, () => {
+      const newSize = 'medium';
+
+      component.size = newSize;
+
+      expect(component['_size']).toEqual(newSize);
     });
   });
 });

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

@@ -1,72 +1,61 @@
-import { Input, Directive } from '@angular/core';
-
-import { convertToInt } from '../../utils/util';
-
-const PO_BADGE_COLORS = [
-  'color-01',
-  'color-02',
-  'color-03',
-  'color-04',
-  'color-05',
-  'color-06',
-  'color-07',
-  'color-08',
-  'color-09',
-  'color-10',
-  'color-11',
-  'color-12'
-];
+import { Input, Directive, TemplateRef, HostBinding } from '@angular/core';
+
+import { convertToBoolean, convertToInt } from '../../utils/util';
+import { PoColorPaletteEnum } from '../../enums/po-color-palette.enum';
+
+const poBadgeColors = (<any>Object).values(PoColorPaletteEnum);
 const PO_BADGE_COLOR_DEFAULT = 'color-07';
+export type PoBadgeStatus = 'disabled' | 'negative' | 'positive' | 'warning';
+export type PoBadgeSize = 'small' | 'medium' | 'large';
+export type PoBadgeIcon = string | TemplateRef<void>;
 
 /**
  * @description
  *
- * @docsPrivate
- *
- * Componente utilizado no `po-menu` para exibir por exemplo a quantidade de tarefas pendentes.
+ * Utilizado para exibir a quantidade de notificações.
  */
 @Directive()
 export class PoBadgeBaseComponent {
   badgeValue: string;
+  customColor: string;
 
-  private _color: string;
+  private _color: string = PO_BADGE_COLOR_DEFAULT;
   private _value: number;
+  private _status?: PoBadgeStatus;
+  private _areaLabel: string;
 
   /**
    * @optional
    *
    * @description
    *
-   * Define a cor de fundo do componente e aceita os valores:
-   *
-   * <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`
+   * Determina a cor do `po-badge`. As maneiras de customizar as cores são:
+   * - Hexadeximal, por exemplo `#c64840`;
+   * - RGB, como `rgb(0, 0, 165)`;
+   * - O nome da cor, por exemplo `blue`;
+   * - Usando uma das cores do tema do PO:
+   * 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`
    *
    * @default `color-07`
    */
   @Input('p-color') set color(value: string) {
-    this._color = PO_BADGE_COLORS.includes(value) ? value : PO_BADGE_COLOR_DEFAULT;
+    if (value !== undefined && value.includes('color')) {
+      this._color = poBadgeColors.includes(value) ? value : PO_BADGE_COLOR_DEFAULT;
+    } else {
+      CSS.supports('background-color', value) ? (this.customColor = value) : (this.customColor = undefined);
+    }
   }
 
   get color(): string {
@@ -76,19 +65,108 @@ export class PoBadgeBaseComponent {
   /**
    * @description
    *
-   * Número exibido no componente, caso o mesmo seja maior que 99 o valor exibido será 99+.
+   * Número exibido no componente, caso o mesmo seja maior que 9 o valor exibido será 9+.
    */
   @Input('p-value') set value(value: number) {
-    this._value = convertToInt(value);
-    this.setBadgeValue(this._value);
+    this._value = value <= 0 ? 0 : convertToInt(value);
   }
 
   get value(): number {
     return this._value;
   }
 
-  private setBadgeValue(value: number) {
-    const validRangeValue = (value || value === 0) && value >= 0 && value < 100;
-    this.badgeValue = validRangeValue ? value.toString() : value > 99 ? '99+' : undefined;
+  /**
+   * @description
+   *
+   * Define o estado do `po-badge`
+   *
+   * Valores válidos:
+   * - `positive`: Define a cor do `po-badge` com a cor de feedback positivo.;
+   * - `negative`: Define a cor do `po-badge` com a cor de feedback negative.;
+   * - `warning`: Define a cor do `po-badge` com a cor de feedback warning.;
+   * - `disabled`: Define a cor do `po-badge` com a cor de feedback disabled;
+   *
+   */
+  @HostBinding('attr.p-status')
+  @Input('p-status')
+  set status(value: PoBadgeStatus) {
+    // if ()
+    this._status = ['positive', 'negative', 'warning', 'disabled'].includes(value) ? value : undefined;
+    console.log(this._status);
+  }
+
+  get status(): PoBadgeStatus {
+    return this._status;
   }
+
+  /**
+   * @description
+   *
+   * Define o tamanho do `po-badge`
+   *
+   * Valores válidos:
+   * - `small`: o `po-badge` fica do tamanho padrão, com 8px de altura.;
+   * - `medium`: o `po-badge` fica do tamanho padrão, com 16px de altura.;
+   * - `large`: o `po-badge` fica do tamanho padrão, com 24px de altura.;
+   *
+   * @default `medium`
+   */
+  @Input('p-size') size: PoBadgeSize = 'medium';
+
+  /**
+   * @description
+   *
+   * Define um `aria-label` para o `po-badge`
+   */
+  @Input('p-area-label') set areaLabel(value: string) {
+    if (value === undefined) {
+      this._areaLabel = '';
+    }
+    this._areaLabel = value;
+  }
+
+  get areaLabel(): string {
+    return this._areaLabel;
+  }
+
+  /**
+   * @optional
+   *
+   * @description
+   * Ícone exibido no `po-badge`.
+   *
+   * É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
+   * ```
+   * <po-badge p-icon="po-icon-user"></po-badge>
+   * ```
+   * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma:
+   * ```
+   * <po-badge p-icon="fa fa-podcast"></po-badge>
+   * ```
+   * Outra opção seria a customização do ícone através do `TemplateRef`, conforme exemplo abaixo:
+   * ```
+   * <po-badge [p-icon]="template"></po-badge>
+   *
+   * <ng-template #template>
+   *  <ion-icon style="font-size: inherit" name="heart"></ion-icon>
+   * </ng-template>
+   * ```
+   */
+  @Input('p-icon') icon?: PoBadgeIcon;
+
+  /**
+   * @description
+   *
+   * Exibe uma borda para o `po-badge`
+   *
+   * > Pode personalizar cor da bordar com a propriedade `p-color-border`
+   */
+  @Input({ alias: 'p-show-border', transform: convertToBoolean }) showBorder: boolean = false;
+
+  /**
+   * @description
+   *
+   * Mostrar o icone no `po-badge`
+   */
+  @Input({ alias: 'p-show-icon', transform: convertToBoolean }) showIcon: boolean = false;
 }

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

@@ -1,3 +1,15 @@
-<div class="po-badge po-{{ color }}">
-  <span class="po-badge-value">{{ badgeValue }}</span>
+<div
+  class="po-badge po-badge-{{ size ? size : 'medium' }}"
+  [class.po-badge-notification]="isNotification && !status"
+  [class.po-badge-border]="showBorder"
+  [ngClass]="getBadgeColor"
+  [ngStyle]="customColor && !status ? { 'background-color': customColor } : {}"
+  [ariaLabel]="notificationLabel"
+  [attr.data-status]="status"
+>
+  <po-icon
+    *ngIf="!isNotification && size !== 'small' && showIcon && status !== 'disabled' && icon"
+    [p-icon]="icon"
+  ></po-icon>
+  <span *ngIf="showValue()" class="po-badge-value" aria-hidden="true">{{ badgeValue }}</span>
 </div>