Merge pull request #863 from massgov/release-5.28.0

Release 5.28.0
massgov · Jun 13, 2018 · f5b7428 · f5b7428
2 parents 48d2ed8 + 6fe0f42
commit f5b7428
Show file tree

Hide file tree

Showing 16 changed files with 1,310 additions and 498 deletions.
diff --git a/backstopjs/reference/regression_page_organization-boards_0_document_0_phone.png b/backstopjs/reference/regression_page_organization-boards_0_document_0_phone.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/backstopjs/reference/regression_page_people-listing_0_document_0_phone.png b/backstopjs/reference/regression_page_people-listing_0_document_0_phone.png
diff --git a/backstopjs/reference/regression_page_people-listing_0_document_1_tablet.png b/backstopjs/reference/regression_page_people-listing_0_document_1_tablet.png
diff --git a/release-notes.md b/release-notes.md
@@ -14,6 +14,11 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 - 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.28.0 (6/13/2018)
+
+### Added
+- DP-8825: Adds teaser listing group organism to apply accordion behavior to multiple teaser listings at once.
+
 ## 5.27.0 (6/06/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.27.0",
+  "version": "5.28.0",
   "author": "Massachusetts Digital Services (MDS)",
   "repository": {
     "type": "git",

diff --git a/styleguide/source/_patterns/03-organisms/by-author/teaser-listing-group.json b/styleguide/source/_patterns/03-organisms/by-author/teaser-listing-group.json
diff --git a/styleguide/source/_patterns/03-organisms/by-author/teaser-listing-group.md b/styleguide/source/_patterns/03-organisms/by-author/teaser-listing-group.md
@@ -0,0 +1,32 @@
+### Description
+This Pattern shows a group of multiple General Teaser List patterns.
+
+### Status
+* Stable as of TBD
+
+### Pattern Contains
+* General Teaser
+
+### JavaScript Used
+* Accordion (js/modules/accordions.js)
+
+### Usage Guidelines
+
+
+### Variables
+~~~
+teaserListingGroup: {
+  totalShown:
+    type: number / required
+  moreItemsLabel:
+    type: string / required
+  lessItemsLabel:
+    type: string / required
+  teaserListings: [
+      type: teaserListing / required
+  ],
+  more: {
+    type: link / optional
+  }
+}
+~~~
diff --git a/styleguide/source/_patterns/03-organisms/by-author/teaser-listing-group.twig b/styleguide/source/_patterns/03-organisms/by-author/teaser-listing-group.twig
@@ -0,0 +1,14 @@
+<div class="ma__teaser-listing-group js-teaser-listing-group" data-total-visible="{{ teaserListingGroup.totalShown }}">
+  {% block teaserListingGroupItems %}
+    {% for teaserListing in teaserListingGroup.teaserListings %}
+      {% include "@organisms/by-author/teaser-listing.twig" %}
+    {% endfor %}
+  {% endblock %}
+
+  <button
+      class="ma__teaser-listing-group__toggle ma__content-link ma__content-link--chevron ma__content-link__acordion-toggle  js-teaser-listing-group-toggle"
+      aria-label="{{ teaserListingGroup.moreItemsLabel }}">
+    <div class="more">{{ teaserListingGroup.moreItemsLabel }}</div>
+    <div class="less">{{ teaserListingGroup.lessItemsLabel }}</div>
+  </button>
+</div>
diff --git a/...guide/source/_patterns/03-organisms/by-author/teaser-listing-group~showing-few-items.json b/...guide/source/_patterns/03-organisms/by-author/teaser-listing-group~showing-few-items.json