Release 9.23.0

.circleci/config.yml

@@ -219,12 +219,26 @@ jobs:
             aws cloudfront create-invalidation --distribution-id $AWS_DISTRIBUTION_ID_REACT --paths '/*'
           fi
 
+  auto_changelog:
+    <<: *react_defaults
+    steps:
+      - checkout
+      - *no_host_check
+      - add_ssh_keys:
+          fingerprints:
+            - $DEPLOY_KEY   
+      - *configure_git
+      - run:
+          name: 'Auto add changelog for dependabot'
+          command: ./.circleci/dependabot.sh
+
 workflows:
   version: 2
 
   # Executed on branch pushes.
   build_branch:
     jobs:
+      - auto_changelog
       - patternlab_build:
           filters:
             branches: { ignore: /docs\-.*/ }

.circleci/dependabot.sh

@@ -0,0 +1,29 @@
+branch=$(git branch | grep \* | cut -d ' ' -f2)
+lastCommit=$(git log --pretty=oneline --abbrev-commit | head -n 1 | cut -c 10-)
+lastDependabot=$(git log --author="dependabot-preview" --pretty=oneline --abbrev-commit | head -n 1)
+commitType="Changed"
+
+if [[ $lastCommit =~ "[Security]"[[:space:]](.*) ]]; then
+  lastCommit="${BASH_REMATCH[1]}"
+  commitType="Security"
+fi
+
+if [[ $lastCommit =~ "/react" ]]; then
+  lastCommit="(React) $lastCommit"
+fi
+if [[ $lastCommit =~ "/patternlab" ]]; then
+  lastCommit="(Patternlab) $lastCommit"
+fi
+
+
+
+if [ "$lastCommit" ]
+then
+  printf "$commitType\n- [Dependency] $lastCommit" >> changelogs/dependabot.md
+  git add changelogs/dependabot.md
+  # git commit -m "Add changelog to changelogs/dependabot.md"
+  # echo "Commit dependabot changelog";
+  # git push -u origin $branch
+else
+  echo "No changelog added"
+fi

CHANGELOG.md

