feature(choice-tiles): added choice tiles component per design spec

Author: Cathy Siller

docs/_data/nav.json5

@@ -24,6 +24,7 @@
             { label: 'Busy', path: 'busy' },
             { label: 'Buttons', path: 'buttons' },
             { label: 'Checkboxes', path: 'checkboxes' },
+            { label: 'Choice Tiles', path: 'choice-tiles' },
             //{ label: 'Colors', path: 'colors' },
             { label: 'Grid', path: 'grid' },
             { label: 'Icons', path: 'icons' },
@@ -83,6 +84,9 @@
             { label: '<hx-tablist>', path: 'hx-tablist' },
             { label: '<hx-tabpanel>', path: 'hx-tabpanel' },
             { label: '<hx-tabset>', path: 'hx-tabset' },
+            { label: '<hx-tile>', path: 'hx-tile' },
+            { label: '<hx-tile-description>', path: 'hx-tile-description' },
+            { label: '<hx-tile-title>', path: 'hx-tile-title' },
             { label: '<hx-tooltip>', path: 'hx-tooltip' },
         ],
     },

docs/_templates/test.njk

@@ -0,0 +1,11 @@
+{% extends 'application.njk' %}
+
+{% block layout %}
+  <main id="content" class="hxBox-md">
+    <h1>{{ page.title }}</h1>
+
+    {% block content %}
+      {# freeform page content goes here #}
+    {% endblock %}
+  </main>
+{% endblock %}

docs/components/choice-tiles/choice-tile-demo.js

@@ -0,0 +1,63 @@
+import Util from '../../_util';
+
+if (document.getElementById('vue-choiceDemo')) {
+    new Vue({
+        el: '#vue-choiceDemo',
+        data: {
+            size: {
+                label: 'Default',
+                value: '',
+            },
+            sizes: [
+                { value: 'hxSm', label: 'Small' },
+                { value: '', label: 'Default' },
+                { value: 'hxLg', label: 'Large' },
+            ],
+            description: 'A couple of descriptive lines or a small bit of help text.',
+            isChecked: false,
+            isDisabled: false,
+            isInvalid: false,
+            isSubdued: false,
+        },
+        methods: {
+            onClick: function (evt) {
+                this.isChecked = evt.target.checked;
+            },
+        },
+        computed: {
+            tileClasses: function () {
+                let out = [];
+                out.push(this.size.value);
+                if (this.isSubdued) {
+                    out.push('hxSubdued');
+                }
+                return out.join(' ').trim();
+            },
+            hasClasses: function () {
+                return (this.tileClasses !== '');
+            },
+            snippet: function () {
+                return Util.snippet(`
+                  <label class="hxChoice">
+                    <input type="radio"
+                        ${this.isChecked ? 'checked' : ''}
+                        ${this.isDisabled ? 'disabled' : ''}
+                        ${this.isInvalid ? 'invalid' : ''}>
+                    <hx-tile ${this.hasClasses ? `class="${this.tileClasses}"` : ''}>
+                      <hx-icon type="checkmark"></hx-icon>
+                      <div class="hx-tile-icon">
+                        <hx-icon type="account"></hx-icon>
+                      </div>    
+                      <hx-tile-title>
+                      Title here
+                      </hx-tile-title>
+                      <hx-tile-description>
+                        ${this.description}
+                      </hx-tile-description>
+                    </hx-tile>
+                  </label>
+                `);
+            },
+        },
+    });
+}

docs/components/choice-tiles/index.html

@@ -0,0 +1,70 @@
+---
+title: Choice Tiles
+also:
+  elements/hx-tile: <hx-tile>
+  elements/hx-tile-title: <hx-tile-title>
+  elements/hx-tile-description: <hx-tile-description>
+---
+{% extends 'component.njk' %}
+{% block content %}
+
+<section>
+  <h2 id="demos">Demos</h2>
+  <div id="vue-choiceDemo" class="hxRow" v-cloak>
+    <div class="hxCol hxSpan-12-xs hxSpan-3-lg hxOrder-2-lg">
+      <h3>Options</h3>
+      <p>
+        <b>Size:</b><br />
+        <select v-model="size">
+          <option v-for="_size in sizes" :value="_size">
+            {% raw %}{{ _size.label }}{% endraw %}
+          </option>
+        </select>
+      </p>
+      <p>
+        <b>Description:</b><br />
+        <textarea class="hxTextCtrl" v-model="description"></textarea>
+      </p>
+      <p>
+        <label>
+          <input type="checkbox" v-model="isChecked" />
+          Checked
+        </label><br />
+        <label>
+          <input type="checkbox" v-model="isDisabled" />
+          Disabled
+        </label><br />
+        <label>
+          <input type="checkbox" v-model="isInvalid" />
+          Invalid
+        </label><br />
+        <label>
+          <input type="checkbox" v-model="isSubdued" />
+          Subdued
+        </label>
+      </p>
+    </div>
+    <div class="hxCol hxSpan-12-xs hxSpan-9-lg hxOrder-1-lg">
+      <h3>Basic Choice Tile</h3>
+      <div class="demo choice-tile-demo">
+        <label class="hxChoice">
+          <input type="radio" name="foo"
+            @click="onClick"
+            :checked="isChecked"
+            :disabled="isDisabled"
+            :invalid="isInvalid" />
+          <hx-tile :class="tileClasses">
+            <hx-icon type="checkmark"></hx-icon>
+            <div class="hx-tile-icon">
+              <hx-icon type="account"></hx-icon>
+            </div>
+            <hx-tile-title>Title Here</hx-tile-title>
+            <hx-tile-description v-text="description"></hx-tile-description>
+          </hx-tile>
+        </label>
+      </div>
+      <pre><code>{% raw %}{{snippet}}{% endraw %}</code></pre>
+    </div>
+  </div>
+</section>
+{% endblock %}