Release 9.2.0

CHANGELOG.md

@@ -13,6 +13,25 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 **For example**
 - DP-1234: The short description text on a [service detail](http://mayflower.digital.mass.gov/?p=pages-detail-for-service-howto-location) page banner ([@organisms/by-template/page-banner](http://mayflower.digital.mass.gov/?p=organisms-page-banner)) should now render ([PR #493](https://github.com/massgov/mayflower/pull/493))
 
+## 9.2.0 (05/05/2019)
+
+### Added
+- (Patternlab) [Header] DP-4562: Set focus state for search on mobile menu in mobileNav module. #473
+- (React) [HelpTip] DP-12875: Add `disabled` prop to disable HelpTip trigger text. #494
+
+### Fixed
+- (React) [InputSlider] DP-12732: Allows slider callback and updates form context on handler drag (Added onUpdate prop) #495
+- (React) [InputSlider] DP-12732: Allows keyboard actions and slider track click to update value (Changed handleChange from using onSlideEnd to onChange) #495
+- (React) [InputCurrency] DP-12807: Prevent InputCurrency returning NaN when default value is set to null #484
+- (React) [ErrorMessage] DP-12806: Fix error message inline styling #484
+- (React) [InputSlider] DP-12875: Disable handle button when InputSlider is disabled. #494
+- (React) [InputCurrency] DP-12890: Fix `NaN` value when defaultValue is null using up/down buttons. #498
+
+### Changed
+- (Patternlab) [SectionLinks] DP-9249: Topic card more links #472
+- (React) [InputCurrency] DP-12890: Pass event type to callback #498
+
+
 ## 9.1.1 (02/19/2019)
 
 ### Fixed

assets/scss/03-organisms/_help-tip.scss

@@ -54,12 +54,20 @@ $border-width: 1px;
     border-bottom: 2px dotted $c-primary;
     background-color: $c-bay-blue-lightest;
 
+    svg {
+      margin-left: 5px;
+      width: 16px;
+      height: 16px;
+      margin-bottom: -.1em;
+      fill: $c-font-link;
+    }
+
     &:focus {
       box-shadow: 0 0 3px 3px $c-focus;
       outline: 0;
     }
 
-    &.active, &:hover {
+    &--active, &:hover {
       background-color: $c-primary;
       color: $c-white;
 
@@ -68,12 +76,8 @@ $border-width: 1px;
       }
     }
 
-    svg {
-      margin-left: 5px;
-      width: 16px;
-      height: 16px;
-      margin-bottom: -.1em;
-      fill: $c-font-link;
+    &--disabled {
+      pointer-events: none;
     }
   }
 

changelogs/template.txt → changelogs/template.md

@@ -1,7 +1,13 @@
+___EXAMPLE___
+Minor
+Added
+- (Patternlab) [Header] DP-4562: Set focus state for search on mobile menu in mobileNav module #473
+- (React) [HelpTip] DP-12875: Add `disabled` prop to disable HelpTip trigger text. #494
+
 ___DESCRIPTION___
-Change_type (see below)
 Change_impact (see below)
-- (Project_prefix) DP-1234: Adds apples to apple trees for admin apple pickers #PR#
+Change_type (see below)
+- (Project_prefix) [ComponentName] DP-1234: Adds apples to apple trees for admin apple pickers #PR
 
 ___POST DEPLOY STEPS___
 1. Do this
@@ -28,3 +34,8 @@ ___PROJECTS PREFIX___
 - Patternlab
 - React
 - Docs
+
+
+___COMPONENT NAME___
+Component name in `PascalCase`
+e.g. Header, Form, InputSlider, InputTextTypeAhead

docs/for-developers/changelog-instructions.md

@@ -4,18 +4,20 @@ This documentation outlines a simple series of steps to keep `CHANGELOG.md` up-t
 
 ## 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`\).
-2. Write a plain language description of the feature you're contributing. It needs to include the name, what changed, and who it impacts.
-3. 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`\).
-4. Commit the file and open your PR.
+1. Make a copy of `changelogs/template.md` with the ticket number as the name, e.g. `DP-1234.md.` If there is no ticket number for the contribution, just use the branch name and your initials, e.g. `awesome- feature-branch.md`.
+2. Write a plain language description of the feature you're contributing. It needs to include the project prefix, component name, what changed, and who it impacts.
+3. Write down any post deploy steps that need to be performed, e.g.
+> This change will effect the local build. Make sure all developers know what steps to take after this gets in to dev.
+
+4. For any breaking changes, add a comment in the PR describing the necessary changes on the consumer side and link that comment in the changelog.
+5. Commit the file and open your PR.
 
 ## Release Master: When you are Releasing
 
 Do this after your open your release branch:
 
 1. In `CHANGELOG.md`, create a new section for the release with "Added", "Changed", and "Removed" sub-sections.
-2. Go through each `changelogs/*.txt` file and copy the description into the appropriate sub-section of `CHANGELOG.md`.
+2. Go through each `changelogs/*.md` file and copy the description into the appropriate sub-section of `CHANGELOG.md`.
 3. Keep a list of post deployment steps handy for yourself.
-4. After the last description is copied and you have all the post deployment steps, delete all files in `changelogs/` except for `changelogs/template.txt.`
+4. After the last description is copied and you have all the post deployment steps, delete all files in `changelogs/` except for `changelogs/template.md`.
 5. Commit changes to the release branch.
-

patternlab/styleguide/source/_patterns/02-molecules/section-links.twig

@@ -27,6 +27,7 @@
           "type": "",
           "href": sectionLinks.title.href,
           "text": "Learn More",
+          "labelContext": "about " ~ sectionLinks.title.text,
           "info": "learn more about " ~ sectionLinks.title.text }
         %}
         {% include "@atoms/decorative-link.twig" %}
@@ -51,8 +52,15 @@
     </nav>
     {% if sectionLinks.seeAll %}
       <div class="ma__section-links__footer">
-        {% set decorativeLink = sectionLinks.seeAll %}
+      {% set decorativeLink = {
+          "type": "",
+          "href": sectionLinks.seeAll.href,
+          "text": sectionLinks.seeAll.text,
+          "labelContext": (sectionLinks.seeAll.labelContext) ? sectionlinks.seeAll.labelContext : sectionLinks.title.text,
+          "info": "learn more about " ~ sectionLinks.title.text }
+        %}
         {% include "@atoms/decorative-link.twig" %}
+
       </div>
     {% endif %}
   </div>

patternlab/styleguide/source/assets/js/modules/mobileNav.js

@@ -2,8 +2,8 @@
 let menuButton = document.querySelector(".js-header-menu-button");
 let feedbackButton = document.querySelector('.ma__fixed-feedback-button');
 
-if(null !== menuButton){
-  menuButton.addEventListener("click", function(event) {
+if (null !== menuButton) {
+  menuButton.addEventListener("click", function (event) {
     event.preventDefault();
     document.querySelector("body").classList.toggle("show-menu");
 
@@ -15,13 +15,14 @@ if(null !== menuButton){
 // ****** Main Header Search button on mobile should open the mobile menu  ******
 let searchForm = document.querySelector(".js-header-search-menu .js-header-search-form");
 
-if(null !== searchForm){
-  searchForm.addEventListener("submit", function(event) {
-    if(window.innerWidth > 620) {
+if (null !== searchForm) {
+  searchForm.addEventListener("submit", function (event) {
+    if (window.innerWidth > 620) {
       return;
     }
     event.preventDefault();
     document.querySelector("body").classList.toggle("show-menu");
+    document.querySelector('.ma__header__nav-search .ma__header-search__input').focus();
     feedbackButton.classList.toggle("hide-button");
   });
 }

react/src/components/atoms/forms/CompoundSlider/index.js

@@ -9,14 +9,15 @@ import './style.css';
 
 const Handle = (props) => {
   const {
-    handle: { id, value, percent }, getHandleProps, axis, min, max, step, displayValueFormat
+    handle: { id, value, percent }, getHandleProps, axis, min, max, step, displayValueFormat, disabled
   } = props;
   const decimalPlaces = countDecimals(step);
   const roundedValue = (Number.isInteger(step)) ? value : Number(Number.parseFloat(value).toFixed(decimalPlaces));
   const divProps = {
     'aria-valuemin': min,
     'aria-valuemax': max,
     'aria-valuenow': roundedValue,
+    disabled,
     role: 'slider',
     onClick: (e) => {
       e.preventDefault();
@@ -106,14 +107,22 @@ class CompoundSlider extends Component {
         {
           (context) => {
             const {
-              min, max, step, disabled, domain
+              min, max, step, disabled, domain, onChange, onUpdate
             } = this.props;
             const decimalPlaces = countDecimals(step);
-            const handleDragEnd = (values) => {
+            const handleChange = (values) => {
               const value = (Number.isInteger(step)) ? values[0] : Number(Number.parseFloat(values[0]).toFixed(decimalPlaces));
               context.updateState({ value }, () => {
-                if (typeof this.props.onChange === 'function') {
-                  this.props.onChange(value, this.props.id);
+                if (typeof onChange === 'function') {
+                  onChange(value, this.props.id);
+                }
+              });
+            };
+            const handleUpdate = (values) => {
+              const value = (Number.isInteger(step)) ? values[0] : Number(Number.parseFloat(values[0]).toFixed(decimalPlaces));
+              context.updateState({ value }, () => {
+                if (typeof onUpdate === 'function') {
+                  onUpdate(value, this.props.id);
                 }
               });
             };
@@ -157,11 +166,14 @@ class CompoundSlider extends Component {
               domain,
               step,
               vertical: !(this.props.axis === 'x'),
-              onSlideEnd: handleDragEnd,
+              onChange: handleChange,
               values: [defaultValue],
               mode: handleMode,
               disabled
             };
+            if (onUpdate) {
+              sliderProps.onUpdate = handleUpdate;
+            }
             const wrapperClasses = classNames({
               'ma__input-slider': true,
               'ma__input-slider--disabled': disabled,
@@ -190,6 +202,7 @@ class CompoundSlider extends Component {
                             max={max}
                             step={step}
                             displayValueFormat={this.props.displayValueFormat}
+                            disabled={disabled}
                           />
                         ))}
                       </div>
@@ -251,7 +264,9 @@ class CompoundSlider extends Component {
 CompoundSlider.propTypes = {
   /** The unique ID for the input field */
   id: PropTypes.string.isRequired,
-  /** Custom change function */
+  /** Custom update function, triggered with the values on drag (caution: high-volume updates when dragging). Only if a function is passed to onUpdate will form context get updated on drag. */
+  onUpdate: PropTypes.func,
+  /** Custom on change function, triggered when the value of the slider has changed. This will recieve changes at the end of a slide as well as changes from clicks on rails and tracks. */
   onChange: PropTypes.func,
   /** Default input text value */
   defaultValue: PropTypes.string,

react/src/components/atoms/forms/CompoundSlider/style.scss

@@ -65,9 +65,14 @@ $margin: 20px;
       &-handle {
         background-color: $c-gray-dark;
         cursor: not-allowed;
+        opacity: 1;
         &:hover {
           transform: none;
         }
+
+        &-value {
+          color: $c-black;
+        }
       }
     }
   }