From c1007709a6231dccf3ce0b9702fa090477af1ed3 Mon Sep 17 00:00:00 2001
From: Jordan Scales <scalesjordan@gmail.com>
Date: Tue, 21 Apr 2020 16:24:46 -0400
Subject: [PATCH] add groupbox documentation

---
 docs/index.html     | 116 ++++++++++++++++++++++++++++++++++++++++++--
 docs/index.html.ejs |  76 +++++++++++++++++++++++++++--
 2 files changed, 184 insertions(+), 8 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index cf11477..8a2877a 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -17,9 +17,10 @@
           <li><a href="#button">Button</a></li>
           <li><a href="#checkbox">Checkbox</a></li>
           <li><a href="#option-button">OptionButton</a></li>
-          <li><a href="#fieldset">Fieldset</a></li>
+          <li><a href="#group-box">GroupBox</a></li>
           <li><a href="#text-box">TextBox</a></li>
           <li><a href="#multiline-text-box">Multiline TextBox</a></li>
+          <li><a href="#dropdown">Dropdown</a></li>
           <li>
             <a href="#dialog">Dialog</a>
             <ul>
@@ -96,7 +97,7 @@
           A <em>command button</em>, also referred to as a push button, is a control
           that causes the application to perform some action when the user clicks it.
 
-          <footer>&mdash; Microsoft Windows User Experience, 8.1</footer>
+          <footer>&mdash; Microsoft Windows User Experience p. 160</footer>
         </blockquote>
 
         <p>
@@ -159,7 +160,7 @@
       <div>
         <blockquote>
           A <em>check box</em> represents an independent or non-exclusive choice.
-          <footer>&mdash; Microsoft Windows User Experience, 8.3</footer>
+          <footer>&mdash; Microsoft Windows User Experience p. 167</footer>
         </blockquote>
 
         <p>
@@ -235,9 +236,13 @@
           choice within a limited set of mutually exclusive choices. That is, the user can choose only
           one set of options.
 
-          <footer>&mdash; Microsoft Windows User Experience, 8.2</footer>
+          <footer>&mdash; Microsoft Windows User Experience p. 164</footer>
         </blockquote>
 
+        <p>
+          Option buttons can be used via the <code>radio</code> type on an input element.
+        </p>
+
         <p>
           Option buttons can be grouped by specifying a shared <code>name</code> attribute on each
           input. Just as before: when grouping inputs, wrap each input in a container with the
@@ -302,6 +307,109 @@
   </div>
       </div>
     </section>
+
+    <section class="component">
+      <h3 id="group-box">GroupBox</h3>
+      <div>
+        <blockquote>
+          A <em>group box</em> is a special control you can use to organize a set of
+          controls. A group box is a rectangular frame with an optional label that surrounds
+          a set of controls.
+
+          <footer>&mdash; Microsoft Windows User Experience p. 189</footer>
+        </blockquote>
+
+        <p>
+          A group box can be used by wrapping your elements with the <code>fieldset</code> tag.
+          It contains a sunken outer border and a raised inner border, resembling an engraved box
+          around your controls.
+        </p>
+
+        <div class="example">
+    <fieldset>
+  <div class="field-row">Select one:</div>
+  <div class="field-row">
+    <input id="radio10" type="radio" name="fieldset-example">
+    <label for="radio10">Diners</label>
+  </div>
+  <div class="field-row">
+    <input id="radio11" type="radio" name="fieldset-example">
+    <label for="radio11">Drive-Ins</label>
+  </div>
+  <div class="field-row">
+    <input id="radio12" type="radio" name="fieldset-example">
+    <label for="radio12">Dives</label>
+  </div>
+</fieldset>
+    <details>
+      <summary>Show code</summary>
+      <pre><code><span class="hljs-tag">&lt;<span class="hljs-name">fieldset</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>&gt;</span>Select one:<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio10"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"fieldset-example"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio10"</span>&gt;</span>Diners<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio11"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"fieldset-example"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio11"</span>&gt;</span>Drive-Ins<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio12"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"fieldset-example"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio12"</span>&gt;</span>Dives<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">fieldset</span>&gt;</span></code></pre>
+    </details>
+  </div>
+
+        <p>
+          You can provide your group with a label by placing a <code>legend</code> element
+          within the <code>fieldset</code>.
+        </p>
+
+        <div class="example">
+    <fieldset>
+  <legend>Today's mood</legend>
+  <div class="field-row">
+    <input id="radio13" type="radio" name="fieldset-example2">
+    <label for="radio13">Claire Saffitz</label>
+  </div>
+  <div class="field-row">
+    <input id="radio14" type="radio" name="fieldset-example2">
+    <label for="radio14">Brad Leone</label>
+  </div>
+  <div class="field-row">
+    <input id="radio15" type="radio" name="fieldset-example2">
+    <label for="radio15">Chris Morocco</label>
+  </div>
+  <div class="field-row">
+    <input id="radio16" type="radio" name="fieldset-example2">
+    <label for="radio16">Carla Lalli Music</label>
+  </div>
+</fieldset>
+    <details>
+      <summary>Show code</summary>
+      <pre><code><span class="hljs-tag">&lt;<span class="hljs-name">fieldset</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">legend</span>&gt;</span>Today's mood<span class="hljs-tag">&lt;/<span class="hljs-name">legend</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio13"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"fieldset-example2"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio13"</span>&gt;</span>Claire Saffitz<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio14"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"fieldset-example2"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio14"</span>&gt;</span>Brad Leone<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio15"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"fieldset-example2"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio15"</span>&gt;</span>Chris Morocco<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio16"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"fieldset-example2"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio16"</span>&gt;</span>Carla Lalli Music<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">fieldset</span>&gt;</span></code></pre>
+    </details>
+  </div>
+      </div>
   </main>
 </body>
 </html>
