From e4551397f12aa7b198b24e86b86b3d6aee370745 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Thu, 24 Aug 2017 19:38:18 -0400
Subject: [PATCH] test(toggle): add more examples to toggle

---
 .../src/components/toggle/test/basic.html     | 80 ++++++++++++++++++-
 1 file changed, 77 insertions(+), 3 deletions(-)
diff --git a/packages/core/src/components/toggle/test/basic.html b/packages/core/src/components/toggle/test/basic.html
index d3a1933f62..4f31b9dece 100644
--- a/packages/core/src/components/toggle/test/basic.html
+++ b/packages/core/src/components/toggle/test/basic.html
@@ -2,20 +2,94 @@
 <html dir="ltr">
 <head>
   <meta charset="UTF-8">
-  <title>Ionic Toggles</title>
+  <title>Ionic Toggle</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <script src="/dist/ionic.js"></script>
 </head>
 <body>
   <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Toggles</ion-title>
+      </ion-toolbar>
+    </ion-header>
     <ion-content>
+
       <ion-list>
         <ion-item>
-          <ion-label>Toggle</ion-label>
-          <ion-toggle checked slot="end"></ion-toggle>
+          <ion-label>Apple</ion-label>
+          <ion-toggle slot="start" name="apple" checked></ion-toggle>
         </ion-item>
+
+        <ion-item>
+          <ion-label>Banana</ion-label>
+          <ion-toggle slot="start" name="banana" checked></ion-toggle>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Cherry, disabled</ion-label>
+          <ion-toggle slot="start" color="danger" name="cherry" disabled></ion-toggle>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Grape, checked, disabled</ion-label>
+          <ion-toggle slot="start" id="grapeChecked" name="grape" checked disabled></ion-toggle>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Kiwi, (ionChange) Secondary color</ion-label>
+          <ion-toggle slot="start" color="secondary" (ionChange)="kiwiChange($event)"></ion-toggle>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Strawberry, (ionChange) checked="true"</ion-label>
+          <ion-toggle slot="start" color="light" (ionChange)="strawberryChange($event)" checked="true"></ion-toggle>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Checkbox right, checked, really long text that should ellipsis</ion-label>
+          <ion-toggle slot="end" color="danger" checked></ion-toggle>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Checkbox right side</ion-label>
+          <ion-toggle slot="end" checked></ion-toggle>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Button w/ right side default icon, really long text that should ellipsis</ion-label>
+          <ion-icon name="information-circle" slot="end"></ion-icon>
+        </ion-item>
+
       </ion-list>
+
+
+      <p aria-hidden="true" text-center>
+        <ion-button onClick="toggleBoolean('grapeChecked', 'checked')" outline small>Grape Checked</ion-button>
+        <ion-button onClick="toggleBoolean('grapeChecked', 'disabled')" outline small>Grape Disabled</ion-button>
+        <ion-button onClick="printForm()" outline small>Print Form</ion-button>
+      </p>
+
+      <p>
+        <ion-toggle id="standAloneChecked"></ion-toggle>
+        Stand-alone toggle: <span id="standAloneCheckedSpan"></span>
+      </p>
     </ion-content>
+
+    <script>
+      function printForm(ev) {
+        console.log('TODO get working with forms');
+      }
+
+      function toggleBoolean(id, prop) {
+        var ele = document.getElementById(id);
+
+        var isTrue = ele[prop] ? false : true;
+        ele[prop] = isTrue;
+        console.log('in toggleBoolean, setting', prop, 'to', isTrue);
+      }
+    </script>
+
   </ion-app>
 </body>
 </html>
