massgov · mrossi113 · Jun 20, 2018 · Jun 13, 2018 · Jun 12, 2018 · Jun 12, 2018
diff --git a/...ce/regression_page_information-details-preContent-media_0_document_1_tablet.png b/...ce/regression_page_information-details-preContent-media_0_document_1_tablet.png
diff --git a/backstopjs/reference/regression_page_information-details_0_document_1_tablet.png b/backstopjs/reference/regression_page_information-details_0_document_1_tablet.png
diff --git a/...egression_template_01-content-types-information-details_0_document_1_tablet.png b/...egression_template_01-content-types-information-details_0_document_1_tablet.png
diff --git a/release-notes.md b/release-notes.md
@@ -13,6 +13,17 @@ 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))
 
+## 5.29.0 (6/20/2018)
+
+### Added
+- DP-9146/DP-8825: Adds teaser listing group organism to apply accordion behavior to multiple teaser listings at once.
+
+### Changed
+- DP-9243: MF fix info details to show contact and related in sidebar as well as bottom on desktop.
+
+### Removed 
+- DP-1234: Removed alt value from the state seal since the text "Mass.gov" is duplicate to the content in the followed <span>.
+
 
 ## 5.28.0 (6/13/2018)
 

diff --git a/styleguide/package.json b/styleguide/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@massds/mayflower",
   "description": "Open source UI components and visual style guide for Massachusetts government websites",
