From f0ca0f14fd92de80ef16fb32d2842b3449dd89d9 Mon Sep 17 00:00:00 2001 From: Minghua Sun Date: Thu, 13 Aug 2020 09:15:47 -0400 Subject: [PATCH 1/7] fix markup semantic --- react/src/components/organisms/FooterSlim/index.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/react/src/components/organisms/FooterSlim/index.js b/react/src/components/organisms/FooterSlim/index.js index fede0d9b08..d4ad1db6b1 100644 --- a/react/src/components/organisms/FooterSlim/index.js +++ b/react/src/components/organisms/FooterSlim/index.js @@ -11,14 +11,14 @@ const FooterSlim = (props) => (
{props.siteLogo}
-
-

{props.title }

+
+
{props.title }

{props.description }

© {moment().year()} Commonwealth of Massachusetts

-
-
+
+
{props.links &&
{props.links.map((link, linkIndex) => ( @@ -49,7 +49,7 @@ const FooterSlim = (props) => ( }
} - +
From 084bba670c636d176e90beb5e373b1e191b20f0b Mon Sep 17 00:00:00 2001 From: Minghua Sun Date: Thu, 13 Aug 2020 10:06:33 -0400 Subject: [PATCH 2/7] fix styles --- .../scss/00-base/mixins/_ma-typography.scss | 1 + assets/scss/01-atoms/global/_elements.scss | 1 - assets/scss/03-organisms/_footer-slim.scss | 29 ++++++++----------- .../FooterSlim/FooterSlim.stories.js | 2 +- 4 files changed, 14 insertions(+), 19 deletions(-) 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..a5d116c84a 100644 --- a/assets/scss/03-organisms/_footer-slim.scss +++ b/assets/scss/03-organisms/_footer-slim.scss @@ -18,27 +18,12 @@ 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; - } } } } @@ -54,9 +39,19 @@ &--info { max-width: 500px; + } - h3 { - font-size: $fonts-small; + &--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; } } 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' } From 7c907265a1fc54e94484ba86ee8f302e4d725e7c Mon Sep 17 00:00:00 2001 From: Minghua Sun Date: Thu, 13 Aug 2020 10:29:52 -0400 Subject: [PATCH 3/7] name classes with correct BEM structure --- assets/scss/03-organisms/_footer-slim.scss | 16 ++++++++-------- .../components/organisms/FooterSlim/index.js | 18 +++++++++--------- 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/assets/scss/03-organisms/_footer-slim.scss b/assets/scss/03-organisms/_footer-slim.scss index a5d116c84a..85ea72d013 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,10 +10,10 @@ @include ma-container; } - &--container { + &__container { position: relative; - &-inner { + &__inner { display: flex; flex-direction: column; padding-top: 0.5rem; @@ -37,11 +37,11 @@ } } - &--info { + &__info { max-width: 500px; } - &--title { + &__title { @include ma-heading(3); font-size: $fonts-small; @@ -55,7 +55,7 @@ } } - &--details { + &__details { margin-top: 2rem; @media ($bp-large-min) { @@ -64,7 +64,7 @@ } } - &--links { + &__links { margin-bottom: 1em; a { @@ -84,7 +84,7 @@ } } - &--contact { + &__contact { a { font-weight: $fonts-normal; diff --git a/react/src/components/organisms/FooterSlim/index.js b/react/src/components/organisms/FooterSlim/index.js index d4ad1db6b1..a09a9c178f 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) => ( -