Merge branch 'main' into dateFormat

.eslintrc

@@ -14,7 +14,6 @@
     "browser": true,
     "commonjs": true,
     "es6": true,
-    "jest": true,
     "node": true
   },
   "parserOptions": {

.github/workflows/build-and-test.yml

@@ -31,7 +31,7 @@ jobs:
       - name: Install dependencies
         run: yarn --frozen-lockfile
 
-      - name: Run Jest tests with coverage
+      - name: Run tests with coverage
         run: yarn test:coverage
 
       - name: Run node server side tests

.storybook/USWDS.js

@@ -1,4 +1,4 @@
-import { create } from '@storybook/theming';
+import { create } from '@storybook/theming/create';
 
 export default create({
   brandTitle: 'U.S. Web Design System (USWDS)',

.storybook/main.ts

@@ -4,6 +4,7 @@ const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
     '@storybook/addon-a11y',
+    '@storybook/addon-docs',
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
@@ -13,7 +14,7 @@ const config: StorybookConfig = {
     options: {},
   },
   docs: {
-    autodocs: 'tag',
+    autodocs: true,
   },
   staticDirs: ['public'],
 }

.storybook/manager.js

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
 import USWDS from './USWDS';
 
 addons.setConfig({

.storybook/preview.ts

@@ -5,16 +5,24 @@ import '../src/styles/index.scss'
 import './custom-styles.scss'
 
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
+import { Preview } from '@storybook/react';
+import USWDS from './USWDS';
 
-export const parameters = {
-  viewport: {
-    viewports: INITIAL_VIEWPORTS,
-  },
-  options: {
-    showPanel: true,
-    storySort: {
-      method: 'alphabetical',
-      order: ['Welcome', 'Design tokens', 'Page Templates', 'Components', 'Other'],
+const preview: Preview = {
+  parameters: {
+    docs: {
+      theme: USWDS,
+    },
+    viewport: {
+      viewports: INITIAL_VIEWPORTS,
+    },
+    options: {
+      showPanel: true,
+      storySort: {
+        method: 'alphabetical',
+        order: ['Welcome', 'Design tokens', 'Page Templates', 'Components', 'Other'],
+      },
     },
   },
 }
+export default preview;

CHANGELOG.md

@@ -2,6 +2,28 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [8.0.0](https://github.com/trussworks/react-uswds/compare/7.0.0...8.0.0) (2024-03-06)
+
+
+### ⚠ BREAKING CHANGES
+
+* Webpack/Jest to Vite/Vitest migration ([#2716](https://github.com/trussworks/react-uswds/issues/2716))
+
+### Features
+
+* Webpack/Jest to Vite/Vitest migration ([#2716](https://github.com/trussworks/react-uswds/issues/2716)) ([17dde0a](https://github.com/trussworks/react-uswds/commit/17dde0a03c6c23b2e145b78ee8ef3faf86867431))
+
+
+### Bug Fixes
+
+* replace card button with link ([#2750](https://github.com/trussworks/react-uswds/issues/2750)) ([59d5f14](https://github.com/trussworks/react-uswds/commit/59d5f14b85ae96ee4fd5c89c6084bbc1c663d1e7))
+
+
+### Documentation & Examples
+
+* Made storybook docs available again, small org changes elsewhere ([#2795](https://github.com/trussworks/react-uswds/issues/2795)) ([e77fe30](https://github.com/trussworks/react-uswds/commit/e77fe30f7feaf8a52816ade8fad93923b5a0e7fb))
+* removed circleci references ([#2777](https://github.com/trussworks/react-uswds/issues/2777)) ([b3e79f2](https://github.com/trussworks/react-uswds/commit/b3e79f2fe4c5d043af0053cf41d288dfe8758cd9))
+
 ## [7.0.0](https://github.com/trussworks/react-uswds/compare/6.2.0...7.0.0) (2024-02-22)
 
 

docs/contributing.md

@@ -43,7 +43,7 @@ These should all be run from within the project directory.
   - Starts Storybook server and watches for changed files
   - This will most likely be what you use for active development of components
 - `yarn test`
-  - Starts Jest test runner
+  - Starts test runner
   - `yarn test:watch` is also available
   - Use `yarn test:coverage` to generate a coverage report
 - `yarn build`
@@ -96,7 +96,7 @@ Because this project exports a library that will be used by other projects, it i
   - Package dependency changes should include `yarn.lock` updates and
     `yarn audit` will be run by danger to ensure no high or critical
     vulnerabilities are found
-- [Jest tests](https://jestjs.io/) are run in CI and must pass before the branch can be merged
+- [Vite tests](https://vitest.dev/) are run in CI and must pass before the branch can be merged
 - [Happo.io visual regression tests](https://docs.happo.io/docs/reviewing-diffs) are run CI against Storybook stories. All diffs must be approved before the branch can be merged. Developers with access (maintainers and many codeowners) log in to Happo.io account to approve/reject diffs.
 - PR titles must follow conventional commits specification.
   - We use [release-please](https://github.com/googleapis/release-please). This auto-generates version numbers and changelog based on commits. We [squash & merge](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/about-pull-request-merges#squash-and-merge-your-pull-request-commits) PR commits, so the title must be correct.

docs/for_trussels.md

@@ -4,7 +4,11 @@ Below is documentation specifically to provide guidance for contributors who wor
 
 ## Internal Communication
 
-We have a Truss Slack channel dedicated to discussing this project (**#react-uswds**), as well as a channel for automated updates such as new issues, pull requests, and releases (**#react-uswds-feed**). Anyone is welcome to join and participate in these channels, whether or not they are an active maintainer.
+We have a Truss Slack channel dedicated to discussing this project (**#g-uswds**), as well as a channel for automated updates such as new issues, pull requests, and releases (**#react-uswds-feed**). Anyone is welcome to join and participate in these channels, whether or not they are an active maintainer.
+
+## External Communication
+
+We also have a public Slack channel (#g-uswds-public) for the community to engage with Trussels, similar to the [repo's Discussions](https://github.com/trussworks/react-uswds/discussions). This is particularly helpful for live conversations and rapid async discussions that a public Discussion or Issue might not be appropriate for. Participation in the channel should abide by our [code of conduct](../CODE_OF_CONDUCT.md) and requires a direct email invitation from a Trussel via Slack.
 
 ## Active Maintainers
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trussworks/react-uswds",
-  "version": "7.0.0",
+  "version": "8.0.0",
   "description": "React USWDS 3.0 component library",
   "keywords": [
     "react",
@@ -80,6 +80,7 @@
     "@storybook/addon-links": "^7.6.10",
     "@storybook/addons": "^7.6.10",
     "@storybook/blocks": "^7.6.10",
+    "@storybook/manager-api": "^7.1.1",
     "@storybook/react": "^7.6.10",
     "@storybook/react-vite": "^7.6.10",
     "@storybook/test": "^7.6.10",

src/components/Link/Link.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Link } from './Link'
 
 export default {
-  title: 'Components/Typography/Link',
+  title: 'Components/Link',
   component: Link,
   parameters: {
     docs: {

src/components/forms/ComboBox/ComboBox.stories.tsx

@@ -1,11 +1,11 @@
-import React, { useRef } from 'react'
+import React, { useRef, useState } from 'react'
 
 import { ComboBox, ComboBoxRef } from './ComboBox'
 import { Form } from '../Form/Form'
 import { Label } from '../Label/Label'
-import { TextInput } from '../TextInput/TextInput'
 import { Button } from '../../Button/Button'
-import { fruits } from './fruits'
+import { fruits, veggies } from './foods'
+import { Radio } from '../Radio/Radio'
 
 export default {
   title: 'Components/Combo box',
@@ -112,12 +112,42 @@ export const WithOtherFields = (): React.ReactElement => {
     label: key,
   }))
 
+  const veggieList = Object.entries(veggies).map(([value, key]) => ({
+    value: value,
+    label: key,
+  }))
+
+  const [options, setOptions] = useState(fruitList)
+
+  const ref = useRef<ComboBoxRef>(null)
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    ref.current?.clearSelection()
+    const selection = e.target.id
+    setOptions(selection === 'fruit' ? fruitList : veggieList)
+  }
+
   return (
     <Form onSubmit={noop}>
-      <Label htmlFor="fruit">Select a fruit</Label>
-      <ComboBox id="fruit" name="fruit" options={fruitList} onChange={noop} />
-      <Label htmlFor="fruitDescription">Description</Label>
-      <TextInput id="fruitDescription" name="fruitDescription" type="text" />
+      <Label htmlFor="food">Select a group</Label>
+      <Radio
+        name="food"
+        id="fruit"
+        label="Fruits"
+        onChange={handleChange}
+        defaultChecked></Radio>
+      <Radio
+        name="food"
+        id="veggie"
+        label="Vegetables"
+        onChange={handleChange}></Radio>
+      <Label htmlFor="food">Select a food</Label>
+      <ComboBox
+        id="fruit"
+        name="fruit"
+        options={options}
+        onChange={noop}
+        ref={ref}
+      />
     </Form>
   )
 }

src/components/forms/ComboBox/ComboBox.test.tsx

@@ -2,20 +2,29 @@ import React from 'react'
 import { screen, render, waitFor } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 
-import { ComboBox, ComboBoxRef } from './ComboBox'
+import { ComboBox, ComboBoxOption, ComboBoxRef } from './ComboBox'
 import { TextInput } from '../TextInput/TextInput'
-import { fruits } from './fruits'
+import { fruits, veggies } from './foods'
 
 /*
   Source of truth for combo box behavior is USWDS storybook examples and tests. For more:
   - https://designsystem.digital.gov/form-controls/03-combo-box/
   - https://github.com/uswds/uswds/tree/7a89611fe649650922e4d431b78c39fed6a867e1/spec/unit/combo-box
 */
 
-const fruitOptions = Object.entries(fruits).map(([value, key]) => ({
-  value: value,
-  label: key,
-}))
+const fruitOptions: ComboBoxOption[] = Object.entries(fruits).map(
+  ([value, key]) => ({
+    value: value,
+    label: key,
+  })
+)
+
+const veggieOptions: ComboBoxOption[] = Object.entries(veggies).map(
+  ([value, key]) => ({
+    value: value,
+    label: key,
+  })
+)
 
 describe('ComboBox component', () => {
   it('renders the expected markup without errors', () => {
@@ -87,6 +96,24 @@ describe('ComboBox component', () => {
     expect(comboBoxInput).toHaveValue('Avocado')
   })
 
+  it('updates options when prop changes', async () => {
+    const Wrapper = (props: { options: ComboBoxOption[] }) => {
+      return (
+        <ComboBox
+          id="favorite-fruit"
+          name="favorite-fruit"
+          options={props.options}
+          onChange={vi.fn()}
+        />
+      )
+    }
+    const { rerender } = render(<Wrapper options={fruitOptions} />)
+    const comboBoxSelect = screen.getByTestId('combo-box-select')
+    expect(comboBoxSelect).toHaveValue(fruitOptions[0].value)
+    rerender(<Wrapper options={veggieOptions} />)
+    expect(comboBoxSelect).toHaveValue(veggieOptions[0].value)
+  })
+
   describe('toggling the list', () => {
     it('renders all options when the list is open', async () => {
       const fruitAbridged = fruitOptions.slice(0, 3)

src/components/forms/ComboBox/ComboBox.tsx

@@ -146,6 +146,10 @@ const ComboBoxForwardRef: React.ForwardRefRenderFunction<
   const listRef = useRef<HTMLUListElement>(null)
   const focusedItemRef = useRef<HTMLLIElement>(null)
 
+  useEffect(() => {
+    state.filteredOptions = options
+  }, [options])
+
   useEffect(() => {
     onChange && onChange(state.selectedOption?.value || undefined)
   }, [state.selectedOption])

src/components/forms/ComboBox/fruits.ts → src/components/forms/ComboBox/foods.ts

@@ -64,3 +64,9 @@ export const fruits = {
   'white currant': 'White currant',
   yuzu: 'Yuzu',
 }
+
+export const veggies = {
+  celery: 'Celery',
+  onion: 'Onion',
+  pepper: 'Pepper',
+}

src/components/forms/TimePicker/TimePicker.stories.tsx

@@ -4,7 +4,7 @@ import { Form } from '../Form/Form'
 import { TimePicker } from './TimePicker'
 
 export default {
-  title: 'Components/Form controls/Time picker',
+  title: 'Components/Time picker',
   component: TimePicker,
   argTypes: {
     onsubmit: { action: 'submitted' },

src/setupTests.ts

@@ -1,4 +1,4 @@
-import '@testing-library/jest-dom'
+import '@testing-library/jest-dom/vitest'
 import { cleanup } from '@testing-library/react'
 
 vi.mock('focus-trap-react')

src/stories/swatches.stories.tsx

@@ -9,9 +9,9 @@ export default {
   },
 }
 
-export const BackgroundColors = (): React.ReactElement => (
+export const Swatches = (): React.ReactElement => (
   <div className="grid-container">
-    <h1>Background color</h1>
+    <h1>Color swatches</h1>
     <h2>Primary</h2>
     <hr />
     <div className="grid-row">

src/stories/templates/createaccount.stories.tsx

@@ -35,7 +35,7 @@ import circleSvg from '@uswds/uswds/img/circle-gray-20.svg'
 import { MediaBlockBody } from '../../components/mediablock/MediaBlockBody/MediaBlockBody'
 
 export default {
-  title: 'Page Templates/Authentication Pages',
+  title: 'Page Templates/Create Account',
   parameters: {
     options: {
       showPanel: false,

src/stories/templates/documentation.stories.tsx

@@ -26,11 +26,8 @@ import {
 import { SideNav } from '../../components/SideNav/SideNav'
 
 export default {
-  title: 'Page Templates/Documentation Page',
+  title: 'Page Templates/Documentation',
   parameters: {
-    options: {
-      showPanel: false,
-    },
     docs: {
       description: {
         component: `

src/stories/templates/mutliplesignin.stories.tsx

@@ -30,7 +30,7 @@ import logoImg from '@uswds/uswds/img/logo-img.png'
 import circleSvg from '@uswds/uswds/img/circle-gray-20.svg'
 
 export default {
-  title: 'Page Templates/Authentication Pages',
+  title: 'Page Templates/Multiple Sign In Options',
   parameters: {
     options: {
       showPanel: false,

src/stories/templates/notfound.stories.tsx

@@ -35,7 +35,7 @@ import {
 } from '../../index'
 
 export default {
-  title: 'Page Templates/Not Found Page',
+  title: 'Page Templates/Not Found',
   parameters: {
     options: {
       showPanel: false,

src/stories/templates/signin.stories.tsx

@@ -33,7 +33,7 @@ import logoImg from '@uswds/uswds/img/logo-img.png'
 import circleSvg from '@uswds/uswds/img/circle-gray-20.svg'
 
 export default {
-  title: 'Page Templates/Authentication Pages',
+  title: 'Page Templates/Sign In',
   parameters: {
     options: {
       showPanel: false,

src/stories/type.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 export default {
-  title: 'Components/Typography/Type Styles',
+  title: 'Design tokens/Type Styles',
   parameters: {
     options: {
       showPanel: false,