Added toggle switch component to forms pattern.

red-gate · Sep 21, 2018 · 180eb1b · 180eb1b
1 parent d8b9e58
commit 180eb1b
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 6 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,9 +24,9 @@
     "fs-extra": "^2.0.0",
     "glob": "^7.1.3",
     "handlebars": "^4.0.12",
-    "honeycomb-web-toolkit": "git://github.com/red-gate/honeycomb-web-toolkit.git#v10.8.29",
+    "honeycomb-web-toolkit": "git://github.com/red-gate/honeycomb-web-toolkit.git#v10.8.38",
     "node-sass": "^4.9.3",
-    "opn": "^5.3.0",
+    "opn": "^5.4.0",
     "postcss-cli": "^6.0.0",
     "prismjs": "^1.15.0",
     "uglify-js": "^2.7.5",

diff --git a/src/ui/library/patterns/forms.hb b/src/ui/library/patterns/forms.hb
@@ -59,6 +59,18 @@
                         <label for="choice-3">Disabled</label>
                     </div>
 
+                    <h3>Toggle switches</h3>
+                    <div class="form__field-container">
+                        <span class="toggle-container"><input type="checkbox" name="toggle-1" id="toggle-1" value="Toggle 1" class="toggle"><label for="toggle-1"></label></span>
+                        <label for="toggle-1">Toggle (Unchecked)</label>
+
+                        <span class="toggle-container"><input type="checkbox" name="toggle-2" id="toggle-2" value="Toggle 2" class="toggle" checked><label for="toggle-2"></label></span>
+                        <label for="toggle-2">Toggle (Checked)</label>
+
+                        <span class="toggle-container"><input type="checkbox" name="toggle-3" id="toggle-3" value="Toggle 3" class="toggle" disabled><label for="toggle-3"></label></span>
+                        <label for="toggle-3">Toggle (Disabled)</label>
+                    </div>
+
                     <h3>Radio buttons</h3>
                     <div class="form__field-container">
                         <input type="radio" name="choice" id="radio-1" value="Choice 1" checked>
@@ -213,6 +225,18 @@
     <label for="choice-3">Disabled</label>
 </div>
 
+<h3>Toggle switches</h3>
+<div class="form__field-container">
+    <span class="toggle-container"><input type="checkbox" name="toggle-1" id="toggle-1" value="Toggle 1" class="toggle"><label for="toggle-1"></label></span>
+    <label for="toggle-1">Toggle (Unchecked)</label>
+
+    <span class="toggle-container"><input type="checkbox" name="toggle-2" id="toggle-2" value="Toggle 2" class="toggle" checked><label for="toggle-2"></label></span>
+    <label for="toggle-2">Toggle (Checked)</label>
+
+    <span class="toggle-container"><input type="checkbox" name="toggle-3" id="toggle-3" value="Toggle 3" class="toggle" disabled><label for="toggle-3"></label></span>
+    <label for="toggle-3">Toggle (Disabled)</label>
+</div>
+
 <h3>Radio buttons</h3>
 <div class="form__field-container">
     <input type="radio" name="choice" id="radio-1" value="Choice 1" checked>