mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-08-06 09:54:19 -07:00
Fix footer alignment (#564)
* Fix footer alignment * Can't really tweak alignment using trusswork's library. * Reimplement parts of layout to control grid better. * Removed trusswork's weird mobile expanding footer menu. * Update snapshot * Add some extra bottom padding for mobile view * Replace fork of trussworks react/uswds with ^2.0.0 Since we're not using trusswork's `<Footer>` component anymore, we should be able to stop using our branch that fixes issues it has with Gatsby.
This commit is contained in:
TomNUSDS
GitHub
parent
b32fd6ddcb
commit
55b37fe448
5 changed files with 201 additions and 187 deletions
5
client/package-lock.json
generated
5
client/package-lock.json
generated
|
|
@ -2640,8 +2640,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"@trussworks/react-uswds": {
|
||||
"version": "git+https://git@github.com/nathillardusds/react-uswds.git#42b1907d172373cbcd5730d75c335b0c98cbeccf",
|
||||
"from": "@trussworks/react-uswds@git+https://git@github.com/nathillardusds/react-uswds#nathillardusds/ssr"
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@trussworks/react-uswds/-/react-uswds-2.0.0.tgz",
|
||||
"integrity": "sha512-kWLAvAbl/wvFYyM4Y9Uo8AZTOpap/aTu7ckCzz/Lq9Na8jlx5prP3zAyviK9LGHsuCEQ7bUX57/FJMtJukEuKA=="
|
||||
},
|
||||
"@trysound/sax": {
|
||||
"version": "0.1.1",
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@
|
|||
"ts-jest": "^27.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@trussworks/react-uswds": "git+https://git@github.com/nathillardusds/react-uswds#nathillardusds/ssr",
|
||||
"@trussworks/react-uswds": "^2.0.0",
|
||||
"@turf/bbox": "^6.5.0",
|
||||
"chroma-js": "^2.1.2",
|
||||
"d3-ease": "^3.0.1",
|
||||
|
|
|
|||
|
|
@ -1,17 +1,15 @@
|
|||
import React from 'react';
|
||||
import {
|
||||
Address,
|
||||
Footer,
|
||||
FooterNav,
|
||||
Logo,
|
||||
GridContainer, Grid,
|
||||
} from '@trussworks/react-uswds';
|
||||
import {} from '@trussworks/react-uswds';
|
||||
import {NavList} from '@trussworks/react-uswds';
|
||||
import {useIntl} from 'gatsby-plugin-intl';
|
||||
import {defineMessages} from 'react-intl';
|
||||
|
||||
// @ts-ignore
|
||||
import whitehouseIcon from '../images/eop-seal.svg';
|
||||
import J40MainGridContainer from './J40MainGridContainer';
|
||||
|
||||
const J40Footer = () => {
|
||||
const intl = useIntl();
|
||||
|
|
@ -58,18 +56,7 @@ const J40Footer = () => {
|
|||
},
|
||||
});
|
||||
|
||||
// see https://designsystem.digital.gov/components/footer/
|
||||
return (
|
||||
<>
|
||||
<Footer
|
||||
size="big"
|
||||
className={'j40-footer'}
|
||||
primary={
|
||||
<GridContainer><Grid>
|
||||
<FooterNav
|
||||
aria-label={intl.formatMessage(messages.arialabelfooter)}
|
||||
size="big" // fyi you leave this off and it silently fails...
|
||||
links={[
|
||||
const NAVLINKS = [
|
||||
['Contact',
|
||||
<Address
|
||||
key={'footeraddress'}
|
||||
|
|
@ -112,10 +99,30 @@ const J40Footer = () => {
|
|||
{intl.formatMessage(messages.contactlink)}
|
||||
</a>,
|
||||
],
|
||||
]}
|
||||
/>
|
||||
</Grid></GridContainer>}
|
||||
secondary={
|
||||
];
|
||||
|
||||
// see https://designsystem.digital.gov/components/footer/
|
||||
return (
|
||||
// we cannot use trussworks Footer because it doesn't layout correct
|
||||
// and there's no easy way to override. It comes down to the
|
||||
// `className="mobile-lg:grid-col-6 desktop:grid-col-3">` needs to be
|
||||
// `className="mobile-lg:grid-col-12 desktop:grid-col-4">` ugh.
|
||||
<footer className={'j40-footer'}>
|
||||
<div className="usa-footer__primary-section">
|
||||
<J40MainGridContainer>
|
||||
<div className={'grid-row grid-gap-4 padding-bottom-6 tablet-lg:grid-col4'}>
|
||||
{NAVLINKS.map((links, i) => (
|
||||
<div key={`linkSection-${i}`}
|
||||
className="mobile-lg:grid-col-12 desktop:grid-col-4">
|
||||
<NavSection links={links} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</J40MainGridContainer>
|
||||
</div>
|
||||
|
||||
<div className="usa-footer__secondary-section">
|
||||
<J40MainGridContainer>
|
||||
<Logo
|
||||
size="medium"
|
||||
key={'logoimg'}
|
||||
|
|
@ -129,9 +136,24 @@ const J40Footer = () => {
|
|||
heading={<p
|
||||
className={'j40-footer-logo-heading'}>
|
||||
{intl.formatMessage(messages.logotitle)}</p>}
|
||||
/>}
|
||||
/>
|
||||
</>
|
||||
</J40MainGridContainer>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
const NavSection = ({
|
||||
links,
|
||||
}: {
|
||||
links: React.ReactNode[]
|
||||
}): React.ReactElement => {
|
||||
const [primaryLinkOrHeading, ...secondaryLinks] = links;
|
||||
return (
|
||||
<section className={'usa-footer__primary-content'}>
|
||||
<h4 className="padding-top-1 padding-bottom-0">{primaryLinkOrHeading}</h4>
|
||||
<NavList className={'padding-bottom-4'} type="footerSecondary" items={secondaryLinks} />
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ const J40MainGridContainer = ({
|
|||
children,
|
||||
fullWidth = false,
|
||||
blueBackground = false,
|
||||
className = 'j40-grid-container '}: ILayoutProps) => {
|
||||
className = ''}: ILayoutProps) => {
|
||||
// is it a blue background strip?
|
||||
className += (blueBackground ? 'j40-main-grid-blue-bk ' : '');
|
||||
|
||||
|
|
|
|||
|
|
@ -3,39 +3,31 @@
|
|||
exports[`J40Footer renders correctly 1`] = `
|
||||
<DocumentFragment>
|
||||
<footer
|
||||
class="usa-footer usa-footer--big j40-footer"
|
||||
class="j40-footer"
|
||||
>
|
||||
<div
|
||||
class="usa-footer__primary-section"
|
||||
>
|
||||
<div
|
||||
class="grid-container"
|
||||
class="grid-container-desktop-lg j40-grid-container "
|
||||
data-testid="gridContainer"
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
data-testid="grid"
|
||||
>
|
||||
<nav
|
||||
aria-label="Footer navigation"
|
||||
class="usa-footer__nav"
|
||||
class="grid-row grid-gap-4 padding-bottom-6 tablet-lg:grid-col4"
|
||||
>
|
||||
<div
|
||||
class="grid-row grid-gap-4"
|
||||
>
|
||||
<div
|
||||
class="mobile-lg:grid-col-6 desktop:grid-col-3"
|
||||
class="mobile-lg:grid-col-12 desktop:grid-col-4"
|
||||
>
|
||||
<section
|
||||
class="usa-footer__primary-content usa-footer__primary-content--collapsible"
|
||||
class="usa-footer__primary-content"
|
||||
>
|
||||
<h4
|
||||
class="usa-footer__primary-link"
|
||||
class="padding-top-1 padding-bottom-0"
|
||||
>
|
||||
Contact
|
||||
</h4>
|
||||
<ul
|
||||
class="usa-list usa-list--unstyled"
|
||||
class="usa-list usa-list--unstyled padding-bottom-4"
|
||||
>
|
||||
<li
|
||||
class="usa-footer__secondary-link"
|
||||
|
|
@ -68,18 +60,18 @@ exports[`J40Footer renders correctly 1`] = `
|
|||
</section>
|
||||
</div>
|
||||
<div
|
||||
class="mobile-lg:grid-col-6 desktop:grid-col-3"
|
||||
class="mobile-lg:grid-col-12 desktop:grid-col-4"
|
||||
>
|
||||
<section
|
||||
class="usa-footer__primary-content usa-footer__primary-content--collapsible"
|
||||
class="usa-footer__primary-content"
|
||||
>
|
||||
<h4
|
||||
class="usa-footer__primary-link"
|
||||
class="padding-top-1 padding-bottom-0"
|
||||
>
|
||||
More information
|
||||
</h4>
|
||||
<ul
|
||||
class="usa-list usa-list--unstyled"
|
||||
class="usa-list usa-list--unstyled padding-bottom-4"
|
||||
>
|
||||
<li
|
||||
class="usa-footer__secondary-link"
|
||||
|
|
@ -118,18 +110,18 @@ exports[`J40Footer renders correctly 1`] = `
|
|||
</section>
|
||||
</div>
|
||||
<div
|
||||
class="mobile-lg:grid-col-6 desktop:grid-col-3"
|
||||
class="mobile-lg:grid-col-12 desktop:grid-col-4"
|
||||
>
|
||||
<section
|
||||
class="usa-footer__primary-content usa-footer__primary-content--collapsible"
|
||||
class="usa-footer__primary-content"
|
||||
>
|
||||
<h4
|
||||
class="usa-footer__primary-link"
|
||||
class="padding-top-1 padding-bottom-0"
|
||||
>
|
||||
Have a question about government services?
|
||||
</h4>
|
||||
<ul
|
||||
class="usa-list usa-list--unstyled"
|
||||
class="usa-list usa-list--unstyled padding-bottom-4"
|
||||
>
|
||||
<li
|
||||
class="usa-footer__secondary-link"
|
||||
|
|
@ -144,15 +136,14 @@ exports[`J40Footer renders correctly 1`] = `
|
|||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="usa-footer__secondary-section"
|
||||
>
|
||||
<div
|
||||
class="grid-container"
|
||||
class="grid-container-desktop-lg j40-grid-container "
|
||||
data-testid="gridContainer"
|
||||
>
|
||||
<div
|
||||
class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2 j40-footer-logo"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue