From 93951770e3c82daa70061349111f89ad8e8321da Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Fri, 30 Jun 2017 16:58:09 -0400
Subject: [PATCH] tests(demos): update vanilla demos

---
 .../demos/{ => components}/button/basic.html  |   2 +-
 .../{ => components}/button/toolbar.html      |   2 +-
 .../demos/components/grid/basic.html          | 271 ++++++++++++++++++
 .../demos/components/icon/basic.html          |  91 ++++++
 .../demos/components/segment/basic.html       | 123 ++++++++
 5 files changed, 487 insertions(+), 2 deletions(-)
 rename packages/ionic-vanilla/demos/{ => components}/button/basic.html (98%)
 rename packages/ionic-vanilla/demos/{ => components}/button/toolbar.html (99%)
 create mode 100644 packages/ionic-vanilla/demos/components/grid/basic.html
 create mode 100644 packages/ionic-vanilla/demos/components/icon/basic.html
 create mode 100644 packages/ionic-vanilla/demos/components/segment/basic.html
diff --git a/packages/ionic-vanilla/demos/button/basic.html b/packages/ionic-vanilla/demos/components/button/basic.html
similarity index 98%
rename from packages/ionic-vanilla/demos/button/basic.html
rename to packages/ionic-vanilla/demos/components/button/basic.html
index 4c78d084db..a032836a71 100644
--- a/packages/ionic-vanilla/demos/button/basic.html
+++ b/packages/ionic-vanilla/demos/components/button/basic.html
@@ -2,7 +2,7 @@
 <html dir="ltr">
 <head>
   <meta charset="UTF-8">
-  <title>Ionic Slides Basic</title>
+  <title>Ionic Buttons</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>
diff --git a/packages/ionic-vanilla/demos/button/toolbar.html b/packages/ionic-vanilla/demos/components/button/toolbar.html
similarity index 99%
rename from packages/ionic-vanilla/demos/button/toolbar.html
rename to packages/ionic-vanilla/demos/components/button/toolbar.html
index 6cb1243e3a..4d432ac016 100644
--- a/packages/ionic-vanilla/demos/button/toolbar.html
+++ b/packages/ionic-vanilla/demos/components/button/toolbar.html
@@ -2,7 +2,7 @@
 <html dir="ltr">
 <head>
   <meta charset="UTF-8">
