feat(theme): add Accordion component

Author: nnixaa

DEV_DOCS.md

@@ -245,7 +245,6 @@ For example, if you wanna add getting started article you have to do the followi
 
 ### Component block
 
-
 If you have to render all the information about componend parsed with typedoc
 you have to use component blocks:
 

docs/app/app.module.ts

@@ -4,11 +4,11 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 import { BrowserModule, Title } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 import { RouterModule } from '@angular/router';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import {
   NbThemeModule,
   NbSidebarModule,

docs/assets/images/components/accordion.svg

@@ -298,6 +298,17 @@ export const structure = [
           'NbContextMenuDirective',
         ],
       },
+      {
+        type: 'tabs',
+        name: 'Accordion',
+        icon: 'accordion.svg',
+        source: [
+          'NbAccordionComponent',
+          'NbAccordionItemComponent',
+          'NbAccordionItemHeaderComponent',
+          'NbAccordionItemBodyComponent',
+        ],
+      },
       // {
       //   type: 'tabs',
       //   name: 'Chips',

docs/structure.ts

@@ -0,0 +1,103 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { browser, element, by } from 'protractor';
+
+import { hasClass } from './e2e-helper';
+
+describe('accordion', () => {
+  beforeEach(done => {
+    browser.get('#/accordion/accordion-test.component').then(() => done());
+  });
+
+  it('should display the 4 accordion items', () => {
+    expect(element.all(by.css('nb-accordion > nb-accordion-item')).count()).toEqual(4);
+
+    expect(
+      element(
+        by.css('nb-accordion > nb-accordion-item:nth-child(1) > nb-accordion-item-header'),
+      ).getText(),
+    ).toEqual('Accordion #1', 'fist item title');
+
+    expect(
+      element(
+        by.css('nb-accordion > nb-accordion-item:nth-child(2) > nb-accordion-item-header'),
+      ).getText(),
+    ).toEqual('Accordion #2', 'second item title');
+
+    expect(
+      hasClass(element(by.css('nb-accordion > nb-accordion-item:nth-child(2)')), 'collapsed'),
+    ).toBeTruthy('second is collapsed');
+
+    expect(
+      element(
+        by.css('nb-accordion > nb-accordion-item:nth-child(3) > nb-accordion-item-header'),
+      ).getText(),
+    ).toEqual('Accordion #3', 'third item title');
+
+    expect(
+      hasClass(element(by.css('nb-accordion > nb-accordion-item:nth-child(3)')), 'expanded'),
+    ).toBeTruthy('second is expanded');
+  });
+
+  it('should expand a first accordion-item', () => {
+    element(by.css('nb-accordion > nb-accordion-item:nth-child(1)')).click();
+
+    expect(
+      hasClass(element(by.css('nb-accordion > nb-accordion-item:nth-child(1)')), 'expanded'),
+    ).toBeTruthy();
+
+    expect(
+      hasClass(element(by.css('nb-accordion > nb-accordion-item:nth-child(3)')), 'collapsed'),
+    ).toBeTruthy();
+
+    expect(
+      element(by.css('nb-accordion > nb-accordion-item:nth-child(1) > nb-accordion-item-header')).getAttribute(
+        'aria-expanded',
+      ),
+    ).toEqual('true');
+  });
+
+  it('should display the tabbable accordion items', () => {
+    expect(
+      element(by.css('nb-accordion > nb-accordion-item:nth-child(1) > nb-accordion-item-header')).getAttribute(
+        'tabindex',
+      ),
+    ).toEqual('0');
+
+    expect(
+      element(by.css('nb-accordion > nb-accordion-item:nth-child(2) > nb-accordion-item-header')).getAttribute(
+        'tabindex',
+      ),
+    ).toEqual('0');
+
+    expect(
+      element(by.css('nb-accordion > nb-accordion-item:nth-child(4) > nb-accordion-item-header')).getAttribute(
+        'tabindex',
+      ),
+    ).toEqual('-1');
+  });
+
+  it('should display a disabled accordion item', () => {
+    expect(
+      element(by.css('nb-accordion > nb-accordion-item:nth-child(4) > nb-accordion-item-header')).getAttribute(
+        'aria-disabled',
+      ),
+    ).toEqual('true');
+
+    expect(
+      hasClass(element(by.css('nb-accordion > nb-accordion-item:nth-child(4)')), 'disabled'),
+    ).toBeTruthy();
+  });
+
+  it('should display a disabled accordion with collapsed state after click', () => {
+    element(by.css('nb-accordion > nb-accordion-item:nth-child(4)')).click();
+
+    expect(
+      hasClass(element(by.css('nb-accordion > nb-accordion-item:nth-child(4)')), 'collapsed'),
+    ).toBeTruthy();
+  });
+});

e2e/accordion.e2e-spec.ts

@@ -0,0 +1,3 @@
+.framework-options-bar {
+  display: flex;
+}

src/app/app.component.scss

@@ -8,10 +8,13 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'nb-app-root',
+  styleUrls: ['./app.component.scss'],
   template: `
-    <nb-layout-direction-toggle></nb-layout-direction-toggle>
+    <div class="framework-options-bar" dir="ltr">
+      <nb-layout-direction-toggle></nb-layout-direction-toggle>
+      <nb-layout-theme-toggle></nb-layout-theme-toggle>
+    </div>
     <router-outlet></router-outlet>
   `,
 })
-export class NbAppComponent {
-}
+export class NbAppComponent {}

src/app/app.component.ts

@@ -16,7 +16,7 @@ import { NbAppComponent } from './app.component';
 import { NbLayoutDirectionToggleComponent } from './layout-direction-toggle/layout-direction-toggle.component';
 import { NbDynamicToAddComponent } from '../playground/shared/dynamic.component';
 import { NbPlaygroundSharedModule } from '../playground/shared/shared.module';
-
+import { NbLayoutThemeToggleComponent } from './layout-theme-toggle/layout-theme-toggle.component';
 
 @NgModule({
   imports: [
@@ -36,6 +36,7 @@ import { NbPlaygroundSharedModule } from '../playground/shared/shared.module';
   declarations: [
     NbAppComponent,
     NbLayoutDirectionToggleComponent,
+    NbLayoutThemeToggleComponent,
   ],
   entryComponents: [
     NbDynamicToAddComponent,

src/app/app.module.ts

@@ -2,6 +2,10 @@
   display: block;
   padding: 0.5em;
 
+  input {
+    margin-right: 0.25rem;
+  }
+
   label {
     margin: 0;
   }

src/app/layout-direction-toggle/layout-direction-toggle.component.scss

@@ -0,0 +1,13 @@
+:host {
+  display: block;
+  padding: 0.5em;
+
+  button {
+    margin-right: 0.25rem;
+  }
+
+  label {
+    margin: 0;
+  }
+
+}