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

Implementa definições do AnimaliaDS no Accordion

fixes DTHFUI-7691

projects/ui/src/lib/components/po-accordion/index.ts

@@ -1,3 +1,4 @@
+export * from './interfaces/po-accordion-literals.interface';
 export * from './po-accordion-item/po-accordion-item.component';
 export * from './po-accordion.component';
 

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

@@ -0,0 +1,14 @@
+/**
+ * @usedBy PoAccordionComponent
+ *
+ * @description
+ *
+ * Interface para definição das literais usadas no `po-accordion`.
+ */
+export interface PoAccordionLiterals {
+  /** Label do gerenciador de Accordion para expandir todos os itens. */
+  expandAllItems?: string;
+
+  /** Label do gerenciador de Accordion para colapsar todos os itens */
+  closeAllItems?: string;
+}

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

@@ -1,9 +1,102 @@
-import { PoAccordionBaseComponent } from './po-accordion-base.component';
+import { poLocaleDefault } from '../../services';
+import { PoLanguageService } from '../../services/po-language/po-language.service';
+import { expectPropertiesValues } from '../../util-test/util-expect.spec';
+import { convertToBoolean } from '../../utils/util';
+import { PoAccordionBaseComponent, poAccordionLiteralsDefault } from './po-accordion-base.component';
 
 describe('PoAccordionBaseComponent:', () => {
-  const component = new PoAccordionBaseComponent();
+  const languageService: PoLanguageService = new PoLanguageService();
+  let component: PoAccordionBaseComponent;
+
+  beforeEach(() => {
+    component = new PoAccordionBaseComponent(languageService);
+  });
 
   it('should be created', () => {
     expect(component instanceof PoAccordionBaseComponent).toBeTruthy();
   });
+
+  it('p-literals: should be in portuguese if browser is setted with an unsupported language', () => {
+    component['language'] = 'zw';
+
+    component.literals = {};
+
+    expect(component.literals).toEqual(poAccordionLiteralsDefault[poLocaleDefault]);
+  });
+
+  it('p-literals: should be in portuguese if browser is setted with `pt`', () => {
+    component['language'] = 'pt';
+
+    component.literals = {};
+
+    expect(component.literals).toEqual(poAccordionLiteralsDefault.pt);
+  });
+
+  it('p-literals: should be in english if browser is setted with `en`', () => {
+    component['language'] = 'en';
+
+    component.literals = {};
+
+    expect(component.literals).toEqual(poAccordionLiteralsDefault.en);
+  });
+
+  it('p-literals: should be in spanish if browser is setted with `es`', () => {
+    component['language'] = 'es';
+
+    component.literals = {};
+
+    expect(component.literals).toEqual(poAccordionLiteralsDefault.es);
+  });
+
+  it('p-literals: should be in russian if browser is setted with `ru`', () => {
+    component['language'] = 'ru';
+
+    component['_literals'] = undefined;
+
+    expect(component.literals).toEqual(poAccordionLiteralsDefault.ru);
+  });
+
+  it('p-literals: should accept custom literals', () => {
+    component['language'] = poLocaleDefault;
+
+    const customLiterals = Object.assign({}, poAccordionLiteralsDefault[poLocaleDefault]);
+
+    customLiterals.closeAllItems = 'Close';
+
+    component.literals = customLiterals;
+
+    expect(component.literals).toEqual(customLiterals);
+  });
+
+  it('p-literals: should update property with default literals if is setted with invalid values', () => {
+    const invalidValues = [null, undefined, false, true, '', 'literals', 0, 10, [], [1, 2], () => {}];
+
+    component['language'] = poLocaleDefault;
+
+    expectPropertiesValues(component, 'literals', invalidValues, poAccordionLiteralsDefault[poLocaleDefault]);
+  });
+
+  it('showManagerAccordion: should set property `p-show-manager-accordion` to `false` if invalid value', () => {
+    component.showManagerAccordion = convertToBoolean(3);
+
+    expect(component.showManagerAccordion).toBe(false);
+  });
+
+  it('hideRemoveAllDisclaimer: should update property `p-show-manager-accordion` to `true` with valid values', () => {
+    component.showManagerAccordion = convertToBoolean(1);
+
+    expect(component.showManagerAccordion).toBe(true);
+  });
+
+  it('allowExpandItems: should set property `p-allow-expand-all-items` to `false` if invalid value', () => {
+    component.allowExpandItems = convertToBoolean(3);
+
+    expect(component.allowExpandItems).toBe(false);
+  });
+
+  it('hideRemoveAllDisclaimer: should update property `p-allow-expand-all-items` to `true` with valid values', () => {
+    component.allowExpandItems = convertToBoolean(1);
+
+    expect(component.allowExpandItems).toBe(true);
+  });
 });

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

