DP-5342 Google Translate

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": {

styleguide/source/_patterns/01-atoms/01-buttons/arrow-button.json

@@ -1,7 +1,7 @@
 {
   "arrowButton": {
     "href": "#",
-    "info": "",
+    "info": "Navigation to previous page",
     "direction": "left"
   }
 }

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) / required
+  direction: 
+    type string ("left","right") / optional
 }
 ~~~

styleguide/source/_patterns/01-atoms/01-buttons/arrow-button.twig

@@ -2,7 +2,7 @@
 <a 
   class="ma__arrow-button {{ classDirection }}" 
   href="{{ arrowButton.href }}" 
-  aria-label="{{ arrowButton.info }}"></a>
+  title="{{ arrowButton.info }}"></a>
 
 
 

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

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

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'

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"

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"

styleguide/source/_patterns/01-atoms/01-buttons/button-link.md

@@ -5,11 +5,6 @@ Description: A link `<a>` element which is styled to look like a button.
 
 ## State: depreciated
 
-### Notes:
-- 'theme' eventually needs to be changed to 'color' and used as a modifier class (--color)
-
-### Used In:
-
 ### Variables:
 ~~~
 buttonLink {

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'

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'

styleguide/source/_patterns/01-atoms/01-buttons/button-sort.json

@@ -1,6 +1,6 @@
 {
   "buttonSort": {
     "text": "Date",
-    "direction": "asc"
+    "direction": ""
   }
 }

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")
 }

styleguide/source/_patterns/01-atoms/01-buttons/button-sort~as-ascending.json

@@ -0,0 +1,6 @@
+{
+  "buttonSort": {
+    "text": "Date",
+    "direction": "asc"
+  }
+}

styleguide/source/_patterns/01-atoms/01-buttons/button-sort~as-descending.json

@@ -0,0 +1,6 @@
+{
+  "buttonSort": {
+    "text": "Date",
+    "direction": "dsc"
+  }
+}

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 %}

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
 }

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
   }

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
 }
 ~~~

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>

styleguide/source/_patterns/01-atoms/03-forms/input-date.md

@@ -1,30 +1,29 @@
----
-title: Input Date
----
-Description: An `<input> [type='date']`  element with its corresponding `<label>` element.
+### Description
+This is a Date Input field with a calendar interface.
 
-## State: ALPHA
+### Status
+* Stable as of 5.0.0
 
-### Notes:
-- restrict controls whether the user can pick any date (''), today and prior ('max') or today and future ('min')
+### Usage Guidelines:
+* The 'restrict' variable controls whether the user can pick any date (''), today and prior ('max') or today and future ('min')
 
-### Used In:
+### JavaScript Used
+* This pattern uses JavaScript for the Calendar interface (js/modules/pickaday.js)
 
-
-### Variables:
+### Variables
 ~~~
-  inputDate: {
-    labelText:
-      type: string\required,
-    required: 
-      type: boolean,
-    id: 
-      type: string\unique\required
-    name: 
-      type: string\required
-    placeholder:
-      type: string
-    restrict:
-      type: string ('','max','min')
-  }
+inputDate: {
+  labelText:
+    type: string / required,
+  required: 
+    type: boolean,
+  id: 
+    type: string (unique per page) / required
+  name: 
+    type: string / required
+  placeholder:
+    type: string / optional
+  restrict:
+    type: string ('','max','min') / optional
+}
 ~~~

styleguide/source/_patterns/01-atoms/03-forms/input-group-checkbox-inline.md

@@ -0,0 +1,6 @@
+### Description
+This is a variant of the [Input Group](./?p=atoms-input-group) pattern showing an example with checkboxes inline.
+
+### How to generate
+* set the `inputGroup.type` variable to "checkbox"
+* set the `inline` variable to true.

styleguide/source/_patterns/01-atoms/03-forms/input-group-checkbox.md

@@ -0,0 +1,5 @@
+### Description
+This is a variant of the [Input Group](./?p=atoms-input-group) pattern showing an example with checkboxes.
+
+### How to generate
+* set the `inputGroup.type` variable to "checkbox"