diff --git a/assets/scss/00-base/mixins/_ma-typography.scss b/assets/scss/00-base/mixins/_ma-typography.scss index 21393370d9..31d19c7398 100644 --- 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 index a99a435c83..dd47c014f9 100644 --- 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 index 7511ded301..1246f0814f 100644 --- 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 new file mode 100644 index 0000000000..03af5fa858 --- /dev/null +++ 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/react/backstop/data/bitmaps_reference/vrt_organisms_FooterSlim_0_rootdiv_0_phone.png b/react/backstop/data/bitmaps_reference/vrt_organisms_FooterSlim_0_rootdiv_0_phone.png index d1711c3509..71426ac33a 100644 Binary files a/react/backstop/data/bitmaps_reference/vrt_organisms_FooterSlim_0_rootdiv_0_phone.png and b/react/backstop/data/bitmaps_reference/vrt_organisms_FooterSlim_0_rootdiv_0_phone.png differ diff --git a/react/backstop/data/bitmaps_reference/vrt_organisms_FooterSlim_0_rootdiv_1_tablet.png b/react/backstop/data/bitmaps_reference/vrt_organisms_FooterSlim_0_rootdiv_1_tablet.png index ce3acbf142..2ca05f6c6e 100644 Binary files a/react/backstop/data/bitmaps_reference/vrt_organisms_FooterSlim_0_rootdiv_1_tablet.png and b/react/backstop/data/bitmaps_reference/vrt_organisms_FooterSlim_0_rootdiv_1_tablet.png differ diff --git a/react/src/components/organisms/FooterSlim/FooterSlim.stories.js b/react/src/components/organisms/FooterSlim/FooterSlim.stories.js index 66a2fe32bd..98a1d5e38b 100644 --- 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'''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 index fede0d9b08..f20d5b95f4 100644 --- a/react/src/components/organisms/FooterSlim/index.js +++ b/react/src/components/organisms/FooterSlim/index.js @@ -7,20 +7,20 @@ import Icon from '../../base/Icon'; import './style.css'; const FooterSlim = (props) => ( -