From 9c8b7df3b43b193a00f25b525602631e8ee8936b Mon Sep 17 00:00:00 2001 From: Brian Hurst Date: Fri, 9 Aug 2024 13:50:10 -0400 Subject: [PATCH 1/2] Add navigation for product sections --- __tests__/components/uswds/Header.test.js | 32 ++++++++++++ src/app/prototype/design-guide/page.tsx | 4 ++ src/assets/stylesheets/styles.scss | 47 ++++++++++++++--- src/components/uswds/Header.tsx | 63 +++++++++++++++++++++++ 4 files changed, 139 insertions(+), 7 deletions(-) create mode 100644 __tests__/components/uswds/Header.test.js create mode 100644 src/components/uswds/Header.tsx diff --git a/__tests__/components/uswds/Header.test.js b/__tests__/components/uswds/Header.test.js new file mode 100644 index 00000000..ccac93d7 --- /dev/null +++ b/__tests__/components/uswds/Header.test.js @@ -0,0 +1,32 @@ +/** + * @jest-environment jsdom + */ +import { describe, expect, it } from '@jest/globals'; +import { render, screen, fireEvent } from '@testing-library/react'; +import { Banner } from '@/components/uswds/Banner'; + +describe('', () => { + describe('on initial load', () => { + it('content is collapsed', () => { + // act + render(); + // assert + const content = screen.queryByText('Official websites use .gov'); + expect(content).not.toBeInTheDocument(); + }); + }); + + describe('when button is clicked', () => { + it('content expands', async () => { + // setup + render(); + // act + // There are two elements with this text, but only one is visible (the other is for screen readers). So we get the second of the two, which is the button we want. + const button = screen.getAllByText('Here’s how you know')[1]; + fireEvent.click(button); + // assert + const content = await screen.findByText('Official websites use .gov'); + expect(content).toBeInTheDocument(); + }); + }); +}); diff --git a/src/app/prototype/design-guide/page.tsx b/src/app/prototype/design-guide/page.tsx index 656785ce..a6a920b8 100644 --- a/src/app/prototype/design-guide/page.tsx +++ b/src/app/prototype/design-guide/page.tsx @@ -3,6 +3,7 @@ import { Alert } from '@/components/uswds/Alert'; import { Button } from '@/components/uswds/Button'; import { Banner } from '@/components/uswds/Banner'; +import { Header } from '@/components/uswds/Header'; import Checkbox from '@/components/uswds/Checkbox'; import { useState } from 'react'; @@ -191,6 +192,9 @@ export default function DesignGuidePage() { +

Header

+
+
{/* placeholder to help with the page scroll */}
diff --git a/src/assets/stylesheets/styles.scss b/src/assets/stylesheets/styles.scss index 7cbe983b..1a7bcc6c 100644 --- a/src/assets/stylesheets/styles.scss +++ b/src/assets/stylesheets/styles.scss @@ -20,7 +20,7 @@ $theme-color-primary-lightest: false, $theme-color-primary-lighter: 'blue-warm-10', $theme-color-primary-light: 'blue-warm-40v', - $theme-color-primary: 'blue-warm-50v', + $theme-color-primary: 'blue-60', $theme-color-primary-vivid: 'blue-warm-50v', $theme-color-primary-dark: 'blue-warm-60', $theme-color-primary-darker: 'blue-warm-70v', @@ -63,8 +63,6 @@ // layout grid $theme-grid-container-max-width: 'full', $theme-banner-max-width: 'desktop-lg', - $theme-header-max-width: 'desktop-lg', - $theme-header-min-width: 'none', $theme-identifier-max-width: 'desktop-lg', $theme-footer-max-width: 'desktop-lg', @@ -113,7 +111,42 @@ } // Removes the 'X' from Chrome search inputs -input[type="search"]::-webkit-search-decoration, -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-results-button, -input[type="search"]::-webkit-search-results-decoration { display: none; } +input[type='search']::-webkit-search-decoration, +input[type='search']::-webkit-search-cancel-button, +input[type='search']::-webkit-search-results-button, +input[type='search']::-webkit-search-results-decoration { + display: none; +} + +@include at-media('desktop') { + .usa-header--basic { + .usa-nav, + .usa-nav-container { + display: block; + margin: 0; + padding: 0; + } + + .usa-navbar { + display: none; + } + + .usa-nav__primary > .usa-nav__primary-item > a { + font-weight: 400; + margin-right: 2rem; + padding-left: 0; + padding-right: 0; + + &.usa-current { + font-weight: 700; + } + } + + .usa-nav__primary-item > .usa-current::after, + .usa-nav__link:hover::after { + bottom: 0; + left: 0; + right: 0; + } + } +} diff --git a/src/components/uswds/Header.tsx b/src/components/uswds/Header.tsx new file mode 100644 index 00000000..a136a186 --- /dev/null +++ b/src/components/uswds/Header.tsx @@ -0,0 +1,63 @@ +'use client'; + +import Image from 'next/image'; +import { useState } from 'react'; + +export function Header() { + const [isVisible, setIsVisible] = useState(false); + + const toggleMenu = () => setIsVisible(!isVisible); + + return ( + <> +
+
+
+
+ +
+ +
+
+ + ); +} From 7993536347c8f8f70f20469ea5047292250ced2a Mon Sep 17 00:00:00 2001 From: Brian Hurst Date: Fri, 9 Aug 2024 14:52:59 -0400 Subject: [PATCH 2/2] Style tweaks --- __tests__/components/uswds/Header.test.js | 32 ----------------------- src/assets/stylesheets/styles.scss | 2 ++ src/components/uswds/Header.tsx | 2 +- 3 files changed, 3 insertions(+), 33 deletions(-) delete mode 100644 __tests__/components/uswds/Header.test.js diff --git a/__tests__/components/uswds/Header.test.js b/__tests__/components/uswds/Header.test.js deleted file mode 100644 index ccac93d7..00000000 --- a/__tests__/components/uswds/Header.test.js +++ /dev/null @@ -1,32 +0,0 @@ -/** - * @jest-environment jsdom - */ -import { describe, expect, it } from '@jest/globals'; -import { render, screen, fireEvent } from '@testing-library/react'; -import { Banner } from '@/components/uswds/Banner'; - -describe('', () => { - describe('on initial load', () => { - it('content is collapsed', () => { - // act - render(); - // assert - const content = screen.queryByText('Official websites use .gov'); - expect(content).not.toBeInTheDocument(); - }); - }); - - describe('when button is clicked', () => { - it('content expands', async () => { - // setup - render(); - // act - // There are two elements with this text, but only one is visible (the other is for screen readers). So we get the second of the two, which is the button we want. - const button = screen.getAllByText('Here’s how you know')[1]; - fireEvent.click(button); - // assert - const content = await screen.findByText('Official websites use .gov'); - expect(content).toBeInTheDocument(); - }); - }); -}); diff --git a/src/assets/stylesheets/styles.scss b/src/assets/stylesheets/styles.scss index 1a7bcc6c..4433ee35 100644 --- a/src/assets/stylesheets/styles.scss +++ b/src/assets/stylesheets/styles.scss @@ -63,6 +63,7 @@ // layout grid $theme-grid-container-max-width: 'full', $theme-banner-max-width: 'desktop-lg', + $theme-header-max-width: 'desktop-lg', $theme-identifier-max-width: 'desktop-lg', $theme-footer-max-width: 'desktop-lg', @@ -138,6 +139,7 @@ input[type='search']::-webkit-search-results-decoration { padding-right: 0; &.usa-current { + @include u-text('primary'); font-weight: 700; } } diff --git a/src/components/uswds/Header.tsx b/src/components/uswds/Header.tsx index a136a186..b96b5c6d 100644 --- a/src/components/uswds/Header.tsx +++ b/src/components/uswds/Header.tsx @@ -20,7 +20,7 @@ export function Header() {