diff --git a/src/components/FeedbackCard/FeedbackCard.test.tsx b/src/components/FeedbackCard/FeedbackCard.test.tsx index 4472c9fa1..47ec0ea48 100644 --- a/src/components/FeedbackCard/FeedbackCard.test.tsx +++ b/src/components/FeedbackCard/FeedbackCard.test.tsx @@ -16,14 +16,11 @@ describe('Feedback Card component', () => { render() expect( - screen.getByRole('heading', { level: 2, name: 'Got feedback?' }) + screen.getByRole('heading', { level: 3, name: 'Got Feedback?' }) ).toBeInTheDocument() expect( screen.getByRole('link', { name: 'feedback@ussforbit.us' }) ).toBeInTheDocument() - expect( - screen.getByRole('link', { name: 'Send us feedback' }) - ).toBeInTheDocument() }) describe('trackEvent functions called', () => { @@ -48,18 +45,6 @@ describe('Feedback Card component', () => { render() }) - it("calls trackEvent when clicking 'Send us feedback' link", () => { - const link = screen.getByRole('link', { name: 'Send us feedback' }) - - fireEvent.click(link) - - expect(mockTrackEvents).toHaveBeenCalledTimes(1) - expect(mockTrackEvents).toHaveBeenCalledWith( - 'Feedback', - 'Send us feedback' - ) - }) - it("calls trackEvent when clicking 'feedback@ussforbit.us' link", () => { const link = screen.getByRole('link', { name: 'feedback@ussforbit.us' }) diff --git a/src/components/FeedbackCard/FeedbackCard.tsx b/src/components/FeedbackCard/FeedbackCard.tsx index 864d6dcd4..b76c5c440 100644 --- a/src/components/FeedbackCard/FeedbackCard.tsx +++ b/src/components/FeedbackCard/FeedbackCard.tsx @@ -1,7 +1,5 @@ import React from 'react' -import styles from './FeedbackCard.module.scss' - import { useAnalytics } from 'stores/analyticsContext' const FEEDBACK_EMAIL = 'feedback@ussforbit.us' @@ -11,28 +9,19 @@ const FeedbackCard = () => { const { trackEvent } = useAnalytics() return ( -
-

Got feedback?

+
+

Got Feedback?

We’d love to hear it! Contact us at{' '} trackEvent('Feedback', FEEDBACK_EMAIL)}> {FEEDBACK_EMAIL} {' '} to send us your thoughts or schedule an interview.

- trackEvent('Feedback', 'Send us feedback')}> - Send us feedback -
) } diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss index ff180a719..ae827e9ea 100644 --- a/src/components/Footer/Footer.module.scss +++ b/src/components/Footer/Footer.module.scss @@ -6,14 +6,61 @@ color: var(--footer-text); @include u-font-size('body', '2xs'); + .border { + border-bottom: 1px solid var(--footer-border); + padding-right: 0; + height: 1px; + margin: 1rem 1rem 2rem 1rem; + padding: 0 0; + } + + h3 { + color: white; + margin: 0; + font-size: 18px; + } + + p { + color: white; + max-width: 281px; + } + + ul li a, + p { + font-size: 14px; + } + + img { + width: 127px; + max-height: 200px; + } + + .miniRow { + flex-direction: column; + } + + .miniCol { + padding-bottom: 0; + } + :global { - .usa-footer__logo img { - width: 200px; - max-height: 200px; + .usa-footer__secondary-link { + margin-left: 0; + a:hover, + a:focus { + text-decoration: underline; + color: white; + } } - - .grid-col-auto { - align-self: center; + .usa-footer__return-to-top { + background: #000; + a { + color: $theme-ultraviolet-lighter; + &:hover, + &:focus { + color: #fff; + } + } } .usa-footer__secondary-section { @@ -24,6 +71,11 @@ color: var(--footer-text); text-decoration: none; font-weight: 600; + &:hover, + &:focus { + text-decoration: underline; + color: white; + } } } @@ -40,38 +92,67 @@ } } } -} -.footer { - :global { - @media (max-width: 1040px) { - .usa-footer__nav { - width: 100%; - .grid-row.grid-gap { - @include u-margin-x(0); - } - .grid-row { - flex-direction: column; - width: 100%; - } - .grid-col { - @include u-padding-y(2); - @include u-padding-x(0); - &:not(:last-child) { - border-bottom: 2px double var(--footer-border); - } - } - border-bottom: 0px; - } + @include sfds-at-media('desktop') { + .miniCol { + padding-bottom: 0; + flex-direction: row; + } + .miniRow { + flex-direction: row; + } + } + + @include sfds-at-media('tablet-lg') { + //desktop only + h3 { + margin-bottom: 14px; + } + .border { + border-right: 1px solid var(--footer-border); + padding-right: 0; + width: 1px; + height: auto; + border-bottom: 0; + margin-top: 0; + margin-bottom: 0; + } + + .miniCol { + padding-bottom: 1rem; + } + :global { .usa-footer__secondary-section { - flex-direction: column; - } - .usa-footer__primary-content { - border-top: 0px; - } - .usa-list--unstyled > li { - @include u-margin-x(0); + .grid-container { + padding: 2rem; + max-width: 1800px; + } } } } + + //small only + @media (max-width: 1024px) { + h3 { + @include u-padding-y(2); + } + + :global(.grid-row) { + flex-direction: column; + gap: 16px; + } + :global(.grid-col) { + @include u-padding-y(0); + @include u-padding-x(2); + } + .usa-footer__secondary-section { + flex-direction: column; + } + .usa-footer__primary-content { + border-top: 0px; + } + .usa-list--unstyled > li { + @include u-margin-x(0); + } + } } diff --git a/src/components/Footer/Footer.test.tsx b/src/components/Footer/Footer.test.tsx index d1e660daa..e296644ff 100644 --- a/src/components/Footer/Footer.test.tsx +++ b/src/components/Footer/Footer.test.tsx @@ -15,7 +15,7 @@ describe('Footer component', () => { 'alt', 'USSF Portal' ) - expect(screen.getAllByRole('link')).toHaveLength(15) + expect(screen.getAllByRole('link')).toHaveLength(17) }) it('has no a11y violations', async () => { diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index 149a83f3d..423d5ca35 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -1,58 +1,40 @@ import React from 'react' import { Footer as USWDSFooter, - Logo as USWDSFooterLogo, + Grid, + GridContainer, } from '@trussworks/react-uswds' import Link from 'next/link' +import FeedbackCard from '../FeedbackCard/FeedbackCard' import styles from './Footer.module.scss' const PortalLogo = () => { return USSF Portal } +const returnToTop = ( +
+ + Return to top + +
+) + const Footer = () => { return ( } secondary={ -
-
- } - /> - - ©{new Date().getFullYear()} All rights reserved, USSF Portal - -
- -
- - -
+ + + + + + +

Quick Links

+ + +
    +
  • + + Privacy Policy + + (opens in a new window) + + +
    • +
  • + + Section508.gov + + (opens in a new window) + + +
    • +
  • + + Budget and Performance + + (opens in a new window) + + +
    • +
  • + + Orders & Directives + + (opens in a new window) + + +
    • +
  • + + Office of the Inspector General + + (opens in a new window) + + +
    • +
+ + +
    +
  • + + FOIA Requests + + (opens in a new window) + + +
    • +
  • + + No FEAR Act + + (opens in a new window) + + +
    • +
  • + + USA.gov + + (opens in a new window) + + +
    • +
  • + + Sexual Assault Prevention and Response + + (opens in a new window) + + +
    • +
+ + + + + + +

©{new Date().getFullYear()} All rights reserved, USSF Portal

+ + } /> ) diff --git a/src/components/PageNav/PageNav.tsx b/src/components/PageNav/PageNav.tsx index bca9447f5..262e503af 100644 --- a/src/components/PageNav/PageNav.tsx +++ b/src/components/PageNav/PageNav.tsx @@ -40,7 +40,7 @@ const PageNav = () => { )) return ( -