DP-4176 Service page documentation (#521)

* Add shell script to deploy PL build to gh-pages branch of given repo

* Make deploy script executable

* Use bash shebang in deploy script

* Fix conditional logic

* Write git output to screen

* Fix conditional logic check for false

* print variable name in log

* update order of args

* Fix conditional logic boolean false

* fix variable assignment, remove spaces

* echo errors in red, success in green

* fix validation of target environment

* Update deploy script argument validation

* Validate git push during deploy

* Exit deploy script on failed build

* Update docs

* Fix syntax error.

* Create a function for cleanup

* Fix target URL

* Create function for success / error logging

* Update docs

* Ensure that patterns are blown away before built

* Remove exit on error log

* Fix string comparison in log function

* Add final error message to deploy script

* Make wrong target remote repo message more helpful

* Create CNAME for staging (test)

* Test confirm functionality

* Create CNAME for stage / prod

* Add logic for final success message non/prod

* Update readme with deploy, contrib, versions, license info

See template link under readme > acknowledgements

* Create contributing documentation

* Create deploy documentation

* Fix readme link typo

* Fix link to contributing.md

* Update github pages settings docs

* Update Contributing md with Mayflower, PR tips.

* Create PR template

* Create issue template

* Fix typo and make contributing language more friendly

* Update steps to browse in readme.

* Update readme browse Mayflower steps

* Fix readme typo.

* Add deployment steps to contributing.md

* Fix typo, styling of deploy docs.

* Add PHP version to readme.

* Update built with pattern lab language in readme

* Update mayflower artifacts text in readme.

* Add git commit context to contributing docs

* Format readme

* Describe project file structure in contributing.md

* Format contributing.md

* Clarify github pull request buttons in contributing md

* Remove acknowledgements from contributing TOC

* Format prerequisite in deploy docs

* Link to gulp readme from deploy docs

* Log output when production deploy aborted

* Use main repo as example in deploy script comments

* Make cname a parameter for deploy script, required for prod only

* Move CONTRIBUTING.md into .github directory

* Remove written descriptions of Github's UI, replace with link to docs

* Make CONTRIBUTING.md branching language more consistent with git

* Move pattern lab docs to first step in CONTRIBUTING > working with PL

* Remove vague language in CONTRIBUTING.md

* Clarify Mayflower Artifacts in readme

* Make CONTRIBUTING.md > keeping your fork in sync explanation more clear.

* Move environment setup and demo install instructions to own docs

* Group steps in CONTRIBUTING.md

* Fix link to CONTRIBUTING.md after move to /.github

* Simplify readme install / contribute / deploy sections

* Remove link to personal fork, but keep repo name, in deploy docs

* Fix mayflower-artifacts url in readme

* Update the deploy success message to use cname if present

* Fix cname conditional logic in deploy script.

* Use [-c] rather tha [-cname] as parameter for gh pages deploy script

* Fix typo in success message for cname

* Fix deploy script config for url.domain/assetsPath when cname passed

* Improve script logging: hide lengthy status/success, color + tag logs.

* Fix typos.

* Fix typo in docs for [-t] argument.

* Move log prior to command for creating cname in deploy script.

* Avoid having to escape / in deploy script > assetsPath var

Use ! as delimeter, see: https://coderwall.com/p/khdkuw/delimiters-in-sed-substitution

* Allow assetsPath to be passed with cname flag

* Accept [-a] argument in deploy script

* Fix deploy script [-t] flag to be target remote repo *owner*

This seems to have reverted to a prior state somehow.

* Remove extra " from assetsPath in url.json

* Update [-c] validation log to reflect [-c] vs [-cname]

* Add developer deploy docs note about cname and assetPaths flags.

* Uncomment script.  So. It. Does. Things.  (silly)

* Link to mayflower artifacts docs from readme (vs duplicating content)

* DP-4048 - Annotations -  updating to look for JS classes used.

* DP-4048 - Annotations - The extra html added breaks the styles

* Dp-4048 - Extra Js - removing unused JS files

* DP-4048 - updating Styling of Pattern Info panel

* DP-4048 - Contact List - Documentation

* DP-4048 - Image

* DP-4048 - Pattern Documentation - Remving Usage Guidelines.

* DP-4048 - additional tweaks to md files

* DP-4048 - Lineage styling

* DP-4048 - Removing title yaml.

* Make all intra-docs links relative

* Fix deploy docs links

* Update clone steps to be more clear

* Ensure branch is clean after deploy, fix typos

* Add patternlab task to deafult gulp ( = always generate patterns)

* Try gulp prod in deploy script

* Ensure public directory gets cleaned out prior to generation

* DP-4048 - Contact List - removed 'title' field from docs

* DP-4176 - Service Page and Template - documentation

* DP-4176 - Page Banner - Documentation

* DP-4048 Establish format for pattern docs (#515)

* DP-4048 - Annotations -  updating to look for JS classes used.

* DP-4048 - Annotations - The extra html added breaks the styles

* Dp-4048 - Extra Js - removing unused JS files

* DP-4048 - updating Styling of Pattern Info panel

* DP-4048 - Contact List - Documentation

* DP-4048 - Image

* DP-4048 - Pattern Documentation - Remving Usage Guidelines.

* DP-4048 - additional tweaks to md files

* DP-4048 - Lineage styling

* DP-4048 - Removing title yaml.

* DP-4048 - Contact List - removed 'title' field from docs

* DP-4176 - Image - documentation

* DP-4176 - Video - documentation

* DP-4176 - Documentation template

* DP-4176 - Key Actions - Documentation

* DP-4176 - Decorative Link - documentation

* DP-4176 - Key Actions - adding contained type

* DP-4167 - Callout Link - documentation

* DP-4176 - Illustrated link - documentation

* DP-4176 - Variant Documentation template

* DP-4176 - Contact List - Updated variant documentation

* DP-4176 - Sidebar Heading - documentation

* DP-4176 - Comp Heading - documentation

* DP-4176 - Variants - making link relative './'

* DP-4176 - Icon Links - documentation

* DP-4176 - Link List - documentation

* DP-4176 - Link List - documention of Right Rail usage

* DP-4176 - Action Finder - documentation

* DP-4176 - Mapped Locations - documentation

* DP-4176 - Variant template updated

* DP-4176 - Mapped Locations - Removed title from contained version

* DP-4176 - Callout Link External - removed variant

* Mapped Locations - Fixing bug with assigning the colored background

* DP-4176 - Split Columns - documentation

* DP-4176 - Rich Text - documentation

* DP-4176 - Download Link - documentation

* DP-4176 - Forms Downloads - documentation

* DP-4176 - Utility Panel - documentation

* DP-4176 - Utility Nav - documentation

* DP-4176 - Header - documentation

* DP-4176 - Button Search - documentation

* DP-4176 - Site Logo - documentation

* DP-4176 - Header Search - documentation

* DP-4176 - Main Nav - documentation

* DP-4176 - Button - documentation

* DP-4176 - Button - adding link option and correcting styling classes

* DP-4176 - Button Link - marking it as depreciated

* DP-4176 - Floating Action - updated to use just the button atom

* DP-4176 - Floating Action - documentation

* DP-4176 - Buttons - Updates to SCSS selectors

* DP-4176 - Floating Action - correcting styling classes

* DP-4176 - Footer - documentation

* DP-4176 - Heading / Util Panel - marking as in Progress so we can update

* DP-4176 - Button - re-adding support for the 'theme' variable

* DP-4176 - Social Links - documentation

* DP-4176 - Footer Links - documentation

* DP-4176 - Buttons - leaving old styles for backward compatibilty

* DP-4167 - Callout Link - moving the info variable to a title attribute

* DP-4176 - Buttons - incorrect indentation

* DP-4167 - Rich Text - updating to include all accepted patterns

* DP-4176 - Rich text sub patterns - documentation

* DP-4167 - figure - documentation and modified to use --left/--right classes

* DP-4167 - Table - documentation

* DP-4080 - Versioning Documentation (#504)

* DP-4080 - Versioning - first draft

* Dp-4080 - let's try that again after saving the file.

* DP-4080 - Versioning - updating Major version text

* Second Draft

* DP-4080 - Versions - Third draft with examples versions

* DP-4080 - Version - reducing importance of Terms

* DP-4080 - Version - Edits after reviewing.

* DP-4080 - Versions - missed a few

* DP-4080 - Versions - Weird copy and paste issue.

* DP-4080 - Tweak to Minor version description

* DP-4080 - Version Docs - fourth version

* DP-4080 - Version doc - version 5

* DP-4176 - Callout Link - making CSS backward compatible

* DP-4176 - Floating Action - making code backward compatible

* DP-4177 - Button - fixed logic to use old "theme" variable for color.

* DP-4178 - Button - fixing broken links

* DP-4176 - Button - switching color back to theme include values

* DP-4176 - Comp Heading - correcting id value

* DP-4176 - Decorative Link - removing schema.org and using title

* DP-4176 - Linked List - Update docs

* DP-4176 - Mapped Locations - updated docs

* DP-4176 - Page Banner - Updated Docs

* DP-4176 - Services Template - updated docs

* DP-4176 - Action Finder - updated docs

* DP-4176 - Download Link - removing property

* DP-4176 - Callout Link - Better descriptive text

* DP-4176 - Video - updated documentation

* DP-4176 - Decorative Link - updated docs

* DP-4176 - Mapped Locations - adding more useage guidelines

* DP-4176 - Button - updated docs

* DP-4176 - Table - updated docs

* DP-4176 - Comp Heading - changing id value

styleguide/source/_data/floating-action.json

@@ -1,10 +1,11 @@
 {
   "floatingAction": {
-    "type":"buttonLink",
     "alignment": "right",
     "button": {
       "href": "#",
       "text": "Tell us what you think",
+      "info": "",
+      "type": "",
       "theme": "green",
       "outline": true,
       "size": "small"

styleguide/source/_data/footerLinks.json

@@ -2,6 +2,7 @@
   "footerLinks": {
     "items": [{
       "heading": "FooterLinks1",
+      "id": "FooterLinks1",
       "links": [{
         "href": "#",
         "text": "Living"
@@ -20,6 +21,7 @@
       }]
     },{
       "heading": "FooterLinks2",
+      "id": "FooterLinks2",
       "links": [{
         "href": "#",
         "text": "Contact Us"
@@ -32,6 +34,7 @@
       }]
     },{
       "heading": "FooterLinks3",
+      "id": "FooterLinks3",
       "links": [{
         "href": "#",
         "text": "Sitemap"

styleguide/source/_data/utilityNav.json

@@ -1,24 +1,5 @@
 {
   "utilityNav": {
-    "dropdown": {
-      "labelText": "Language:",
-      "id": "lang-select",
-      "name": "lang-select",
-      "options": [{
-        "text": "Default language: English",
-        "value": "en"
-      },{
-        "text": "Français",
-        "value": "fr"
-      },{
-        "text": "Deutsch",
-        "value": "de"
-      },{
-        "text": "Español",
-        "value": "es"
-      }]
-    },
-
     "items": [{
       "text": "State Organizations",
       "ariaLabelText": "",

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

@@ -0,0 +1,5 @@
+### Description
+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

styleguide/source/_patterns/01-atoms/01-buttons/button-as-outline.md

@@ -0,0 +1,5 @@
+### Description
+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

styleguide/source/_patterns/01-atoms/01-buttons/button-as-quaternary-color.md

@@ -0,0 +1,5 @@
+### Description
+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'

styleguide/source/_patterns/01-atoms/01-buttons/button-as-secondary-color.md

@@ -0,0 +1,7 @@
+### Description
+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'

styleguide/source/_patterns/01-atoms/01-buttons/button-as-small.md

@@ -0,0 +1,5 @@
+### Description
+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'

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

@@ -3,7 +3,7 @@ title: Button Link
 ---
 Description: A link `<a>` element which is styled to look like a button.
 
-## State: ALPHA
+## State: depreciated
 
 ### Notes:
 - 'theme' eventually needs to be changed to 'color' and used as a modifier class (--color)

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

@@ -1,22 +1,13 @@
----
-title: Button Search
----
-Description: A `<button> [type='submit']` element which contains a visually hidden `<span>` element and an `<svg>` icon element.
+### Description
+A Button used for keyword search.
 
-## State: ALPHA
-### Used In:
-- [@molecules/header-search](/?p=molecules-header-search)
-- [@molecules/keyword-search](/?p=molecules-keyword-search)
+### Status
+* Stable as of 5.0.0
 
-### Contains:
-- [@atoms/05-icons/svg-search.twig](/?p=atoms-svg-search)
-
-### Required Variables: 
+### Variables
 ~~~
-buttonSearch {
-    text: 
-        type: string/required
+buttonSearch: {
+  text:
+    type: string / required
 }
 ~~~
-
-~~~

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

@@ -1,5 +1,7 @@
 {
   "button": {
+    "href": "",
+    "info": "",
     "text": "Button",
     "type": "button",
     "size": "",

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

@@ -1,26 +1,32 @@
----
-title: Button
----
-Description: A `<button>` element styled solid or outline and regular or small size
+### Description
+This is the standard button pattern
 
-## State: ALPHA
+### Status
+* Stable as of 6.0.0
 
-### Notes:
-- 'theme' eventually needs to be changed to 'color' and used as a modifier class (--color)
+### Variant options
+* Using a [link](./?p=atoms-button-as-link) instead of a button
+* [small](./?p=atoms-button-as-small)
+* [outline](./?p=atoms-button-as-outline)
+* [gray](./?p=atoms-button-as-quaternary-color) color
+* [green with an outline](./?p=atoms-button-as-secondary-color)
 
-### Used In:
 
-### Variables:
+### Variables
 ~~~
-buttonMain {
+button: {
+  href:
+    type: string (url) / optional
+  info: 
+    type: string / optional
   text: 
     type: string / required
   type:
     type: string / optional (ex: "button", "submit")
   size:
     type: string / optional ("" or "small")
   theme:
-    type: string / optional ("" or "alt")
+    type: string / optional ("", "secondary", or "quaternary")
   outline: 
     type: boolean
 }

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

@@ -1,12 +1,16 @@
-{% set buttonClassSize = button.size ? "ma__button--" ~ button.size : "" %}
-{% set buttonClass = "ma__button" %}
+{% set buttonSize = button.size ? "ma__button--" ~ button.size : "" %}
 
-{% if button.outline %}
-  {% set buttonClass = buttonClass ~ "-minor" %}
-{% endif %}
+{% set buttonStyle = button.outline ? "ma__button--minor" : "" %}
 
-{% if button.theme %}
-  {% set buttonClass = buttonClass ~ "-" ~ button.theme %}
-{% endif %}
+{% set buttonTheme = button.theme ? "ma__button--" ~ button.theme : "" %}
 
-<button type="{{ button.type }}" class="{{ buttonClass }} {{ buttonClassSize }}">{{ button.text }}</button>
+{% if button.href %}
+  <a 
+    href="{{ button.href }}" 
+    class="ma__button {{ buttonSize }} {{buttonTheme}} {{buttonStyle}}"
+    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/01-buttons/button~as-link.json

@@ -0,0 +1,11 @@
+{
+  "button": {
+    "href": "#",
+    "info": "",
+    "text": "Button",
+    "type": "",
+    "size": "",
+    "theme": "",
+    "outline": false
+  }
+}

styleguide/source/_patterns/01-atoms/01-buttons/button~outline.json → styleguide/source/_patterns/01-atoms/01-buttons/button~as-outline.json

@@ -1,5 +1,7 @@
 {
   "button": {
+    "href": "",
+    "info": "",
     "text": "Button",
     "type": "button",
     "size": "",

styleguide/source/_patterns/01-atoms/01-buttons/button~alt.json → styleguide/source/_patterns/01-atoms/01-buttons/button~as-quaternary-color.json

@@ -1,9 +1,11 @@
 {
   "button": {
+    "href": "",
+    "info": "",
     "text": "Button",
     "type": "button",
     "size": "",
-    "theme": "alt",
+    "theme": "quaternary",
     "outline": false
   }
 }

styleguide/source/_patterns/01-atoms/01-buttons/button~as-secondary-color.json

@@ -0,0 +1,11 @@
+{
+  "button": {
+    "href": "",
+    "info": "",
+    "text": "Button",
+    "type": "button",
+    "size": "small",
+    "theme": "secondary",
+    "outline": true
+  }
+}

styleguide/source/_patterns/01-atoms/01-buttons/button~small.json → styleguide/source/_patterns/01-atoms/01-buttons/button~as-small.json

@@ -1,5 +1,7 @@
 {
   "button": {
+    "href": "",
+    "info": "",
     "text": "Button",
     "type": "button",
     "size": "small",

styleguide/source/_patterns/01-atoms/04-headings/comp-heading-centered.md

@@ -1,10 +1,5 @@
----
-title: Comp Heading Centered 
----
-Description: Centered Variant of Comp Heading.
+### Description
+This is a variant of the [Comp Heading](./?p=atoms-comp-heading) showing an example with a centered underline.
 
-### Notes
-- _centered variable is set to 'true'_
-
-### Base
-- [@atoms/04-headings/comp-heading](/?p=atoms-comp-heading)
+### How to generate
+* Set the 'centered' variable equal to boolean value true

styleguide/source/_patterns/01-atoms/04-headings/comp-heading-subheading.md

@@ -1,10 +1,5 @@
----
-title: Comp Subheading
----
-Description: Subheading Variant of Comp Heading.
+### Description
+This is a variant of the [Comp Heading](./?p=atoms-comp-heading) showing an example as a sub heading (H3).
 
-### Notes
-- _sub variable is set to 'true'_
-
-### Base
-- [@atoms/04-headings/comp-heading](/?p=atoms-comp-heading)
+### How to generate
+* Set the 'sub' variable equal to the boolean value true

styleguide/source/_patterns/01-atoms/04-headings/comp-heading-yellow.md

@@ -1,10 +1,5 @@
----
-title: Comp Heading Yellow
----
-Description: Yellow Variant of Comp Heading.
+### Description
+This is a variant of the [Comp Heading](./?p=atoms-comp-heading) showing an example with a yellow underline.
 
-### Notes:
-- _color variable is set to 'yellow'_
-
-### Base
-- [@atoms/04-headings/comp-heading](/?p=atoms-comp-heading)
+### How to generate
+* Set the 'color' variable equal to "yellow"

styleguide/source/_patterns/01-atoms/04-headings/comp-heading.json

@@ -1,9 +1,9 @@
 {
   "compHeading": {
-    "title": "Employment",
+    "title": "Title text",
     "sub": "",
     "color": "",
-    "id": "employment",
+    "id": "GUID9827924",
     "centered": ""
   }
 }

styleguide/source/_patterns/01-atoms/04-headings/comp-heading.md

@@ -1,38 +1,26 @@
----
-title: Comp Heading
----
-Description: An `<h2>` or `<h3>` element with a styled underline color designated by its CSS class.
+### Description
+An `<h2>` element with a styled underline color
 
-## State: ALPHA
+### Status
+* Stable as of 5.0.0
 
-### Notes:
+### Variant options
+* [Sub Heading](./?p=atoms-comp-heading-subheading) by setting 'sub' to true.
+* [Centered](./?p=atoms-comp-heading-centered) by setting 'centered' to true
+* [Yelllow Underline](./?p=atoms-comp-heading-yellow) by setting 'color' to "yellow"
 
-
-### Used In:
-- [@molecules/action-section](/?p=molecules-action-section)
-- [@organisms/by-author/key-actions](/?p=organisms-key-actions)
-- [@organisms/by-author/helpful-links](/?p=organisms-helpful-links)
-- [@organisms/by-author/form-download](/?p=organisms-form-download)
-- [@organisms/by-author/multi-row-section](/?p=organisms-multi-row-section)
-
-### Variables:
+### Variables
 ~~~
 compHeading: {
   title:
     type: string / required
   sub:
-    type: string ("true" || "" )
+    type: string ("true" || "" ) / optional
   color:
-    type: string ("yellow")
+    type: string ("yellow") / optional
   id:
-    type: string
+    type: string (unique per page) / optional
   centered:
     type: boolean
 }
 ~~~
-
-### Variations
-- [@atoms/04-headings/comp-heading](/?p=atoms-comp-heading)
-- [@atoms/04-headings/comp-heading-subheading](/?p=atoms-comp-heading-subheading)
-- [@atoms/04-headings/comp-heading-yellow](/?p=atoms-comp-heading-yellow)
-- [@atoms/04-headings/comp-heading-centered](/?p=atoms-comp-heading-centered)

styleguide/source/_patterns/01-atoms/04-headings/comp-heading~centered.json

@@ -1,9 +1,9 @@
 {
   "compHeading": {
-    "title": "Employment",
+    "title": "Title text",
     "sub": "",
     "color": "",
-    "id": "employment",
+    "id": "",
     "centered": "true"
   }
 }

styleguide/source/_patterns/01-atoms/04-headings/comp-heading~subheading.json

@@ -1,9 +1,9 @@
 {
   "compHeading": {
-    "title": "Key Actions",
+    "title": "Title text",
     "sub": true,
     "color": "",
-    "id": "key-actions",
+    "id": "",
     "centered": ""
   }
 }