Merge pull request #455 from rackerlabs/surf-584-forms-radio-button

[^459] feat(hx-radio-control): surf-584 phase I radio form control
HelixDesignSystem · Apr 3, 2019 · a574561 · a574561
2 parents a2ca506 + b17eda4
commit a574561
Show file tree

Hide file tree

Showing 8 changed files with 1,100 additions and 2 deletions.
diff --git a/docs/components/radios/index.html b/docs/components/radios/index.html
@@ -9,6 +9,63 @@
 {% block content %}
   <section>
     <h2 id="basic-radio">Basic Radio</h2>
-    <p>TBD</p>
+    <div class="example" id="vue-radioDemo" v-cloak>
+      <header>
+        <form class="beta-hxForm">
+          <p>
+            <label for="txtLabel">Label</label>
+            <input id="txtLabel" class="hxTextCtrl" v-model="label" />
+          </p>
+          <fieldset>
+            <legend class="beta-hxFieldName">Options</legend>
+            <hx-checkbox-control>
+              <input id="chkIsChecked" type="checkbox" v-model="isChecked" />
+              <label for="chkIsChecked">
+                <hx-checkbox></hx-checkbox>
+                Checked
+              </label>
+            </hx-checkbox-control>
+            <hx-checkbox-control>
+              <input id="chkIsDisabled" type="checkbox" v-model="isDisabled" />
+              <label for="chkIsDisabled">
+                <hx-checkbox></hx-checkbox>
+                Disabled
+              </label>
+            </hx-checkbox-control>
+            <hx-checkbox-control>
+              <input id="chkIsRequired" type="checkbox" v-model="isRequired" />
+              <label for="chkIsRequired">
+                <hx-checkbox></hx-checkbox>
+                Required
+              </label>
+            </hx-checkbox-control>
+          </fieldset>
+        </form>
+      </header>
+      <div>
+        <hx-radio-control>
+          <input
+            type="radio"
+            id="radDemo"
+            :checked="isChecked"
+            :disabled="isDisabled"
+            :required="isRequired"
+          />
+          <label for="radDemo">
+            <hx-radio></hx-radio>
+            {% raw %}{{label}}{% endraw %}
+          </label>
+        </hx-radio-control>
+      </div>
+      <footer>
+        <pre><code v-text="snippet"></code></pre>
+      </footer>
+    </div>
+    <p class="hxSubdued hxSubBody">
+      <hx-icon type="info-circle"></hx-icon>
+      Webkit-based browsers (e.g., Chrome, Safari, etc.) do not match the
+      <code>:required</code> CSS psuedo-class to radios in a single-item
+      radio group.
+    </p>
   </section>
 {% endblock %}
diff --git a/docs/components/radios/radio-demo.js b/docs/components/radios/radio-demo.js
@@ -0,0 +1,32 @@
+import Util from '../../_util';
+
+if (document.getElementById('vue-radioDemo')) {
+    new Vue({
+        el: '#vue-radioDemo',
+        data: {
+            isChecked: false,
+            isDisabled: false,
+            isRequired: false,
+            label: 'Radio Label',
+        },
+        computed: {
+            snippet: function () {
+                return Util.snippet(`
+                    <hx-radio-control>
+                      <input
+                        type="radio"
+                        id="radDemo"
+                        ${this.isChecked ? 'checked' : ''}
+                        ${this.isDisabled ? 'disabled' : ''}
+                        ${this.isRequired ? 'required' : ''}
+                      />
+                      <label for="radDemo">
+                        <hx-radio></hx-radio>
+                        ${this.label}
+                      </label>
+                    </hx-radio-control>
+                `);
+            },
+        },
+    });
+}