feat(docs): add tabs to docs

docs/app/app.module.ts

@@ -14,6 +14,7 @@ import {
   NbCardModule,
   NbLayoutModule,
   NbMenuModule,
+  NbTabsetModule,
 } from '@nebular/theme';
 import { NgdAppComponent } from './app.component';
 import { routes } from './app.routes';
@@ -28,6 +29,7 @@ import { NgdPropsBlockComponent } from './docs/page/blocks/basic-blocks/ngd-prop
 import { NgdMethodsBlockComponent } from './docs/page/blocks/basic-blocks/ngd-methods-block.component';
 import { NgdDescriptionDirective } from './docs/utils/ngd-description.directive';
 import { NgdBlockComponent } from './docs/page/blocks/ngd-block.component';
+import { NgdTabbedBlockComponent } from './docs/page/blocks/tabbed-block/ngd-tabbed-block.component';
 
 import { NgdHighlighterComponent } from './docs/utils/code-highlighter.component';
 import { NgdHeaderComponent } from './components/header/ngd-header.component';
@@ -39,6 +41,7 @@ import { NgdThemeComponent } from './docs/page/blocks/ngd-theme-block.component'
 import { NgdSassPropValueDirective } from './docs/utils/ngd-color-swatch.directive';
 import { SwiperModule } from 'angular2-useful-swiper';
 import { Analytics } from './docs/utils/analytics.service';
