Merge branch 'dev' into DP-6883_svg-optimization-dev

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,4 +1,6 @@
 <!-- Please use TICKET Description of ticket as PR title (i.e. DP-1234 Add back-to link on Announcement template)  -->
+Any PRs being created needs a changelog.txt file before being merged into dev. See: [Change Log Instructions](/docs/change-log-instructions.md)
+
 
 ## Description
 <!-- A few sentences describing the overall goals of the pull request's commits.-->

changelogs/DP-7063.txt

@@ -0,0 +1,20 @@
+___DESCRIPTION___
+Change_type (see below)
+Change_impact (see below)
+- DP-7063: Added SVG Chat icon
+
+___SEMANTIC VERSION (see below)___
+
+
+___POST DEPLOY STEPS___
+- None
+
+___CHANGE TYPES___
+- Added: SVG chat icon
+
+Note: See http://keepachangelog.com/ for more info about changelogs.
+
+___CHANGE IMPACT___
+- Minor
+
+Note: Refer to `docs/versioning.md` for more info about change impact according to semantic versioning.

changelogs/DP-7786.txt

@@ -0,0 +1,20 @@
+___DESCRIPTION___
+Change_type (see below)
+Change_impact (see below)
+- DP-7786: create sort by variant
+
+___SEMANTIC VERSION (see below)___
+
+
+___POST DEPLOY STEPS___
+- None
+
+___CHANGE TYPES___
+- Added: atoms/buttons/button-toggle as a new pattern, and inline, small modifiers for label. This will be used in the search spa.
+
+Note: See http://keepachangelog.com/ for more info about changelogs.
+
+___CHANGE IMPACT___
+- Minor
+
+Note: Refer to `docs/versioning.md` for more info about change impact according to semantic versioning.

changelogs/template.txt

@@ -0,0 +1,28 @@
+___DESCRIPTION___
+Change_type (see below)
+Change_impact (see below)
+- DP-1234: Adds apples to apple trees for admin apple pickers
+
+___SEMANTIC VERSION (see below)___
+
+
+___POST DEPLOY STEPS___
+1. Do this
+2. Then do this
+
+___CHANGE TYPES___
+- Added for new features.
+- Changed for changes in existing functionality.
+- Deprecated for soon-to-be removed features.
+- Removed for now removed features.
+- Fixed for any bug fixes.
+- Security in case of vulnerabilities.
+
+Note: See http://keepachangelog.com/ for more info about changelogs.
+
+___CHANGE IMPACT___
+- Minor
+- Major
+- Patch
+
+Note: Refer to `docs/versioning.md` for more info about change impact according to semantic versioning.

docs/change-log-instructions.md

@@ -0,0 +1,20 @@
+# Change Log Instructions
+
+This documentation outlines a simple series of steps to keep `release-notes.md` up-to-date, avoid merge conflicts, and better surface post deply steps.
+
+## Dev: Before You Submit a PR for a Feature Branch or Hot Fix
+
+1. Make a copy of `changelogs/template.txt` with the ticket number as the name (example: `DP-1234.txt`). If there is no ticket number for the contribution, just use the branch name and your initials (`awesome- feature-branch.txt`).
+1. Write a plain language description of the feature you're contributing. It needs to include the name, what changed, and who it impacts.
+1. Write down any post deploy steps that need to be performed (Examples: `This change will effect the local build. Make sure all developers know what steps to take after this gets in to dev`).
+1. Commit the file and open your PR.
+
+## Release Master: When you are Releasing
+
+Do this after your open your release branch:
+
+1. In `release-notes.md`, create a new section for the release with "Added", "Changed", and "Removed" sub-sections.
+1. Go through each `changelogs/*.txt` file and copy the description into the appropriate sub-section of `release-notes.md`.
+1. Keep a list of post deployment steps handy for yourself. 
+1. After the last description is copied and you have all the post deployment steps, delete all files in `changelogs/` except for `changelogs/template.txt.`
+1. Commit changes to the release branch.

docs/release.md

@@ -6,7 +6,7 @@ Mayflower release managers with the necessary repo permissions can follow these
 1. If there is new code to be delivered, notify the team at least two hours ahead of time that a release is coming. Follow the [Communicate Releases](https://wiki.state.ma.us/display/massgovredesign/Communicating+Releases) instructions for Upcoming Deployments.
 1. Check out the [massgov/mayflower `dev` branch](https://github.com/massgov/mayflower/commits/dev): `git checkout dev` and pull the latest from upstream `git pull upstream dev`. (This assumes that your massgov/mayflower remote repo is named `upstream`)
 1. Create a release branch `git checkout -b release-#.#.#` where `#.#.#` is the next version (i.e. `5.0.0`).  Read more about [Mayflower and semantic versioning](docs/versioning.md) to ensure that your are creating the right type of version.
-1. Document the new release based on the "Upcoming" queue at the top of [release-notes.md](/release-notes.md), and then commit.
+1. Add [release notes](/docs/Change Log Instructions.md) to the top of [release-notes.md](/release-notes.md) based on the "changelog.txt" files, and then commit.
 1. Move into the `stylguide` directory `cd styleguide` (may be a good idea to run `npm install` in case the release includes new packages).
 1. Bump the version on the homepage - `@pages/readme2.json` - by updating the version and date text in `errorPage.type`
 1. Bump the version of the npm package by running `gulp bump -v=#.#.#` where `#.#.#` is the version you are releasing.

release-notes.md

@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file.
 
+See [Change Log Instructions](docs/changelog-log-instructions.md) for directions on updating this file.
+
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 
 ```

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

@@ -0,0 +1,15 @@
+{
+  "buttonToggle":{
+    "options":[{
+      "value":"",
+      "text":"Date",
+      "selected": false
+    },{
+      "value":"",
+      "text":"Relevance",
+      "selected": true
+    }],
+    "id": "sort",
+    "labelText":"Sort by:"
+  }
+}

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

@@ -0,0 +1,32 @@
+---
+title: Button Toggle
+---
+Description: Two linked `button` elements which toggle between two values.
+
+### Status:
+* New as of 5.14.0
+
+### Variables:
+~~~
+buttonToggle {
+  options: [{
+    value:
+      type: string / required
+    text:
+      type: string / required
+    selected:
+      type: boolean /required
+  },{
+    value:
+      type: string / required
+    text:
+      type: string / required
+    selected:
+      type: boolean /required
+  }]
+  id:
+    type: string (url) / required
+  labelText:
+    type: string / required
+}
+~~~

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

@@ -0,0 +1,5 @@
+<span>
+  <label for="{{ buttonToggle.id }}" class="ma__label--inline ma__label--small">{{buttonToggle.labelText}}</label>
+  <button value="{{ buttonToggle.options[0].value }}" type="button" class="ma__button-toggle {{ buttonToggle.options[0].selected ? "ma__button-toggle--" ~ "selected" : "" }}">{{ buttonToggle.options[0].text }}</button> |
+  <button value="{{ buttonToggle.options[1].value }}" type="button" class="ma__button-toggle {{ buttonToggle.options[1].selected ? "ma__button-toggle--" ~ "selected" : "" }}">{{ buttonToggle.options[1].text }}</button>
+</span>

styleguide/source/_patterns/01-atoms/05-icons/svg-chat.twig

@@ -0,0 +1 @@
+<svg aria-hidden="true" id="SvgjsSvg1000" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="32" height="30" viewBox="0 0 32 30"><defs id="SvgjsDefs1001"></defs><path d="M29.0704035,21.8970162 C30.713614,19.6037849 31.5799575,16.9505422 31.5799575,14.2109809 C31.5799575,6.37494075 24.496573,0 15.7899787,0 C7.08338446,0 0,6.37494075 0,14.2109809 C0,22.047021 7.08338446,28.4219617 15.7899787,28.4219617 C18.0332084,28.4219617 20.1995935,28.006159 22.2343954,27.1861327 C25.8160889,29.253041 30.7672999,29.9662217 30.9804646,29.9956963 C31.0046759,29.9993806 31.0294136,30.0009596 31.0536249,30.0009596 C31.2509996,30.0009596 31.435216,29.8899034 31.5246926,29.7093713 C31.6257484,29.5067333 31.5857471,29.2625149 31.425742,29.1025098 C30.215177,27.8919448 29.3814661,25.3376526 29.0704035,21.8970162" /></svg>

styleguide/source/_patterns/02-molecules/contact-us.twig

@@ -20,6 +20,8 @@
     {% endif %}
       {% set columnHeading = contactUs.subTitle|merge({"level": contactUs.level}) %}
       {% include "@atoms/04-headings/column-heading.twig" %}
+
+      <span class="ma__contact-us--accordion__status js-accordion-status" aria-label="click to show info">+</span>
     {% if outerAccordion %}
       </button>
     {% endif %}

styleguide/source/_patterns/03-organisms/by-template/illustrated-header.md

@@ -9,16 +9,17 @@ This is displays a Page Header pattern with an optional image off to the right
 
 ### Variant options
 * If the image isn't used a [green](./?p=organisms-illustrated-header-colored) background is shown in it's place.
+* There is an inverted variation which uses a [blue](./?p=organisms-illustrated-header-inverted) background in place of the white in the standard variant.
 
 
 ### Variables
 ~~~
 illustratedHeader: {
-  bgTitle: 
+  bgTitle:
     type: string / optional (required with image)
-  bgImage: 
+  bgImage:
     type: string (image path) / optional
-  category: 
+  category:
     type: string / required,
   pageHeader: {
     type: pageHeader / required

styleguide/source/_patterns/03-organisms/by-template/illustrated-header.twig

@@ -5,7 +5,12 @@
   {% set imageAlt = illustratedHeader.bgTitle %}
 {% endif %}
 
-<section class="ma__illustrated-header">
+{% set illustratedHeaderClass = "ma__illustrated-header" %}
+{% if illustratedHeader.inverted %}
+  {% set illustratedHeaderClass = "ma__illustrated-header ma__illustrated-header--inverted" %}
+{% endif %}
+
+<section class="{{illustratedHeaderClass}}">
   <div class="ma__illustrated-header__container">
     <div class="ma__illustrated-header__content">
       <div class="ma__illustrated-header__category" aria-hidden="true">

styleguide/source/_patterns/03-organisms/by-template/illustrated-header~inverted.json

@@ -0,0 +1,28 @@
+{
+  "illustratedHeader": {
+    "bgInfo": "Forest of the Berkshires",
+    "bgImage": "../../assets/images/placeholder/600x450.png",
+    "category": "Law Library",
+    "inverted": true,
+    "pageHeader": {
+      "title": "Rules of Criminal Procedure",
+      "subTitle": "",
+      "optionalContents": [{
+        "path": "@organisms/by-author/rich-text.twig",
+        "data": {
+          "richText": {
+            "rteElements": [{
+              "path": "atoms-paragraph",
+              "data": {
+                "paragraph" : {
+                  "text": "A full listing of the Rules of Criminal Procedure that govern the Massachusetts Court System"
+                }
+              }
+            }]
+          }
+        }
+      }]
+    },
+    "headerTags": null
+  }
+}

styleguide/source/_patterns/03-organisms/by-template/table-of-contents-hierarchy.json

@@ -0,0 +1,39 @@
+{
+  "tableOfContentsHierarchy": {
+    "coloredHeading": {
+      "text": "Table of Contents",
+      "color": "green"
+    },
+    "sections": [
+      {
+        "text": "Executive Summary",
+        "href": "#"
+      },
+      {
+        "text": "1. Scope of Rules",
+        "linkItems": [
+          {
+            "text": "Thing One",
+            "href": "#"
+          },
+          {
+            "text": "Thing Two",
+            "href": "#"
+          }
+        ]
+      },
+      {
+        "iconSize": "",
+        "icon": "@atoms/05-icons/svg-doc-docx.twig",
+        "decorativeLink": {
+          "text": "Link to a file for download",
+          "href": "#",
+          "info": ""
+        },
+        "size": "40kb",
+        "format": "DOCX"
+      }
+    ]
+
+  }
+}

styleguide/source/_patterns/03-organisms/by-template/table-of-contents-hierarchy.md

@@ -0,0 +1,35 @@
+### Description
+This Pattern shows an expantable table of contents which can contain simple links, download links, or expandable sections.
+
+### Status
+* Stable as of 5.11.0
+
+### Pattern Contains
+* Decorated Link
+* Download Link
+
+### Usage Guidelines
+* This is meant to be used to contain a mix of links, download links, or section titles with child links/download links within accordions.
+
+### Variables
+~~~
+tableOfContentsHierarchy: {
+  coloredHeading: {
+    type: coloredHeading / required
+  },
+  sections: [{
+    type: mixedTypes...
+        downloadLink
+        or
+        decorativeLink
+        or
+        {
+            text: string / required,
+            linkItems: [{
+                type: decorativeLink or downloadLink
+            }]
+        }
+  }]
+
+}
+~~~

styleguide/source/_patterns/03-organisms/by-template/table-of-contents-hierarchy.twig

@@ -0,0 +1,38 @@
+<nav class="ma__toc--hierarchy">
+  {% set coloredHeading = tableOfContentsHierarchy.coloredHeading %}
+  {% include "@atoms/04-headings/colored-heading.twig" %}
+  <ul class="ma__toc--hierarchy__container">
+      {% for section in tableOfContentsHierarchy.sections %}
+        {% if section.linkItems|length > 0 %}
+          <li class="ma__toc--hierarchy__accordion js-accordion">
+            <button class="ma__toc--hierarchy__title js-accordion-link" type="button">
+              {{section.text}}
+            </button>
+            <ul class="ma__toc--hierarchy__accordion-content js-accordion-content">
+              {% for link in section.linkItems %}
+                <li>
+                  {% if link.icon %}
+                    {% set downloadLink = link %}
+                    {% include "@molecules/download-link.twig" %}
+                  {% else %}
+                    {% set decorativeLink = link %}
+                    {% include "@atoms/decorative-link.twig" %}
+                  {% endif %}
+                </li>
+              {% endfor %}
+            </ul>
+          </li>
+        {% elseif section.icon %}
+          <li>
+            {% set downloadLink = section %}
+            {% include "@molecules/download-link.twig" %}
+          </li>
+        {% else %}
+          <li>
+            {% set decorativeLink = section %}
+            {% include "@atoms/decorative-link.twig" %}
+          </li>
+        {% endif %}
+      {% endfor %}
+  </ul>
+</nav>