Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

(React) [FooterSlim] fix markup semantic #1148

Merged
merged 7 commits into from
Aug 13, 2020
Merged

(React) [FooterSlim] fix markup semantic #1148

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f0ca0f1
fix markup semantic
clairesunstudio Aug 13, 2020
084bba6
fix styles
clairesunstudio Aug 13, 2020
7c90726
name classes with correct BEM structure
clairesunstudio Aug 13, 2020
8df46b9
fix
clairesunstudio Aug 13, 2020
f53a409
visual regression fix
clairesunstudio Aug 13, 2020
ed39120
add changelog
clairesunstudio Aug 13, 2020
029f38f
approve screenshots
clairesunstudio Aug 13, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions assets/scss/00-base/mixins/_ma-typography.scss
View file
Open in desktop
Original file line number Diff 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
1 change: 0 additions & 1 deletion assets/scss/01-atoms/global/_elements.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,6 @@ ol {
h#{$i} {
margin-top: 0;
color: $c-font-heading;
font-weight: $fonts-bold;

@include ma-heading($i);
}
Expand Down
48 changes: 24 additions & 24 deletions assets/scss/03-organisms/_footer-slim.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.ma__footer_slim {
.ma__footer-slim {
background-color: $c-platinum-gray;
font-size: $fonts-small;
line-height: 1.2;
Expand All @@ -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;
}
}
}
}
Expand All @@ -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) {
Expand All @@ -69,7 +69,7 @@
}
}

&--links {
&__links {
margin-bottom: 1em;

a {
Expand All @@ -89,7 +89,7 @@
}
}

&--contact {
&__contact {

a {
font-weight: $fonts-normal;
Expand Down
6 changes: 6 additions & 0 deletions changelogs/issue-1146.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
Fixed:
- project: React, Assets
component: FooterSlim
description: Fix markup semantic and classnames. (#1148)
issue: #1146
impact: Patch
Binary file modified .../backstop/data/bitmaps_reference/vrt_organisms_FooterSlim_0_rootdiv_0_phone.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...backstop/data/bitmaps_reference/vrt_organisms_FooterSlim_0_rootdiv_1_tablet.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion react/src/components/organisms/FooterSlim/FooterSlim.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' }
Expand Down
22 changes: 11 additions & 11 deletions react/src/components/organisms/FooterSlim/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand All @@ -49,7 +49,7 @@ const FooterSlim = (props) => (
}
</div>
}
</section>
</div>
</div>
</div>
</footer>
Expand Down