Merge pull request #1154 from massgov/release/9.55.0

Release 9.55.0
massgov · Aug 25, 2020 · 5fe01b6 · 5fe01b6
2 parents 3a16e8e + e6a1fbd
commit 5fe01b6
Show file tree

Hide file tree

Showing 9 changed files with 70 additions and 50 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,13 @@
 # Mayflower Release Notes
 All notable changes to this project will be documented in this file.
 
+## 9.55.0 (8/24/2020)
+### Changed 
+- (React) [MainNav] DP-19425: Fix formatting of COVID global nav link on search.mass.gov (#1143)
+
+### Fixed 
+- (React, Assets) [FooterSlim] Fix markup semantic and classnames. (#1148)
+
 ## 9.54.0 (8/10/2020)
 ### Added
 - (Assets) [Font] DP-19538: Consolidate font sizes into a variable scale. (#1055)

diff --git a/assets/scss/00-base/mixins/_ma-typography.scss b/assets/scss/00-base/mixins/_ma-typography.scss
@@ -53,6 +53,7 @@
 }
 
 @mixin ma-heading($level: 1) {
+  font-weight: $fonts-bold;
 
   @if ($level == 1) {
 

diff --git a/assets/scss/01-atoms/global/_elements.scss b/assets/scss/01-atoms/global/_elements.scss
@@ -132,7 +132,6 @@ ol {
   h#{$i} {
     margin-top: 0;
     color: $c-font-heading;
-    font-weight: $fonts-bold;
 
     @include ma-heading($i);
   }

diff --git a/assets/scss/03-organisms/_footer-slim.scss b/assets/scss/03-organisms/_footer-slim.scss
@@ -1,4 +1,4 @@
-.ma__footer_slim {
+.ma__footer-slim {
   background-color: $c-platinum-gray;
   font-size: $fonts-small;
   line-height: 1.2;
@@ -10,35 +10,20 @@
     @include ma-container;
   }
 
-  &--container {
+  &__container {
     position: relative;
 
-    &-inner {
+    &__inner {
       display: flex;
       flex-direction: column;
       padding-top: 0.5rem;
 
-      h3 {
-        margin-top: 0.5rem;
-        margin-left: 3.25rem;
-      }
-
       @media ($bp-large-min) {
         flex-direction: row;
         align-items: flex-start;
         justify-content: space-between;
         margin: 0;
         padding: 0.75rem 0 0 3.5rem;
-
-        section {
-          margin-right: 2rem;
-          margin-bottom: 0.25rem;
-        }
-
-        h3 {
-          margin-top: inherit;
-          margin-left: auto;
-        }
       }
     }
   }
@@ -52,15 +37,30 @@
     }
   }
 
-  &--info {
+  &__info {
     max-width: 500px;
 
-    h3 {
-      font-size: $fonts-small;
+    @media ($bp-large-min) {
+      margin-right: 2rem;
+      margin-bottom: 0.25rem;
+    }
+  }
+
+  &__title {
+
+    @include ma-heading(3);
+    font-size: $fonts-small;
+
+    margin-top: 0.5rem;
+    margin-left: 3.25rem;
+
+    @media ($bp-large-min) {
+      margin-top: inherit;
+      margin-left: auto;
     }
   }
 
-  &--details {
+  &__details {
     margin-top: 2rem;
 
     @media ($bp-large-min) {
@@ -69,7 +69,7 @@
     }
   }
 
-  &--links {
+  &__links {
     margin-bottom: 1em;
 
     a {
@@ -89,7 +89,7 @@
     }
   }
 
-  &--contact {
+  &__contact {
 
     a {
       font-weight: $fonts-normal;

diff --git a/.../backstop/data/bitmaps_reference/vrt_organisms_FooterSlim_0_rootdiv_0_phone.png b/.../backstop/data/bitmaps_reference/vrt_organisms_FooterSlim_0_rootdiv_0_phone.png
diff --git a/...backstop/data/bitmaps_reference/vrt_organisms_FooterSlim_0_rootdiv_1_tablet.png b/...backstop/data/bitmaps_reference/vrt_organisms_FooterSlim_0_rootdiv_1_tablet.png
diff --git a/react/src/components/molecules/MainNav/index.js b/react/src/components/molecules/MainNav/index.js
@@ -110,16 +110,29 @@ class MainNav extends Component {
       <div className="ma__main-nav">
         <ul className="ma__main-nav__items" role="menubar">
           {mainNav.map((item, index) => {
+            const covidTopLink = item.text.toLowerCase().includes('covid') || false;
             const topItemClasses = classNames({
               'ma__main-nav__item': true,
               'is-active': item.active,
-              'has-subnav': item.subNav
+              'has-subnav': item.subNav && !covidTopLink
             });
             const buttonId = `button${index}`;
             const liId = `li${index}`;
             const isExpanded = navSelected === liId;
             const itemBody = [];
-            if (item.subNav) {
+            if (covidTopLink) {
+              const covidTopLinkProps = {
+                index,
+                className: classNames([
+                  'ma__main-nav__top-link',
+                  'cv-alternate-style'
+                ]),
+                role: 'menuitem',
+                key: buttonId,
+                href: item.href
+              };
+              itemBody.push(<a {...covidTopLinkProps}>{item.text}</a>);
+            } else if (item.subNav) {
               const buttonProps = {
                 id: buttonId,
                 index,
@@ -175,17 +188,17 @@ class MainNav extends Component {
                     }
                   </ul>
                 </div>));
-            } else {
-              const buttonProps = {
-                id: buttonId,
-                className: 'ma__main-nav__top-link',
-                'aria-haspopup': 'true',
-                key: buttonId,
-                role: 'menuitem',
-                'aria-label': (isExpanded) ? `Hide submenu for ${item.text}` : `Show submenu for ${item.text}`
-              };
-              itemBody.push(<button {...buttonProps}>{item.text}</button>);
-            }
+              } else {
+                const buttonProps = {
+                  id: buttonId,
+                  className: 'ma__main-nav__top-link',
+                  'aria-haspopup': 'true',
+                  key: buttonId,
+                  role: 'menuitem',
+                  'aria-label': (isExpanded) ? `Hide submenu for ${item.text}` : `Show submenu for ${item.text}`
+                };
+                itemBody.push(<button {...buttonProps}>{item.text}</button>);
+              }
             return(
               /* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */
               <li

diff --git a/react/src/components/organisms/FooterSlim/FooterSlim.stories.js b/react/src/components/organisms/FooterSlim/FooterSlim.stories.js
@@ -25,7 +25,7 @@ storiesOf('organisms', module)
       };
       const props = {
         title: text('title', 'Massachusetts Executive Office of Eductation (EDU)'),
-        description: text('description', "The Department of Early Education and Care'&apos;'s mission is to support the healthy growth and development of all children by providing high quality programs and resources for families"),
+        description: text('description', "The Department of Early Education and Care's mission is to support the healthy growth and development of all children by providing high quality programs and resources for families"),
         links: object('links', [
           { href: '#', title: 'Lead Agencies Policies' },
           { href: '#', title: 'Child Care Licensing Procedures' }

diff --git a/react/src/components/organisms/FooterSlim/index.js b/react/src/components/organisms/FooterSlim/index.js
@@ -7,28 +7,28 @@ import Icon from '../../base/Icon';
 import './style.css';
 
 const FooterSlim = (props) => (
-  <footer className="ma__footer_slim" id="footer">
-    <div className="ma__footer_slim--container ma__container">
+  <footer className="ma__footer-slim" id="footer">
+    <div className="ma__footer-slim__container ma__container">
       {props.siteLogo}
-      <div className="ma__footer_slim--container-inner">
-        <section className="ma__footer_slim--info">
-          <h3>{props.title }</h3>
+      <div className="ma__footer-slim__container__inner">
+        <div className="ma__footer-slim__info">
+          <div className="ma__footer-slim__title">{props.title }</div>
           <p>{props.description }</p>
-          <p className="ma__footer_slim--copyright">
+          <p className="ma__footer-slim__copyright">
             &copy; {moment().year()} Commonwealth of Massachusetts
           </p>
-        </section>
-        <section className="ma__footer_slim--details">
+        </div>
+        <div className="ma__footer-slim__details">
           {props.links &&
-            <div className="ma__footer_slim--links">
+            <div className="ma__footer-slim__links">
               {props.links.map((link, linkIndex) => (
                 /* eslint-disable-next-line react/no-array-index-key */
                 <a href={link.href} key={`footslimlinks-${linkIndex}`}>{link.title}</a>
               ))}
             </div>
           }
           {props.contact &&
-            <div className="ma__footer_slim--contact">
+            <div className="ma__footer-slim__contact">
               {props.contact.address &&
               <p>
                 <Icon name="marker" svgWidth={20} svgHeight={20} />
@@ -49,7 +49,7 @@ const FooterSlim = (props) => (
               }
             </div>
           }
-        </section>
+        </div>
       </div>
     </div>
   </footer>
-Original file line number
+Diff line change
@@ Expand Up / @@ -53,6 +53,7 @@ @@
     }
     @mixin ma-heading($level: 1) {
+      font-weight: $fonts-bold;
       @if ($level == 1) {
@@ Expand Down @@