Merge pull request #453 from rackerlabs/surf-1453-refactor-hx-checkbox

[^459] refactor(hx-checkbox): forms epic refactor hx-checkox and simplify

Author: CITguy

docs/components/checkboxes/checkbox-demo.js

@@ -4,26 +4,28 @@ if (document.getElementById('vue-checkboxDemo')) {
     new Vue({
         el: '#vue-checkboxDemo',
         data: {
-            isChecked: true,
+            isChecked: false,
             isDisabled: false,
             isIndeterminate: false,
-            isInvalid: false,
-        },
-        methods: {
-            onChange: function (evt) {
-                this.isChecked = evt.currentTarget.checked;
-            },
+            isRequired: false,
+            label: 'Check me out',
         },
         computed: {
             snippet: function () {
                 return Util.snippet(`
-                    <hx-checkbox
-                      ${this.isChecked ? 'checked' : ''}
-                      ${this.isDisabled ? 'disabled' : ''}
-                      ${this.isIndeterminate ? 'indeterminate' : ''}
-                      ${this.isInvalid ? 'invalid' : ''}
-                    >
-                    </hx-checkbox>
+                    <hx-checkbox-control>
+                      <input
+                        type="checkbox"
+                        id="chkDemo"
+                        ${this.isChecked ? 'checked' : ''}
+                        ${this.isDisabled ? 'disabled' : ''}
+                        ${this.isRequired ? 'required' : ''}
+                      />
+                      <label for="chkDemo">
+                        <hx-checkbox></hx-checkbox>
+                        ${this.label}
+                      </label>
+                    </hx-checkbox-control>
                 `);
             },
         },

docs/components/checkboxes/index.html

@@ -12,38 +12,66 @@ <h2 id="basic-checkbox">Basic Checkbox</h2>
     <div class="example" id="vue-checkboxDemo" 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>
-            <div>
+            <hx-checkbox-control>
               <input id="chkIsChecked" type="checkbox" v-model="isChecked" />
-              <label for="chkIsChecked">Checked</label>
-            </div>
-            <div>
+              <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">Disabled</label>
-            </div>
-            <div>
-              <input id="chkIsIndeterminate" type="checkbox" v-model="isIndeterminate" />
-              <label for="chkIsIndeterminate">Indeterminate</label>
-            </div>
-            <div>
-              <input id="chkIsInvalid" type="checkbox" v-model="isInvalid" />
-              <label for="chkIsInvalid">Invalid</label>
-            </div>
+              <label for="chkIsDisabled">
+                <hx-checkbox></hx-checkbox>
+                Disabled
+              </label>
+            </hx-checkbox-control>
+            <hx-checkbox-control>
+              <input id="chkIndeterminate" type="checkbox" v-model="isIndeterminate" />
+              <label for="chkIndeterminate">
+                <hx-checkbox></hx-checkbox>
+                Indeterminate
+              </label>
+              {% raw %}
+              <p>
+                <code>
+                  (el.indeterminate = {{ isIndeterminate }})
+                </code>
+              </p>
+              {% endraw %}
+            </hx-checkbox-control>
+            <hx-checkbox-control>
+              <input id="chkRequired" type="checkbox" v-model="isRequired" />
+              <label for="chkRequired">
+                <hx-checkbox></hx-checkbox>
+                Required
+              </label>
+            </hx-checkbox-control>
           </fieldset>
         </form>
       </header>
-
       <div>
-        <hx-checkbox
-          :checked="isChecked"
-          :disabled="isDisabled"
-          :indeterminate="isIndeterminate"
-          :invalid="isInvalid"
-          @change="onChange"
-        ></hx-checkbox>
+        <hx-checkbox-control>
+          <input
+            type="checkbox"
+            id="chkDemo"
+            :checked="isChecked"
+            :disabled="isDisabled"
+            :indeterminate.prop="isIndeterminate"
+            :required="isRequired"
+          />
+          <label for="chkDemo">
+            <hx-checkbox></hx-checkbox>
+            {% raw %}{{label}}{% endraw %}
+          </label>
+        </hx-checkbox-control>
       </div>
-
       <footer>
         <pre><code v-text="snippet"></code></pre>
       </footer>