chore: added left sidebar data

positive-js · Aug 6, 2019 · 3120693 · 3120693
1 parent ee4a97e
commit 3120693
Show file tree

Hide file tree

Showing 6 changed files with 116 additions and 30 deletions.
diff --git a/packages/docs/src/app/components/sidenav/sidenav.component.html b/packages/docs/src/app/components/sidenav/sidenav.component.html
@@ -1,24 +1,13 @@
 <nav class="main__nav nav">
-
-    <ul class="nav__wrapper">
-        <li class="nav__item nav__item--active">
-            <a href="index.html">
-                <i class="nav__icon"></i> Typography
-            </a>
-        </li>
-
-        <li class="nav__item nav__item--has-child">
-            <a href="#">
-                <i class="nav__icon"></i> Elements
-                <i class="nav__arrow"></i>
-            </a>
-
-            <ul class="nav__wrapper nav__wrapper--child">
-                <li class="nav__item--child"><a href="typography.html">Typography</a></li>
-                <li class="nav__item--child"><a href="cards.html">Cards</a></li>
-                <li class="nav__item--child"><a href="buttons.html">Buttons</a></li>
-                <li class="nav__item--child"><a href="alert.html">Alert</a></li>
-            </ul>
-        </li>
-    </ul>
+    <div *ngFor="let category of categories;">
+        <button cdkAccordionItem
+            #panel="cdkAccordionItem" (click)="panel.toggle()" expanded="true">
+            {{category.name}}
+        </button>
+        <ul class="nav__wrapper" >
+            <li *ngFor="let component of category.items">
+                {{component.name}}
+            </li>
+        </ul>
+    </div>
 </nav>
diff --git a/packages/docs/src/app/components/sidenav/sidenav.component.ts b/packages/docs/src/app/components/sidenav/sidenav.component.ts
@@ -1,5 +1,7 @@
-import { ViewEncapsulation } from '@schematics/angular/component/schema';
 import { Component } from '@angular/core';
+import { ViewEncapsulation } from '@schematics/angular/component/schema';
+
+import { DocumentationItems } from '../../shared/documentation-items/documentation-items';
 
 
 @Component({
@@ -10,4 +12,9 @@ import { Component } from '@angular/core';
 })
 export class ComponentSidenav {
 
+    categories: any;
+
+    constructor(public docItems: DocumentationItems) {
+        this.categories = docItems.getCategories('components');
+    }
 }
diff --git a/packages/docs/src/app/shared/documentation-items/documentation-items.ts b/packages/docs/src/app/shared/documentation-items/documentation-items.ts
@@ -19,29 +19,102 @@ export interface DocCategory {
 
 
 const COMPONENTS = 'components';
-
+const CDK = 'cdk';
 
 const DOCS: { [key: string]: DocCategory[] } = {
     [COMPONENTS]: [
+        {
+            id: 'indicators',
+            name: 'Indicators',
+            summary: '',
+            items: [
+                {
+                    id: 'alerts',
+                    name: 'Alerts',
+                    summary: '',
+                    examples: ['alerts-types']
+                },
+                {
+                    id: 'badges',
+                    name: 'Badges',
+                    summary: '',
+                    examples: ['badges-types']
+                }
+            ]
+        },
         {
             id: 'forms',
             name: 'Form Controls',
             summary: 'Controls that collect and validate user input.',
             items: [
+                {
+                    id: 'checkbox',
+                    name: 'Checkbox',
+                    summary: '',
+                    examples: ['checkbox-types']
+                },
+                {
+                    id: 'datepicker',
+                    name: 'Datepicker',
+                    summary: '',
+                    examples: ['datepicker-types']
+                },
+                {
+                    id: 'dropdown',
+                    name: 'Dropdown',
+                    summary: '',
+                    examples: ['dropdown-types']
+                },
+                {
+                    id: 'input',
+                    name: 'Input',
+                    summary: '',
+                    examples: ['input-types']
+                },
+                {
+                    id: 'radio',
+                    name: 'Radio',
+                    summary: '',
+                    examples: ['radio-types']
+                }
             ]
         },
         {
             id: 'nav',
             name: 'Navigation',
             summary: 'Menus, toolbars that organise your content.',
             items: [
+                {
+                    id: 'link',
+                    name: 'Link',
+                    summary: '',
+                    examples: ['link-types']
+                },
+                {
+                    id: 'navbar',
+                    name: 'Navbar',
+                    summary: '',
+                    examples: ['navbar-types']
+                }
             ]
         },
         {
             id: 'layout',
             name: 'Layout',
             summary: '',
             items: [
+                {
+                    id: 'card',
+                    name: 'Card',
+                    summary: '',
+                    examples: ['card-types']
+                },
+                {
+                    id: 'splitter',
+                    name: 'Splitter',
+                    summary: '',
+                    examples: ['splitter-types']
+                }
             ]
         },
         {
@@ -71,6 +144,9 @@ const DOCS: { [key: string]: DocCategory[] } = {
             items: [
             ]
         }
+    ],
+    [CDK]: [
+
     ]
 };
 
@@ -80,10 +156,16 @@ for (const category of DOCS[COMPONENTS]) {
     }
 }
 
-const ALL_COMPONENTS = DOCS[COMPONENTS].reduce(
-    (result, category) => result.concat(category.items), []);
-const ALL_DOCS = ALL_COMPONENTS;
-const ALL_CATEGORIES = DOCS[COMPONENTS];
+for (const category of DOCS[CDK]) {
+    for (const doc of category.items) {
+        doc.packageName = 'cdk';
+    }
+}
+
+const ALL_COMPONENTS = DOCS[COMPONENTS].reduce((result, category) => result.concat(category.items), []);
+const ALL_CDK = DOCS[CDK].reduce((result, cdk) => result.concat(cdk.items), []);
+const ALL_DOCS = ALL_COMPONENTS.concat(ALL_CDK);
+const ALL_CATEGORIES = DOCS[COMPONENTS].concat(DOCS[CDK]);
 
 @Injectable()
 export class DocumentationItems {
@@ -95,6 +177,9 @@ export class DocumentationItems {
         if (section === COMPONENTS) {
             return ALL_COMPONENTS;
         }
+        if (section === CDK) {
+            return ALL_CDK;
+        }
 
         return [];
     }

diff --git a/packages/docs/src/app/shared/example-viewer/example-viewer.scss b/packages/docs/src/app/shared/example-viewer/example-viewer.scss
@@ -27,14 +27,18 @@
     display: none;
 }
 
+.docs-example-source-wrapper {
+    background-color: #eaedf1;
+}
+
 .docs-example-source-wrapper:hover {
     .docs-example-source-copy {
         display: inline-block;
     }
 }
 
 .docs-example-source {
-    padding: 0 30px 10px 30px;
+    padding: 10px 30px 10px 30px;
     min-height: 150px;
 }
 

diff --git a/packages/docs/src/assets/stackblitz.svg b/packages/docs/src/assets/stackblitz.svg
diff --git a/packages/docs/src/styles/_markdown.scss b/packages/docs/src/styles/_markdown.scss
@@ -42,7 +42,7 @@
     pre {
         border-radius: 5px;
         display: flex;
-        margin: 16px auto;
+        margin: 0 auto;
         overflow-x: auto;
         padding: 20px;
         white-space: pre-wrap;