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',