(React) [FooterSlim] fix markup semantic (#1148)

* fix markup semantic

* fix styles

* name classes with correct BEM structure

* fix

* visual regression fix

* add changelog

* approve screenshots

assets/scss/00-base/mixins/_ma-typography.scss

@@ -53,6 +53,7 @@
 }
 
 @mixin ma-heading($level: 1) {
+  font-weight: $fonts-bold;
 
   @if ($level == 1) {
 

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);
   }

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;

changelogs/issue-1146.yml

@@ -0,0 +1,6 @@
+Fixed:
+  - project: React, Assets
+    component: FooterSlim
+    description: Fix markup semantic and classnames. (#1148)
+    issue: #1146
+    impact: Patch

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'''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' }

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>