docs: dropdown add show code in each example (#1157)

* add show code in each example * revert change in package.json * delete unwanted code in package-lock.json * revert files
SAP · Aug 23, 2019 · 5f98f94 · 5f98f94
1 parent 8aad607
commit 5f98f94
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 16 deletions.
diff --git a/docs/app/documentation/component-docs/dropdown/dropdown-docs.component.html b/docs/app/documentation/component-docs/dropdown/dropdown-docs.component.html
@@ -7,15 +7,15 @@ <h2>Default Dropdown</h2>
 <component-example [name]="'ex1'">
   <fd-dropdown-default-example></fd-dropdown-default-example>
 </component-example>
-<!--<code-example [code]="textDropdownHtml" [language]="'HTML'"></code-example>-->
+<code-example [exampleFiles]="textDropdownHtml"></code-example>
 
 <separator></separator>
 
 <h2>Disabled State</h2>
 <component-example [name]="'ex2'">
   <fd-dropdown-state-example></fd-dropdown-state-example>
 </component-example>
-<!--<code-example [code]="disabledDropdownHtml" [language]="'HTML'"></code-example>-->
+<code-example [exampleFiles]="disabledDropdownHtml"></code-example>
 
 <separator></separator>
 
@@ -24,7 +24,7 @@ <h2>Dropdown with Icon</h2>
 <component-example [name]="'ex3'">
   <fd-dropdown-icons-example></fd-dropdown-icons-example>
 </component-example>
-<!--<code-example [code]="iconDropdownHtml" [language]="'HTML'"></code-example>-->
+<code-example [exampleFiles]="iconDropdownHtml"></code-example>
 
 <separator></separator>
 
@@ -39,7 +39,7 @@ <h2>Contextual Menu</h2>
 <component-example [name]="'ex5'">
   <fd-dropdown-contextual-menu-example></fd-dropdown-contextual-menu-example>
 </component-example>
-<!--<code-example [code]="contextualMenuDropdownHtml" [language]="'HTML'"></code-example>-->
+<code-example [exampleFiles]="contextualMenuDropdownHtml"></code-example>
 
 <separator></separator>
 
@@ -48,16 +48,15 @@ <h2>Infinite Scroll Dropdown</h2>
 <component-example [name]="'ex6'">
     <fd-dropdown-infinite-scroll-example></fd-dropdown-infinite-scroll-example>
 </component-example>
-<!--<code-example [code]="infiniteScrollHtml" [language]="'HTML'"></code-example>-->
-<!--<code-example [code]="infiniteScrollTs" [language]="'typescript'"></code-example>-->
+<code-example [exampleFiles]="infiniteScrollHtml"></code-example>
 
 <separator></separator>
 
 <h2>Toolbar Dropdown</h2>
 <component-example [name]="'ex6'">
     <fd-dropdown-toolbar-example></fd-dropdown-toolbar-example>
 </component-example>
-<!--<code-example [code]="toolbarDropdownHtml" [language]="'HTML'"></code-example>-->
+<code-example [exampleFiles]="toolbarDropdownHtml"></code-example>
 
 <style>
   ::ng-deep fd-popover {

diff --git a/docs/app/documentation/component-docs/dropdown/dropdown-docs.component.ts b/docs/app/documentation/component-docs/dropdown/dropdown-docs.component.ts
@@ -7,25 +7,59 @@ import * as dropdownStateMenuHtml from '!raw-loader!./examples/dropdown-state-ex
 import * as dropdownInfiniteScrollHtml from '!raw-loader!./examples/dropdown-infinite-scroll-example.component.html';
 import * as dropdownInfiniteScrollTs from '!raw-loader!./examples/dropdown-infinite-scroll-example.component.ts';
 import * as dropdownToolbarHtml from '!raw-loader!./examples/dropdown-toolbar-example.component.html';
+import { ExampleFile } from '../../core-helpers/code-example/example-file';
 
 @Component({
     selector: 'app-dropdown',
     templateUrl: './dropdown-docs.component.html'
 })
 export class DropdownDocsComponent {
-    textDropdownHtml = dropdownDefaultMenuHtml;
 
-    disabledDropdownHtml = dropdownStateMenuHtml;
+    textDropdownHtml: ExampleFile[] = [
+        {
+            language: 'html',
+            code: dropdownDefaultMenuHtml,
+        }
+    ];
 
-    iconDropdownHtml = dropdownIconsMenuHtml;
+    disabledDropdownHtml: ExampleFile[] = [
+        {
+            language: 'html',
+            code: dropdownStateMenuHtml,
+        }
+    ];
 
-    contextualMenuDropdownHtml = dropdownContextualMenuHtml;
+    iconDropdownHtml: ExampleFile[] = [
+        {
+            language: 'html',
+            code: dropdownIconsMenuHtml,
+        }
+    ];
 
-    infiniteScrollHtml = dropdownInfiniteScrollHtml;
+    contextualMenuDropdownHtml: ExampleFile[] = [
+        {
+            language: 'html',
+            code: dropdownContextualMenuHtml,
+        }
+    ];
 
-    infiniteScrollTs = dropdownInfiniteScrollTs;
+    infiniteScrollHtml: ExampleFile[] = [
+        {
+            language: 'html',
+            code: dropdownInfiniteScrollHtml,
+        },
+        {
+            language: 'typescript',
+            code: dropdownInfiniteScrollTs,
+        }
+    ];
 
-    toolbarDropdownHtml = dropdownToolbarHtml;
+    toolbarDropdownHtml: ExampleFile[] = [
+        {
+            language: 'html',
+            code: dropdownToolbarHtml,
+        }
+    ];
 
-    constructor() {}
+    constructor() { }
 }
diff --git a/...pp/documentation/component-docs/dropdown/examples/dropdown-default-example.component.html b/...pp/documentation/component-docs/dropdown/examples/dropdown-default-example.component.html
@@ -1,5 +1,5 @@
 <fd-popover style="margin-right: 12px;">
-    <fd-dropdown-control>Compact Dropdown</fd-dropdown-control>
+    <fd-dropdown-control>Cozy Dropdown</fd-dropdown-control>
     <fd-popover-body *ngIf="menu1 && menu1.length || menu2 && menu2.length">
         <fd-menu>
             <ul fd-menu-list>