Merge pull request #78 from GSA/gh-pages-staging

[Release]: This is preparing for release 0.2.3

.gitignore

@@ -43,3 +43,4 @@ dist/
 # !assets/css/prism.css
 # !assets/css/styleguide.scss
 # !assets/js/styleguide.js
+

_docs/components/form-templates.md

@@ -4,7 +4,7 @@ layout: styleguide
 category: Component
 type: component
 title: Form templates
-lead: See <a href="https://standards.usa.gov/form-templates/">US Web Design Standards</a> for details regarding when to use these components.
+lead: See <a class="usa-external_link" href="https://standards.usa.gov/form-templates/">US Web Design Standards</a> for details regarding when to use these components.
 ---
 
 {% include components/nameform.html %}

_docs/components/navigation.md

@@ -9,8 +9,6 @@ lead: Allows users to orient themselves within the site and move between pages.
 
 {% include components/header.html %}
 
-{% include components/primarynav.html %}
-
 {% include components/sidenav.html %}
 
 {% include components/footers.html %}

_docs/components/overview.md

@@ -4,6 +4,6 @@ layout: styleguide
 category: Component
 type: component
 title: Components
-lead: Components could be a combination of <a href="../elements/">elements (a form, for example), an element with a specific purpose (state select), or a component as designated by the <a href="https://standards.usa.gov">US Web Design Standards</a>.
+lead: Components could be a combination of <a href="../elements/">elements (a form, for example), an element with a specific purpose (state select), or a component as designated by the <a class="usa-external_link" href="https://standards.usa.gov">US Web Design Standards</a>.
 ---
 

_docs/elements/form-controls.md

@@ -25,7 +25,7 @@ title: Form controls
     Documentation
   </button>
   <div id="collapsible-0" aria-hidden="false" class="usa-accordion-content">
-    <p class="usa-font-lead">See <a href="https://playbook.cio.gov/designstandards/form-controls/">US Web Design Standards</a> for details regarding when to use these elements.</p>
+    <p class="usa-font-lead">See <a class="usa-external_link" href="https://playbook.cio.gov/designstandards/form-controls/">US Web Design Standards</a> for details regarding when to use these elements.</p>
 
     <h4 class="usa-heading">Inline help (hint)</h4>
     <p>Eeach form control element is able to incorporate inline help text.</p>

_docs/elements/overview.md

@@ -4,6 +4,6 @@ layout: styleguide
 category: Element
 type: component
 title: Elements
-lead: Elements refer to an individual HTML element (<code>&lt;li&gt;</code>, for example), or an element HTML pattern as defined by the <a href="https://standards.usa.gov">US Web Design Standards</a>.
+lead: Elements refer to an individual HTML element (<code>&lt;li&gt;</code>, for example), or an element HTML pattern as defined by the <a class="usa-external_link" href="https://standards.usa.gov">US Web Design Standards</a>.
 ---
 

_docs/getting-started/authorship.md

@@ -7,7 +7,7 @@ title: For writers
 
 ## Writing for the web
 
