Merge branch 'gh-pages-dev' into gh-pages

USDA-FSA · Apr 22, 2019 · 284bce1 · 284bce1
2 parents f71320a + 0c45515
commit 284bce1
Show file tree

Hide file tree

Showing 89 changed files with 1,888 additions and 469 deletions.
diff --git a/_config.yml b/_config.yml
@@ -20,7 +20,7 @@ twitter_username: francisrupert
 github_username:  usda-fsa
 permalink: none
 github_repository_url: https://github.com/USDA-FSA/fsa-design-system
-fsa-style_version: 2.1.7
+fsa-style_version: 2.2.0
 
 # Site key assets
 stylesheets:

diff --git a/_includes/alert.rwd-rendering.html b/_includes/alert.rwd-rendering.html
@@ -1,7 +1,7 @@
 <div class="fsa-hide@l">
-  <div class="fsa-alert fsa-alert--info fsa-alert--no-icon" role="alert">
+  <div class="fsa-alert fsa-alert--info fsa-alert--no-icon">
     <div class="fsa-alert__body">
-      <p class="fsa-alert__text">View on a larger screen to fully appreciate Responsive Web Design rendering.</p>
+      <p class="fsa-alert__text">View on a <strong>larger</strong> screen to fully appreciate Responsive Web Design rendering.</p>
     </div>
   </div>
 </div>
diff --git a/_includes/alert.rwd-rendering__small.html b/_includes/alert.rwd-rendering__small.html
@@ -0,0 +1,7 @@
+<div class="fsa-show@l">
+  <div class="fsa-alert fsa-alert--info fsa-alert--no-icon">
+    <div class="fsa-alert__body">
+      <p class="fsa-alert__text">View on a <strong>narrow</strong> screen to fully appreciate Responsive Web Design rendering</p>
+    </div>
+  </div>
+</div>
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -12,7 +12,7 @@
       <hr>
       <ul class="fsa-list--inline">
         <li><a href="{{ site.github_repository_url }}/blob/gh-pages/{{ page.path }}" target="_blank">Edit this page on GitHub</a></li>
-        {% if jekyll.environment == "development" %}<li><a href="{{ site.url }}{{ site.baseurl }}{{ page.path | replace: '.md', '.html' }}" target="_blank">View page in Production</a></li>{% endif %}
+        {% if jekyll.environment == "development" %}<li><a href="http://usda-fsa.github.io{{ site.baseurl }}{{ page.path | replace: '.md', '.html' }}" target="_blank">View page in Production</a></li>{% endif %}
         <li><a href="{{ site.github_repository_url }}" target="_blank">GitHub Repo</a></li>
         <li><a href="{{ site.github_repository_url }}/issues" target="_blank">GitHub Issues</a></li>
         <li><a href="{{ site.baseurl }}sitemap">Sitemap</a></li>

diff --git a/_includes/header.html b/_includes/header.html
@@ -4,7 +4,12 @@
 <header>
   {% include disclaimer.html %}
   <div class="ds-header">
-    <div class="ds-header__title"><a href="{{ site.baseurl }}" class="ds-header__link" title="Home" aria-label="Home">FSA Design System</a></div>
+    <div class="ds-header__title">
+      <a href="{{ site.baseurl }}" class="ds-header__link" title="Home" aria-label="Home">
+        FSA Design System
+        <small class="ds-header__version" title="version {{site.fsa-style_version}} of fsa-style CSS Framework">fsa-style@{{ site.fsa-style_version }}</small>
+      </a>
+    </div>
     <div class="ds-header__bd">
       <div class="ds-header__nav">
         {% include nav-global.html %}

diff --git a/_includes/scripts.about.html b/_includes/scripts.about.html
@@ -6,7 +6,7 @@
   </div>
 </div>
 
-Script demonstrations are primarily UI-oriented, typically manipulating the HTML is basic ways (i.e. [DOM Scripting](http://alistapart.com/article/javascript-for-web-designers "A basic intro to DOM Scripting")). Two frequent examples:
+Script demonstrations are primarily UI-oriented, typically manipulating the HTML in basic ways (i.e. [DOM Scripting](http://alistapart.com/article/javascript-for-web-designers "A basic intro to DOM Scripting")). Two frequent examples:
 
 * Adding and/or removing a class, e.g. `addClass('component-name--active')`
 * Adding and/or removing an attribute, e.g. `setAttribute('aria-expanded', 'false')`
diff --git a/_sass/components/_ds.clipboard.scss b/_sass/components/_ds.clipboard.scss
@@ -1,3 +1,4 @@
+// scss-lint:disable QualifyingElement
 pre.highlight {
   position: relative;
 }
@@ -10,6 +11,7 @@ pre.highlight {
     top: $size-small;
   }
 
+  // scss-lint:disable EmptyRule
   &__btn {}
 
   &__success {
@@ -36,4 +38,4 @@ pre.highlight {
     opacity: 0;
     transform: translateY(125%);
   }
-}
+}
diff --git a/_sass/components/_ds.header.scss b/_sass/components/_ds.header.scss
@@ -80,6 +80,7 @@
 
   &__link {
 
+    display: inline-block;
     color: $color-fsa-white;
     text-decoration: none;
 
@@ -114,4 +115,9 @@
     }
   }
 
+  &__version {
+    color: $color-fsa-primary-200;
+    font-size: 66%;
+  }
+
 }
diff --git a/_sass/components/_ds.preview.scss b/_sass/components/_ds.preview.scss
@@ -49,10 +49,12 @@
 
 }
 
+// scss-lint:disable QualifyingElement
 .ds-show-da-code div.highlighter-rouge {
   display: block;
 }
 
+// scss-lint:disable SelectorFormat
 .highlighter-rouge + .docs__utilities__demo {
   @include breakpoint(S) {
     margin-top: -34px; // yeah, magic number, wheee!

diff --git a/_sass/components/_ds.subcat-list.scss b/_sass/components/_ds.subcat-list.scss
@@ -37,6 +37,10 @@
     display: block;
     text-decoration: none;
 
+    &:focus {
+      outline: 0;
+    }
+
     &:hover {
       text-decoration: underline;
     }
@@ -54,6 +58,10 @@
     font-weight: $font-bold;
     margin-bottom: $size-base;
 
+    .ds-subcat-list__link:focus & {
+      @include fsa-focus;
+    }
+
   }
 
   &__img {

diff --git a/_sass/core/_ds.layout.home.scss b/_sass/core/_ds.layout.home.scss
@@ -20,15 +20,25 @@
 
     text-decoration: none;
 
+    &:focus {
+      outline: none;
+    }
+
     &:hover {
       text-decoration: underline;
     }
 
   }
 
   &__title {
+
     margin-bottom: 0;
     color: inherit;
+
+    .ds-home-features__link:focus & {
+      @include fsa-focus;
+    }
+
   }
 
   &__img {

diff --git a/_sass/core/_ds.layout.scss b/_sass/core/_ds.layout.scss
@@ -9,6 +9,7 @@ main {
   }
 }
 
+// scss-lint:disable EmptyRule
 .ds-home {}
 
 .ds-body {

diff --git a/_sass/other/_ds.shame.scss b/_sass/other/_ds.shame.scss
@@ -31,14 +31,15 @@
       color: $button-download-text;
     }
 
-    &:hover {
-      color: $button-download-text;
-    }
+    // &:hover {
+    //   color: $button-download-text;
+    // }
 
-    &:hover:not([disabled]) {
-      background-color: $button-download-hover;
-    }
+    // &:hover:not([disabled]) {
+    //   background-color: $button-download-hover;
+    // }
 
+    &:hover:not([disabled]),
     &:focus:not([disabled]),
     &:active:not([disabled]) {
       color: $button-download-text;
@@ -65,6 +66,7 @@
         background-color: $getting-started-active-color;
       }
 
+      &:focus:after,
       &:hover:after {
         background-color: $button-download-hover;
       }
@@ -75,6 +77,11 @@
 
 }
 
+.ds-screen {
+  border: 1px solid $color-fsa-tertiary-200;
+  box-shadow: 0 0 $size-base transparentize($color-fsa-tertiary-200, .1);
+}
+
 .sr-only {
   @include sr-only;
 }
@@ -99,6 +106,7 @@ code {
 }
 
 // This isn't broken in fsa-style, but for is with Ruby-based SASS
