feat(docs): add groups to components list (#646)

akveo · Aug 22, 2018 · 73cf1b4 · 73cf1b4
1 parent c8e8964
commit 73cf1b4
Show file tree

Hide file tree

Showing 7 changed files with 131 additions and 102 deletions.
diff --git a/docs/app/@theme/services/menu.service.ts b/docs/app/@theme/services/menu.service.ts
@@ -37,6 +37,7 @@ export class NgdMenuService {
           pathMatch: 'prefix',
           parent: parent,
           data: item,
+          group: item.type === 'group',
         };
         menuItem.link = this.createItemLink<NbMenuItem>(menuItem);
 

diff --git a/docs/app/@theme/styles/themes.scss b/docs/app/@theme/styles/themes.scss
@@ -39,7 +39,6 @@ $nb-themes: nb-register-theme((
   footer-height: 18.75rem,
   footer-padding: 1.25rem 0,
   menu-font-size: 0.95rem,
-  //menu-item-padding: 0.675rem 1.5rem 0.675rem 1rem,
   menu-font-weight: font-weight-normal,
   footer-fg: color-fg-text,
 ), docs-home, default);
@@ -78,7 +77,6 @@ $nb-themes: nb-register-theme((
   menu-submenu-fg: color-fg-heading-light,
   menu-active-fg: menu-fg,
   menu-submenu-padding: 0,
-  menu-submenu-item-padding: 0.375rem 0,
   menu-submenu-item-container-padding: 0 1rem,
   menu-submenu-active-border-color: transparent,
   menu-submenu-active-fg: color-fg-highlight,

diff --git a/.../app/blocks/components/components-overview-block/components-overview-block.component.html b/.../app/blocks/components/components-overview-block/components-overview-block.component.html
@@ -3,15 +3,18 @@
 </nb-card>
 
 <div class="components-list">
-  <div class="component-card-wrapper" *ngFor="let component of components">
-    <a class="component-navigate-link" [routerLink]="component.link">
-      <nb-card [attr.title]="component.name">
-        <nb-card-body>
-          <img class="component-icon" src="assets/images/components/{{ component.icon }}"
-            [attr.alt]="component.name">
-          <label class="component-name">{{ component.name }}</label>
-        </nb-card-body>
-      </nb-card>
-    </a>
-  </div>
+  <ng-container *ngFor="let component of components">
+    <h2 *ngIf="component.group">{{ component.name }}</h2>
+    <div *ngIf="!component.group" class="component-card-wrapper">
+      <a class="component-navigate-link" [routerLink]="component.link">
+        <nb-card [attr.title]="component.name">
+          <nb-card-body>
+            <img class="component-icon" src="assets/images/components/{{ component.icon }}"
+                 [attr.alt]="component.name">
+            <label class="component-name">{{ component.name }}</label>
+          </nb-card-body>
+        </nb-card>
+      </a>
+    </div>
+  </ng-container>
 </div>
diff --git a/.../app/blocks/components/components-overview-block/components-overview-block.component.scss b/.../app/blocks/components/components-overview-block/components-overview-block.component.scss
@@ -1,16 +1,18 @@
 @import '../../../@theme/styles/themes';
 
 @include nb-install-component() {
-  nb-card.header-card {
-    nb-card-header {
-      padding-bottom: 2rem;
-    }
-  }
 
   .components-list {
     display: flex;
     flex-wrap: wrap;
 
+    h2 {
+      flex: 1 1 100%;
+      color: nb-theme(color-fg-heading-light);
+      margin: 1rem 0 2rem;
+      text-align: center;
+    }
+
     .component-card-wrapper {
       width: 100%;
     }
@@ -20,7 +22,7 @@
     }
 
     .component-name {
-      color: #8994a3;
+      color: nb-theme(color-fg-heading-light);
       font-weight: nb-theme(font-weight-bolder);
     }
 

diff --git a/docs/app/blocks/components/components-overview-block/components-overview-block.component.ts b/docs/app/blocks/components/components-overview-block/components-overview-block.component.ts
@@ -18,6 +18,6 @@ export class NgdComponentsOverviewBlockComponent implements OnInit {
       .find(({ title }) => title === 'Components')
       .children
       .slice(1)
-      .map(({ data: { name, icon }, link }) => ({ name, icon, link }));
+      .map(({ data: { name, icon, type }, link }) => ({ name, icon, link, group: type === 'group' }));
   }
 }
diff --git a/docs/app/documentation/documentation.component.scss b/docs/app/documentation/documentation.component.scss
@@ -59,7 +59,7 @@
   }
 
   /deep/ nb-sidebar nb-menu {
-    > ul > li {
+    > .menu-items > .menu-item {
       margin-bottom: 0.5rem;
       font-weight: bold;
       a:hover {
@@ -69,6 +69,11 @@
         font-size: 0.875rem;
         font-weight: normal;
       }
+      li.menu-group {
+        font-weight: bold;
+        padding-top: 1.25rem;
+        padding-bottom: 1rem;
+      }
     }
 
     .menu-items .menu-item .menu-item a {

diff --git a/docs/structure.ts b/docs/structure.ts
@@ -134,6 +134,10 @@ export const structure = [
           },
         ],
       },
+      {
+        type: 'group',
+        name: 'Global',
+      },
       {
         type: 'tabs',
         name: 'Layout',
@@ -145,27 +149,6 @@ export const structure = [
           'NbLayoutFooterComponent',
         ],
       },
-      {
-        type: 'tabs',
-        name: 'Sidebar',
-        icon: 'sidebar.svg',
-        source: [
-          'NbSidebarComponent',
-          'NbSidebarHeaderComponent',
-          'NbSidebarFooterComponent',
-          'NbSidebarService',
-        ],
-      },
-      {
-        type: 'tabs',
-        name: 'Menu',
-        icon: 'menu.svg',
-        source: [
-          'NbMenuComponent',
-          'NbMenuItem',
-          'NbMenuService',
-        ],
-      },
       {
         type: 'tabs',
         name: 'Card',
@@ -199,48 +182,69 @@ export const structure = [
       },
       {
         type: 'tabs',
-        name: 'Alert',
-        icon: 'alert.svg',
+        name: 'Stepper',
+        icon: 'stepper.svg',
         source: [
-          'NbAlertComponent',
+          'NbStepperComponent',
+          'NbStepComponent',
         ],
       },
       {
         type: 'tabs',
-        name: 'Search',
-        icon: 'search.svg',
+        name: 'Accordion',
+        icon: 'accordion.svg',
         source: [
-          'NbSearchComponent',
-          'NbSearchService',
+          'NbAccordionComponent',
+          'NbAccordionItemComponent',
+          'NbAccordionItemHeaderComponent',
+          'NbAccordionItemBodyComponent',
         ],
       },
       {
         type: 'tabs',
-        name: 'Tabs',
-        icon: 'tab.svg',
+        name: 'List',
+        icon: 'list.svg',
+        source: [ 'NbListComponent', 'NbListItemComponent' ],
+      },
+      {
+        type: 'tabs',
+        name: 'Infinite List',
+        icon: 'infinite-scroll.svg',
+        source: [ 'NbInfiniteListDirective', 'NbListPageTrackerDirective' ],
+      },
+      {
+        type: 'group',
+        name: 'Navigation',
+      },
+      {
+        type: 'tabs',
+        name: 'Sidebar',
+        icon: 'sidebar.svg',
         source: [
-          'NbTabsetComponent',
-          'NbTabComponent',
-          'NbRouteTabsetComponent',
+          'NbSidebarComponent',
+          'NbSidebarHeaderComponent',
+          'NbSidebarFooterComponent',
+          'NbSidebarService',
         ],
       },
       {
         type: 'tabs',
-        name: 'Stepper',
-        icon: 'stepper.svg',
+        name: 'Menu',
+        icon: 'menu.svg',
         source: [
-          'NbStepperComponent',
-          'NbStepComponent',
+          'NbMenuComponent',
+          'NbMenuItem',
+          'NbMenuService',
         ],
       },
       {
         type: 'tabs',
-        name: 'Chat UI',
-        icon: 'chat-ui.svg',
+        name: 'Tabs',
+        icon: 'tab.svg',
         source: [
-          'NbChatComponent',
-          'NbChatMessageComponent',
-          'NbChatFormComponent',
+          'NbTabsetComponent',
+          'NbTabComponent',
+          'NbRouteTabsetComponent',
         ],
       },
       {
@@ -252,12 +256,22 @@ export const structure = [
           'NbActionComponent',
         ],
       },
+      {
+        type: 'group',
+        name: 'Forms',
+      },
       {
         type: 'tabs',
-        name: 'User (Avatar)',
-        icon: 'user.svg',
+        name: 'Input',
+        icon: 'input.svg',
+        source: [ 'NbInputDirective' ],
+      },
+      {
+        type: 'tabs',
+        name: 'Button',
+        icon: 'button.svg',
         source: [
-          'NbUserComponent',
+          'NbButtonComponent',
         ],
       },
       {
@@ -269,81 +283,87 @@ export const structure = [
         ],
       },
       {
-        type: 'tabs',
-        name: 'Button',
-        icon: 'button.svg',
-        source: [
-          'NbButtonComponent',
-        ],
+        type: 'group',
+        name: 'Modals & Overlays',
       },
       {
         type: 'tabs',
-        name: 'Spinner',
-        icon: 'spinner.svg',
+        name: 'Popover',
+        icon: 'popover.svg',
         source: [
-          'NbSpinnerDirective',
+          'NbPopoverDirective',
         ],
       },
       {
         type: 'tabs',
-        name: 'Progress Bar',
-        icon: 'progress-bar.svg',
+        name: 'Context Menu',
+        icon: 'context-menu.svg',
         source: [
-          'NbProgressBarComponent',
+          'NbContextMenuDirective',
         ],
       },
+      {
+        type: 'group',
+        name: 'Extra',
+      },
       {
         type: 'tabs',
-        name: 'Badge',
-        icon: 'badge.svg',
+        name: 'Global Search',
+        icon: 'search.svg',
         source: [
-          'NbBadgeComponent',
+          'NbSearchComponent',
+          'NbSearchService',
         ],
       },
       {
         type: 'tabs',
-        name: 'Popover',
-        icon: 'popover.svg',
+        name: 'User (Avatar)',
+        icon: 'user.svg',
         source: [
-          'NbPopoverDirective',
+          'NbUserComponent',
         ],
       },
       {
         type: 'tabs',
-        name: 'Context Menu',
-        icon: 'context-menu.svg',
+        name: 'Alert',
+        icon: 'alert.svg',
         source: [
-          'NbContextMenuDirective',
+          'NbAlertComponent',
         ],
       },
       {
         type: 'tabs',
-        name: 'Accordion',
-        icon: 'accordion.svg',
+        name: 'Spinner',
+        icon: 'spinner.svg',
         source: [
-          'NbAccordionComponent',
-          'NbAccordionItemComponent',
-          'NbAccordionItemHeaderComponent',
-          'NbAccordionItemBodyComponent',
+          'NbSpinnerDirective',
         ],
       },
       {
         type: 'tabs',
-        name: 'List',
-        icon: 'list.svg',
-        source: [ 'NbListComponent', 'NbListItemComponent' ],
+        name: 'Progress Bar',
+        icon: 'progress-bar.svg',
+        source: [
+          'NbProgressBarComponent',
+        ],
       },
       {
         type: 'tabs',
-        name: 'Infinite List',
-        icon: 'infinite-scroll.svg',
-        source: [ 'NbInfiniteListDirective', 'NbListPageTrackerDirective' ],
+        name: 'Badge',
+        icon: 'badge.svg',
+        source: [
+          'NbBadgeComponent',
+        ],
       },
       {
         type: 'tabs',
-        name: 'Input',
-        icon: 'input.svg',
-        source: [ 'NbInputDirective' ],
+        name: 'Chat UI',
+        icon: 'chat-ui.svg',
+        source: [
+          'NbChatComponent',
+          'NbChatMessageComponent',
+          'NbChatFormComponent',
+        ],
       },
       {
         type: 'tabs',