Merge branch 'main' into cfgov-footer_external-link-spacing

package.json

@@ -49,12 +49,12 @@
     "@cfpb/cfpb-expandables": "^0.35.0",
     "@cfpb/cfpb-forms": "^0.35.0",
     "@cfpb/cfpb-icons": "^1.2.0",
-    "@tanstack/react-query": "4.13.5",
+    "@tanstack/react-query": "^4.13.5",
     "classnames": "^2.3.2",
     "display-element-css": "cfpb/storybook-addon-display-element-css",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-router-dom": "6.3.0",
+    "react-router-dom": "^6.3.0",
     "react-select": "^5.7.2"
   },
   "devDependencies": {
@@ -108,6 +108,7 @@
     "eslint-plugin-testing-library": "5.9.1",
     "eslint-plugin-unicorn": "45.0.2",
     "husky": "8.0.2",
+    "jest-matchmedia-mock": "1.1.0",
     "jsdom": "21.0.0",
     "less": "^4.1.3",
     "lint-staged": "13.0.3",

src/components/Banner/Banner.less

@@ -41,6 +41,13 @@
       float: left;
     }
 
+    .wrapper__match-content {
+      padding-left: @space-sm;
+      @media (min-width: 600px) {
+        padding-left: @space-md;
+      }
+    }
+
     .m-global-eyebrow_languages {
       text-align: right;
     }

src/components/Footer/Footer.less

@@ -195,4 +195,18 @@
 
 .o-footer .cf-icon-svg__external-link {
   margin-left: 3px;
-}
+}
+
+@media (max-width: @bp-sm-min - 1) {
+  .o-footer {
+    .m-list_link,
+    .o-footer-post,
+    .m-social-media {
+      padding-left: @space-sm;
+    }
+
+    .o-footer_top-button {
+      width: 95%;
+    }
+  }
+}

src/components/Navbar/Navbar.tsx