diff --git a/docs/index.html.ejs b/docs/index.html.ejs
index 99c9914..4b04073 100644
--- a/docs/index.html.ejs
+++ b/docs/index.html.ejs
@@ -17,9 +17,10 @@
           <li><a href="#button">Button</a></li>
           <li><a href="#checkbox">Checkbox</a></li>
           <li><a href="#option-button">OptionButton</a></li>
-          <li><a href="#fieldset">Fieldset</a></li>
+          <li><a href="#group-box">GroupBox</a></li>
           <li><a href="#text-box">TextBox</a></li>
           <li><a href="#multiline-text-box">Multiline TextBox</a></li>
+          <li><a href="#dropdown">Dropdown</a></li>
           <li>
             <a href="#dialog">Dialog</a>
             <ul>
@@ -96,7 +97,7 @@
           A <em>command button</em>, also referred to as a push button, is a control
           that causes the application to perform some action when the user clicks it.
 
-          <footer>&mdash; Microsoft Windows User Experience, 8.1</footer>
+          <footer>&mdash; Microsoft Windows User Experience p. 160</footer>
         </blockquote>
 
         <p>
@@ -137,7 +138,7 @@
       <div>
         <blockquote>
           A <em>check box</em> represents an independent or non-exclusive choice.
-          <footer>&mdash; Microsoft Windows User Experience, 8.3</footer>
+          <footer>&mdash; Microsoft Windows User Experience p. 167</footer>
         </blockquote>
 
         <p>
@@ -193,9 +194,13 @@
           choice within a limited set of mutually exclusive choices. That is, the user can choose only
           one set of options.
 
-          <footer>&mdash; Microsoft Windows User Experience, 8.2</footer>
+          <footer>&mdash; Microsoft Windows User Experience p. 164</footer>
         </blockquote>
 
+        <p>
+          Option buttons can be used via the <code>radio</code> type on an input element.
+        </p>
+
         <p>
           Option buttons can be grouped by specifying a shared <code>name</code> attribute on each
           input. Just as before: when grouping inputs, wrap each input in a container with the
@@ -234,6 +239,69 @@
         `) %>
       </div>
     </section>
+
+    <section class="component">
+      <h3 id="group-box">GroupBox</h3>
+      <div>
+        <blockquote>
+          A <em>group box</em> is a special control you can use to organize a set of
+          controls. A group box is a rectangular frame with an optional label that surrounds
+          a set of controls.
+
+          <footer>&mdash; Microsoft Windows User Experience p. 189</footer>
+        </blockquote>
+
+        <p>
+          A group box can be used by wrapping your elements with the <code>fieldset</code> tag.
+          It contains a sunken outer border and a raised inner border, resembling an engraved box
+          around your controls.
+        </p>
+
+        <%- example(`
+          <fieldset>
+            <div class="field-row">Select one:</div>
+            <div class="field-row">
+              <input id="radio${getNewId()}" type="radio" name="fieldset-example">
+              <label for="radio${getCurrentId()}">Diners</label>
+            </div>
+            <div class="field-row">
+              <input id="radio${getNewId()}" type="radio" name="fieldset-example">
+              <label for="radio${getCurrentId()}">Drive-Ins</label>
+            </div>
+            <div class="field-row">
+              <input id="radio${getNewId()}" type="radio" name="fieldset-example">
+              <label for="radio${getCurrentId()}">Dives</label>
+            </div>
+          </fieldset>
+        `) %>
+
+        <p>
+          You can provide your group with a label by placing a <code>legend</code> element
+          within the <code>fieldset</code>.
+        </p>
+
+        <%- example(`
+          <fieldset>
+            <legend>Today's mood</legend>
+            <div class="field-row">
+              <input id="radio${getNewId()}" type="radio" name="fieldset-example2">
+              <label for="radio${getCurrentId()}">Claire Saffitz</label>
+            </div>
+            <div class="field-row">
+              <input id="radio${getNewId()}" type="radio" name="fieldset-example2">
+              <label for="radio${getCurrentId()}">Brad Leone</label>
+            </div>
+            <div class="field-row">
+              <input id="radio${getNewId()}" type="radio" name="fieldset-example2">
+              <label for="radio${getCurrentId()}">Chris Morocco</label>
+            </div>
+            <div class="field-row">
+              <input id="radio${getNewId()}" type="radio" name="fieldset-example2">
+              <label for="radio${getCurrentId()}">Carla Lalli Music</label>
+            </div>
+          </fieldset>
+        `) %>
+      </div>
   </main>
 </body>
 </html>