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 index 9443cf7f73..7583e51f2a 100644 Binary files a/backstopjs/reference/regression_page_organization-boards_0_document_0_phone.png and b/backstopjs/reference/regression_page_organization-boards_0_document_0_phone.png differ 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 index a0e49c577a..a3c98dbf15 100644 Binary files a/backstopjs/reference/regression_page_organization-boards_0_document_1_tablet.png and b/backstopjs/reference/regression_page_organization-boards_0_document_1_tablet.png differ 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 index 78230c1cdb..8286493d37 100644 Binary files a/backstopjs/reference/regression_page_people-listing_0_document_0_phone.png and b/backstopjs/reference/regression_page_people-listing_0_document_0_phone.png differ 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 index 361c36f8b5..4db74017af 100644 Binary files a/backstopjs/reference/regression_page_people-listing_0_document_1_tablet.png and b/backstopjs/reference/regression_page_people-listing_0_document_1_tablet.png differ diff --git a/release-notes.md b/release-notes.md index d491640b31..3519f6dcd7 100644 --- 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 index fe3d100cec..2b899c4954 100644 --- 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 new file mode 100644 index 0000000000..ac96647b9a --- /dev/null +++ b/styleguide/source/_patterns/03-organisms/by-author/teaser-listing-group.json @@ -0,0 +1,375 @@ +{ + "teaserListingGroup": { + "totalShown": 8, + "moreItemsLabel": "Show all members", + "lessItemsLabel": "Show fewer members", + "teaserListings": [ + { + "stacked": false, + "contained": true, + "gridTwoColumns": true, + "featuredItems": [ + { + "layout": "stacked", + "image": { + "src": "../../assets/images/placeholder/172x228.png", + "alt": "placeholder image", + "width": "172", + "height": "228" + }, + "eyebrow": "Featured Board Member", + "title": { + "text": "Featured Board Member's Name", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Featured Board Member's Title" + ], + "contents": [ + { + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } + } + ] + }, + { + "layout": "stacked", + "image": { + "src": "../../assets/images/placeholder/172x228.png", + "alt": "placeholder image", + "width": "172", + "height": "228" + }, + "eyebrow": "Featured Board Member", + "title": { + "href": "#", + "text": "Featured Board Member's Name", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Featured Board Member's title" + ], + "contents": [ + { + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } + } + ] + } + ], + "items": [ + { + "layout": "inline-image", + "image": { + "src": "../../assets/images/placeholder/72x96.png", + "alt": "placeholder image", + "width": "72", + "height": "96" + }, + "eyebrow": "Board member", + "title": { + "href": "#", + "text": "Sally Testperson", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Awesome board member" + ], + "contents": [ + { + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } + } + ] + }, + { + "layout": "inline-image", + "image": { + "src": "../../assets/images/placeholder/72x96.png", + "alt": "placeholder image", + "width": "72", + "height": "96" + }, + "eyebrow": "Board Member", + "title": { + "text": "Board Member's Name", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Member's title" + ], + "contents": [ + { + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } + } + ] + }, + { + "layout": "inline-image", + "image": { + "src": "../../assets/images/placeholder/72x96.png", + "alt": "placeholder image", + "width": "72", + "height": "96" + }, + "eyebrow": "Board Member", + "title": { + "text": "Board Member's Name", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Board Member's Title" + ], + "contents": [ + { + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } + } + ] + }, + { + "layout": "inline-image", + "image": { + "src": "../../assets/images/placeholder/72x96.png", + "alt": "placeholder image", + "width": "72", + "height": "96" + }, + "eyebrow": "Board Member", + "title": { + "text": "Board Member's Name", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Board Member's Title" + ], + "contents": [ + { + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } + } + ] + } + ] + }, + { + "stacked": false, + "contained": true, + "gridTwoColumns": true, + "compHeading": { + "title": "Subsection of boards", + "sub": "", + "color": "", + "id": "", + "level": 3, + "centered": "" + }, + "description": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + }, + "items": [ + { + "layout": "inline-image", + "image": { + "src": "../../assets/images/placeholder/72x96.png", + "alt": "placeholder image", + "width": "72", + "height": "96" + }, + "eyebrow": "Board member", + "title": { + "href": "#", + "text": "Sally Testperson", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Awesome board member" + ], + "contents": [ + { + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } + } + ] + }, + { + "layout": "inline-image", + "image": { + "src": "../../assets/images/placeholder/72x96.png", + "alt": "placeholder image", + "width": "72", + "height": "96" + }, + "eyebrow": "Board Member", + "title": { + "text": "Board Member's Name", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Member's title" + ], + "contents": [ + { + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } + } + ] + }, + { + "layout": "inline-image", + "image": { + "src": "../../assets/images/placeholder/72x96.png", + "alt": "placeholder image", + "width": "72", + "height": "96" + }, + "eyebrow": "Board Member", + "title": { + "text": "Board Member's Name", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Board Member's Title" + ], + "contents": [ + { + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } + } + ] + }, + { + "layout": "inline-image", + "image": { + "src": "../../assets/images/placeholder/72x96.png", + "alt": "placeholder image", + "width": "72", + "height": "96" + }, + "eyebrow": "Board Member", + "title": { + "text": "Board Member's Name", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Board Member's Title" + ], + "contents": [ + { + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } + } + ] + }, + { + "layout": "inline-image", + "image": { + "src": "../../assets/images/placeholder/72x96.png", + "alt": "placeholder image", + "width": "72", + "height": "96" + }, + "eyebrow": "Board Member", + "title": { + "text": "Board Member's Name", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Board Member's Title" + ], + "contents": [ + { + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } + } + ] + }, + { + "layout": "inline-image", + "image": { + "src": "../../assets/images/placeholder/72x96.png", + "alt": "placeholder image", + "width": "72", + "height": "96" + }, + "eyebrow": "Board Member", + "title": { + "text": "Board Member's Name", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Board Member's Title" + ], + "contents": [ + { + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } + } + ] + } + ] + } + ] + } +} 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 new file mode 100644 index 0000000000..ae88c9e828 --- /dev/null +++ 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 new file mode 100644 index 0000000000..49352f3003 --- /dev/null +++ b/styleguide/source/_patterns/03-organisms/by-author/teaser-listing-group.twig @@ -0,0 +1,14 @@ +
+ {% block teaserListingGroupItems %} + {% for teaserListing in teaserListingGroup.teaserListings %} + {% include "@organisms/by-author/teaser-listing.twig" %} + {% endfor %} + {% endblock %} + + +
diff --git a/styleguide/source/_patterns/03-organisms/by-author/teaser-listing-group~showing-few-items.json b/styleguide/source/_patterns/03-organisms/by-author/teaser-listing-group~showing-few-items.json new file mode 100644 index 0000000000..63def9f9e3 --- /dev/null +++ b/styleguide/source/_patterns/03-organisms/by-author/teaser-listing-group~showing-few-items.json @@ -0,0 +1,375 @@ +{ + "teaserListingGroup": { + "totalShown": 4, + "moreItemsLabel": "Show all members", + "lessItemsLabel": "Show fewer members", + "teaserListings": [ + { + "stacked": false, + "contained": true, + "gridTwoColumns": true, + "featuredItems": [ + { + "layout": "stacked", + "image": { + "src": "../../assets/images/placeholder/172x228.png", + "alt": "placeholder image", + "width": "172", + "height": "228" + }, + "eyebrow": "Featured Board Member", + "title": { + "text": "Featured Board Member's Name", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Featured Board Member's Title" + ], + "contents": [ + { + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } + } + ] + }, + { + "layout": "stacked", + "image": { + "src": "../../assets/images/placeholder/172x228.png", + "alt": "placeholder image", + "width": "172", + "height": "228" + }, + "eyebrow": "Featured Board Member", + "title": { + "href": "#", + "text": "Featured Board Member's Name", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Featured Board Member's title" + ], + "contents": [ + { + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } + } + ] + } + ], + "items": [ + { + "layout": "inline-image", + "image": { + "src": "../../assets/images/placeholder/72x96.png", + "alt": "placeholder image", + "width": "72", + "height": "96" + }, + "eyebrow": "Board member", + "title": { + "href": "#", + "text": "Sally Testperson", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Awesome board member" + ], + "contents": [ + { + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } + } + ] + }, + { + "layout": "inline-image", + "image": { + "src": "../../assets/images/placeholder/72x96.png", + "alt": "placeholder image", + "width": "72", + "height": "96" + }, + "eyebrow": "Board Member", + "title": { + "text": "Board Member's Name", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Member's title" + ], + "contents": [ + { + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } + } + ] + }, + { + "layout": "inline-image", + "image": { + "src": "../../assets/images/placeholder/72x96.png", + "alt": "placeholder image", + "width": "72", + "height": "96" + }, + "eyebrow": "Board Member", + "title": { + "text": "Board Member's Name", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Board Member's Title" + ], + "contents": [ + { + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } + } + ] + }, + { + "layout": "inline-image", + "image": { + "src": "../../assets/images/placeholder/72x96.png", + "alt": "placeholder image", + "width": "72", + "height": "96" + }, + "eyebrow": "Board Member", + "title": { + "text": "Board Member's Name", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Board Member's Title" + ], + "contents": [ + { + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } + } + ] + } + ] + }, + { + "stacked": false, + "contained": true, + "gridTwoColumns": true, + "compHeading": { + "title": "Subsection of boards", + "sub": "", + "color": "", + "id": "", + "level": 3, + "centered": "" + }, + "description": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + }, + "items": [ + { + "layout": "inline-image", + "image": { + "src": "../../assets/images/placeholder/72x96.png", + "alt": "placeholder image", + "width": "72", + "height": "96" + }, + "eyebrow": "Board member", + "title": { + "href": "#", + "text": "Sally Testperson", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Awesome board member" + ], + "contents": [ + { + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } + } + ] + }, + { + "layout": "inline-image", + "image": { + "src": "../../assets/images/placeholder/72x96.png", + "alt": "placeholder image", + "width": "72", + "height": "96" + }, + "eyebrow": "Board Member", + "title": { + "text": "Board Member's Name", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Member's title" + ], + "contents": [ + { + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } + } + ] + }, + { + "layout": "inline-image", + "image": { + "src": "../../assets/images/placeholder/72x96.png", + "alt": "placeholder image", + "width": "72", + "height": "96" + }, + "eyebrow": "Board Member", + "title": { + "text": "Board Member's Name", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Board Member's Title" + ], + "contents": [ + { + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } + } + ] + }, + { + "layout": "inline-image", + "image": { + "src": "../../assets/images/placeholder/72x96.png", + "alt": "placeholder image", + "width": "72", + "height": "96" + }, + "eyebrow": "Board Member", + "title": { + "text": "Board Member's Name", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Board Member's Title" + ], + "contents": [ + { + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } + } + ] + }, + { + "layout": "inline-image", + "image": { + "src": "../../assets/images/placeholder/72x96.png", + "alt": "placeholder image", + "width": "72", + "height": "96" + }, + "eyebrow": "Board Member", + "title": { + "text": "Board Member's Name", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Board Member's Title" + ], + "contents": [ + { + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } + } + ] + }, + { + "layout": "inline-image", + "image": { + "src": "../../assets/images/placeholder/72x96.png", + "alt": "placeholder image", + "width": "72", + "height": "96" + }, + "eyebrow": "Board Member", + "title": { + "text": "Board Member's Name", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Board Member's Title" + ], + "contents": [ + { + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } + } + ] + } + ] + } + ] + } +} diff --git a/styleguide/source/_patterns/05-pages/organization~boards.json b/styleguide/source/_patterns/05-pages/organization~boards.json index 60424e3300..c9a7c7486c 100644 --- a/styleguide/source/_patterns/05-pages/organization~boards.json +++ b/styleguide/source/_patterns/05-pages/organization~boards.json @@ -10,17 +10,15 @@ "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": [ @@ -286,531 +284,418 @@ } } ], - "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": "", - "id": "", - "pageContent": [ - { - "path": "@organisms/by-author/image-link-list.twig", - "data": { - "imageLinkList": { - "blocks": true, - "compHeading": { - "title": "Our Organizations", - "sub": "", - "color": "", - "id": "", - "centered": false - }, - "itemPluralName": "organizations", - "description": { - "rteElements": [ - { - "path": "@atoms/11-text/paragraph.twig", - "data": { - "paragraph": { - "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, perspiciatis, similique? Reprehenderit vel praesentium est, tempora animi mollitia non quae. Quasi, inventore. Dolores maxime consequatur dolorum voluptatem, natus dolorem blanditiis." - } - } - } - ] - }, - "links": [ - { - "href": "#", - "text": "Lorem ipsum dolor sit amet.", - "info": "", - "image": { - "src": "../../assets/images/placeholder/250x250.png", - "alt": "logo" - } - }, - { - "href": "#", - "text": "Lorem ipsum dolor sit amet.", - "info": "", - "image": { - "src": "../../assets/images/placeholder/250x250.png", - "alt": "logo" - } - }, - { - "href": "#", - "text": "Lorem ipsum dolor sit amet.", - "info": "", - "image": { - "src": "../../assets/images/placeholder/250x250.png", - "alt": "logo" - } - }, - { - "href": "#", - "text": "Lorem ipsum dolor sit amet.", - "info": "" - }, - { - "href": "#", - "text": "Lorem ipsum dolor sit amet, consectetur.", - "info": "", - "image": { - "src": "../../assets/images/placeholder/250x250.png", - "alt": "logo" - } - }, - { - "href": "#", - "text": "Lorem ipsum dolor sit.", - "info": "", - "image": { - "src": "../../assets/images/placeholder/250x250.png", - "alt": "logo" - } - }, - { - "href": "#", - "text": "Lorem ipsum dolor", - "info": "", - "image": { - "src": "../../assets/images/placeholder/250x250.png", - "alt": "logo" - } - }, - { - "href": "#", - "text": "Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.", - "info": "" - } - ] - } + "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": [ { - "path": "@organisms/by-author/teaser-listing.twig", + "path": "@organisms/by-author/teaser-listing-group.twig", "data": { - "teaserListing": { - "stacked": false, - "contained": true, - "shownNumber": 6, - "expandable": true, + "teaserListingGroup": { + "totalShown": 8, "moreItemsLabel": "Show all members", "lessItemsLabel": "Show fewer members", - "gridTwoColumns": true, - "featuredItems": [ + "teaserListings": [ { - "layout": "stacked", - "image": { - "src": "../../assets/images/placeholder/172x228.png", - "alt": "placeholder image", - "width": "172", - "height": "228" - }, - "eyebrow": "Featured Board Member", - "title": { - "text": "Featured Board Member's Name", - "info": "", - "property": "" - }, - "emphasizedText": [ - "Featured Board Member's Title" - ], - "contents": [ + "stacked": false, + "contained": true, + "gridTwoColumns": true, + "featuredItems": [ { - "path": "@atoms/11-text/paragraph.twig", - "data": { - "paragraph": { - "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + "layout": "stacked", + "image": { + "src": "../../assets/images/placeholder/172x228.png", + "alt": "placeholder image", + "width": "172", + "height": "228" + }, + "eyebrow": "Featured Board Member", + "title": { + "text": "Featured Board Member's Name", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Featured Board Member's Title" + ], + "contents": [ + { + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } } - } - } - ] - }, - { - "layout": "stacked", - "image": { - "src": "../../assets/images/placeholder/172x228.png", - "alt": "placeholder image", - "width": "172", - "height": "228" - }, - "eyebrow": "Featured Board Member", - "title": { - "href": "#", - "text": "Featured Board Member's Name", - "info": "", - "property": "" - }, - "emphasizedText": [ - "Featured Board Member's title" - ], - "contents": [ + ] + }, { - "path": "@atoms/11-text/paragraph.twig", - "data": { - "paragraph": { - "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + "layout": "stacked", + "image": { + "src": "../../assets/images/placeholder/172x228.png", + "alt": "placeholder image", + "width": "172", + "height": "228" + }, + "eyebrow": "Featured Board Member", + "title": { + "href": "#", + "text": "Featured Board Member's Name", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Featured Board Member's title" + ], + "contents": [ + { + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } } - } + ] } - ] - } - ], - "items": [ - { - "layout": "inline-image", - "image": { - "src": "../../assets/images/placeholder/72x96.png", - "alt": "placeholder image", - "width": "72", - "height": "96" - }, - "eyebrow": "Board member", - "title": { - "href": "#", - "text": "Sally Testperson", - "info": "", - "property": "" - }, - "emphasizedText": [ - "Awesome board member" ], - "contents": [ + "items": [ { - "path": "@atoms/11-text/paragraph.twig", - "data": { - "paragraph": { - "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + "layout": "inline-image", + "image": { + "src": "../../assets/images/placeholder/72x96.png", + "alt": "placeholder image", + "width": "72", + "height": "96" + }, + "eyebrow": "Board member", + "title": { + "href": "#", + "text": "Sally Testperson", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Awesome board member" + ], + "contents": [ + { + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } } - } - } - ] - }, - { - "layout": "inline-image", - "image": { - "src": "../../assets/images/placeholder/72x96.png", - "alt": "placeholder image", - "width": "72", - "height": "96" - }, - "eyebrow": "Board Member", - "title": { - "text": "Board Member's Name", - "info": "", - "property": "" - }, - "emphasizedText": [ - "Member's title" - ], - "contents": [ + ] + }, { - "path": "@atoms/11-text/paragraph.twig", - "data": { - "paragraph": { - "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + "layout": "inline-image", + "image": { + "src": "../../assets/images/placeholder/72x96.png", + "alt": "placeholder image", + "width": "72", + "height": "96" + }, + "eyebrow": "Board Member", + "title": { + "text": "Board Member's Name", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Member's title" + ], + "contents": [ + { + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } } - } - } - ] - }, - { - "layout": "inline-image", - "image": { - "src": "../../assets/images/placeholder/72x96.png", - "alt": "placeholder image", - "width": "72", - "height": "96" - }, - "eyebrow": "Board Member", - "title": { - "text": "Board Member's Name", - "info": "", - "property": "" - }, - "emphasizedText": [ - "Board Member's Title" - ], - "contents": [ + ] + }, { - "path": "@atoms/11-text/paragraph.twig", - "data": { - "paragraph": { - "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + "layout": "inline-image", + "image": { + "src": "../../assets/images/placeholder/72x96.png", + "alt": "placeholder image", + "width": "72", + "height": "96" + }, + "eyebrow": "Board Member", + "title": { + "text": "Board Member's Name", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Board Member's Title" + ], + "contents": [ + { + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } } - } - } - ] - }, - { - "layout": "inline-image", - "image": { - "src": "../../assets/images/placeholder/72x96.png", - "alt": "placeholder image", - "width": "72", - "height": "96" - }, - "eyebrow": "Board Member", - "title": { - "text": "Board Member's Name", - "info": "", - "property": "" - }, - "emphasizedText": [ - "Board Member's Title" - ], - "contents": [ + ] + }, { - "path": "@atoms/11-text/paragraph.twig", - "data": { - "paragraph": { - "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + "layout": "inline-image", + "image": { + "src": "../../assets/images/placeholder/72x96.png", + "alt": "placeholder image", + "width": "72", + "height": "96" + }, + "eyebrow": "Board Member", + "title": { + "text": "Board Member's Name", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Board Member's Title" + ], + "contents": [ + { + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } } - } + ] } ] - } - ] - } - } - }, - { - "path": "@organisms/by-author/teaser-listing.twig", - "data": { - "teaserListing": { - "stacked": false, - "contained": true, - "gridTwoColumns": true, - "shownNumber": 2, - "expandable": true, - "moreItemsLabel": "Show all members", - "lessItemsLabel": "Show fewer members", - "compHeading": { - "title": "Subsection of boards", - "sub": "", - "color": "", - "id": "", - "level": 3, - "centered": "" - }, - "description": { - "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." - }, - "items": [ + }, { - "layout": "inline-image", - "image": { - "src": "../../assets/images/placeholder/72x96.png", - "alt": "placeholder image", - "width": "72", - "height": "96" + "stacked": false, + "contained": true, + "gridTwoColumns": true, + "compHeading": { + "title": "Subsection of boards", + "sub": "", + "color": "", + "id": "", + "level": 3, + "centered": "" }, - "eyebrow": "Board member", - "title": { - "href": "#", - "text": "Sally Testperson", - "info": "", - "property": "" + "description": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." }, - "emphasizedText": [ - "Awesome board member" - ], - "contents": [ + "items": [ { - "path": "@atoms/11-text/paragraph.twig", - "data": { - "paragraph": { - "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + "layout": "inline-image", + "image": { + "src": "../../assets/images/placeholder/72x96.png", + "alt": "placeholder image", + "width": "72", + "height": "96" + }, + "eyebrow": "Board member", + "title": { + "href": "#", + "text": "Sally Testperson", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Awesome board member" + ], + "contents": [ + { + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } } - } - } - ] - }, - { - "layout": "inline-image", - "image": { - "src": "../../assets/images/placeholder/72x96.png", - "alt": "placeholder image", - "width": "72", - "height": "96" - }, - "eyebrow": "Board Member", - "title": { - "text": "Board Member's Name", - "info": "", - "property": "" - }, - "emphasizedText": [ - "Member's title" - ], - "contents": [ + ] + }, { - "path": "@atoms/11-text/paragraph.twig", - "data": { - "paragraph": { - "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + "layout": "inline-image", + "image": { + "src": "../../assets/images/placeholder/72x96.png", + "alt": "placeholder image", + "width": "72", + "height": "96" + }, + "eyebrow": "Board Member", + "title": { + "text": "Board Member's Name", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Member's title" + ], + "contents": [ + { + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } } - } - } - ] - }, - { - "layout": "inline-image", - "image": { - "src": "../../assets/images/placeholder/72x96.png", - "alt": "placeholder image", - "width": "72", - "height": "96" - }, - "eyebrow": "Board Member", - "title": { - "text": "Board Member's Name", - "info": "", - "property": "" - }, - "emphasizedText": [ - "Board Member's Title" - ], - "contents": [ + ] + }, { - "path": "@atoms/11-text/paragraph.twig", - "data": { - "paragraph": { - "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + "layout": "inline-image", + "image": { + "src": "../../assets/images/placeholder/72x96.png", + "alt": "placeholder image", + "width": "72", + "height": "96" + }, + "eyebrow": "Board Member", + "title": { + "text": "Board Member's Name", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Board Member's Title" + ], + "contents": [ + { + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } } - } - } - ] - }, - { - "layout": "inline-image", - "image": { - "src": "../../assets/images/placeholder/72x96.png", - "alt": "placeholder image", - "width": "72", - "height": "96" - }, - "eyebrow": "Board Member", - "title": { - "text": "Board Member's Name", - "info": "", - "property": "" - }, - "emphasizedText": [ - "Board Member's Title" - ], - "contents": [ + ] + }, { - "path": "@atoms/11-text/paragraph.twig", - "data": { - "paragraph": { - "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + "layout": "inline-image", + "image": { + "src": "../../assets/images/placeholder/72x96.png", + "alt": "placeholder image", + "width": "72", + "height": "96" + }, + "eyebrow": "Board Member", + "title": { + "text": "Board Member's Name", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Board Member's Title" + ], + "contents": [ + { + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } } - } - } - ] - }, - { - "layout": "inline-image", - "image": { - "src": "../../assets/images/placeholder/72x96.png", - "alt": "placeholder image", - "width": "72", - "height": "96" - }, - "eyebrow": "Board Member", - "title": { - "text": "Board Member's Name", - "info": "", - "property": "" - }, - "emphasizedText": [ - "Board Member's Title" - ], - "contents": [ + ] + }, { - "path": "@atoms/11-text/paragraph.twig", - "data": { - "paragraph": { - "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + "layout": "inline-image", + "image": { + "src": "../../assets/images/placeholder/72x96.png", + "alt": "placeholder image", + "width": "72", + "height": "96" + }, + "eyebrow": "Board Member", + "title": { + "text": "Board Member's Name", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Board Member's Title" + ], + "contents": [ + { + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } } - } - } - ] - }, - { - "layout": "inline-image", - "image": { - "src": "../../assets/images/placeholder/72x96.png", - "alt": "placeholder image", - "width": "72", - "height": "96" - }, - "eyebrow": "Board Member", - "title": { - "text": "Board Member's Name", - "info": "", - "property": "" - }, - "emphasizedText": [ - "Board Member's Title" - ], - "contents": [ + ] + }, { - "path": "@atoms/11-text/paragraph.twig", - "data": { - "paragraph": { - "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + "layout": "inline-image", + "image": { + "src": "../../assets/images/placeholder/72x96.png", + "alt": "placeholder image", + "width": "72", + "height": "96" + }, + "eyebrow": "Board Member", + "title": { + "text": "Board Member's Name", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Board Member's Title" + ], + "contents": [ + { + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } } - } + ] } ] } diff --git a/styleguide/source/assets/js/index.js b/styleguide/source/assets/js/index.js index 61a9021296..5b1c1c967a 100644 --- a/styleguide/source/assets/js/index.js +++ b/styleguide/source/assets/js/index.js @@ -29,6 +29,7 @@ import responsiveVideo from "./modules/responsiveVideo.js"; import resultsHeading from "./modules/resultsHeading.js"; import richText from "./modules/richText.js"; import scrollAnchors from "./modules/scrollAnchors.js"; +import teaserListingGroup from "./modules/teaserListingGroup"; import truncateTitle from "./modules/truncateTitle.js"; import formInputs from "./modules/formInputs.js"; import utilNav from "./modules/utilNav.js"; diff --git a/styleguide/source/assets/js/modules/teaserListingGroup.js b/styleguide/source/assets/js/modules/teaserListingGroup.js new file mode 100644 index 0000000000..eb1946dabb --- /dev/null +++ b/styleguide/source/assets/js/modules/teaserListingGroup.js @@ -0,0 +1,53 @@ +export default function (window, document, $, undefined) { + + let $toggle, $root, $sections; + let hiddenClass = 'is-initially-hidden'; + + function bindVars () { + $root = $('.js-teaser-listing-group'); + $toggle = $root.find('.js-teaser-listing-group-toggle'); + $sections = $root.find('.ma__teaser-listing'); + } + + function markForAccordion () { + let totalShown = $root.data('totalVisible'); + let teaserItems = $root.find('.ma__general-teaser'); + + // set excess items to be hidden + teaserItems.slice(totalShown, teaserItems.length).each((i, el) => { + // Items can be siblings or within an
  • , add class to the
  • if present + if ($(el).parent().prop('tagName') === "LI") { + $(el).parent().addClass(hiddenClass); + } else { + $(el).addClass(hiddenClass); + } + }); + + $sections.each( (i, el) => { + let $section = $(el); + let totalTeaserItems = $section.find('.ma__general-teaser'); + let hiddenItems = $section.find('.'+hiddenClass); + // If the total number of teasers and total number of hidden things are the same, hide the whole section. + if (totalTeaserItems.length === hiddenItems.length) { + $section.addClass(hiddenClass); + } + }); + + + } + + function handleToggle () { + $toggle.click(() => { + $root.toggleClass('is-open'); + }); + } + + + + $(document).ready( () => { + bindVars(); + markForAccordion(); + handleToggle(); + }); + +} (window, document, jQuery); diff --git a/styleguide/source/assets/scss/03-organisms/_teaser-listing-group.scss b/styleguide/source/assets/scss/03-organisms/_teaser-listing-group.scss new file mode 100644 index 0000000000..9619b65b6b --- /dev/null +++ b/styleguide/source/assets/scss/03-organisms/_teaser-listing-group.scss @@ -0,0 +1,68 @@ +.ma__teaser-listing-group { + + .pre-content > &, + .post-content > &, + .main-content--full .page-content > & { + @include ma-container; + } + + .ma__teaser-listing + .ma__teaser-listing { + margin-top: 40px; + } + + .is-initially-hidden { + max-height: 0; + opacity: 0; + overflow: hidden; + transition: 350ms ease-in-out; + } + &:not(.is-open) .is-initially-hidden { + margin: 0 !important; + } + // treat sections being hidden slightly differently + .ma__teaser-listing.is-initially-hidden { + height: 0; + } + + .ma__teaser-listing-group__toggle { + margin-top: 30px; + font-weight: 700; + border: 0; + padding-left: 0; + background: transparent; + &:after { + top: 20%; + right: 0; + transform: rotate(45deg); + } + .less { + display: none; + } + } + + &.is-open { + .is-initially-hidden { + max-height: 100vh; // arbitrarily large for simplicity and consistent transition time + opacity: 1; + overflow: visible; + } + // treat sections being hidden slightly differently + .ma__teaser-listing.is-initially-hidden { + max-height: none; + height: auto; + } + + .ma__teaser-listing-group__toggle { + &:after { + transform: rotate(-135deg); + } + .more { + display: none; + } + .less { + display: initial; + } + } + } + +} diff --git a/styleguide/source/assets/scss/03-organisms/_teaser-listing.scss b/styleguide/source/assets/scss/03-organisms/_teaser-listing.scss index 31c337165d..18e2535153 100644 --- a/styleguide/source/assets/scss/03-organisms/_teaser-listing.scss +++ b/styleguide/source/assets/scss/03-organisms/_teaser-listing.scss @@ -18,7 +18,10 @@ } } - &__description + *, + &__description + * { + margin-top: 20px; + padding-top: 20px; + } &__featured-items + &__items { border-top-width: 1px; border-top-style: solid; @@ -30,8 +33,8 @@ } @media ($bp-large-min) { - margin-top: 45px; - padding-top: 45px; + margin-top: 20px; + padding-top: 20px; } .sidebar & { @@ -206,7 +209,7 @@ } } .ma__teaser-listing__items { - margin-bottom: 40px; + margin-bottom: 20px; } .ma__teaser-listing__items:last-child { margin-bottom: 0; diff --git a/styleguide/source/assets/scss/index.scss b/styleguide/source/assets/scss/index.scss index 334b63be09..b06050d227 100644 --- a/styleguide/source/assets/scss/index.scss +++ b/styleguide/source/assets/scss/index.scss @@ -182,6 +182,7 @@ @import "03-organisms/table-of-contents-overlay"; @import "03-organisms/tabular-data"; @import "03-organisms/teaser-listing"; +@import "03-organisms/teaser-listing-group"; @import "03-organisms/teaser-text"; @import "03-organisms/test-feed"; @import "03-organisms/top-actions";