@@ -13,6 +13,18 @@ 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.23.0 (09/11/2019)
+
+### Added
+- (React, Patternlab) [Circleci] Automate adding changelog for dependabot prs. Changelog will be added by Circleci on dependabot branches into changelogs/dependabot.md. #722
+- (React) [Icon] DP-15753: Adds catalog, chart, download, expand, map, report, and settings icons. #729
+- (Patternlab) [KeyMessage, MarketingCampaign] DP-15521: Adds key message component and Campaign Marketing Page. #728
+
+### Security
+- (React) [Dependency] Bump is-my-json-valid from 2.17.1 to 2.20.0 in /react (#589)
+- (React) [Dependency] Bump mixin-deep from 1.3.1 to 1.3.2 in /react (#724)
+- (React) [Dependency] Bump eslint-utils from 1.3.1 to 1.4.2 in /react (#721)
+
 ## 9.22.0 (08/28/2019)
 
 ### Added

assets/scss/03-organisms/_campaign-video.scss

@@ -1,5 +1,4 @@
-.ma__campaign-video {
-  padding: 100px 0;
+.ma__campaign-video { 
   text-align: center;
 
   &--wrapper {

assets/scss/03-organisms/_campaign-full-width-header.scss → assets/scss/03-organisms/_key-message.scss

@@ -1,4 +1,4 @@
-.ma__campaign-header {
+.ma__key-message {
   padding: 100px 0;
   text-align: center;
 

patternlab/styleguide/source/_patterns/02-molecules/campaign-feature-2up.twig

@@ -7,9 +7,11 @@
         <h2 class="ma__campaign-feature-2up__title">{{ card.title }}</h2>
 
         <div class="ma__campaign-feature-2up__content">
+        {% if card.thumbnail %}
           <div class="ma__campaign-feature-2up__thumbnail">
             <img src="{{card.thumbnail}}" alt="">
           </div>
+        {% endif %}
           <div class="ma__campaign-feature-2up__text">
             {{card.text}}
           </div>

patternlab/styleguide/source/_patterns/02-molecules/campaign-features-full-width.json → patternlab/styleguide/source/_patterns/02-molecules/campaign-feature-full-width.json

@@ -1,7 +1,6 @@
 {
   "campaignFullWidthFeature": {
-    "id": "1234",
-    "positionTop": true,
+    "id": "kj1234",
     "link": "#",
     "bgImage": "../../assets/images/placeholder/1600x800.png",
     "mobileBgImage": "../../assets/images/placeholder/800x400.png",

patternlab/styleguide/source/_patterns/03-organisms/by-template/campaign-feature.json

@@ -1,10 +1,12 @@
 {
   "campaignFeature": {
-    "title": "Featured Campaign Tile",
+    "compHeading": {
+      "title": "Featured Campaign Tile",
+      "level": ""
+    },
     "positionTop": true,
     "campaignFullWidthFeature": {
-      "id": "1234",
-      "positionTop": true,
+      "id": "dfg1234",
       "link": "#",
       "bgImage": "../../assets/images/placeholder/1600x800.png",
       "mobileBgImage": "../../assets/images/placeholder/800x400.png",
@@ -13,14 +15,14 @@
       "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
     },
     "campaignFeature2up": [{
-      "id": "1234",
+      "id": "dfg123",
       "link": "#",
       "thumbnail": "../../assets/images/placeholder/400x300-kitten.jpg",
       "title": "Campaign 2 up Card 1",
       "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
     },
     {
-      "id": "1234",
+      "id": "dfg12",
       "link": "#",
       "thumbnail": "../../assets/images/placeholder/400x300-kitten.jpg",
       "title": "Campaign 2 up Card 2",

patternlab/styleguide/source/_patterns/03-organisms/by-template/campaign-feature.twig

@@ -1,9 +1,9 @@
 <div class="ma__campaign-feature">
-    {% set headingLevel = campaignFeature.level ? 1 : 2 %}
-    <h{{ headingLevel }} class="ma__campaign-feature">{{ campaignFeature.title }}</h{{ headingLevel }}>
+    {% set headingLevel = campaignFeature.positionTop ? 1 : campaignFeature.compHeading.level %}
+    <h{{ headingLevel }} class="ma__campaign-feature">{{ campaignFeature.compHeading.title }}</h{{ headingLevel }}>
 
     {% set campaignFullWidthFeature = campaignFeature.campaignFullWidthFeature %}
-    {% include "@molecules/campaign-features-full-width.twig" %}
+    {% include "@molecules/campaign-feature-full-width.twig" %}
 
     {% set campaignFeature2up = campaignFeature.campaignFeature2up %}
     {% include "@molecules/campaign-feature-2up.twig" %}

patternlab/styleguide/source/_patterns/03-organisms/by-template/campaign-video.json

@@ -1,7 +1,6 @@
 {
   "campaignVideo": {
-    "id": "1",
-    "positionTop": true,
+    "id": "abc1",
     "backgroundColor": "",
     "textColor": "",
     "title": "Why work for the commonwealth",

patternlab/styleguide/source/_patterns/03-organisms/by-template/campaign-video.twig

@@ -5,8 +5,7 @@
 <section id="{{campaignVideo.id}}" class="ma__campaign-video {{ textColor ? 'ma__campaign-video--light-text' : '' }}{% if bgColor %} ma__campaign-video--{{ bgColor }}{% endif %}">
 
   <div class="ma__campaign-video--wrapper">
-    {% set headingLevel = campaignVideo.positionTop ? 1 : 2 %}
-    <h{{ headingLevel }} class="ma__campaign-video--title">{{ campaignVideo.title }}</h{{ headingLevel }}>
+    <h2 class="ma__campaign-video--title">{{ campaignVideo.title }}</h2>
 
     {% if campaignVideo.description %}
     <div class="ma__campaign-video--description">{{ campaignVideo.description }}</div>

patternlab/styleguide/source/_patterns/03-organisms/by-template/campaign-full-width-header.json → patternlab/styleguide/source/_patterns/03-organisms/by-template/key-message.json

@@ -1,11 +1,14 @@
 {
-  "campaignFullWidthHeader": {
+  "keyMessage": {
     "id": "abc1",
     "positionTop": true,
+    "compHeading": {
+      "title": "Training and Professional Development",
+      "level": "1"
+    },
     "backgroundColor": "",
     "bgImage": "../../assets/images/placeholder/1600x800.png",
     "mobileBgImage": "../../assets/images/placeholder/800x400.png",
-    "title": "Training and Professional Development",
     "subtitle": "Find career and professional development programs",
     "description": "This is an optional description",
     "textColor": "",

patternlab/styleguide/source/_patterns/03-organisms/by-template/campaign-full-width-header.md → patternlab/styleguide/source/_patterns/03-organisms/by-template/key-message.md

@@ -9,7 +9,7 @@ A full width header for campaign pages
 
 ### Variables
 ~~~
-CampaignFullWidthHeader: {
+keyMessage: {
   positionTop: 
     type: bool / required
   backgroundColor:

patternlab/styleguide/source/_patterns/03-organisms/by-template/key-message.twig

@@ -0,0 +1,43 @@
+{% set textColor = keyMessage.textColor %}
+{% set bgColor = keyMessage.backgroundColor %}
+{% set bgImage = keyMessage.bgImage %}
+
+<section id="{{keyMessage.id}}"  class="ma__key-message {{ textColor ? 'ma__key-message--light-text' : '' }}{% if bgColor %} ma__key-message--{{ bgColor }}{% endif %}{% if bgImage %} ma__key-message--image{% endif %}">
+
+  {% if keyMessage.bgImage %}
+    <style>
+      #{{ keyMessage.id }}.ma__key-message--image {
+        background-image: url('{{ keyMessage.bgImage }}');
+      }
+
+      {% if keyMessage.mobileBgImage %}
+      @media (-webkit-min-device-pixel-ratio: 2) {
+        #{{ keyMessage.id }}.ma__key-message--image {
+          background-image: url('{{ keyMessage.mobileBgImage }}');
+        }
+      }
+      {% endif %}
+    </style>
+  {% endif %}
+
+  <div class="ma__key-message--wrapper">
+    {% set headingLevel = keyMessage.positionTop ? 1 : keyMessage.compHeading.level %}
+    <h{{ headingLevel }} class="ma__key-message--title">{{ keyMessage.compHeading.title }}</h{{ headingLevel }}>
+
+    {% if keyMessage.subtitle %}
+    <span class="ma__key-message--sub-title">{{ keyMessage.subtitle }}</span>
+    {% endif %}
+
+    {% if keyMessage.description %}
+    <div class="ma__key-message--description">{{ keyMessage.description }}</div>
+    {% endif %}
+
+    {% if keyMessage.button.text %}
+    <div class="ma__key-message--cta">
+      {% set button = keyMessage.button %}
+      {% include "@atoms/01-buttons/button.twig" %}
+    </div>
+    {% endif %}
+  </div>
+
+</section>

patternlab/styleguide/source/_patterns/03-organisms/by-template/campaign-full-width-header~not-top.json → patternlab/styleguide/source/_patterns/03-organisms/by-template/key-message~not-top.json

@@ -1,7 +1,11 @@
 {
-  "campaignFullWidthHeader": {
-    "id": "2",
+  "keyMessage": {
+    "id": "abc2",
     "positionTop": false,
+    "compHeading": {
+      "title": "Training and Professional Development",
+      "level": "2"
+    },
     "backgroundColor": "bay-blue",
     "bgImage": "",
     "mobileBgImage": "",

patternlab/styleguide/source/_patterns/05-pages/marketing-campaign.json

@@ -1,11 +1,14 @@
 {
   "preContent": {
-    "campaignFullWidthHeader": {
+    "keyMessage": {
       "id": "abc1",
       "positionTop": true,
+      "compHeading": {
+        "title": "Training and Professional Development"
+      },
       "bgImage": "../../assets/images/placeholder/1600x800.png",
       "mobileBgImage": "../../assets/images/placeholder/800x400.png",
-      "title": "Training and Professional Development",
+      "subtitle": "Find career and professional development programs",
       "textColor": "white"
     }
   },
@@ -22,7 +25,22 @@
         }
       ]
     },
-    "campaignFullWidthHeader": {
+    "campaignVideo": {
+      "id": "qwe1",
+      "positionTop": true,
+      "backgroundColor": "",
+      "textColor": "",
+      "title": "Why work for the commonwealth",
+      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+      "video": {
+        "src": "https://www.youtube.com/embed/dEkUq-Rs-Tc",
+        "link": {
+          "href": "#",
+          "text": "View transcript"
+        }
+      }
+    },
+    "keyMessage": {
       "id": "abc2",
       "positionTop": false,
       "backgroundColor": "berkshires-green",
@@ -33,6 +51,36 @@
         "size": "small",
         "theme": ""
       }
+    },
+    "campaignFeature": {
+      "compHeading": {
+        "title": "Featured Campaign Tile",
+        "level": "2"
+      },
+      "positionTop": false,
+      "campaignFullWidthFeature": {
+        "id": "dfg1234",
+        "link": "#",
+        "bgImage": "../../assets/images/placeholder/1600x800.png",
+        "mobileBgImage": "../../assets/images/placeholder/800x400.png",
+        "thumbnail": "../../assets/images/placeholder/400x300-kitten.jpg",
+        "title": "Training and Professional Development",
+        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+      },
+      "campaignFeature2up": [{
+        "id": "dfg123",
+        "link": "#",
+        "thumbnail": "../../assets/images/placeholder/400x300-kitten.jpg",
+        "title": "Campaign 2 up Card 1",
+        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+      },
+      {
+        "id": "dfg12",
+        "link": "#",
+        "thumbnail": "../../assets/images/placeholder/400x300-kitten.jpg",
+        "title": "Campaign 2 up Card 2",
+        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+      }]
     }
   }
 }