Add basic usage demo. Implement a search icons mechanism. Fixes #46

vaadin · Oct 11, 2017 · b21fdcf · b21fdcf
1 parent 2eb9ed8
commit b21fdcf
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 14 deletions.
diff --git a/demo/icons-basic-demos.html b/demo/icons-basic-demos.html
@@ -10,6 +10,11 @@
         width: 100%;
       }
 
+      .iconset-container {
+        margin-top: 1em;
+        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+      }
+
       .icon-container {
         margin: 24px 8px;
         text-align: center;
@@ -43,18 +48,29 @@
       }
     </style>
 
-    <dom-repeat items="[[iconsets]]">
-      <template>
-        <dom-repeat id="wrapper" items="[[getIconNames(item)]]">
-          <template is="dom-repeat" >
-            <div class="icon-container">
-              <iron-icon icon="[[item]]"></iron-icon>
-              <span>[[item]]</span>
-            </div>
-          </template>
-        </dom-repeat>
+    <h3>Simple Usage</h3>
+    <vaadin-demo-snippet id='icons-basic-demos-simple-usage'>
+      <template preserve-content>
+        <iron-icon icon="vaadin:vaadin-h"></iron-icon>
       </template>
-    </dom-repeat>
+    </vaadin-demo-snippet>
+
+    <h3>All Icons</h3>
+    <vaadin-text-field value="{{search}}" label="Filter" placeholder="Icon Name"></vaadin-text-field>
+    <div class="iconset-container">
+      <dom-repeat items="[[iconsets]]">
+        <template>
+          <dom-repeat id="wrapper" items="[[getIconNames(item, search)]]">
+            <template is="dom-repeat" >
+              <div class="icon-container">
+                <iron-icon icon="[[item]]"></iron-icon>
+                <span>[[item]]</span>
+              </div>
+            </template>
+          </dom-repeat>
+        </template>
+      </dom-repeat>
+    </div>
   </template>
   <script>
     class IconsBasicDemos extends DemoReadyEventEmitter(IconsDemo(Polymer.Element)) {
@@ -76,10 +92,11 @@
         window.webComponentsAreReady = true;
       }
 
-      getIconNames(iconset) {
-        return iconset.getIconNames();
+      getIconNames(iconset, search) {
+        return iconset.getIconNames().filter(name => RegExp('^vaadin:' + search, 'i').test(name));
       }
     }
+
     customElements.define(IconsBasicDemos.is, IconsBasicDemos);
   </script>
 </dom-module>
diff --git a/demo/icons-demo.html b/demo/icons-demo.html
@@ -1,5 +1,4 @@
 <script>
-  /* @polymerMixin */
   /* @polymerMixin */
   IconsDemo = superClass => {
     return class extends superClass {

diff --git a/demo/index.html b/demo/index.html
@@ -19,6 +19,7 @@
   <link rel="import" href="../../vaadin-demo-helpers/vaadin-component-demo.html">
   <link rel="import" href="../../vaadin-demo-helpers/vaadin-demo-snippet.html">
   <link rel="import" href="../../vaadin-demo-helpers/vaadin-demo-ready-event-emitter.html">
+  <link rel="import" href="../../vaadin-text-field/vaadin-text-field.html">
 
   <link rel="import" href="icons-demo.html">