Add new "Accordion" component with customizable Inputs

projects/ion/src/lib/collapse/collapse.component.html

@@ -0,0 +1,25 @@
+<section data-testid="ion-collapse">
+  <header (click)="toggle()" [style.background]="color">
+    <div>
+      <div
+        *ngIf="!templateHeader; else headerCustom"
+        data-testid="ion-collapse__header-name"
+      >
+        {{ name }}
+      </div>
+      <ng-template
+        #headerCustom
+        [ngTemplateOutlet]="templateHeader"
+      ></ng-template>
+    </div>
+    <ion-icon *ngIf="!show" type="right2" [size]="16" color="blue"></ion-icon>
+    <ion-icon *ngIf="show" type="semi-down" [size]="16" color="blue"></ion-icon>
+  </header>
+  <main
+    *ngIf="show"
+    [style.background]="color"
+    data-testid="ion-collapse__main"
+  >
+    <ng-content></ng-content>
+  </main>
+</section>

projects/ion/src/lib/collapse/collapse.component.scss

@@ -0,0 +1,27 @@
+@import '../../styles/index.scss';
+
+section {
+  margin: 8px;
+
+  header,
+  main {
+    padding: 16px;
+    background-color: $neutral-1;
+  }
+
+  header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  main {
+    border-top: 1px solid $neutral-4;
+
+    .icon-color {
+      ::ng-deep svg {
+        fill: $primary-4;
+      }
+    }
+  }
+}

projects/ion/src/lib/collapse/collapse.component.spec.ts

