Merge pull request #361 from 18F/release-1.3.0

Release 1.3.0

Author: donjo

.gitignore

@@ -7,3 +7,4 @@ node_modules/
 npm-debug.log
 .bundle/
 assets/
+.jekyll_get_cache/

Gemfile

@@ -3,11 +3,13 @@ source 'https://rubygems.org'
 gem 'jekyll'
 gem 'json'
 gem 'redcarpet'
-gem 'hash-joiner'
 gem 'open-uri-cached'
 gem 'jekyll-redirect-from'
 
 gem 'rouge', '1.9'
 gem 'scss_lint', require: false
 
 gem 'jekyll-compose', group: [:jekyll_plugins]
+
+gem 'rspec-core'
+gem 'rspec-expectations'

Gemfile.lock

@@ -4,10 +4,9 @@ GEM
     addressable (2.5.1)
       public_suffix (~> 2.0, >= 2.0.2)
     colorator (1.1.0)
+    diff-lcs (1.3)
     ffi (1.9.18)
     forwardable-extended (2.6.0)
-    hash-joiner (0.0.7)
-      safe_yaml
     jekyll (3.4.3)
       addressable (~> 2.4)
       colorator (~> 1.0)
@@ -44,6 +43,12 @@ GEM
       ffi (>= 0.5.0)
     redcarpet (3.3.4)
     rouge (1.9.0)
+    rspec-core (3.6.0)
+      rspec-support (~> 3.6.0)
+    rspec-expectations (3.6.0)
+      diff-lcs (>= 1.2.0, < 2.0)
+      rspec-support (~> 3.6.0)
+    rspec-support (3.6.0)
     safe_yaml (1.0.4)
     sass (3.4.23)
     scss_lint (0.50.2)
@@ -54,15 +59,16 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
-  hash-joiner
   jekyll
   jekyll-compose
   jekyll-redirect-from
   json
   open-uri-cached
   redcarpet
   rouge (= 1.9)
+  rspec-core
+  rspec-expectations
   scss_lint
 
 BUNDLED WITH
-   1.14.6
+   1.15.1

README.md

