feat: forms refactoring (#419)

* forms refactoring * add checkbox and textarea refactoring * add test templates * add visual regression tests * add fixes from the PR review * test updates * fix the toggle
SAP · Nov 13, 2019 · e4e719c · e4e719c
1 parent 79074ca
commit e4e719c
Show file tree

Hide file tree

Showing 66 changed files with 1,079 additions and 320 deletions.
diff --git a/docs/_includes/display-component.html b/docs/_includes/display-component.html
@@ -3,12 +3,11 @@
 {% assign diff = max | minus: min %}
 {% assign randomNumber = "now" | date: "%N" | modulo: diff | plus: min %}
 <div class="fd-tile docs-component docs-component__{{include.class}}">
-    <label class="fd-form-label docs-component__bg-toggle" for="{{ randomNumber }}" title="Change Background">
-        <span class="fd-toggle fd-toggle--xs fd-input">
-            <input type="checkbox" name="" value="" id="{{ randomNumber }}" class="toggle-bg fd-toggle__input">
+    <label class="fd-form-label fd-form-label--toggle docs-component__bg-toggle" for="{{ randomNumber }}" title="Change Background">
+        <span class="fd-toggle fd-toggle--xs">
+            <input class="toggle-bg fd-toggle__input" type="checkbox" name="" value="" id="{{ randomNumber }}">
             <span class="fd-toggle__switch" role="presentation"></span>
         </span>
-
     </label>
     <div class="fd-tile__content">
 		{{ include.component }}

diff --git a/docs/js/customscripts.js b/docs/js/customscripts.js
@@ -166,6 +166,41 @@ $(document).ready(function () {
         triStateCheckbox.indeterminate = true;
     }
 
+    const triStateCheckboxI1 = document.getElementById('Ai4ez613i1');
+    if (triStateCheckboxI1) {
+        triStateCheckboxI1.indeterminate = true;
+    }
+
+    const triStateCheckboxI2 = document.getElementById('Ai4ez613i2');
+    if (triStateCheckboxI2) {
+        triStateCheckboxI2.indeterminate = true;
+    }
+
+    const triStateCheckboxI3 = document.getElementById('Ai4ez613i3');
+    if (triStateCheckboxI3) {
+        triStateCheckboxI3.indeterminate = true;
+    }
+
+    const triStateCheckboxI4 = document.getElementById('Ai4ez613i4');
+    if (triStateCheckboxI4) {
+        triStateCheckboxI4.indeterminate = true;
+    }
+
+    const triStateCheckboxI5 = document.getElementById('Ai4ez613i5');
+    if (triStateCheckboxI5) {
+        triStateCheckboxI5.indeterminate = true;
+    }
+
+    const triStateCheckboxI6 = document.getElementById('Ai4ez613i6');
+    if (triStateCheckboxI6) {
+        triStateCheckboxI6.indeterminate = true;
+    }
+
+    const triStateCheckboxI7 = document.getElementById('Ai4ez613i7');
+    if (triStateCheckboxI7) {
+        triStateCheckboxI7.indeterminate = true;
+    }
+
     // display responsive component controls
     const displayControls = document.querySelectorAll('.docs-component--responsive-display__controls');
     displayControls.forEach((displayControl) => {