docs: accordion has its own documentation now

src/app/accordion/accordion-examples/accordion-examples.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AccordionExamplesComponent } from './accordion-examples.component';
+
+describe('AccordionExamplesComponent', () => {
+  let component: AccordionExamplesComponent;
+  let fixture: ComponentFixture<AccordionExamplesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [AccordionExamplesComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AccordionExamplesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/accordion/accordion-examples/accordion-examples.component.tpl

@@ -0,0 +1,31 @@
+{% from "../../macro.template.njk" import sanitize as sanitize %}
+
+{% set groupHtml %}
+  {% include "../accordion-group-example/accordion-group-example.component.html" %}
+{% endset %}
+
+{% set groupTs %}
+  {% include "../accordion-group-example/accordion-group-example.component.ts" %}
+{% endset %}
+
+{% set groupNestedHtml %}
+  {% include "../accordion-nested-example/accordion-nested-example.component.html" %}
+{% endset %}
+
+{% set groupNestedTs %}
+  {% include "../accordion-nested-example/accordion-nested-example.component.ts" %}
+{% endset %}
+
+<it-accordion-group-example></it-accordion-group-example>
+
+<it-source-display
+    html="{$ sanitize(groupHtml) $}"
+    typescript="{$ sanitize(groupTs) $}" >
+</it-source-display>
+
+<it-accordion-nested-example></it-accordion-nested-example>
+
+<it-source-display
+    html="{$ sanitize(groupNestedHtml) $}"
+    typescript="{$ sanitize(groupNestedTs) $}" >
+</it-source-display>

src/app/accordion/accordion-examples/accordion-examples.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'it-accordion-examples',
+  templateUrl: './accordion-examples.component.html',
+  styleUrls: ['./accordion-examples.component.scss'],
+})
+export class AccordionExamplesComponent {
+  constructor() {}
+}

src/app/collapse/collapse-group-example/collapse-group-example.component.html → src/app/accordion/accordion-group-example/accordion-group-example.component.html

@@ -1,4 +1,4 @@
-<h3>Esempio Collapse Group con Collapse Item</h3>
+<h3>Esempio Accordion Group con Accordion Item</h3>
 <div class="bd-example">
   <div class="example-section">
     <it-accordion title="titolo" opened="true">

src/app/accordion/accordion-group-example/accordion-group-example.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AccordionGroupExampleComponent } from './accordion-group-example.component';
+
+describe('AccordionGroupExampleComponent', () => {
+  let component: AccordionGroupExampleComponent;
+  let fixture: ComponentFixture<AccordionGroupExampleComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [AccordionGroupExampleComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AccordionGroupExampleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/accordion/accordion-group-example/accordion-group-example.component.ts

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

src/app/accordion/accordion-index/accordion-index.component.html

@@ -0,0 +1,12 @@
+<h1 class="bd-title">Accordion</h1>
+<p class="bd-lead">Direttiva per l'interazione con elementi richiudibili</p>
+<div [innerHTML]="accordionComponent.description"></div>
+<it-tab-container>
+  <it-tab-item label="Esempi" active="true" class="pt-3">
+    <it-accordion-examples></it-accordion-examples>
+  </it-tab-item>
+  <it-tab-item label="API" class="pt-3">
+    <h2>Accordion</h2>
+    <it-api-parameters [component]="accordionComponent"></it-api-parameters>
+  </it-tab-item>
+</it-tab-container>

src/app/accordion/accordion-index/accordion-index.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AccordionIndexComponent } from './accordion-index.component';
+
+describe('AccordionIndexComponent', () => {
+  let component: AccordionIndexComponent;
+  let fixture: ComponentFixture<AccordionIndexComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [AccordionIndexComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AccordionIndexComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/accordion/accordion-index/accordion-index.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import Documentation from '../../../assets/documentation.json';
+
+@Component({
+  selector: 'it-accordion-index',
+  templateUrl: './accordion-index.component.html',
+  styleUrls: ['./accordion-index.component.scss'],
+})
+export class AccordionIndexComponent {
+  accordionComponent: any;
+
+  constructor() {
+    this.accordionComponent = (<any>Documentation).components.find(component => component.name === 'ItAccordionComponent');
+  }
+}

src/app/collapse/collapse-nested-example/collapse-nested-example.component.html → src/app/accordion/accordion-nested-example/accordion-nested-example.component.html

@@ -1,4 +1,4 @@
-<h3>Esempio Collapse Group con Collapse Item Innestati</h3>
+<h3>Esempio Accordion Group con Accordion Item Innestati</h3>
 <div class="bd-example">
   <div class="example-section">
     <it-accordion title="Sezione 1" opened="true">

src/app/collapse/collapse-nested-example/collapse-nested-example.component.ts → src/app/accordion/accordion-nested-example/accordion-nested-example.component.ts

@@ -1,11 +1,11 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'it-collapse-nested-example',
-  templateUrl: './collapse-nested-example.component.html',
-  styleUrls: ['./collapse-nested-example.component.scss'],
+  selector: 'it-accordion-nested-example',
+  templateUrl: './accordion-nested-example.component.html',
+  styleUrls: ['./accordion-nested-example.component.scss'],
 })
-export class CollapseNestedExampleComponent {
+export class AccordionNestedExampleComponent {
   shownComponent = '';
   hiddenComponent = '';
 

src/app/accordion/accordion-routing.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { AccordionIndexComponent } from './accordion-index/accordion-index.component';
+
+const routes: Routes = [{ path: '', component: AccordionIndexComponent }];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class AccordionRoutingModule {}

src/app/accordion/accordion.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { AccordionRoutingModule } from './accordion-routing.module';
+import { AccordionExamplesComponent } from './accordion-examples/accordion-examples.component';
+import { AccordionIndexComponent } from './accordion-index/accordion-index.component';
+import { SharedModule } from '../shared/shared.module';
+import { FormsModule } from '@angular/forms';
+import { AccordionGroupExampleComponent } from './accordion-group-example/accordion-group-example.component';
+import { AccordionNestedExampleComponent } from './accordion-nested-example/accordion-nested-example.component';
+
+@NgModule({
+  imports: [CommonModule, FormsModule, SharedModule, AccordionRoutingModule],
+  declarations: [AccordionExamplesComponent, AccordionIndexComponent, AccordionGroupExampleComponent, AccordionNestedExampleComponent],
+})
+export class AccordionModule {}

src/app/app-routing.module.ts

@@ -32,6 +32,8 @@ const routes: Routes = [
       { path: 'button', loadChildren: () => import('src/app/button/button.module').then(m => m.ButtonModule) },
       { path: 'header', loadChildren: () => import('src/app/header/header.module').then(m => m.HeaderModule) },
       { path: 'collapse', loadChildren: () => import('src/app/collapse/collapse.module').then(m => m.CollapseModule) },
+      { path: 'accordion', loadChildren: () => import('src/app/accordion/accordion.module').then(m => m.AccordionModule) },
+
       { path: 'form-input', loadChildren: () => import('src/app/form-input/form-input.module').then(m => m.FormInputModule) },
       { path: 'dropdown', loadChildren: () => import('src/app/dropdown/dropdown.module').then(m => m.DropdownModule) },
       { path: 'back-button', loadChildren: () => import('src/app/back-button/back-button.module').then(m => m.BackButtonModule) },

src/app/collapse/collapse-examples/collapse-examples.component.tpl

@@ -8,39 +8,9 @@
   {% include "../collapse-example/collapse-example.component.ts" %}
 {% endset %}
 
-{% set groupHtml %}
-  {% include "../collapse-group-example/collapse-group-example.component.html" %}
-{% endset %}
-
-{% set groupTs %}
-  {% include "../collapse-group-example/collapse-group-example.component.ts" %}
-{% endset %}
-
-{% set groupNestedHtml %}
-  {% include "../collapse-nested-example/collapse-nested-example.component.html" %}
-{% endset %}
-
-{% set groupNestedTs %}
-  {% include "../collapse-nested-example/collapse-nested-example.component.ts" %}
-{% endset %}
-
 <it-collapse-example></it-collapse-example>
 
 <it-source-display
     html="{$ sanitize(html) $}"
     typescript="{$ sanitize(typescript) $}" >
 </it-source-display>
-
-<it-collapse-group-example></it-collapse-group-example>
-
-<it-source-display
-    html="{$ sanitize(groupHtml) $}"
-    typescript="{$ sanitize(groupTs) $}" >
-</it-source-display>
-
-<it-collapse-nested-example></it-collapse-nested-example>
-
-<it-source-display
-    html="{$ sanitize(groupNestedHtml) $}"
-    typescript="{$ sanitize(groupNestedTs) $}" >
-</it-source-display>

src/app/collapse/collapse-index/collapse-index.component.html

@@ -8,7 +8,5 @@ <h1 class="bd-title">Collapse</h1>
   <it-tab-item label="API" class="pt-3">
     <h2>Collapse</h2>
     <it-api-parameters [component]="collapseComponent"></it-api-parameters>
-    <h2>Accordion</h2>
-    <it-api-parameters [component]="accordionComponent"></it-api-parameters>
   </it-tab-item>
 </it-tab-container>

src/app/collapse/collapse-index/collapse-index.component.ts

@@ -8,10 +8,8 @@ import Documentation from '../../../assets/documentation.json';
 })
 export class CollapseIndexComponent {
   collapseComponent: any;
-  accordionComponent: any;
 
   constructor() {
     this.collapseComponent = (<any>Documentation).components.find(component => component.name === 'ItCollapseComponent');
-    this.accordionComponent = (<any>Documentation).components.find(component => component.name === 'ItAccordionComponent');
   }
 }

src/app/collapse/collapse.module.ts

@@ -7,17 +7,9 @@ import { CollapseExamplesComponent } from './collapse-examples/collapse-examples
 import { CollapseIndexComponent } from './collapse-index/collapse-index.component';
 import { SharedModule } from '../shared/shared.module';
 import { FormsModule } from '@angular/forms';
-import { CollapseGroupExampleComponent } from './collapse-group-example/collapse-group-example.component';
-import { CollapseNestedExampleComponent } from './collapse-nested-example/collapse-nested-example.component';
 
 @NgModule({
   imports: [CommonModule, FormsModule, SharedModule, CollapseRoutingModule],
-  declarations: [
-    CollapseExampleComponent,
-    CollapseExamplesComponent,
-    CollapseIndexComponent,
-    CollapseGroupExampleComponent,
-    CollapseNestedExampleComponent,
-  ],
+  declarations: [CollapseIndexComponent, CollapseExampleComponent, CollapseExamplesComponent],
 })
 export class CollapseModule {}

src/assets/table-of-content.json

@@ -11,6 +11,10 @@
       "label": "Componenti",
       "link": "/componenti",
       "links": [
+        {
+          "label": "Accordion",
+          "link": "/componenti/accordion"
+        },
         {
           "label": "Avatar",
           "link": "/componenti/avatar"