copy logo logic from CF.gov live site

.storybook/themeCFPB.js

@@ -1,5 +1,5 @@
 import { create } from 'storybook/theming/create';
-import CfpbLogo from '../src/assets/images/cfpb-logo.png';
+import CfpbLogo from '../src/assets/images/cfpb-header/logo-237w.png?url';
 
 const colors = {
   black: '#101820',

src/components/Header/responsive-menu.scss

@@ -31,29 +31,27 @@ $max-width: $breakpoint - 0.0625em;
         align-items: center;
       }
 
+      // Slot widths match logo `sizes` on consumerfinance.gov: 161px ≤900px, 237px above.
       .o-header__logo {
-        min-width: 237px;
+        min-width: 161px;
+
+        @media (min-width: $breakpoint) {
+          min-width: 237px;
+        }
 
         @media (max-width: $max-width) {
           border-left: 1px solid var(--gray-40);
           padding-left: 15px;
-          .o-header__logo-img {
-            height: 40px;
-          }
         }
       }
 
       .o-header__logo-img {
-        height: 34px;
+        display: block;
+        height: auto;
+        width: auto;
+        max-width: 100%;
         margin-top: 10px;
         margin-bottom: 10px;
-        vertical-align: middle;
-      }
-
-      @media (min-width: $breakpoint) {
-        .o-header__logo-img {
-          height: 50px;
-        }
       }
 
       .menu-toggle {

src/components/Header/responsive-menu.test.tsx

@@ -35,7 +35,9 @@ describe('ResponsiveMenu', () => {
     expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
 
     expect(screen.getByTestId('CfpbLogoLink')).toBeInTheDocument();
-    expect(screen.getByAltText('CFPB Logo')).toBeInTheDocument();
+    expect(
+      screen.getByAltText('Consumer Financial Protection Bureau'),
+    ).toBeInTheDocument();
   });
 
   it('renders with custom links', () => {

src/components/Header/responsive-menu.tsx

@@ -1,12 +1,27 @@
 import React, { JSX, useCallback, useState } from 'react';
 import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';
-import CFPBLogo from '../../assets/images/cfpb-logo.png';
+import logo161w from '../../assets/images/cfpb-header/logo-161w.png?url';
+import logo237w from '../../assets/images/cfpb-header/logo-237w.png?url';
+import logo322w from '../../assets/images/cfpb-header/logo-322w.png?url';
+import logo474w from '../../assets/images/cfpb-header/logo-474w.png?url';
+import logo483w from '../../assets/images/cfpb-header/logo-483w.png?url';
+import logo644w from '../../assets/images/cfpb-header/logo-644w.png?url';
 import { Button } from '../Buttons/button';
 import { Icon } from '../Icon/icon';
 import Link from '../Link/link';
 import type { JSXElement } from '../../types/jsx-element';
 import './responsive-menu.scss';
 
+/** Matches consumerfinance.gov header logo `srcset` (see static/img on the live site). */
+const CFPB_HEADER_LOGO_SRCSET = [
+  `${logo161w} 161w`,
+  `${logo322w} 322w`,
+  `${logo483w} 483w`,
+  `${logo644w} 644w`,
+  `${logo237w} 237w`,
+  `${logo474w} 474w`,
+].join(', ');
+
 interface CfpbLogoProperties {
   href?: string;
 }
@@ -22,7 +37,15 @@ export function CfpbLogo({
       aria-label='Home'
       className='o-header__logo'
     >
-      <img className='o-header__logo-img' src={CFPBLogo} alt='CFPB Logo' />
+      <img
+        alt='Consumer Financial Protection Bureau'
+        className='o-header__logo-img'
+        height={50}
+        sizes='(max-width: 900px) 161px, 237px'
+        src={logo237w}
+        srcSet={CFPB_HEADER_LOGO_SRCSET}
+        width={237}
+      />
     </Link>
   );
 }