feat(accordion): cria o componente

Cria o novo componente `po-accordion`, para o usuário poder agrupar
visualmente uma lista de conteúdos, mostrando-os individualmente ao clicar
no título de cada item.

Fixes DTHFUI-798

Author: jhosefmarks

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

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 
+import { PoAccordionModule } from './po-accordion/po-accordion.module';
 import { PoAvatarModule } from './po-avatar/po-avatar.module';
 import { PoBreadcrumbModule } from './po-breadcrumb/po-breadcrumb.module';
 import { PoButtonModule } from './po-button/po-button.module';
@@ -36,6 +37,7 @@ import { PoWidgetModule } from './po-widget/po-widget.module';
 @NgModule({
   declarations: [],
   imports: [
+    PoAccordionModule,
     PoAvatarModule,
     PoBreadcrumbModule,
     PoButtonModule,
@@ -70,6 +72,7 @@ import { PoWidgetModule } from './po-widget/po-widget.module';
     PoWidgetModule
   ],
   exports: [
+    PoAccordionModule,
     PoAvatarModule,
     PoBreadcrumbModule,
     PoButtonModule,

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

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

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

@@ -0,0 +1,4 @@
+export * from './po-accordion-item/po-accordion-item.component';
+export * from './po-accordion.component';
+
+export * from './po-accordion.module';

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

@@ -0,0 +1,10 @@
+import { PoAccordionBaseComponent } from './po-accordion-base.component';
+
+describe('PoAccordionBaseComponent:', () => {
+  const component = new PoAccordionBaseComponent();
+
+  it('should be created', () => {
+    expect(component instanceof PoAccordionBaseComponent).toBeTruthy();
+  });
+
+});

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

@@ -0,0 +1,27 @@
+/**
+ * @description
+ *
+ * Componente utilizado para agrupar visualmente uma lista de conteúdos, mostrando-os individualmente
+ * ao clicar no título de cada item.
+ *
+ * Para utilizá-lo, é necessário envolver cada item no componente [`po-accordion-item`](/documentation/po-accordion-item),
+ * como no exemplo abaixo:
+ *
+ * ```
+ * <po-accordion>
+ *   <po-accordion-item p-label="Portinari Accordion 1">
+ *      Accordion 1
+ *   </po-accordion-item>
+ *
+ *   <po-accordion-item p-label="Portinari Accordion 2">
+ *      Accordion 2
+ *   </po-accordion-item>
+ * </po-accordion>
+ * ```
+ *
+ * O componente já faz o controle de abertura e fechamento dos itens automaticamente.
+ *
+ * Caso houver a necessidade de abrir algum dos `po-accordion-item` via Typescript
+ * acesse a [documentamentação do PoAccordionItem](/documentation/po-accordion-item).
+ */
+export class PoAccordionBaseComponent {}

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

@@ -0,0 +1,5 @@
+<div class="po-accordion-item-body" *ngIf="expanded" @toggleBody>
+  <div class="po-accordion-item-body-content">
+    <ng-content></ng-content>
+  </div>
+</div>

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

@@ -0,0 +1,61 @@
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { configureTestSuite } from './../../../util-test/util-expect.spec';
+
+import { PoAccordionItemBodyComponent } from './po-accordion-item-body.component';
+
+describe('PoAccordionItemBodyComponent:', () => {
+  let component: PoAccordionItemBodyComponent;
+  let fixture: ComponentFixture<PoAccordionItemBodyComponent>;
+
+  let nativeElement: any;
+
+  configureTestSuite(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PoAccordionItemBodyComponent ],
+      imports: [ BrowserAnimationsModule ]
+    });
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PoAccordionItemBodyComponent);
+    component = fixture.componentInstance;
+
+    nativeElement = fixture.debugElement.nativeElement;
+  });
+
+  it('should be created', () => {
+    expect(component instanceof PoAccordionItemBodyComponent).toBeTruthy();
+  });
+
+  describe('Templates:', () => {
+    it('shouldn`t have `po-accordion-item-body` by default', () => {
+
+      fixture.detectChanges();
+
+      const body = nativeElement.querySelector('.po-accordion-item-body');
+      expect(body).toBeFalsy();
+    });
+
+    it('should have `po-accordion-item-body` class if `expanded` is `true`', () => {
+      component.expanded = true;
+
+      fixture.detectChanges();
+
+      const body = nativeElement.querySelector('.po-accordion-item-body');
+      expect(body).toBeTruthy();
+    });
+
+    it('shouldn`t have `po-accordion-item-body` class if `expanded` is `false`', () => {
+      component.expanded = false;
+
+      fixture.detectChanges();
+
+      const body = nativeElement.querySelector('.po-accordion-item-body');
+      expect(body).toBeFalsy();
+    });
+  });
+
+});

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

