@newjersey/njwds 2.6.0 → 2.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newjersey/njwds",
-  "version": "2.6.0",
+  "version": "2.6.1",
   "description": "NJ Web Design Standards",
   "main": "index.js",
   "scripts": {

package/src/components/banner/banner.config.yml

@@ -2,4 +2,17 @@ label: Banner
 
 context:
   banner:
-    text: "Official Site of the State of New Jersey"
+    # IMPORTANT: when updating banner text, please also update the min-width of
+    # the media query for the '.nj-banner__header li' selector in the custom
+    # styles SCSS.
+    # 
+    # This media query controls the breakpoint for hiding the gov and lt. gov's
+    # names. The intended behavior here is to hide the names before the
+    # stateOfNjText wraps to 3 lines.
+    #
+    # Since the media query's min-width is set based on text length, it has to
+    # be updated when the banner text changes in order to keep the same
+    # wrapping behavior.
+    stateOfNjText: "Official Site of the State of New Jersey"
+    governorName: "Governor Phil Murphy"
+    ltGovernorName: "Lt. Governor Tahesha Way"

package/src/components/banner/banner.njk

@@ -1,24 +1,34 @@
 <section class="nj-banner" aria-label="Official government website">
-  <header class="nj-banner__header">
+  <div class="nj-banner__header">
     <div class="grid-container">
       <div class="nj-banner__inner">
         <div class="grid-col-auto">
-          <img class="nj-banner__header-seal" src="{{ uswds.path }}/img/nj_state_seal.png" alt="NJ flag">
+          <img class="nj-banner__header-seal" src="{{ uswds.path }}/img/nj_state_seal.png" alt="NJ flag" />
         </div>
-        <div class="grid-col-fill"><a href="https://nj.gov">{{ banner.text }}</a></div>
-        <div class="grid-col-auto">
-          <div class="text-white">
-            <ul>
-              <li>Governor Phil Murphy &bull; Lt. Governor Tahesha Way</li><li><a
-                href="https://nj.gov/subscribe/" target="_blank"><svg 
-                  class="usa-icon bottom-neg-2px margin-right-05"
-                  aria-hidden="true" focusable="false" role="img">
-                  <use xlink:href="{{ uswds.path }}/img/sprite.svg#mail"></use>
-              </svg>Get Updates</a></li>
-            </ul>
-          </div>
+        <div class="grid-col-fill">
+          <a href="https://nj.gov">{{ banner.stateOfNjText }}</a>
         </div>
+        <ul class="grid-col-auto display-flex flex-align-center">
+          <li>{{ banner.governorName }} &bull; {{ banner.ltGovernorName }}</li>
+          <li class="grid-col-auto">
+            <a 
+              class="display-flex flex-align-center"
+              href="https://nj.gov/subscribe/" 
+              target="_blank"
+            >
+              <svg 
+                class="usa-icon usa-icon--size-3 nj-banner__mail-icon margin-right-05"
+                role="img"
+                aria-hidden="true" 
+                focusable="false" 
+              >
+                <use xlink:href="{{ uswds.path }}/img/sprite.svg#mail" />
+              </svg>
+              Get Updates
+            </a>
+          </li>
+        </ul>
       </div>
     </div>
-  </header>
+  </div>
 </section>

package/src/sass/_uswds-theme-custom-styles.scss

@@ -43,7 +43,10 @@ i.e.
 }
 .nj-banner__header li {
   display: none;
-  @include at-media("tablet") {
+
+  // Set min-width so the names are hidden before the stateOfNjText wraps to
+  // 3 lines
+  @media (min-width: 43rem) {
     display: inline;
   }
   @include u-margin-right(1);