feat(pills): add styles for search pills

Author: Cathy Siller

docs/_data/nav.json5

@@ -44,6 +44,7 @@
             { label: 'Modals', path: 'modals' },
             { label: 'Panels', path: 'panels' },
             { label: 'Pagination', path: 'pagination' },
+            { label: 'Pills', path: 'pills' },
             { label: 'Popovers', path: 'popovers' },
             { label: 'Progress', path: 'progress' },
             { label: 'Reveals', path: 'reveals' },
@@ -85,6 +86,7 @@
             { label: '<hx-panelbody>', path: 'hx-panelbody' },
             { label: '<hx-panelfoot>', path: 'hx-panelfoot' },
             { label: '<hx-panelhead>', path: 'hx-panelhead' },
+            { label: '<hx-pill>', path: 'hx-pill' },
             { label: '<hx-popover>', path: 'hx-popover' },
             { label: '<hx-popover-body>', path: 'hx-popover-body' },
             { label: '<hx-popover-foot>', path: 'hx-popover-foot' },

docs/components/pills/index.html

@@ -0,0 +1,35 @@
+---
+title: Pills
+also:
+  elements/hx-pill: <hx-pill>
+---
+{% extends 'component.njk' %}
+{% block content %}
+  <section>
+    <h2 id="basic-pill">Basic Pill</h2>
+    <div id="vue-pillDemo" class="hxRow" v-cloak>
+      <div class="hxCol hxSpan-12-xs hxSpan-3-lg hxOrder-2-lg">
+        <h3>Options</h3>
+        <p>
+          <label>
+            <input type="checkbox" v-model="isDismissable">
+            Dismissable
+          </label>
+        </p>
+        <p>
+          <b>Content:</b><br />
+          <textarea class="hxTextCtrl" v-model="content"></textarea>
+        </p>
+      </div>
+      <div class="hxCol hxSpan-12-xs hxSpan-9-lg hxOrder-1-lg">
+        <div class="demo pill-demo">
+          <hx-pill
+            :dismissable="isDismissable"
+            v-text="content">
+          </hx-pill>
+        </div>
+        <pre><code>{% raw %}{{snippet}}{% endraw %}</code></pre>
+      </div>
+    </div>
+  </section>
+{% endblock %}

docs/components/pills/pill-demo.js

@@ -0,0 +1,22 @@
+import Util from '../../_util';
+
+if (document.getElementById('vue-pillDemo')) {
+    new Vue({
+        el: '#vue-pillDemo',
+        data: {
+            content: 'status: unicorns!',
+            isDismissable: false,
+        },
+        computed: {
+            snippet: function () {
+                return Util.snippet(`
+                    <hx-pill
+                        ${this.isDismissable ? 'dismissable' : ''}
+                    >
+                        ${this.content}
+                    </hx-pill>
+                `);
+            },
+        },
+    });
+}

docs/components/toasts/index.html

@@ -41,7 +41,7 @@ <h3>Options</h3>
         </p>
       </div>
       <div class="hxCol hxSpan-12-xs hxSpan-9-lg hxOrder-1-lg">
-        <div class="demo alert-demo">
+        <div class="demo toast-demo">
           <hx-toast
             :type="type.value"
             :cta="cta"

docs/docs.js

@@ -10,6 +10,7 @@ import './components/choice-tiles/choice-tile-demo';
 import './components/icons/icon-demo';
 import './components/lists/list-demo';
 import './components/panels/panel-demo';
+import './components/pills/pill-demo';
 import './components/popovers/popover-demo';
 import './components/progress/progress-demo';
 import './components/reveals/reveal-demo';

docs/elements/hx-pill/index.html

