Basic Header

.storybook/preview-head.html

@@ -5,9 +5,10 @@
 <!-- Storybook default: `padding: 1rem` on `.sb-show-main.sb-main-padded` (base-preview-head.html).
      - Main canvas: CFPB 15px ($space-sm).
      - Nested "All viewports" (`?responsivePreview=off`): body padding 0; `#storybook-root` uses
-       vertical inset for focus plus small horizontal inset so outlines are not clipped at edges.
-       Full-bleed stories pass `sbNestedCanvasPadding=flush` (via `parameters.sbNestedCanvasPadding`
-       in preview.js) to use zero inset instead. -->
+       vertical inset for focus plus 3px horizontal inset each side (6px narrower than the iframe
+       width when you measure `#storybook-root` children). Full-bleed stories pass
+       `sbNestedCanvasPadding=flush` (via `parameters.sbNestedCanvasPadding` in preview.js) for
+       zero inset instead. -->
 <script>
   (function applyCfpbStorybookCanvasPadding() {
     var style = document.createElement('style');

src/components/Banner/banner.scss

@@ -54,11 +54,16 @@
       float: left;
     }
 
+    // The inner node uses both `wrapper` and `wrapper--match-content`. DS layout applies
+    // overlapping padding from `.wrapper` (≥ med) and `.wrapper--match-content` (≥ sm);
+    // scope here so the gov banner gutters stay consistent inside Header and standalone.
     .wrapper--match-content {
       padding-left: $space-sm;
+      padding-right: $space-sm;
 
-      @media (width >= 600px) {
+      @include respond-to-min($bp-med-min) {
         padding-left: $space-md;
+        padding-right: $space-md;
       }
     }
 

src/components/Header/header.stories.tsx

@@ -23,3 +23,10 @@ export const Default: Story = {
     links: ExampleLinks,
   },
 };
+
+export const Basic: Story = {
+  render: (properties) => <Header {...properties} />,
+  args: {
+    links: [],
+  },
+};

src/components/Header/header.test.tsx

@@ -26,10 +26,4 @@ describe('Header', () => {
       'o-header bottom-border',
     );
   });
-
-  it('Can be rendered without bottom border', () => {
-    const { container } = render(<Header withBottomBorder={false} />);
-    expect(container.firstChild.className).toBe('o-header-scope');
-    expect(container.firstChild.firstChild?.className).toBe('o-header');
-  });
 });

src/components/Header/header.tsx

@@ -7,20 +7,14 @@ import './header.scss';
 export interface HeaderProperties {
   links?: JSX.Element[];
   href?: string;
-  withBottomBorder?: boolean;
 }
 
 /**
  * A header helps users identify where they are and provides a quick, organized way to reach the main sections of a website.
  *
  */
-export const Header = ({
-  links,
-  href,
-  withBottomBorder = true,
-}: HeaderProperties): JSX.Element => {
-  const headerClasses = ['o-header'];
-  if (withBottomBorder) headerClasses.push('bottom-border');
+export const Header = ({ links, href }: HeaderProperties): JSX.Element => {
+  const headerClasses = ['o-header', 'bottom-border'];
 
   return (
     <div className='o-header-scope'>

src/components/Header/responsive-menu.scss

@@ -1,9 +1,10 @@
 @use '/src/assets/styles/variables.scss' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
-$breakpoint: 56.3125em;
+$breakpoint: $bp-med-min;
 $menu-width: 100%;
 $animation-duration: 0.3s;
-$max-width: $breakpoint - 0.0625em;
+$max-width: $bp-sm-max;
 
 .o-header-scope {
   .o-header__content {
@@ -32,22 +33,28 @@ $max-width: $breakpoint - 0.0625em;
       }
 
       .o-header__logo {
+        display: inline-block;
         min-width: 237px;
 
+        .o-header__logo-img {
+          display: block;
+        }
+
         @media (max-width: $max-width) {
-          border-left: 1px solid var(--gray-40);
           padding-left: 15px;
           .o-header__logo-img {
             height: 40px;
+            margin-top: 10px;
+            margin-bottom: 10px;
+            vertical-align: middle;
           }
         }
       }
 
-      .o-header__logo-img {
-        height: 34px;
-        margin-top: 10px;
-        margin-bottom: 10px;
-        vertical-align: middle;
+      @media (max-width: $max-width) {
+        button.menu-toggle + .o-header__logo {
+          border-left: 1px solid var(--gray-40);
+        }
       }
 
       @media (min-width: $breakpoint) {
@@ -92,7 +99,7 @@ $max-width: $breakpoint - 0.0625em;
       .nav-items {
         @media (max-width: $max-width) {
           position: absolute;
-          top: 54px;
+          top: 60px;
           left: -$menu-width - 15;
           width: $menu-width;
           background-color: var(--white);
@@ -109,13 +116,11 @@ $max-width: $breakpoint - 0.0625em;
         width: 100%;
 
         &.open {
-          display: flex;
           left: 0;
         }
 
         @media (min-width: $breakpoint) {
           position: static;
-          display: flex;
           flex-direction: row;
           justify-content: flex-end;
           width: auto;
@@ -155,19 +160,23 @@ $max-width: $breakpoint - 0.0625em;
               padding: 0;
             }
 
-            &:hover {
-              position: relative;
+            @media (max-width: $max-width) {
+              &:hover::before,
+              &.nav-item.active::before {
+                position: absolute;
+                top: 0;
+                left: -15px;
+                height: 100%;
+                width: 5px;
+                content: '';
+                display: block;
+              }
+            }
 
+            &:hover {
               @media (max-width: $max-width) {
                 &::before {
-                  position: absolute;
-                  top: 0;
-                  left: -15px;
-                  height: 100%;
-                  width: 5px;
                   background-color: var(--green);
-                  content: '';
-                  display: block;
                 }
                 color: var(--black);
               }
@@ -182,14 +191,7 @@ $max-width: $breakpoint - 0.0625em;
 
               @media (max-width: $max-width) {
                 &::before {
-                  position: absolute;
-                  top: 0;
-                  left: -15px;
-                  height: 100%;
-                  width: 5px;
                   background-color: var(--black);
-                  content: ' ';
-                  display: block;
                 }
               }