feat(docs): added examples for list and tree (#UIM-261, #UIM-270) (#352)

positive-js · Nov 28, 2019 · 22c19db · 22c19db
1 parent 8cd752b
commit 22c19db
Show file tree

Hide file tree

Showing 29 changed files with 942 additions and 96 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -72,6 +72,8 @@ jobs:
                       echo 'export SHORT_GIT_HASH=$(git rev-parse --short $CIRCLE_SHA1)' >> $BASH_ENV
                       echo 'export CIRCLE_PULL_REQUEST_NUMBER=$(echo "$CIRCLE_PULL_REQUEST" | cut -d"/" -f7)' >> $BASH_ENV
                       source $BASH_ENV
+            - run: echo "$CIRCLE_PULL_REQUEST" | cut -d"/" -f7 && echo $CIRCLE_PULL_REQUEST_NUMBER
+            - run: printenv
             - run: yarn run build:docs
             - run: yarn run build:mosaic-examples
             - run: yarn run docs:prod-build --progress false --base-href /mosaic-previews/pr$CIRCLE_PULL_REQUEST_NUMBER-$SHORT_GIT_HASH/ --output-path dist/releases/mosaic-docs/pr$CIRCLE_PULL_REQUEST_NUMBER-$SHORT_GIT_HASH/
@@ -160,6 +162,7 @@ jobs:
                     echo 'export SHORT_GIT_HASH=$(git rev-parse --short $CIRCLE_SHA1)' >> $BASH_ENV
                     echo 'export CIRCLE_PULL_REQUEST_NUMBER=$(echo "$CIRCLE_PULL_REQUEST" | cut -d"/" -f7)' >> $BASH_ENV
                     source $BASH_ENV
+            - run: printenv
             - run: yarn run build:docs
             - run: yarn run docs:publish-preview
 

diff --git a/packages/docs/src/app/shared/documentation-items/documentation-items.ts b/packages/docs/src/app/shared/documentation-items/documentation-items.ts
@@ -178,6 +178,25 @@ const DOCS: { [key: string]: DocCategory[] } = {
                     examples: ['typography-types']
                 }
             ]
+        },
+        {
+            id: 'core/styles',
+            name: 'Data list',
+            summary: 'styles',
+            items: [
+                {
+                    id: 'list',
+                    name: 'List',
+                    summary: '',
+                    examples: ['list-types']
+                },
+                {
+                    id: 'tree',
+                    name: 'Tree',
+                    summary: '',
+                    examples: ['tree-types']
+                }
+            ]
         }
     ],
     [CDK]: [

diff --git a/packages/docs/src/assets/stackblitz/mosaic-module.ts b/packages/docs/src/assets/stackblitz/mosaic-module.ts
@@ -1,14 +1,19 @@
 import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { CdkTreeModule } from '@ptsecurity/cdk/tree';
 import { McMomentDateModule } from '@ptsecurity/mosaic-moment-adapter';
 import { McButtonModule } from '@ptsecurity/mosaic/button';
 import { McCheckboxModule } from '@ptsecurity/mosaic/checkbox';
+import { McHighlightModule, McPseudoCheckboxModule } from '@ptsecurity/mosaic/core';
 import { McDatepickerModule } from '@ptsecurity/mosaic/datepicker';
 import { McFormFieldModule } from '@ptsecurity/mosaic/form-field';
 import { McIconModule } from '@ptsecurity/mosaic/icon';
 import { McInputModule } from '@ptsecurity/mosaic/input';
+import { McListModule } from '@ptsecurity/mosaic/list';
 import { McRadioModule } from '@ptsecurity/mosaic/radio';
 import { McSelectModule } from '@ptsecurity/mosaic/select';
 import { McTimepickerModule } from '@ptsecurity/mosaic/timepicker';
+import { McTreeModule } from '@ptsecurity/mosaic/tree';
 
 
 @NgModule({
@@ -22,8 +27,15 @@ import { McTimepickerModule } from '@ptsecurity/mosaic/timepicker';
         McInputModule,
         McRadioModule,
         McTimepickerModule,
-        McSelectModule
+        McSelectModule,
+        McListModule,
+        McTreeModule,
+        McIconModule,
+        McHighlightModule,
+        FormsModule,
+        McInputModule,
+        McPseudoCheckboxModule,
+        CdkTreeModule
     ]
 })
-export class DemoMosaicModule {
-}
+export class DemoMosaicModule {}
diff --git a/packages/mosaic-dev/tree/module.ts b/packages/mosaic-dev/tree/module.ts
@@ -173,7 +173,9 @@ export class DemoComponent {
     }
 
     private getViewValue = (node: FileNode): string => {
-        return `${node.name} view`;
+        const nodeType = node.type ? `.${node.type}` : '';
+
+        return `${node.name}${nodeType}`;
     }
 }
 