-The SAM Web Design Standards follows the <a href="https://pages.18f.gov/content-guide/">18F Content Guidance</a> when writing content for the web:
+The SAM Web Design Standards follows the <a class="usa-external_link" href="https://pages.18f.gov/content-guide/">18F Content Guidance</a> when writing content for the web:
 
 * [active voice](https://pages.18f.gov/content-guide/active-voice/),
 * [acronyms and abbreviations](https://pages.18f.gov/content-guide/acronyms-and-abbreviations/),

_docs/getting-started/developers.md

@@ -3,7 +3,7 @@ permalink: /getting-started/developers/
 layout: styleguide
 category: Getting started
 title: For developers
-lead: See also the <a href="https://standards.usa.gov/getting-started/developers/">US Web Design Standards - For developers</a>. 
+lead: See also the <a class="usa-external_link" href="https://standards.usa.gov/getting-started/developers/">US Web Design Standards - For developers</a>. 
 ---
 
 ## Progressive enhancement
@@ -25,19 +25,19 @@ Cascading Style Sheets (CSS) are responsible for defining the aesthetic characte
 
 Client-side languages, which are executed on the user’s device. Client-side scripts can degrade battery life on mobile devices, exceed the limits of processor capabilities resulting in longer load times, or be disabled by the user altogether, which creates a poor experience. Therefore, client-side script capabilities should be created only once the core functionality and experience are complete.
 
-<h2>CSS architecture</h2>
+<h2 class="usa-heading" id="css-architecture">CSS architecture</h2>
 
-<p>We avoid modifying the base CSS generated by the <a href="https://standards.usa.gov">US Web Design Standards</a> as much as possible; opting to contribute directly to that project through issues and pull requests.</p>
+<p>We avoid modifying the base CSS generated by the <a class="usa-external_link" href="https://standards.usa.gov">US Web Design Standards</a> as much as possible; opting to contribute directly to that project through issues and pull requests.</p>
 
-<p>For more details see the <a href="{{ site.repos[0].url }}">GitHub repository</a>.</p>
+<p>For more details see the <a class="usa-external_link" href="{{ site.repos[0].url }}">GitHub repository</a>.</p>
 
 {% include partials/mobile_first.html %}
 
-## Bandwidth and Processor Speeds
+<h2 class="usa-heading" id="bandwidth"> Bandwidth and Processor Speeds</h2>
 
-The *SAM Web Standards* recommends a [mobile first]({{ site.baseurl }}/sam_web_standards/visual_style/#mobile-first) approach to design and development. As part of this recommendation it is important to consider bandwidth constraints, caps of data plans, and processor speeds. Therefore, it is recommended that the majority of processes be performed server-side while delivering the minimum data required to the client-side to update a user. Further, mobile and tablet devices typically have less processing power and hardware resources available, which should also be taken into consideration when creating client-side scripts.
+The *SAM Web Standards* recommends a [mobile first]({{ site.baseurl }}/getting-started/visual-style/#mobile-first) approach to design and development. As part of this recommendation it is important to consider bandwidth constraints, caps of data plans, and processor speeds. Therefore, it is recommended that the majority of processes be performed server-side while delivering the minimum data required to the client-side to update a user. Further, mobile and tablet devices typically have less processing power and hardware resources available, which should also be taken into consideration when creating client-side scripts.
 
-## URLs
+<h2 class="usa-heading" id="URLs">URLs</h2>
 
 ### Secure by Default
 

_docs/getting-started/user-experience.md

@@ -38,7 +38,7 @@ As the joke goes:
 
 <blockquote>
   <p>A user interface is like a joke. If you have to explain it, it&rsquo;s not that good.</p>
-  <p><cite><a href="https://www.startupvitamins.com/products/startup-poster-a-user-interface-is-like-a-joke-if-you-have-to-explain-it-its-not-that-good">Poster from Startup Vitamins</a></cite></p>
+  <p><cite><a class="usa-external_link" href="https://www.startupvitamins.com/products/startup-poster-a-user-interface-is-like-a-joke-if-you-have-to-explain-it-its-not-that-good">Poster from Startup Vitamins</a></cite></p>
 </blockquote>
 
 <ul>

_docs/getting-started/visual-style.md

@@ -3,7 +3,7 @@ permalink: /getting-started/visual-style/
 title: For visual designers
 layout: styleguide
 category: Getting started
-lead: See <a href="https://standards.usa.gov/visual-style">US Web Design Standards</a> for design considerations.
+lead: See <a class="usa-external_link" href="https://standards.usa.gov/visual-style">US Web Design Standards</a> for design considerations.
 ---
 
 <h2 class="usa-heading" id="logo-and-usage">Logo and Usage</h2>
@@ -12,13 +12,13 @@ lead: See <a href="https://standards.usa.gov/visual-style">US Web Design Standar
 
 <h2 class="usa-heading" id="typography">Typography</h2>
 
-The Standards use the Source Sans Pro [pairing and style](https://standards.usa.gov/typography/#pairings-and-styles) and [typesetting](https://standards.usa.gov/typography/#typesetting) defined by the US Web Design Standards.
+The Standards use the Source Sans Pro <a class="usa-external_link" href="https://standards.usa.gov/typography/#pairings-and-styles">pairing and style</a> and <a class="usa-external_link" href="https://standards.usa.gov/typography/#typesetting">typesetting</a> defined by the US Web Design Standards.
 
 {% include getting-started/typography.html %}
 
 <h2 id="iconography" class="usa-heading">Iconography</h2>
 
-The Standards include [Font Awesome](https://fortawesome.github.io/Font-Awesome/) for the majority of icon decisions. If you cannot locate a desirable icon from Font Awesome, either [create an issue]({{ site.repos[0].url }}/issues) or modify the [Icon component]({{ site.baseurl }}/elements/action-icons/) and submit a pull request.
+The Standards include <a class="usa-external_link" href="https://fortawesome.github.io/Font-Awesome/">Font Awesome</a> for the majority of icon decisions. If you cannot locate a desirable icon from Font Awesome, either [create an issue]({{ site.repos[0].url }}/issues) or modify the [Icon component]({{ site.baseurl }}/elements/action-icons/) and submit a pull request.
 
 <h2 class="usa-heading" id="imagery">Imagery</h2>
 
@@ -40,11 +40,11 @@ Gratuitous animations that do not contribute to user feedback and goals become a
 
 <h2 id="colors" class="usa-heading">Colors</h2>
 
-See the [US Web Design Standards - Colors](https://standards.usa.gov/colors/)
+See the <a class="usa-external_link" href="https://standards.usa.gov/colors/">US Web Design Standards - Colors</a>
 
 <h2 id="text-accessibility" class="usa-heading">Text accessibility</h2>
 
-See the [US Web Design Standards - Text accessibility](https://standards.usa.gov/colors/)
+See the <a class="usa-external_link" href="https://standards.usa.gov/colors/">US Web Design Standards - Text accessibility</a>
 
 {% include partials/grid_system.html %}
 

_docs/overview.md

@@ -3,7 +3,7 @@ permalink: /
 layout: styleguide
 category: Getting started
 title: Getting started
-lead: The <a href="https://18f.gsa.gov/2015/09/28/web-design-standards/">US Web Design Standards</a>, <a href="http://fontawesome.io">Font Awesome</a>, and user interface kits combine to create the base for the SAM Web Design Standards, an extension of the US Web Design Standards.
+lead: The <a class="usa-external_link" href="https://18f.gsa.gov/2015/09/28/web-design-standards/">US Web Design Standards</a>, <a class="usa-external_link" href="http://fontawesome.io">Font Awesome</a>, and user interface kits combine to create the base for the SAM Web Design Standards, an extension of the US Web Design Standards.
 ---
 
 <h2 id="sam-web-design-standards">The SAM Web Design Standards</h2>
@@ -15,13 +15,13 @@ lead: The <a href="https://18f.gsa.gov/2015/09/28/web-design-standards/">US Web
 <h4>The US Web Design Standards</h4>
 <blockquote>
   <p>The U.S. Web Design Standards are the U.S. government’s very own set of common UI components and visual styles for websites.</p>
-  <cite><a href="https://18f.gsa.gov/2015/09/28/web-design-standards/">18f</a></cite>
+  <cite><a class="usa-external_link" href="https://18f.gsa.gov/2015/09/28/web-design-standards/">18f</a></cite>
 </blockquote>
 
 <h4>Font Awesome</h4>
 <blockquote>
   <p>Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.</p>
-  <cite><a href="http://fontawesome.io">Dave Gandy</a></cite>
+  <cite><a class="usa-external_link" href="http://fontawesome.io">Dave Gandy</a></cite>
 </blockquote>
 
 <h4>User interface kits</h4>
@@ -33,53 +33,53 @@ lead: The <a href="https://18f.gsa.gov/2015/09/28/web-design-standards/">US Web
 
 <blockquote>
   <p>The Draft U.S. Web Design Standards are designed to set a new bar for simplicity and consistency across government services, while providing you with plug-and-play design and code.</p>
-  <cite><a href="https://standards.usa.gov">U.S. Web Design Standards</a></cite>
+  <cite><a class="usa-external_link" href="https://standards.usa.gov">U.S. Web Design Standards</a></cite>
 </blockquote>
 
 <h3>What you get</h3>
 
 <h4>Bourbon</h4>
 <blockquote>
   <p>A simple and lightweight mixin library for Sass.</p>
-  <cite><a href="http://bourbon.io">thoughtbot, inc.</a></cite>
+  <cite><a class="usa-external_link" href="http://bourbon.io">thoughtbot, inc.</a></cite>
 </blockquote>
 
 <h4>Neat</h4>
 <blockquote>
   <p>A lightweight semantic grid framework for Sass and Bourbon.</p>
-  <cite><a href="http://neat.bourbon.io">thoughtbot, inc.</a></cite>
+  <cite><a class="usa-external_link" href="http://neat.bourbon.io">thoughtbot, inc.</a></cite>
 </blockquote>
 
 <h4>jQuery</h4>
 <blockquote>
   <p>jQuery is a fast, small, and feature-rich JavaScript library.</p>
-  <cite><a href="http://jquery.com">The jQuery Foundation</a></cite>
+  <cite><a class="usa-external_link" href="http://jquery.com">The jQuery Foundation</a></cite>
 </blockquote>
 
 <h4>UI Components and HTML patterns</h4>
 <blockquote>
   <p>Common web interactions (buttons, forms, navigation, etc.) with reusable and downloadable code.</p>
-  <cite><a href="https://standards.usa.gov">U.S. Web Design Standards</a></cite>
+  <cite><a class="usa-external_link" href="https://standards.usa.gov">U.S. Web Design Standards</a></cite>
 </blockquote>
 
 <h4>Colors, typography, and design guidance</h4>
 <blockquote>
   <p>508-compliant colors and typography designed to bring consistency to government web design.</p>
-  <cite><a href="https://standards.usa.gov">U.S. Web Design Standards</a></cite>
+  <cite><a class="usa-external_link" href="https://standards.usa.gov">U.S. Web Design Standards</a></cite>
 </blockquote>
 
 <h4>Available as a Node module</h4>
 <blockquote>
   <p>npm is the package manager for JavaScript.</p>
-  <cite><a href="https://www.npmjs.com">npm Inc.</a></cite>
+  <cite><a class="usa-external_link" href="https://www.npmjs.com">npm Inc.</a></cite>
 </blockquote>
 
-<p><small>There&rsquo;s more, but the USDS and 18f <a href="https://standards.usa.gov">have it covered</a>.</small></p>
+<p><small>There&rsquo;s more, but the USDS and 18f <a class="usa-external_link" href="https://standards.usa.gov">have it covered</a>.</small></p>
 
 <h2 id="giving-back">Giving back to the greater good</h2>
-<p>SAM designers and developers believe in <a href="https://18f.gsa.gov/2015/09/28/web-design-standards/">the mission of The Draft U.S. Web Design Standards</a>.</p>
+<p>SAM designers and developers believe in <a class="usa-external_link" href="https://18f.gsa.gov/2015/09/28/web-design-standards/">the mission of The Draft U.S. Web Design Standards</a>.</p>
 <p>We can be found contributing back to The Draft U.S. Web Design Standards as much as to the SAM Web Design Standards; or interacting with the vibrant community there. We hope to help create a better experience for all users of Federal websites, not just our own.</p>
 
 <h2 id="contribute">Contribute</h2>
-<p>The Standards were created to help SAM designers and developers get up and running quickly toward building for the environment. We have opened them to the world as an open srouce package available through <a href="https://www.npmjs.com">npm</a> (<code>samwds</code>).</p>
-<p>Help us make it better by <a href="{{ site.repos[0].url }}">contributing on GitHub</a>.</p>
+<p>The Standards were created to help SAM designers and developers get up and running quickly toward building for the environment. We have opened them to the world as an open srouce package available through <a class="usa-external_link" href="https://www.npmjs.com">npm</a> (<code>samwds</code>).</p>
+<p>Help us make it better by <a class="usa-external_link" href="{{ site.repos[0].url }}">contributing on GitHub</a>.</p>

_includes/code/components/accordions-code.html

@@ -0,0 +1,49 @@
+{% capture code_preview %}
+<h6>Borderless</h6>
+<div class="usa-accordion">
+  <ul class="usa-unstyled-list">
+    <li>
+      <button class="usa-button-unstyled" aria-expanded="false" aria-controls="collapsible-1">Collapsed Accordion 1</button>
+      <div id="collapsible-1" aria-hidden="true" class="usa-accordion-content">
+        <ol>
+          <li>This</li>
+          <li>accordion</li>
+          <li>was</li>
+          <li>collapsed</li>
+          <li>initially.</li>
+        </ol>
+      </div>
+    </li>
+    <li>
+      <button class="usa-button-unstyled" aria-expanded="true" aria-controls="collapsible-0">Expanded Accordion 1</button>
+      <div id="collapsible-0" aria-hidden="false" class="usa-accordion-content">
+        <p>This accordion started expanded.</p>
+      </div>
+    </li>
+  </ul>
+</div>
+
+<h6>Bordered</h6>
+<div class="usa-accordion-bordered">
+  <ul class="usa-unstyled-list">
+    <li>
+      <button class="usa-button-unstyled" aria-expanded="false" aria-controls="collapsible-1">Collapsed Accordion 1</button>
+      <div id="collapsible-1" aria-hidden="true" class="usa-accordion-content">
+        <ul>
+          <li>This</li>
+          <li>accordion</li>
+          <li>was</li>
+          <li>collapsed</li>
+          <li>initially.</li>
+        </ul>
+      </div>
+    </li>
+    <li>
+      <button class="usa-button-unstyled" aria-expanded="true" aria-controls="collapsible-0">Expanded Accordion 1</button>
+      <div id="collapsible-0" aria-hidden="false" class="usa-accordion-content">
+        <p>This accordion started expanded.</p>
+      </div>
+    </li>
+  </ul>
+</div>
+{% endcapture %}