feat: upgrade to USWDS 3.9.0

package.json

@@ -68,7 +68,7 @@
   "peerDependencies": {
     "@types/react": "^16.x || ^17.x || ^18.x || ^19.x",
     "@types/react-dom": "^16.x || ^17.x || ^18.x || ^19.x",
-    "@uswds/uswds": "^3.7.1",
+    "@uswds/uswds": "^3.9.0",
     "focus-trap-react": "^10.2.3",
     "react": "^16.x || ^17.x || ^18.x || ^19.x",
     "react-dom": "^16.x || ^17.x || ^18.x || ^19.x"
@@ -97,7 +97,7 @@
     "@types/react-dom": "^19.0.4",
     "@typescript-eslint/eslint-plugin": "^8.29.0",
     "@typescript-eslint/parser": "^8.29.0",
-    "@uswds/uswds": "3.7.1",
+    "@uswds/uswds": "3.9.0",
     "@vitejs/plugin-react": "^5.0.0",
     "@vitest/coverage-istanbul": "^3.1.3",
     "@vitest/eslint-plugin": "^1.1.44",

src/components/InPageNavigation/InPageNavigation.stories.tsx

@@ -20,12 +20,17 @@ export default {
     title: {
       control: 'text',
     },
+    headingElements: {
+      control: 'check',
+      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+    },
   },
   args: {
     headingLevel: 'h4',
     rootMargin: '0px 0px 0px 0px',
     threshold: 1,
     title: 'On this page',
+    headingElements: ['h2', 'h3'],
   },
   parameters: {
     docs: {
@@ -46,6 +51,7 @@ type StorybookArguments = {
   scrollOffset: string
   threshold: number
   title: string
+  headingElements: HeadingLevel[]
 }
 
 export const Default = (argTypes: StorybookArguments): JSX.Element => (
@@ -56,6 +62,7 @@ export const Default = (argTypes: StorybookArguments): JSX.Element => (
     rootMargin={argTypes.rootMargin}
     threshold={argTypes.threshold}
     title={argTypes.title}
+    headingElements={argTypes.headingElements}
   />
 )
 
@@ -70,5 +77,6 @@ export const ScrollOffset = (argTypes: StorybookArguments): JSX.Element => (
     scrollOffset="2rem"
     threshold={argTypes.threshold}
     title={argTypes.title}
+    headingElements={argTypes.headingElements}
   />
 )

src/components/InPageNavigation/InPageNavigation.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { screen, render, getByRole } from '@testing-library/react'
+import { screen, render, getByRole, within } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 import { InPageNavigation } from './InPageNavigation'
 import { HeadingLevel } from '../../types/headingLevel'
@@ -13,14 +13,15 @@ describe('InPageNavigation component', () => {
     title: 'What do we have <i>here</i>?',
   }
 
-  const setup = (plain?: boolean) => {
+  const setup = (plain?: boolean, headingElements?: HeadingLevel[]) => {
     const utils = plain
       ? render(<InPageNavigation content={props.content} />)
       : render(
           <InPageNavigation
             content={props.content}
             headingLevel={props.headingLevel}
             title={props.title}
+            headingElements={headingElements}
           />
         )
     const nav = screen.getByTestId('InPageNavigation')
@@ -62,4 +63,22 @@ describe('InPageNavigation component', () => {
     })
     expect(heading).toBeInTheDocument()
   })
+
+  describe('lists the right heading types if', () => {
+    it('is undefined', () => {
+      const { nav } = setup(true)
+      const contentHeadingsTwo = screen.getAllByRole('heading', { level: 2 })
+      const contentHeadingsThree = screen.getAllByRole('heading', { level: 3 })
+      const contentHeadings = contentHeadingsTwo.concat(contentHeadingsThree)
+      const headingLinks = within(nav).getAllByRole('link')
+      expect(contentHeadings.length).toBe(headingLinks.length)
+    })
+
+    it('is defined', () => {
+      const { nav } = setup(false, ['h2' as HeadingLevel])
+      const contentHeadingsTwo = screen.getAllByRole('heading', { level: 2 })
+      const headingLinks = within(nav).getAllByRole('link')
+      expect(contentHeadingsTwo.length).toBe(headingLinks.length)
+    })
+  })
 })

src/components/InPageNavigation/InPageNavigation.tsx

@@ -14,6 +14,7 @@ export type InPageNavigationProps = {
   scrollOffset?: string
   threshold?: number
   title?: string
+  headingElements?: HeadingLevel[]
 } & Omit<JSX.IntrinsicElements['div'], 'content'>
 
 export const InPageNavigation = ({
@@ -26,6 +27,7 @@ export const InPageNavigation = ({
   scrollOffset,
   threshold = 1,
   title = 'On this page',
+  headingElements = ['h2', 'h3'],
   ...divProps
 }: InPageNavigationProps): JSX.Element => {
   const asideClasses = classnames('usa-in-page-nav', styles.target, className)
@@ -38,8 +40,11 @@ export const InPageNavigation = ({
     '--margin-offset': scrollOffset,
   } as React.CSSProperties
   const [currentSection, setCurrentSection] = useState('')
+  headingElements = !headingElements.length
+    ? ['h2', 'h3']
+    : headingElements.sort()
   const sectionHeadings: JSX.Element[] = content.props.children.filter(
-    (el: JSX.Element) => el.type === 'h2' || el.type === 'h3'
+    (el: JSX.Element) => headingElements.includes(el.type)
   )
   const handleIntersection = (entries: IntersectionObserverEntry[]) => {
     entries.forEach((entry) => {
@@ -55,7 +60,9 @@ export const InPageNavigation = ({
   }
   const observer = new IntersectionObserver(handleIntersection, observerOptions)
   useEffect(() => {
-    document.querySelectorAll('h2,h3').forEach((h) => observer.observe(h))
+    document
+      .querySelectorAll(headingElements.join(','))
+      .forEach((h) => observer.observe(h))
     document.querySelector('html')?.classList.add(styles['smooth-scroll'])
     return () => {
       document.querySelector('html')?.classList.remove(styles['smooth-scroll'])
@@ -75,16 +82,17 @@ export const InPageNavigation = ({
           <ul className="usa-in-page-nav__list">
             {sectionHeadings.map((el: JSX.Element) => {
               const heading: JSX.Element = el.props.children
-              const href: string = el.props.id
+              const href: string = el.props.id ?? ''
               const hClass = classnames('usa-in-page-nav__item', {
-                'usa-in-page-nav__item--sub-item': el.type === 'h3',
+                'usa-in-page-nav__item--primary':
+                  el.type === headingElements[0],
               })
               const lClass = classnames('usa-in-page-nav__link', {
-                'usa-current': href === currentSection,
+                'usa-current': !!href && href === currentSection,
               })
               return (
                 <li key={`usa-in-page-nav__item_${heading}`} className={hClass}>
-                  <Link href={`#${href}`} className={lClass}>
+                  <Link href={`#${CSS.escape(href)}`} className={lClass}>
                     {heading}
                   </Link>
                 </li>

src/components/Pagination/Pagination.tsx

@@ -2,7 +2,6 @@ import React, { type JSX } from 'react'
 import classnames from 'classnames'
 import { Icon } from '../Icon/Icons'
 import { Link } from '../Link/Link'
-import { Button } from '../Button/Button'
 
 export type PaginationProps = {
   pathname: string // pathname of results page
@@ -34,24 +33,29 @@ const PaginationPage = ({
   const linkClasses = classnames('usa-pagination__button', {
     'usa-current': isCurrent,
   })
+  const buttonClasses = classnames(
+    linkClasses,
+    'bg-transparent',
+    'cursor-pointer',
+    'text-underline'
+  )
 
   return (
     <li
       key={`pagination_page_${page}`}
       className="usa-pagination__item usa-pagination__page-no">
       {onClickPageNumber ? (
-        <Button
+        <button
           type="button"
-          unstyled
           data-testid="pagination-page-number"
-          className={linkClasses}
+          className={buttonClasses}
           aria-label={`Page ${page}`}
           aria-current={isCurrent ? 'page' : undefined}
           onClick={(event) => {
             onClickPageNumber(event, page)
           }}>
           {page}
-        </Button>
+        </button>
       ) : (
         <Link
           href={`${pathname}?page=${page}`}
@@ -161,26 +165,50 @@ export const Pagination = ({
   const prevPage = !isOnFirstPage && currentPage - 1
   const nextPage = !isOnLastPage && currentPage + 1
 
+  const prevLinkClasses = classnames(
+    'usa-pagination__link',
+    'usa-pagination__previous-page'
+  )
+  const prevButtonClasses = classnames(
+    prevLinkClasses,
+    'border-0',
+    'padding-0',
+    'bg-transparent',
+    'cursor-pointer',
+    'text-underline'
+  )
+  const nextLinkClasses = classnames(
+    'usa-pagination__link',
+    'usa-pagination__next-page'
+  )
+  const nextButtonClasses = classnames(
+    nextLinkClasses,
+    'border-0',
+    'padding-0',
+    'bg-transparent',
+    'cursor-pointer',
+    'text-underline'
+  )
+
   return (
     <nav aria-label="Pagination" className={navClasses} {...props}>
       <ul className="usa-pagination__list">
         {prevPage && (
           <li className="usa-pagination__item usa-pagination__arrow">
             {onClickPrevious ? (
-              <Button
+              <button
                 type="button"
-                unstyled
-                className="usa-pagination__link usa-pagination__previous-page"
+                className={prevButtonClasses}
                 aria-label="Previous page"
                 data-testid="pagination-previous"
                 onClick={onClickPrevious}>
                 <Icon.NavigateBefore aria-hidden={true} />
                 <span className="usa-pagination__link-text">Previous</span>
-              </Button>
+              </button>
             ) : (
               <Link
                 href={`${pathname}?page=${prevPage}`}
-                className="usa-pagination__link usa-pagination__previous-page"
+                className={prevLinkClasses}
                 aria-label="Previous page">
                 <Icon.NavigateBefore aria-hidden={true} />
                 <span className="usa-pagination__link-text">Previous</span>
@@ -206,20 +234,19 @@ export const Pagination = ({
         {nextPage && (
           <li className="usa-pagination__item usa-pagination__arrow">
             {onClickNext ? (
-              <Button
+              <button
                 type="button"
-                unstyled
-                className="usa-pagination__link usa-pagination__next-page"
+                className={nextButtonClasses}
                 aria-label="Next page"
                 data-testid="pagination-next"
                 onClick={onClickNext}>
                 <span className="usa-pagination__link-text">Next</span>
                 <Icon.NavigateNext aria-hidden={true} />
-              </Button>
+              </button>
             ) : (
               <Link
                 href={`${pathname}?page=${nextPage}`}
-                className="usa-pagination__link usa-pagination__next-page"
+                className={nextLinkClasses}
                 aria-label="Next page">
                 <span className="usa-pagination__link-text">Next</span>
                 <Icon.NavigateNext aria-hidden={true} />

src/components/SiteAlert/SiteAlert.stories.tsx

@@ -161,7 +161,10 @@ export const AlertWithStringContent = (): JSX.Element => (
 export const AlertWithMultipleChildContent = (): JSX.Element => (
   <SiteAlert variant="info">
     <p className="usa-alert__text">Alert content</p>
-    <em>which includes</em> <strong>formatting tags</strong> and{' '}
-    <Link href="#">links</Link>.
+    <p className="usa-alert__text">
+      More content{' '}
+      <em className="usa-alert__text  display-inline">which includes</em>{' '}
+      <strong>formatting tags</strong> and <Link href="#">links</Link>.
+    </p>
   </SiteAlert>
 )

src/components/Table/Table.stories.tsx

@@ -29,9 +29,15 @@ Source: https://designsystem.digital.gov/components/table/
     stackedStyle: {
       control: {
         type: 'select',
-        options: ['default', 'headers'],
+        options: ['default', 'headers', 'none'],
       },
     },
+    stickyHeader: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'This is not compatible with stacked and scrollable',
+    },
   },
   args: {
     stackedStyle: 'default',
@@ -41,7 +47,8 @@ Source: https://designsystem.digital.gov/components/table/
 type StorybookArguments = {
   bordered: boolean
   striped: boolean
-  stackedStyle: 'default' | 'headers'
+  stackedStyle: 'default' | 'headers' | 'none'
+  stickyHeader: boolean
 }
 
 const testContent = (
@@ -341,6 +348,14 @@ export const Scrollable = (): JSX.Element => (
   </>
 )
 
+export const StickyHeader = {
+  render: (argTypes: StorybookArguments): React.ReactElement => (
+    <Table stickyHeader={argTypes.stickyHeader} bordered={argTypes.bordered}>
+      {testContent}
+    </Table>
+  ),
+}
+
 export const Striped = {
   render: (argTypes: StorybookArguments): JSX.Element => (
     <Table

src/components/Table/Table.test.tsx

@@ -104,6 +104,12 @@ describe('Table component', () => {
     )
   })
 
+  it('renders sticky header table', () => {
+    const { getByRole } = render(<Table stickyHeader>{testContent}</Table>)
+
+    expect(getByRole('table')).toHaveClass('usa-table--sticky-header')
+  })
+
   it('passes the class onto the root table element', () => {
     const { getByRole } = render(
       <Table className="custom-class">{testContent}</Table>

src/components/Table/Table.tsx

@@ -14,6 +14,7 @@ export type TableProps = {
   striped?: boolean
   compact?: boolean
   stackedStyle?: 'none' | 'default' | 'headers'
+  stickyHeader?: boolean
 }
 
 export const Table = ({
@@ -27,6 +28,7 @@ export const Table = ({
   striped,
   compact,
   stackedStyle = 'none',
+  stickyHeader,
 }: TableProps): JSX.Element => {
   const classes = classnames(
     'usa-table',
@@ -38,6 +40,7 @@ export const Table = ({
       'usa-table--compact': compact,
       'usa-table--stacked': stackedStyle === 'default',
       'usa-table--stacked-header': stackedStyle === 'headers',
+      'usa-table--sticky-header': stickyHeader,
     },
     className
   )
@@ -48,6 +51,12 @@ export const Table = ({
     )
   }
 
+  if (stickyHeader && (scrollable || stackedStyle !== 'none')) {
+    console.warn(
+      'USWDS states that sticky headers are not compatible with scrollable or stacked variants. See USWDS Table component, Table variants for more information: https://designsystem.digital.gov/components/table'
+    )
+  }
+
   const table = (
     <table className={classes} data-testid="table">
       {caption && <caption>{caption}</caption>}