@@ -1,3 +1,28 @@
+import { Directive, Input } from '@angular/core';
+import { poLocaleDefault } from '../../services/po-language/po-language.constant';
+import { PoLanguageService } from '../../services/po-language/po-language.service';
+import { convertToBoolean } from '../../utils/util';
+import { PoAccordionLiterals } from './interfaces/po-accordion-literals.interface';
+
+export const poAccordionLiteralsDefault = {
+  en: <PoAccordionLiterals>{
+    closeAllItems: 'Close all items',
+    expandAllItems: 'Open all items'
+  },
+  es: <PoAccordionLiterals>{
+    closeAllItems: 'Cerrar todos los elementos',
+    expandAllItems: 'Abrir todos los elementos'
+  },
+  pt: <PoAccordionLiterals>{
+    closeAllItems: 'Fechar todos os itens',
+    expandAllItems: 'Abrir todos os itens'
+  },
+  ru: <PoAccordionLiterals>{
+    closeAllItems: 'Закрыть все элементы',
+    expandAllItems: 'Открыть все элементы'
+  }
+};
+
 /**
  * @description
  *
@@ -24,4 +49,86 @@
  * Caso houver a necessidade de abrir algum dos `po-accordion-item` via Typescript
  * acesse a [documentação do PoAccordionItem](/documentation/po-accordion-item).
  */
-export class PoAccordionBaseComponent {}
+@Directive()
+export class PoAccordionBaseComponent {
+  private language: string = poLocaleDefault;
+  private _literals;
+
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Objeto com as literais usadas no `po-accordion`.
+   *
+   * Existem duas maneiras de customizar o componente, passando um objeto com todas as literais disponíveis:
+   *
+   * ```
+   *  const customLiterals: PoAccordionLiterals = {
+   *    closeAllItems: 'Fechar todos os itens',
+   *    expandAllItems: 'Expandir todos os itens'
+   *  };
+   * ```
+   *
+   * Ou passando apenas as literais que deseja customizar:
+   *
+   * ```
+   *  const customLiterals: PoAccordionLiterals = {
+   *    expandAllItems: 'Expandir todos os itens'
+   *  };
+   * ```
+   *
+   * E para carregar as literais customizadas, basta apenas passar o objeto para o componente.
+   *
+   * ```
+   * <po-accordion
+   *   [p-literals]="customLiterals">
+   * </po-accordion>
+   * ```
+   *
+   * > O objeto padrão de literais será traduzido de acordo com o idioma do
+   * [`PoI18nService`](/documentation/po-i18n) ou do browser.
+   */
+  @Input('p-literals') set literals(value: PoAccordionLiterals) {
+    if (value instanceof Object && !(value instanceof Array)) {
+      this._literals = {
+        ...poAccordionLiteralsDefault[poLocaleDefault],
+        ...poAccordionLiteralsDefault[this.language],
+        ...value
+      };
+    } else {
+      this._literals = poAccordionLiteralsDefault[this.language];
+    }
+  }
+
+  get literals() {
+    return this._literals || poAccordionLiteralsDefault[this.language];
+  }
+
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Exibe o Gerenciador de Accordion.
+   *
+   * @default `false`
+   */
+  @Input({ alias: 'p-show-manager-accordion', transform: convertToBoolean }) showManagerAccordion: boolean = false;
+
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Permite expandir mais de um `<po-accordion-item></po-accordion-item>` ao mesmo tempo.
+   * Sempre habilitada caso a propriedade `p-show-manager-accordion` esteja como `true`.
+   *
+   * @default `false`
+   */
+  @Input({ alias: 'p-allow-expand-all-items', transform: convertToBoolean }) allowExpandItems: boolean = false;
+
+  constructor(languageService: PoLanguageService) {
+    this.language = languageService.getShortLanguage();
+  }
+}

projects/ui/src/lib/components/po-accordion/po-accordion-item-header/po-accordion-item-header.component.html

@@ -1,6 +1,15 @@
-<header class="po-accordion-item-header">
-  <button class="po-accordion-item-header-button po-clickable" (click)="onClick()">
-    <div class="po-text-ellipsis po-accordion-item-header-title">{{ label }}</div>
-    <span #icon class="po-icon po-accordion-item-header-icon po-icon-arrow-down"> </span>
+<div class="po-accordion-item-header">
+  <button
+    [disabled]="disabledItem"
+    [attr.aria-label]="label"
+    [attr.aria-expanded]="expanded || false"
+    class="po-accordion-item-header-button po-clickable"
+    (click)="onClick()"
+  >
+    <div class="po-accordion-item-header-button-content">
+      <div class="po-text-ellipsis po-accordion-item-header-title">{{ label }}</div>
+      <po-tag *ngIf="labelTag" class="po-accordion-item-header-tag" [p-value]="labelTag" [p-type]="typeTag"> </po-tag>
+    </div>
+    <po-icon p-icon="po-icon-arrow-down" class="po-icon po-accordion-item-header-icon"></po-icon>
   </button>