@@ -41,7 +41,7 @@ interface NavbarProperties {
 export default function Navbar({ links, href }: NavbarProperties): JSX.Element {
   return (
     <div className='o-header_content'>
-      <div className='navbar wrapper wrapper__match-content'>
+      <div className='navbar-static wrapper wrapper__match-content'>
         <CfpbLogo href={href} />
         <div className='nav-items'>
           <Links elements={links} />

src/components/Navbar/navbar.less

@@ -2,17 +2,19 @@
 
 @breakpoint: 56.3125em;
 
-.navbar {
+.navbar-static {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   font-size: 16px;
   padding-bottom: @space-sm;
+  padding-left: @space-sm;
 
   @media (min-width: @breakpoint) {
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
+    padding-left: 0;
 
     .o-header_logo {
       min-width: 237px;

src/components/PageHeader/PageHeader.tsx

@@ -1,7 +1,7 @@
 import classnames from 'classnames';
 import { Banner } from '../Banner/Banner';
-import type { User } from '../Navbar/Navbar';
-import Navbar from '../Navbar/Navbar';
+import type { User } from '../ResponsiveMenu/ResponsiveMenu';
+import ResponsiveMenu from '../ResponsiveMenu/ResponsiveMenu';
 import './header.less';
 
 interface PageHeaderProperties {
@@ -23,7 +23,7 @@ export default function PageHeader({
   return (
     <header className={classnames(headerClasses)}>
       <Banner tagline='An official website of the United States government' />
-      <Navbar {...{ links, user, href }} />
+      <ResponsiveMenu {...{ links, user, href }} />
     </header>
   );
 }

src/components/PageHeader/header.less

@@ -33,7 +33,7 @@
 }
 @media only all and (min-width: 56.3125em) {
   .o-header_content {
-    padding-top: 0.9375em;
+    padding: 0.9375em 0;
   }
   .o-header_content > .wrapper > .m-global-header-cta,
   .o-header_content > .content_wrapper > .m-global-header-cta {

src/components/ResponsiveMenu/ResponsiveMenu.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ResponsiveMenu } from '~/src/index';
+import '../PageHeader/header.less';
+import { ExampleLinks } from './ResponsiveMenu';
+
+const meta: Meta<typeof ResponsiveMenu> = {
+  title: 'Components (Draft)/ResponsiveMenu',
+  tags: ['autodocs'],
+  component: ResponsiveMenu,
+  argTypes: {}
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const LoggedIn: Story = {
+  args: {
+    links: ExampleLinks
+  }
+};
+
+export const LoggedOut: Story = {
+  args: {}
+};
+
+export const NoUser: Story = {
+  args: {}
+};

src/components/ResponsiveMenu/ResponsiveMenu.test.tsx

@@ -0,0 +1,114 @@
+import '@testing-library/jest-dom';
+import { fireEvent, render, screen } from '@testing-library/react';
+import matchMediaMock from 'jest-matchmedia-mock';
+import ResponsiveMenu, { ExampleLinks } from './ResponsiveMenu';
+
+let matchMedia: matchMediaMock;
+
+describe('ResponsiveMenu', () => {
+  beforeAll(() => {
+    matchMedia = new matchMediaMock();
+  });
+
+  afterEach(() => {
+    matchMedia.clear();
+  });
+
+  const resizeScreenSize = (width: number) => {
+    Object.defineProperty(window, 'innerWidth', {
+      writable: true,
+      configurable: true,
+      value: width
+    });
+    window.dispatchEvent(new Event('resize'));
+  };
+
+   it('does not render the menu without links', () => {
+     resizeScreenSize(500);
+     render(<ResponsiveMenu />);
+
+     expect(screen.queryByTestId('menu-toggle')).not.toBeInTheDocument();
+     expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
+
+     expect(screen.getByTestId('CfpbLogoLink')).toBeInTheDocument();
+     expect(screen.getByAltText('CFPB Logo')).toBeInTheDocument();
+   });
+
+   it('renders with custom links', () => {
+     resizeScreenSize(500);
+     render(<ResponsiveMenu links={ExampleLinks} />);
+
+     // Menu is rendered
+     const menuToggle = screen.getAllByRole('button')[0];
+     expect(menuToggle).toBeInTheDocument();
+     expect(screen.getByRole('navigation')).toBeInTheDocument();
+
+     // Links are rendered
+     expect(screen.getByText('Home')).toBeInTheDocument();
+     expect(screen.getByText('Filing')).toBeInTheDocument();
+     expect(screen.getByText('John Sample')).toBeInTheDocument();
+     expect(screen.getByText('LOG OUT')).toBeInTheDocument();
+   });
+
+  it('toggles menu visibility on button click', () => {
+    resizeScreenSize(500);
+
+    render(<ResponsiveMenu links={ExampleLinks} />);
+    const menuToggle = screen.getAllByRole('button')[0];
+    const navItems = screen.getByRole('navigation');
+    expect(navItems).not.toHaveClass('open');
+    expect(menuToggle).toHaveAttribute('aria-expanded', 'false');
+
+    fireEvent.click(menuToggle);
+
+    expect(navItems).toHaveClass('open');
+    expect(menuToggle).toHaveAttribute('aria-expanded', 'true');
+    expect(menuToggle.querySelector('.sr-only')).toHaveTextContent(
+      'Close menu'
+    );
+
+    fireEvent.click(menuToggle);
+
+    expect(navItems).not.toHaveClass('open');
+    expect(menuToggle).toHaveAttribute('aria-expanded', 'false');
+    expect(menuToggle.querySelector('.sr-only')).toHaveTextContent('Open menu');
+  });
+
+  it('closes menu when clicking overlay', () => {
+    render(<ResponsiveMenu links={ExampleLinks} />);
+    const menuToggle = screen.getAllByRole('button')[0];
+    fireEvent.click(menuToggle);
+
+    const overlay = screen.getByLabelText('Close menu');
+    fireEvent.click(overlay);
+
+    expect(screen.getByRole('navigation')).not.toHaveClass('open');
+  });
+
+  it('closes menu when clicking a link', () => {
+    render(<ResponsiveMenu links={ExampleLinks} />);
+    const menuToggle = screen.getAllByRole('button')[0];
+    fireEvent.click(menuToggle);
+
+    const link = screen.getByText('Home');
+    fireEvent.click(link);
+
+    expect(screen.getByRole('navigation')).not.toHaveClass('open');
+  });
+
+  it('applies active class to the current page link', () => {
+    render(<ResponsiveMenu links={ExampleLinks} />);
+    const menuToggle = screen.getAllByRole('button')[0];
+
+    const activeLink = screen.getByText('Filing');
+    expect(activeLink).toHaveClass('active');
+  });
+
+  it('renders CFPB logo with custom href', () => {
+    const customHref = 'https://example.com';
+    render(<ResponsiveMenu href={customHref} />);
+
+    const logoLink = screen.getByTestId('CfpbLogoLink');
+    expect(logoLink).toHaveAttribute('href', customHref);
+  });
+});