Merge pull request #514 from rackerlabs/free-friday-refactor-test-spec-files

free-friday-refactor-test-spec-files

Author: Catherine Siller

docs/components/button/test.html

@@ -5,6 +5,7 @@
     label: Button
 ---
 {% extends 'test.njk' %}
+{% set contentClasses = 'button-spec' %}
 
 {% block content %}
   {% set variants = [

docs/components/choice-tile/index.html

@@ -107,7 +107,7 @@ <h2 id="basic-choice-tile">Basic Choice Tile</h2>
         </form>
       </header>
 
-      <div class="choice-tile-demo">
+      <div>
         <label class="hxChoice">
           <input
             name="foo"

docs/components/choice-tile/test.html

@@ -10,7 +10,7 @@
   <section>
     <h2>Default</h2>
     <code>input + hx-tile</code>
-    <div class="hxRow choice-tile-demo">
+    <div class="hxRow choice-tile-spec">
       <!-- input -->
       <label class="hxChoice">
         <input type="radio" name="default1" />
@@ -55,7 +55,7 @@ <h2>Default</h2>
   <section>
     <h2>Subdued</h2>
     <code>input + hx-tile.hxSubdued</code>
-    <div class="hxRow choice-tile-demo">
+    <div class="hxRow choice-tile-spec">
       <!-- input + .hxSubdued -->
       <label class="hxChoice">
         <input type="radio" name="subdued1" />
@@ -100,7 +100,7 @@ <h2>Subdued</h2>
   <section>
     <h2>Checked</h2>
     <code>input:checked + hx-tile</code>
-    <div class="hxRow choice-tile-demo">
+    <div class="hxRow choice-tile-spec">
       <!-- input:checked -->
       <label class="hxChoice">
         <input type="radio" name="checked1" checked />
@@ -146,7 +146,7 @@ <h2>Checked</h2>
     <h2>Checked + Subdued</h2>
     <code>input:checked + hx-tile.hxSubdued</code>
     <p>Checked should override Subdued</p>
-    <div class="hxRow choice-tile-demo">
+    <div class="hxRow choice-tile-spec">
       <!-- input:checked + .hxSubdued -->
       <label class="hxChoice">
         <input type="radio" name="checkSub1" checked />
@@ -191,7 +191,7 @@ <h2>Checked + Subdued</h2>
   <section>
     <h2>Invalid</h2>
     <code>input[invalid] + hx-tile</code>
-    <div class="hxRow choice-tile-demo">
+    <div class="hxRow choice-tile-spec">
       <!-- input[invalid] -->
       <label class="hxChoice">
         <input type="radio" name="invalid1" invalid />
@@ -237,7 +237,7 @@ <h2>Invalid</h2>
     <h2>Invalid + Subdued</h2>
     <code>input[invalid] + hx-tile.hxSubdued</code>
     <p>Invalid should override Subdued</p>
-    <div class="hxRow choice-tile-demo">
+    <div class="hxRow choice-tile-spec">
       <!-- input[invalid] + .hxSubdued -->
       <label class="hxChoice">
         <input type="radio" name="invalidSub1" invalid />
@@ -281,7 +281,7 @@ <h2>Invalid + Subdued</h2>
 
   <section>
     <h2>Disabled</h2>
-    <div class="hxRow choice-tile-demo">
+    <div class="hxRow choice-tile-spec">
       <!-- input[disabled] -->
       <label class="hxChoice">
         <input type="radio" name="disabled1" disabled />
@@ -314,7 +314,7 @@ <h2>Disabled</h2>
     <h2>Invalid + Checked</h2>
     <code>input[invalid]:checked + hx-tile</code>
     <p>Invalid should override Checked</p>
-    <div class="hxRow choice-tile-demo">
+    <div class="hxRow choice-tile-spec">
       <!-- input[invalid]:checked -->
       <label class="hxChoice">
         <input type="radio" name="invalidCheck1" invalid checked />
@@ -360,7 +360,7 @@ <h2>Invalid + Checked</h2>
     <h2>Invalid + Checked + Subdued</h2>
     <code>input[invalid]:checked + hx-tile</code>
     <p>Invalid should override Checked and Subdued</p>
-    <div class="hxRow choice-tile-demo">
+    <div class="hxRow choice-tile-spec">
       <!-- input[invalid]:checked + .hxSubdued -->
       <label class="hxChoice">
         <input type="radio" name="invChkSub1" invalid checked />
@@ -406,7 +406,7 @@ <h2>Invalid + Checked + Subdued</h2>
     <h2>Disabled + Checked</h2>
     <code>input[disabled] + hx-tile</code>
     <p>Disabled should override Checked</p>
-    <div class="hxRow choice-tile-demo">
+    <div class="hxRow choice-tile-spec">
       <!-- input[disabled]:checked -->
       <label class="hxChoice">
         <input type="radio" name="disChk1" disabled checked />
@@ -439,7 +439,7 @@ <h2>Disabled + Checked</h2>
     <h2>Disabled + Invalid</h2>
     <code>input[disabled][invalid] + hx-tile</code>
     <p>Disabled should override Invalid</p>
-    <div class="hxRow choice-tile-demo">
+    <div class="hxRow choice-tile-spec">
       <!-- input[disabled][invalid] -->
       <label class="hxChoice">
         <input type="radio" name="invDis1" disabled invalid />
@@ -472,7 +472,7 @@ <h2>Disabled + Invalid</h2>
     <h2>Disabled + Invalid + Checked</h2>
     <code>input[disabled][invalid]:checked + hx-tile</code>
     <p>Disabled should override Invalid and Checked</p>
-    <div class="hxRow choice-tile-demo">
+    <div class="hxRow choice-tile-spec">
       <!-- input[disabled][invalid]:checked -->
       <label class="hxChoice">
         <input type="radio" name="invChkDis1" disabled invalid checked />

docs/components/popover/test.html

@@ -5,6 +5,7 @@
     label: Popover
 ---
 {% extends 'test.njk' %}
+{% set contentClasses = 'popover-spec' %}
 
 {% block content %}
   {# TODO: Write tests to set shadow position on open and render. #}
@@ -264,7 +265,7 @@ <h2>HTML5-compatible ID</h2>
     </hx-popover>
   </section>
 
-  <section id="popover-in-scrolling-container" class="test">
+  <section id="popover-in-scrolling-container">
     <h2>Within Scrollable Container</h2>
     <ul class="hxList">
       <li>TODO: Should we hide the popover when its relative element isn't visible (scrolls out of view)?</li>

docs/docs.less

@@ -425,20 +425,20 @@ min-version {
 
 // Import from docs/styles/*
 @import 'demo/box-docs';
-@import 'demo/button-docs';
-@import 'demo/choice-tiles-docs';
 @import 'demo/grid-docs';
 @import 'demo/icon-docs';
 @import 'demo/nav-docs';
 @import 'demo/panel-docs';
-@import 'demo/popover-docs';
 @import 'demo/tabset-docs';
 @import 'demo/tooltip-docs';
 @import 'demo/typography-docs';
 // Spec Styles
+@import 'spec/button-spec';
 @import 'spec/checkbox-spec';
+@import 'spec/choice-tile-spec';
 @import 'spec/dropdown-select-spec';
 @import 'spec/panel-spec';
+@import 'spec/popover-spec';
 @import 'spec/radio-spec';
 @import 'spec/text-input-spec';
 @import 'spec/textarea-spec';

docs/styles/demo/button-docs.less

@@ -0,0 +1,43 @@
+@import (reference) 'components/buttons';
+
+.button-spec {
+  .hxBtn {
+    &[class*="pseudo"] {
+      pointer-events: none;
+    }
+
+    &.pseudo-hover:extend(.hxBtn:hover) {}
+    &.pseudo-active:extend(.hxBtn:active) {}
+    &.pseudo-focus:extend(.hxBtn:focus) {}
+
+    &.hxPrimary {
+      &.pseudo-hover:extend(.hxBtn.hxPrimary:hover) {}
+      &.pseudo-active:extend(.hxBtn.hxPrimary:active) {}
+      &.pseudo-focus:extend(.hxBtn.hxPrimary:focus) {}
+    }
+
+    &.hxTertiary {
+      &.pseudo-hover:extend(.hxBtn.hxTertiary:hover) {}
+      &.pseudo-active:extend(.hxBtn.hxTertiary:active) {}
+      &.pseudo-focus:extend(.hxBtn.hxTertiary:focus) {}
+    }
+
+    a[href]& {
+      &.pseudo-hover:extend(a[href].hxBtn:hover) {}
+      &.pseudo-active:extend(a[href].hxBtn:active) {}
+      &.pseudo-focus::extend(a[href].hxBtn:focus) {}
+
+      &.hxPrimary {
+        &.pseudo-hover:extend(a[href].hxBtn.hxPrimary:hover) {}
+        &.pseudo-active:extend(a[href].hxBtn.hxPrimary:active) {}
+        &.pseudo-focus:extend(a[href].hxBtn.hxPrimary:focus) {}
+      }
+
+      &.hxTertiary {
+        &.pseudo-hover:extend(a[href].hxBtn.hxTertiary:hover) {}
+        &.pseudo-active:extend(a[href].hxBtn.hxTertiary:active) {}
+        &.pseudo-focus:extend(a[href].hxBtn.hxTertiary:focus) {}
+      }
+    }
+  }
+}

docs/styles/demo/popover-docs.less

@@ -1,6 +1,6 @@
 @import (reference) 'components/choice-tiles';
 
-.choice-tile-demo {
+.choice-tile-spec {
   label.hxChoice > input {
     /* Default (focus, hover) */
     &.pseudo-focus + hx-tile {

docs/styles/spec/button-spec.less

@@ -0,0 +1,21 @@
+.popover-spec {
+  #popover-in-scrolling-container {
+    hx-div[scroll="vertical"] {
+      border: 1px solid;
+      height: 15rem; // 240px
+      width: 30rem; // 480px
+    }
+  }
+
+  .popover-appearance {
+    display: flex;
+    flex-wrap: wrap;
+    z-index: 0;
+
+    hx-popover {
+      display: block;
+      margin: 20px;
+      position: relative;
+    }
+  }
+}