@@ -28,4 +30,6 @@
{% block schemaContent %}{% endblock %}
-{% include "@organisms/by-template/footer.twig" %}
+{% block footer %}
+ {% include "@organisms/by-template/footer.twig" %}
+{% endblock %}
diff --git a/styleguide/source/_patterns/04-templates/two-column.md b/styleguide/source/_patterns/04-templates/two-column.md
new file mode 100644
index 0000000000..f0e3532368
--- /dev/null
+++ b/styleguide/source/_patterns/04-templates/two-column.md
@@ -0,0 +1,11 @@
+### Description
+This is a Base Template with two columns of content using a Right Rail.
+
+### Status
+* Stable as of 1.0.0
+
+### Pattern Contains
+* Header
+* Footer
+* Emergency Alerts
+* This template contains [Twig Blocks](https://twig.symfony.com/doc/2.x/tags/extends.html) that can be used to populated the Pre Content, Page Content, Right Rail, or Post Content sections with patterns found in Mayflower
diff --git a/styleguide/source/_patterns/04-templates/two-column.twig b/styleguide/source/_patterns/04-templates/two-column.twig
index a9aa9be2fb..5cbce19a8a 100644
--- a/styleguide/source/_patterns/04-templates/two-column.twig
+++ b/styleguide/source/_patterns/04-templates/two-column.twig
@@ -2,6 +2,7 @@
{% include "@organisms/by-template/emergency-alerts.twig" %}
{% include "@organisms/by-template/header.twig" %}
{% endblock %}
+
{% block preContent %}
@@ -16,7 +17,7 @@
diff --git a/styleguide/source/_patterns/05-pages/ERROR-403.json b/styleguide/source/_patterns/05-pages/ERROR-403.json
index ef862df367..acfe402663 100644
--- a/styleguide/source/_patterns/05-pages/ERROR-403.json
+++ b/styleguide/source/_patterns/05-pages/ERROR-403.json
@@ -1,8 +1,7 @@
{
"narrowTemplate": {
"side": "right",
- "color": "yellow",
- "centered": true
+ "color": "yellow"
},
"errorPage": {
@@ -12,13 +11,17 @@
"message": "Sorry, you don't have access to this page"
},
- "helpfulLinks": {
+ "linkList": {
"compHeading": {
"title": "Helpful Links",
- "sub": "true",
- "color": "yellow"
+ "level": 3,
+ "color": "yellow",
+ "centered": true
},
- "items": [{
+ "description": null,
+ "stacked": false,
+ "hideBullets": true,
+ "links" : [{
"href": "#",
"text":"Helpful link",
"chevron": "true"
diff --git a/styleguide/source/_patterns/05-pages/ERROR-403.md b/styleguide/source/_patterns/05-pages/ERROR-403.md
new file mode 100644
index 0000000000..4693c6f9e3
--- /dev/null
+++ b/styleguide/source/_patterns/05-pages/ERROR-403.md
@@ -0,0 +1,14 @@
+### Description
+Example of an Error page for Mass Gov [extending](https://twig.symfony.com/doc/2.x/tags/extends.html) the Narrow Template
+
+### Status
+* Stable as of 5.0.0
+
+### Pattern Contains
+* Error Page
+* Header Search
+* Link List
+* Narrow Template (template)
+
+### Variables
+See Patterns above
diff --git a/styleguide/source/_patterns/05-pages/ERROR-403.twig b/styleguide/source/_patterns/05-pages/ERROR-403.twig
index 661c5171a9..ab0fc6f43a 100644
--- a/styleguide/source/_patterns/05-pages/ERROR-403.twig
+++ b/styleguide/source/_patterns/05-pages/ERROR-403.twig
@@ -3,5 +3,5 @@
{% block narrowContent %}
{% include "@organisms/by-template/error-page.twig" %}
{% include "@molecules/header-search.twig" %}
- {% include "@organisms/by-author/helpful-links.twig" %}
+ {% include "@organisms/by-author/link-list.twig" %}
{% endblock %}
\ No newline at end of file
diff --git a/styleguide/source/_patterns/05-pages/ERROR-404.json b/styleguide/source/_patterns/05-pages/ERROR-404.json
index a2f191aa9c..1c2ab98c8f 100644
--- a/styleguide/source/_patterns/05-pages/ERROR-404.json
+++ b/styleguide/source/_patterns/05-pages/ERROR-404.json
@@ -11,14 +11,17 @@
"message": "The link you clicked may be broken or the page may have been removed"
},
- "helpfulLinks": {
+ "linkList": {
"compHeading": {
"title": "Helpful Links",
- "sub": "true",
+ "level": 3,
"color": "yellow",
"centered": true
},
- "items": [{
+ "description": null,
+ "stacked": false,
+ "hideBullets": true,
+ "links" : [{
"href": "#",
"text":"Helpful link",
"chevron": "true"
diff --git a/styleguide/source/_patterns/05-pages/ERROR-404.md b/styleguide/source/_patterns/05-pages/ERROR-404.md
new file mode 100644
index 0000000000..4693c6f9e3
--- /dev/null
+++ b/styleguide/source/_patterns/05-pages/ERROR-404.md
@@ -0,0 +1,14 @@
+### Description
+Example of an Error page for Mass Gov [extending](https://twig.symfony.com/doc/2.x/tags/extends.html) the Narrow Template
+
+### Status
+* Stable as of 5.0.0
+
+### Pattern Contains
+* Error Page
+* Header Search
+* Link List
+* Narrow Template (template)
+
+### Variables
+See Patterns above
diff --git a/styleguide/source/_patterns/05-pages/ERROR-404.twig b/styleguide/source/_patterns/05-pages/ERROR-404.twig
index 661c5171a9..ab0fc6f43a 100644
--- a/styleguide/source/_patterns/05-pages/ERROR-404.twig
+++ b/styleguide/source/_patterns/05-pages/ERROR-404.twig
@@ -3,5 +3,5 @@
{% block narrowContent %}
{% include "@organisms/by-template/error-page.twig" %}
{% include "@molecules/header-search.twig" %}
- {% include "@organisms/by-author/helpful-links.twig" %}
+ {% include "@organisms/by-author/link-list.twig" %}
{% endblock %}
\ No newline at end of file
diff --git a/styleguide/source/_patterns/05-pages/ERROR-500.md b/styleguide/source/_patterns/05-pages/ERROR-500.md
new file mode 100644
index 0000000000..cab4c7bca9
--- /dev/null
+++ b/styleguide/source/_patterns/05-pages/ERROR-500.md
@@ -0,0 +1,12 @@
+### Description
+Example of an Error page for Mass Gov [extending](https://twig.symfony.com/doc/2.x/tags/extends.html) the Narrow Template
+
+### Status
+* Stable as of 5.0.0
+
+### Pattern Contains
+* Error Page
+* Narrow Template (template)
+
+### Variables
+See Patterns above
diff --git a/styleguide/source/_patterns/05-pages/G2G/G2G-ORG-Health-Services.json b/styleguide/source/_patterns/05-pages/G2G/G2G-ORG-Health-Services.json
index 8ff480410e..b1c1e70e13 100644
--- a/styleguide/source/_patterns/05-pages/G2G/G2G-ORG-Health-Services.json
+++ b/styleguide/source/_patterns/05-pages/G2G/G2G-ORG-Health-Services.json
@@ -71,7 +71,7 @@
"COMMENT":"****PAGE CONTENT COMPONENTS****",
- "stackedRowSections": [{
+ "stackedRows": [{
"title":"",
"id":"",
"pageContent": [{
@@ -105,16 +105,16 @@
}],
"sideBar": [{
- "path": "@atoms/04-headings/sidebar-heading.twig",
- "data": {
- "sidebarHeading": {
- "title": "Social"
- }
- }
- },{
"path": "@molecules/icon-links.twig",
"data": {
"iconLinks": {
+ "compHeading": {
+ "title": "Social",
+ "sub": true,
+ "color": "",
+ "id": "",
+ "centered": ""
+ },
"items": [{
"icon": "@atoms/05-icons/svg-twitter.twig",
"link": {
@@ -197,56 +197,239 @@
}
}
},{
- "path": "@organisms/by-author/mapped-locations.twig",
+ "path": "@organisms/by-author/press-listing.twig",
"data": {
- "mappedLocations": {
+ "pressListing": {
"compHeading": {
- "title": "Locations",
+ "title": "Recent news & announcements",
"sub": "",
"color": "",
"id": "",
"centered": ""
},
- "link": {
- "href": "/patterns/05-pages-Map-listing-human-services/05-pages-Map-listing-human-services.html",
- "text":"Location Details",
- "chevron": "true"
- },
- "googleMap":{
- "map": {
- "center": {
- "lat": 42.366565,
- "lng": -71.058940
- },
- "zoom": 16
+ "items": [{
+ "image": {
+ "src":"/assets/images/placeholder/statehouse.png",
+ "alt": "placeholder image",
+ "width": "400",
+ "height": "225",
+ "href": "#"
},
- "markers": [{
- "position": {
- "lat": 42.366565,
- "lng": -71.058940
- },
- "label": "A",
- "infoWindow": {
- "name": "Department of Conservation and Recreation",
- "phone": "16176261250",
- "fax": "16176261351",
- "email": "mass.parks@state.ma.us",
- "address": "251 Causeway Street, Suite 900\nBoston, MA 02114-2104"
- }
- },{
- "position": {
- "lat": 42.358795,
- "lng": -71.063858
- },
- "label": "B",
- "infoWindow": {
- "name": "Department of Recreation and Fun",
- "phone": "16176261250",
- "fax": "",
- "email": "mass.parks@state.ma.us",
- "address": "24 Beacon St\nBoston, MA 02133"
- }
- }]
+ "eyebrow": "Press Release",
+ "title" : {
+ "href":"#",
+ "text":"Massachusetts Health Officials Release Quarterly Report on Opioid OD Deaths",
+ "info": "",
+ "property": ""
+ },
+ "date": "4/4/2017",
+ "org": "Health & Human Services, Public Safety",
+ "description": {
+ "rteElements": [{
+ "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."
+ }
+ }
+ }]
+ }
+ },{
+ "image": {
+ "src":"/assets/images/placeholder/400x225.png",
+ "alt": "placeholder image",
+ "width": "400",
+ "height": "225",
+ "href": "#"
+ },
+ "eyebrow": "News Article",
+ "title" : {
+ "href":"#",
+ "text":"Tree House Brweing Co. Expands Its Horizons",
+ "info": "",
+ "property": ""
+ },
+ "date": "4/3/2017",
+ "org": "Mass Development",
+ "description": {
+ "rteElements": [{
+ "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."
+ }
+ }
+ }]
+ }
+ }],
+ "secondaryItems": [{
+ "image": {
+ "src":"/assets/images/placeholder/400x225.png",
+ "alt": "placeholder image",
+ "width": "400",
+ "height": "225",
+ "href": "#"
+ },
+ "eyebrow": "Press Release",
+ "title" : {
+ "href":"#",
+ "text":"Massachusetts Health Officials Release Quarterly Report on Opioid OD Deaths",
+ "info": "",
+ "property": ""
+ },
+ "date": "4/4/2017",
+ "org": "Health & Human Services, Public Safety",
+ "description": {
+ "rteElements": [{
+ "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."
+ }
+ }
+ }]
+ }
+ },{
+ "image": {
+ "src":"/assets/images/placeholder/400x225.png",
+ "alt": "placeholder image",
+ "width": "400",
+ "height": "225",
+ "href": "#"
+ },
+ "eyebrow": "News Article",
+ "title" : {
+ "href":"#",
+ "text":"Tree House Brewing Co. Expands Its Horizons",
+ "info": "",
+ "property": ""
+ },
+ "date": "4/3/2017",
+ "org": "Mass Development",
+ "description": {
+ "rteElements": [{
+ "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."
+ }
+ }
+ }]
+ }
+ },{
+ "image": {
+ "src":"/assets/images/placeholder/400x225.png",
+ "alt": "placeholder image",
+ "width": "400",
+ "height": "225",
+ "href": "#"
+ },
+ "eyebrow": "Press Statement",
+ "title" : {
+ "href":"#",
+ "text":"Governor Baker Statement on Supreme Court Marriage Equality Decision",
+ "info": "",
+ "property": ""
+ },
+ "date": "4/3/2017",
+ "org": "Office of the Governor",
+ "description": {
+ "rteElements": [{
+ "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."
+ }
+ }
+ }]
+ }
+ },{
+ "image": {
+ "src":"/assets/images/placeholder/400x225.png",
+ "alt": "placeholder image",
+ "width": "400",
+ "height": "225",
+ "href": "#"
+ },
+ "eyebrow": "Press Release",
+ "title" : {
+ "href":"#",
+ "text":"Massachusetts Health Officials Release Quarterly Report on Opioid OD Deaths",
+ "info": "",
+ "property": ""
+ },
+ "date": "4/4/2017",
+ "org": "Health & Human Services, Public Safety",
+ "description": {
+ "rteElements": [{
+ "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."
+ }
+ }
+ }]
+ }
+ },{
+ "image": {
+ "src":"/assets/images/placeholder/400x225.png",
+ "alt": "placeholder image",
+ "width": "400",
+ "height": "225",
+ "href": "#"
+ },
+ "eyebrow": "News Article",
+ "title" : {
+ "href":"#",
+ "text":"Tree House Brweing Co. Expands Its Horizons",
+ "info": "",
+ "property": ""
+ },
+ "date": "4/3/2017",
+ "org": "Mass Development",
+ "description": {
+ "rteElements": [{
+ "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."
+ }
+ }
+ }]
+ }
+ },{
+ "image": {
+ "src":"/assets/images/placeholder/400x225.png",
+ "alt": "placeholder image",
+ "width": "400",
+ "height": "225",
+ "href": "#"
+ },
+ "eyebrow": "Press Statement",
+ "title" : {
+ "href":"#",
+ "text":"Governor Baker Statement on Supreme Court Marriage Equality Decision",
+ "info": "",
+ "property": ""
+ },
+ "date": "4/3/2017",
+ "org": "Office of the Governor",
+ "description": {
+ "rteElements": [{
+ "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."
+ }
+ }
+ }]
+ }
+ }],
+ "more":{
+ "href": "#",
+ "text": "See all news and announcements",
+ "chevron": true,
+ "label": "See all news and announcements for the Executive Office of Health and Human Services"
}
}
}
@@ -344,6 +527,115 @@
}]
}
}
+ },{
+ "path": "@organisms/by-author/event-listing.twig",
+ "data": {
+ "eventListing": {
+ "grid": true,
+ "compHeading":{
+ "title": "Upcoming Events",
+ "sub": "",
+ "color": "",
+ "id": "",
+ "centered": ""
+ },
+ "events":[{
+ "title": {
+ "href": "#",
+ "text": "Winter Birding Event",
+ "info": "",
+ "property": ""
+ },
+ "location": "Lanesborough, MA",
+ "date": {
+ "summary": "March 30, 2017",
+ "startMonth": "Mar",
+ "startDay": "30",
+ "endMonth": "",
+ "endDay": ""
+ },
+ "time": "12 p.m. - 2 p.m.",
+ "description": "Event description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam tempora itaque fuga quasi vero sint, sapiente soluta sit molestias architecto deleniti sunt eum incidunt laboriosam quos repudiandae nesciunt eligendi? Aliquid."
+ },{
+ "title": {
+ "href": "#",
+ "text": "First Day Hike",
+ "info": "",
+ "property": ""
+ },
+ "location": "Lanesborough, MA",
+ "date": {
+ "summary": "March 30, 2017 - April 10, 2017",
+ "startMonth": "Mar",
+ "startDay": "30",
+ "endMonth": "Apr",
+ "endDay": "10"
+ },
+ "time": "12 p.m. - 2 p.m.",
+ "description": ""
+ }],
+ "more":{
+ "href": "#",
+ "text": "See all events",
+ "chevron": true,
+ "label": "See all events for Executive Office of Health and Human Services"
+ }
+ }
+ }
+ },{
+ "path": "@organisms/by-author/mapped-locations.twig",
+ "data": {
+ "mappedLocations": {
+ "compHeading": {
+ "title": "Locations",
+ "sub": "",
+ "color": "",
+ "id": "",
+ "centered": ""
+ },
+ "link": {
+ "href": "/patterns/05-pages-Map-listing-human-services/05-pages-Map-listing-human-services.html",
+ "text":"Location Details",
+ "chevron": "true"
+ },
+ "googleMap":{
+ "map": {
+ "center": {
+ "lat": 42.366565,
+ "lng": -71.058940
+ },
+ "zoom": 16
+ },
+ "markers": [{
+ "position": {
+ "lat": 42.366565,
+ "lng": -71.058940
+ },
+ "label": "A",
+ "infoWindow": {
+ "name": "Department of Conservation and Recreation",
+ "phone": "16176261250",
+ "fax": "16176261351",
+ "email": "mass.parks@state.ma.us",
+ "address": "251 Causeway Street, Suite 900\nBoston, MA 02114-2104"
+ }
+ },{
+ "position": {
+ "lat": 42.358795,
+ "lng": -71.063858
+ },
+ "label": "B",
+ "infoWindow": {
+ "name": "Department of Recreation and Fun",
+ "phone": "16176261250",
+ "fax": "",
+ "email": "mass.parks@state.ma.us",
+ "address": "24 Beacon St\nBoston, MA 02133"
+ }
+ }]
+ }
+ }
+ }
},{
"path": "@organisms/by-author/link-list.twig",
"data": {
diff --git a/styleguide/source/_patterns/05-pages/G2G/G2G-ORG-Health-Services.twig b/styleguide/source/_patterns/05-pages/G2G/G2G-ORG-Health-Services.twig
index 67b04a1a93..7d7fd8e712 100644
--- a/styleguide/source/_patterns/05-pages/G2G/G2G-ORG-Health-Services.twig
+++ b/styleguide/source/_patterns/05-pages/G2G/G2G-ORG-Health-Services.twig
@@ -7,11 +7,7 @@
{% include "@organisms/by-template/page-banner.twig" %}
{% include "@organisms/by-template/page-header.twig" %}
{% endblock %}
-{% block stackedRowContent %}
- {% for stackedRowSection in stackedRowSections %}
- {% include "@organisms/by-author/stacked-row-section.twig" %}
- {% endfor %}
-{% endblock %}
+
{% block postContent %}{% endblock %}
diff --git a/styleguide/source/_patterns/05-pages/G2G/G2G-Service-Unemployment-Benefits.json b/styleguide/source/_patterns/05-pages/G2G/G2G-Service-Unemployment-Benefits.json
index 0cc22114ba..43de4b99bd 100644
--- a/styleguide/source/_patterns/05-pages/G2G/G2G-Service-Unemployment-Benefits.json
+++ b/styleguide/source/_patterns/05-pages/G2G/G2G-Service-Unemployment-Benefits.json
@@ -1,18 +1,4 @@
{
- "breadcrumbs":{
- "light": "",
- "links": [{
- "text": "Working",
- "href": ""
- },{
- "text": "Unemployment",
- "href": ""
- },{
- "text": "Unemployment Benefits",
- "href": ""
- }]
- },
-
"pageBanner": {
"bgWide": "../../assets/images/placeholder/1600x400.png",
"bgNarrow": "../../assets/images/placeholder/800x400.png",
@@ -28,8 +14,8 @@
"video": {
"src": "https://www.youtube.com/embed/dEkUq-Rs-Tc",
"label": "Using a gas grill safely",
- "height": "853",
- "width": "480",
+ "height": "480",
+ "width": "853",
"position": "right",
"link": {
"href": "/patterns/05-pages-GEN-Building-Energy-Codes/05-pages-GEN-Building-Energy-Codes.html",
@@ -39,25 +25,23 @@
}
},
- "teaserText": {
- "richText": {
- "property": "",
- "rteElements": [{
- "path": "@atoms/11-text/paragraph.twig",
- "data": {
- "paragraph" : {
- "text": "Need some help staying on your feet while you look for a new job? If you’re out of work and able to work, you may be eligible for temporary income called unemployment insurance (UI). If you qualify, you receive weekly payments to help cover your living expenses. The amount is based on what you were paid in the last year. Donec lacinia vulputate magna. Vivamus suscipit lectus at quam. In lectus est, viverra a, ultricies ut, pulvinar vitae, tellus. Donec et lectus et sem rutrum sodales. Morbi cursus. Aliquam a odio. Sed tortor velit, convallis eget, porta interdum, convallis sed, tortor. Phasellus ac libero a lorem auctor mattis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
- }
+ "intro": {
+ "property": "",
+ "rteElements": [{
+ "path": "@atoms/11-text/paragraph.twig",
+ "data": {
+ "paragraph" : {
+ "text": "Need some help staying on your feet while you look for a new job? If you’re out of work and able to work, you may be eligible for temporary income called unemployment insurance (UI). If you qualify, you receive weekly payments to help cover your living expenses. The amount is based on what you were paid in the last year. Donec lacinia vulputate magna. Vivamus suscipit lectus at quam. In lectus est, viverra a, ultricies ut, pulvinar vitae, tellus. Donec et lectus et sem rutrum sodales. Morbi cursus. Aliquam a odio. Sed tortor velit, convallis eget, porta interdum, convallis sed, tortor. Phasellus ac libero a lorem auctor mattis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
}
- }]
- },
-
- "decorativeLink": {
- "href": "#",
- "text": "Learn More",
- "info": "Learn More about unemployment Benefits",
- "property": ""
- }
+ }
+ },{
+ "path": "@atoms/11-text/paragraph.twig",
+ "data": {
+ "paragraph" : {
+ "text": "
Learn more"
+ }
+ }
+ }]
},
"keyActions": {
@@ -78,7 +62,7 @@
"label": ":"
}]
}
- },
+ },
"introSidebar": {
"logo": {
@@ -89,10 +73,14 @@
},
"social": {
- "sidebarHeading": {
- "title": "Social"
- },
"iconLinks": {
+ "compHeading": {
+ "title": "Social",
+ "sub": true,
+ "color": "",
+ "id": "",
+ "centered": ""
+ },
"items": [{
"icon": "@atoms/05-icons/svg-twitter.twig",
"link": {
@@ -137,7 +125,7 @@
"bgNarrow":"",
"title": "What Would You Like to Do?",
"featuredHeading":"Featured:",
- "generalHeading":"All tasks:",
+ "generalHeading":"All How-Tos:",
"hideFilter": true,
"seeAll": null,
@@ -257,6 +245,58 @@
}
},
+ "eventListing": {
+ "grid": true,
+ "compHeading":{
+ "title": "Upcoming Events",
+ "sub": "",
+ "color": "",
+ "id": "",
+ "centered": ""
+ },
+ "events":[{
+ "title": {
+ "href": "#",
+ "text": "Winter Birding Event",
+ "info": "",
+ "property": ""
+ },
+ "location": "Lanesborough, MA",
+ "date": {
+ "summary": "March 30, 2017",
+ "startMonth": "Mar",
+ "startDay": "30",
+ "endMonth": "",
+ "endDay": ""
+ },
+ "time": "12 p.m. - 2 p.m.",
+ "description": "Event description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam tempora itaque fuga quasi vero sint, sapiente soluta sit molestias architecto deleniti sunt eum incidunt laboriosam quos repudiandae nesciunt eligendi? Aliquid."
+ },{
+ "title": {
+ "href": "#",
+ "text": "First Day Hike",
+ "info": "",
+ "property": ""
+ },
+ "location": "Lanesborough, MA",
+ "date": {
+ "summary": "March 30, 2017 - April 10, 2017",
+ "startMonth": "Mar",
+ "startDay": "30",
+ "endMonth": "Apr",
+ "endDay": "10"
+ },
+ "time": "12 p.m. - 2 p.m.",
+ "description": ""
+ }],
+ "more":{
+ "href": "#",
+ "text": "See all events",
+ "chevron": true,
+ "label": "See all events for Executive Office of Health and Human Services"
+ }
+ },
+
"splitColumns": {
"columns": [{
"items": [{
@@ -321,6 +361,3 @@
}]
}
}
-
-
-
diff --git a/styleguide/source/_patterns/05-pages/Homepage.json b/styleguide/source/_patterns/05-pages/Homepage.json
index ec6584288b..6fbc8e680c 100644
--- a/styleguide/source/_patterns/05-pages/Homepage.json
+++ b/styleguide/source/_patterns/05-pages/Homepage.json
@@ -1,68 +1,78 @@
{
"hideHeaderSearch": true,
- "schemaPageType": "Home",
+ "searchBanner": {
+ "bgWide": "../../assets/images/placeholder/1600x800.png",
+ "bgNarrow": "../../assets/images/placeholder/800x800.png",
+ "id": "GUID935283478A",
+ "searchBannerForm": {
+ "action": "",
+ "buttonText": "Search",
+ "inputText": {
+ "labelText": "Search terms",
+ "required": false,
+ "id": "GUID138490237",
+ "name": "search",
+ "type": "text",
+ "placeholder": "Search..."
+ }
+ },
+ "pageIntro": {
+ "pageTitle": {
+ "text": "Welcome to Massachusetts"
+ },
+ "subTitle": "What would you like to do?"
+ },
+ "linkList": {
+ "compHeading": {
+ "title": "Popular Searches",
+ "level": "",
+ "color": "yellow",
+ "centered": "true"
+ },
+ "description": null,
+ "stacked": false,
+ "hideBullets": true,
+ "links" : [{
+ "href": "#",
+ "text":"Apply for Unemployment",
+ "chevron": "true"
+ },{
+ "href": "#",
+ "text":"Register my Vehicle",
+ "chevron": "true"
+ },{
+ "href": "#",
+ "text":"Find My Local Polling Station",
+ "chevron": "true"
+ },{
+ "href": "#",
+ "text":"Search for Unclaimed Property",
+ "chevron": "true"
+ },{
+ "href": "#",
+ "text":"Learn about Fishing and Hunting",
+ "chevron": "true"
+ }]
+ },
+ "bannerCredit": {
+ "imageName": "MIT Media Lab",
+ "imageAuthor": "Sir Mix Alot"
+ }
+ },
"stackedRowSections": [{
- "title":"",
- "id":"",
+ "title": "",
+ "id": "",
"pageContent": [{
- "path": "@organisms/by-author/search-banner.twig",
+ "path": "@base/placeholder.twig",
"data": {
- "searchBanner": {
- "bgWide": "../../assets/images/placeholder/1600x800.png",
- "bgNarrow": "../../assets/images/placeholder/800x800.png",
- "imageName": "MIT Media Lab",
- "imageAuthor": "Sir Mix Alot",
- "title": "Welcome to Massachusetts",
- "intro": "What would you like to do?",
- "form": {
- "path": "@molecules/search-banner-form.twig",
- "content": {
- "action": "",
- "buttonText": "Search",
- "inputText": {
- "labelText": "Search terms",
- "required": false,
- "id": "GUID138490237",
- "name": "search",
- "type": "text",
- "placeholder": "Search..."
- }
- }
- },
- "helpfulLinks": {
- "columns": "true",
- "compHeading": {
- "title": "Popular Searches",
- "sub": "true",
- "color": "yellow",
- "centered": true
- },
- "items": [{
- "href": "#",
- "text":"Apply for Unemployment",
- "chevron": "true"
- },{
- "href": "#",
- "text":"Register my Vehicle",
- "chevron": "true"
- },{
- "href": "#",
- "text":"Find My Local Polling Station",
- "chevron": "true"
- },{
- "href": "#",
- "text":"Search for Unclaimed Property",
- "chevron": "true"
- },{
- "href": "#",
- "text":"Learn about Fishing and Hunting",
- "chevron": "true"
- }]
- }
+ "placeholder": {
+ "text":"Page content"
}
}
- }]
+ }],
+
+ "sideBar": null
}]
}
diff --git a/styleguide/source/_patterns/05-pages/Homepage.md b/styleguide/source/_patterns/05-pages/Homepage.md
new file mode 100644
index 0000000000..3d2e2116dd
--- /dev/null
+++ b/styleguide/source/_patterns/05-pages/Homepage.md
@@ -0,0 +1,15 @@
+### Description
+This is an example page of a typical home page with a large serach input and quick links.
+
+### Status
+* Stable as of 5.0.0
+
+### Pattern Contains
+* Header
+* Footer
+* Stacked Row (template)
+* Stacked Row Section
+* Search Banner
+
+### Variables
+See Patterns above
diff --git a/styleguide/source/_patterns/05-pages/Homepage.twig b/styleguide/source/_patterns/05-pages/Homepage.twig
index 088198f226..9756a3c83a 100644
--- a/styleguide/source/_patterns/05-pages/Homepage.twig
+++ b/styleguide/source/_patterns/05-pages/Homepage.twig
@@ -1,12 +1,16 @@
{% extends '@templates/stacked-row-template.twig' %}
+{% block header %}
+ {% include "@organisms/by-template/emergency-alerts.twig" %}
+ {% include "@organisms/by-template/header.twig" %}
+{% endblock %}
+
{% block preContent %}
+ {% include "@organisms/by-author/search-banner.twig" %}
{% endblock %}
-{% block stackedRowContent %}
- {% include "@organisms/by-template/jump-links.twig" %}
- {% for stackedRowSection in stackedRowSections %}
- {% include "@organisms/by-author/stacked-row-section.twig" %}
- {% endfor %}
+
+{% block postContent %}{% endblock %}
+
+{% block footer %}
+ {% include "@organisms/by-template/footer.twig" %}
{% endblock %}
-{% block postContent %}
-{% endblock %}
\ No newline at end of file
diff --git a/styleguide/source/_patterns/05-pages/board-decision.md b/styleguide/source/_patterns/05-pages/board-decision.md
new file mode 100644
index 0000000000..a15f1911d4
--- /dev/null
+++ b/styleguide/source/_patterns/05-pages/board-decision.md
@@ -0,0 +1,18 @@
+### Description
+Example of an Board Decision Page for Mass Gov [extending](https://twig.symfony.com/doc/2.x/tags/extends.html) the Policy Advisory template
+
+### Status
+* Stable as of 5.0.0
+
+### Pattern Contains
+* Header
+* Footer
+* Policy Advisory (template)
+
+### JavaScript Used
+* Contact List (js/modules/accordions.js)
+* Footnote List (js/modules/footnote.js)
+* Jump Links (js/modules/scrollAnchors.js)
+
+### Variables
+See Patterns above
diff --git a/styleguide/source/_patterns/05-pages/detail-for-service-howto-location.json b/styleguide/source/_patterns/05-pages/detail-for-service-howto-location.json
index ae37ebac17..29f19501df 100644
--- a/styleguide/source/_patterns/05-pages/detail-for-service-howto-location.json
+++ b/styleguide/source/_patterns/05-pages/detail-for-service-howto-location.json
@@ -1,29 +1,6 @@
{
"urlPath": "/?p=pages-ACTION-get-a-state-park-pass",
- "breadcrumbs":{
- "light": "true",
- "links": [{
- "text": "Your Government",
- "href": ""
- },{
- "text": "State Agencies",
- "href": ""
- },{
- "text": "Energy and Environment Affairs",
- "href": ""
- },{
- "text": "Key Resources & Info",
- "href": ""
- },{
- "text": "Policies & Regulations",
- "href": ""
- },{
- "text": "Building Energy Codes",
- "href": "#"
- }]
- },
-
"pageHeader": {
"divider": false,
"title": "Building Energy Codes",
diff --git a/styleguide/source/_patterns/05-pages/detail-for-service-howto-location.md b/styleguide/source/_patterns/05-pages/detail-for-service-howto-location.md
new file mode 100644
index 0000000000..d997771406
--- /dev/null
+++ b/styleguide/source/_patterns/05-pages/detail-for-service-howto-location.md
@@ -0,0 +1,46 @@
+### Description
+This is an example of a Detail page for the Service, HowTo, and Location content type pages.
+
+### Status
+* Stable as of 5.0.0
+
+### Pattern Contains
+* Header
+* Footer
+* Two Column (template)
+* Rich Text
+* Mapped Locations
+* Video
+* Form Downloads
+* Link Lists
+
+### JavaScript Used
+* This pattern uses JavaScript for the accordions (js/modules/accordions.js)
+
+### Variables
+~~~
+pageHeader: {
+ type: pageHeader / required
+},
+
+sections: [{
+ richText: {
+ type: richText / required
+ },
+ video: {
+ type: video / optional
+ },
+ mappedLocations: {
+ type: mappedLocations / optional
+ },
+ formDownloads: {
+ type: formDownloads / optional
+ }
+}],
+
+sidebar: {
+ linkList : {
+ type: linkList / optional
+ }
+}
+~~~
diff --git a/styleguide/source/_patterns/05-pages/event-listing.json b/styleguide/source/_patterns/05-pages/event-listing.json
index a3bf15e201..f88724da10 100644
--- a/styleguide/source/_patterns/05-pages/event-listing.json
+++ b/styleguide/source/_patterns/05-pages/event-listing.json
@@ -49,7 +49,13 @@
}
},
- "submitButton": "Submit"
+ "buttons": [{
+ "text": "Submit",
+ "type": "submit",
+ "size": "small",
+ "theme": "",
+ "outline": false
+ }]
},
"resultsHeading": {
diff --git a/styleguide/source/_patterns/05-pages/event-listing.md b/styleguide/source/_patterns/05-pages/event-listing.md
new file mode 100644
index 0000000000..ba92a60a65
--- /dev/null
+++ b/styleguide/source/_patterns/05-pages/event-listing.md
@@ -0,0 +1,43 @@
+### Description
+This is a filter page used to search for events.
+
+### Status
+* Stable as of 5.0.0
+
+### Pattern Contains
+* Single Column (template)
+* Page Header
+* Event Filters
+* Results Heading
+* Event Listing
+* Pagination
+
+
+### JavaScript Used
+* Not built yet
+
+
+### Variables
+~~~
+pageHeader: {
+ type: pageHeader / required
+},
+
+mainContent: {
+ eventFilters: {
+ type: eventFilters / required
+ },
+
+ resultsHeading: {
+ type: resultsHeading / required
+ },
+
+ eventListing: {
+ type: eventListing / required
+ },
+
+ pagination: {
+ type: pagination / required
+ }
+}
+~~~
diff --git a/styleguide/source/_patterns/05-pages/event.md b/styleguide/source/_patterns/05-pages/event.md
index fb129a30b7..deee90b6e8 100644
--- a/styleguide/source/_patterns/05-pages/event.md
+++ b/styleguide/source/_patterns/05-pages/event.md
@@ -7,7 +7,7 @@ Example of an Event Page for Mass Gov
### Pattern Contains
* Header
* Footer
-* Event Template
+* Event (template)
### JavaScript Used
* This pattern uses JavaScript for the accordions (js/modules/accordions.js)
diff --git a/styleguide/source/_patterns/05-pages/event.twig b/styleguide/source/_patterns/05-pages/event.twig
index 9a16d905ef..127b993361 100644
--- a/styleguide/source/_patterns/05-pages/event.twig
+++ b/styleguide/source/_patterns/05-pages/event.twig
@@ -4,6 +4,8 @@
{% include "@organisms/by-template/header.twig" %}
{% endblock %}
+{% block sidebar %}{% endblock %}
+
{% block footer %}
{% include "@organisms/by-template/footer.twig" %}
{% endblock %}
diff --git a/styleguide/source/_patterns/05-pages/executive-order.md b/styleguide/source/_patterns/05-pages/executive-order.md
new file mode 100644
index 0000000000..2b4a87fa5a
--- /dev/null
+++ b/styleguide/source/_patterns/05-pages/executive-order.md
@@ -0,0 +1,24 @@
+### Description
+Example of an Executive Order page for Mass.gov
+
+### Status
+* Stable as of 5.0.0
+
+### Pattern Contains
+* Header
+* Footer
+* Two Column (template)
+* Page Header
+* Listing Table
+* Contact List
+* Personal Message
+* Rich Text
+* Form Downloads
+* Press Listing
+* Event Listing
+
+### JavaScript Used
+* This pattern uses JavaScript for the accordions (js/modules/accordions.js)
+
+### Variables
+See Patterns above
diff --git a/styleguide/source/_patterns/05-pages/form-page-example.json b/styleguide/source/_patterns/05-pages/form-page-example.json
index c46e9ed74c..ba5d0c417b 100644
--- a/styleguide/source/_patterns/05-pages/form-page-example.json
+++ b/styleguide/source/_patterns/05-pages/form-page-example.json
@@ -14,7 +14,8 @@
"rteTitle": {
"text": "You will need:",
"href": "",
- "info": ""
+ "info": "",
+ "level": 2
},
"richText": {
@@ -40,7 +41,8 @@
"title": {
"text": "Payment accepted:",
"href": "",
- "info": ""
+ "info": "",
+ "level": 2
},
"locationIcons": {
diff --git a/styleguide/source/_patterns/05-pages/form-page-example.md b/styleguide/source/_patterns/05-pages/form-page-example.md
new file mode 100644
index 0000000000..65aca08253
--- /dev/null
+++ b/styleguide/source/_patterns/05-pages/form-page-example.md
@@ -0,0 +1,21 @@
+### Description
+Example of an Board Decision Page for Mass Gov [extending](https://twig.symfony.com/doc/2.x/tags/extends.html) the Form Page template
+
+### Status
+* Stable as of 5.0.0
+
+### Pattern Contains
+* Header
+* Footer
+* Form Page (template)
+
+### JavaScript Used
+* Form fields (js/modules/formInputs.js)
+ * General inputs and Textarea (js/modules/formInputs.js)
+ * Select Box (js/modules/dropdowns.js)
+ * Date input (js/modules/pickaday.js)
+* Basic Form Validation (js/modules/formValidation.js)
+
+
+### Variables
+See Patterns above
diff --git a/styleguide/source/_patterns/05-pages/guide-section-all-fields.json b/styleguide/source/_patterns/05-pages/guide-section-all-fields.json
index 405068a78c..4106d9aa56 100644
--- a/styleguide/source/_patterns/05-pages/guide-section-all-fields.json
+++ b/styleguide/source/_patterns/05-pages/guide-section-all-fields.json
@@ -79,7 +79,7 @@
}]
},
- "stackedRowSections": [{
+ "stackedRows": [{
"title": "Section with Everything",
"id": "another-section-name6",
"pageContent": [
@@ -87,6 +87,7 @@
"path": "@organisms/by-author/callout-time.twig",
"data": {
"calloutTime": {
+ "icon": "@atoms/05-icons/svg-wait-time.twig",
"text": "This usually takes approximately 4 weeks"
}
}
@@ -133,10 +134,8 @@
"path":"@organisms/by-author/callout-alert.twig",
"data":{
"calloutAlert": {
- "decorativeLink": {
- "href": "",
- "text": "Massachusetts requires you to license your dog"
- }
+ "href": "",
+ "text": "Massachusetts requires you to license your dog"
}
}
},
@@ -297,8 +296,12 @@
"text": "See All Guides"
},
"pages": [{
- "image": "../../assets/images/placeholder/130x160.png",
- "altTag": "Place Holder Image",
+ "image": {
+ "alt": "Place Holder Image",
+ "src": "../../assets/images/placeholder/130x160.png",
+ "height": "160",
+ "width": "130"
+ },
"link": {
"type": "",
"href": "#",
@@ -306,8 +309,12 @@
"label": "Guide:"
}
},{
- "image": "../../assets/images/placeholder/130x160.png",
- "altTag": "Place Holder Image",
+ "image": {
+ "alt": "Place Holder Image",
+ "src": "../../assets/images/placeholder/130x160.png",
+ "height": "160",
+ "width": "130"
+ },
"link": {
"type": "",
"href": "#",
@@ -315,8 +322,12 @@
"label": "Guide:"
}
},{
- "image": "../../assets/images/placeholder/130x160.png",
- "altTag": "Place Holder Image",
+ "image": {
+ "alt": "Place Holder Image",
+ "src": "../../assets/images/placeholder/130x160.png",
+ "height": "160",
+ "width": "130"
+ },
"link": {
"type": "",
"href": "#",
diff --git a/styleguide/source/_patterns/05-pages/guide-section-all-fields.twig b/styleguide/source/_patterns/05-pages/guide-section-all-fields.twig
index 44a57b388a..47c7cd6c70 100644
--- a/styleguide/source/_patterns/05-pages/guide-section-all-fields.twig
+++ b/styleguide/source/_patterns/05-pages/guide-section-all-fields.twig
@@ -3,12 +3,7 @@
{% block preContent %}
{% include "@organisms/by-template/illustrated-header.twig" %}
{% endblock %}
-{% block stackedRowContent %}
- {% include "@organisms/by-template/jump-links.twig" %}
- {% for stackedRowSection in stackedRowSections %}
- {% include "@organisms/by-author/stacked-row-section.twig" %}
- {% endfor %}
-{% endblock %}
+
{% block postContent %}
{% include "@organisms/by-author/suggested-pages.twig" %}
{% endblock %}
diff --git a/styleguide/source/_patterns/05-pages/guide.json b/styleguide/source/_patterns/05-pages/guide.json
index 4430665a77..8c203a6fd2 100644
--- a/styleguide/source/_patterns/05-pages/guide.json
+++ b/styleguide/source/_patterns/05-pages/guide.json
@@ -124,7 +124,7 @@
}]
},
- "stackedRowSections": [{
+ "stackedRows": [{
"title":"Buying or Renting a Home",
"id":"buying-or-renting-a-home",
"pageContent": [{
@@ -169,7 +169,8 @@
"contactList": {
"viewSpecific": false,
"sidebarHeading": {
- "title": "Key Agencies"
+ "title": "Key Agencies",
+ "level": 3
},
"contacts": [{
"accordion": false,
@@ -270,7 +271,8 @@
"contactList": {
"viewSpecific": false,
"sidebarHeading": {
- "title": "Key Agencies"
+ "title": "Key Agencies",
+ "level": 3
},
"contacts": [{
"accordion": false,
@@ -328,9 +330,9 @@
}
}
},{
- "path": "@atoms/04-headings/heading-4.twig",
+ "path": "@atoms/04-headings/heading-3.twig",
"data": {
- "heading4": {
+ "heading3": {
"text": "Choose a Reputable Mover"
}
}
@@ -346,9 +348,9 @@
}]
}
},{
- "path": "@atoms/04-headings/heading-4.twig",
+ "path": "@atoms/04-headings/heading-3.twig",
"data": {
- "heading4": {
+ "heading3": {
"text": "Observe Parking Restrictions"
}
}
@@ -372,7 +374,8 @@
"contactList": {
"viewSpecific": false,
"sidebarHeading": {
- "title": "Key Agencies"
+ "title": "Key Agencies",
+ "level": 3
},
"contacts": [{
"accordion": false,
@@ -488,10 +491,8 @@
"path":"@organisms/by-author/callout-alert.twig",
"data":{
"calloutAlert": {
- "decorativeLink": {
- "href": "",
- "text": "Massachusetts requires you to license your dog"
- }
+ "href": "",
+ "text": "Massachusetts requires you to license your dog"
}
}
}],
@@ -520,7 +521,7 @@
"keyActions": {
"compHeading": {
"title": "Key Actions",
- "sub":true
+ "level": 3
},
"links":[{
"text": "Related Action to important Page Name",
@@ -549,7 +550,8 @@
"contactList": {
"viewSpecific": false,
"sidebarHeading": {
- "title": "Key Agencies"
+ "title": "Key Agencies",
+ "level": 3
},
"contacts": [{
"accordion": false,
@@ -631,7 +633,8 @@
"contactList": {
"viewSpecific": false,
"sidebarHeading": {
- "title": "Key Agencies"
+ "title": "Key Agencies",
+ "level": 3
},
"contacts": [{
"accordion": false,
@@ -681,6 +684,7 @@
"path": "@organisms/by-author/callout-time.twig",
"data": {
"calloutTime": {
+ "icon": "@atoms/05-icons/svg-wait-time.twig",
"text": "This usually takes approximately 4 weeks"
}
}
@@ -734,7 +738,8 @@
"contactList": {
"viewSpecific": false,
"sidebarHeading": {
- "title": "Key Agencies"
+ "title": "Key Agencies",
+ "level": 3
},
"contacts": [{
"accordion": false,
@@ -873,7 +878,7 @@
"keyActions": {
"compHeading": {
"title": "Key Actions",
- "sub":true
+ "level": 3
},
"links":[{
"text": "Related Action to important Page Name",
@@ -898,8 +903,12 @@
"text": "See All Guides"
},
"pages": [{
- "image": "../../assets/images/placeholder/130x160.png",
- "altTag": "Place Holder Image",
+ "image": {
+ "alt": "Place Holder Image",
+ "src": "../../assets/images/placeholder/130x160.png",
+ "height": "160",
+ "width": "130"
+ },
"link": {
"type": "",
"href": "#",
@@ -907,8 +916,12 @@
"label": "Guide:"
}
},{
- "image": "../../assets/images/placeholder/130x160.png",
- "altTag": "Place Holder Image",
+ "image": {
+ "alt": "Place Holder Image",
+ "src": "../../assets/images/placeholder/130x160.png",
+ "height": "160",
+ "width": "130"
+ },
"link": {
"type": "",
"href": "#",
@@ -916,8 +929,12 @@
"label": "Guide:"
}
},{
- "image": "../../assets/images/placeholder/130x160.png",
- "altTag": "Place Holder Image",
+ "image": {
+ "alt": "Place Holder Image",
+ "src": "../../assets/images/placeholder/130x160.png",
+ "height": "160",
+ "width": "130"
+ },
"link": {
"type": "",
"href": "#",
diff --git a/styleguide/source/_patterns/05-pages/guide.md b/styleguide/source/_patterns/05-pages/guide.md
index 5ebff2db00..6a2477b7e4 100644
--- a/styleguide/source/_patterns/05-pages/guide.md
+++ b/styleguide/source/_patterns/05-pages/guide.md
@@ -5,10 +5,10 @@ Example of a Mass Gov Guide page using the stacked row template
* Stable as of 5.0.0
### Pattern Contains
-* Stacked Row Template
+* Header
+* Footer
+* Stacked Row (template)
* Illustrated Header
-* Jump Links
-* Stacked Row Section
* Suggested Pages
### Variables
diff --git a/styleguide/source/_patterns/05-pages/guide.twig b/styleguide/source/_patterns/05-pages/guide.twig
index 7249d1e8b5..7368a24879 100644
--- a/styleguide/source/_patterns/05-pages/guide.twig
+++ b/styleguide/source/_patterns/05-pages/guide.twig
@@ -4,12 +4,7 @@
{% include "@organisms/by-template/content-eyebrow.twig" %}
{% include "@organisms/by-template/illustrated-header.twig" %}
{% endblock %}
-{% block stackedRowContent %}
- {% include "@organisms/by-template/jump-links.twig" %}
- {% for stackedRowSection in stackedRowSections %}
- {% include "@organisms/by-author/stacked-row-section.twig" %}
- {% endfor %}
-{% endblock %}
+
{% block postContent %}
{% include "@organisms/by-author/suggested-pages.twig" %}
{% endblock %}
diff --git a/styleguide/source/_patterns/05-pages/howto.json b/styleguide/source/_patterns/05-pages/howto.json
index 74ff5b44b5..2e8a589630 100755
--- a/styleguide/source/_patterns/05-pages/howto.json
+++ b/styleguide/source/_patterns/05-pages/howto.json
@@ -37,6 +37,7 @@
"path": "@organisms/by-author/callout-time.twig",
"data": {
"calloutTime": {
+ "icon": "@atoms/05-icons/svg-wait-time.twig",
"text": "Most applicants hear back within 4-6 weeks of applying"
}
}
@@ -95,7 +96,7 @@
"intro": {
"compHeading": {
"title": "What you need",
- "sub": true,
+ "level": 3,
"color": "",
"id": "what-you-need",
"centered": ""
@@ -162,7 +163,7 @@
"tabularData": {
"compHeading": {
"title": "Fees",
- "sub": true,
+ "level": 3,
"color": "",
"id": "fees",
"centered": ""
@@ -231,7 +232,7 @@
"stepsUnordered": {
"compHeading": {
"title": "How To Apply",
- "sub": true,
+ "level": 3,
"color": "",
"id": "how-to-apply",
"centered": ""
@@ -300,7 +301,7 @@
"stepsOrdered": {
"compHeading": {
"title": "Next Steps",
- "sub": true,
+ "level": 3,
"color": "",
"id": "next-steps",
"centered": ""
@@ -381,7 +382,7 @@
"moreInfo": {
"compHeading": {
"title": "More info",
- "sub": true,
+ "level": 3,
"color": "",
"id": "more-info",
"centered": ""
@@ -399,7 +400,7 @@
"formDownloads": {
"compHeading": {
"title": "Downloads",
- "sub": true,
+ "level": 3,
"color": "",
"id": "downloads",
"centered": ""
@@ -423,7 +424,7 @@
"contactList": {
"compHeading": {
"title": "Contact",
- "sub": true,
+ "level": 3,
"color": "",
"id": "contact",
"centered": ""
diff --git a/styleguide/source/_patterns/05-pages/howto.md b/styleguide/source/_patterns/05-pages/howto.md
index 08e8a64ccb..7218040097 100644
--- a/styleguide/source/_patterns/05-pages/howto.md
+++ b/styleguide/source/_patterns/05-pages/howto.md
@@ -7,7 +7,7 @@ This page [extends](https://twig.symfony.com/doc/2.x/tags/extends.html) the deta
### Pattern Contains
* Header
* Footer
-* Details Template
+* Details (template)
* Rich Text
* Tabular Data
* Steps Unordered
diff --git a/styleguide/source/_patterns/05-pages/location-general-content.json b/styleguide/source/_patterns/05-pages/location-general-content.json
index 4ed3d25ddc..d3e017977c 100644
--- a/styleguide/source/_patterns/05-pages/location-general-content.json
+++ b/styleguide/source/_patterns/05-pages/location-general-content.json
@@ -127,6 +127,10 @@
"href": "restrictions",
"text": "Restrictions",
"info": ""
+ },{
+ "href": "downloads",
+ "text": "Downloads",
+ "info": ""
},{
"href": "contacts",
"text": "Contacts",
@@ -140,7 +144,7 @@
"overview": {
"compHeading": {
"title": "Overview",
- "sub": true,
+ "level": 3,
"color": "",
"id": "overview",
"centered": ""
@@ -159,7 +163,7 @@
"hours": {
"compHeading": {
"title": "Hours",
- "sub": true,
+ "level": 3,
"color": "",
"id": "hours",
"centered": ""
@@ -228,7 +232,7 @@
"parking": {
"compHeading": {
"title": "Parking",
- "sub": true,
+ "level": 3,
"color": "",
"id": "parking",
"centered": ""
@@ -294,7 +298,7 @@
"imagePromos": {
"compHeading": {
"title": "Recommended Activities",
- "sub": true,
+ "level": 3,
"color": "",
"id": "recommended-activities",
"centered": ""
@@ -310,16 +314,14 @@
"href": "#"
},
"description": {
- "richText":{
- "rteElements": [{
- "path": "@atoms/11-text/paragraph.twig",
- "data": {
- "paragraph" : {
- "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu tellus sit amet turpis convallis finibus at id nulla."
- }
+ "rteElements": [{
+ "path": "@atoms/11-text/paragraph.twig",
+ "data": {
+ "paragraph" : {
+ "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu tellus sit amet turpis convallis finibus at id nulla."
}
- }]
- }
+ }
+ }]
},
"link": null
},{
@@ -333,16 +335,14 @@
"href": "#"
},
"description": {
- "richText":{
- "rteElements": [{
- "path": "@atoms/11-text/paragraph.twig",
- "data": {
- "paragraph" : {
- "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu tellus sit amet turpis convallis finibus at id nulla."
- }
+ "rteElements": [{
+ "path": "@atoms/11-text/paragraph.twig",
+ "data": {
+ "paragraph" : {
+ "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu tellus sit amet turpis convallis finibus at id nulla."
}
- }]
- }
+ }
+ }]
},
"link": null
},{
@@ -356,16 +356,14 @@
"href": "#"
},
"description": {
- "richText":{
- "rteElements": [{
- "path": "@atoms/11-text/paragraph.twig",
- "data": {
- "paragraph" : {
- "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu tellus sit amet turpis convallis finibus at id nulla."
- }
+ "rteElements": [{
+ "path": "@atoms/11-text/paragraph.twig",
+ "data": {
+ "paragraph" : {
+ "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu tellus sit amet turpis convallis finibus at id nulla."
}
- }]
- }
+ }
+ }]
},
"link": null
}]
@@ -374,7 +372,7 @@
"allActivities": {
"compHeading": {
"title": "All Activities",
- "sub": true,
+ "level": 3,
"color": "",
"id": "all-activities",
"centered": ""
@@ -411,7 +409,7 @@
"facilities": {
"compHeading": {
"title": "Facilities",
- "sub": true,
+ "level": 3,
"color": "",
"id": "facilities",
"centered": ""
@@ -438,7 +436,7 @@
"acessibility": {
"compHeading": {
"title": "Acessibility",
- "sub": true,
+ "level": 3,
"color": "",
"id": "acessibility",
"centered": ""
@@ -473,7 +471,7 @@
"restrictions": {
"compHeading": {
"title": "Restrictions",
- "sub": true,
+ "level": 3,
"color": "",
"id": "restrictions",
"centered": ""
@@ -505,11 +503,35 @@
}]
},
+ "formDownloads": {
+ "compHeading": {
+ "title": "Downloads",
+ "sub": true,
+ "color": "",
+ "id": "downloads",
+ "centered": ""
+ },
+ "downloadLinks": [{
+ "downloadLink": {
+ "iconSize": "",
+ "icon": "@atoms/05-icons/svg-doc-pdf.twig",
+ "decorativeLink": {
+ "text": "Southbridge RMV Map",
+ "href": "#",
+ "info": "",
+ "property": ""
+ },
+ "size": "1MB",
+ "format": "PDF"
+ }
+ }]
+ },
+
"contactList": {
"viewSpecific": false,
"compHeading":{
"title": "Contacts",
- "sub": "true",
+ "level": 3,
"color": "",
"id": "contacts",
"centered": ""
diff --git a/styleguide/source/_patterns/05-pages/location-general-content.md b/styleguide/source/_patterns/05-pages/location-general-content.md
index 8d288438c6..74f33f3378 100644
--- a/styleguide/source/_patterns/05-pages/location-general-content.md
+++ b/styleguide/source/_patterns/05-pages/location-general-content.md
@@ -7,7 +7,7 @@ This page [extends](https://twig.symfony.com/doc/2.x/tags/extends.html) the loca
### Pattern Contains
* Header
* Footer
-* Location Template
+* Location (template)
* Contact List
* Key Actions
* Rich Text
diff --git a/styleguide/source/_patterns/05-pages/location-general-content.twig b/styleguide/source/_patterns/05-pages/location-general-content.twig
index 47a9ceae6e..ecd947041a 100644
--- a/styleguide/source/_patterns/05-pages/location-general-content.twig
+++ b/styleguide/source/_patterns/05-pages/location-general-content.twig
@@ -23,6 +23,8 @@
{% include "@organisms/by-author/rich-text.twig" %}
{% set richText = mainContent.restrictions %}
{% include "@organisms/by-author/rich-text.twig" %}
+ {% set formDownloads = mainContent.formDownloads %}
+ {% include "@organisms/by-author/form-downloads.twig" %}
{% endblock %}
{% block sidebar %}
diff --git a/styleguide/source/_patterns/05-pages/location-listing.json b/styleguide/source/_patterns/05-pages/location-listing.json
index 35f505301d..ab55130e92 100644
--- a/styleguide/source/_patterns/05-pages/location-listing.json
+++ b/styleguide/source/_patterns/05-pages/location-listing.json
@@ -3,20 +3,6 @@
"COMMENT":"****PRECONTENT COMPONENTS****",
- "breadcrumbs":{
- "light": "true",
- "links": [{
- "text": "Your Government",
- "href": ""
- },{
- "text": "State Agencies",
- "href": ""
- },{
- "text": "Human Services",
- "href": "#"
- }]
- },
-
"pageHeader": {
"divider": false,
"title": "Executive Office of Health and Human Services Locations",
@@ -48,7 +34,7 @@
"COMMENT":"****PAGE CONTENT COMPONENTS****",
- "stackedRowSections": [{
+ "stackedRows": [{
"title":"",
"id":"",
"pageContent": [{
@@ -292,17 +278,14 @@
"href": "#"
},
"description": {
- "property": "",
- "richText": {
- "rteElements": [{
- "path": "@atoms/11-text/paragraph.twig",
- "data": {
- "paragraph" : {
- "text": "The Attleboro District Court is accessible by the Providence/Stoughton line of the MBTA. The courthouse is also accessible by via the Greater Attleboro Taunton Regional Transit Authority (GATRA)."
- }
+ "rteElements": [{
+ "path": "@atoms/11-text/paragraph.twig",
+ "data": {
+ "paragraph" : {
+ "text": "The Attleboro District Court is accessible by the Providence/Stoughton line of the MBTA. The courthouse is also accessible by via the Greater Attleboro Taunton Regional Transit Authority (GATRA)."
}
- }]
- }
+ }
+ }]
},
"link": {
"text": "Directions",
@@ -333,17 +316,14 @@
"href": "#"
},
"description": {
- "property": "",
- "richText": {
- "rteElements": [{
- "path": "@atoms/11-text/paragraph.twig",
- "data": {
- "paragraph" : {
- "text": "The Barnstable District Court is accessible by the Barnstable Villager line of the Cape Cod Regional Transit Authority."
- }
+ "rteElements": [{
+ "path": "@atoms/11-text/paragraph.twig",
+ "data": {
+ "paragraph" : {
+ "text": "The Barnstable District Court is accessible by the Barnstable Villager line of the Cape Cod Regional Transit Authority."
}
- }]
- }
+ }
+ }]
},
"link": {
"text": "Directions",
@@ -374,17 +354,14 @@
"href": "#"
},
"description": {
- "property": "",
- "richText": {
- "rteElements": [{
- "path": "@atoms/11-text/paragraph.twig",
- "data": {
- "paragraph" : {
- "text": "For public transportation information to the courthouse, visit the
Berkshire Regional Transit Authority website or call 800-292-2782."
- }
+ "rteElements": [{
+ "path": "@atoms/11-text/paragraph.twig",
+ "data": {
+ "paragraph" : {
+ "text": "For public transportation information to the courthouse, visit the
Berkshire Regional Transit Authority website or call 800-292-2782."
}
- }]
- }
+ }
+ }]
},
"link": {
"text": "Directions",
@@ -415,17 +392,14 @@
"href": "#"
},
"description": {
- "property": "",
- "richText": {
- "rteElements": [{
- "path": "@atoms/11-text/paragraph.twig",
- "data": {
- "paragraph" : {
- "text": "The Brookline District Court is accessible by the Riverside D- Green Line of the MBTA. The closest stop to the courthouse is the Brookline Village Stop. The courthouse is also accessible by the following bus lines: Bus 60 (Chestnut Hill-Kenmore Station), Bus 65 (Brighton Center-Kenmore via Washington Street) and Bus 66 (Harvard Square-Dudley Station via Allston)."
- }
+ "rteElements": [{
+ "path": "@atoms/11-text/paragraph.twig",
+ "data": {
+ "paragraph" : {
+ "text": "The Brookline District Court is accessible by the Riverside D- Green Line of the MBTA. The closest stop to the courthouse is the Brookline Village Stop. The courthouse is also accessible by the following bus lines: Bus 60 (Chestnut Hill-Kenmore Station), Bus 65 (Brighton Center-Kenmore via Washington Street) and Bus 66 (Harvard Square-Dudley Station via Allston)."
}
- }]
- }
+ }
+ }]
},
"link": {
"text": "Directions",
@@ -460,17 +434,14 @@
"href": "#"
},
"description": {
- "property": "",
- "richText": {
- "rteElements": [{
- "path": "@atoms/11-text/paragraph.twig",
- "data": {
- "paragraph" : {
- "text": "The Cambridge District Court is accessible by the Orange Line of the MBTA. The closest stop to the courthouse is the Wellington Station Stop. The courthouse is also accessible by the following bus lines: Bus 90, Bus 97, Bus 99, Bus 100, Bus 106, Bus 108, Bus 110, Bus 112 and Bus 134."
- }
+ "rteElements": [{
+ "path": "@atoms/11-text/paragraph.twig",
+ "data": {
+ "paragraph" : {
+ "text": "The Cambridge District Court is accessible by the Orange Line of the MBTA. The closest stop to the courthouse is the Wellington Station Stop. The courthouse is also accessible by the following bus lines: Bus 90, Bus 97, Bus 99, Bus 100, Bus 106, Bus 108, Bus 110, Bus 112 and Bus 134."
}
- }]
- }
+ }
+ }]
},
"link": {
"text": "Directions",
@@ -501,17 +472,14 @@
"href": "#"
},
"description": {
- "property": "",
- "richText": {
- "rteElements": [{
- "path": "@atoms/11-text/paragraph.twig",
- "data": {
- "paragraph" : {
- "text": "The Concord District Court is accessible by the Fitchburg/South Acton line of the MBTA. The closes stop to the courthouse is the Concord Stop which is about 1.2 miles from the courthouse."
- }
+ "rteElements": [{
+ "path": "@atoms/11-text/paragraph.twig",
+ "data": {
+ "paragraph" : {
+ "text": "The Concord District Court is accessible by the Fitchburg/South Acton line of the MBTA. The closes stop to the courthouse is the Concord Stop which is about 1.2 miles from the courthouse."
}
- }]
- }
+ }
+ }]
},
"link": {
"text": "Directions",
@@ -542,17 +510,14 @@
"href": "#"
},
"description": {
- "property": "",
- "richText": {
- "rteElements": [{
- "path": "@atoms/11-text/paragraph.twig",
- "data": {
- "paragraph" : {
- "text": "The Edgartown District Court is accessible by the following routes on the Vineyard Transit Authority: Route 1, Route 6, Route 8 and Route 13."
- }
+ "rteElements": [{
+ "path": "@atoms/11-text/paragraph.twig",
+ "data": {
+ "paragraph" : {
+ "text": "The Edgartown District Court is accessible by the following routes on the Vineyard Transit Authority: Route 1, Route 6, Route 8 and Route 13."
}
- }]
- }
+ }
+ }]
},
"link": {
"text": "Directions",
@@ -583,17 +548,14 @@
"href": "#"
},
"description": {
- "property": "",
- "richText": {
- "rteElements": [{
- "path": "@atoms/11-text/paragraph.twig",
- "data": {
- "paragraph" : {
- "text": "The Lowell District Court is also accessible by the Lowell line of the MBTA. The closest stop to the courthouse is Lowell Station which is approximately 1/2 of a mile from the courthouse."
- }
+ "rteElements": [{
+ "path": "@atoms/11-text/paragraph.twig",
+ "data": {
+ "paragraph" : {
+ "text": "The Lowell District Court is also accessible by the Lowell line of the MBTA. The closest stop to the courthouse is Lowell Station which is approximately 1/2 of a mile from the courthouse."
}
- }]
- }
+ }
+ }]
},
"link": {
"text": "Directions",
@@ -624,17 +586,14 @@
"href": "#"
},
"description": {
- "property": "",
- "richText": {
- "rteElements": [{
- "path": "@atoms/11-text/paragraph.twig",
- "data": {
- "paragraph" : {
- "text": "There is no public transportation available to the Marlborough District Court."
- }
+ "rteElements": [{
+ "path": "@atoms/11-text/paragraph.twig",
+ "data": {
+ "paragraph" : {
+ "text": "There is no public transportation available to the Marlborough District Court."
}
- }]
- }
+ }
+ }]
},
"link": {
"text": "Directions",
@@ -665,17 +624,14 @@
"href": "#"
},
"description": {
- "property": "",
- "richText": {
- "rteElements": [{
- "path": "@atoms/11-text/paragraph.twig",
- "data": {
- "paragraph" : {
- "text": "The Salem District Court is accessible by the Newburyport/Rockport line of the MBTA. The closest stop to the courthouse is Salem Station. The courthouse is also accessible by the following MBTA busses: Express Bus 450, Bus 451, Express Bus 455, Bus 456, Express Bus 459 and Bus 465."
- }
+ "rteElements": [{
+ "path": "@atoms/11-text/paragraph.twig",
+ "data": {
+ "paragraph" : {
+ "text": "The Salem District Court is accessible by the Newburyport/Rockport line of the MBTA. The closest stop to the courthouse is Salem Station. The courthouse is also accessible by the following MBTA busses: Express Bus 450, Bus 451, Express Bus 455, Bus 456, Express Bus 459 and Bus 465."
}
- }]
- }
+ }
+ }]
},
"link": {
"text": "Directions",
@@ -706,17 +662,14 @@
"href": "#"
},
"description": {
- "property": "",
- "richText": {
- "rteElements": [{
- "path": "@atoms/11-text/paragraph.twig",
- "data": {
- "paragraph" : {
- "text": "For public transportation information to the courthouse, visit the
MBTA website or call 800-392-6100."
- }
+ "rteElements": [{
+ "path": "@atoms/11-text/paragraph.twig",
+ "data": {
+ "paragraph" : {
+ "text": "For public transportation information to the courthouse, visit the
MBTA website or call 800-392-6100."
}
- }]
- }
+ }
+ }]
},
"link": {
"text": "Directions",
@@ -747,17 +700,14 @@
"href": "#"
},
"description": {
- "property": "",
- "richText": {
- "rteElements": [{
- "path": "@atoms/11-text/paragraph.twig",
- "data": {
- "paragraph" : {
- "text": "The Taunton District Court is accessible by the Bloom Bus Line."
- }
+ "rteElements": [{
+ "path": "@atoms/11-text/paragraph.twig",
+ "data": {
+ "paragraph" : {
+ "text": "The Taunton District Court is accessible by the Bloom Bus Line."
}
- }]
- }
+ }
+ }]
},
"link": {
"text": "Directions",
diff --git a/styleguide/source/_patterns/05-pages/location-listing.md b/styleguide/source/_patterns/05-pages/location-listing.md
new file mode 100644
index 0000000000..b259d194bb
--- /dev/null
+++ b/styleguide/source/_patterns/05-pages/location-listing.md
@@ -0,0 +1,27 @@
+### Description
+This is a filter page used to search for locations.
+
+### Status
+* Stable as of 5.0.0
+
+### Pattern Contains
+* Header
+* Footer
+* Stacked Row (template)
+* Page Header
+* Location Listing
+
+### JavaScript Used
+* The interface is control by the Location Listing module (js/modules/locationListing.js)
+
+
+### Variables
+~~~
+"pageHeader": {
+ type: pageHeader / required
+},
+
+"stackedRowSections": [{
+ type: array of stackedRowSections
+}]
+~~~
diff --git a/styleguide/source/_patterns/05-pages/location-listing.twig b/styleguide/source/_patterns/05-pages/location-listing.twig
index d4f657406f..d351e19ec7 100644
--- a/styleguide/source/_patterns/05-pages/location-listing.twig
+++ b/styleguide/source/_patterns/05-pages/location-listing.twig
@@ -3,11 +3,5 @@
{% block preContent %}
{% include "@organisms/by-template/page-header.twig" %}
{% endblock %}
-{% block stackedRowContent %}
- {% for stackedRowSection in stackedRowSections %}
- {% include "@organisms/by-author/stacked-row-section.twig" %}
- {% endfor %}
-{% endblock %}
-{% block postContent %}
-{% endblock %}
+{% block postContent %}{% endblock %}
diff --git a/styleguide/source/_patterns/05-pages/location-park-content.json b/styleguide/source/_patterns/05-pages/location-park-content.json
index 7afa4c1009..9684753b0f 100644
--- a/styleguide/source/_patterns/05-pages/location-park-content.json
+++ b/styleguide/source/_patterns/05-pages/location-park-content.json
@@ -194,7 +194,7 @@
"overview": {
"compHeading": {
"title": "Overview",
- "sub": true,
+ "level": 3,
"color": "",
"id": "overview",
"centered": ""
@@ -213,7 +213,7 @@
"hours": {
"compHeading": {
"title": "Hours",
- "sub": true,
+ "level": 3,
"color": "",
"id": "hours",
"centered": ""
@@ -282,7 +282,7 @@
"parking": {
"compHeading": {
"title": "Parking",
- "sub": true,
+ "level": 3,
"color": "",
"id": "parking",
"centered": ""
@@ -348,7 +348,7 @@
"imagePromos": {
"compHeading": {
"title": "Recommended Activities",
- "sub": true,
+ "level": 3,
"color": "",
"id": "recommended-activities",
"centered": ""
@@ -364,16 +364,14 @@
"href": "#"
},
"description": {
- "richText":{
- "rteElements": [{
- "path": "@atoms/11-text/paragraph.twig",
- "data": {
- "paragraph" : {
- "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu tellus sit amet turpis convallis finibus at id nulla."
- }
+ "rteElements": [{
+ "path": "@atoms/11-text/paragraph.twig",
+ "data": {
+ "paragraph" : {
+ "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu tellus sit amet turpis convallis finibus at id nulla."
}
- }]
- }
+ }
+ }]
},
"link": null
},{
@@ -387,16 +385,14 @@
"href": "#"
},
"description": {
- "richText":{
- "rteElements": [{
- "path": "@atoms/11-text/paragraph.twig",
- "data": {
- "paragraph" : {
- "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu tellus sit amet turpis convallis finibus at id nulla."
- }
+ "rteElements": [{
+ "path": "@atoms/11-text/paragraph.twig",
+ "data": {
+ "paragraph" : {
+ "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu tellus sit amet turpis convallis finibus at id nulla."
}
- }]
- }
+ }
+ }]
},
"link": null
},{
@@ -410,16 +406,14 @@
"href": "#"
},
"description": {
- "richText":{
- "rteElements": [{
- "path": "@atoms/11-text/paragraph.twig",
- "data": {
- "paragraph" : {
- "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu tellus sit amet turpis convallis finibus at id nulla."
- }
+ "rteElements": [{
+ "path": "@atoms/11-text/paragraph.twig",
+ "data": {
+ "paragraph" : {
+ "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu tellus sit amet turpis convallis finibus at id nulla."
}
- }]
- }
+ }
+ }]
},
"link": null
}]
@@ -428,7 +422,7 @@
"allActivities": {
"compHeading": {
"title": "All Activities",
- "sub": true,
+ "level": 3,
"color": "",
"id": "all-activities",
"centered": ""
@@ -465,7 +459,7 @@
"facilities": {
"compHeading": {
"title": "Facilities",
- "sub": true,
+ "level": 3,
"color": "",
"id": "facilities",
"centered": ""
@@ -492,7 +486,7 @@
"acessibility": {
"compHeading": {
"title": "Acessibility",
- "sub": true,
+ "level": 3,
"color": "",
"id": "acessibility",
"centered": ""
@@ -527,7 +521,7 @@
"restrictions": {
"compHeading": {
"title": "Restrictions",
- "sub": true,
+ "level": 3,
"color": "",
"id": "restrictions",
"centered": ""
@@ -563,7 +557,7 @@
"viewSpecific": false,
"compHeading":{
"title": "Contacts",
- "sub": "true",
+ "level": 3,
"color": "",
"id": "contacts",
"centered": ""
@@ -720,32 +714,48 @@
"text": "Do Something"
},
"pages": [{
- "image": "../../assets/images/placeholder/230x130.png",
- "altTag": "Place Holder Image",
+ "image": {
+ "alt": "Place Holder Image",
+ "src": "../../assets/images/placeholder/230x130.png",
+ "height": "130",
+ "width": "230"
+ },
"link": {
"type": "",
"href": "#",
"text": "Nearby State Parks"
}
},{
- "image": "../../assets/images/placeholder/230x130.png",
- "altTag": "Place Holder Image",
+ "image": {
+ "alt": "Place Holder Image",
+ "src": "../../assets/images/placeholder/230x130.png",
+ "height": "130",
+ "width": "230"
+ },
"link": {
"type": "",
"href": "#",
"text": "Similar State Park"
}
},{
- "image": "../../assets/images/placeholder/230x130.png",
- "altTag": "Place Holder Image",
+ "image": {
+ "alt": "Place Holder Image",
+ "src": "../../assets/images/placeholder/230x130.png",
+ "height": "130",
+ "width": "230"
+ },
"link": {
"type": "",
"href": "#",
"text": "Great Sight Seeing"
}
},{
- "image": "../../assets/images/placeholder/230x130.png",
- "altTag": "Place Holder Image",
+ "image": {
+ "alt": "Place Holder Image",
+ "src": "../../assets/images/placeholder/230x130.png",
+ "height": "130",
+ "width": "230"
+ },
"link": {
"type": "",
"href": "#",
diff --git a/styleguide/source/_patterns/05-pages/location-park-content.md b/styleguide/source/_patterns/05-pages/location-park-content.md
index f4e1ede5d0..a22b9617a5 100644
--- a/styleguide/source/_patterns/05-pages/location-park-content.md
+++ b/styleguide/source/_patterns/05-pages/location-park-content.md
@@ -7,7 +7,7 @@ This page [extends](https://twig.symfony.com/doc/2.x/tags/extends.html) the loca
### Pattern Contains
* Header
* Footer
-* Location Template
+* Location (template)
* Location Icons
* Contact List
* Key Actions
diff --git a/styleguide/source/_patterns/05-pages/organization.json b/styleguide/source/_patterns/05-pages/organization.json
index 101f72193c..52dd7ab65d 100644
--- a/styleguide/source/_patterns/05-pages/organization.json
+++ b/styleguide/source/_patterns/05-pages/organization.json
@@ -2,13 +2,6 @@
"urlPath": "/?p=pages-ORG-Health-Services",
"COMMENT":"****PRECONTENT COMPONENTS****",
- "breadcrumbs":{
- "light": "",
- "links": [{
- "text": "Health and Human Services (EOHHS)",
- "href": "#"
- }]
- },
"pageBanner": {
"bgWide":"../../assets/images/placeholder/1600x400.png",
@@ -78,7 +71,7 @@
"COMMENT":"****PAGE CONTENT COMPONENTS****",
- "stackedRowSections": [{
+ "stackedRows": [{
"title":"",
"id":"",
"pageContent": [{
@@ -112,16 +105,16 @@
}],
"sideBar": [{
- "path": "@atoms/04-headings/sidebar-heading.twig",
- "data": {
- "sidebarHeading": {
- "title": "Social"
- }
- }
- },{
"path": "@molecules/icon-links.twig",
"data": {
"iconLinks": {
+ "compHeading": {
+ "title": "Social",
+ "sub": true,
+ "color": "",
+ "id": "",
+ "centered": ""
+ },
"items": [{
"icon": "@atoms/05-icons/svg-twitter.twig",
"link": {
diff --git a/styleguide/source/_patterns/05-pages/organization.md b/styleguide/source/_patterns/05-pages/organization.md
index 77913cd540..b3cbc0eb61 100644
--- a/styleguide/source/_patterns/05-pages/organization.md
+++ b/styleguide/source/_patterns/05-pages/organization.md
@@ -1,121 +1,35 @@
----
-title: Org Landing Page
----
-Description: a page pattern representing those patterns which could be used on an org landing page content type
-
-## State: alpha
-
-## Can Contain
-- [@organisms/by-template/page-banner](/?p=organisms-page-banner)
-- [@organisms/by-template/action-header](/?p=organisms-action-header)
-- [@organisms/by-author/stack-row-section](/?p=organisms-stack-row-section)
- - Stack Row:
- - Page Content:
- - [@organisms/by-author/rich-text](/?p=organisms-rich-text)
- - Sidebar Content:
- - [@atoms/headings/sidebar-heading](/?p=atoms-sidebar-heading)
- - [@molecules/icon-links](/?p=molecules-icon-links)
- - Stack Row:
- - Page Content:
- - [@organisms/by-author/action-finder](/?p=organisms-action-finder)
- - [@organisms/by-author/mapped-locations](/?p=organisms-mapped-locations)
- - [@organisms/by-author/sections-three-up](/?p=organisms-sections-three-up)
- - [@organisms/by-author/link-list](/?p=organisms-link-list)
-- [@meta/schema/government-organization](/?p=meta-government-organization)
-
-## Structured Data
-
-### Schema.org property / Mayflower Schema variables map
+### Description
+This is an example of an Organization page for Mass.gov using a stacked row template
+
+### Status
+* Stable as of 5.0.0
+
+### Pattern Contains
+* Header
+* Footer
+* Stacked Row (template)
+* Page Header - location
+* Page Banner - large
+* Rich Text
+* Icon Links
+* Action Finder
+* Mapped Locations
+* Section Three Up
+* Link List
+
+
+### Variables
+See Patterns above
~~~
-{
- "@context": "http://schema.org/",
- "@id": "{{ governmentOrganization.url }}/#governmentOrganization",
- "@type": "governmentOrganization",
- "name": "{{ governmentOrganization.name }}",
- "memberOf": {
- "@id": "{{ governmentOrganization.memberOf.id }}"
- },
- "alternateName": "{{ governmentOrganization.alternateName }}",
- "disambiguatingDescription": "{{ governmentOrganization.disambiguatingDescription }}",
- "description": "{{ governmentOrganization.description }}",
- "logo": "{{ governmentOrganization.logo }}",
- "url": "{{ governmentOrganization.url }}",
- "address": "{{ governmentOrganization.contactInfo.address }}",
- "telephone": "{{ governmentOrganization.contactInfo.telephone }}",
- "faxNumber": "{{ governmentOrganization.contactInfo.faxNumber }}",
- "email": "{{ governmentOrganization.contactInfo.email }}",
- "sameAs": [
- "governmentOrganization.sameAs[INDEX]"
- ]
-}
-~~~
-
-### Schema.org property / Mayflower organisms variable map
-~~~
-Schema.org property name = Mayflower (.json) variable
+pageBanner: {
+ type: pageBanner / required
+},
-schema.governmentOrganization.name = pageBanner.title
-schema.governmentOrganization.memberOf.id = {{urlDomain}} + "/#organization"
-schema.governmentOrganization.alternateName = pageBanner.titleSubText
-schema.governmentOrganization.disambiguatingDescription = actionHeader.pageHeader.subTitle
-schema.governmentOrganization.description = stackedRowSections[0].pageContent[0].data.rteElements[1].data.paragraph.text
-schema.governmentOrganization.logo = actionHeader.widgets[0].data.image.src
-schema.governmentOrganization.url = {{ urlDomain }}{{ urlPath }}
-schema.governmentOrganization.contactInfo.address = actionHeader.contactUs.groups[FIRST_INDEX]items[FIRST_INDEX].value where .type = "address"
-schema.governmentOrganization.contactInfo.telephone = "+" + actionHeader.contactUs.groups[FIRST_INDEX]items[FIRST_INDEX].link WHERE .type = "phone"
-schema.governmentOrganization.contactInfo.faxNumber = "+" + actionHeader.contactUs.groups[FIRST_INDEX]items[FIRST_INDEX].link WHERE .type = "fax"
-schema.governmentOrganization.contactInfo.email = "+" + actionHeader.contactUs.groups[FIRST_INDEX]items[FIRST_INDEX].link WHERE .type = "online" && is email address?
-schema.governmentOrganization.sameAs = [
- stackedRowSections[0].sideBar[1].data.iconLinks.items[INDEX].link.href
-]
-~~~
+pageHeader: {
+ type: pageHeader / required
+},
-### Rendered json+ld data object
+stackedRowSections: [{
+ type: array of stackedRowSections / required
+}]
~~~
-
-~~~
-
-## Resources
-- [schema.org](https://schema.org/)
- - [schema: Government Organization](https://schema.org/GovernmentOrganization)
- - [schema: Government Office](https://schema.org/GovernmentOffice)
- - [schema: Government Service](https://schema.org/GovernmentService)
- - [schema: Service Channel](https://schema.org/ServiceChannel)
- - [schema: Offer Catalog](https://schema.org/OfferCatalog)
-- [(google) structured data testing tool](https://search.google.com/structured-data/testing-tool)
-- [structured data linting tool](http://linter.structured-data.org/)
-- [structured data playground](http://json-ld.org/playground/index.html)
-- [org page schema.org playground](http://tinyurl.com/gn72pa4)
-- [Some context for civic service vocabulary being added to schema.org](https://www.w3.org/wiki/images/0/03/Services_for_schema.org_%28DRAFT_2013-06-27%29.pdf)
-
-## Future iterations
-Once we've added contacts, locations to the Org Page then we can add address and contact point information.
-
-Once we've got a better idea of how to represent topics, subtopics, services and have created content types for these as well as how-tos and guides, then we can add offer catalogs to represent those.
-
-Once we've determined if / how to show a relationship between organizations then we can add information about that here as well.
-
\ No newline at end of file
diff --git a/styleguide/source/_patterns/05-pages/organization.twig b/styleguide/source/_patterns/05-pages/organization.twig
index 2852e507d4..3d0c0f0f04 100644
--- a/styleguide/source/_patterns/05-pages/organization.twig
+++ b/styleguide/source/_patterns/05-pages/organization.twig
@@ -4,11 +4,6 @@
{% include "@organisms/by-template/page-banner.twig" %}
{% include "@organisms/by-template/page-header.twig" %}
{% endblock %}
-{% block stackedRowContent %}
- {% for stackedRowSection in stackedRowSections %}
- {% include "@organisms/by-author/stacked-row-section.twig" %}
- {% endfor %}
-{% endblock %}
{% block postContent %}{% endblock %}
diff --git a/styleguide/source/_patterns/05-pages/policy-advisory-directive.md b/styleguide/source/_patterns/05-pages/policy-advisory-directive.md
new file mode 100644
index 0000000000..94dd2fa2bd
--- /dev/null
+++ b/styleguide/source/_patterns/05-pages/policy-advisory-directive.md
@@ -0,0 +1,18 @@
+### Description
+Example of an Directive Page for Mass Gov [extending](https://twig.symfony.com/doc/2.x/tags/extends.html) the Policy Advisory template
+
+### Status
+* Stable as of 5.0.0
+
+### Pattern Contains
+* Header
+* Footer
+* Policy Advisory (template)
+
+### JavaScript Used
+* Contact List (js/modules/accordions.js)
+* Footnote List (js/modules/footnote.js)
+* Jump Links (js/modules/scrollAnchors.js)
+
+### Variables
+See Patterns above
diff --git a/styleguide/source/_patterns/05-pages/press-listing.md b/styleguide/source/_patterns/05-pages/press-listing.md
new file mode 100644
index 0000000000..171aa445cc
--- /dev/null
+++ b/styleguide/source/_patterns/05-pages/press-listing.md
@@ -0,0 +1,23 @@
+### Description
+This is an example of a Press Listing page [extending](https://twig.symfony.com/doc/2.x/tags/extends.html) the Two Column Reversed template
+
+### Status
+* Stable as of 5.0.0
+
+### Pattern Contains
+* Header
+* Footer
+* Two Column Reversed (template)
+* Page Header
+* Press Filters
+* Results Heading
+* Press Listing (organism)
+* Pagination
+
+### JavaScript Used
+* Page level is still to be determined
+* Select Boxes (js/modules/dropdown.js)
+* Date Range (js/modules/pickaday.js)
+
+### Variables
+See Patterns above
diff --git a/styleguide/source/_patterns/05-pages/press-release-with-image.md b/styleguide/source/_patterns/05-pages/press-release-with-image.md
new file mode 100644
index 0000000000..2fb8bbcb3c
--- /dev/null
+++ b/styleguide/source/_patterns/05-pages/press-release-with-image.md
@@ -0,0 +1,5 @@
+### Description
+This is a variant of the [Press Release](./?p=pages-press-release) Page showing an example with an optional Image.
+
+### How to generate
+* Populate the 'pageContent.figure' variable
diff --git a/styleguide/source/_patterns/05-pages/press-release-with-video.md b/styleguide/source/_patterns/05-pages/press-release-with-video.md
new file mode 100644
index 0000000000..e441b68188
--- /dev/null
+++ b/styleguide/source/_patterns/05-pages/press-release-with-video.md
@@ -0,0 +1,5 @@
+### Description
+This is a variant of the [Press Release](./?p=pages-press-release) Page showing an example with an optional Video.
+
+### How to generate
+* Populate the 'pageContent.video' variable
diff --git a/styleguide/source/_patterns/05-pages/press-release.md b/styleguide/source/_patterns/05-pages/press-release.md
new file mode 100644
index 0000000000..5c50ced7c8
--- /dev/null
+++ b/styleguide/source/_patterns/05-pages/press-release.md
@@ -0,0 +1,19 @@
+### Description
+Displays a collection of components to help describe a Press Release on Mass Gov
+
+### Status
+* Stable as of 5.0.0
+
+### Pattern Contains
+* Header
+* Footer
+* Press (template)
+
+### Variant options
+* The press release can include an optional [image](./?p=pages-press-release-with-image) or [video](./?p=pages-press-release-with-video)
+
+### JavaScript Used
+* This pattern uses JavaScript for the accordions (js/modules/accordions.js)
+
+### Variables
+See Press Template
diff --git a/styleguide/source/_patterns/05-pages/regulation.md b/styleguide/source/_patterns/05-pages/regulation.md
new file mode 100644
index 0000000000..94dd2fa2bd
--- /dev/null
+++ b/styleguide/source/_patterns/05-pages/regulation.md
@@ -0,0 +1,18 @@
+### Description
+Example of an Directive Page for Mass Gov [extending](https://twig.symfony.com/doc/2.x/tags/extends.html) the Policy Advisory template
+
+### Status
+* Stable as of 5.0.0
+
+### Pattern Contains
+* Header
+* Footer
+* Policy Advisory (template)
+
+### JavaScript Used
+* Contact List (js/modules/accordions.js)
+* Footnote List (js/modules/footnote.js)
+* Jump Links (js/modules/scrollAnchors.js)
+
+### Variables
+See Patterns above
diff --git a/styleguide/source/_patterns/05-pages/section-landing.json b/styleguide/source/_patterns/05-pages/section-landing.json
index ce3ff00638..cebaf04c28 100644
--- a/styleguide/source/_patterns/05-pages/section-landing.json
+++ b/styleguide/source/_patterns/05-pages/section-landing.json
@@ -25,7 +25,7 @@
"id": "GUIDasjdhf1",
"catIcon": {
"icon":"@atoms/05-icons/svg-lg-fishing.twig",
- "small":"true"
+ "small": true
},
"title" : {
"href" : "#",
@@ -54,7 +54,7 @@
"id": "GUIDasjdhf2",
"catIcon": {
"icon":"@atoms/05-icons/svg-lg-picnic-table.twig",
- "small":"true"
+ "small": true
},
"title" : {
"href" : "#",
@@ -87,7 +87,7 @@
"id": "GUIDasjdhf3",
"catIcon": {
"icon":"@atoms/05-icons/svg-lg-map-location.twig",
- "small":"true"
+ "small": true
},
"title" : {
"href" : "#",
diff --git a/styleguide/source/_patterns/05-pages/section-landing.md b/styleguide/source/_patterns/05-pages/section-landing.md
new file mode 100644
index 0000000000..5578463b90
--- /dev/null
+++ b/styleguide/source/_patterns/05-pages/section-landing.md
@@ -0,0 +1,18 @@
+### Description
+This is an example of a Section Landing page on Mass.gov
+
+### Status
+* Stable as of 5.0.0
+
+### Pattern Contains
+* Header
+* Footer
+* Single Column (template)
+* Page Banner - columns
+* Sections Three Up
+
+### JavaScript Used
+* This pattern uses JavaScript for the accordions (js/modules/accordions.js)
+
+### Variables
+See Patterns above
diff --git a/styleguide/source/_patterns/05-pages/service.json b/styleguide/source/_patterns/05-pages/service.json
index a7518d2697..0b0326732c 100644
--- a/styleguide/source/_patterns/05-pages/service.json
+++ b/styleguide/source/_patterns/05-pages/service.json
@@ -83,10 +83,14 @@
},
"social": {
- "sidebarHeading": {
- "title": "Social"
- },
"iconLinks": {
+ "compHeading": {
+ "title": "Social",
+ "sub": true,
+ "color": "",
+ "id": "",
+ "centered": ""
+ },
"items": [{
"icon": "@atoms/05-icons/svg-twitter.twig",
"link": {
diff --git a/styleguide/source/_patterns/05-pages/service.md b/styleguide/source/_patterns/05-pages/service.md
index c30c610ac7..612cb34471 100644
--- a/styleguide/source/_patterns/05-pages/service.md
+++ b/styleguide/source/_patterns/05-pages/service.md
@@ -5,9 +5,9 @@ Example of a Services template to show how it could be used as an Unemployment B
* Stable as of 5.0.0
### Pattern Contains
-* Header Organism
-* Services Template
-* Footer Organism
+* Header
+* Footer
+* Services (template)
### Variables
See Services Template
diff --git a/styleguide/source/_patterns/05-pages/topic-your-government.md b/styleguide/source/_patterns/05-pages/topic-your-government.md
index 57cc2a3886..05791bec67 100644
--- a/styleguide/source/_patterns/05-pages/topic-your-government.md
+++ b/styleguide/source/_patterns/05-pages/topic-your-government.md
@@ -5,8 +5,10 @@ This is an example of a Topic page on Mass.gov for the Your Government section.
* Stable as of 5.0.0
### Pattern Contains
-* Single Column Template
-* Page Banner (columns)
+* Header
+* Footer
+* Single Column (template)
+* Page Banner - columns
* Sections Three Up
* Link List
diff --git a/styleguide/source/_patterns/05-pages/topic.md b/styleguide/source/_patterns/05-pages/topic.md
index 758ed8a0d9..c291f794f6 100644
--- a/styleguide/source/_patterns/05-pages/topic.md
+++ b/styleguide/source/_patterns/05-pages/topic.md
@@ -5,8 +5,8 @@ This is an example of a Topic page on Mass.gov.
* Stable as of 5.0.0
### Pattern Contains
-* Single Column Template
-* Page Banner (columns)
+* Single Column (template)
+* Page Banner - columns
* Sections Three Up
* Link List
diff --git a/styleguide/source/_patterns/05-pages/transition.md b/styleguide/source/_patterns/05-pages/transition.md
new file mode 100644
index 0000000000..8ea7ab332d
--- /dev/null
+++ b/styleguide/source/_patterns/05-pages/transition.md
@@ -0,0 +1,12 @@
+### Description
+This Page shows messaging and controls to allow a user to cancel a redirect away from the new mass.gov website.
+
+### Status
+* Stable as of 5.0.0
+
+### Pattern Contains
+* Narrow Template (template)
+* Transition Page
+
+### Variables
+See Patterns above
diff --git a/styleguide/source/_patterns/05-pages/video-transcript.md b/styleguide/source/_patterns/05-pages/video-transcript.md
new file mode 100644
index 0000000000..dc85b1edcd
--- /dev/null
+++ b/styleguide/source/_patterns/05-pages/video-transcript.md
@@ -0,0 +1,17 @@
+### Description
+This is an example of a Video Transcript page [extending](https://twig.symfony.com/doc/2.x/tags/extends.html) the Two Column template
+
+### Status
+* Stable as of 5.0.0
+
+### Pattern Contains
+* Header
+* Footer
+* Two Column Reversed (template)
+* Page Header
+* Back Button
+* Video
+* Rich Text
+
+### Variables
+See Patterns above
diff --git a/styleguide/source/_patterns/documentation-template.md b/styleguide/source/_patterns/documentation-template.md
index 9afb5a5933..46d6d1253c 100644
--- a/styleguide/source/_patterns/documentation-template.md
+++ b/styleguide/source/_patterns/documentation-template.md
@@ -25,4 +25,5 @@ contactList: {
contacts:[{
type: array of contactUs / required
}]
+}
~~~
diff --git a/styleguide/source/assets/js/index.js b/styleguide/source/assets/js/index.js
index 5c5c7c3b66..570469ed36 100644
--- a/styleguide/source/assets/js/index.js
+++ b/styleguide/source/assets/js/index.js
@@ -9,6 +9,7 @@ import footnote from "./modules/footnote.js";
import formValidation from "./modules/formValidation.js";
import hideAlert from "./modules/hideAlert.js";
import keywordSearch from "./modules/keywordSearch.js";
+import languageMenu from "./modules/languageMenu.js";
import locationFilters from "./modules/locationFilters.js";
import locationListing from "./modules/locationListing.js";
import mainNav from "./modules/mainNav.js";
diff --git a/styleguide/source/assets/js/modules/footnote.js b/styleguide/source/assets/js/modules/footnote.js
index ea7e8b087f..a85f29d0c3 100644
--- a/styleguide/source/assets/js/modules/footnote.js
+++ b/styleguide/source/assets/js/modules/footnote.js
@@ -6,9 +6,15 @@ export default function (window,document,$,undefined) {
let $el = $(this),
$link = $el.find(".js-footnote-link"),
$messageLink = $link.clone(),
- $rtelink = $($link.attr('href')),
+ $rtelink = null,
isMobile = checkMobile($el);
+ if ($link.attr('href') === "#") {
+ return;
+ } else {
+ $rtelink = $($link.attr('href'));
+ }
+
$messageLink.text('');
$el.find(".js-footnote-message p:last-child").append($messageLink);
diff --git a/styleguide/source/assets/js/modules/languageMenu.js b/styleguide/source/assets/js/modules/languageMenu.js
new file mode 100644
index 0000000000..8c5a472fd2
--- /dev/null
+++ b/styleguide/source/assets/js/modules/languageMenu.js
@@ -0,0 +1,29 @@
+export default function (window,document,$,undefined) {
+
+ if($('.js-language-menu').length) {
+
+ let script = document.createElement('script');
+ script.src = "//translate.google.com/translate_a/element.js?cb=languageMenuInit";
+ script.async = true;
+
+ let element = document.getElementsByTagName('head')[0];
+ element.appendChild(script);
+ }
+
+ window.languageMenuInit = function() {
+ const $el = $('.js-language-menu').first();
+ const id = "language-menu-0";
+ const languages = $el.data('languages');
+
+ $el.attr('id',id);
+
+ new google.translate.TranslateElement({
+ pageLanguage: 'en',
+ includedLanguages: languages,
+ layout: google.translate.TranslateElement.InlineLayout.SIMPLE
+ }, id);
+
+ $el.addClass('has-rendered');
+ };
+
+}(window,document,jQuery);
diff --git a/styleguide/source/assets/scss/01-atoms/_arrow-button.scss b/styleguide/source/assets/scss/01-atoms/_arrow-button.scss
index a8d56382a6..a9e4164ebb 100644
--- a/styleguide/source/assets/scss/01-atoms/_arrow-button.scss
+++ b/styleguide/source/assets/scss/01-atoms/_arrow-button.scss
@@ -2,6 +2,8 @@
@include ma-button;
@include ma-chevron;
display: inline-block;
+ min-height: 45px;
+ min-width: 30px;
padding: 8px 8px;
text-align: center;
transform: scale(-1, 1);
@@ -15,8 +17,16 @@
height: 15px;
margin: 0;
position: absolute;
- top: 45%;
- left: 35%;
+ top: 50%;
+ left: 45%;
+ transform: translate(-50%,-50%) rotate(-45deg);
+ transform-origin: 50% 50%;
width: 15px;
+
+ @media ($bp-small-max) {
+ border-width: 3px;
+ height: 9px;
+ width: 9px;
+ }
}
}
diff --git a/styleguide/source/assets/scss/01-atoms/_error-msg.scss b/styleguide/source/assets/scss/01-atoms/_error-msg.scss
new file mode 100644
index 0000000000..b31e83e4a7
--- /dev/null
+++ b/styleguide/source/assets/scss/01-atoms/_error-msg.scss
@@ -0,0 +1,11 @@
+// error message
+.ma__error-msg {
+ display: none;
+ font-size: 1.125rem;
+ line-height: 1.75rem;
+ margin-bottom: .5em;
+
+ &.has-error {
+ display: block;
+ }
+}
diff --git a/styleguide/source/assets/scss/01-atoms/_forms.scss b/styleguide/source/assets/scss/01-atoms/_forms.scss
index 63a9f29005..7d5eda2afd 100644
--- a/styleguide/source/assets/scss/01-atoms/_forms.scss
+++ b/styleguide/source/assets/scss/01-atoms/_forms.scss
@@ -1,5 +1,6 @@
input {
border: 2px solid;
+ max-width: 100%;
min-height: 40px;
padding: 0 18px;
@@ -26,89 +27,12 @@ input[type=number]::-webkit-outer-spin-button {
margin: 0; /* Removes leftover margin */
}
-.ma__input-number {
- display: inline-block;
- position: relative;
-
- input {
- padding-right: 58px;
- }
-
- &__plus,
- &__minus {
- @include ma-button-reset;
- border-style: solid;
- border-width: 2px;
- border-bottom: none;
- display: block;
- height: 50%;
- padding: 0;
- position: absolute;
- right: 0;
- width: 40px;
-
- &:focus {
- border-bottom-style: dotted;
- border-bottom-width: 1px;
- }
-
- &:after {
- border-style: solid;
- border-width: 5px;
- border-top: none;
- border-bottom-width: 6px;
- content: "";
- display: block;
- height: 0;
- margin: 0 auto;
- position: absolute;
- bottom: 2px;
- left: 50%;
- transform: translateX(-50%);
- vertical-align: bottom;
- width: 0;
- }
-
- &:focus:after {
- bottom: 1px;
- }
- }
-
- &__plus {
- bottom: 50%;
- }
-
- &__minus {
- top: 50%;
- transform: rotate(180deg);
- }
-}
-
textarea {
border: 2px solid;
min-height: 135px;
padding: 18px;
}
-.ma__textarea__wrapper {
- display: inline-block;
- position: relative;
-
- &:after {
- content: attr(data-char-left);
- display: block;
- font-size: 17px;
- line-height: 1.625rem;
- position: absolute;
- right: 0;
- top: 100%;
- }
-
- textarea {
- width: 100%;
- }
-}
-
legend,
label {
display: block;
@@ -122,126 +46,6 @@ fieldset {
padding: 0;
}
-// Special label handling
-.ma__legend,
-.ma__label {
-
- &--optional {
-
- &:after {
- content: "(optional)";
- font-size: .8em;
- margin-left: .25em;
- }
- }
-
- &--hidden {
- @include ma-visually-hidden;
-
- & + input {
- margin-top: inherit;
- }
- }
-}
-
-// Custom Radio Buttons
-.ma__input-radio {
- display: inline-block;
- position: relative;
-
- input {
- @include ma-visually-hidden;
- }
-
- label {
- font-size: 1.375rem;
- line-height: 1rem;
- padding-left: 1.5em;
-
- &:before {
- border: 2px solid;
- border-radius: 50%;
- content: "\2022";
- display: inline-block;
- height: .45em;
- font-size: 2.5em;
- line-height: calc(.45em - 11px);
- margin-right: .125em;
- position: absolute;
- top: -.025em;
- left: 0;
- text-align: center;
- width: .45em;
- overflow: hidden;
- }
-
- span {
- line-height: 1.2em;
- }
- }
-}
-
-// Custom Checkboxes
-.ma__input-checkbox {
- display: inline-block;
- position: relative;
-
- input {
- @include ma-visually-hidden;
- }
-
- label {
- font-size: 1.375rem;
- line-height: 1rem;
- padding-left: 1.25em;
-
- &:before {
- border: 2px solid;
- content: "";
- display: inline-block;
- height: 2em;
- font-size: .5em;
- line-height: 1.5;
- padding-top: .25em;
- position: absolute;
- top: 0.125em;
- left: 0;
- text-align: center;
- width: 2em;
- }
-
- span {
- line-height: 1.2em;
- }
- }
-
- input:checked ~ label {
-
- &:before {
- content: url("../images/checkmark.svg"); //"✔";
- }
- }
-}
-
-// Custom Date input
-.ma__input-date[type=text] {
- background-image: url("../images/svg-icons/date-picker.svg");
- background-position: right 8px top 7px;
- background-repeat: no-repeat;
-}
-
-// error message
-.ma__error-msg {
- display: none;
- font-size: 1.125rem;
- line-height: 1.75rem;
- margin-bottom: .5em;
-
- &.has-error {
- display: block;
- }
-}
-
// override if an input label combo is added directly to the page-content area
// This is mainly for Pattern Lab
.main-content .page-content > label:not(.ma__label--hidden) {
@@ -264,6 +68,3 @@ fieldset {
}
}
}
-
-
-
diff --git a/styleguide/source/assets/scss/01-atoms/_input-checkbox.scss b/styleguide/source/assets/scss/01-atoms/_input-checkbox.scss
new file mode 100644
index 0000000000..bc0aaba58f
--- /dev/null
+++ b/styleguide/source/assets/scss/01-atoms/_input-checkbox.scss
@@ -0,0 +1,54 @@
+// Custom Checkboxes
+.ma__input-checkbox {
+ display: inline-block;
+ position: relative;
+
+ input {
+ @include ma-visually-hidden;
+ }
+
+ & > svg {
+ height: 24px;
+ position: absolute;
+ top: 0;
+ right: 0;
+ vertical-align: top;
+ width: 24px;
+ }
+
+ label {
+ font-size: 1.375rem;
+ line-height: 1rem;
+ padding-left: 1.25em;
+
+ &:before {
+ border: 2px solid;
+ content: "";
+ display: inline-block;
+ height: 2em;
+ font-size: .5em;
+ line-height: 1.5;
+ padding-top: .25em;
+ position: absolute;
+ top: 0.125em;
+ left: 0;
+ text-align: center;
+ width: 2em;
+ }
+
+ span {
+ line-height: 1.2em;
+ }
+ }
+
+ input:checked ~ label {
+
+ &:before {
+ content: url("../images/checkmark.svg"); //"✔";
+ }
+ }
+
+ svg ~ label {
+ padding-right: 30px;
+ }
+}
diff --git a/styleguide/source/assets/scss/01-atoms/_input-date.scss b/styleguide/source/assets/scss/01-atoms/_input-date.scss
new file mode 100644
index 0000000000..3c00671810
--- /dev/null
+++ b/styleguide/source/assets/scss/01-atoms/_input-date.scss
@@ -0,0 +1,6 @@
+// Custom Date input
+.ma__input-date[type=text] {
+ background-image: url("../images/svg-icons/date-picker.svg");
+ background-position: right 8px top 7px;
+ background-repeat: no-repeat;
+}
diff --git a/styleguide/source/assets/scss/01-atoms/_input-number.scss b/styleguide/source/assets/scss/01-atoms/_input-number.scss
new file mode 100644
index 0000000000..ebb0cc7e3f
--- /dev/null
+++ b/styleguide/source/assets/scss/01-atoms/_input-number.scss
@@ -0,0 +1,57 @@
+.ma__input-number {
+ display: inline-block;
+ position: relative;
+
+ input {
+ padding-right: 58px;
+ }
+
+ &__plus,
+ &__minus {
+ @include ma-button-reset;
+ border-style: solid;
+ border-width: 2px;
+ border-bottom: none;
+ display: block;
+ height: 50%;
+ padding: 0;
+ position: absolute;
+ right: 0;
+ width: 40px;
+
+ &:focus {
+ border-bottom-style: dotted;
+ border-bottom-width: 1px;
+ }
+
+ &:after {
+ border-style: solid;
+ border-width: 5px;
+ border-top: none;
+ border-bottom-width: 6px;
+ content: "";
+ display: block;
+ height: 0;
+ margin: 0 auto;
+ position: absolute;
+ bottom: 2px;
+ left: 50%;
+ transform: translateX(-50%);
+ vertical-align: bottom;
+ width: 0;
+ }
+
+ &:focus:after {
+ bottom: 1px;
+ }
+ }
+
+ &__plus {
+ bottom: 50%;
+ }
+
+ &__minus {
+ top: 50%;
+ transform: rotate(180deg);
+ }
+}
diff --git a/styleguide/source/assets/scss/01-atoms/_input-radio.scss b/styleguide/source/assets/scss/01-atoms/_input-radio.scss
new file mode 100644
index 0000000000..93b2253ec7
--- /dev/null
+++ b/styleguide/source/assets/scss/01-atoms/_input-radio.scss
@@ -0,0 +1,36 @@
+// Custom Radio Buttons
+.ma__input-radio {
+ display: inline-block;
+ position: relative;
+
+ input {
+ @include ma-visually-hidden;
+ }
+
+ label {
+ font-size: 1.375rem;
+ line-height: 1rem;
+ padding-left: 1.5em;
+
+ &:before {
+ border: 2px solid;
+ border-radius: 50%;
+ content: "\2022";
+ display: inline-block;
+ height: .45em;
+ font-size: 2.5em;
+ line-height: calc(.45em - 11px);
+ margin-right: .125em;
+ position: absolute;
+ top: -.025em;
+ left: 0;
+ text-align: center;
+ width: .45em;
+ overflow: hidden;
+ }
+
+ span {
+ line-height: 1.2em;
+ }
+ }
+}
diff --git a/styleguide/source/assets/scss/01-atoms/_label.scss b/styleguide/source/assets/scss/01-atoms/_label.scss
new file mode 100644
index 0000000000..700c62015f
--- /dev/null
+++ b/styleguide/source/assets/scss/01-atoms/_label.scss
@@ -0,0 +1,21 @@
+// Special label handling
+.ma__legend,
+.ma__label {
+
+ &--optional {
+
+ &:after {
+ content: "(optional)";
+ font-size: .8em;
+ margin-left: .25em;
+ }
+ }
+
+ &--hidden {
+ @include ma-visually-hidden;
+
+ & + input {
+ margin-top: inherit;
+ }
+ }
+}
diff --git a/styleguide/source/assets/scss/01-atoms/_page-title.scss b/styleguide/source/assets/scss/01-atoms/_page-title.scss
new file mode 100644
index 0000000000..c7c2cec423
--- /dev/null
+++ b/styleguide/source/assets/scss/01-atoms/_page-title.scss
@@ -0,0 +1,7 @@
+.ma__page-title {
+ margin-bottom: .4em;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+}
diff --git a/styleguide/source/assets/scss/01-atoms/_textarea.scss b/styleguide/source/assets/scss/01-atoms/_textarea.scss
new file mode 100644
index 0000000000..5323a01d5e
--- /dev/null
+++ b/styleguide/source/assets/scss/01-atoms/_textarea.scss
@@ -0,0 +1,21 @@
+.ma__textarea {
+
+ &__wrapper {
+ display: inline-block;
+ position: relative;
+
+ &:after {
+ content: attr(data-char-left);
+ display: block;
+ font-size: 17px;
+ line-height: 1.625rem;
+ position: absolute;
+ right: 0;
+ top: 100%;
+ }
+
+ textarea {
+ width: 100%;
+ }
+ }
+}
diff --git a/styleguide/source/assets/scss/02-molecules/_action-step.scss b/styleguide/source/assets/scss/02-molecules/_action-step.scss
index 2316f73dd1..7dc6310597 100644
--- a/styleguide/source/assets/scss/02-molecules/_action-step.scss
+++ b/styleguide/source/assets/scss/02-molecules/_action-step.scss
@@ -78,6 +78,10 @@
}
&__downloads {
- margin-bottom: 1em;
+ margin-bottom: 1em; // for v5.6 and below
+ }
+
+ &__more {
+ margin-top: 1em;
}
}
diff --git a/styleguide/source/assets/scss/02-molecules/_arrow-nav.scss b/styleguide/source/assets/scss/02-molecules/_arrow-nav.scss
index 43146f0b6e..4d9f8341a3 100644
--- a/styleguide/source/assets/scss/02-molecules/_arrow-nav.scss
+++ b/styleguide/source/assets/scss/02-molecules/_arrow-nav.scss
@@ -34,15 +34,6 @@
@media ($bp-small-min) {
width: 50px;
}
-
- @media ($bp-small-max) {
-
- &:after {
- border-width: 3px;
- height: 9px;
- width: 9px;
- }
- }
}
&--right .ma__arrow-button {
@@ -71,12 +62,15 @@
}
}
}
-
+
&__link {
- @include ma-link-underline;
-
@media ($bp-small-max) {
@include ma-visually-hidden;
}
}
+
+ // backward compatible with v.5.6 - replaced with link Atom
+ a.ma__arrow-nav__link {
+ @include ma-link-underline;
+ }
}
diff --git a/styleguide/source/assets/scss/02-molecules/_back-button.scss b/styleguide/source/assets/scss/02-molecules/_back-button.scss
index 1df922dc6a..1532b2c092 100644
--- a/styleguide/source/assets/scss/02-molecules/_back-button.scss
+++ b/styleguide/source/assets/scss/02-molecules/_back-button.scss
@@ -6,7 +6,16 @@
@include ma-container();
}
- a {
+ .ma__button {
+ @include ma-chevron("left");
+
+ &:before {
+ margin-top: 0;
+ }
+ }
+
+ // backward compatible with v5.6 - replaced link with button atom
+ a:not(.ma__button) {
@include ma-button("small");
@include ma-chevron("left");
diff --git a/styleguide/source/assets/scss/02-molecules/_banner-credit.scss b/styleguide/source/assets/scss/02-molecules/_banner-credit.scss
new file mode 100644
index 0000000000..baa2897176
--- /dev/null
+++ b/styleguide/source/assets/scss/02-molecules/_banner-credit.scss
@@ -0,0 +1,30 @@
+.ma__banner-credit {
+ position: relative;
+
+ &__container {
+ padding: 8px 30px;
+ position: relative;
+ }
+
+ &__icon {
+ position: absolute;
+ top: 0;
+ left: 0;
+
+ & > svg {
+ height: 27px;
+ width: 20px;
+ }
+ }
+
+ &__image-name {
+ font-size: 1rem;
+ line-height: 1.125rem;
+ }
+
+ &__image-author {
+ font-size: 0.875rem;
+ line-height: 1.125rem;
+ }
+
+}
\ No newline at end of file
diff --git a/styleguide/source/assets/scss/02-molecules/_event-filters.scss b/styleguide/source/assets/scss/02-molecules/_event-filters.scss
index 569e9e2303..bae0e3fa7e 100644
--- a/styleguide/source/assets/scss/02-molecules/_event-filters.scss
+++ b/styleguide/source/assets/scss/02-molecules/_event-filters.scss
@@ -26,6 +26,7 @@
}
}
+ // backward compatible with v5.6
&__submit {
@include ma-button('small');
}
diff --git a/styleguide/source/assets/scss/02-molecules/_page-intro.scss b/styleguide/source/assets/scss/02-molecules/_page-intro.scss
new file mode 100644
index 0000000000..4ee88dd330
--- /dev/null
+++ b/styleguide/source/assets/scss/02-molecules/_page-intro.scss
@@ -0,0 +1,20 @@
+.ma__page-intro {
+
+ &__sub-title {
+ font-size: 1.813rem;
+ line-height: 1.2;
+ margin-bottom: 1em;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+
+ @media ($bp-large-min){
+ padding-right: $column;
+ width: calc(100% - #{$layout-sidebar-width});
+ }
+ @media ($bp-x-large-min) {
+ padding-right: $column + ($gutter * 2);
+ }
+ }
+}
diff --git a/styleguide/source/assets/scss/03-organisms/_callout-time.scss b/styleguide/source/assets/scss/03-organisms/_callout-time.scss
index 47d10201d7..44911193ee 100644
--- a/styleguide/source/assets/scss/03-organisms/_callout-time.scss
+++ b/styleguide/source/assets/scss/03-organisms/_callout-time.scss
@@ -29,7 +29,6 @@
&__text {
font-size: 1.438rem;
font-style: italic;
- margin-bottom: 0;
padding-left: 42px; // width of icon and margin
}
}
diff --git a/styleguide/source/assets/scss/03-organisms/_form-requirements.scss b/styleguide/source/assets/scss/03-organisms/_form-requirements.scss
index b3c8e5f0ef..e5301230b5 100644
--- a/styleguide/source/assets/scss/03-organisms/_form-requirements.scss
+++ b/styleguide/source/assets/scss/03-organisms/_form-requirements.scss
@@ -10,6 +10,13 @@
width: 50vw;
}
+ &__title {
+
+ h2 {
+ @include ma-h4;
+ }
+ }
+
&__container {
padding-top: 45px;
padding-bottom: 45px;
diff --git a/styleguide/source/assets/scss/03-organisms/_language-menu.scss b/styleguide/source/assets/scss/03-organisms/_language-menu.scss
new file mode 100644
index 0000000000..ab81596830
--- /dev/null
+++ b/styleguide/source/assets/scss/03-organisms/_language-menu.scss
@@ -0,0 +1,104 @@
+.ma__language-menu {
+ display: block;
+ font-size: 1.25rem;
+ line-height: 1.45;
+ position: relative;
+
+ @media ($bp-header-toggle-max) {
+ display: none;
+ }
+
+ @media ($bp-header-toggle-min) {
+ line-height: 2;
+ transition: opacity .4s ease;
+
+ &:hover {
+ opacity: .7;
+ }
+ }
+
+ .ma__header__utility-nav--narrow & {
+ display: none;
+ }
+
+ .goog-te-gadget {
+ font-size: 1.25rem;
+ }
+
+ .goog-te-gadget-simple {
+ font-size: 1.25rem;
+
+ @media ($bp-header-toggle-max) {
+ padding: 11px 0 9px 45px;
+ width: 100%;
+ }
+
+ & > img {
+ margin-right: 30px;
+ margin-bottom: 0;
+
+ @media ($bp-header-toggle-max) {
+ margin-right: 1px;
+ margin-bottom: 2px;
+ }
+ }
+
+ & > span {
+ display: inline-block;
+ }
+ }
+
+ .goog-te-gadget-simple .goog-te-menu-value {
+ @include ma-chevron;
+
+ @media ($bp-header-toggle-max) {
+ display: block;
+ width: 100%;
+ }
+
+ & > * {
+ display: none;
+ }
+
+ & > :first-child {
+ display: inline;
+ }
+
+ &:after {
+ margin-left: .25em;
+ transform: rotate(45deg) translateY(-45%);
+
+ @media ($bp-header-toggle-max) {
+ position: absolute;
+ top: 45%;
+ right: 10px;
+ }
+ }
+ }
+
+ &__icon {
+ cursor: pointer;
+ line-height: 1em;
+ opacity: 0;
+ pointer-events: none;
+ position: absolute;
+ left: 30px;
+ top: 54%;
+ transform: translateY(-50%);
+ transition: opacity .001s;
+ transition-delay: .5s;
+
+ @media ($bp-header-toggle-max) {
+ left: 20px;
+ }
+
+ & > svg {
+ height: 18px;
+ width: 20px;
+ }
+ }
+
+ .has-rendered + &__icon {
+ opacity: 1;
+ }
+}
diff --git a/styleguide/source/assets/scss/03-organisms/_link-list.scss b/styleguide/source/assets/scss/03-organisms/_link-list.scss
index 7d5f78cf20..8c73cba7dd 100644
--- a/styleguide/source/assets/scss/03-organisms/_link-list.scss
+++ b/styleguide/source/assets/scss/03-organisms/_link-list.scss
@@ -3,7 +3,7 @@
.pre-content > &,
.post-content > &,
.main-content--full .page-content > & {
- @include ma-container();
+ @include ma-container;
}
&__description {
@@ -29,6 +29,11 @@
@include span-columns(6);
}
}
+
+ &--no-bullets {
+ list-style: none;
+ padding-left: 0;
+ }
}
&__item {
@@ -40,14 +45,15 @@
}
.sidebar &__item + &__item {
- border-top-width: 1px;
border-top-style: solid;
+ border-top-width: 1px;
margin-top: 25px;
- padding-top: 25px;
padding-bottom: 0;
+ padding-top: 25px;
}
.sidebar &__item {
+
.ma__decorative-link {
font-size: 1.625rem;
line-height: 1.2;
diff --git a/styleguide/source/assets/scss/03-organisms/_location-banner.scss b/styleguide/source/assets/scss/03-organisms/_location-banner.scss
index 75b3665e23..5473573bb5 100644
--- a/styleguide/source/assets/scss/03-organisms/_location-banner.scss
+++ b/styleguide/source/assets/scss/03-organisms/_location-banner.scss
@@ -1,4 +1,5 @@
.ma__location-banner {
+ @include ma-container;
@include clearfix;
margin-bottom: 70px;
diff --git a/styleguide/source/assets/scss/03-organisms/_press-filters.scss b/styleguide/source/assets/scss/03-organisms/_press-filters.scss
index ef97b7792b..ad05cdd0b6 100644
--- a/styleguide/source/assets/scss/03-organisms/_press-filters.scss
+++ b/styleguide/source/assets/scss/03-organisms/_press-filters.scss
@@ -63,7 +63,7 @@
}
.ma__select-box {
- max-width: 780px;
+ max-width: 500px;
width: 100%;
}
}
diff --git a/styleguide/source/assets/scss/03-organisms/_search-banner.scss b/styleguide/source/assets/scss/03-organisms/_search-banner.scss
index 4963a028c7..fbef3880d4 100644
--- a/styleguide/source/assets/scss/03-organisms/_search-banner.scss
+++ b/styleguide/source/assets/scss/03-organisms/_search-banner.scss
@@ -37,6 +37,23 @@
z-index: 2;
}
+ .ma__page-intro {
+ text-align: center;
+
+ h1 {
+ @media ($bp-large-min) {
+ font-size: 5.313rem;
+ }
+ }
+
+ &__sub-title {
+ @include ma-h3;
+ padding: 0;
+ width: 100%;
+ }
+ }
+
+ // backward compatible with v5.6 - title was replaced with Page Intro
&__title {
margin-bottom: .4em;
text-align: center;
@@ -46,6 +63,7 @@
}
}
+ // backward compatible with v5.6 - intro was replaced with Page Intro
&__intro {
@include ma-h3;
margin-bottom: .5em;
@@ -174,6 +192,17 @@
}
}
+ .ma__banner-credit {
+ @include ma-container;
+ position: absolute;
+ bottom: 20px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 100%;
+ z-index: 3;
+ }
+
+ // Start backward compatible with v5.7 - converted image-credit to new Banner Credit molecule
&__image-credit {
@include ma-container;
position: absolute;
@@ -209,4 +238,6 @@
font-size: 0.875rem;
line-height: 1.125rem;
}
+ // End backward compatible with v5.7 - converted image-credit to new Banner Credit molecule
+
}
diff --git a/styleguide/source/assets/scss/03-organisms/_stacked-row-section.scss b/styleguide/source/assets/scss/03-organisms/_stacked-row-section.scss
index cc75f485ec..288c2af163 100644
--- a/styleguide/source/assets/scss/03-organisms/_stacked-row-section.scss
+++ b/styleguide/source/assets/scss/03-organisms/_stacked-row-section.scss
@@ -17,6 +17,7 @@
@include ma-container();
}
+ // reduce the width of the title and border
&--restricted + &--restricted &__container {
@include ma-container('restricted');
}
diff --git a/styleguide/source/assets/scss/03-organisms/_utility-nav.scss b/styleguide/source/assets/scss/03-organisms/_utility-nav.scss
index 58b571feea..a2214a8155 100644
--- a/styleguide/source/assets/scss/03-organisms/_utility-nav.scss
+++ b/styleguide/source/assets/scss/03-organisms/_utility-nav.scss
@@ -33,30 +33,14 @@ $utility-nav-height: 43px;
}
}
- &__link,
- &__translate {
+ &__link {
display: block;
font-size: 1.25rem;
line-height: 1.45;
- @media ($bp-header-toggle-min) {
- line-height: 2;
- transition: opacity .4s ease;
-
- &:hover {
- opacity: .7;
- }
- }
- }
-
- &__link {
-
- @media ($bp-header-toggle-max) {
- padding: 11px 20px 9px 45px;
- }
-
@media ($bp-header-toggle-max) {
@include ma-chevron;
+ padding: 11px 20px 9px 45px;
&:after {
position: absolute;
@@ -65,6 +49,15 @@ $utility-nav-height: 43px;
}
}
+ @media ($bp-header-toggle-min) {
+ line-height: 2;
+ transition: opacity .4s ease;
+
+ &:hover {
+ opacity: .7;
+ }
+ }
+
& > svg,
& > span {
display: inline-block;
@@ -91,90 +84,6 @@ $utility-nav-height: 43px;
}
}
- &__translate {
- position: relative;
-
- .goog-te-gadget {
- font-size: 1.25rem;
- }
-
- .goog-te-gadget-simple {
- font-size: 1.25rem;
-
- @media ($bp-header-toggle-max) {
- padding: 11px 0 9px 45px;
- width: 100%;
- }
-
- & > img {
- margin-right: 15px;
- margin-bottom: 0;
-
- @media ($bp-header-toggle-max) {
- margin-right: 1px;
- margin-bottom: 2px;
- }
- }
-
- & > span {
- display: inline-block;
- width: calc(100% - 20px); // width of the image
- }
- }
-
- .goog-te-gadget-simple .goog-te-menu-value {
- @include ma-chevron;
-
- @media ($bp-header-toggle-max) {
- display: block;
- width: 100%;
- }
-
- & > * {
- display: none;
- }
-
- & > :first-child {
- display: inline;
- }
-
- &:after {
- margin-left: .25em;
- transform: rotate(45deg) translateY(-45%);
-
- @media ($bp-header-toggle-max) {
- position: absolute;
- top: 45%;
- right: 10px;
- }
- }
- }
- }
-
- &__translate-icon {
- line-height: 1em;
- opacity: 0;
- position: absolute;
- left: 30px;
- top: 54%;
- transform: translateY(-50%);
- transition: opacity .001s;
- transition-delay: .5s;
-
- @media ($bp-header-toggle-max) {
- left: 20px;
- }
-
- & > svg {
- height: 18px;
- width: 20px;
- }
- }
-
- .has-rendered + &__translate-icon {
- opacity: 1;
- }
-
&__content {
display: block;
margin-top: $header-mobile-controls-height;
@@ -308,4 +217,106 @@ $utility-nav-height: 43px;
height: 88px;
}
}
+
+ // Backward compatible with v5.8
+ // translate element moved to new Language Menu pattern
+ &__translate {
+ display: block;
+ font-size: 1.25rem;
+ line-height: 1.45;
+ position: relative;
+
+ @media ($bp-header-toggle-min) {
+ line-height: 2;
+ transition: opacity .4s ease;
+
+ &:hover {
+ opacity: .7;
+ }
+ }
+
+ .goog-te-gadget {
+ font-size: 1.25rem;
+ }
+
+ .goog-te-gadget-simple {
+ font-size: 1.25rem;
+
+ @media ($bp-header-toggle-max) {
+ padding: 11px 0 9px 45px;
+ width: 100%;
+ }
+
+ & > img {
+ margin-right: 15px;
+ margin-bottom: 0;
+
+ @media ($bp-header-toggle-max) {
+ margin-right: 1px;
+ margin-bottom: 2px;
+ }
+ }
+
+ & > span {
+ display: inline-block;
+ width: calc(100% - 20px); // width of the image
+ }
+ }
+
+ .goog-te-gadget-simple .goog-te-menu-value {
+ @include ma-chevron;
+
+ @media ($bp-header-toggle-max) {
+ display: block;
+ width: 100%;
+ }
+
+ & > * {
+ display: none;
+ }
+
+ & > :first-child {
+ display: inline;
+ }
+
+ &:after {
+ margin-left: .25em;
+ transform: rotate(45deg) translateY(-45%);
+
+ @media ($bp-header-toggle-max) {
+ position: absolute;
+ top: 45%;
+ right: 10px;
+ }
+ }
+ }
+ }
+
+ // Backward compatible with v5.8
+ // translate icon moved to new Language Menu pattern
+ &__translate-icon {
+ line-height: 1em;
+ opacity: 0;
+ position: absolute;
+ left: 30px;
+ top: 54%;
+ transform: translateY(-50%);
+ transition: opacity .001s;
+ transition-delay: .5s;
+
+ @media ($bp-header-toggle-max) {
+ left: 20px;
+ }
+
+ & > svg {
+ height: 18px;
+ width: 20px;
+ }
+ }
+
+ // Backward compatible with v5.7
+ // translate icon moved to new Language Menu pattern
+ .has-rendered + &__translate-icon {
+ opacity: 1;
+ }
}
diff --git a/styleguide/source/assets/scss/04-templates/_stacked-row.scss b/styleguide/source/assets/scss/04-templates/_stacked-row.scss
new file mode 100644
index 0000000000..6ecab339ab
--- /dev/null
+++ b/styleguide/source/assets/scss/04-templates/_stacked-row.scss
@@ -0,0 +1,44 @@
+.ma__stacked-row {
+ position: relative;
+
+ &__section {
+
+ @media ($bp-large-max) {
+ box-shadow: 0 0.5rem 0.5rem -0.25rem rgba(1, 1, 1, 0.25);
+ padding-bottom: 45px;
+
+ &:last-child {
+ box-shadow: none;
+ }
+ }
+
+ @media print {
+ padding-bottom: 0;
+ }
+ }
+
+ &__container {
+ @include ma-container;
+ }
+
+ // reduce the width of the title and border
+ &__section--restricted + &__section--restricted &__container {
+ @include ma-container('restricted');
+ }
+
+ &__section ~ &__section &__container:before {
+ content: "";
+ display: block;
+ padding-top: 45px;
+
+ @media print, ($bp-large-min) {
+ border-top-width: 1px;
+ border-top-style: solid;
+ padding-top: 90px;
+ }
+ }
+
+ &__section--restricted &__title {
+ max-width: 820px;
+ }
+}
diff --git a/styleguide/source/assets/scss/06-theme/01-atoms/_error-msg.scss b/styleguide/source/assets/scss/06-theme/01-atoms/_error-msg.scss
new file mode 100644
index 0000000000..603f82efb2
--- /dev/null
+++ b/styleguide/source/assets/scss/06-theme/01-atoms/_error-msg.scss
@@ -0,0 +1,5 @@
+// error message
+.ma__error-msg {
+ color: $c-font-error;
+ font-weight: 500;
+}
diff --git a/styleguide/source/assets/scss/06-theme/01-atoms/_forms.scss b/styleguide/source/assets/scss/06-theme/01-atoms/_forms.scss
index ae4d90e4c5..0ac49a1b68 100644
--- a/styleguide/source/assets/scss/06-theme/01-atoms/_forms.scss
+++ b/styleguide/source/assets/scss/06-theme/01-atoms/_forms.scss
@@ -58,25 +58,6 @@ input {
}
}
-.ma__input-number {
-
- &__plus,
- &__minus {
- border-color: $c-bd-input;
-
- &:after {
- border-color: $c-font-dark;
- border-left-color: transparent;
- border-right-color: transparent;
- }
- }
-
- input.has-error ~ &__plus,
- input.has-error ~ &__minus {
- border-color: $c-bd-error;
- }
-}
-
textarea {
background-color: $c-white;
border-color: $c-bd-input;
@@ -96,91 +77,8 @@ textarea {
}
}
-.ma__textarea__wrapper {
- font-weight: 500;
-}
-
legend,
label {
font-weight: 500;
}
-.ma__input-radio {
-
- label {
- font-weight: 400;
-
- &:before {
- background-color: $c-white;
- border-color: $c-bd-input-dark;
- color: transparent;
-
- .ma__form--light & {
- background-color: rgba($c-white, 0.1);
- border-color: rgba($c-bd-input,.5);
- }
- }
- }
-
- input.has-error ~ label:before {
- border-color: $c-bd-error;
- }
-
- input:checked ~ label {
-
- &:before {
- color: $c-font-base;
-
- .ma__form--light & {
- color: $c-font-inverse;
- }
- }
- }
-
- input:focus ~ label:before {
- border-color: Highlight !important;
-
- /* WebKit gets its native focus styles.
- */
- @media (-webkit-min-device-pixel-ratio:0) {
- outline: -webkit-focus-ring-color auto 5px;
- }
- }
-}
-
-.ma__input-checkbox {
-
- label {
- font-weight: 400;
-
- &:before {
- background-color: $c-white;
- border-color: $c-bd-input-dark;
-
- .ma__form--light & {
- background-color: rgba($c-white, 0.1);
- border-color: rgba($c-bd-input,.5);
- }
- }
- }
-
- input.has-error ~ label:before {
- border-color: $c-bd-error;
- }
-
- input:focus ~ label:before {
- border-color: Highlight !important;
-
- /* WebKit gets its native focus styles.
- */
- @media (-webkit-min-device-pixel-ratio:0) {
- outline: -webkit-focus-ring-color auto 5px;
- }
- }
-}
-
-// error message
-.ma__error-msg {
- color: $c-font-error;
- font-weight: 500;
-}
diff --git a/styleguide/source/assets/scss/06-theme/01-atoms/_input-checkbox.scss b/styleguide/source/assets/scss/06-theme/01-atoms/_input-checkbox.scss
new file mode 100644
index 0000000000..880d7111f2
--- /dev/null
+++ b/styleguide/source/assets/scss/06-theme/01-atoms/_input-checkbox.scss
@@ -0,0 +1,34 @@
+.ma__input-checkbox {
+
+ & > svg {
+ fill: $c-theme-secondary;
+ }
+
+ label {
+ font-weight: 400;
+
+ &:before {
+ background-color: $c-white;
+ border-color: $c-bd-input-dark;
+
+ .ma__form--light & {
+ background-color: rgba($c-white, 0.1);
+ border-color: rgba($c-bd-input,.5);
+ }
+ }
+ }
+
+ input.has-error ~ label:before {
+ border-color: $c-bd-error;
+ }
+
+ input:focus ~ label:before {
+ border-color: Highlight !important;
+
+ /* WebKit gets its native focus styles.
+ */
+ @media (-webkit-min-device-pixel-ratio:0) {
+ outline: -webkit-focus-ring-color auto 5px;
+ }
+ }
+}
diff --git a/styleguide/source/assets/scss/06-theme/01-atoms/_input-number.scss b/styleguide/source/assets/scss/06-theme/01-atoms/_input-number.scss
new file mode 100644
index 0000000000..7c9fcee93e
--- /dev/null
+++ b/styleguide/source/assets/scss/06-theme/01-atoms/_input-number.scss
@@ -0,0 +1,18 @@
+.ma__input-number {
+
+ &__plus,
+ &__minus {
+ border-color: $c-bd-input;
+
+ &:after {
+ border-color: $c-font-dark;
+ border-left-color: transparent;
+ border-right-color: transparent;
+ }
+ }
+
+ input.has-error ~ &__plus,
+ input.has-error ~ &__minus {
+ border-color: $c-bd-error;
+ }
+}
diff --git a/styleguide/source/assets/scss/06-theme/01-atoms/_input-radio.scss b/styleguide/source/assets/scss/06-theme/01-atoms/_input-radio.scss
new file mode 100644
index 0000000000..c103d1482d
--- /dev/null
+++ b/styleguide/source/assets/scss/06-theme/01-atoms/_input-radio.scss
@@ -0,0 +1,42 @@
+.ma__input-radio {
+
+ label {
+ font-weight: 400;
+
+ &:before {
+ background-color: $c-white;
+ border-color: $c-bd-input-dark;
+ color: transparent;
+
+ .ma__form--light & {
+ background-color: rgba($c-white, 0.1);
+ border-color: rgba($c-bd-input,.5);
+ }
+ }
+ }
+
+ input.has-error ~ label:before {
+ border-color: $c-bd-error;
+ }
+
+ input:checked ~ label {
+
+ &:before {
+ color: $c-font-base;
+
+ .ma__form--light & {
+ color: $c-font-inverse;
+ }
+ }
+ }
+
+ input:focus ~ label:before {
+ border-color: Highlight !important;
+
+ /* WebKit gets its native focus styles.
+ */
+ @media (-webkit-min-device-pixel-ratio:0) {
+ outline: -webkit-focus-ring-color auto 5px;
+ }
+ }
+}
diff --git a/styleguide/source/assets/scss/06-theme/01-atoms/_table.scss b/styleguide/source/assets/scss/06-theme/01-atoms/_table.scss
index 8fa599216a..d71a2cc063 100644
--- a/styleguide/source/assets/scss/06-theme/01-atoms/_table.scss
+++ b/styleguide/source/assets/scss/06-theme/01-atoms/_table.scss
@@ -1,4 +1,4 @@
-.rich-text table,
+.ma__rich-text table,
.ma__table {
thead {
background-color: $c-bg-subtle;
diff --git a/styleguide/source/assets/scss/06-theme/01-atoms/_textarea.scss b/styleguide/source/assets/scss/06-theme/01-atoms/_textarea.scss
new file mode 100644
index 0000000000..c2fd11fa10
--- /dev/null
+++ b/styleguide/source/assets/scss/06-theme/01-atoms/_textarea.scss
@@ -0,0 +1,7 @@
+.ma__textarea {
+
+ &__wrapper {
+ font-weight: 500;
+ }
+}
+
diff --git a/styleguide/source/assets/scss/06-theme/02-molecules/_back-button.scss b/styleguide/source/assets/scss/06-theme/02-molecules/_back-button.scss
index 91a02bd2c9..15694e797c 100644
--- a/styleguide/source/assets/scss/06-theme/02-molecules/_back-button.scss
+++ b/styleguide/source/assets/scss/06-theme/02-molecules/_back-button.scss
@@ -1,6 +1,18 @@
.ma__back-button {
- a {
+ .ma__button {
+ &:before {
+ border-color: rgba($c-font-link,.5);
+ transition: all 0.4s ease;
+ }
+
+ &:hover:before {
+ border-color: $c-font-inverse;
+ }
+ }
+
+ // backward compatible with v5.6 - replaced link with button atom
+ a:not(.ma__button) {
@include ma-button("","",$c-font-link);
border-color: rgba($c-font-link,.5);
diff --git a/styleguide/source/assets/scss/06-theme/02-molecules/_banner-credit.scss b/styleguide/source/assets/scss/06-theme/02-molecules/_banner-credit.scss
new file mode 100644
index 0000000000..ad6c602ea3
--- /dev/null
+++ b/styleguide/source/assets/scss/06-theme/02-molecules/_banner-credit.scss
@@ -0,0 +1,9 @@
+.ma__banner-credit {
+
+ &__icon {
+
+ & > svg {
+ fill: $c-theme-secondary;
+ }
+ }
+}
diff --git a/styleguide/source/assets/scss/06-theme/02-molecules/_event-filters.scss b/styleguide/source/assets/scss/06-theme/02-molecules/_event-filters.scss
index 329c0b91a1..3a7972771d 100644
--- a/styleguide/source/assets/scss/06-theme/02-molecules/_event-filters.scss
+++ b/styleguide/source/assets/scss/06-theme/02-molecules/_event-filters.scss
@@ -1,6 +1,7 @@
.ma__event-filters {
background-color: $c-bg-section;
+ // backward compatible with v5.6
&__submit {
@include ma-button('','solid',$c-theme-primary);
}
diff --git a/styleguide/source/assets/scss/06-theme/02-molecules/_page-intro.scss b/styleguide/source/assets/scss/06-theme/02-molecules/_page-intro.scss
new file mode 100644
index 0000000000..94a33f54be
--- /dev/null
+++ b/styleguide/source/assets/scss/06-theme/02-molecules/_page-intro.scss
@@ -0,0 +1,7 @@
+.ma__page-intro {
+
+ &__sub-title {
+ color: $c-font-heading;
+ font-weight: 700;
+ }
+}
diff --git a/styleguide/source/assets/scss/06-theme/03-organisms/_language-menu.scss b/styleguide/source/assets/scss/06-theme/03-organisms/_language-menu.scss
new file mode 100644
index 0000000000..11c3ed12f4
--- /dev/null
+++ b/styleguide/source/assets/scss/06-theme/03-organisms/_language-menu.scss
@@ -0,0 +1,67 @@
+.ma__language-menu {
+ color: $c-font-base;
+
+ .ma__utility-nav & {
+ @media ($bp-header-toggle-min) {
+ //background-color: $c-theme-primary;
+ color: $c-font-inverse;
+ }
+ }
+
+ &:after {
+ border-right-color: $c-theme-secondary;
+ border-bottom-color: $c-theme-secondary;
+ }
+
+ svg {
+ fill: $c-theme-primary;
+
+ .ma__utility-nav & {
+ @media ($bp-header-toggle-min) {
+ fill: $c-font-inverse;
+ opacity: .7;
+ stroke: transparent;
+ }
+ }
+ }
+
+ span {
+ font-family: "Texta", "Helvetica", "Arial", "sans-serif";
+ font-weight: 500;
+ }
+
+ .goog-te-gadget {
+ font-weight: 400;
+ }
+
+ .goog-te-gadget-simple {
+ background-color: transparent;
+ border: none;
+ font-weight: 500;
+
+ & > img {
+ opacity: .7;
+ }
+ }
+
+ .goog-te-gadget-simple .goog-te-menu-value {
+ color: $c-font-base;
+
+ @media ($bp-header-toggle-max) {
+ &:after {
+ border-right-color: $c-theme-secondary;
+ border-bottom-color: $c-theme-secondary;
+ }
+ }
+
+ .ma__utility-nav & {
+ @media ($bp-header-toggle-min) {
+ color: $c-font-inverse;
+
+ &:after {
+ opacity: .7;
+ }
+ }
+ }
+ }
+}
diff --git a/styleguide/source/assets/scss/06-theme/03-organisms/_search-banner.scss b/styleguide/source/assets/scss/06-theme/03-organisms/_search-banner.scss
index 6b382339d8..ac01440f4d 100644
--- a/styleguide/source/assets/scss/06-theme/03-organisms/_search-banner.scss
+++ b/styleguide/source/assets/scss/06-theme/03-organisms/_search-banner.scss
@@ -11,11 +11,26 @@
@include ma-container;
}
+ .ma__page-intro {
+
+ h1 {
+ color: $c-font-inverse;
+ font-weight: 300;
+ }
+
+ &__sub-title {
+ color: $c-font-inverse;
+ font-weight: 400;
+ }
+ }
+
+ // backward compatible with v5.6 - title was replaced with Page Intro
&__title {
color: $c-font-inverse;
font-weight: 300;
}
+ // backward compatible with v5.6 - intro was replaced with Page Intro
&__intro {
color: $c-font-inverse;
font-weight: 400;
@@ -93,6 +108,25 @@
}
}
+ .ma__banner-credit {
+
+ &__icon {
+
+ & > svg {
+ fill: $c-font-inverse;
+ }
+ }
+
+ &__image-name {
+ color: rgba($c-font-inverse,.9);
+ }
+
+ &__image-author {
+ color: rgba($c-font-inverse, .5);
+ }
+ }
+
+ // Start backward compatible with v5.7 - converted image-credit to new Banner Credit molecule
&__image-credit {
}
@@ -117,4 +151,5 @@
color: rgba($c-font-inverse, .5);
font-weight: 400;
}
+ // End backward compatible with v5.7 - converted image-credit to new Banner Credit molecule
}
diff --git a/styleguide/source/assets/scss/06-theme/03-organisms/_utility-nav.scss b/styleguide/source/assets/scss/06-theme/03-organisms/_utility-nav.scss
index 77826335ec..ee4d6faea0 100644
--- a/styleguide/source/assets/scss/06-theme/03-organisms/_utility-nav.scss
+++ b/styleguide/source/assets/scss/06-theme/03-organisms/_utility-nav.scss
@@ -14,8 +14,7 @@
}
}
- &__link,
- &__translate {
+ &__link {
color: $c-font-base;
@media ($bp-header-toggle-min) {
@@ -44,40 +43,6 @@
}
}
- &__translate {
- .goog-te-gadget {
- font-weight: 400;
- }
-
- .goog-te-gadget-simple {
- background-color: transparent;
- border: none;
- font-weight: 500;
-
- & > img {
- opacity: .7;
- }
- }
-
- .goog-te-gadget-simple .goog-te-menu-value {
- color: $c-font-base;
-
- @media ($bp-header-toggle-max) {
- &:after {
- border-right-color: $c-theme-secondary;
- border-bottom-color: $c-theme-secondary;
- }
- }
-
- @media ($bp-header-toggle-min) {
- color: $c-font-inverse;
-
- &:after {
- opacity: .7;
- }
- }
- }
- }
&__content {
background-color: $c-bg-section;
@@ -136,4 +101,69 @@
fill: $c-white;
}
}
+
+ // Backward compatible with v5.8
+ // translate element moved to new Language Menu pattern
+ &__translate {
+ color: $c-font-base;
+
+ @media ($bp-header-toggle-min) {
+ //background-color: $c-theme-primary;
+ color: $c-font-inverse;
+ }
+
+ &:after {
+ border-right-color: $c-theme-secondary;
+ border-bottom-color: $c-theme-secondary;
+ }
+
+ svg {
+ fill: $c-theme-primary;
+
+ @media ($bp-header-toggle-min) {
+ fill: $c-font-inverse;
+ opacity: .7;
+ stroke: transparent;
+ }
+ }
+
+ span {
+ font-family: "Texta", "Helvetica", "Arial", "sans-serif";
+ font-weight: 500;
+ }
+
+ .goog-te-gadget {
+ font-weight: 400;
+ }
+
+ .goog-te-gadget-simple {
+ background-color: transparent;
+ border: none;
+ font-weight: 500;
+
+ & > img {
+ opacity: .7;
+ }
+ }
+
+ .goog-te-gadget-simple .goog-te-menu-value {
+ color: $c-font-base;
+
+ @media ($bp-header-toggle-max) {
+ &:after {
+ border-right-color: $c-theme-secondary;
+ border-bottom-color: $c-theme-secondary;
+ }
+ }
+
+ @media ($bp-header-toggle-min) {
+ color: $c-font-inverse;
+
+ &:after {
+ opacity: .7;
+ }
+ }
+ }
+ }
+
}
diff --git a/styleguide/source/assets/scss/06-theme/04-templates/_stacked-row.scss b/styleguide/source/assets/scss/06-theme/04-templates/_stacked-row.scss
new file mode 100644
index 0000000000..e730b25406
--- /dev/null
+++ b/styleguide/source/assets/scss/06-theme/04-templates/_stacked-row.scss
@@ -0,0 +1,6 @@
+.ma__stacked-row {
+
+ &__section ~ &__section &__container:before {
+ border-color: $c-bd-divider;
+ }
+}
diff --git a/styleguide/source/assets/scss/base-theme.scss b/styleguide/source/assets/scss/base-theme.scss
index a105f5b225..439d033263 100644
--- a/styleguide/source/assets/scss/base-theme.scss
+++ b/styleguide/source/assets/scss/base-theme.scss
@@ -26,15 +26,20 @@
@import "06-theme/01-atoms/content-link";
@import "06-theme/01-atoms/decorative-link";
@import "06-theme/01-atoms/divider";
+@import "06-theme/01-atoms/error-msg";
@import "06-theme/01-atoms/figure";
@import "06-theme/01-atoms/forms";
@import "06-theme/01-atoms/helper-text";
@import "06-theme/01-atoms/icon-list";
@import "06-theme/01-atoms/iframe";
+@import "06-theme/01-atoms/input-checkbox";
@import "06-theme/01-atoms/input-group";
+@import "06-theme/01-atoms/input-number";
+@import "06-theme/01-atoms/input-radio";
@import "06-theme/01-atoms/publish-state";
@import "06-theme/01-atoms/select-box";
@import "06-theme/01-atoms/sidebar-heading";
+@import "06-theme/01-atoms/textarea";
@import "06-theme/01-atoms/video";
@import "06-theme/01-atoms/table";
@@ -46,6 +51,7 @@
@import "06-theme/02-molecules/action-step";
@import "06-theme/02-molecules/arrow-nav";
@import "06-theme/02-molecules/back-button";
+@import "06-theme/02-molecules/banner-credit";
@import "06-theme/02-molecules/button-alert";
@import "06-theme/02-molecules/callout-stats";
@import "06-theme/02-molecules/callout-link";
@@ -73,6 +79,7 @@
@import "06-theme/02-molecules/location-icons";
@import "06-theme/02-molecules/main-nav";
@import "06-theme/02-molecules/org-info";
+@import "06-theme/02-molecules/page-intro";
@import "06-theme/02-molecules/pagination";
@import "06-theme/02-molecules/press-status";
@import "06-theme/02-molecules/press-teaser";
@@ -110,6 +117,7 @@
@import "06-theme/03-organisms/illustrated-header";
@import "06-theme/03-organisms/image-credit";
@import "06-theme/03-organisms/jump-links";
+@import "06-theme/03-organisms/language-menu";
@import "06-theme/03-organisms/link-list";
@import "06-theme/03-organisms/location-listing";
@import "06-theme/03-organisms/mapped-locations";
@@ -137,6 +145,7 @@
// Templates
@import "06-theme/04-templates/details";
@import "06-theme/04-templates/general";
+@import "06-theme/04-templates/stacked-row";
// Print styles
@import "08-print/print";
diff --git a/styleguide/source/assets/scss/index.scss b/styleguide/source/assets/scss/index.scss
index 3b1ec57a11..937eba6813 100644
--- a/styleguide/source/assets/scss/index.scss
+++ b/styleguide/source/assets/scss/index.scss
@@ -30,18 +30,26 @@
@import "01-atoms/comp-heading";
@import "01-atoms/decorative-link";
@import "01-atoms/divider";
+@import "01-atoms/error-msg";
@import "01-atoms/figure";
@import "01-atoms/forms";
@import "01-atoms/helper-text";
@import "01-atoms/icon-list";
@import "01-atoms/iframe";
+@import "01-atoms/input-checkbox";
+@import "01-atoms/input-date";
@import "01-atoms/input-group";
+@import "01-atoms/input-number";
+@import "01-atoms/input-radio";
+@import "01-atoms/label";
+@import "01-atoms/page-title";
@import "01-atoms/publish-state";
@import "01-atoms/select-box";
@import "01-atoms/sidebar-heading";
@import "01-atoms/site-logo";
@import "01-atoms/svg-icons";
@import "01-atoms/svg-loc-icons";
+@import "01-atoms/textarea";
@import "01-atoms/table";
@import "01-atoms/video";
@@ -52,6 +60,7 @@
@import "02-molecules/action-step";
@import "02-molecules/arrow-nav";
@import "02-molecules/back-button";
+@import "02-molecules/banner-credit";
@import "02-molecules/button-alert";
@import "02-molecules/callout-stats";
@import "02-molecules/callout-link";
@@ -84,6 +93,7 @@
@import "02-molecules/main-nav";
@import "02-molecules/org-info";
@import "02-molecules/org-selector";
+@import "02-molecules/page-intro";
@import "02-molecules/pagination";
@import "02-molecules/press-status";
@import "02-molecules/press-teaser";
@@ -130,6 +140,7 @@
@import "03-organisms/jump-links";
@import "03-organisms/key-actions";
@import "03-organisms/page-overview";
+@import "03-organisms/language-menu";
@import "03-organisms/location-banner";
@import "03-organisms/mapped-locations";
@import "03-organisms/page-banner";
@@ -167,3 +178,4 @@
@import "04-templates/press";
@import "04-templates/policy-advisory";
@import "04-templates/services";
+@import "04-templates/stacked-row";
diff --git a/styleguide/tools/gulp/tasks/patternlab.js b/styleguide/tools/gulp/tasks/patternlab.js
index 2af49ee277..087545f739 100644
--- a/styleguide/tools/gulp/tasks/patternlab.js
+++ b/styleguide/tools/gulp/tasks/patternlab.js
@@ -1,7 +1,6 @@
-var gulp = require('gulp'),
+var gulp = require("gulp"),
quench = require("../quench.js"),
- run = require('gulp-run'),
- browserSync = require("browser-sync");
+ run = require("gulp-run");
/**
* Usage: convert twig templates into flat html files
@@ -10,13 +9,15 @@ var gulp = require('gulp'),
module.exports = function patternLabTask(config, env){
var bsPort = config.local.browserSyncPort || 3000;
- gulp.task('patternlab', function() {
- run('php ' + config.patternLabRoot + '/core/console --generate --patternsonly && browser-sync reload --port ' + bsPort).exec();
- });
+ var command = "php " + config.patternLabRoot + "/core/console --generate --patternsonly";
+
+ if(config.browserSync) {
+ command = command + " && browser-sync reload --port " + bsPort;
+ }
- // gulp.task('patternlab', function(next) {
- // return run('php ' + config.patternLabRoot + '/core/console --generate --patternsonly').exec("", next);
- // });
+ gulp.task("patternlab", function() {
+ run(command).exec();
+ });
// register the watch
quench.registerWatcher("patternlab", [