Merge pull request #21 from nemuvski/add-sample-preview

Added `indeterminate` samples to preview page
nemuvski · Jan 27, 2024 · 2f9151b · 2f9151b
2 parents c41b25b + 41ac656
commit 2f9151b
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 2 deletions.
diff --git a/docs/assets/index.js b/docs/assets/index.js
@@ -6,4 +6,9 @@ window.addEventListener("load", () => {
   document.getElementById("js-dialog-close").addEventListener("click", () => {
     dialog.close();
   });
+
+  // Set `indeterminate`
+  document.querySelectorAll(".js-indeterminate").forEach((el) => {
+    el.indeterminate = true;
+  });
 });
diff --git a/docs/preview/index.html b/docs/preview/index.html
@@ -135,8 +135,13 @@ <h6>heading 6</h6>
       </div>
 
       <div class="c-section">
-        <span>progress:</span>
-        <progress></progress>
+        <span>progress(indeterminate):</span>
+        <progress class="js-indeterminate"></progress>
+      </div>
+
+      <div class="c-section">
+        <span>progress(determinate):</span>
+        <progress value="70" max="100">70%</progress>
       </div>
 
       <div class="c-section">
@@ -507,6 +512,18 @@ <h6>heading 6</h6>
         </form>
       </div>
 
+      <div class="c-section">
+        <form>
+          <fieldset>
+            <legend>fieldset-legend (radio-indeterminate)</legend>
+            <label>
+              <input type="radio" name="input-radio-group" value="input-radio-indeterminate" class="js-indeterminate" />
+              input-radio-indeterminate
+            </label>
+          </fieldset>
+        </form>
+      </div>
+
       <div class="c-section">
         <form>
           <fieldset>
@@ -523,6 +540,15 @@ <h6>heading 6</h6>
               <input type="checkbox" name="input-checkbox-group" value="input-checkbox-disabled" disabled />
               input-checkbox-disabled
             </label>
+            <label>
+              <input
+                type="checkbox"
+                name="input-checkbox-group"
+                value="input-checkbox-indeterminate"
+                class="js-indeterminate"
+              />
+              input-checkbox-indeterminate
+            </label>
           </fieldset>
         </form>
       </div>