@@ -0,0 +1,62 @@
+---
+title: <hx-pill>
+also:
+  components/pills: Pills
+---
+{% extends 'element.njk' %}
+{% block content %}
+  <section>
+    <p>
+      The custom <code>{{page.title}}</code> element provides a pill-like 
+      element that can be optionally dismissed.
+    </p>
+
+    <hx-dl class="hxBox-md metadata">
+      <hx-def>
+        <hx-dt>Permitted Parents</hx-dt>
+        <hx-dd>any</hx-dd>
+      </hx-def>
+      <hx-def>
+        <hx-dt>Permitted Children</hx-dt>
+        <hx-dd>phrasing content</hx-dd>
+      </hx-def>
+      <hx-def>
+        <hx-dt>Events</hx-dt>
+        <hx-dd>
+          Any of the following:
+          <ul>
+            <li>
+              <code>dismiss</code> - User presses "X" to dismiss the pill.
+            </li>
+          </ul>
+        </hx-dd>
+      </hx-def>
+    </hx-dl>
+  </section>
+
+  <section>
+    <h2 id="methods">Methods</h2>
+    <dl>
+      <dt>dismiss()</dt>
+      <dd>Dismisses the pill.</dd>
+    </dl>
+  </section>
+{% endblock %}
+
+{% block attributes %}
+  <dl>
+    <dt>dismissable {Boolean=false} <i>(optional)</i></dt>
+    <dd>
+      When present, pill will be dismissable.
+    </dd>
+  </dl>
+{% endblock %}
+
+{% block properties %}
+  <dl>
+    <dt>dismissable {Boolean=false}</dt>
+    <dd>
+      When <code>true</code>, pill will be dismissable.
+    </dd>
+  </dl>
+{% endblock %}

src/helix-ui/elements.js

@@ -14,6 +14,7 @@ export { HXIconElement } from './elements/HXIconElement.js';
 export { HXMenuElement } from './elements/HXMenuElement.js';
 export { HXMenuitemElement } from './elements/HXMenuitemElement.js';
 export { HXModalElement } from './elements/HXModalElement.js';
+export { HXPillElement } from './elements/HXPillElement.js';
 export { HXPopoverElement } from './elements/HXPopoverElement.js';
 export { HXProgressElement } from './elements/HXProgressElement.js';
 export { HXRevealElement } from './elements/HXRevealElement.js';

src/helix-ui/elements/HXPillElement.html

@@ -0,0 +1,6 @@
+<div id="wrapper">
+  <slot></slot>
+  <button id="dismiss" type="button">
+    <hx-icon type="times"></hx-icon>
+  </button>
+</div>

src/helix-ui/elements/HXPillElement.js

@@ -0,0 +1,54 @@
+import { HXElement } from './HXElement';
+import shadowMarkup from './HXPillElement.html';
+import shadowStyles from './HXPillElement.less';
+
+/**
+ * Fires when the user triggers the dismiss button.
+ *
+ * @event Pills:dismiss
+ * @type {CustomEvent}
+ */
+
+export class HXPillElement extends HXElement {
+    static get is () {
+        return `hx-pill`;
+    }
+
+    static get template () {
+        return `<style>${shadowStyles}</style>${shadowMarkup}`;
+    }
+
+    $onCreate () {
+        this._onDismiss = this._onDismiss.bind(this);
+    }
+
+    $onConnect () {
+        this._btnDismiss.addEventListener('click', this._onDismiss);
+    }
+
+    $onDisconnect () {
+        this._btnDismiss.removeEventListener('click', this._onDismiss);
+    }
+
+    /**
+     * Programmatically dismiss the pill (removes element from the DOM).
+     */
+    dismiss () {
+        this.remove();
+    }
+
+    /** @private */
+    _onDismiss (evt) {
+        evt.preventDefault();
+
+        if (this.$emit('dismiss')) {
+            // only if event was not canceled by consumer
+            this.dismiss();
+        }
+    }
+
+    /** @private */
+    get _btnDismiss () {
+        return this.shadowRoot.getElementById('dismiss');
+    }
+}

src/helix-ui/elements/HXPillElement.less

@@ -0,0 +1,39 @@
+@import "./HXElement";
+@import "elements/hx-icon";
+
+button {
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  padding: 0;
+}
+
+#wrapper {
+  background-color: @gray-400;
+  border-radius: 1em; 
+  color: @gray-900;
+  padding: 0 1rem;
+  white-space: nowrap;
+}
+
+#dismiss {
+  color: @gray-600;
+  display: none;
+  height: 1.5em;
+  margin: 0 -0.5rem 0 0;
+  width: 1.5em;
+  
+  hx-icon {
+    font-size: 0.75em;
+  }
+
+  &:hover {
+    color: @gray-1000;
+  }
+}
+
+:host([dismissable]) {
+  #dismiss {
+    display: inline-block;
+  }
+}