DP-4176 Service page documentation

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-gray.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 'color' variable to 'gray'

styleguide/source/_patterns/01-atoms/01-buttons/button-as-green.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 'color' variable to 'green'
+* set the 'outline' variable to true
+* set the 'size' variable to 'small'

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-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,9 +1,11 @@
 {
   "button": {
+    "href": "",
+    "info": "",
     "text": "Button",
     "type": "button",
     "size": "",
-    "theme": "",
+    "color": "",
     "outline": false
   }
 }

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-alt-color) color
+* [green with an outline](./?p=atoms-button-as-alt-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")
+  color:
+    type: string / optional ("" or "gray")
   outline: 
     type: boolean
 }

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

@@ -1,12 +1,19 @@
-{% 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 %}
+{# Depreciated after version 5.0 #}
+{% set buttonColor = button.theme ? "ma__button--" ~ button.theme %}
 
-<button type="{{ button.type }}" class="{{ buttonClass }} {{ buttonClassSize }}">{{ button.text }}</button>
+{% set buttonColor = button.color ? "ma__button--" ~ button.color %}
+
+{% if button.href %}
+  <a 
+    href="{{ button.href }}" 
+    class="ma__button {{ buttonSize }} {{buttonColor}} {{buttonStyle}}"
+    title="{{ button.info }}">
+    {{ button.text }}
+  </a>
+{% else %}
+  <button type="{{ button.type }}" class="ma__button {{ buttonSize }} {{buttonColor}} {{buttonStyle}}" aria-label="{{ button.info }}">{{ button.text }}</button>
+{% endif %}

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

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

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

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

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

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

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

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

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

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

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,6 +1,6 @@
 {
   "compHeading": {
-    "title": "Employment",
+    "title": "Title text",
     "sub": "",
     "color": "",
     "id": "employment",

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)