@@ -0,0 +1,24 @@
+import { Component, Input } from '@angular/core';
+import { animate, style, transition, trigger } from '@angular/animations';
+
+@Component({
+  selector: 'po-accordion-item-body',
+  templateUrl: 'po-accordion-item-body.component.html',
+  animations: [
+    trigger('toggleBody', [
+      transition('* => void', [
+        style({ height: '*'}),
+        animate(200, style({ height: 0 }))
+      ]),
+      transition('void => *', [
+        style({ height: '0'}),
+        animate(200, style({ height: '*' }))
+      ])
+    ])
+  ]
+})
+export class PoAccordionItemBodyComponent {
+
+  @Input('p-expanded') expanded: boolean = false;
+
+}

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

@@ -0,0 +1,7 @@
+<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>
+  </button>
+</header>

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

@@ -0,0 +1,121 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { configureTestSuite } from './../../../util-test/util-expect.spec';
+
+import { PoAccordionItemHeaderComponent } from './po-accordion-item-header.component';
+
+describe('PoAccordionItemHeaderComponent:', () => {
+  let component: PoAccordionItemHeaderComponent;
+  let fixture: ComponentFixture<PoAccordionItemHeaderComponent>;
+
+  let nativeElement: any;
+
+  configureTestSuite(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PoAccordionItemHeaderComponent ]
+    });
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PoAccordionItemHeaderComponent);
+    component = fixture.componentInstance;
+
+    nativeElement = fixture.debugElement.nativeElement;
+  });
+
+  it('should be created', () => {
+    expect(component instanceof PoAccordionItemHeaderComponent).toBeTruthy();
+  });
+
+  describe('Methods:', () => {
+
+    it('onClick: should toggle `expanded` and call `toggle.emit` with `expanded`', () => {
+      const expectedValue = false;
+      component.expanded = !expectedValue;
+      spyOn(component.toggle, 'emit');
+
+      component.onClick();
+
+      expect(component.expanded).toBe(expectedValue);
+      expect(component.toggle.emit).toHaveBeenCalledWith(expectedValue);
+    });
+
+  });
+
+  describe('Templates:', () => {
+
+    let header;
+    let button;
+    let span;
+
+    beforeEach(() => {
+      header = nativeElement.querySelector('header');
+      button = header.querySelector('button');
+      span = button.querySelector('span');
+    });
+
+    it('should have a header with po-accordion-item-header class', () => {
+      expect(header).toBeTruthy();
+      expect(header.classList.contains('po-accordion-item-header')).toBeTruthy();
+    });
+
+    it('should have a header with button', () => {
+      expect(header.querySelector('button')).toBeTruthy();
+    });
+
+    it('should have a button with class po-accordion-item-header-button', () => {
+      expect(button.classList.contains('po-accordion-item-header-button')).toBeTruthy();
+    });
+
+    it('should have a button with class po-clickable', () => {
+      expect(button.classList.contains('po-clickable')).toBeTruthy();
+    });
+
+    it('should have a button with span (icon)', () => {
+      expect(button.querySelector('span')).toBeTruthy();
+    });
+
+    it('should have a span with class po-icon', () => {
+      expect(span.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 span with class po-icon-arrow-down by default', () => {
+      fixture.detectChanges();
+
+      expect(span.classList.contains('po-icon-arrow-down')).toBeTruthy();
+    });
+
+    it(`shouldn't have text in button if label is empty`, () => {
+      component.label = '';
+
+      fixture.detectChanges();
+
+      expect(button.innerText).toBe('');
+    });
+
+    it('should update button text from property label', () => {
+      const expectedValue = 'header';
+
+      component.label = expectedValue;
+
+      fixture.detectChanges();
+
+      expect(button.innerText).toBe(expectedValue);
+    });
+
+    it('should call `onClick` on button click', () => {
+
+      spyOn(component, 'onClick');
+
+      button.click();
+
+      expect(component.onClick).toHaveBeenCalled();
+    });
+
+  });
+
+});