-  "version": "5.28.0",
+  "version": "5.29.0",
   "author": "Massachusetts Digital Services (MDS)",
   "repository": {
     "type": "git",

diff --git a/styleguide/source/_patterns/01-atoms/09-media/site-logo.twig b/styleguide/source/_patterns/01-atoms/09-media/site-logo.twig
@@ -1,6 +1,6 @@
 <div class="ma__site-logo">
   <a href="{{ url.domain }}/" title="Mass.gov home page">
-    <img src="{{ urlDomain ~ '/' ~ directory }}/images/stateseal.png" alt="Mass.gov" height="45" />
+    <img src="{{ urlDomain ~ '/' ~ directory }}/images/stateseal.png" alt="" height="45" />
     <span>Mass.gov</span>
   </a>
 </div>
diff --git a/styleguide/source/_patterns/02-molecules/general-teaser.twig b/styleguide/source/_patterns/02-molecules/general-teaser.twig
@@ -3,7 +3,7 @@
 
 <section class="ma__general-teaser {{ imageClass }} {{ layout }}">
   {% block teaserImage %}
-    {% if generalTeaser.image %}
+    {% if generalTeaser.image.src %}
 
       {% if generalTeaser.title.href %}
         <a

diff --git a/styleguide/source/_patterns/03-organisms/by-template/DP-9017.txt b/styleguide/source/_patterns/03-organisms/by-template/DP-9017.txt
@@ -0,0 +1,4 @@
+___DESCRIPTION___
+Added
+Minor
+- DP-9017: Image placement on Guide pages using focal point
diff --git a/.../source/_patterns/03-organisms/by-template/illustrated-header-image-centered.md b/.../source/_patterns/03-organisms/by-template/illustrated-header-image-centered.md
@@ -0,0 +1,30 @@
+### Description
+This variation displays a centered image with a custom focalpoint in an illustrated header
+
+### Status
+* Stable as of 5.0.0
+
+### Pattern Contains
+* Page Header
+
+### Variant options
+* The image-centered variant is used for images with a [custom focal point](./?p=organisms-illustrated-header-image-centered)
+
+### Variables
+~~~
+illustratedHeader: {
+  bgTitle:
+    type: string / optional (required with image)
+  bgImage:
+    type: string (image path) / optional
+  retinaBgImage:
+    type: string (image path) / optional
+  bgCentered:
+    type: bollean / optional
+  category:
+    type: string / required,
+  pageHeader: {
+    type: pageHeader / required
+  }
+}
+~~~
diff --git a/styleguide/source/_patterns/03-organisms/by-template/illustrated-header.md b/styleguide/source/_patterns/03-organisms/by-template/illustrated-header.md
@@ -10,7 +10,7 @@ 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.
-
+* The image-centered variant is used for images with a [custom focal point] (./?p=organisms-illustrated-header-image-centered)
 
 ### Variables
 ~~~
@@ -19,6 +19,8 @@ illustratedHeader: {
     type: string / optional (required with image)
   bgImage:
     type: string (image path) / optional
+  retinaBgImage:
+    type: string (image path) / optional
   category:
     type: string / required,
   pageHeader: {

diff --git a/styleguide/source/_patterns/03-organisms/by-template/illustrated-header.twig b/styleguide/source/_patterns/03-organisms/by-template/illustrated-header.twig
@@ -9,6 +9,9 @@
 {% if illustratedHeader.inverted %}
   {% set illustratedHeaderClass = "ma__illustrated-header ma__illustrated-header--inverted" %}
 {% endif %}
+{% if illustratedHeader.bgCentered %}
+  {% set illustratedHeaderClass = "ma__illustrated-header ma__illustrated-header--centered" %}
+{% endif %}
 
 <section class="{{illustratedHeaderClass}}">
   <div class="ma__illustrated-header__container">
@@ -22,8 +25,20 @@
     </div>
   </div>
   {% if illustratedHeader.bgImage %}
+    <style>
+      .ma__illustrated-header__image {
+        background-image: url('{{ illustratedHeader.bgImage }}');
+      }
+
+      {% if illustratedHeader.retinaBgImage %}
+      @media (-webkit-min-device-pixel-ratio: 2) {
+        .ma__illustrated-header__image {
+          background-image: url('{{ illustratedHeader.retinaBgImage }}');
+        }
+      }
+      {% endif %}
+    </style>
     <div
-      style="background-image: url('{{ illustratedHeader.bgImage }}')"
       class="ma__illustrated-header__image"
       role="img"
       aria-label="{{ imageAlt }}">

diff --git a/styleguide/source/_patterns/03-organisms/by-template/illustrated-header~image-centered.json b/styleguide/source/_patterns/03-organisms/by-template/illustrated-header~image-centered.json
@@ -0,0 +1,29 @@
+{
+  "illustratedHeader": {
+    "bgInfo": "Forest of the Berkshires",
+    "bgImage": "../../assets/images/placeholder/800x400.png",
+    "retinaBgImage": "../../assets/images/placeholder/1600x800.png",
+    "bgCentered": true,
+    "category": "Guide",
+    "pageHeader": {
+      "title": "Moving to Massachusetts",
+      "subTitle": "",
+      "optionalContents": [{
+        "path": "@organisms/by-author/rich-text.twig",
+        "data": {
+          "richText": {
+            "rteElements": [{
+              "path": "atoms-paragraph",
+              "data": {
+                "paragraph" : {
+                  "text": "This part of the series will cover residency, employment, health care coverage, education, registering to vote, and taxes — important things to help you settle into your life in the Bay State."
+                }
+              }
+            }]
+          }
+        }
+      }],
+      "headerTags": null
+    }
+  }
+}
diff --git a/styleguide/source/_patterns/05-pages/information-details.twig b/styleguide/source/_patterns/05-pages/information-details.twig
@@ -108,6 +108,8 @@
 {% block sidebar %}
   {% set linkList = sidebar.linkList %}
   {% include "@organisms/by-author/link-list.twig" %}
+  {% set contactList = sidebar.contactList %}
+  {% include "@organisms/by-author/contact-list.twig" %}
 {% endblock %}
 
 {% block footer %}

diff --git a/styleguide/source/_patterns/05-pages/organization~boards.json b/styleguide/source/_patterns/05-pages/organization~boards.json
@@ -10,15 +10,17 @@
     "titleSubText": "(FLB)"
   },
   "short_description": {
-     "richText": {
-      "rteElements": [{
-        "path": "@atoms/04-headings/heading-4.twig",
-        "data": {
-           "heading4" : {
-            "text": "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. "
+    "richText": {
+      "rteElements": [
+        {
+          "path": "@atoms/04-headings/heading-4.twig",
+          "data": {
+            "heading4": {
+              "text": "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. "
+            }
           }
         }
-      }]
+      ]
     }
   },
   "stackedRows": [
@@ -111,7 +113,8 @@
           }
         }
       ]
-    },{
+    },
+    {
       "title": "",
       "id": "",
       "pageContent": [
@@ -253,8 +256,10 @@
               ]
             }
           }
-        }]
-    },{
+        }
+      ]
+    },
+    {
       "title": "About Us",
       "id": "",
       "pageContent": [
@@ -284,44 +289,51 @@
           }
         }
       ],