+import { BlockHelperService } from './docs/utils/block-helper.service';
 
 @NgModule({
   imports: [
@@ -50,6 +53,7 @@ import { Analytics } from './docs/utils/analytics.service';
     NbCardModule,
     SwiperModule,
     NbLayoutModule,
+    NbTabsetModule,
     NbMenuModule.forRoot(),
     NbThemeModule.forRoot({ name: 'default' }),
     NbSidebarModule.forRoot(),
@@ -74,9 +78,11 @@ import { Analytics } from './docs/utils/analytics.service';
     NgdFragmentDirective,
     NgdThemeComponent,
     NgdBlockComponent,
+    NgdTabbedBlockComponent,
     NgdSassPropValueDirective,
   ],
   providers: [
+    BlockHelperService,
     DocsService,
     Analytics,
     Title,

docs/app/docs/docs.service.ts

@@ -17,6 +17,7 @@ const PARSEDDOCS: any = require('../../output.json');
 export class DocsService {
 
   private fragments$ = new Subject<string>();
+  private preparedStructure = this.prepareStructure(this.getStructure(), this.getParsedDocs());
 
   getStructure(): any {
     return STRUCTURE;
@@ -31,7 +32,7 @@ export class DocsService {
   }
 
   getPreparedStructure(): any {
-    return this.prepareStructure(this.getStructure(), this.getParsedDocs());
+    return this.preparedStructure;
   }
 
   emitFragment(fragment: string): void {
@@ -72,6 +73,10 @@ export class DocsService {
         }
       }
 
+      if (item.block === 'tabbed' && typeof item.source === 'object' && item.source.length > 0) {
+        item.source = item.source.map(source => preparedDocs.classes.find((data) => data.name === source));
+      }
+
       if (item.children) {
         item.children = this.prepareStructure(item.children, preparedDocs);
       }

docs/app/docs/page/blocks/basic-blocks/ngd-styles-block.component.ts

@@ -11,9 +11,6 @@ import { DocsService } from '../../../docs.service';
   selector: 'ngd-styles-block',
   template: `
     <div class="block-container" *ngFor="let style of classStyles">
-      <p class="block-title"><a [routerLink]="" fragment="{{className}}Styles" ngdFragment></a>
-        Component themable styles
-      </p>
       <div class="table-container">
         <table class="table table-striped">
           <thead>

docs/app/docs/page/blocks/ngd-block.component.ts

@@ -6,6 +6,7 @@ import { Component, Input } from '@angular/core';
     <ng-container [ngSwitch]="block.block">
       <ngd-markdown-block *ngSwitchCase="'markdown'" [source]="block.source"></ngd-markdown-block>
       <ngd-component-block *ngSwitchCase="'component'" [source]="block.source"></ngd-component-block>
+      <ngd-tabbed-block *ngSwitchCase="'tabbed'" [source]="block.source"></ngd-tabbed-block>
       <ngd-theme-block *ngSwitchCase="'theme'" [block]="block"></ngd-theme-block>
     </ng-container>
   `,

docs/app/docs/page/blocks/ngd-component-block.component.ts

@@ -1,49 +1,25 @@
 import { Component, Input } from '@angular/core';
+import { BlockHelperService } from '../../utils/block-helper.service';
 
 @Component({
   selector: 'ngd-component-block',
   template: `
-    <ngd-description-block *ngIf="hasDescription" [source]="source"></ngd-description-block>
-    <ngd-examples-block *ngIf="hasExamples" [source]="source"></ngd-examples-block>
-    <ngd-props-block *ngIf="hasProps" [source]="source"></ngd-props-block>
-    <ngd-methods-block *ngIf="hasMethods" [source]="source"></ngd-methods-block>
-    <ngd-styles-block *ngIf="hasStyles" [source]="source"></ngd-styles-block>
+    <ngd-description-block *ngIf="blockHelper.hasDescription(source)" [source]="source">
+    </ngd-description-block>
+    <ngd-examples-block *ngIf="blockHelper.hasExamples(source)" [source]="source">
+    </ngd-examples-block>
+    <ngd-props-block *ngIf="blockHelper.hasProps(source)" [source]="source">
+    </ngd-props-block>
+    <ngd-methods-block *ngIf="blockHelper.hasMethods(source)" [source]="source">
+    </ngd-methods-block>
+    <ngd-styles-block *ngIf="blockHelper.hasTheme(source)" [source]="source">
+    </ngd-styles-block>
   `,
 })
 export class NgdComponentBlockComponent {
 
   @Input() source: any;
 
-  get hasDescription(): boolean {
-    return this.source && (
-      this.source.name ||
-      this.source.shortDescription ||
-      this.source.description
-    );
-  }
-
-  get hasExamples(): boolean {
-    return this.source &&
-      this.source.examples &&
-      this.source.examples.length > 0;
-  }
-
-  get hasProps(): boolean {
-    return this.source &&
-      this.source.props &&
-      this.source.props.length > 0;
-  }
-
-  get hasMethods(): boolean {
-    return this.source &&
-      this.source.methods &&
-      this.source.methods.length > 0 &&
-      this.source.methods.some(method => method.shortDescription || method.description);
-  }
-
-  get hasStyles(): boolean {
-    return this.source &&
-      this.source.styles &&
-      this.source.styles.length > 0;
+  constructor(public blockHelper: BlockHelperService) {
   }
 }

docs/app/docs/page/blocks/tabbed-block/ngd-tabbed-block.component.html

@@ -0,0 +1,33 @@
+<nb-tabset>
+
+  <nb-tab tabTitle="Overview" *ngIf="hasOverview">
+    <ng-container *ngFor="let component of source">
+      <ngd-description-block [source]="component" *ngIf="blockHelper.hasDescription(component)">
+      </ngd-description-block>
+      <ngd-examples-block [source]="component" *ngIf="blockHelper.hasExamples(component)">
+      </ngd-examples-block>
+    </ng-container>
+  </nb-tab>
+
+  <nb-tab tabTitle="Theme" *ngIf="hasTheme">
+    <ng-container *ngFor="let component of source">
+      <ng-container *ngIf="blockHelper.hasTheme(component)">
+        <h2 class="class-name">{{component.name}}</h2>
+        <ngd-styles-block [source]="component"></ngd-styles-block>
+      </ng-container>
+    </ng-container>
+  </nb-tab>
+
+  <nb-tab tabTitle="API" *ngIf="hasAPI">
+    <ng-container *ngFor="let component of source">
+      <ng-container *ngIf="blockHelper.hasProps(component) || blockHelper.hasMethods(component)">
+        <h2 class="class-name">
+          {{component.name}}
+        </h2>
+        <ngd-props-block [source]="component" *ngIf="blockHelper.hasProps(component)"></ngd-props-block>
+        <ngd-methods-block [source]="component" *ngIf="blockHelper.hasMethods(component)"></ngd-methods-block>
+      </ng-container>
+    </ng-container>
+  </nb-tab>
+
+</nb-tabset>

docs/app/docs/page/blocks/tabbed-block/ngd-tabbed-block.component.scss

@@ -0,0 +1,9 @@
+@import '../../../../styles/themes';
+
+@include nb-install-component {
+
+  /deep/ nb-tabset > ul {
+    padding: 0 0 1.5rem;
+    border-bottom: 0;
+  }
+}

docs/app/docs/page/blocks/tabbed-block/ngd-tabbed-block.component.ts

@@ -0,0 +1,33 @@
+import { Component, Input } from '@angular/core';
+import { BlockHelperService } from '../../../utils/block-helper.service';
+
+@Component({
+  selector: 'ngd-tabbed-block',
+  styleUrls: ['./ngd-tabbed-block.component.scss'],
+  templateUrl: './ngd-tabbed-block.component.html',
+})
+export class NgdTabbedBlockComponent {
+
+  @Input() source = [];
+
+  constructor(public blockHelper: BlockHelperService) {
+  }
+
+  get hasOverview(): boolean {
+    return this.source.some(source => {
+      return this.blockHelper.hasDescription(source) || this.blockHelper.hasExamples(source);
+    })
+  }
+
+  get hasTheme(): boolean {
+    return this.source.some(source => {
+      return this.blockHelper.hasTheme(source);
+    })
+  }
+
+  get hasAPI(): boolean {
+    return this.source.some(source => {
+      return this.blockHelper.hasMethods(source) || this.blockHelper.hasProps(source);
+    })
+  }
+}

docs/app/docs/utils/block-helper.service.ts

@@ -0,0 +1,38 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class BlockHelperService {
+
+  hasDescription(component): boolean {
+    return component && (
+      component.name ||
+      component.shortDescription ||
+      component.description
+    );
+  }
+
+  hasExamples(component): boolean {
+    return component &&
+      component.examples &&
+      component.examples.length > 0;
+  }
+
+  hasTheme(component): boolean {
+    return component.styles &&
+      component.styles.length > 0;
+  }
+
+  hasProps(component): boolean {
+    return component &&
+      component.props &&
+      component.props.length > 0 &&
+      component.props.some(prop => prop.kind === 'input' || prop.kind === 'output');
+  }
+
+  hasMethods(component): boolean {
+    return component &&
+      component.methods &&
+      component.methods.length > 0 &&
+      component.methods.some(method => method.shortDescription || method.description);
+  }
+}

docs/app/styles/_themes.scss

@@ -110,5 +110,8 @@ $nb-themes: nb-register-theme((
   landing-highlight: #42db7d,
   landing-primary: #8a7fff,
   landing-bg: #13113b,
+
+  tabs-font-size: 1.25rem,
+  tabs-active-font-weight: font-weight-normal
 ), default, default);