Feature/dp 13965 change title and h1 (#646)

* DP-13965: add new "news overflow" variation for page header * DP-13965: Add changelog
massgov · Jul 11, 2019 · 9c42783 · 9c42783
1 parent 5943e81
commit 9c42783
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 5 deletions.
diff --git a/assets/scss/03-organisms/_page-header.scss b/assets/scss/03-organisms/_page-header.scss
@@ -188,6 +188,10 @@ $page-header-widget-width: 350px;
     &:last-child {
       margin-bottom: 0;
     }
+
+    .ma__page-header__sub-title {
+      margin-top: .8em;
+    }
   }
 
   .ma__page-banner ~ & &__title {
@@ -210,7 +214,7 @@ $page-header-widget-width: 350px;
   }
 
   // Control font size and line height
-  // regardless of it's added to page 
+  // regardless of it's added to page
   &__sub-title,
   &__sub-title * {
     font-size: 1.625rem !important;

diff --git a/changelogs/DP-13965.md b/changelogs/DP-13965.md
@@ -0,0 +1,4 @@
+___DESCRIPTION___
+Minor
+Added
+- (Patternlab) [page-header] DP-13965: MF Change title and H1 on news overflow pages
diff --git a/...uide/source/_patterns/03-organisms/by-template/page-header-for-news-overflow.md b/...uide/source/_patterns/03-organisms/by-template/page-header-for-news-overflow.md
@@ -0,0 +1,6 @@
+### Description
+This is a variant of the [Page Header](./?p=organisms-page-header) pattern showing an example of how it is being used on the news overflow page.
+
+### How to generate
+* set the `nested` variable to true
+* add a `title`, `subTitle`, and `headerTags`
diff --git a/patternlab/styleguide/source/_patterns/03-organisms/by-template/page-header.twig b/patternlab/styleguide/source/_patterns/03-organisms/by-template/page-header.twig
@@ -35,10 +35,18 @@
         {% include "@atoms/04-headings/comp-heading.twig" %}
       </div>
     {% endif %}
-
-    <h1 class="ma__page-header__title">{% if prefix %}<span class="visually-hidden">{{ prefix }}&nbsp;</span>{% endif %}{{pageHeader.title}}</h1>
-    {% if pageHeader.subTitle %}
-      <div class="ma__page-header__sub-title">{{pageHeader.subTitle}}</div>
+    {% if pageHeader.nested %}
+        <h1 class="ma__page-header__title">{% if prefix %}<span class="visually-hidden">{{ prefix }}&nbsp;</span>{% endif %}{{pageHeader.title}}
+        {% if pageHeader.subTitle %}
+          <div class="ma__page-header__sub-title">{{pageHeader.subTitle}}</div>
+        {% endif %}
+        </h1>
+    {% else %}
+      <h1 class="ma__page-header__title">{% if prefix %}<span class="visually-hidden">{{ prefix }}&nbsp;</span>{% endif %}{{pageHeader.title}}
+      </h1>
+      {% if pageHeader.subTitle %}
+        <div class="ma__page-header__sub-title">{{pageHeader.subTitle}}</div>
+      {% endif %}
     {% endif %}
     {% if pageHeader.optionalContents %}
       <div class="ma__page-header__optional-content">

diff --git a/...b/styleguide/source/_patterns/03-organisms/by-template/page-header~for-news-overflow.json b/...b/styleguide/source/_patterns/03-organisms/by-template/page-header~for-news-overflow.json
@@ -0,0 +1,14 @@
+{
+  "pageHeader": {
+    "title": "News and Announcements",
+    "nested": true,
+    "subTitle": "For <a href=''>Office of Attorney General Maura Healey</a>",
+    "headerTags": {
+      "label": "Related to:",
+      "taxonomyTerms": [{
+        "href": "#",
+        "text": "Office of Attorney General Maura Healey"
+      }]
+    }
+  }
+}