massgov · legostud · Aug 1, 2017 · Aug 1, 2017 · Aug 1, 2017 · Aug 1, 2017
diff --git a/styleguide/npm-shrinkwrap.json b/styleguide/npm-shrinkwrap.json
diff --git a/styleguide/package.json b/styleguide/package.json
@@ -3,44 +3,44 @@
   "author": "Jonathan Dallas / Mike Lambert",
   "version": "3.2.2",
   "devDependencies": {
-    "babelify": "^6.3.0",
-    "browser-sync": "^2.7.3",
-    "browserify": "^10.1.1",
+    "babelify": "^6.4.0",
+    "browser-sync": "^2.18.13",
+    "browserify": "^10.2.6",
     "cheerio": "^0.19.0",
-    "cli-color": "^1.0.0",
-    "eslint": "^2.8.0",
-    "eslint-plugin-react": "^5.0.1",
+    "cli-color": "^1.2.0",
+    "eslint": "^2.13.1",
+    "eslint-plugin-react": "^5.2.2",
     "gulp": "^3.9.1",
-    "gulp-autoprefixer": "^3.1.0",
-    "gulp-cached": "^1.1.0",
-    "gulp-concat": "^2.5.2",
+    "gulp-autoprefixer": "^3.1.1",
+    "gulp-cached": "^1.1.1",
+    "gulp-concat": "^2.6.1",
     "gulp-debug": "^2.1.2",
-    "gulp-environments": "^0.1.1",
+    "gulp-environments": "^0.1.2",
     "gulp-filter": "^3.0.1",
-    "gulp-header": "^1.2.2",
+    "gulp-header": "^1.8.9",
     "gulp-notify": "^2.2.0",
     "gulp-pixrem": "^1.0.0",
-    "gulp-plumber": "^1.0.0",
+    "gulp-plumber": "^1.1.0",
     "gulp-rename": "^1.2.2",
     "gulp-run": "^1.7.1",
     "gulp-sass": "^3.1.0",
-    "gulp-sourcemaps": "^1.5.2",
-    "gulp-svgmin": "^1.1.2",
+    "gulp-sourcemaps": "^1.12.0",
+    "gulp-svgmin": "^1.2.4",
     "gulp-svgstore": "^5.0.5",
-    "gulp-uglify": "^1.2.0",
-    "gulp-watch": "^4.3.4",
+    "gulp-uglify": "^1.5.4",
+    "gulp-watch": "^4.3.11",
     "json-align": "^0.1.0",
-    "main-bower-files": "^2.7.0",
-    "merge-stream": "^1.0.0",
+    "main-bower-files": "^2.13.1",
+    "merge-stream": "^1.0.1",
     "node-bourbon": "^4.2.8",
     "node-neat": "^1.7.2",
-    "node-normalize-scss": "^1.3.2",
-    "run-sequence": "^1.1.0",
+    "node-normalize-scss": "^3.0.0",
+    "run-sequence": "^1.2.2",
     "shrinkwrap": "^0.4.0",
-    "through2": "^2.0.0",
+    "through2": "^2.0.3",
     "vinyl-buffer": "^1.0.0",
     "vinyl-source-stream": "^1.1.0",
-    "yargs": "^4.7.1"
+    "yargs": "^4.8.1"
   },
   "dependencies": {},
   "scripts": {

diff --git a/styleguide/source/_meta/_00-head.twig b/styleguide/source/_meta/_00-head.twig
@@ -8,12 +8,15 @@
 
     <link rel="stylesheet" href="{{ url.domain }}/{{ url.assetsPath }}/css/index-generated.css?{{ cacheBuster }}" media="all" />
     <link class="js-base-theme" rel="stylesheet" href="{{ url.domain }}/{{ url.assetsPath }}/css/base-theme-generated.css?{{ cacheBuster }}" media="all" />
+    <link rel="stylesheet" href="{{ url.domain }}/{{ url.assetsPath }}/css/archived-generated.css?{{ cacheBuster }}" media="all" />
+
+    <script src="{{ url.domain }}/{{ url.assetsPath }}/js/vendor/modernizr.js"></script>
+
     <script>
       var baseThemeCss="{{ url.domain }}/{{ url.assetsPath }}/css/base-theme-generated.css";
       var govThemeCss="{{ url.domain }}/{{ url.assetsPath }}/css/gov-theme-generated.css?";
     </script>
 
-    <script src="{{ url.domain }}/{{ url.assetsPath }}/js/vendor/modernizr.js"></script>
 
     <!-- Begin Pattern Lab (Required for Pattern Lab to run properly) -->
     {{ patternLabHead | raw }}

diff --git a/styleguide/source/_patterns/01-atoms/01-buttons/arrow-button.md b/styleguide/source/_patterns/01-atoms/01-buttons/arrow-button.md
@@ -1,21 +1,17 @@
----
-title: Arrow Button
----
-Description: A link `<a>` element which is styled to look like a button with a chevron.
+### Description
+This Pattern shows a link styled as a button with a directional arrow.
 
-## State: ALPHA
+### Status
+* Stable as of 5.0.0
 
-### Used In:
-
-
-### Variables:
+### Variables
 ~~~
-"arrowButton": {
-  "href": 
-    type: string/required
-  "info": 
-    type: string/required - used for screen readers
-  "direction": 
-    type string/optional
+arrowButton: {
+  href: 
+    type: string (url) / required
+  info: 
+    type: string (adds more description to the link) / optional
+  direction: 
+    type string ("left","right") / optional
 }
 ~~~
diff --git a/styleguide/source/_patterns/01-atoms/01-buttons/button-as-link.md b/styleguide/source/_patterns/01-atoms/01-buttons/button-as-link.md
@@ -2,4 +2,4 @@
 This is a variant of the [Button](./?p=atoms-button) pattern showing an example using a link instead of a button.
 
 ### How to generate
-* Populate the 'href' variable
+* Populate the `href` variable
diff --git a/styleguide/source/_patterns/01-atoms/01-buttons/button-as-outline.md b/styleguide/source/_patterns/01-atoms/01-buttons/button-as-outline.md
@@ -2,4 +2,4 @@
 This is a variant of the [Button](./?p=atoms-button) pattern showing an example styled as an outline.
 
 ### How to generate
-* set the 'outline' variable to true
+* set the `outline` variable to true
diff --git a/styleguide/source/_patterns/01-atoms/01-buttons/button-as-quaternary-color.md b/styleguide/source/_patterns/01-atoms/01-buttons/button-as-quaternary-color.md
@@ -2,4 +2,4 @@
 This is a variant of the [Button](./?p=atoms-button) pattern showing an example in gray.
 
 ### How to generate
-* set the 'theme' variable to 'quaternary'
+* set the `theme` variable to 'quaternary'
diff --git a/styleguide/source/_patterns/01-atoms/01-buttons/button-as-secondary-color.md b/styleguide/source/_patterns/01-atoms/01-buttons/button-as-secondary-color.md
@@ -2,6 +2,6 @@
 This is a variant of the [Button](./?p=atoms-button) pattern showing a small button example in green with an outline.
 
 ### How to generate
-* set the 'theme' variable to 'secondary'
-* set the 'outline' variable to true
-* set the 'size' variable to 'small'
+* set the `theme` variable to "secondary"
+* set the `outline` variable to true
+* set the `size` variable to "small"
diff --git a/styleguide/source/_patterns/01-atoms/01-buttons/button-as-small.md b/styleguide/source/_patterns/01-atoms/01-buttons/button-as-small.md
@@ -2,4 +2,4 @@
 This is a variant of the [Button](./?p=atoms-button) pattern showing an example of a small button.
 
 ### How to generate
-* set the 'size' variable to 'small'
+* set the `size` variable to "small"
diff --git a/styleguide/source/_patterns/01-atoms/01-buttons/button-link.json b/styleguide/source/_patterns/01-atoms/01-buttons/button-link.json
diff --git a/styleguide/source/_patterns/01-atoms/01-buttons/button-link.md b/styleguide/source/_patterns/01-atoms/01-buttons/button-link.md
diff --git a/styleguide/source/_patterns/01-atoms/01-buttons/button-link.twig b/styleguide/source/_patterns/01-atoms/01-buttons/button-link.twig
diff --git a/styleguide/source/_patterns/01-atoms/01-buttons/button-sort-as-ascending.md b/styleguide/source/_patterns/01-atoms/01-buttons/button-sort-as-ascending.md
@@ -0,0 +1,5 @@
+### Description
+This is a variant of the [Sort Button](./?p=atoms-button-sort) pattern showing an example with the arrows set to ascending sort order.
+
+### How to generate
+* set the `direction` variable to 'asc'
diff --git a/styleguide/source/_patterns/01-atoms/01-buttons/button-sort-as-descending.md b/styleguide/source/_patterns/01-atoms/01-buttons/button-sort-as-descending.md
@@ -0,0 +1,5 @@
+### Description
+This is a variant of the [Sort Button](./?p=atoms-button-sort) pattern showing an example with the arrows set to descending sort order.
+
+### How to generate
+* set the `direction` variable to 'dsc'
diff --git a/styleguide/source/_patterns/01-atoms/01-buttons/button-sort.json b/styleguide/source/_patterns/01-atoms/01-buttons/button-sort.json
@@ -1,6 +1,6 @@
 {
   "buttonSort": {
     "text": "Date",
-    "direction": "asc"
+    "direction": ""
   }
 }
diff --git a/styleguide/source/_patterns/01-atoms/01-buttons/button-sort.md b/styleguide/source/_patterns/01-atoms/01-buttons/button-sort.md
@@ -1,22 +1,21 @@
----
-title: Button Sort
----
+### Description
+This Pattern shows a button with directional arrows, typically used to show sort order
 
-Description: A `<button>` element that determines the sort order of your results
+### Status
+* Stable as of 5.0.0
 
-## State: ALPHA
+### Variant options
+* The arrows can be changed to show [ascending](./?p=atoms-button-sort-as-ascending) or [descending](./?p=atoms-button-sort-as-descending) sort order instead of the default in active state
 
-### Notes:
+### Usage Guidelines:
 - the gray triangle represents the current state.  The blue triangle is the clickable link.
 
-### Used In:
 
-
-### Required Variables: 
+### Variables
 ~~~
 buttonSort {
   text: 
-    type: string/required
+    type: string / required
   direction:
     type: string ("", "asc", "dsc")
 }

diff --git a/styleguide/source/_patterns/01-atoms/01-buttons/button-sort~as-ascending.json b/styleguide/source/_patterns/01-atoms/01-buttons/button-sort~as-ascending.json
@@ -0,0 +1,6 @@
+{
+  "buttonSort": {
+    "text": "Date",
+    "direction": "asc"
+  }
+}
diff --git a/styleguide/source/_patterns/01-atoms/01-buttons/button-sort~as-descending.json b/styleguide/source/_patterns/01-atoms/01-buttons/button-sort~as-descending.json
@@ -0,0 +1,6 @@
+{
+  "buttonSort": {
+    "text": "Date",
+    "direction": "dsc"
+  }
+}
diff --git a/styleguide/source/_patterns/01-atoms/01-buttons/button.twig b/styleguide/source/_patterns/01-atoms/01-buttons/button.twig
@@ -8,9 +8,7 @@
   <a 
     href="{{ button.href }}" 
     class="ma__button {{ buttonSize }} {{buttonTheme}} {{buttonStyle}}"
-    title="{{ button.info }}">
-    {{ button.text }}
-  </a>
+    title="{{ button.info }}">{{ button.text }}</a>
 {% else %}
   <button type="{{ button.type }}" class="ma__button {{ buttonSize }} {{buttonTheme}} {{buttonStyle}}" aria-label="{{ button.info }}">{{ button.text }}</button>
 {% endif %}
diff --git a/styleguide/source/_patterns/01-atoms/03-forms/helper-text.md b/styleguide/source/_patterns/01-atoms/03-forms/helper-text.md
@@ -1,21 +1,17 @@
----
-title: Helper Text
----
-Description: Helper text for an input that includes if needed.
+### Description
+This pattern is used as Helper text for a form input
 
-## State: ALPHA
+### Status
+* Stable as of 5.0.0
 
-### Notes:
+### Usage Guidelines
+* the `inputId` value should match the id of the related input.
 
-
-### Used In:
-
-
-### Variables:
+### Variables
 ~~~
 helperText: {
   inputId: 
-    type: string / unique ID (matches the id on the input) / required.
+    type: string / required.
   message: 
     type: string / required
 }

diff --git a/styleguide/source/_patterns/01-atoms/03-forms/input-checkbox.json b/styleguide/source/_patterns/01-atoms/03-forms/input-checkbox.json
@@ -2,6 +2,7 @@
   "inputCheckbox": {
     "value": "checkbox",
     "id": "checkbox-test",
+    "icon": "@atoms/05-icons/svg-wheelchair.twig",
     "label": "Checkbox",
     "checked": true
   }

diff --git a/styleguide/source/_patterns/01-atoms/03-forms/input-checkbox.md b/styleguide/source/_patterns/01-atoms/03-forms/input-checkbox.md
@@ -1,25 +1,21 @@
----
-title: Input Checkbox
----
-Description: An `<input> [type='checkbox']`  element with its corresponding `<label>` element,  wrapped in a containing `<span>`.
+### Description
+This is a stylized checkbox with a label and an optional icon.
 
-## State: ALPHA
+### Status
+* Stable as of 5.0.0
 
-### Notes:
-
-### Used In:
-- [@organisms/by-template/transition-page](/?p=organisms-transition-page)
-
-### Variables:
+### Variables
 ~~~
 inputCheckbox {
-    value:
-        type: string / required
-    id: 
-        type: string / required
-    label:
-        type: string / required
-    checked:
-        type: boolean
+  value:
+    type: string / required
+  id: 
+    type: string / required
+  icon:
+    type: string (path to icon) / optional
+  label:
+    type: string / required
+  checked:
+    type: boolean
 }
 ~~~
diff --git a/styleguide/source/_patterns/01-atoms/03-forms/input-checkbox.twig b/styleguide/source/_patterns/01-atoms/03-forms/input-checkbox.twig
@@ -5,5 +5,8 @@
 
 <span class="ma__input-checkbox">
   <input type="checkbox" value="{{ inputCheckbox.value }}" id="{{ inputCheckbox.id }}" {{ inputCheckbox.checked ? 'checked' : '' }}>
+  {% if inputCheckbox.icon %}
+    {% include inputCheckbox.icon %}
+  {% endif %}
   <label for="{{ inputCheckbox.id }}"><span>{{ inputCheckbox.label}}</span></label>
 </span>