+// scss-lint:disable QualifyingElement
 span.fsa-stepped-tabs__label,
 div.fsa-stepped-tabs__label {
   cursor: initial;
@@ -107,7 +115,7 @@ div.fsa-stepped-tabs__label {
 // TODO move to fsa-style
 .fsa-grid__demo {
   padding: 0;
-  background-color: rgba(0,0,0,.05);
+  background-color: rgba(0, 0, 0, .05);
 }
 
 // TODO move to fsa-style
@@ -125,4 +133,4 @@ div.fsa-stepped-tabs__label {
     font-weight: $font-bold;
   }
 
-}
+}
diff --git a/components/badges/index.md b/components/badges/index.md
@@ -84,8 +84,22 @@ Badges are styled with `class="fsa-badge fsa-badge--[type] fsa-badge--[size]"`.
 </p>
 ```
 
-### Inverse
+### Actionable
+
+Badge styles can be applied to nearly any HTML element, defaulting to non-actionable `<span>` elements as shown above. Below are `<a>` and `<button>` elements:
+
+<div class="ds-preview">
+  <a class="fsa-badge fsa-badge--general" href="link.html">A</a>
+  <button class="fsa-badge fsa-badge--general" type="button">B</button>
+  <button class="fsa-badge fsa-badge--general" type="button" disabled="disabled">Z</button>
+</div>
+```html
+<a class="fsa-badge fsa-badge--general" href="link.html">A</a>
+<button class="fsa-badge fsa-badge--general" type="button">B</button>
+<button class="fsa-badge fsa-badge--general" type="button" disabled="disabled">Z</button>
+```
 
+### Inverse
 
 <div class="ds-preview">
   <p style="background-color: #666; padding: 12px">

diff --git a/components/checkbox/index.md b/components/checkbox/index.md
@@ -151,6 +151,59 @@ You can't make a checkbox indeterminate through HTML, as there is no `indetermin
 </script>
 ```
 
+### Within a [Field]({{ site.baseurl }}components/form-fields/)
+
+<div class="ds-preview">
+  <div class="fsa-field">
+    <label class="fsa-field__label" id="unique-id-lorem--1234">Pies We Like</label>
+    <ul class="fsa-form-list" aria-labelledby="unique-id-lorem--1234">
+      <li>
+        <span>
+          <input class="fsa-checkbox" id="apple" type="checkbox" name="pie" checked="">
+          <label for="apple">Apple</label>
+        </span>
+      </li>
+      <li>
+        <span>
+          <input class="fsa-checkbox" id="key-lime" type="checkbox" name="pie">
+          <label for="key-lime">Key Lime</label>
+        </span>
+      </li>
+      <li>
+        <span>
+          <input class="fsa-checkbox" id="pumpkin" type="checkbox" name="pie">
+          <label for="pumpkin">Pumpkin</label>
+        </span>
+      </li>
+    </ul>
+  </div>
+</div>
+```html
+<div class="fsa-field">
+  <label class="fsa-field__label" id="unique-id-lorem--1234">Pies We Like</label>
+  <ul class="fsa-form-list" aria-labelledby="unique-id-lorem--1234">
+    <li>
+      <span>
+        <input class="fsa-checkbox" id="apple" type="checkbox" name="pie" checked="">
+        <label for="apple">Apple</label>
+      </span>
+    </li>
+    <li>
+      <span>
+        <input class="fsa-checkbox" id="key-lime" type="checkbox" name="pie">
+        <label for="key-lime">Key Lime</label>
+      </span>
+    </li>
+    <li>
+      <span>
+        <input class="fsa-checkbox" id="pumpkin" type="checkbox" name="pie">
+        <label for="pumpkin">Pumpkin</label>
+      </span>
+    </li>
+  </ul>
+</div>
+```
+
 ## Usage
 
 ### Use When
@@ -177,4 +230,5 @@ If you customize a checkbox element, ensure they continue to meet the the access
 
 * Users should be able to tap on or click on either the text `<label>` or the checkbox element itself to toggle an option. Aids accessibility.
 * Options that are listed vertically are easier to read than those listed horizontally. Horizontal listings can make it difficult to tell which label pertains to which checkbox.
+* Negative language in labels can be counterintuitive. For example, use “I want to receive a promotional email” instead of “I don’t want to receive promotional email.
 * Make sure selections are adequately spaced for touch screens.
diff --git a/components/content-tabs/index.md b/components/content-tabs/index.md
@@ -432,7 +432,7 @@ Content Tabs can be styled using `fsa-content-tabs__label--[variation]` on the a
       <button data-behavior="toggle-rwd-size" data-target="rwd-demo_content-tabs" data-size="tablet" class="fsa-btn-group__item" type="button">Tablet</button>
       <button data-behavior="toggle-rwd-size" data-target="rwd-demo_content-tabs" data-size="desktop" class="fsa-btn-group__item" type="button">Desktop</button>
     </span>
-    <a class="fsa-m-l--xs fsa-text-size--1" href="http://usda-fsa.github.io/fsa-style/demo/rwd__content-tabs.html" target="_blank">View in new window</a>
+    <a class="fsa-m-l--xs fsa-text-size--1 usa-external_link" href="http://usda-fsa.github.io/fsa-style/demo/rwd__content-tabs.html" target="_blank">View in new window</a>
   </p>
   <div class="docs__rwd-embed-container">
     <div class="docs__rwd-embed docs__rwd-embed--phone" id="rwd-demo_content-tabs">

diff --git a/components/footer/index.md b/components/footer/index.md
@@ -115,7 +115,7 @@ jump_menu: true
       <button data-behavior="toggle-rwd-size" data-target="rwd-demo_footer" data-size="tablet" class="fsa-btn-group__item" type="button">Tablet</button>
       <button data-behavior="toggle-rwd-size" data-target="rwd-demo_footer" data-size="desktop" class="fsa-btn-group__item" type="button">Desktop</button>
     </span>
-    <a class="fsa-m-l--xs fsa-text-size--1" href="http://usda-fsa.github.io/fsa-style/demo/rwd__footer.html" target="_blank">View in new window</a>
+    <a class="fsa-m-l--xs fsa-text-size--1 usa-external_link" href="http://usda-fsa.github.io/fsa-style/demo/rwd__footer.html" target="_blank">View in new window</a>
   </p>
   <div class="docs__rwd-embed-container">
     <div class="docs__rwd-embed docs__rwd-embed--phone" id="rwd-demo_footer">
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,6 +9,7 @@ main { @@
       }
     }
+    // scss-lint:disable EmptyRule
     .ds-home {}
     .ds-body {
@@ Expand Down @@