(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
massgov · Aug 13, 2020 · 34a4098 · 34a4098
1 parent bd7b1d6
commit 34a4098
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 37 deletions.
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/changelogs/issue-1146.yml b/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
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/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>