@@ -17,7 +17,7 @@ You will need to have the following installed on your machine before following t
 1. Ruby v2.2.2+, [Installation guides](https://www.ruby-lang.org/en/documentation/installation/)
 1. Node v4.2.3+, [Installation guides](https://nodejs.org/en/download/)
 1. Bundler v1.12.3+, [Installation guides](http://bundler.io/v1.13/guides/using_bundler_in_application.html#getting-started---installing-bundler-and-bundle-init)
-
+1. Chrome v59 or higher (v60 if on Windows)
 
 ### Building the documentation with gulp
 
@@ -43,7 +43,7 @@ Here are a few other utility commands you may find useful:
 
 - `npm run lint`: Runs `eslint` and `sass-lint` against JavaScript and Sass files.
 
-- `npm test`: Runs `npm run lint` and can also be used to run any tests.
+- `npm test`: Runs all tests and linters.
 
 - `npm run watch`: Runs a series of commands that watches for any changes in both the Standards node module and the root level asset folders in this repo.
 
@@ -76,6 +76,23 @@ https://federalist.fr.cloud.gov/preview/18f/web-design-standards-docs/develop/
 
 See the [`_posts` directory](_posts/#readme) for instructions on adding updates.
 
+### Dynamic content
+
+Some of the content on the documentation site is dynamically fetched from
+GitHub. If you want to ensure that its API won't rate-limit you, you
+may want to
+[create an access token](https://github.com/blog/1509-personal-api-tokens)
+and assign it to your `GITHUB_ACCESS_TOKEN` environment variable.
+
+The dynamic content is stored in the `.jekyll_get_cache` directory and
+won't be re-fetched once it's cached there. However, this means that your
+data can get stale over time, so if you want to ensure that your site
+is using the very latest data, you'll want to clear the cache by running:
+
+```
+rm -rf .jekyll_get_cache
+```
+
 ## Contributing
 
 Please read through our [contributing guidelines](CONTRIBUTING.md). These guidelines are directions for opening issues and submitting pull requests, and they also detail the coding and design standards we follow.

_components/buttons.md

@@ -30,7 +30,7 @@ lead: Use buttons to signal actions.
       <li><code>usa-button-big</code></li>
     </ul>
     <p>For example, a secondary button style would use the following code:
-    <code>&lt;a class="usa-button usa-button-secondary" href="/my-link"&gt;My button&lt;/a&gt;</code></p>
+    <code>&lt;a class="usa-button usa-button-secondary" href=&quot;/my-link"&gt;My button&lt;/a&gt;</code></p>
     <h4 class="usa-heading">Accessibility</h4>
     <ul class="usa-content-list">
       <li>Buttons should display a visible focus state when users tab to them.</li>

_components/form-controls/06-validation.md

@@ -0,0 +1,43 @@
+---
+title: Validation
+parent: Form controls
+maturity: alpha
+order: 06
+lead: Stating validation requirements up front, with live feedback, means users won't be left guessing.
+---
+
+{% include code/preview.html component="validation" %}
+{% include code/accordion.html component="validation" %}
+<div class="usa-accordion-bordered">
+  <button class="usa-button-unstyled usa-accordion-button"
+      aria-expanded="true" aria-controls="validation-docs">
+    Documentation
+  </button>
+  <div id="validation-docs" aria-hidden="false" class="usa-accordion-content">
+    <h4 class="usa-heading">Guidance</h4>
+    <ul class="usa-content-list">
+      <li>Input fields which have custom validation logic can automatically
+        provide helpful feedback to users if they are assigned a
+        <code>data-validation-element</code> attribute set to a
+        CSS selector that uniquely identifies a <code>.usa-checklist</code>,
+        e.g. <code>data-validation-element="#validate-code"</code>.</li>
+      <li>
+        For each kind of validation you'd like to provide feedback on:
+        <ol>
+          <li>Come up with a name for the validator, e.g.
+            <code>uppercase</code>. It shouldn't have any spaces in it.</li>
+          <li>On one of the list elements in the <code>.usa-checklist</code>,
+            set the <code>data-validator</code> attribute to the
+            name of the validator, e.g. <code>data-validator="uppercase"</code>.
+            This is the list item that will appear "checked" when the
+            validator's condition is met.</li>
+          <li>On the input field, add a field called
+            <code>data-validate-<em>validator name</em></code> and set
+            its value to a <a href="https://regexone.com/">regular
+            expression</a> that represents whether the validator's
+            condition is met, e.g. <code>data-validate-uppercase="[A-Z]"</code>.</li>
+        </ol>
+      </li>
+    </ul>
+  </div>
+</div>

_components/form-controls/form-controls.md

@@ -18,6 +18,8 @@ subnav:
   href: '#radio-buttons'
 - text: Date input
   href: '#date-input'
+- text: Validation
+  href: '#validation'
 ---
 
 {% include accessibility.html %}

_components/form-templates/04-password-reset-form.md

@@ -25,6 +25,8 @@ lead: A standard template for resetting a password
     <h5>Guidance</h5>
     <ul class="usa-content-list">
       <li>If users need a password to access your site, they will forget that password and need a way to reset it.</li>
+      <li>For guidance on the technical details of validation, see the
+        <a href="/components/form-controls/#validation">validation documentation</a>.</li>
       <li>State any password requirements (for example, “Must include one capital letter”) up front. Don’t leave users guessing about password requirements, only to hit them with an error message later.</li>
       <li>The requirements shown above are just provided as an example and should not be taken as recommendations.</li>
     </ul>

_components/page-templates/template-docs.html

@@ -55,7 +55,7 @@
           <button class="usa-menu-btn">Menu</button>
           <div class="usa-logo" id="logo">
             <em class="usa-logo-text">
-              <a href="#" title="Home" aria-label="Home">Federal <br>Agency Name</a>
+              <a href="#" title="Home" aria-label="Federal Agency Name Home">Federal <br>Agency Name</a>
             </em>
           </div>
         </div>

_components/page-templates/template-landing.html

@@ -54,7 +54,7 @@
         <button class="usa-menu-btn">Menu</button>
         <div class="usa-logo" id="logo">
           <em class="usa-logo-text">
-            <a href="#" title="Home" aria-label="Home">Federal Agency Name</a>
+            <a href="#" title="Home" aria-label="Federal Agency Name Home">Federal Agency Name</a>
           </em>
         </div>
       </div>