-      "sideBar": [{
-        "path": "@molecules/icon-links.twig",
-        "data": {
-          "iconLinks": {
-            "compHeading": {
-              "title": "Social",
-              "sub": true,
-              "color": "",
-              "id": "",
-              "centered": "",
-              "titleContext": "links for Executive Office of Health and Human Services"
-            },
-            "items": [{
-              "icon": "twitter",
-              "link": {
-                "href": "https://twitter.com/MassHHS",
-                "text": "@MassHHS",
-                "chevron": ""
-              }
-            },{
-              "icon": "flickr",
-              "link": {
-                "href": "https://www.flickr.com/photos/mass_hhs/",
-                "text": "Mass_HHS",
-                "chevron": ""
-              }
-            },{
-              "icon": "blog",
-              "link": {
-                "href": "https://blog.mass.gov/hhs",
-                "text": "blog.mass.gov/hhs",
-                "chevron": ""
-              }
-            }]
+      "sideBar": [
+        {
+          "path": "@molecules/icon-links.twig",
+          "data": {
+            "iconLinks": {
+              "compHeading": {
+                "title": "Social",
+                "sub": true,
+                "color": "",
+                "id": "",
+                "centered": "",
+                "titleContext": "links for Executive Office of Health and Human Services"
+              },
+              "items": [
+                {
+                  "icon": "twitter",
+                  "link": {
+                    "href": "https://twitter.com/MassHHS",
+                    "text": "@MassHHS",
+                    "chevron": ""
+                  }
+                },
+                {
+                  "icon": "flickr",
+                  "link": {
+                    "href": "https://www.flickr.com/photos/mass_hhs/",
+                    "text": "Mass_HHS",
+                    "chevron": ""
+                  }
+                },
+                {
+                  "icon": "blog",
+                  "link": {
+                    "href": "https://blog.mass.gov/hhs",
+                    "text": "blog.mass.gov/hhs",
+                    "chevron": ""
+                  }
+                }
+              ]
+            }
           }
         }
-      }]
-    },{
+      ]
+    },
+    {
       "title": "Board Members",
       "id": "",
       "pageContent": [
@@ -1292,7 +1304,7 @@
             }
           }
         },
-                {
+        {
           "path": "@organisms/by-author/mapped-locations.twig",
           "data": {
             "mappedLocations": {

diff --git a/styleguide/source/assets/js/modules/teaserListingGroup.js b/styleguide/source/assets/js/modules/teaserListingGroup.js
@@ -13,6 +13,11 @@ export default function (window, document, $, undefined) {
         let totalShown = $root.data('totalVisible');
         let teaserItems = $root.find('.ma__general-teaser');
 
+        // Hide the toggle if the number of items is less than or equal to the number shown.
+        if (teaserItems.length <= totalShown) {
+          $toggle.hide();
+        }
+
         // set excess items to be hidden
         teaserItems.slice(totalShown, teaserItems.length).each((i, el) => {
             // Items can be siblings or within an <li>, add class to the <li> if present

diff --git a/styleguide/source/assets/scss/03-organisms/_illustrated-header.scss b/styleguide/source/assets/scss/03-organisms/_illustrated-header.scss
@@ -110,3 +110,13 @@ $bp-illustrated-header-image-width: 360px;
       justify-content: center;
   }
 }
+
+.ma__illustrated-header--centered {
+
+  .ma__illustrated-header__image {
+
+    @media ($bp-illustrated-header-columns-min) {
+      background-position: center;
+    }
+  }
+}
diff --git a/styleguide/source/assets/scss/06-theme/04-templates/_information-details.scss b/styleguide/source/assets/scss/06-theme/04-templates/_information-details.scss
@@ -29,14 +29,14 @@
 
   .sidebar {
 
-    @media ($bp-m) {
+    @media ($bp-medium-min) {
       padding-top: 10px;
     }
 
     .ma__link-list {
       display: none;
 
-      @media ($bp-l) {
+      @media ($bp-large-min) {
         display: block;
       }
     }