@@ -0,0 +1,110 @@
+import { screen, fireEvent } from '@testing-library/angular';
+
+import { Component, NgModule } from '@angular/core';
+import { IonCollapseModule } from './collapse.module';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { CommonModule } from '@angular/common';
+import { IonIconModule } from '../icon/icon.module';
+
+@Component({
+  template: `<ion-collapse [name]="name">
+    <p data-testID="ion-collapse__main-paragraph">Context Main</p>
+  </ion-collapse>`,
+})
+class CollapseTestComponent {
+  name = '';
+}
+
+@Component({
+  template: `<ion-collapse [templateHeader]="customHeader">
+      <p data-testID="ion-collapse__main-paragraph">Context Main</p>
+    </ion-collapse>
+    <ng-template #customHeader>
+      <div data-testId="ion-collapse__header-custom">
+        Custom template header
+        <ion-icon type="zoom-in"></ion-icon></div
+    ></ng-template>`,
+})
+class CollapseWithTemplateHeaderTestComponent {}
+
+@NgModule({
+  declarations: [
+    CollapseTestComponent,
+    CollapseWithTemplateHeaderTestComponent,
+  ],
+  imports: [IonCollapseModule, IonIconModule],
+})
+class CollapseTestModule {}
+
+describe('IonCollapse', () => {
+  let collapseTestComponent!: CollapseTestComponent;
+  let fixture!: ComponentFixture<CollapseTestComponent>;
+  beforeEach(async () => {
+    TestBed.configureTestingModule({
+      imports: [CollapseTestModule],
+    }).compileComponents();
+    fixture = TestBed.createComponent(CollapseTestComponent);
+    collapseTestComponent = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  afterEach(async () => {
+    fixture.destroy();
+  });
+
+  it('should render ion-collapse', async () => {
+    expect(screen.getByTestId('ion-collapse')).toBeTruthy();
+  });
+
+  it('should render ion-collapse with name Brisanet', async () => {
+    collapseTestComponent.name = 'Brisanet';
+    fixture.detectChanges();
+    expect(screen.getByTestId('ion-collapse__header-name')).toHaveTextContent(
+      'Brisanet'
+    );
+  });
+
+  it('should render main when clicking on header', async () => {
+    const header = screen.getByTestId('ion-collapse__header-name');
+    fireEvent.click(header);
+    fixture.detectChanges();
+    expect(screen.getByTestId('ion-collapse__main')).toBeTruthy();
+    expect(
+      screen.getByTestId('ion-collapse__main-paragraph')
+    ).toHaveTextContent('Context Main');
+  });
+
+  it('should not render main when clicking on header twice', async () => {
+    const header = screen.getByTestId('ion-collapse__header-name');
+    fireEvent.click(header);
+    fireEvent.click(header);
+    fixture.detectChanges();
+    expect(screen.queryByTestId('ion-collapse__main')).not.toBeTruthy();
+  });
+});
+
+describe('IonCollapse - template header', () => {
+  let collapseWithTemplateHeaderTestComponent!: CollapseWithTemplateHeaderTestComponent;
+  let fixture!: ComponentFixture<CollapseWithTemplateHeaderTestComponent>;
+  beforeEach(async () => {
+    TestBed.configureTestingModule({
+      imports: [CommonModule, CollapseTestModule],
+    }).compileComponents();
+    fixture = TestBed.createComponent(CollapseWithTemplateHeaderTestComponent);
+    collapseWithTemplateHeaderTestComponent = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  afterEach(async () => {
+    fixture.destroy();
+  });
+
+  it('should render template header', async () => {
+    const headerCustom = await screen.getByTestId(
+      'ion-collapse__header-custom'
+    );
+    expect(headerCustom).toBeTruthy();
+    expect(headerCustom).toHaveTextContent('Custom template header');
+    expect(document.getElementById('ion-icon-zoom-in')).toBeTruthy();
+  });
+});

projects/ion/src/lib/collapse/collapse.component.ts

@@ -0,0 +1,18 @@
+import { Component, Input } from '@angular/core';
+import { TemplateHeader } from '../core/types/collapse';
+
+@Component({
+  selector: 'ion-collapse',
+  templateUrl: './collapse.component.html',
+  styleUrls: ['./collapse.component.scss'],
+})
+export class IonCollapseComponent {
+  @Input() name?: string;
+  @Input() templateHeader: TemplateHeader;
+  @Input() show? = false;
+  @Input() color?: string;
+
+  toggle(): void {
+    this.show = !this.show;
+  }
+}

projects/ion/src/lib/collapse/collapse.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonCollapseComponent } from './collapse.component';
+import { IonIconModule } from '../icon/icon.module';
+
+@NgModule({
+  declarations: [IonCollapseComponent],
+  imports: [CommonModule, IonIconModule],
+  exports: [IonCollapseComponent],
+})
+export class IonCollapseModule {}

projects/ion/src/lib/core/types/collapse.ts

@@ -0,0 +1,10 @@
+import { TemplateRef } from '@angular/core';
+
+export type TemplateHeader = TemplateRef<HTMLElement> | null;
+
+export interface IonCollapseProps {
+  name?: string;
+  templateHeader?: TemplateHeader;
+  show?: boolean;
+  color?: string;
+}

projects/ion/src/lib/core/types/index.ts

@@ -30,3 +30,4 @@ export * from './tab-group';
 export * from './table';
 export * from './tag';
 export * from './tooltip';
+export * from './collapse';

projects/ion/src/public-api.ts

@@ -54,3 +54,4 @@ export * from './lib/typography/';
 export { default as debounce } from './lib/utils/debounce';
 export { default as BnTable } from './core/bn-table/bn-table';
 export * from './lib/table/utilsTable';
+export * from './lib/collapse/collapse.module';

stories/Collapse.stories.ts

@@ -0,0 +1,80 @@
+import { CommonModule } from '@angular/common';
+import { Meta, Story } from '@storybook/angular/types-6-0';
+import { IonCollapseComponent } from '../projects/ion/src/lib/collapse/collapse.component';
+import { IonIconModule } from '../projects/ion/src/lib/icon/icon.module';
+import { IonCollapseModule } from '../projects/ion/src/lib/collapse/collapse.module';
+import { IonTooltipModule } from '../projects/ion/src/lib/tooltip/tooltip.module';
+
+export default {
+  title: 'Ion/Data Display/Collapse',
+  component: IonCollapseComponent,
+} as Meta;
+
+const Template: Story<IonCollapseComponent> = (args: IonCollapseComponent) => ({
+  component: IonCollapseComponent,
+  props: args,
+  moduleMetadata: {
+    imports: [CommonModule, IonIconModule],
+  },
+});
+
+export const Collapse = Template.bind({});
+Collapse.args = {
+  name: 'Brisanet',
+  color: '#deb887',
+};
+
+const TemplateCollapseCustomColor: Story = (args) => ({
+  props: args,
+  template: `<ion-collapse name="Collapse name example" color="burlywood"><p>The main code should go here</p></ion-collapse><ion-collapse name="Collapse name example" color="red"><p>The main code should go here</p></ion-collapse>`,
+  moduleMetadata: {
+    imports: [CommonModule, IonIconModule, IonCollapseModule],
+  },
+});
+
+export const CollapseCustomCollor = TemplateCollapseCustomColor.bind({});
+
+const TemplateCollapseMainContent: Story = (args) => ({
+  props: args,
+  template: `<ion-collapse name="Collapse name example" color="burlywood"><p>The main code should go here</p></ion-collapse>`,
+  moduleMetadata: {
+    imports: [CommonModule, IonIconModule, IonCollapseModule],
+  },
+});
+
+export const CollapseMainContent = TemplateCollapseMainContent.bind({});
+
+const TemplateCollapseCustomHeader: Story = (args) => ({
+  props: args,
+  template: `
+    <ion-collapse 
+      [templateHeader]="customHeader" 
+      color="burlywood"
+    >
+      <p>Uma terminação de linha óptica, também chamada de terminal de linha óptica, é um dispositivo que serve como ponto final do provedor de serviços de uma rede óptica passiva. </p>
+    </ion-collapse>
+
+    <ng-template #customHeader>
+      <div style="display:flex; align-items:center; gap: 8px;">
+        <ion-icon type="olt"></ion-icon><b>OLT</b>
+        <ion-icon 
+          type="information" 
+          [size]=14 
+          color="#6868ff" 
+          ionTooltip
+          ionTooltipTitle="Terminação de Linha Óptica"
+          ionTooltipPosition="topCenter"
+          [ionTooltipArrowPointAtCenter]="true"
+          ionTooltipColorScheme="dark"
+          ionTooltipTrigger="hover"
+          ionTooltipShowDelay="0"
+        ></ion-icon>
+      </div>
+    </ng-template>
+  `,
+  moduleMetadata: {
+    imports: [CommonModule, IonIconModule, IonCollapseModule, IonTooltipModule],
+  },
+});
+
+export const CollapseTemplateHeader = TemplateCollapseCustomHeader.bind({});