diff --git a/...ges/mosaic-examples/mosaic/list/list-multiple-checkbox/list-multiple-checkbox-example.css b/...ges/mosaic-examples/mosaic/list/list-multiple-checkbox/list-multiple-checkbox-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
diff --git a/...es/mosaic-examples/mosaic/list/list-multiple-checkbox/list-multiple-checkbox-example.html b/...es/mosaic-examples/mosaic/list/list-multiple-checkbox/list-multiple-checkbox-example.html
@@ -0,0 +1,16 @@
+<mc-list-selection
+    multiple="checkbox"
+    [(ngModel)]="selected">
+    <mc-list-option value="Item 1" disabled>Item 1</mc-list-option>
+    <mc-list-option value="Item 2">Item 2</mc-list-option>
+    <mc-list-option value="Item 3">Item 3</mc-list-option>
+    <mc-list-option value="Item 4">Item 4</mc-list-option>
+    <mc-list-option value="Item 5">Item 5</mc-list-option>
+    <mc-list-option value="Item 6">Item 6</mc-list-option>
+    <mc-list-option value="Item 7">Item 7</mc-list-option>
+    <mc-list-option value="Item 8">Item 8</mc-list-option>
+    <mc-list-option value="Item 9">Item 9</mc-list-option>
+    <mc-list-option value="Item 10">Item 10</mc-list-option>
+</mc-list-selection>
+<br>
+<div>Selected: {{ selected }}</div>
diff --git a/...ages/mosaic-examples/mosaic/list/list-multiple-checkbox/list-multiple-checkbox-example.ts b/...ages/mosaic-examples/mosaic/list/list-multiple-checkbox/list-multiple-checkbox-example.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+
+/**
+ * @title Basic list
+ */
+@Component({
+    selector: 'list-multiple-checkbox-example',
+    templateUrl: 'list-multiple-checkbox-example.html',
+    styleUrls: ['list-multiple-checkbox-example.css']
+})
+export class ListMultipleCheckboxExample {
+    selected = [];
+}
diff --git a/...ges/mosaic-examples/mosaic/list/list-multiple-keyboard/list-multiple-keyboard-example.css b/...ges/mosaic-examples/mosaic/list/list-multiple-keyboard/list-multiple-keyboard-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
diff --git a/...es/mosaic-examples/mosaic/list/list-multiple-keyboard/list-multiple-keyboard-example.html b/...es/mosaic-examples/mosaic/list/list-multiple-keyboard/list-multiple-keyboard-example.html
@@ -0,0 +1,16 @@
+<mc-list-selection
+    multiple="keyboard"
+    [(ngModel)]="selected">
+    <mc-list-option value="Item 1" disabled>Item 1</mc-list-option>
+    <mc-list-option value="Item 2">Item 2</mc-list-option>
+    <mc-list-option value="Item 3">Item 3</mc-list-option>
+    <mc-list-option value="Item 4">Item 4</mc-list-option>
+    <mc-list-option value="Item 5">Item 5</mc-list-option>
+    <mc-list-option value="Item 6">Item 6</mc-list-option>
+    <mc-list-option value="Item 7">Item 7</mc-list-option>
+    <mc-list-option value="Item 8">Item 8</mc-list-option>
+    <mc-list-option value="Item 9">Item 9</mc-list-option>
+    <mc-list-option value="Item 10">Item 10</mc-list-option>
+</mc-list-selection>
+<br>
+<div>Selected: {{ selected }}</div>
diff --git a/...ages/mosaic-examples/mosaic/list/list-multiple-keyboard/list-multiple-keyboard-example.ts b/...ages/mosaic-examples/mosaic/list/list-multiple-keyboard/list-multiple-keyboard-example.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+
+/**
+ * @title Basic list
+ */
+@Component({
+    selector: 'list-multiple-keyboard-example',
+    templateUrl: 'list-multiple-keyboard-example.html',
+    styleUrls: ['list-multiple-keyboard-example.css']
+})
+export class ListMultipleKeyboardExample {
+    selected = [];
+}
diff --git a/packages/mosaic-examples/mosaic/list/list-overview/list-overview-example.css b/packages/mosaic-examples/mosaic/list/list-overview/list-overview-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
diff --git a/packages/mosaic-examples/mosaic/list/list-overview/list-overview-example.html b/packages/mosaic-examples/mosaic/list/list-overview/list-overview-example.html
@@ -0,0 +1,15 @@
+<mc-list-selection
+    [(ngModel)]="selected">
+    <mc-list-option value="Item 1" disabled>Item 1</mc-list-option>
+    <mc-list-option value="Item 2">Item 2</mc-list-option>
+    <mc-list-option value="Item 3">Item 3</mc-list-option>
+    <mc-list-option value="Item 4">Item 4</mc-list-option>
+    <mc-list-option value="Item 5">Item 5</mc-list-option>
+    <mc-list-option value="Item 6">Item 6</mc-list-option>
+    <mc-list-option value="Item 7">Item 7</mc-list-option>
+    <mc-list-option value="Item 8">Item 8</mc-list-option>
+    <mc-list-option value="Item 9">Item 9</mc-list-option>
+    <mc-list-option value="Item 10">Item 10</mc-list-option>
+</mc-list-selection>
+<br>
+<div>Selected: {{ selected }}</div>
diff --git a/packages/mosaic-examples/mosaic/list/list-overview/list-overview-example.ts b/packages/mosaic-examples/mosaic/list/list-overview/list-overview-example.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+
+/**
+ * @title Basic list
+ */
+@Component({
+    selector: 'list-overview-example',
+    templateUrl: 'list-overview-example.html',
+    styleUrls: ['list-overview-example.css']
+})
+export class ListOverviewExample {
+    selected = [];
+}
diff --git a/packages/mosaic-examples/mosaic/list/module.ts b/packages/mosaic-examples/mosaic/list/module.ts
@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { McListModule } from '@ptsecurity/mosaic/list';
+
+import { ListMultipleCheckboxExample } from './list-multiple-checkbox/list-multiple-checkbox-example';
+import { ListMultipleKeyboardExample } from './list-multiple-keyboard/list-multiple-keyboard-example';
+import { ListOverviewExample } from './list-overview/list-overview-example';
+
+
+const EXAMPLES = [
+    ListOverviewExample,
+    ListMultipleCheckboxExample,
+    ListMultipleKeyboardExample
+];
+
+@NgModule({
+    imports: [
+        FormsModule,
+        McListModule
+    ],
+    declarations: EXAMPLES,
+    exports: EXAMPLES
+})
+export class ListExamplesModule {}
diff --git a/packages/mosaic-examples/mosaic/tree/module.ts b/packages/mosaic-examples/mosaic/tree/module.ts
@@ -0,0 +1,34 @@
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { McHighlightModule } from '@ptsecurity/mosaic/core';
+import { McFormFieldModule } from '@ptsecurity/mosaic/form-field';
+import { McIconModule } from '@ptsecurity/mosaic/icon';
+import { McInputModule } from '@ptsecurity/mosaic/input';
+import { McTreeModule } from '@ptsecurity/mosaic/tree';
+
+import { TreeFilteringExample } from './tree-filtering/tree-filtering-example';
+import { TreeMultipleCheckboxExample } from './tree-multiple-checkbox/tree-multiple-checkbox-example';
+import { TreeMultipleKeyboardExample } from './tree-multiple-keyboard/tree-multiple-keyboard-example';
+import { TreeOverviewExample } from './tree-overview/tree-overview-example';
+
+
+const EXAMPLES = [
+    TreeOverviewExample,
+    TreeMultipleCheckboxExample,
+    TreeMultipleKeyboardExample,
+    TreeFilteringExample
+];
+
+@NgModule({
+    imports: [
+        FormsModule,
+        McFormFieldModule,
+        McInputModule,
+        McTreeModule,
+        McIconModule,
+        McHighlightModule
+    ],
+    declarations: EXAMPLES,
+    exports: EXAMPLES
+})
+export class TreeExamplesModule {}
diff --git a/packages/mosaic-examples/mosaic/tree/tree-filtering/tree-filtering-example.css b/packages/mosaic-examples/mosaic/tree/tree-filtering/tree-filtering-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
diff --git a/packages/mosaic-examples/mosaic/tree/tree-filtering/tree-filtering-example.html b/packages/mosaic-examples/mosaic/tree/tree-filtering/tree-filtering-example.html
@@ -0,0 +1,21 @@
+<mc-form-field>
+    <input type="text" mcInput (ngModelChange)="onFilterChange($event)" [(ngModel)]="filterValue">
+</mc-form-field>
+
+<br><br><br>
+
+<mc-tree-selection
+    [(ngModel)]="modelValue"
+    [dataSource]="dataSource"
+    [treeControl]="treeControl">
+
+    <mc-tree-option *mcTreeNodeDef="let node" mcTreeNodePadding [disabled]="node.name === 'tests'">
+        <span [innerHTML]="treeControl.getViewValue(node) | mcHighlight : treeControl.filterValue.value"></span>
+    </mc-tree-option>
+
+    <mc-tree-option *mcTreeNodeDef="let node; when: hasChild" mcTreeNodePadding>
+        <mc-tree-node-toggle [node]="node"></mc-tree-node-toggle>
+
+        <span [innerHTML]="treeControl.getViewValue(node) | mcHighlight : treeControl.filterValue.value"></span>
+    </mc-tree-option>
+</mc-tree-selection>