From b9722b919ea92315b7a071ebe22d780ba755f32c Mon Sep 17 00:00:00 2001 From: Virginia Czosek Date: Wed, 6 May 2026 12:43:31 -0700 Subject: [PATCH 1/7] Add footer variants --- src/components/Footer/back-to-top.tsx | 19 ++- src/components/Footer/footer-cf-gov.tsx | 4 +- src/components/Footer/footer-links.tsx | 9 +- src/components/Footer/footer.scss | 145 ++++++++++++++++------- src/components/Footer/footer.stories.tsx | 37 +++++- src/components/Footer/footer.tsx | 75 ++++++++++-- src/index.ts | 2 +- 7 files changed, 220 insertions(+), 71 deletions(-) diff --git a/src/components/Footer/back-to-top.tsx b/src/components/Footer/back-to-top.tsx index 47eb71d5fd..b400cedd71 100644 --- a/src/components/Footer/back-to-top.tsx +++ b/src/components/Footer/back-to-top.tsx @@ -1,15 +1,12 @@ import { JSX } from 'react'; /* eslint-disable jsx-a11y/anchor-is-valid */ -import { Icon } from '../Icon/icon'; - +import Link from '~/src/components/Link/link'; export const BackToTop = (): JSX.Element => ( - - Back to top - - + ); diff --git a/src/components/Footer/footer-cf-gov.tsx b/src/components/Footer/footer-cf-gov.tsx index 60f5915f51..ab886dba27 100644 --- a/src/components/Footer/footer-cf-gov.tsx +++ b/src/components/Footer/footer-cf-gov.tsx @@ -1,6 +1,6 @@ import { JSX } from 'react'; import { Icon } from '../Icon/icon'; -import Footer from './footer'; +import {WebsiteFooter} from './footer'; interface FootCfGovProperties { cfLink?: string; @@ -163,7 +163,7 @@ export const FooterCfGov = ({ ]; return ( - ); } diff --git a/src/index.ts b/src/index.ts index 3a0810699f..4f09e4a611 100644 --- a/src/index.ts +++ b/src/index.ts @@ -13,7 +13,7 @@ export { Divider } from './components/Divider/divider'; export { Expandable } from './components/Expandable/expandable'; export { ExpandableGroup } from './components/Expandable/expandable-group'; export { Fieldset } from './components/Fieldset/fieldset'; -export { default as Footer } from './components/Footer/footer'; +export { Footer, WebsiteFooter, AppFooter } from './components/Footer/footer'; export { FooterCfGov } from './components/Footer/footer-cf-gov'; export { default as Grid } from './components/Grid'; export { Header } from './components/Header/header'; From 5983b42bc6303cb2b017dd79d97e6c41e518cc08 Mon Sep 17 00:00:00 2001 From: Virginia Czosek Date: Thu, 7 May 2026 12:12:03 -0700 Subject: [PATCH 2/7] Update footer styles and tests --- src/components/Footer/back-to-top.tsx | 1 + src/components/Footer/footer.scss | 8 ++-- src/components/Footer/footer.stories.tsx | 6 +-- src/components/Footer/footer.test.tsx | 59 ++++++++++++++++++++++-- src/components/Footer/footer.tsx | 8 ++-- src/index.ts | 2 +- 6 files changed, 66 insertions(+), 18 deletions(-) diff --git a/src/components/Footer/back-to-top.tsx b/src/components/Footer/back-to-top.tsx index b400cedd71..59b2719e43 100644 --- a/src/components/Footer/back-to-top.tsx +++ b/src/components/Footer/back-to-top.tsx @@ -7,6 +7,7 @@ export const BackToTop = (): JSX.Element => ( className='a-btn--secondary a-btn--full-on-xs o-footer__top-button u-show-on-mobile u-mb30' data-gtm_ignore='true' data-js-hook='behavior_return-to-top' + data-testid='back-to-top' href='#' iconRight='arrow-up'/> ); diff --git a/src/components/Footer/footer.scss b/src/components/Footer/footer.scss index 2122a78991..f0ce53024c 100644 --- a/src/components/Footer/footer.scss +++ b/src/components/Footer/footer.scss @@ -32,22 +32,20 @@ } .o-footer { - font-weight: 500; - // Adding an extra 5px to the top to account for the absolute positioned // social media icons. - padding-top: math.div(50px, $base-font-size-px) + rem; + padding-top: math.div($grid-gutter-width * 1.5, $base-font-size-px) + rem; // There is a 10px margin-bottom on the last .o-footer__list li's, plus the // 50px bottom padding = 60px of total padding at the bottom of the footer. - padding-bottom: math.div(50px, $base-font-size-px) + rem; + padding-bottom: math.div($grid-gutter-width * 2, $base-font-size-px) + rem; border-top: 5px solid var(--green); background: var(--gray-5); // Mobile only. @include respond-to-max($bp-xs-max) { // Tighten top spacing on mobile. - padding-top: math.div(30px, $base-font-size-px) + rem; + padding-top: math.div($grid-gutter-width, $base-font-size-px) + rem; .m-list__link { display: block; diff --git a/src/components/Footer/footer.stories.tsx b/src/components/Footer/footer.stories.tsx index 3de417d61e..1ef8cfb15c 100644 --- a/src/components/Footer/footer.stories.tsx +++ b/src/components/Footer/footer.stories.tsx @@ -1,6 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react-vite'; import { JSX } from 'react'; -import { Footer, AppFooter, WebsiteFooter, FooterCfGov, Icon, Link } from '~/src/index'; +import { Footer, ApplicationFooter, WebsiteFooter, FooterCfGov, Icon, Link } from '~/src/index'; const meta: Meta = { title: 'Components (Draft)/Footers', @@ -42,12 +42,12 @@ export const Example: Story = { export const App: Story = { name: 'Application footer', - render: (properties) => , + render: (properties) => , args: { navLinks: [makeLink('relevant link one'), makeLink('link two')], footerContent: <> -

Data usage

+

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Link diff --git a/src/components/Footer/footer.test.tsx b/src/components/Footer/footer.test.tsx index 5f59633cd3..ea8bfd594e 100644 --- a/src/components/Footer/footer.test.tsx +++ b/src/components/Footer/footer.test.tsx @@ -1,10 +1,19 @@ import '@testing-library/jest-dom'; import { render, screen } from '@testing-library/react'; -import Footer from './footer'; +import {Footer, ApplicationFooter, WebsiteFooter} from './footer'; describe('Footer', () => { + it('Renders with content', () => { + render(

Footer content

); + const basicFooter = screen.getByTestId('basic-footer'); + expect(basicFooter).toHaveClass('o-footer'); + expect(basicFooter).toHaveTextContent('Footer content'); + }); +}); + +describe('WebsiteFooter', () => { it('Skips empty lists', () => { - render(