From 3bebe311cd83703812e315797173c57bb535d848 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Wed, 10 Jan 2018 14:52:37 -0500
Subject: [PATCH] test(icon): update basic test to match v3 test

---
 .../src/components/icon/test/basic/index.html | 228 ++++++++++++++----
 1 file changed, 176 insertions(+), 52 deletions(-)

diff --git a/packages/core/src/components/icon/test/basic/index.html b/packages/core/src/components/icon/test/basic/index.html
index c63e5a3292..f4f020b8b6 100644
--- a/packages/core/src/components/icon/test/basic/index.html
+++ b/packages/core/src/components/icon/test/basic/index.html
@@ -17,68 +17,192 @@
         </ion-toolbar>
       </ion-header>
 
-      <ion-content text-center class="icon-demo">
-        <ion-grid>
-          <ion-row>
+      <ion-content>
+        <ion-list>
+          <ion-item>
+            <ion-icon name="home" id="dynamicColor" slot="start"></ion-icon>
+            <ion-label>
+              <code>
+                name="home"
+              </code>
+            </ion-label>
+          </ion-item>
 
-            <ion-col>
-              <ion-icon name="logo-ionic" color="primary"></ion-icon>
-            </ion-col>
-            <ion-col>
-              <ion-icon name="logo-ionitron" color="primary"></ion-icon>
-            </ion-col>
-            <ion-col>
-              <ion-icon name="heart" color="secondary"></ion-icon>
-            </ion-col>
-            <ion-col>
-              <ion-icon name="logo-angular" color="danger"></ion-icon>
-            </ion-col>
+          <ion-item>
+            <ion-icon name="home" is-active="true" slot="start"></ion-icon>
+            <ion-label>
+              <code>
+                name="home" is-active="true"
+              </code>
+            </ion-label>
+          </ion-item>
 
-            <ion-col>
-              <ion-icon name="happy"></ion-icon>
-            </ion-col>
-            <ion-col>
-              <ion-icon name="people"></ion-icon>
-            </ion-col>
-            <ion-col>
-              <ion-icon name="lock"></ion-icon>
-            </ion-col>
-            <ion-col>
-              <ion-icon name="key"></ion-icon>
-            </ion-col>
+          <ion-item>
+            <ion-icon id="dynamicHomeIcon" slot="start"></ion-icon>
+            <ion-label>
+              <code>
+                id="dynamicHomeIcon"
+              </code>
+            </ion-label>
+          </ion-item>
 
-          </ion-row>
-        </ion-grid>
+          <ion-item>
+            <ion-icon name="md-home" is-active="false" slot="start"></ion-icon>
+            <ion-label>
+              <code>
+                name="md-home" is-active="false"
+              </code>
+            </ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-icon name="ios-home" is-active="false" slot="start"></ion-icon>
+            <ion-label>
+              <code>
+                name="ios-home" is-active="false"
+              </code>
+            </ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-icon name="ios-home" slot="start"></ion-icon>
+            <ion-label>
+              <code>
+                name="ios-home"
+              </code>
+            </ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-icon name="ios-star-outline" slot="start"></ion-icon>
+            <ion-label>
+              <code>
+                name="ios-star-outline"
+              </code>
+            </ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-icon name="ios-star-outline" is-active="false" slot="start"></ion-icon>
+            <ion-label>
+              <code>
+                name="ios-star-outline" is-active="false"
+              </code>
+            </ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-icon name="md-home" color="primary" slot="start"></ion-icon>
+            <ion-label>
+              <code>
+                name="md-home"
+              </code>
+            </ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-icon name="logo-twitter" color="secondary" slot="start"></ion-icon>
+            <ion-label>
+              <code>
+                name="logo-twitter"
+              </code>
+            </ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-icon ios="logo-apple" md="logo-android" slot="start"></ion-icon>
+            <ion-label>
+              <code>
+                ios="logo-apple" md="logo-android"
+              </code>
+            </ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-icon ios="md-color-filter" md="ios-color-filter" slot="start"></ion-icon>
+            <ion-label>
+              <code>
+                ios="md-color-filter" md="ios-color-filter"
+              </code>
+            </ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-icon ios="md-color-filter" md="ios-color-filter" is-active="false" slot="start"></ion-icon>
+            <ion-label>
+              <code>
+                ios="md-color-filter" md="ios-color-filter" is-active="false"
+              </code>
+            </ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-icon slot="start"></ion-icon>
+            <ion-label>
+              <code>
+                name="null"
+              </code>
+            </ion-label>
+          </ion-item>
+
+          <ion-item detail-push>
+            <ion-label>
+              <code>
+                ion-item w/ [detail-push] attr. text text text text text text
+              </code>
+            </ion-label>
+          </ion-item>
+        </ion-list>
 
         <p>
-          inline styling
-          <ion-icon name="logo-ionic" style="display:inline-block; width: 1em;"></ion-icon>
-          icon.
-        </p>
-
-        <p>
-          Default
-          <ion-icon name="logo-ionic"></ion-icon>
-          inline.
+          <ion-button onclick="updateIcon()">
+            <ion-icon slot="start" id="dynamicBtnIcon"></ion-icon>
+            Update icon
+          </ion-button>
         </p>
 
       </ion-content>
+
+
+      <style>
+        /*to ensure ng css encapsulation doesn't mess with icon attributes*/
+        code {
+          font-size: 0.8em;
+        }
+      </style>
     </ion-page>
-
-    <style>
-      .icon-demo ion-row {
-        height: 100%;
-        flex-wrap: wrap;
-      }
-
-      .icon-demo ion-col {
-        flex: 0 0 25%;
-        max-width: 25%;
-        text-align: center;
-        padding: 10px 5px;
-      }
-    </style>
   </ion-app>
+
+  <script>
+    var dynamicColor = document.getElementById('dynamicColor');
+    dynamicColor.color = 'danger';
+
+    var dynamicHomeIcon = document.getElementById('dynamicHomeIcon');
+    dynamicHomeIcon.name = 'home';
+    dynamicHomeIcon.isActive = false;
+
+    icons = [
+      'home',
+      'star',
+      'ios-alert',
+      'ios-alert-outline',
+      'md-alert',
+      'logo-apple'
+    ];
+
+    var iconIndex = 0;
+
+    var dynamicBtnIcon = document.getElementById('dynamicBtnIcon');
+    dynamicBtnIcon.name = icons[0];
+
+    function updateIcon() {
+      iconIndex++;
+      if (iconIndex >= icons.length) {
+        iconIndex = 0;
+      }
+      dynamicBtnIcon.name = icons[iconIndex];
+    }
+  </script>
 </body>
 
 </html>