diff --git a/.all-contributorsrc b/.all-contributorsrc index 030b1d5c8f..0a4f042b50 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -253,9 +253,56 @@ "maintenance", "infra" ] + }, + { + "login": "AnnaGingle", + "name": "Anna Gingle", + "avatar_url": "https://avatars.githubusercontent.com/u/48488699?v=4", + "profile": "https://github.com/AnnaGingle", + "contributions": [ + "design", + "code" + ] + }, + { + "login": "aybeedee", + "name": "Abdullah Umer", + "avatar_url": "https://avatars.githubusercontent.com/u/75930195?v=4", + "profile": "https://github.com/aybeedee", + "contributions": [ + "code" + ] + }, + { + "login": "m7adeel", + "name": "Muhammad Adeel", + "avatar_url": "https://avatars.githubusercontent.com/u/87698014?v=4", + "profile": "https://github.com/m7adeel", + "contributions": [ + "bug", + "code" + ] + }, + { + "login": "vinodkv2511", + "name": "Vinod Krishna Vellampalli", + "avatar_url": "https://avatars.githubusercontent.com/u/44632502?v=4", + "profile": "https://github.com/vinodkv2511", + "contributions": [ + "code" + ] + }, + { + "login": "kleinschmidtj", + "name": "Joe Kleinschmidt", + "avatar_url": "https://avatars.githubusercontent.com/u/57681819?v=4", + "profile": "https://joeforyou.xyz", + "contributions": [ + "code" + ] } ], "contributorsPerLine": 7, "commitConvention": "angular", - "commitType": "chore(all-contributors)" + "commitType": "chore" } diff --git a/.github/dependabot.yml b/.github/dependabot.yml index 925b341a10..61b591ea7a 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -7,9 +7,6 @@ updates: pull-request-branch-name: separator: '-' open-pull-requests-limit: 10 - reviewers: - - "haworku" - - "ahobson" labels: - 'type: dependencies' - 'type: automerge' diff --git a/.github/workflows/build-and-test.yml b/.github/workflows/build-and-test.yml index 12c4ea64cc..007498aa9a 100644 --- a/.github/workflows/build-and-test.yml +++ b/.github/workflows/build-and-test.yml @@ -2,18 +2,19 @@ name: Build and Test on: push: - branches: [main] + branches: [ main ] pull_request: - branches: [main] + branches: [ main ] workflow_dispatch: + jobs: build-and-test: runs-on: ubuntu-latest strategy: matrix: - node: ['16', '18'] + node: [ '16', '18' ] name: Node ${{ matrix.node }} tests @@ -59,6 +60,9 @@ jobs: - name: Check format run: yarn format:check + - name: Build Storybook + run: yarn build-storybook + - name: Happo run: yarn happo-ci env: diff --git a/.github/workflows/deploy-storybook.yml b/.github/workflows/deploy-storybook.yml index bc289406b2..9dc3547ee2 100644 --- a/.github/workflows/deploy-storybook.yml +++ b/.github/workflows/deploy-storybook.yml @@ -39,7 +39,7 @@ jobs: run: yarn install - name: Build Storybook - run: yarn build-storybook --modern + run: yarn build-storybook - name: Deploy 🚀 uses: JamesIves/github-pages-deploy-action@v4 diff --git a/.happo.js b/.happo.js index 7206e2c2e8..823dca3700 100644 --- a/.happo.js +++ b/.happo.js @@ -25,6 +25,9 @@ module.exports = { }, plugins: [ // see https://github.com/happo/happo-plugin-storybook for a list of options you can pass to the plugin - happoPluginStorybook(), + happoPluginStorybook({ + outputDir: 'storybook-static', + usePrebuiltPackage: true, + }), ], } diff --git a/.storybook/custom-styles.scss b/.storybook/custom-styles.scss index 937502af1f..42071df8c0 100644 --- a/.storybook/custom-styles.scss +++ b/.storybook/custom-styles.scss @@ -3,7 +3,7 @@ // Add custom styles for storybook implementation .custom-class { - background: #fa9441; + background: #bf5906; } .usa-color-text-visited { diff --git a/.storybook/main.ts b/.storybook/main.ts index e94b61ef1a..9a08dc34bd 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -1,7 +1,15 @@ const path = require('path') +const uswdsIncludePaths = [ + './node_modules/@uswds', + './node_modules/@uswds/uswds/packages', +] + const webpackConfig = (config) => { - config.resolve.alias.uswds = path.resolve(__dirname, '../node_modules/@uswds/uswds') + config.resolve.alias.uswds = path.resolve( + __dirname, + '../node_modules/@uswds/uswds' + ) config.module.rules = config.module.rules.filter( (rule) => rule.test.toString() !== '/\\.css$/' @@ -9,18 +17,19 @@ const webpackConfig = (config) => { config.module.rules.push({ test: /\.(sa|sc|c)ss$/, exclude: /\.module\.(sa|sc|c)ss$/i, - use: ['style-loader', 'css-loader', { - loader: "sass-loader", - options: { - sourceMap: true, - sassOptions: { - includePaths: [ - "./node_modules/@uswds", - "./node_modules/@uswds/uswds/packages", - ], + use: [ + 'style-loader', + 'css-loader', + { + loader: 'sass-loader', + options: { + sourceMap: true, + sassOptions: { + includePaths: uswdsIncludePaths, + }, }, }, - },], + ], include: path.resolve(__dirname, '../'), }) @@ -37,7 +46,15 @@ const webpackConfig = (config) => { }, }, }, - "sass-loader", + { + loader: 'sass-loader', + options: { + sourceMap: true, + sassOptions: { + includePaths: uswdsIncludePaths, + }, + }, + }, ], }) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4d3034925f..503414a8a0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,79 @@ 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. +## [6.1.0](https://github.com/trussworks/react-uswds/compare/6.0.0...6.1.0) (2023-11-27) + + +### Features + +* Add “use client” to fix React Server Components ([#2656](https://github.com/trussworks/react-uswds/issues/2656)) ([fad63b1](https://github.com/trussworks/react-uswds/commit/fad63b1d6f5f01ba742cdb093ee05dc117d1753b)) +* Added multiselect story ([#2648](https://github.com/trussworks/react-uswds/issues/2648)) ([03652fe](https://github.com/trussworks/react-uswds/commit/03652fe3663735229a676cda23aa751ec2ed452d)) + + +### Bug Fixes + +* **a11y:** move aria-label from svg icon to button ([#2640](https://github.com/trussworks/react-uswds/issues/2640)) ([fa18032](https://github.com/trussworks/react-uswds/commit/fa18032f538655452e501079b306e4a314480da6)) +* adding labels in combo box (default combo box, with default value) ([#2636](https://github.com/trussworks/react-uswds/issues/2636)) ([7714d14](https://github.com/trussworks/react-uswds/commit/7714d1474a3512328e6391b12434293421de408a)) + +## [6.0.0](https://github.com/trussworks/react-uswds/compare/5.5.0...6.0.0) (2023-10-31) + + +### ⚠ BREAKING CHANGES + +* `` implementations must specify a `label` prop +* Dropdown has been removed use ` + + + + + + + + + + + + + + + ( - - - - - - -) - -export const withDefaultValue = (): React.ReactElement => ( - - - - - - -) - -export const withLabel = (): React.ReactElement => ( - <> - - - - - - - - -) - -export const disabled = (): React.ReactElement => ( - - - - - - -) diff --git a/src/components/forms/Dropdown/Dropdown.test.tsx b/src/components/forms/Dropdown/Dropdown.test.tsx deleted file mode 100644 index 505baff170..0000000000 --- a/src/components/forms/Dropdown/Dropdown.test.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react' -import { render } from '@testing-library/react' -jest.mock('../../../deprecation') -import { deprecationWarning } from '../../../deprecation' - -import { Dropdown } from './Dropdown' - -describe('Dropdown component', () => { - it('renders without errors, displaying a deprecation warning', () => { - const { queryByTestId } = render( - - - - - - - ) - expect(queryByTestId('Select')).toBeInTheDocument() - expect(deprecationWarning).toHaveBeenCalledTimes(1) - expect(deprecationWarning).toHaveBeenCalledWith( - 'Dropdown is deprecated and will be removed in the future. Please use the Select component instead.' - ) - }) -}) diff --git a/src/components/forms/Dropdown/Dropdown.tsx b/src/components/forms/Dropdown/Dropdown.tsx deleted file mode 100644 index 0d162e5769..0000000000 --- a/src/components/forms/Dropdown/Dropdown.tsx +++ /dev/null @@ -1,11 +0,0 @@ -/* - TODO: Remove this component -*/ - -import { Select } from '../Select/Select' -import { withDeprecationWarning } from '../../hoc/withDeprecationWarning' - -export const Dropdown = withDeprecationWarning( - Select, - 'Dropdown is deprecated and will be removed in the future. Please use the Select component instead.' -) diff --git a/src/components/forms/Fieldset/Fieldset.stories.tsx b/src/components/forms/Fieldset/Fieldset.stories.tsx index 353b448025..a89be33a78 100644 --- a/src/components/forms/Fieldset/Fieldset.stories.tsx +++ b/src/components/forms/Fieldset/Fieldset.stories.tsx @@ -5,6 +5,7 @@ import { Label } from '../Label/Label' import { TextInput } from '../TextInput/TextInput' import { Checkbox } from '../Checkbox/Checkbox' import { Radio } from '../Radio/Radio' +import { RequiredMarker } from '../Label/RequiredMarker' export default { title: 'Components/Form elements/Fieldset', @@ -70,33 +71,40 @@ export const checkboxFieldset = (): React.ReactElement => ( ) export const checkboxFieldsetWithDefaultLegend = (): React.ReactElement => ( -
- - - - -
+ <> +

+ Required fields are marked with an asterisk ( + ). +

+
+ + + + +
+ ) export const radioFieldset = (): React.ReactElement => ( diff --git a/src/components/forms/Fieldset/Fieldset.test.tsx b/src/components/forms/Fieldset/Fieldset.test.tsx index b7aee18534..814a0edad5 100644 --- a/src/components/forms/Fieldset/Fieldset.test.tsx +++ b/src/components/forms/Fieldset/Fieldset.test.tsx @@ -26,6 +26,17 @@ describe('Fieldset component', () => { expect(myFieldset).toHaveAttribute('aria-live', 'polite') }) + it('renders with required marker', () => { + const { queryByText } = render( +
+ My Fieldset +
+ ) + const marker = queryByText('*') + expect(marker).toBeInTheDocument() + expect(marker).toHaveClass('usa-hint--required') + }) + describe('renders uswds classes', () => { it('renders legend with class usa-legend by default', () => { const { queryByTestId, getByText } = render( diff --git a/src/components/forms/Fieldset/Fieldset.tsx b/src/components/forms/Fieldset/Fieldset.tsx index a052caec17..0edb11c3b2 100644 --- a/src/components/forms/Fieldset/Fieldset.tsx +++ b/src/components/forms/Fieldset/Fieldset.tsx @@ -1,11 +1,13 @@ import React from 'react' import classnames from 'classnames' +import { RequiredMarker } from '../Label/RequiredMarker' type FieldsetProps = { children: React.ReactNode legend?: React.ReactNode legendStyle?: 'default' | 'large' | 'srOnly' className?: string + requiredMarker?: boolean } export const Fieldset = ({ @@ -13,6 +15,7 @@ export const Fieldset = ({ legend, className, legendStyle = 'default', + requiredMarker, ...fieldsetProps }: FieldsetProps & JSX.IntrinsicElements['fieldset']): React.ReactElement => { const classes = classnames('usa-fieldset', className) @@ -25,7 +28,17 @@ export const Fieldset = ({ return (
- {legend && {legend}} + {legend && ( + + {legend} + {requiredMarker && ( + <> + {' '} + + + )} + + )} {children}
) diff --git a/src/components/forms/FileInput/FileInput.stories.tsx b/src/components/forms/FileInput/FileInput.stories.tsx index 65eca5ed14..550d3d5f47 100644 --- a/src/components/forms/FileInput/FileInput.stories.tsx +++ b/src/components/forms/FileInput/FileInput.stories.tsx @@ -88,7 +88,7 @@ export const multipleFilesInput = (): React.ReactElement => ( export const withError = (): React.ReactElement => (
-