-  <title>Ionic Slides Basic</title>
+  <title>Ionic Toolbar Buttons</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>
diff --git a/packages/ionic-vanilla/demos/components/grid/basic.html b/packages/ionic-vanilla/demos/components/grid/basic.html
new file mode 100644
index 0000000000..43709fea7d
--- /dev/null
+++ b/packages/ionic-vanilla/demos/components/grid/basic.html
@@ -0,0 +1,271 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Ionic Grid</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-content class="grid-demo">
+      <ion-grid>
+        <ion-row>
+          <ion-col>
+            <div>
+              ion-col
+            </div>
+          </ion-col>
+          <ion-col>
+            <div>
+              ion-col
+            </div>
+          </ion-col>
+          <ion-col>
+            <div>
+              ion-col
+            </div>
+          </ion-col>
+          <ion-col>
+            <div>
+              ion-col
+            </div>
+          </ion-col>
+        </ion-row>
+
+        <ion-row>
+          <ion-col col-6>
+            <div>
+              ion-col[width-50]
+            </div>
+          </ion-col>
+          <ion-col>
+            <div>
+              ion-col
+            </div>
+          </ion-col>
+          <ion-col>
+            <div>
+              ion-col
+            </div>
+          </ion-col>
+        </ion-row>
+
+        <ion-row>
+          <ion-col col-3>
+            <div>
+              ion-col[width-25]
+            </div>
+          </ion-col>
+          <ion-col>
+            <div>
+              ion-col
+            </div>
+          </ion-col>
+          <ion-col col-3>
+            <div>
+              ion-col[width-25]
+            </div>
+          </ion-col>
+        </ion-row>
+
+        <ion-row>
+          <ion-col col-3>
+            <div>
+              ion-col[width-25]
+            </div>
+          </ion-col>
+          <ion-col col-3 offset-3>
+            <div>
+              ion-col[width-25][offset-25]
+            </div>
+          </ion-col>
+        </ion-row>
+
+        <ion-row>
+          <ion-col>
+            <div>
+              ion-col
+            </div>
+          </ion-col>
+          <ion-col>
+            <div>
+              ion-col<br>#
+            </div>
+          </ion-col>
+          <ion-col>
+            <div>
+              ion-col<br>#<br>#
+            </div>
+          </ion-col>
+          <ion-col>
+            <div>
+              ion-col<br>#<br>#<br>#
+            </div>
+          </ion-col>
+        </ion-row>
+
+        <ion-row>
+          <ion-col align-self-start>
+            <div>
+              ion-col[top]
+            </div>
+          </ion-col>
+          <ion-col align-self-center>
+            <div>
+              ion-col[center]
+            </div>
+          </ion-col>
+          <ion-col align-self-end>
+            <div>
+              ion-col[bottom]
+            </div>
+          </ion-col>
+          <ion-col>
+            <div>
+              ion-col<br>#<br>#
+            </div>
+          </ion-col>
+        </ion-row>
+
+        <ion-row align-items-start>
+          <ion-col>
+            <div>
+              [top] ion-col
+            </div>
+          </ion-col>
+          <ion-col>
+            <div>
+              [top] ion-col
+            </div>
+          </ion-col>
+          <ion-col align-self-end>
+            <div>
+              [top] ion-col[bottom]
+            </div>
+          </ion-col>
+          <ion-col>
+            <div>
+              ion-col<br>#<br>#
+            </div>
+          </ion-col>
+        </ion-row>
+
+        <ion-row align-items-center>
+          <ion-col>
+            <div>
+              [center] ion-col
+            </div>
+          </ion-col>
+          <ion-col>
+            <div>
+              [center] ion-col
+            </div>
+          </ion-col>
+          <ion-col>
+            <div>
+              [center] ion-col
+            </div>
+          </ion-col>
+          <ion-col>
+            <div>
+              ion-col<br>#<br>#
+            </div>
+          </ion-col>
+        </ion-row>
+
+        <ion-row align-items-end>
+          <ion-col>
+            <div>
+              [bottom] ion-col
+            </div>
+          </ion-col>
+          <ion-col align-self-start>
+            <div>
+              [bottom] ion-col[top]
+            </div>
+          </ion-col>
+          <ion-col>
+            <div>
+              [bottom] ion-col
+            </div>
+          </ion-col>
+          <ion-col>
+            <div>
+              ion-col<br>#<br>#
+            </div>
+          </ion-col>
+        </ion-row>
+
+        <ion-row>
+          <ion-col col-12 col-sm>
+            <div>
+              [responsive-sm] ion-col
+            </div>
+          </ion-col>
+          <ion-col col-12 col-sm>
+            <div>
+              [responsive-sm] ion-col
+            </div>
+          </ion-col>
+          <ion-col col-12 col-sm>
+            <div>
+              [responsive-sm] ion-col
+            </div>
+          </ion-col>
+          <ion-col col-12 col-sm>
+            <div>
+              [responsive-sm] ion-col
+            </div>
+          </ion-col>
+        </ion-row>
+
+        <ion-row>
+          <ion-col col-12 col-md>
+            <div>
+              [responsive-md] ion-col
+            </div>
+          </ion-col>
+          <ion-col col-12 col-md>
+            <div>
+              [responsive-md] ion-col
+            </div>
+          </ion-col>
+          <ion-col col-12 col-md>
+            <div>
+              [responsive-md] ion-col
+            </div>
+          </ion-col>
+          <ion-col col-12 col-md>
+            <div>
+              [responsive-md] ion-col
+            </div>
+          </ion-col>
+        </ion-row>
+
+        <ion-row responsive-lg>
+          <ion-col col-6 offset-3>
+            <div>
+              [responsive-lg] ion-col[width-50][offset-25]
+            </div>
+          </ion-col>
+          <ion-col col-3>
+            <div>
+              [responsive-lg] ion-col[width-25]
+            </div>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+
+    </ion-content>
+
+    <style>
+      .grid-demo ion-col div {
+        background-color: #f7f7f7;
+        border: 1px solid #ddd;
+        padding: 10px 5px;
+      }
+    </style>
+  </ion-app>
+</body>
+</html>
diff --git a/packages/ionic-vanilla/demos/components/icon/basic.html b/packages/ionic-vanilla/demos/components/icon/basic.html
new file mode 100644
index 0000000000..ead9f8d810
--- /dev/null
+++ b/packages/ionic-vanilla/demos/components/icon/basic.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Ionic Icons</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-navbar>
+        <ion-title>Icon</ion-title>
+      </ion-navbar>
+
+    </ion-header>
+
+
+    <ion-content text-center class="icon-demo">
+
+      <ion-row>
+        <ion-col><ion-icon name="ionic" color="primary"></ion-icon></ion-col>
+        <ion-col><ion-icon name="logo-angular"></ion-icon></ion-col>
+        <ion-col><ion-icon name="heart" color="danger"></ion-icon></ion-col>
+        <ion-col><ion-icon name="ionitron" color="primary"></ion-icon></ion-col>
+
+        <ion-col><ion-icon name="happy" color="vibrant"></ion-icon></ion-col>
+        <ion-col><ion-icon name="people"></ion-icon></ion-col>
+        <ion-col><ion-icon name="person"></ion-icon></ion-col>
+        <ion-col><ion-icon name="contact"></ion-icon></ion-col>
+
+        <ion-col><ion-icon name="apps"></ion-icon></ion-col>
+        <ion-col><ion-icon name="lock"></ion-icon></ion-col>
+        <ion-col><ion-icon name="key" color="bright"></ion-icon></ion-col>
+        <ion-col><ion-icon name="unlock"></ion-icon></ion-col>
+
+        <ion-col><ion-icon name="map" color="secondary"></ion-icon></ion-col>
+        <ion-col><ion-icon name="navigate"></ion-icon></ion-col>
+        <ion-col><ion-icon name="pin"></ion-icon></ion-col>
+        <ion-col><ion-icon name="locate"></ion-icon></ion-col>
+
+        <ion-col><ion-icon name="mic"></ion-icon></ion-col>
+        <ion-col><ion-icon name="musical-notes" color="vibrant"></ion-icon></ion-col>
+        <ion-col><ion-icon name="volume-up"></ion-icon></ion-col>
+        <ion-col><ion-icon name="microphone"></ion-icon></ion-col>
+
+        <ion-col><ion-icon name="cafe" color="bright"></ion-icon></ion-col>
+        <ion-col><ion-icon name="calculator"></ion-icon></ion-col>
+        <ion-col><ion-icon name="bus"></ion-icon></ion-col>
+        <ion-col><ion-icon name="wine" color="danger"></ion-icon></ion-col>
+
+        <ion-col><ion-icon name="camera"></ion-icon></ion-col>
+        <ion-col><ion-icon name="image" color="secondary"></ion-icon></ion-col>
+        <ion-col><ion-icon name="star" color="bright"></ion-icon></ion-col>
+        <ion-col><ion-icon name="pin"></ion-icon></ion-col>
+
+        <ion-col><ion-icon name="arrow-dropup-circle" color="vibrant"></ion-icon></ion-col>
+        <ion-col><ion-icon name="arrow-back"></ion-icon></ion-col>
+        <ion-col><ion-icon name="arrow-dropdown"></ion-icon></ion-col>
+        <ion-col><ion-icon name="arrow-forward"></ion-icon></ion-col>
+
+        <ion-col><ion-icon name="cloud"></ion-icon></ion-col>
+        <ion-col><ion-icon name="sunny" color="bright"></ion-icon></ion-col>
+        <ion-col><ion-icon name="umbrella"></ion-icon></ion-col>
+        <ion-col><ion-icon name="rainy" color="primary"></ion-icon></ion-col>
+      </ion-row>
+
+    </ion-content>
+
+    <style>
+      .icon-demo ion-icon {
+        font-size: 50px;
+      }
+
+      .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>
+</body>
+</html>
+
diff --git a/packages/ionic-vanilla/demos/components/segment/basic.html b/packages/ionic-vanilla/demos/components/segment/basic.html
new file mode 100644
index 0000000000..e13bd18e0f
--- /dev/null
+++ b/packages/ionic-vanilla/demos/components/segment/basic.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Ionic Segment</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-content>
+      <ion-toolbar no-border-top>
+        <ion-segment value="Free">
+          <ion-segment-button value="Paid">
+            Paid
+          </ion-segment-button>
+          <ion-segment-button value="Free">
+            Free
+          </ion-segment-button>
+          <ion-segment-button value="Top">
+            Top
+          </ion-segment-button>
+        </ion-segment>
+      </ion-toolbar>
+
+      <ion-toolbar no-border-top no-border-bottom>
+        <ion-segment color="danger">
+          <ion-segment-button value="sunny">
+            Sunny
+          </ion-segment-button>
+          <ion-segment-button value="rainy" checked>
+            Rainy
+          </ion-segment-button>
+        </ion-segment>
+      </ion-toolbar>
+
+      <div padding>
+        <ion-segment color="dark" value="Reading List">
+          <ion-segment-button value="Bookmarks">
+            <ion-icon name="book"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="Reading List">
+            <ion-icon ios="ios-glasses-outline" md="md-glasses"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="Shared Links">
+            <ion-icon ios="ios-at-outline" md="md-at"></ion-icon>
+          </ion-segment-button>
+        </ion-segment>
+
+        <ion-segment id="dynamicPropDisable" disabled color="danger">
+          <ion-segment-button value="Bookmarks">
+            Bookmarks
+          </ion-segment-button>
+          <ion-segment-button value="Reading List">
+            Reading List
+          </ion-segment-button>
+          <ion-segment-button value="Shared Links">
+            Shared Links
+          </ion-segment-button>
+        </ion-segment>
+
+        <ion-segment id="dynamicAttrElem" color="secondary" value="active">
+          <ion-segment-button value="active">
+            Active
+          </ion-segment-button>
+          <ion-segment-button id="dynamicAttrDisable" value="disabled" disabled="true">
+            Disabled
+          </ion-segment-button>
+          <ion-segment-button value="inactive" disabled="false">
+            Inactive
+          </ion-segment-button>
+        </ion-segment>
+      </div>
+
+      <div padding-horizontal>
+        <ion-button block onClick="toggleDisabled()">Toggle Disabled</ion-button>
+      </div>
+      <div padding>
+        <ion-button block color="secondary" onClick="toggleValue()">Toggle Value</ion-button>
+      </div>
+
+      <script>
+          var dynamicAttrDisable = document.getElementById('dynamicAttrDisable');
+          var dynamicPropDisable = document.getElementById('dynamicPropDisable');
+
+          function toggleDisabled() {
+            const attrIsDisabled = dynamicAttrDisable.getAttribute('disabled') === 'true' ? false : true;
+            const propIsDisabled = dynamicPropDisable.disabled === true ? false : true;
+            dynamicAttrDisable.setAttribute('disabled', attrIsDisabled);
+            dynamicPropDisable.disabled = propIsDisabled;
+          }
+
+          function toggleValue() {
+            var dynamicAttrElem = document.getElementById('dynamicAttrElem');
+            var dynamicAttrValue = dynamicAttrElem.getAttribute('value');
+
+            if (dynamicAttrValue === 'active') {
+              dynamicAttrElem.setAttribute('value', 'inactive');
+            } else if (dynamicAttrValue === 'inactive') {
+              dynamicAttrElem.setAttribute('value', 'disabled');
+            } else {
+              dynamicAttrElem.setAttribute('value', 'active');
+            }
+          }
+      </script>
+
+      <style>
+        [padding] {
+          padding: 16px;
+        }
+
+        [padding-horizontal] {
+          padding: 0 16px;
+        }
+
+        [padding] ion-segment {
+          margin-bottom: 16px;
+        }
+      </style>
+    </ion-content>
+  </ion-app>
+</body>
+</html>