-</header>
+</div>

projects/ui/src/lib/components/po-accordion/po-accordion-item-header/po-accordion-item-header.component.spec.ts

@@ -43,12 +43,13 @@ describe('PoAccordionItemHeaderComponent:', () => {
   describe('Templates:', () => {
     let header;
     let button;
-    let span;
+    let icon;
 
     beforeEach(() => {
-      header = nativeElement.querySelector('header');
+      component.disabledItem = false;
+      header = nativeElement.querySelector('div');
       button = header.querySelector('button');
-      span = button.querySelector('span');
+      icon = button.querySelector('po-icon');
     });
 
     it('should have a header with po-accordion-item-header class', () => {
@@ -68,22 +69,22 @@ describe('PoAccordionItemHeaderComponent:', () => {
       expect(button.classList.contains('po-clickable')).toBeTruthy();
     });
 
-    it('should have a button with span (icon)', () => {
-      expect(button.querySelector('span')).toBeTruthy();
+    it('should have a button with icon (icon)', () => {
+      expect(button.querySelector('po-icon')).toBeTruthy();
     });
 
-    it('should have a span with class po-icon', () => {
-      expect(span.classList.contains('po-icon')).toBeTruthy();
+    it('should have a icon with class po-icon', () => {
+      expect(icon.classList.contains('po-icon')).toBeTruthy();
     });
 
-    it('should have a span with class po-accordion-item-header-icon', () => {
-      expect(span.classList.contains('po-accordion-item-header-icon')).toBeTruthy();
+    it('should have a icon with class po-accordion-item-header-icon', () => {
+      expect(icon.classList.contains('po-accordion-item-header-icon')).toBeTruthy();
     });
 
-    it('should have a span with class po-icon-arrow-down by default', () => {
+    it('should have a icon with class po-accordion-item-header-icon by default', () => {
       fixture.detectChanges();
 
-      expect(span.classList.contains('po-icon-arrow-down')).toBeTruthy();
+      expect(icon.classList.contains('po-accordion-item-header-icon')).toBeTruthy();
     });
 
     it(`shouldn't have text in button if label is empty`, () => {

projects/ui/src/lib/components/po-accordion/po-accordion-item-header/po-accordion-item-header.component.ts

@@ -1,17 +1,31 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { PoLanguageService } from '../../../services/po-language';
+import { poLocaleDefault } from '../../../services/po-language/po-language.constant';
 
 @Component({
   selector: 'po-accordion-item-header',
   templateUrl: 'po-accordion-item-header.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class PoAccordionItemHeaderComponent {
+  private language: string = poLocaleDefault;
+
   @Input('p-expanded') expanded: boolean = false;
 
   @Input('p-label') label: string;
 
+  @Input('p-label-tag') labelTag: string;
+
+  @Input('p-type-tag') typeTag: string;
+
+  @Input('p-disabled') disabledItem: boolean;
+
   @Output('p-toggle') toggle = new EventEmitter<boolean>();
 
+  constructor(languageService: PoLanguageService) {
+    this.language = languageService.getShortLanguage();
+  }
+
   onClick() {
     this.expanded = !this.expanded;
 

projects/ui/src/lib/components/po-accordion/po-accordion-item/po-accordion-item.component.spec.ts

@@ -1,7 +1,9 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { PoAccordionItemComponent } from './po-accordion-item.component';
+import { expectPropertiesValues } from '../../../util-test/util-expect.spec';
+import { convertToBoolean } from '../../../utils/util';
 import { PoAccordionService } from '../services/po-accordion.service';
+import { PoAccordionItemComponent } from './po-accordion-item.component';
 
 describe('PoAccordionItemComponent:', () => {
   let component: PoAccordionItemComponent;
@@ -43,4 +45,30 @@ describe('PoAccordionItemComponent:', () => {
       expect(component.expandEvent.emit).toHaveBeenCalled();
     });
   });
+
+  describe('Properties:', () => {
+    it('disabledItem: should set property `p-disabled` to `false` if invalid value', () => {
+      component.disabledItem = convertToBoolean(3);
+
+      expect(component.disabledItem).toBe(false);
+    });
+
+    it('hideRemoveAllDisclaimer: should update property `p-disabled` to `true` with valid values', () => {
+      component.disabledItem = convertToBoolean(1);
+
+      expect(component.disabledItem).toBe(true);
+    });
+
+    it('typeTag: should update property with valid values', () => {
+      const validValues = ['danger', 'info', 'success', 'warning'];
+
+      expectPropertiesValues(component, 'typeTag', validValues, validValues);
+    });
+
+    it('typeTag: should update property with `info` if values are invalid', () => {
+      const invalidValues = [undefined, null, '', true, false, 0, -1, 12, 15, 'aa', [], {}];
+
+      expectPropertiesValues(component, 'typeTag', invalidValues, undefined);
+    });
+  });
 });