Merge pull request #800 from massgov/release-5.20.0

Release 5.20.0
massgov · Apr 25, 2018 · 03be08d · 03be08d
2 parents f6e6c19 + c3342a6
commit 03be08d
Show file tree

Hide file tree

Showing 53 changed files with 875 additions and 623 deletions.
diff --git a/backstopjs/reference/regression_page_binder-page-cover_0_document_0_phone.png b/backstopjs/reference/regression_page_binder-page-cover_0_document_0_phone.png
diff --git a/backstopjs/reference/regression_page_binder-page-cover_0_document_1_tablet.png b/backstopjs/reference/regression_page_binder-page-cover_0_document_1_tablet.png
diff --git a/backstopjs/reference/regression_page_bio-page_0_document_1_tablet.png b/backstopjs/reference/regression_page_bio-page_0_document_1_tablet.png
diff --git a/backstopjs/reference/regression_page_organization-boards_0_document_1_tablet.png b/backstopjs/reference/regression_page_organization-boards_0_document_1_tablet.png
diff --git a/.../reference/regression_page_organization-elected-official_0_document_0_phone.png b/.../reference/regression_page_organization-elected-official_0_document_0_phone.png
diff --git a/...reference/regression_page_organization-elected-official_0_document_1_tablet.png b/...reference/regression_page_organization-elected-official_0_document_1_tablet.png
diff --git a/backstopjs/reference/regression_page_service_0_document_0_phone.png b/backstopjs/reference/regression_page_service_0_document_0_phone.png
diff --git a/...opjs/reference/regression_template_01-content-types-bio_0_document_1_tablet.png b/...opjs/reference/regression_template_01-content-types-bio_0_document_1_tablet.png
diff --git a/...reference/regression_template_01-content-types-location_0_document_1_tablet.png b/...reference/regression_template_01-content-types-location_0_document_1_tablet.png
diff --git a/.../reference/regression_template_01-content-types-services_0_document_0_phone.png b/.../reference/regression_template_01-content-types-services_0_document_0_phone.png
diff --git a/release-notes.md b/release-notes.md
@@ -13,6 +13,26 @@ 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.20.0 (4/25/2018)
+
+### Added
+- DP-8569: Add missing header on binder cover page template.
+- DP-8594: Adds twig blocks for overriding during implementation of the row reorder for elected officials.
+- DP-8612: Add column-layout variation to 'contact us'.
+- DP-8674: Adds and uses WOFF2 variants for webfonts.
+
+### Changed
+- DP-7500: Update image-link-list to allow overriding the links without losing functionality.
+- DP-7600: Extracts looped items into separate patterns.
+- DP-7600: Provides twig blocks to support overrides and template mapping of data.
+- DP-8597: Social links on elected org page overlap executive area when the links are long or more than x number.
+- DP-8642: Fix erroneous width limitation on page-intro sub-title affecting the bio page.
+- DP-8648: Fix gap with image background on Elected Official Organization page for wide-widths.
+
+### Fixed
+- DP-8701: Replace lost image link styles.
+- Fix social media icon colors in Firefox.
+
 ## 5.19.0 (4/18/2018)
 
 ### Added

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.19.0",
+  "version": "5.20.0",
   "author": "Massachusetts Digital Services (MDS)",
   "repository": {
     "type": "git",

diff --git a/styleguide/source/_patterns/02-molecules/contact-us.twig b/styleguide/source/_patterns/02-molecules/contact-us.twig
@@ -12,7 +12,7 @@
 {% set groupHeading = contactUs.level ? : 2 %}
 
 <section
-  class="ma__contact-us {{ accordionClass }} {{ contactUs.isExpanded ? 'is-open':'' }}">
+  class="ma__contact-us {{ accordionClass }} {{ contactUs.isExpanded ? 'is-open':'' }} {{ contactUs.columns ? 'ma__contact-us--columns':'' }}">
 
   {% if contactUs.subTitle %}
     {% if outerAccordion %}
@@ -31,16 +31,17 @@
   {% block contactGroups %}
     {% if inlineAccordion %}
       {# Show first 2 contact groups outside of accordion #}
-      {% for group in contactUs.groups[:2] %}
+      {% set groupLimit = contactUs.columns ? 3 : 2 %}
+      {% for group in contactUs.groups[:groupLimit] %}
         {% set contactGroup = group|merge({
                              "level": groupHeading,
                              "contactName": contactName })  %}
         {% include "@molecules/contact-group.twig" %}
       {% endfor %}
 
       {# Show 3rd+ contact groups inside of accordion (if they exist) #}
-      <div class="ma__contact-us__extra js-accordion-content">
-        {% for group in contactUs.groups[2:last] %}
+      <div class="ma__contact-us__extra js-accordion-content" style="{{ contactUs.isExpanded ? '':'display:none;' }}">
+        {% for group in contactUs.groups[groupLimit:last] %}
           {% set contactGroup = group|merge({
                              "level": groupHeading,
                              "contactName": contactName })  %}
@@ -71,4 +72,4 @@
       </div>
     {% endif %}
   {% endblock %}
-</section>
+</section>
diff --git a/styleguide/source/_patterns/02-molecules/icon-link-item.json b/styleguide/source/_patterns/02-molecules/icon-link-item.json
@@ -0,0 +1,10 @@
+{
+  "item": {
+    "icon": "@atoms/05-icons/svg-twitter.twig",
+    "link": {
+      "href": "https://twitter.com/MassHHS",
+      "text": "@MassHHS",
+      "chevron": ""
+    }
+  }
+}
diff --git a/styleguide/source/_patterns/02-molecules/icon-link-item.md b/styleguide/source/_patterns/02-molecules/icon-link-item.md
@@ -0,0 +1,20 @@
+### Description
+This is a list item for the list of links with a corresponding icon.
+
+### Status
+* New as of 5.18.1
+* @todo: make styles independent of wrapper.
+
+### Pattern Contains
+* Decorative Link
+
+### Variables
+~~~
+item: {
+  icon:
+    type: string (path to SVG icon) / required
+  link: {
+    type: decorativeLink / required
+  }
+}
+~~~
diff --git a/styleguide/source/_patterns/02-molecules/icon-link-item.twig b/styleguide/source/_patterns/02-molecules/icon-link-item.twig
@@ -0,0 +1,9 @@
+<span class="ma__icon-links__icon">
+  {% if item.icon %}
+    {{ icon(item.icon) }}
+  {% endif %}
+</span>
+<span class="ma__icon-links__link">
+  {% set decorativeLink = item.link %}
+  {% include "@atoms/decorative-link.twig" %}
+</span>
diff --git a/styleguide/source/_patterns/02-molecules/icon-links.md b/styleguide/source/_patterns/02-molecules/icon-links.md
@@ -6,7 +6,7 @@ This is a list of links with a corresponding icon.
 
 ### Pattern Contains
 * Comp Heading
-* Decorative Link
+* Icon List Item
 
 ### Variables
 ~~~

diff --git a/styleguide/source/_patterns/02-molecules/icon-links.twig b/styleguide/source/_patterns/02-molecules/icon-links.twig
@@ -1,19 +1,15 @@
-<section class="ma__icon-links">
-  {% if iconLinks.compHeading %}
-    {% set compHeading = iconLinks.compHeading %}
-    {% include "@atoms/04-headings/comp-heading.twig" %}
-  {% endif %}
-  <ul class="ma__icon-links__items">
-    {% for item in iconLinks.items %}
-      <li class="ma__icon-links__item">
-        <span class="ma__icon-links__icon">
-          {{ icon(item.icon) }}
-        </span>
-        <span class="ma__icon-links__link">
-          {% set decorativeLink = item.link %}
-          {% include "@atoms/decorative-link.twig" %}
-        </span>
-      </li>
-    {% endfor %}
-  </ul>
-</section>
+<section class="ma__icon-links">
+  {% if iconLinks.compHeading %}
+    {% set compHeading = iconLinks.compHeading %}
+    {% include "@atoms/04-headings/comp-heading.twig" %}
+  {% endif %}
+  <ul class="ma__icon-links__items">
+    {% block iconLinkItems %}
+      {% for item in iconLinks.items %}
+        <li class="ma__icon-links__item">
+          {% include "@molecules/icon-link-item.twig" %}
+        </li>
+      {% endfor %}
+    {% endblock %}
+  </ul>
+</section>
diff --git a/styleguide/source/_patterns/02-molecules/section-links.twig b/styleguide/source/_patterns/02-molecules/section-links.twig
@@ -1,57 +1,59 @@
-{% set titleId = "section_titles_" ~ sectionLinks.id %}
-
-<section class="ma__section-links js-accordion">
-  <div class="ma__section-links__content">
-    {% if sectionLinks.catIcon %}
-      <div class="ma__section-links__icon">
-        {% set catIcon = sectionLinks.catIcon %}
-        {% include "@atoms/05-icons/cat-icon.twig" %}
-      </div>
-    {% endif %}
-    {# Backward Compatible with v5.8 - subTitle replaced by level #}
-    {% if sectionLinks.subTitle %}
-      {% set sectionLinks = sectionLinks|merge({"level": 3}) %}
-    {% endif %}
-
-    {% set headingLevel = sectionLinks.level ? : 2 %}
-    <h{{ headingLevel }} class="ma__section-links__title js-accordion-link" id="{{ titleId }}">
-      {% set decorativeLink = sectionLinks.title %}
-      {% include "@atoms/decorative-link.twig" %}
-    </h{{ headingLevel}}>
-    <nav class="ma__section-links__toggle-content js-accordion-content" aria-labelledby="{{ titleId }}">
-      {% if sectionLinks.description %}
-        <p class="ma__section-links__description">{{sectionLinks.description}}</p>
-      {% endif %}
-      <div class="ma__section-links__mobile-title">
-        {% set decorativeLink = { 
-          "type": "", 
-          "href": sectionLinks.title.href, 
-          "text": "Learn More", 
-          "info": "learn more about " ~ sectionLinks.title.text } 
-        %}
-        {% include "@atoms/decorative-link.twig" %}
-      </div>
-      <ul class="ma__section-links__items">
-        {% if sectionLinks.type == "callout" %}
-          {% for calloutLink in sectionLinks.links %}
-            <li class="ma__section-links__item">
-              {% include "@molecules/callout-link.twig" %}
-            </li>
-          {% endfor %}
-        {% else %}
-          {% for decorativeLink in sectionLinks.links %}
-            <li class="ma__section-links__item">
-              {% include "@atoms/decorative-link.twig" %}
-            </li>
-          {% endfor %}
-        {% endif %}
-      </ul>
-    </nav>
-    {% if sectionLinks.seeAll %}
-      <div class="ma__section-links__footer">
-        {% set decorativeLink = sectionLinks.seeAll %}
-        {% include "@atoms/decorative-link.twig" %}
-      </div>
-    {% endif %}
-  </div>
-</section>
+{% set titleId = "section_titles_" ~ sectionLinks.id %}
+
+<section class="ma__section-links js-accordion">
+  <div class="ma__section-links__content">
+    {% if sectionLinks.catIcon %}
+      <div class="ma__section-links__icon">
+        {% set catIcon = sectionLinks.catIcon %}
+        {% include "@atoms/05-icons/cat-icon.twig" %}
+      </div>
+    {% endif %}
+    {# Backward Compatible with v5.8 - subTitle replaced by level #}
+    {% if sectionLinks.subTitle %}
+      {% set sectionLinks = sectionLinks|merge({"level": 3}) %}
+    {% endif %}
+
+    {% set headingLevel = sectionLinks.level ? : 2 %}
+    <h{{ headingLevel }} class="ma__section-links__title js-accordion-link" id="{{ titleId }}">
+      {% set decorativeLink = sectionLinks.title %}
+      {% include "@atoms/decorative-link.twig" %}
+    </h{{ headingLevel}}>
+    <nav class="ma__section-links__toggle-content js-accordion-content" aria-labelledby="{{ titleId }}">
+      {% if sectionLinks.description %}
+        <p class="ma__section-links__description">{{sectionLinks.description}}</p>
+      {% endif %}
+      <div class="ma__section-links__mobile-title">
+        {% set decorativeLink = {
+          "type": "",
+          "href": sectionLinks.title.href,
+          "text": "Learn More",
+          "info": "learn more about " ~ sectionLinks.title.text }
+        %}
+        {% include "@atoms/decorative-link.twig" %}
+      </div>
+      <ul class="ma__section-links__items">
+        {% block sectionLinks %}
+          {% if sectionLinks.type == "callout" %}
+            {% for calloutLink in sectionLinks.links %}
+              <li class="ma__section-links__item">
+                {% include "@molecules/callout-link.twig" %}
+              </li>
+            {% endfor %}
+          {% else %}
+            {% for decorativeLink in sectionLinks.links %}
+              <li class="ma__section-links__item">
+                {% include "@atoms/decorative-link.twig" %}
+              </li>
+            {% endfor %}
+          {% endif %}
+        {% endblock %}
+      </ul>
+    </nav>
+    {% if sectionLinks.seeAll %}
+      <div class="ma__section-links__footer">
+        {% set decorativeLink = sectionLinks.seeAll %}
+        {% include "@atoms/decorative-link.twig" %}
+      </div>
+    {% endif %}
+  </div>
+</section>
diff --git a/styleguide/source/_patterns/03-organisms/by-author/about-section.twig b/styleguide/source/_patterns/03-organisms/by-author/about-section.twig
@@ -14,13 +14,18 @@
       </div>
 
       <div class="ma_about-section__person">
-        {% set person = about.person %}
-        {% include "@organisms/by-author/person-card.twig" %}
+        {% block personCard %}
+          {% set person = about.person %}
+          {% include "@organisms/by-author/person-card.twig" %}
+        {% endblock %}
       </div>
     </div>
   </div>
   <div class="ma__about-section__social">
-    {% set iconLinks = about.social %}
-    {% include "@molecules/icon-links.twig" %}
+    {% block socialLinks %}
+      {% set iconLinks = about.social %}
+      {% include "@molecules/icon-links.twig" %}
+    {% endblock %}
   </div>
-</div>
+</div>
+<div class="ma__divider"></div>