Merge pull request #276 from rackerlabs/feat-add-declarative-methods

Add declarative functionality

Author: CITguy

docs/components/search/test.html

@@ -0,0 +1,43 @@
+---
+title: Testing - Search
+---
+{% extends 'test.njk' %}
+{% block content %}
+  <section>
+    <h2>Declarative APIs</h2>
+    <div class="hxRow">
+      <div class="hxCol hxSpan-4">
+        <p>
+          <hx-search id="testSearch"></hx-search>
+        </p>
+        <p>
+          <button class="hxBtn" type="button" id="btnFocus">focus()</button>
+          <button class="hxBtn" type="button" id="btnClear">clear()</button>
+          <button class="hxBtn" type="button" id="btnFocusThenBlur">focus() (blur() after 2s)</button>
+        </p>
+      </div>
+    </div>
+  </section>
+
+  <script>
+    (function () {
+      let elSearch = document.getElementById('testSearch');
+
+      document.getElementById('btnFocus').addEventListener('click', function () {
+        elSearch.focus();
+      });
+
+      document.getElementById('btnClear').addEventListener('click', function () {
+        elSearch.clear();
+      });
+
+      document.getElementById('btnFocusThenBlur').addEventListener('click', function () {
+        elSearch.focus();
+
+        setTimeout(function () {
+          elSearch.blur();
+        }, 2000);
+      });
+    })();
+  </script>
+{% endblock %}

docs/elements/hx-accordion/index.html

@@ -51,15 +51,15 @@ <h2 id="modes">Modes</h2>
   <section>
     <h2 id="methods">Methods</h2>
     <dl>
-      <dt>nextPanel()</dt>
+      <dt>selectNext()</dt>
       <dd>
         Opens the next sibling panel.
         <br />
         <hx-icon type="exclamation-triangle"></hx-icon>
         Requires the <code>current-panel</code> attribute to be present.
       </dd>
 
-      <dt>previousPanel()</dt>
+      <dt>selectPrevious()</dt>
       <dd>
         Opens the previous sibling panel.
         <br />

docs/elements/hx-alert/index.html

@@ -40,7 +40,11 @@
     <h2 id="methods">Methods</h2>
     <dl>
       <dt>dismiss()</dt>
-      <dd>Dismisses the alert.</dd>
+      <dd>Dismiss the alert (removes element from the DOM).</dd>
+    </dl>
+    <dl>
+      <dt>submit()</dt>
+      <dd>Simulates a mouse click on the CTA.</dd>
     </dl>
   </section>
 {% endblock %}

docs/elements/hx-checkbox/index.html

@@ -27,6 +27,14 @@
       </hx-def>
     </hx-dl>
   </section>
+
+  <section>
+    <h2 id="methods">Methods</h2>
+    <dl>
+      <dt>click()</dt>
+      <dd>Simulates a mouse click on the element</dd>
+    </dl>
+  </section>
 {% endblock %}
 
 {% block attributes %}

docs/elements/hx-disclosure/index.html

@@ -41,6 +41,14 @@ <h2 id="target-element">Target Element</h2>
       </li>
     </ol>
   </section>
+
+  <section>
+    <h2 id="methods">Methods</h2>
+    <dl>
+      <dt>click()</dt>
+      <dd>Simulates a mouse click on the element</dd>
+    </dl>
+  </section>
 {% endblock %}
 
 {% block attributes %}

docs/elements/hx-file-tile/index.html

@@ -9,7 +9,7 @@
 
   <section>
     <p>
-      The custom <code>{{page.title}}</code> element describes the states of 
+      The custom <code>{{page.title}}</code> element describes the states of
       a downloadable asset.
     </p>
 
@@ -38,6 +38,14 @@
       </hx-def>
     </hx-dl>
   </section>
+
+  <section>
+    <h2 id="methods">Methods</h2>
+    <dl>
+      <dt>dismiss()</dt>
+      <dd>Simulates a mouse click on the dismiss button (i.e., clicking the "X")</dd>
+    </dl>
+  </section>
 {% endblock %}
 
 {% block attributes %}

docs/elements/hx-pill/index.html

@@ -39,7 +39,7 @@
     <h2 id="methods">Methods</h2>
     <dl>
       <dt>dismiss()</dt>
-      <dd>Dismisses the pill.</dd>
+      <dd>Dismiss the pill (removes element from the DOM).</dd>
     </dl>
   </section>
 {% endblock %}

docs/elements/hx-search/index.html

@@ -35,6 +35,17 @@
       </hx-def>
     </hx-dl>
   </section>
+
+  <section>
+    <h2 id="methods">Methods</h2>
+    <dl>
+      <dt>focus()</dt>
+      <dd>Overrides default HTMLElement behavior to focus the input in the Shadow DOM.</dd>
+
+      <dt>clear()</dt>
+      <dd>Simulates pressing "x" to clear the value of the input.</dd>
+    </dl>
+  </section>
 {% endblock %}
 
 {% block attributes %}

docs/elements/hx-tabset/index.html

@@ -42,6 +42,24 @@
       </hx-def>
     </hx-dl>
   </section>
+
+  <section>
+    <h2 id="methods">Methods</h2>
+    <dl>
+      <dt>selectNext()</dt>
+      <dd>
+        Selects the next tab in the tabset. If the last tab is currently active,
+        selects the first tab.
+      </dd>
+    </dl>
+    <dl>
+      <dt>selectPrevious()</dt>
+      <dd>
+        Selects the previous tab in the tabset. If the first tab is currently
+        active, selects the last tab.
+      </dd>
+    </dl>
+  </section>
 {% endblock %}
 
 {% block attributes %}

docs/elements/hx-toast/index.html

@@ -41,7 +41,11 @@
     <h2 id="methods">Methods</h2>
     <dl>
       <dt>dismiss()</dt>
-      <dd>Dismisses the toast.</dd>
+      <dd>Dismiss the toast (removes element from the DOM).</dd>
+    </dl>
+    <dl>
+      <dt>submit()</dt>
+      <dd>Simulate a mouse click on the CTA button.</dd>
     </dl>
   </section>
 {% endblock %}