863 feat accordion group

projects/ion/src/lib/accordion-group/accordion-group.component.html

@@ -0,0 +1,3 @@
+<section data-testId="ion-accordion-group">
+  <ng-content></ng-content>
+</section>

projects/ion/src/lib/accordion-group/accordion-group.component.scss

@@ -0,0 +1,37 @@
+@import '../../styles/index.scss';
+
+section {
+  ::ng-deep ion-accordion:first-child {
+    section {
+      header {
+        border-radius: 8px 8px 0 0;
+      }
+    }
+  }
+
+  ::ng-deep ion-accordion {
+    section.open {
+      main {
+        border-bottom: 1px solid $neutral-4;
+      }
+    }
+  }
+
+  ::ng-deep ion-accordion:last-child {
+    section {
+      header {
+        border-radius: 0 0 8px 8px;
+      }
+    }
+
+    section.open {
+      header {
+        border-radius: 0;
+      }
+
+      main {
+        border-radius: 0 0 8px 8px;
+      }
+    }
+  }
+}

projects/ion/src/lib/accordion-group/accordion-group.component.spec.ts

@@ -0,0 +1,47 @@
+import { Component, NgModule } from '@angular/core';
+import { IonAccordionModule } from '../accordion/accordion.module';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { screen } from '@testing-library/angular';
+
+@Component({
+  template: `<ion-accordion-group>
+    <ion-accordion name="Brisanet">
+      <p data-testID="ion-accordion__main-paragraph">Context Main</p>
+    </ion-accordion>
+  </ion-accordion-group>`,
+})
+class AccordionGroupTestComponent {
+  name = 'Name';
+}
+
+@NgModule({
+  declarations: [AccordionGroupTestComponent],
+  imports: [IonAccordionModule],
+})
+class AccordionTestModule {}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+let accordionTestComponent!: AccordionGroupTestComponent;
+let fixture!: ComponentFixture<AccordionGroupTestComponent>;
+beforeEach(async () => {
+  TestBed.configureTestingModule({
+    imports: [AccordionTestModule],
+  }).compileComponents();
+  fixture = TestBed.createComponent(AccordionGroupTestComponent);
+  accordionTestComponent = fixture.componentInstance;
+  fixture.detectChanges();
+});
+
+afterEach(async () => {
+  fixture.destroy();
+});
+describe('IonAccordionGroup', () => {
+  it('should render ion-accordion-group', () => {
+    expect(screen.getByTestId('ion-accordion-group')).toBeTruthy();
+  });
+
+  it('should render ion-accordion with name Brisanet', () => {
+    expect(screen.getByTestId('ion-accordion__header-name')).toHaveTextContent(
+      'Brisanet'
+    );
+  });
+});

projects/ion/src/lib/accordion-group/accordion-group.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ion-accordion-group',
+  templateUrl: 'accordion-group.component.html',
+  styleUrls: ['accordion-group.component.scss'],
+})
+export class IonAccordionGroupComponent {}

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

@@ -9,7 +9,7 @@ import { IonAccordionComponent } from './accordion.component';
 
 @Component({
   template: `<ion-accordion [name]="name">
-    <p data-testID="ion-accordion__main-paragraph">Context Main</p>
+    <p data-testId="ion-accordion__main-paragraph">Context Main</p>
   </ion-accordion>`,
 })
 class AccordionTestComponent {
@@ -18,7 +18,7 @@ class AccordionTestComponent {
 
 @Component({
   template: `<ion-accordion [templateHeader]="customHeader">
-      <p data-testID="ion-accordion__main-paragraph">Context Main</p>
+      <p data-testId="ion-accordion__main-paragraph">Context Main</p>
     </ion-accordion>
     <ng-template #customHeader>
       <div data-testId="ion-accordion__header-custom">

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

@@ -2,10 +2,11 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { IonAccordionComponent } from './accordion.component';
 import { IonIconModule } from '../icon/icon.module';
+import { IonAccordionGroupComponent } from '../accordion-group/accordion-group.component';
 
 @NgModule({
-  declarations: [IonAccordionComponent],
+  declarations: [IonAccordionComponent, IonAccordionGroupComponent],
   imports: [CommonModule, IonIconModule],
-  exports: [IonAccordionComponent],
+  exports: [IonAccordionComponent, IonAccordionGroupComponent],
 })
 export class IonAccordionModule {}

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

@@ -46,6 +46,7 @@ import { PipesModule } from './utils/pipes/pipes.module';
 import { IonSkeletonModule } from './skeleton/skeleton.module';
 import { IonSelectModule } from './select/select.module';
 import { IonNoDataModule } from './no-data/no-data.module';
+import { IonAccordionModule } from './accordion/accordion.module';
 
 @NgModule({
   declarations: [IonComponent],
@@ -95,6 +96,7 @@ import { IonNoDataModule } from './no-data/no-data.module';
     IonSelectModule,
     IonStepsModule,
     IonNoDataModule,
+    IonAccordionModule,
   ],
   exports: [
     IonComponent,
@@ -141,6 +143,7 @@ import { IonNoDataModule } from './no-data/no-data.module';
     IonSelectModule,
     IonStepsModule,
     IonNoDataModule,
+    IonAccordionModule,
   ],
 })
 export class IonModule {}

stories/Accordion.stories.ts

@@ -59,3 +59,19 @@ const TemplateAccordionCustomHeader: Story = (args) => ({
 });
 
 export const AccordionCustomHeader = TemplateAccordionCustomHeader.bind({});
+
+const TemplateAccordionGroup: Story = (args) => ({
+  props: args,
+  template: `
+  <ion-accordion-group>
+    <ion-accordion [name]="'Accrodion ' + item" *ngFor="let item of [1, 2, 3, 4]">
+      Conteúdo do Accordion {{ item }}
+    </ion-accordion>
+  </ion-accordion-group>
+  `,
+  moduleMetadata: {
+    imports: [CommonModule, IonAccordionModule],
+  },
+});
+
+export const AccordionGroup = TemplateAccordionGroup.bind({});