feat(theme): add Accordion component

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/structure.ts

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

e2e/accordion.e2e-spec.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();
+  });
+});

src/app/app.component.scss

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

src/app/app.component.ts

@@ -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.module.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/layout-direction-toggle/layout-direction-toggle.component.scss

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

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

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

src/app/layout-theme-toggle/layout-theme-toggle.component.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { NbThemeService } from '@nebular/theme';
+
+@Component({
+  selector: 'nb-layout-theme-toggle',
+  styleUrls: ['./layout-theme-toggle.component.scss'],
+  template: `
+    <label dir="ltr">
+      <button (click)="enable('cosmic')">Cosmic</button>
+      <button (click)="enable('default')">Default</button>
+      <button (click)="enable('corporate')">Corporate</button>
+    </label>
+  `,
+})
+export class NbLayoutThemeToggleComponent {
+  constructor(private themeService: NbThemeService) {}
+
+  enable(theme: string) {
+    this.themeService.changeTheme(theme);
+  }
+}

src/framework/theme/components/accordion/_accordion.component.theme.scss

@@ -0,0 +1,58 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@mixin nb-accordion-item-header() {
+  padding: nb-theme(accordion-padding);
+  border-bottom-width: nb-theme(accordion-header-border-width);
+  border-bottom-style: nb-theme(accordion-header-border-type);
+  border-bottom-color: nb-theme(accordion-header-border-color);
+  border-top-left-radius: nb-theme(accordion-border-radius);
+  border-top-right-radius: nb-theme(accordion-border-radius);
+  color: nb-theme(accordion-header-fg-heading);
+
+  font-family: nb-theme(accordion-header-font-family);
+  font-size: nb-theme(accordion-header-font-size);
+  font-weight: nb-theme(accordion-header-font-weight);
+
+  @include nb-headings();
+}
+
+@mixin nb-accordion-theme() {
+
+  nb-accordion {
+    nb-accordion-item-header {
+      position: relative;
+      @include nb-accordion-item-header();
+
+      i {
+        position: absolute;
+        @include nb-ltr(right, 1rem);
+        @include nb-rtl(left, 1rem);
+      }
+    }
+
+    nb-accordion-item {
+      font-family: nb-theme(accordion-item-font-family);
+      font-weight: nb-theme(accordion-item-font-weight);
+      background: nb-theme(accordion-item-bg);
+      color: nb-theme(accordion-item-fg-text);
+      box-shadow: nb-theme(accordion-item-shadow);
+
+      &.disabled nb-accordion-item-header {
+        color: nb-theme(accordion-header-disabled-fg);
+        cursor: default;
+      }
+    }
+
+    nb-accordion-item-body .item-body {
+      flex: 1;
+      -ms-flex: 1 1 auto;
+      overflow: auto;
+      padding: nb-theme(card-padding);
+      position: relative;
+    }
+  }
+}