massgov · clairesunstudio · Aug 23, 2021
diff --git a/changelogs/DP-22263.yml b/changelogs/DP-22263.yml
@@ -0,0 +1,44 @@
+#
+# Write your changelog entry here. Every pull request must have a changelog yml file.
+#
+# Change types:
+# #############################################################################
+# You can use one of the following types:
+#  - Added: For new features.
+#  - Changed: For changes to existing functionality.
+#  - Deprecated: For soon-to-be removed features.
+#  - Removed: For removed features.
+#  - Fixed: For any bug fixes.
+#  - Security: In case of vulnerabilities.
+#
+# Format
+# #############################################################################
+# The format is crucial. Please follow the examples below. For reference, the requirements are:
+#  - All 3 parts are required and you must include "Type", "description" and "issue".
+#  - "Type" must be left aligned and followed by a colon.
+#  - "description" must be indented with 2 spaces followed by a colon
+#  - "issue" must be indented with 4 spaces followed by a colon.
+#  - "issue" is for the Jira ticket number only e.g. DP-1234
+#  - No extra spaces, indents, or blank lines are allowed.
+#
+# Example:
+# #############################################################################
+# Fixed:
+#  - description: Fixes scrolling on edit pages in Safari.
+#    issue: DP-13314
+#
+# You may add more than 1 description & issue for each type using the following format:
+# Changed:
+#  - description: Automating the release branch.
+#    issue: DP-10166
+#  - description: Second change item that needs a description.
+#    issue: DP-19875
+#  - description: Third change item that needs a description along with an issue.
+#    issue: DP-19843
+#
+Changed:
+  - project: Patternlab
+    component: PictureElement, KeyMessage
+    description: Adjusted key message component and picture component to accommodate for responsive images. (#1450)
+    issue: DP-22263
+    impact: Minor
diff --git a/packages/assets/scss/03-organisms/_key-message.scss b/packages/assets/scss/03-organisms/_key-message.scss
@@ -16,6 +16,7 @@ $colors: (
   &__wrapper {
     z-index: 10;
     padding: 40px 20px;
+    position: relative;
 
     @media ($bp-small-min) {
       padding-top: 60px;
@@ -53,22 +54,31 @@ $colors: (
   }
 
   &__inline-image {
+    position: relative;
+    z-index: 0;
+    width: 100%;
     height: 215px;
 
+    picture, source, img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
     @media ($bp-small-min) {
       height: 425px;
     }
 
     @media ($bp-medium-min) {
-      height: 0px;
-      display: none;
+      position: absolute;
+      height: 100%;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
     }
-  }
 
-  &__inline-image, &--image {
-    background-position: center;
-    background-size: cover;
-    background-repeat: no-repeat;
+
   }
 
   &__content {
@@ -100,7 +110,7 @@ $colors: (
       content:'';
       top: 0;
       left: 0;
-      z-index: -1;
+      z-index: 2;
       width: 100%;
       height: 100%;
       display: block;
@@ -120,7 +130,7 @@ $colors: (
       }
 
       @media ($bp-medium-max) {
-        
+
         &.ma__key-message--top {
           background-image: none !important;
         }

diff --git a/.../backstopjs/reference/regression_page_marketing-campaign_0_document_0_phone.png b/.../backstopjs/reference/regression_page_marketing-campaign_0_document_0_phone.png
diff --git a/...backstopjs/reference/regression_page_marketing-campaign_0_document_1_tablet.png b/...backstopjs/reference/regression_page_marketing-campaign_0_document_1_tablet.png
diff --git a/packages/patternlab/styleguide/source/_patterns/01-atoms/09-media/picture-element.json b/packages/patternlab/styleguide/source/_patterns/01-atoms/09-media/picture-element.json
@@ -1,18 +1,18 @@
 {
   "picture": {
-    "defaultImage": "../../assets/images/placeholder/400x300.png",
+    "defaultImage": "../../assets/images/placeholder/1600x600.png",
     "srcSets": [
       {
-        "url": "../../assets/images/placeholder/900x700.png",
-        "width": "1050"
+        "url": "../../assets/images/placeholder/500x300.png",
+        "width": "480"
       },
       {
-        "url": "../../assets/images/placeholder/800x450.png",
-        "width": "780"
+        "url": "../../assets/images/placeholder/900x700.png",
+        "width": "910"
       },
       {
-        "url": "../../assets/images/placeholder/600x450.png",
-        "width": "620"
+        "url": "../../assets/images/placeholder/1600x600.png",
+        "width": "1200"
       }
     ]
   }

diff --git a/packages/patternlab/styleguide/source/_patterns/01-atoms/09-media/picture-element.twig b/packages/patternlab/styleguide/source/_patterns/01-atoms/09-media/picture-element.twig
@@ -1,11 +1,26 @@
-<picture class="ma__picture">
-  {% if picture.srcSets %}
-    {% for src in picture.srcSets %}
-    <source srcset="{{ src.url }}" media="(min-width: {{ src.width }}px)">
-    {% endfor %}
-  {% endif %}
+{% if picture.srcSets or picture.defaultImage %}
+  <picture class="ma__picture">
+    {% if picture.srcSets %}
+      {% for src in picture.srcSets %}
+        {% set media = "" %}
+        {% set source = src.url %}
+        {# Numeric max width, i.e. '480' #}
+        {% if src.width is not empty %}
+          {% set media = '(max-width: ' ~ src.width ~ 'px)' %}
+        {# Media query, i.e. '(max-width: 480px)' #}
+        {% elseif src.mediaQuery starts with '(' %}
+          {% set media = src.mediaQuery %}
+        {# Fixed width, i.e. '1670w' #}
+        {% elseif src.mediaQuery ends with 'w' %}
+          {% set source = src.url ~ " " ~ src.mediaQuery %}
+        {% endif %}
 
-  {% if picture.defaultImage %}
-    <img src="{{ picture.defaultImage }}">
-  {% endif %}
-</picture>
+        <source srcset="{{ source }}" {% if(media is not empty) %} media="{{ media }}" {% endif %} >
+      {% endfor %}
+    {% endif %}
+
+    {% if picture.defaultImage %}
+      <img src="{{ picture.defaultImage }}">
+    {% endif %}
+  </picture>
+{% endif %}
diff --git a/packages/patternlab/styleguide/source/_patterns/03-organisms/by-template/key-message.json b/packages/patternlab/styleguide/source/_patterns/03-organisms/by-template/key-message.json
@@ -7,7 +7,29 @@
       "level": "1"
     },
     "textOverlay": "c-gray-lightest",
-    "bgImage": "../../assets/images/placeholder/1600x600-lighthouse.jpg",
+    "bgImage":
+    {
+      "path": "@atoms/09-media/picture-element.twig",
+      "data": {
+        "picture": {
+          "defaultImage": "../../assets/images/placeholder/1600x600.png",
+          "srcSets": [
+            {
+              "url": "../../assets/images/placeholder/500x300.png",
+              "width": "480"
+            },
+            {
+              "url": "../../assets/images/placeholder/900x700.png",
+              "width": "910"
+            },
+            {
+              "url": "../../assets/images/placeholder/1600x600.png",
+              "width": "1200"
+            }
+          ]
+        }
+      }
+    },
     "mobileBgImage": "../../assets/images/placeholder/1600x600-lighthouse.jpg",
     "subtitle": "From education, to healthcare and beyond, the work of more than 150 agencies across Massachusetts touches every aspect of our lives. We are a diverse team of mission-driven IT professionals supporting this vital work.",
     "description": {

diff --git a/packages/patternlab/styleguide/source/_patterns/03-organisms/by-template/key-message.twig b/packages/patternlab/styleguide/source/_patterns/03-organisms/by-template/key-message.twig
@@ -55,10 +55,9 @@
 </script>
 {% endif %}
 
-<section {% if id %}id="{{ id }}" {% endif %}class="ma__key-message{{ msgClass }}{% if bgImage %} ma__key-message--image{% endif %}{% if keyMessage.textOverlay and bgImage %} ma__key-message--image-overlay{% endif %}{% if positionTop %} ma__key-message--top{% endif %}"{% if bgImage %} style="background-image: url('{{ bgImage }}')"{% endif %}>
-  {% if bgImage and positionTop %}
-    <div id="img{{ id }}"  class="ma__key-message__inline-image" {% if keyMessage.mobileBgImage and positionTop %} style="background-image: url('{{ keyMessage.mobileBgImage }}')"{% endif %}>
-    </div>
+<section {% if id %}id="{{ id }}" {% endif %}class="ma__key-message{{ msgClass }}{% if bgImage %} ma__key-message--image{% endif %}{% if keyMessage.textOverlay and bgImage %} ma__key-message--image-overlay{% endif %}{% if positionTop %} ma__key-message--top{% endif %}">
+  {% if bgImage.path and bgImage.data %}
+    <div id="img{{ id }}"  class="ma__key-message__inline-image">{% include bgImage.path with bgImage.data %}</div>
   {% endif %}
   <div class="ma__key-message__wrapper{{ wrapperClass }}{% if positionTop %} ma__key-message__wrapper--top{% endif %}">
     <div id="blck{{ id }}" class="ma__key-message__block{{ blockClass }}">

diff --git a/...leguide/source/_patterns/03-organisms/by-template/key-message~as-solid-image-primary.json b/...leguide/source/_patterns/03-organisms/by-template/key-message~as-solid-image-primary.json
@@ -7,7 +7,29 @@
       "level": "1"
     },
     "backgroundColor": "c-primary",
-    "bgImage": "../../assets/images/placeholder/1600x600-lighthouse.jpg",
+    "bgImage":
+    {
+      "path": "@atoms/09-media/picture-element.twig",
+      "data": {
+        "picture": {
+          "defaultImage": "../../assets/images/placeholder/1600x600.png",
+          "srcSets": [
+            {
+              "url": "../../assets/images/placeholder/500x300.png",
+              "width": "480"
+            },
+            {
+              "url": "../../assets/images/placeholder/900x700.png",
+              "width": "910"
+            },
+            {
+              "url": "../../assets/images/placeholder/1600x600.png",
+              "width": "1200"
+            }
+          ]
+        }
+      }
+    },
     "subtitle": "From education, to healthcare and beyond, the work of more than 150 agencies across Massachusetts touches every aspect of our lives. We are a diverse team of mission-driven IT professionals supporting this vital work.",
     "description": {
       "rteElements": [{
@@ -24,4 +46,4 @@
       "href":"#"
     }
   }
-}
+}
diff --git a/packages/patternlab/styleguide/source/_patterns/05-pages/marketing-campaign.json b/packages/patternlab/styleguide/source/_patterns/05-pages/marketing-campaign.json
@@ -8,7 +8,28 @@
         "level": "1"
       },
       "textOverlay": "c-gray-lightest",
-      "bgImage": "../../assets/images/placeholder/1920x1080-sign.jpg",
+      "bgImage": {
+        "path": "@atoms/09-media/picture-element.twig",
+        "data": {
+          "picture": {
+            "defaultImage": "../../assets/images/placeholder/1600x600.png",
+            "srcSets": [
+              {
+                "url": "../../assets/images/placeholder/500x300.png",
+                "width": "480"
+              },
+              {
+                "url": "../../assets/images/placeholder/900x700.png",
+                "width": "910"
+              },
+              {
+                "url": "../../assets/images/placeholder/1600x600.png",
+                "width": "1200"
+              }
+            ]
+          }
+        }
+      },
       "mobileBgImage": "../../assets/images/placeholder/1600x600-lighthouse.jpg",
       "subtitle": "From education, to healthcare and beyond, the work of more than 150 agencies across Massachusetts touches every aspect of our lives. We are a diverse team of mission-driven IT professionals supporting this vital work.",
       "description": {