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

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,16 @@
+/**
+ * @docsPrivate
+ *
+ * @usedBy PoBadgeComponent
+ *
+ * @description
+ *
+ * Interface para definição das literais usadas no `po-badge`.
+ */
+export interface PoBadgeLiterals {
+  /** Texto utilizado na propriedade `aria-label` do `po-badge` ao ter somente uma notificação. */
+  notification: string;
+
+  /** Texto utilizado 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

@@ -10,66 +10,72 @@ describe('PoBadgeBaseComponent:', () => {
   });
 
   describe('Properties:', () => {
-    it('p-color: should update with valid values', () => {
-      const validValues = ['color-01', 'color-02', 'color-03', 'color-04', 'color-12', 'color-08'];
+    it('p-aria-label: set ariaLabel with empty when value equals undefined', () => {
+      component.ariaLabel = undefined;
 
-      expectPropertiesValues(component, 'color', validValues, validValues);
+      expect(component.ariaLabel).toBe(undefined);
     });
 
-    it('p-color: should update with invalid values', () => {
-      const invalidValues = [true, false, undefined, 'color-13', 'color-100', 'color-8', [], {}, null, 0];
+    it('p-aria-label: set ariaLabel with value passed', () => {
+      component.ariaLabel = 'Notification';
 
-      expectPropertiesValues(component, 'color', invalidValues, 'color-07');
+      expect(component.ariaLabel).toBe('Notification');
     });
 
-    it('p-value: should update with valid values and call `setBadgeValue`', () => {
-      const validValues = [10, 200, 50, 0, 999];
-
-      spyOn(component, <any>'setBadgeValue');
+    it('p-color: should update with valid values', () => {
+      component.color = 'color-09';
 
-      expectPropertiesValues(component, 'value', validValues, validValues);
-      expect(component['setBadgeValue']).toHaveBeenCalled();
+      expect(component['_color']).toBe('color-09');
     });
 
-    it('p-value: should update with invalid values and call `setBadgeValue`', () => {
-      const invalidValues = [true, false, undefined, 'string', [], {}, null];
+    it('p-color: should update with invalid values and set value default `color-07`', () => {
+      component.color = 'color-13';
+
+      expect(component['_color']).toBe('color-07');
+    });
 
-      spyOn(component, <any>'setBadgeValue');
+    it('customColor: should update with valid values', () => {
+      const validValues = ['#ffffff', 'red', 'rgb(201, 53, 125)'];
 
-      expectPropertiesValues(component, 'value', invalidValues, undefined);
-      expect(component['setBadgeValue']).toHaveBeenCalled();
+      expectPropertiesValues(component, 'customColor', validValues, validValues);
     });
-  });
 
-  describe('Methods:', () => {
-    it(`setBadgeValue: should set 'badgeValue' with 'undefined' if value is 'undefined'`, () => {
-      component['setBadgeValue'](undefined);
+    it('customColor: should update with valid values and HEX', () => {
+      component.color = '#fff';
 
-      expect(component.badgeValue).toBe(undefined);
+      expect(component.customColor).toBe('#fff');
     });
 
-    it(`setBadgeValue: should set 'badgeValue' with '99+' if value is greater than '99'`, () => {
-      component['setBadgeValue'](100);
+    it('p-value: should update with valid values', () => {
+      const validValues = [10, 200, 50, 0, 999];
 
-      expect(component.badgeValue).toBe('99+');
+      expectPropertiesValues(component, 'value', validValues, validValues);
     });
 
-    it(`setBadgeValue: should set 'badgeValue' with '55' if value is '55'`, () => {
-      component['setBadgeValue'](55);
+    it('p-value: should update with invalid values', () => {
+      const validValues = [-1, -20, -30];
 
-      expect(component.badgeValue).toBe('55');
+      expectPropertiesValues(component, 'value', validValues, 0);
     });
 
-    it(`setBadgeValue: should set 'badgeValue' with '0' if value is '0'`, () => {
-      component['setBadgeValue'](0);
+    it('p-icon: should set icon when value if isnt null', () => {
+      const iconFake = 'po-icon-minus';
+      component.icon = iconFake;
+      expect(component.icon).toBe(iconFake);
+    });
 
-      expect(component.badgeValue).toBe('0');
+    it('p-icon: should set icon undefined when  value if null', () => {
+      const iconFake = undefined;
+      component.icon = iconFake;
+      expect(component.icon).toBe(undefined);
     });
 
-    it(`setBadgeValue: should set 'badgeValue' with '99' if value is '99'`, () => {
-      component['setBadgeValue'](99);
+    it(`setSize: should set 'size' with 'large' if value is 'large'`, () => {
+      const newSize = 'large';
+
+      component.size = newSize;
 
-      expect(component.badgeValue).toBe('99');
+      expect(component['size']).toBe(newSize);
     });
   });
 });

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

@@ -1,94 +1,167 @@
-import { Input, Directive } from '@angular/core';
+import { Input, Directive, TemplateRef, HostBinding } from '@angular/core';
 
-import { convertToInt } from '../../utils/util';
+import { convertToBoolean, convertToInt } from '../../utils/util';
+import { PoColorPaletteEnum } from '../../enums/po-color-palette.enum';
 
-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'
-];
+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 | boolean | 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 _ariaLabel: string;
 
   /**
-   * @optional
-   *
    * @description
    *
-   * Define a cor de fundo do componente e aceita os valores:
-   *
-   * <span class="dot po-color-01"></span> `color-01`
+   * Define um `aria-label` para o `po-badge`
+   */
+  @Input('p-aria-label') set ariaLabel(value: string) {
+    if (value === undefined) {
+      this._ariaLabel = '';
+    }
+    this._ariaLabel = value;
+  }
+
+  get ariaLabel(): string {
+    return this._ariaLabel;
+  }
+
+  /**
+   * @optional
    *
-   * <span class="dot po-color-02"></span> `color-02`
+   * @description
    *
-   * <span class="dot po-color-03"></span> `color-03`
+   * 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`
    *
-   * <span class="dot po-color-04"></span> `color-04`
+   * @default `color-07`
+   */
+  @Input('p-color') set color(value: string) {
+    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 {
+    return this._color;
+  }
+
+  /**
+   * @optional
    *
-   * <span class="dot po-color-05"></span> `color-05`
+   * @description
+   * Ícone exibido no `po-badge`.
+   *
+   * Para exibir icone do status atual declare a propriedade `p-icon`. conforme exemplo abaixo:
+   * ```
+   * <po-badge [p-icon]="true"></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
    *
-   * <span class="dot po-color-06"></span> `color-06`
+   * Define o estado do `po-badge`
    *
-   * <span class="dot po-color-07"></span> `color-07`
+   * 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;
    *
-   * <span class="dot po-color-08"></span> `color-08`
+   */
+  @HostBinding('attr.p-status')
+  @Input('p-status')
+  set status(value: PoBadgeStatus) {
+    this._status = ['positive', 'negative', 'warning', 'disabled'].includes(value) ? value : undefined;
+  }
+
+  get status(): PoBadgeStatus {
+    return this._status;
+  }
+
+  /**
+   * @description
    *
-   * <span class="dot po-color-09"></span> `color-09`
+   * Define o tamanho do `po-badge`
    *
-   * <span class="dot po-color-10"></span> `color-10`
+   * 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.;
    *
-   * <span class="dot po-color-11"></span> `color-11`
+   * @default `medium`
+   */
+  @Input('p-size') size: PoBadgeSize = 'medium';
+
+  /**
+   * @description
    *
-   * <span class="dot po-color-12"></span> `color-12`
+   * Exibe uma borda para o `po-badge`
    *
-   * @default `color-07`
+   * > Pode personalizar cor da bordar com a propriedade `p-color-border`
    */
-  @Input('p-color') set color(value: string) {
-    this._color = PO_BADGE_COLORS.includes(value) ? value : PO_BADGE_COLOR_DEFAULT;
-  }
-
-  get color(): string {
-    return this._color;
-  }
+  @Input({ alias: 'p-show-border', transform: convertToBoolean }) showBorder: boolean = false;
 
   /**
    * @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;
-  }
 }