diff --git a/docs/contributing.md b/docs/contributing.md index 53aa973278..2fe096a735 100644 --- a/docs/contributing.md +++ b/docs/contributing.md @@ -1,6 +1,6 @@ # Contributing -We are glad you are interested to contribute to this project! Please make sure you've seen the README and license for this project before continuing further. If you work for Truss, check out the [guide for Trussels](./for_trussels.md) as well. +We are glad you are interested to contribute to this project! Please make sure you've seen the [README](../README.md) and [license](../README.md#license) for this project before continuing further. If you work for Truss, check out the [guide for Trussels](./for_trussels.md) as well. We welcome contributions in the form of comments, issues, or pull requests with code changes. If you see an error, have a question, or want to share feedback open an issue to discuss. This repository is governed by the [Contributor Covenant](../CODE_OF_CONDUCT.md) diff --git a/docs/faqs.md b/docs/faqs.md index d3ffd85ed2..a218bf2e4c 100644 --- a/docs/faqs.md +++ b/docs/faqs.md @@ -8,6 +8,12 @@ - Most components are standalone and can be dropped into your codebase anywhere. Assuming that you have imported the library and styles properly, please reference the project [Storybook](https://trussworks.github.io/react-uswds/) to learn how to use the component in your code. Click any of the component stories and you can "Show Code" to see the usage of the component in context. Storybook also has a tab on each story called "Docs" which will allow you to see full documentation of the types of props you can use. In addition, we have an example app (see `/example` directory) which shows how to use `react-uswds` components with other widely used Javascript/React dependencies. +- If something is not behaving as it should, or if I believe I've spotted a problem, where should I open an issue? + + - If a `react-uswds` component is displaying or behaving unexpectedly there may be an issue with the `react-uswds`, however the issue may exist within the [USWDS](https://designsystem.digital.gov/) itself. For the fastest, most effective resolution of the issue we recommend verifying if the issue is present in the base [USWDS component(s)](https://designsystem.digital.gov/components/) first. + - If so, please [file the issue directly within the USDWS Github repository](https://github.com/uswds/uswds/issues/new). + - If not, please [file an issue with us](https://github.com/trussworks/react-uswds/issues/new/choose). + - What's next? What is the roadmap for this project? - This library is active development. We use this library on our own projects at [Truss](https://truss.works/) and with clients. Follow library development and maintenance work in the [react-uswds Github project](https://github.com/trussworks/react-uswds/projects). In addition, reference the [milestones](https://github.com/trussworks/react-uswds/milestones) to track parity with various USWDS versions. There is no singular roadmap; our progress is shaped by those who contribute to the library, and by changes in the uswds specification. If you have work you'd like to see done earlier/sooner, please submit a PR. We welcome your contribution! diff --git a/docs/for_trussels.md b/docs/for_trussels.md index 60b975576b..c5ca36968e 100644 --- a/docs/for_trussels.md +++ b/docs/for_trussels.md @@ -30,7 +30,7 @@ Regardless of whether you are on client work or Reserve, it is _up to each indiv Typically any security alerts we receive will be related to third-party dependencies. This repo is currently configured so that Dependabot will automatically open PRs that fix dependency vulnerabilities, so ideally most of the time manual intervention is not needed. There may also be periods of time during which an alert is issued, but the related dependencies have not yet updated -- in this case, we usually choose to accept the risk of waiting until the updates have been released. However, if an exceptional case comes up -- such as a high severity vulnerability or even a vulnerability within this library -- and you aren't sure how to handle it, you can ask for help in one of the following Truss Slack channels (in order of relevance): #react-uswds, #g-frontend, #infrasec, #engineering -### Merging External PRS +### Merging External PRs Currently our CI cannot run on external PRs (work from outside the Truss organization) and this prevents merge. Instead, we pull PRs into a separate branch that a CODEOWNER creates [using this script](https://github.com/jklukas/git-push-fork-to-upstream-branch). We then close the external contribution PR [with a comment](https://github.com/trussworks/react-uswds/pull/375#issuecomment-668116811) explaining what's going. This allows automation to run properly. This is temporary solution. diff --git a/docs/styles_and_assets.md b/docs/styles_and_assets.md index 0fb0c32083..dc0806494f 100644 --- a/docs/styles_and_assets.md +++ b/docs/styles_and_assets.md @@ -76,7 +76,9 @@ $theme-hero-image: '~uswds/src/img/hero.png'; ### Icons -[USWDS recommends using Font Awesome](https://designsystem.digital.gov/components/icons/), and that project [provides a package for use with React](https://github.com/FortAwesome/react-fontawesome). +> **NOTE:** Newer USWDS versions have implemented [icons as a part of the USWDS](https://designsystem.digital.gov/components/icons/). These are on the `react-uswds` road map via [#992](https://github.com/trussworks/react-uswds/issues/992). This documentation will be updated once the `react-uswds` implementation is complete. + +USWDS previously recommended using [Font Awesome](https://fontawesome.com/), which [provides a package for use with React](https://github.com/FortAwesome/react-fontawesome). To add this to your project, install react-font-awesome and at least one style of icon: diff --git a/src/components/Accordion/Accordion.stories.tsx b/src/components/Accordion/Accordion.stories.tsx index a17f4d783a..34697e0657 100644 --- a/src/components/Accordion/Accordion.stories.tsx +++ b/src/components/Accordion/Accordion.stories.tsx @@ -5,11 +5,15 @@ export default { title: 'Components/Accordion', component: Accordion, parameters: { - info: ` -USWDS 2.0 Accordion component + docs: { + description: { + component: ` +### USWDS 2.0 Accordion component Source: https://designsystem.digital.gov/components/accordion/ `, + }, + }, }, } diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx index f65aeecca8..bd9b0f5a88 100644 --- a/src/components/Accordion/Accordion.tsx +++ b/src/components/Accordion/Accordion.tsx @@ -16,9 +16,14 @@ interface AccordionProps { className?: string } -export const AccordionItem = (props: AccordionItem): React.ReactElement => { - const { title, id, content, expanded, className, handleToggle } = props - +export const AccordionItem = ({ + title, + id, + content, + expanded, + className, + handleToggle +}: AccordionItem): React.ReactElement => { const headingClasses = classnames('usa-accordion__heading', className) const contentClasses = classnames( 'usa-accordion__content', @@ -50,9 +55,7 @@ export const AccordionItem = (props: AccordionItem): React.ReactElement => { ) } -export const Accordion = (props: AccordionProps): React.ReactElement => { - const { bordered, items, className } = props - +export const Accordion = ({ bordered, items, className }: AccordionProps): React.ReactElement => { const [openItems, setOpenState] = useState( items.filter((i) => !!i.expanded).map((i) => i.id) ) diff --git a/src/components/Alert/Alert.stories.tsx b/src/components/Alert/Alert.stories.tsx index 7fdadfd636..62adb1e9a3 100644 --- a/src/components/Alert/Alert.stories.tsx +++ b/src/components/Alert/Alert.stories.tsx @@ -7,11 +7,15 @@ export default { title: 'Components/Alert', component: Alert, parameters: { - info: ` -USWDS 2.0 Alert component + docs: { + description: { + component: ` +### USWDS 2.0 Alert component Source: https://designsystem.digital.gov/components/alert/ `, + }, + }, }, } diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx index 28a9c0aeb0..1c0872821f 100644 --- a/src/components/Button/Button.stories.tsx +++ b/src/components/Button/Button.stories.tsx @@ -5,11 +5,15 @@ export default { title: 'Components/Button', component: Button, parameters: { - info: ` -USWDS 2.0 Button component + docs: { + description: { + component: ` +### USWDS 2.0 Button component Source: https://designsystem.digital.gov/components/button/ `, + }, + }, }, } diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 52a202933f..bb38c27b90 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -26,10 +26,7 @@ interface ButtonProps { unstyled?: boolean } -export const Button = ( - props: ButtonProps & JSX.IntrinsicElements['button'] -): React.ReactElement => { - const { +export const Button = ({ type, children, secondary, @@ -45,7 +42,7 @@ export const Button = ( onClick, className, ...defaultProps - } = props + }: ButtonProps & JSX.IntrinsicElements['button']): React.ReactElement => { if (big) { deprecationWarning('Button property big is deprecated. Use size') diff --git a/src/components/ButtonGroup/ButtonGroup.stories.tsx b/src/components/ButtonGroup/ButtonGroup.stories.tsx index 217322f021..309160c16e 100644 --- a/src/components/ButtonGroup/ButtonGroup.stories.tsx +++ b/src/components/ButtonGroup/ButtonGroup.stories.tsx @@ -7,11 +7,15 @@ export default { title: 'Components/Button groups', component: ButtonGroup, parameters: { - info: ` -USWDS 2.0 ButtonGroup component + docs: { + description: { + component: ` +### USWDS 2.0 ButtonGroup component Source: https://designsystem.digital.gov/components/button-groups/ `, + }, + }, }, } diff --git a/src/components/ButtonGroup/ButtonGroup.tsx b/src/components/ButtonGroup/ButtonGroup.tsx index e2867f6cea..a2d5d57d77 100644 --- a/src/components/ButtonGroup/ButtonGroup.tsx +++ b/src/components/ButtonGroup/ButtonGroup.tsx @@ -7,9 +7,12 @@ type ButtonGroupProps = { type?: 'default' | 'segmented' } & JSX.IntrinsicElements['ul'] -export const ButtonGroup = (props: ButtonGroupProps): React.ReactElement => { - const { className, children, type = 'default', ...restProps } = props - +export const ButtonGroup = ({ + className, + children, + type = 'default', + ...restProps +}: ButtonGroupProps): React.ReactElement => { const classes = classnames( 'usa-button-group', { diff --git a/src/components/Footer/Address/Address.stories.tsx b/src/components/Footer/Address/Address.stories.tsx index 329fb8dabe..a81e079fd6 100644 --- a/src/components/Footer/Address/Address.stories.tsx +++ b/src/components/Footer/Address/Address.stories.tsx @@ -5,11 +5,15 @@ export default { title: 'Components/Footer/Address', component: Address, parameters: { - info: ` - Display address items (most likely links or simple text) in a row, wrapped in address tag. Used in USWDS 2.0 Footer component. + docs: { + description: { + component: ` +Display address items (most likely links or simple text) in a row, wrapped in address tag. Used in USWDS 2.0 Footer component. - Source: https://designsystem.digital.gov/components/form-controls/#footer - `, +Source: https://designsystem.digital.gov/components/form-controls/#footer +`, + }, + }, }, } diff --git a/src/components/Footer/Footer/Footer.stories.tsx b/src/components/Footer/Footer/Footer.stories.tsx index e61f67ebe3..af652fa66f 100644 --- a/src/components/Footer/Footer/Footer.stories.tsx +++ b/src/components/Footer/Footer/Footer.stories.tsx @@ -18,11 +18,15 @@ export default { title: 'Components/Footer', component: Footer, parameters: { - info: ` - USWDS 2.0 Footer component + docs: { + description: { + component: ` +### USWDS 2.0 Footer component - Source: https://designsystem.digital.gov/components/form-controls/#footer - `, +Source: https://designsystem.digital.gov/components/form-controls/#footer +`, + }, + }, }, } diff --git a/src/components/Footer/FooterNav/FooterNav.stories.tsx b/src/components/Footer/FooterNav/FooterNav.stories.tsx index 9c29f6f93d..55b92ed11a 100644 --- a/src/components/Footer/FooterNav/FooterNav.stories.tsx +++ b/src/components/Footer/FooterNav/FooterNav.stories.tsx @@ -8,11 +8,15 @@ export default { title: 'Components/Footer/FooterNav', component: FooterNav, parameters: { - info: ` - Display single list of nav items, or grouped nav items in an extended nav. Used in USWDS 2.0 Footer component. + docs: { + description: { + component: ` +Display single list of nav items, or grouped nav items in an extended nav. Used in USWDS 2.0 Footer component. - Source: https://designsystem.digital.gov/components/form-controls/#footer - `, +Source: https://designsystem.digital.gov/components/form-controls/#footer +`, + }, + }, }, } diff --git a/src/components/Footer/Logo/Logo.stories.tsx b/src/components/Footer/Logo/Logo.stories.tsx index 17b31ab4c7..328bb115a9 100644 --- a/src/components/Footer/Logo/Logo.stories.tsx +++ b/src/components/Footer/Logo/Logo.stories.tsx @@ -9,11 +9,15 @@ export default { title: 'Components/Footer/Logo', component: Logo, parameters: { - info: ` - Display logo image with optional heading. Used in USWDS 2.0 Footer component. + docs: { + description: { + component: ` +Display logo image with optional heading. Used in USWDS 2.0 Footer component. - Source: https://designsystem.digital.gov/components/form-controls/#footer - `, +Source: https://designsystem.digital.gov/components/form-controls/#footer +`, + }, + }, }, } diff --git a/src/components/Footer/SocialLinks/SocialLinks.stories.tsx b/src/components/Footer/SocialLinks/SocialLinks.stories.tsx index 5176d1fe7f..bd3811d63f 100644 --- a/src/components/Footer/SocialLinks/SocialLinks.stories.tsx +++ b/src/components/Footer/SocialLinks/SocialLinks.stories.tsx @@ -6,11 +6,15 @@ export default { title: 'Components/Footer/SocialLinks', component: SocialLinks, parameters: { - info: ` - Display social links in styled row. Used in USWDS 2.0 Footer component. - - Source: https://designsystem.digital.gov/components/form-controls/#footer - `, + docs: { + description: { + component: ` +Display social links in styled row. Used in USWDS 2.0 Footer component. + +Source: https://designsystem.digital.gov/components/form-controls/#footer +`, + }, + }, }, } diff --git a/src/components/Footer/SocialLinks/SocialLinks.tsx b/src/components/Footer/SocialLinks/SocialLinks.tsx index a769e1e046..7128e4a4e5 100644 --- a/src/components/Footer/SocialLinks/SocialLinks.tsx +++ b/src/components/Footer/SocialLinks/SocialLinks.tsx @@ -6,10 +6,9 @@ type SocialLinksProps = { links: React.ReactNode[] } -export const SocialLinks = ( - props: SocialLinksProps & JSX.IntrinsicElements['div'] -): React.ReactElement => { - const { className, links } = props +export const SocialLinks = ({ + className, links +}: SocialLinksProps & JSX.IntrinsicElements['div']): React.ReactElement => { const classes = classnames( 'usa-footer__social-links grid-row grid-gap-1', className diff --git a/src/components/GovBanner/GovBanner.stories.tsx b/src/components/GovBanner/GovBanner.stories.tsx index d5821a3941..b6d37e0077 100644 --- a/src/components/GovBanner/GovBanner.stories.tsx +++ b/src/components/GovBanner/GovBanner.stories.tsx @@ -1,7 +1,21 @@ import React from 'react' import { GovBanner } from './GovBanner' -export default { title: 'Components/Banner', component: GovBanner } +export default { + title: 'Components/Banner', + component: GovBanner, + parameters: { + docs: { + description: { + component: ` +### USWDS 2.0 Banner component + +Source: https://designsystem.digital.gov/components/banner/ +`, + }, + }, + }, +} export const govBannerDefault = (): React.ReactElement => ( diff --git a/src/components/GovBanner/GovBanner.tsx b/src/components/GovBanner/GovBanner.tsx index 4f4d137c82..d8be425f46 100644 --- a/src/components/GovBanner/GovBanner.tsx +++ b/src/components/GovBanner/GovBanner.tsx @@ -101,15 +101,12 @@ interface GovBannerProps { language?: Language } -export const GovBanner = ( - props: GovBannerProps & JSX.IntrinsicElements['section'] -): React.ReactElement => { - const { - tld = '.gov', - language = 'english', - className, - ...sectionProps - } = props +export const GovBanner = ({ + tld = '.gov', + language = 'english', + className, + ...sectionProps +}: GovBannerProps & JSX.IntrinsicElements['section']): React.ReactElement => { const [isOpen, setOpenState] = useState(false) const classes = classnames('usa-banner', className) diff --git a/src/components/Link/Link.stories.tsx b/src/components/Link/Link.stories.tsx index 44f0307f80..c01c24c275 100644 --- a/src/components/Link/Link.stories.tsx +++ b/src/components/Link/Link.stories.tsx @@ -5,9 +5,13 @@ export default { title: 'Components/Typography/Link', component: Link, parameters: { - info: `Link component - - Based on Typography guide: https://designsystem.digital.gov/components/typography/#links`, + docs: { + description: { + component: ` +Based on Typography guide: https://designsystem.digital.gov/components/typography/#links +`, + }, + }, }, } diff --git a/src/components/Modal/Modal.stories.tsx b/src/components/Modal/Modal.stories.tsx index 4ff3d54017..d5cf51439c 100644 --- a/src/components/Modal/Modal.stories.tsx +++ b/src/components/Modal/Modal.stories.tsx @@ -8,7 +8,15 @@ export default { title: 'Other/Modal', component: Modal, parameters: { - info: `Truss-designed component`, + docs: { + description: { + component: ` +Truss-designed component + +**Note:** This component has been deprecated and is scheduled for removal. +`, + }, + }, }, } diff --git a/src/components/Search/Search.stories.tsx b/src/components/Search/Search.stories.tsx index 43646881db..9c46428655 100644 --- a/src/components/Search/Search.stories.tsx +++ b/src/components/Search/Search.stories.tsx @@ -5,11 +5,15 @@ export default { title: 'Components/Search', component: Search, parameters: { - info: ` -USWDS 2.0 Search component + docs: { + description: { + component: ` +### USWDS 2.0 Search component Source: https://designsystem.digital.gov/components/search/ `, + }, + }, }, } diff --git a/src/components/Search/Search.tsx b/src/components/Search/Search.tsx index d29860ea97..c8f0cbc2c2 100644 --- a/src/components/Search/Search.tsx +++ b/src/components/Search/Search.tsx @@ -25,21 +25,18 @@ interface SearchInputProps { placeholder?: string } -export const Search = ( - props: SearchInputProps & OptionalFormProps -): React.ReactElement => { - const { - onSubmit, - inputId = 'search-field', - inputName = 'search', - size, - big, - small, - label = 'Search', - className, - placeholder, - ...formProps - } = props +export const Search = ({ + onSubmit, + inputId = 'search-field', + inputName = 'search', + size, + big, + small, + label = 'Search', + className, + placeholder, + ...formProps +}: SearchInputProps & OptionalFormProps): React.ReactElement => { if (big) { deprecationWarning('Search property big is deprecated. Use size') } diff --git a/src/components/Table/Table.stories.tsx b/src/components/Table/Table.stories.tsx index a8273666a9..fae24020aa 100644 --- a/src/components/Table/Table.stories.tsx +++ b/src/components/Table/Table.stories.tsx @@ -5,11 +5,15 @@ export default { title: 'Components/Table', component: Table, parameters: { - info: ` -USWDS 2.0 Table component + docs: { + description: { + component: ` +### USWDS 2.0 Table component Source: https://designsystem.digital.gov/components/table/ `, + }, + }, }, } diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx index e7e86792cc..b5c37eebed 100644 --- a/src/components/Table/Table.tsx +++ b/src/components/Table/Table.tsx @@ -11,9 +11,9 @@ interface TableProps { fixed?: boolean } -export const Table = (props: TableProps): React.ReactElement => { - const { bordered, caption, children, fullWidth, fixed } = props - +export const Table = ({ + bordered, caption, children, fullWidth, fixed +}: TableProps): React.ReactElement => { const classes = classnames('usa-table', { 'usa-table--borderless': !bordered, [`${styles.fullwidth}`]: fullWidth, diff --git a/src/components/Tag/Tag.stories.tsx b/src/components/Tag/Tag.stories.tsx index dd1fd74343..37a30fd6f0 100644 --- a/src/components/Tag/Tag.stories.tsx +++ b/src/components/Tag/Tag.stories.tsx @@ -5,11 +5,15 @@ export default { title: 'Components/Tag', component: Tag, parameters: { - info: ` -USWDS 2.0 Tag component + docs: { + description: { + component: ` +### USWDS 2.0 Tag component Source: https://designsystem.digital.gov/components/tag/ `, + }, + }, }, } diff --git a/src/components/Tag/Tag.tsx b/src/components/Tag/Tag.tsx index 43a4b65a87..837e2c9955 100644 --- a/src/components/Tag/Tag.tsx +++ b/src/components/Tag/Tag.tsx @@ -6,10 +6,9 @@ interface TagProps { background?: string } -export const Tag = ( - props: TagProps & JSX.IntrinsicElements['span'] -): React.ReactElement => { - const { children, background, className, ...spanProps } = props +export const Tag = ({ + children, background, className, ...spanProps +}: TagProps & JSX.IntrinsicElements['span']): React.ReactElement => { const style: React.CSSProperties = {} if (background) { diff --git a/src/components/breadcrumb/Breadcrumb/Breadcrumb.tsx b/src/components/breadcrumb/Breadcrumb/Breadcrumb.tsx index 8cf0add014..dae42c0e2c 100644 --- a/src/components/breadcrumb/Breadcrumb/Breadcrumb.tsx +++ b/src/components/breadcrumb/Breadcrumb/Breadcrumb.tsx @@ -6,10 +6,12 @@ export interface BreadcrumbProps { current?: boolean } -export const Breadcrumb = ( - props: BreadcrumbProps & JSX.IntrinsicElements['li'] -): React.ReactElement => { - const { children, current = false, className, ...listItemProps } = props +export const Breadcrumb = ({ + children, + current = false, + className, + ...listItemProps +}: BreadcrumbProps & JSX.IntrinsicElements['li']): React.ReactElement => { const classes = classnames( 'usa-breadcrumb__list-item', { diff --git a/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.stories.tsx b/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.stories.tsx index 1f33bd3d98..b6a41157e2 100644 --- a/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.stories.tsx +++ b/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.stories.tsx @@ -6,12 +6,20 @@ import { BreadcrumbLink } from '../BreadcrumbLink/BreadcrumbLink' export default { title: 'Components/Breadcrumb', component: BreadcrumbBar, + subcomponents: { Breadcrumb, BreadcrumbLink }, parameters: { - info: ` - Provide secondary navigation to help users understand where they are in a website. + docs: { + description: { + component: ` +### USWDS 2.0 Breadcrumb component - Source: https://designsystem.digital.gov/components/breadcrumb/ - `, +Provide secondary navigation to help users understand where they are in a website. + +Source: https://designsystem.digital.gov/components/breadcrumb/ + `, + + } + } }, } diff --git a/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.tsx b/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.tsx index 6cf7c36664..caad289d07 100644 --- a/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.tsx +++ b/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.tsx @@ -10,16 +10,13 @@ interface BreadcrumbBarProps { listProps?: JSX.IntrinsicElements['ol'] } -export const BreadcrumbBar = ( - props: BreadcrumbBarProps -): React.ReactElement => { - const { - variant = 'default', - children, - className, - navProps, - listProps, - } = props +export const BreadcrumbBar = ({ + variant = 'default', + children, + className, + navProps, + listProps, +}: BreadcrumbBarProps): React.ReactElement => { const classes = classnames( 'usa-breadcrumb', { diff --git a/src/components/breadcrumb/BreadcrumbLink/BreadcrumbLink.tsx b/src/components/breadcrumb/BreadcrumbLink/BreadcrumbLink.tsx index 57a5826939..51b08bf8f0 100644 --- a/src/components/breadcrumb/BreadcrumbLink/BreadcrumbLink.tsx +++ b/src/components/breadcrumb/BreadcrumbLink/BreadcrumbLink.tsx @@ -9,15 +9,20 @@ import { export function BreadcrumbLink(props: DefaultLinkProps): React.ReactElement export function BreadcrumbLink(props: CustomLinkProps): React.ReactElement -export function BreadcrumbLink( - props: DefaultLinkProps | CustomLinkProps -): React.ReactElement { - const { className } = props +export function BreadcrumbLink({ + className, + ...passThroughProps +}: DefaultLinkProps | CustomLinkProps): React.ReactElement { const classes = classnames(className, 'usa-breadcrumb__link') - if (isCustomProps(props)) { - return {...props} className={classes} variant="unstyled" /> + const linkProps = { + ...passThroughProps, + className: classes + } as DefaultLinkProps | CustomLinkProps + + if (isCustomProps(linkProps)) { + return {...linkProps} variant="unstyled" /> } - return + return } diff --git a/src/components/card/Card.stories.tsx b/src/components/card/Card.stories.tsx index 70637d472a..46fcbbc656 100644 --- a/src/components/card/Card.stories.tsx +++ b/src/components/card/Card.stories.tsx @@ -12,11 +12,15 @@ export default { title: 'Components/Card', component: Card, parameters: { - info: ` -USWDS 2.0 Card components + docs: { + description: { + component: ` +### USWDS 2.0 Card components Source: https://designsystem.digital.gov/components/card/ `, + }, + }, }, } diff --git a/src/components/card/Card/Card.tsx b/src/components/card/Card/Card.tsx index 1c03bc2844..d02107a7e6 100644 --- a/src/components/card/Card/Card.tsx +++ b/src/components/card/Card/Card.tsx @@ -9,19 +9,15 @@ interface CardProps { containerProps?: React.HTMLAttributes } -export const Card = ( - props: CardProps & JSX.IntrinsicElements['li'] & GridLayoutProp -): React.ReactElement => { - const { - layout = 'standardDefault', - headerFirst, - children, - className, - gridLayout, - containerProps, - ...liProps - } = props - +export const Card = ({ + layout = 'standardDefault', + headerFirst, + children, + className, + gridLayout, + containerProps, + ...liProps +}: CardProps & JSX.IntrinsicElements['li'] & GridLayoutProp): React.ReactElement => { const { className: containerClass, ...restContainerProps } = containerProps || {} diff --git a/src/components/card/CardBody/CardBody.tsx b/src/components/card/CardBody/CardBody.tsx index a7582307f1..bbc9d2352e 100644 --- a/src/components/card/CardBody/CardBody.tsx +++ b/src/components/card/CardBody/CardBody.tsx @@ -1,11 +1,9 @@ import React from 'react' import classnames from 'classnames' -export const CardBody = ( - props: { exdent?: boolean } & JSX.IntrinsicElements['div'] -): React.ReactElement => { - const { exdent, children, className, ...bodyProps } = props - +export const CardBody = ({ + exdent, children, className, ...bodyProps +}: { exdent?: boolean } & JSX.IntrinsicElements['div']): React.ReactElement => { const classes = classnames( 'usa-card__body', { diff --git a/src/components/card/CardFooter/CardFooter.tsx b/src/components/card/CardFooter/CardFooter.tsx index bdaed80c40..88a1a160dc 100644 --- a/src/components/card/CardFooter/CardFooter.tsx +++ b/src/components/card/CardFooter/CardFooter.tsx @@ -1,11 +1,9 @@ import React from 'react' import classnames from 'classnames' -export const CardFooter = ( - props: { exdent?: boolean } & JSX.IntrinsicElements['div'] -): React.ReactElement => { - const { exdent, children, className, ...footerProps } = props - +export const CardFooter = ({ + exdent, children, className, ...footerProps +}: { exdent?: boolean } & JSX.IntrinsicElements['div']): React.ReactElement => { const classes = classnames( 'usa-card__footer', { diff --git a/src/components/card/CardGroup/CardGroup.tsx b/src/components/card/CardGroup/CardGroup.tsx index b5fb3ebeab..2caa74450a 100644 --- a/src/components/card/CardGroup/CardGroup.tsx +++ b/src/components/card/CardGroup/CardGroup.tsx @@ -1,11 +1,9 @@ import React from 'react' import classnames from 'classnames' -export const CardGroup = ( - props: JSX.IntrinsicElements['ul'] -): React.ReactElement => { - const { children, className, ...ulProps } = props - +export const CardGroup = ({ + children, className, ...ulProps +}: JSX.IntrinsicElements['ul']): React.ReactElement => { const classes = classnames('usa-card-group', className) return ( diff --git a/src/components/card/CardHeader/CardHeader.tsx b/src/components/card/CardHeader/CardHeader.tsx index 9704bd00b6..81b50a8494 100644 --- a/src/components/card/CardHeader/CardHeader.tsx +++ b/src/components/card/CardHeader/CardHeader.tsx @@ -1,10 +1,9 @@ import React from 'react' import classnames from 'classnames' -export const CardHeader = ( - props: { exdent?: boolean } & JSX.IntrinsicElements['header'] -): React.ReactElement => { - const { exdent, children, className, ...headerProps } = props +export const CardHeader = ({ + exdent, children, className, ...headerProps +}: { exdent?: boolean } & JSX.IntrinsicElements['header']): React.ReactElement => { const classes = classnames( 'usa-card__header', diff --git a/src/components/card/CardMedia/CardMedia.tsx b/src/components/card/CardMedia/CardMedia.tsx index 5176da2677..576393446b 100644 --- a/src/components/card/CardMedia/CardMedia.tsx +++ b/src/components/card/CardMedia/CardMedia.tsx @@ -8,18 +8,14 @@ interface CardMediaProps { children: React.ReactNode } -export const CardMedia = ( - props: CardMediaProps & JSX.IntrinsicElements['div'] -): React.ReactElement => { - const { - exdent, - inset, - imageClass, - children, - className, - ...mediaProps - } = props - +export const CardMedia = ({ + exdent, + inset, + imageClass, + children, + className, + ...mediaProps +}: CardMediaProps & JSX.IntrinsicElements['div']): React.ReactElement => { const classes = classnames( 'usa-card__media', { diff --git a/src/components/forms/CharacterCount/CharacterCount.stories.tsx b/src/components/forms/CharacterCount/CharacterCount.stories.tsx index 4d9865c1c9..aab8d5e190 100644 --- a/src/components/forms/CharacterCount/CharacterCount.stories.tsx +++ b/src/components/forms/CharacterCount/CharacterCount.stories.tsx @@ -7,11 +7,15 @@ import { Label } from '../Label/Label' export default { title: 'Components/Form controls/CharacterCount', parameters: { - info: ` -USWDS 2.0 Character count component + docs: { + description: { + component: ` +### USWDS 2.0 Character count component Source: https://designsystem.digital.gov/components/form-controls/#character-count `, + }, + }, }, } const mockSubmit = (): void => { diff --git a/src/components/forms/Checkbox/Checkbox.stories.tsx b/src/components/forms/Checkbox/Checkbox.stories.tsx index 458dce70ee..8d44d8086d 100644 --- a/src/components/forms/Checkbox/Checkbox.stories.tsx +++ b/src/components/forms/Checkbox/Checkbox.stories.tsx @@ -5,11 +5,15 @@ export default { title: 'Components/Form controls/Checkbox', component: Checkbox, parameters: { - info: ` -USWDS 2.0 Checkbox component + docs: { + description: { + component: ` +### USWDS 2.0 Checkbox component Source: https://designsystem.digital.gov/components/form-controls/#checkbox `, + }, + }, }, } diff --git a/src/components/forms/Checkbox/Checkbox.tsx b/src/components/forms/Checkbox/Checkbox.tsx index 8b7881f28b..e514985fbd 100644 --- a/src/components/forms/Checkbox/Checkbox.tsx +++ b/src/components/forms/Checkbox/Checkbox.tsx @@ -14,11 +14,9 @@ interface CheckboxProps { | undefined } -export const Checkbox = ( - props: CheckboxProps & JSX.IntrinsicElements['input'] -): React.ReactElement => { - const { id, name, className, label, inputRef, ...inputProps } = props - +export const Checkbox = ({ + id, name, className, label, inputRef, ...inputProps +}: CheckboxProps & JSX.IntrinsicElements['input']): React.ReactElement => { const classes = classnames('usa-checkbox', className) return ( diff --git a/src/components/forms/ComboBox/ComboBox.stories.tsx b/src/components/forms/ComboBox/ComboBox.stories.tsx index ee4de2c479..3318003b4c 100644 --- a/src/components/forms/ComboBox/ComboBox.stories.tsx +++ b/src/components/forms/ComboBox/ComboBox.stories.tsx @@ -10,11 +10,15 @@ export default { title: 'Components/Form controls/Combo box', component: ComboBox, parameters: { - info: ` -USWDS 2.0 ComboBox component + docs: { + description: { + component: ` +### USWDS 2.0 ComboBox component Source: https://designsystem.digital.gov/components/form-controls/#ComboBox `, + }, + }, }, } diff --git a/src/components/forms/ComboBox/ComboBox.tsx b/src/components/forms/ComboBox/ComboBox.tsx index 169c658ac6..909dcc7054 100644 --- a/src/components/forms/ComboBox/ComboBox.tsx +++ b/src/components/forms/ComboBox/ComboBox.tsx @@ -43,10 +43,9 @@ interface InputProps { focused: boolean } -const Input = ( - props: InputProps & JSX.IntrinsicElements['input'] -): React.ReactElement => { - const { focused, ...inputProps } = props +const Input = ({ + focused, ...inputProps +}: InputProps & JSX.IntrinsicElements['input']): React.ReactElement => { const inputRef = useRef(null) useEffect(() => { if (focused && inputRef.current) { @@ -67,21 +66,19 @@ const Input = ( ) } -export const ComboBox = (props: ComboBoxProps): React.ReactElement => { - const { - id, - name, - className, - options, - defaultValue, - disabled, - onChange, - assistiveHint, - noResults, - selectProps, - inputProps, - } = props - +export const ComboBox = ({ + id, + name, + className, + options, + defaultValue, + disabled, + onChange, + assistiveHint, + noResults, + selectProps, + inputProps, +}: ComboBoxProps): React.ReactElement => { const isDisabled = !!disabled let defaultOption diff --git a/src/components/forms/DateInput/DateInput.stories.tsx b/src/components/forms/DateInput/DateInput.stories.tsx index 57e732ae5c..281b113a31 100644 --- a/src/components/forms/DateInput/DateInput.stories.tsx +++ b/src/components/forms/DateInput/DateInput.stories.tsx @@ -7,11 +7,15 @@ export default { title: 'Components/Form controls/Date input', component: DateInput, parameters: { - info: ` -USWDS 2.0 DateInput component + docs: { + description: { + component: ` +### USWDS 2.0 DateInput component Source: https://designsystem.digital.gov/components/form-controls/#date-input `, + }, + }, }, } diff --git a/src/components/forms/DateInput/DateInput.tsx b/src/components/forms/DateInput/DateInput.tsx index 3a6b61e030..87d66d4623 100644 --- a/src/components/forms/DateInput/DateInput.tsx +++ b/src/components/forms/DateInput/DateInput.tsx @@ -14,20 +14,16 @@ interface DateInputElementProps { minLength?: number } -export const DateInput = ( - props: DateInputElementProps & OptionalTextInputProps -): React.ReactElement => { - const { - id, - name, - label, - unit, - maxLength, - minLength, - className, - ...inputProps - } = props - +export const DateInput = ({ + id, + name, + label, + unit, + maxLength, + minLength, + className, + ...inputProps +}: DateInputElementProps & OptionalTextInputProps): React.ReactElement => { const formGroupClasses = classnames({ 'usa-form-group--month': unit == 'month', 'usa-form-group--day': unit == 'day', diff --git a/src/components/forms/DateInputGroup/DateInputGroup.tsx b/src/components/forms/DateInputGroup/DateInputGroup.tsx index 3623f7e341..70e714bc8e 100644 --- a/src/components/forms/DateInputGroup/DateInputGroup.tsx +++ b/src/components/forms/DateInputGroup/DateInputGroup.tsx @@ -1,10 +1,9 @@ import React from 'react' import classnames from 'classnames' -export const DateInputGroup = ( - props: JSX.IntrinsicElements['div'] -): React.ReactElement => { - const { children, className, ...divAttributes } = props +export const DateInputGroup = ({ + children, className, ...divAttributes +}: JSX.IntrinsicElements['div']): React.ReactElement => { const classes = classnames('usa-memorable-date', className) diff --git a/src/components/forms/DatePicker/DatePicker.stories.tsx b/src/components/forms/DatePicker/DatePicker.stories.tsx index 9738a330f7..477b3655ab 100644 --- a/src/components/forms/DatePicker/DatePicker.stories.tsx +++ b/src/components/forms/DatePicker/DatePicker.stories.tsx @@ -18,6 +18,7 @@ export default { description: { component: ` ### USWDS 2.0 DatePicker component + Source: https://designsystem.digital.gov/components/form-controls/#DatePicker **Note:** There is one small difference in functionality between this component and the USWDS implementation, related to validating the input. The USWDS implementation validates when: diff --git a/src/components/forms/DatePicker/DatePicker.tsx b/src/components/forms/DatePicker/DatePicker.tsx index 7df9ec4c4e..af13a3e040 100644 --- a/src/components/forms/DatePicker/DatePicker.tsx +++ b/src/components/forms/DatePicker/DatePicker.tsx @@ -45,23 +45,19 @@ export enum FocusMode { Input, } -export const DatePicker = ( - props: DatePickerProps & JSX.IntrinsicElements['input'] -): React.ReactElement => { - const { - id, - name, - defaultValue, - disabled, - required, - minDate = DEFAULT_MIN_DATE, - maxDate, - rangeDate, - onChange, - onBlur, - ...inputProps - } = props - +export const DatePicker = ({ + id, + name, + defaultValue, + disabled, + required, + minDate = DEFAULT_MIN_DATE, + maxDate, + rangeDate, + onChange, + onBlur, + ...inputProps +}: DatePickerProps & JSX.IntrinsicElements['input']): React.ReactElement => { const datePickerEl = useRef(null) const externalInputEl = useRef(null) diff --git a/src/components/forms/Dropdown/Dropdown.stories.tsx b/src/components/forms/Dropdown/Dropdown.stories.tsx index 5ee874957f..e2d9ed8365 100644 --- a/src/components/forms/Dropdown/Dropdown.stories.tsx +++ b/src/components/forms/Dropdown/Dropdown.stories.tsx @@ -7,11 +7,15 @@ export default { title: 'Components/Form controls/Dropdown', component: Dropdown, parameters: { - info: ` -USWDS 2.0 Dropdown component + docs: { + description: { + component: ` +### USWDS 2.0 Dropdown component Source: https://designsystem.digital.gov/components/form-controls/#dropdown `, + }, + }, }, } diff --git a/src/components/forms/Dropdown/Dropdown.tsx b/src/components/forms/Dropdown/Dropdown.tsx index 67826dd7b2..e018b17d68 100644 --- a/src/components/forms/Dropdown/Dropdown.tsx +++ b/src/components/forms/Dropdown/Dropdown.tsx @@ -14,11 +14,9 @@ interface DropdownProps { | undefined } -export const Dropdown = ( - props: DropdownProps & JSX.IntrinsicElements['select'] -): React.ReactElement => { - const { id, name, className, inputRef, children, ...inputProps } = props - +export const Dropdown = ({ + id, name, className, inputRef, children, ...inputProps +} : DropdownProps & JSX.IntrinsicElements['select']): React.ReactElement => { const classes = classnames('usa-select', className) return ( diff --git a/src/components/forms/ErrorMessage/ErrorMessage.stories.tsx b/src/components/forms/ErrorMessage/ErrorMessage.stories.tsx index 8ae9e511f1..d486c13667 100644 --- a/src/components/forms/ErrorMessage/ErrorMessage.stories.tsx +++ b/src/components/forms/ErrorMessage/ErrorMessage.stories.tsx @@ -5,11 +5,15 @@ export default { title: 'Components/Form elements/ErrorMessage', component: ErrorMessage, parameters: { - info: ` -USWDS 2.0 ErrorMessage component + docs: { + description: { + component: ` +### USWDS 2.0 ErrorMessage component Source: https://designsystem.digital.gov/components/form-controls/ `, + }, + }, }, } diff --git a/src/components/forms/ErrorMessage/ErrorMessage.tsx b/src/components/forms/ErrorMessage/ErrorMessage.tsx index 33de4b68c5..b6a80bcca1 100644 --- a/src/components/forms/ErrorMessage/ErrorMessage.tsx +++ b/src/components/forms/ErrorMessage/ErrorMessage.tsx @@ -7,9 +7,9 @@ interface ErrorMessageProps { className?: string } -export const ErrorMessage = (props: ErrorMessageProps): React.ReactElement => { - const { children, className, id } = props - +export const ErrorMessage = ({ + children, className, id +}: ErrorMessageProps): React.ReactElement => { const classes = classnames('usa-error-message', className) return ( diff --git a/src/components/forms/Fieldset/Fieldset.stories.tsx b/src/components/forms/Fieldset/Fieldset.stories.tsx index 43f477a35b..165165b604 100644 --- a/src/components/forms/Fieldset/Fieldset.stories.tsx +++ b/src/components/forms/Fieldset/Fieldset.stories.tsx @@ -10,11 +10,15 @@ export default { title: 'Components/Form elements/Fieldset', component: Fieldset, parameters: { - info: ` -USWDS 2.0 Fieldset component + docs: { + description: { + component: ` +### USWDS 2.0 Fieldset component Source: https://designsystem.digital.gov/components/form-controls/ `, + }, + }, }, } diff --git a/src/components/forms/Fieldset/Fieldset.tsx b/src/components/forms/Fieldset/Fieldset.tsx index 69045b611d..0669a013c3 100644 --- a/src/components/forms/Fieldset/Fieldset.tsx +++ b/src/components/forms/Fieldset/Fieldset.tsx @@ -8,9 +8,9 @@ interface FieldsetProps { className?: string } -export const Fieldset = (props: FieldsetProps): React.ReactElement => { - const { children, legend, className, legendSrOnly } = props - +export const Fieldset = ({ + children, legend, className, legendSrOnly +}: FieldsetProps): React.ReactElement => { const classes = classnames('usa-fieldset', className) const legendClasses = classnames('usa-legend', { diff --git a/src/components/forms/FileInput/FileInput.tsx b/src/components/forms/FileInput/FileInput.tsx index e655f6de12..9a3ce286d7 100644 --- a/src/components/forms/FileInput/FileInput.tsx +++ b/src/components/forms/FileInput/FileInput.tsx @@ -15,21 +15,18 @@ interface FileInputProps { inputRef?: React.RefObject } -export const FileInput = ( - props: FileInputProps & JSX.IntrinsicElements['input'] -): React.ReactElement => { - const { - name, - id, - disabled, - multiple, - className, - accept, - onChange, - onDrop, - inputRef, - ...inputProps - } = props +export const FileInput = ({ + name, + id, + disabled, + multiple, + className, + accept, + onChange, + onDrop, + inputRef, + ...inputProps +}: FileInputProps & JSX.IntrinsicElements['input']): React.ReactElement => { const [isDragging, setIsDragging] = useState(false) const [showError, setShowError] = useState(false) const [files, setFiles] = useState(null) diff --git a/src/components/forms/Form/Form.stories.tsx b/src/components/forms/Form/Form.stories.tsx index 959378ff11..ecff948e5f 100644 --- a/src/components/forms/Form/Form.stories.tsx +++ b/src/components/forms/Form/Form.stories.tsx @@ -16,11 +16,15 @@ export default { title: 'Components/Form templates', component: Form, parameters: { - info: ` -USWDS 2.0 Form component + docs: { + description: { + component: ` +### USWDS 2.0 Form component Source: https://designsystem.digital.gov/components/form-templates/ `, + }, + }, }, } diff --git a/src/components/forms/Form/Form.tsx b/src/components/forms/Form/Form.tsx index 5ba54aa44b..028fef7335 100644 --- a/src/components/forms/Form/Form.tsx +++ b/src/components/forms/Form/Form.tsx @@ -16,9 +16,9 @@ export type OptionalFormProps = CustomFormProps & JSX.IntrinsicElements['form'] type FormProps = RequiredFormProps & OptionalFormProps -export const Form = (props: FormProps): React.ReactElement => { - const { onSubmit, children, className, large, search, ...formProps } = props - +export const Form = ({ + onSubmit, children, className, large, search, ...formProps +}: FormProps): React.ReactElement => { const classes = classnames( { 'usa-form': !search, diff --git a/src/components/forms/FormGroup/FormGroup.stories.tsx b/src/components/forms/FormGroup/FormGroup.stories.tsx index 92a8829975..d878014fba 100644 --- a/src/components/forms/FormGroup/FormGroup.stories.tsx +++ b/src/components/forms/FormGroup/FormGroup.stories.tsx @@ -9,11 +9,15 @@ export default { title: 'Components/Form elements/FormGroup', component: FormGroup, parameters: { - info: ` -USWDS 2.0 FormGroup component + docs: { + description: { + component: ` +### USWDS 2.0 FormGroup component Source: https://designsystem.digital.gov/components/form-templates/ `, + }, + }, }, } diff --git a/src/components/forms/FormGroup/FormGroup.tsx b/src/components/forms/FormGroup/FormGroup.tsx index a559a3947d..1b606c223c 100644 --- a/src/components/forms/FormGroup/FormGroup.tsx +++ b/src/components/forms/FormGroup/FormGroup.tsx @@ -7,9 +7,9 @@ interface FormGroupProps { error?: boolean } -export const FormGroup = (props: FormGroupProps): React.ReactElement => { - const { children, className, error } = props - +export const FormGroup = ({ + children, className, error +}: FormGroupProps): React.ReactElement => { const classes = classnames( 'usa-form-group', { 'usa-form-group--error': error }, diff --git a/src/components/forms/Label/Label.stories.tsx b/src/components/forms/Label/Label.stories.tsx index 07de65b0e8..861cb9f9be 100644 --- a/src/components/forms/Label/Label.stories.tsx +++ b/src/components/forms/Label/Label.stories.tsx @@ -5,11 +5,15 @@ export default { title: 'Components/Form elements/Label', component: Label, parameters: { - info: ` -USWDS 2.0 Label component + docs: { + description: { + component: ` +### USWDS 2.0 Label component Source: https://designsystem.digital.gov/components/form-controls/ `, + }, + }, }, } diff --git a/src/components/forms/Label/Label.tsx b/src/components/forms/Label/Label.tsx index ba888745df..0865a42dfa 100644 --- a/src/components/forms/Label/Label.tsx +++ b/src/components/forms/Label/Label.tsx @@ -10,19 +10,15 @@ interface LabelProps { srOnly?: boolean } -export const Label = ( - props: LabelProps & JSX.IntrinsicElements['label'] -): React.ReactElement => { - const { - children, - htmlFor, - className, - error, - hint, - srOnly, - ...labelProps - } = props - +export const Label = ({ + children, + htmlFor, + className, + error, + hint, + srOnly, + ...labelProps +}: LabelProps & JSX.IntrinsicElements['label']): React.ReactElement => { const classes = classnames( { 'usa-label': !srOnly, diff --git a/src/components/forms/Radio/Radio.stories.tsx b/src/components/forms/Radio/Radio.stories.tsx index fcfb5af583..19fd4eee2d 100644 --- a/src/components/forms/Radio/Radio.stories.tsx +++ b/src/components/forms/Radio/Radio.stories.tsx @@ -5,11 +5,15 @@ export default { title: 'Components/Form controls/Radio buttons', component: Radio, parameters: { - info: ` -USWDS 2.0 Radio component + docs: { + description: { + component: ` +### USWDS 2.0 Radio component Source: https://designsystem.digital.gov/components/form-controls/#radio-buttons `, + }, + }, }, } diff --git a/src/components/forms/Radio/Radio.tsx b/src/components/forms/Radio/Radio.tsx index 302f6a16d7..c02069dc59 100644 --- a/src/components/forms/Radio/Radio.tsx +++ b/src/components/forms/Radio/Radio.tsx @@ -14,11 +14,9 @@ interface RadioProps { | undefined } -export const Radio = ( - props: RadioProps & JSX.IntrinsicElements['input'] -): React.ReactElement => { - const { id, name, className, label, inputRef, ...inputProps } = props - +export const Radio = ({ + id, name, className, label, inputRef, ...inputProps +}: RadioProps & JSX.IntrinsicElements['input']): React.ReactElement => { const classes = classnames('usa-radio', className) return ( diff --git a/src/components/forms/RangeInput/RangeInput.stories.tsx b/src/components/forms/RangeInput/RangeInput.stories.tsx index 03f1a5597d..6529d6cb53 100644 --- a/src/components/forms/RangeInput/RangeInput.stories.tsx +++ b/src/components/forms/RangeInput/RangeInput.stories.tsx @@ -6,11 +6,15 @@ export default { title: 'Components/Form controls/Range slider', component: RangeInput, parameters: { - info: ` -USWDS 2.0 RangeInput component + docs: { + description: { + component: ` +### USWDS 2.0 RangeInput component Source: https://designsystem.digital.gov/components/form-controls/#range `, + }, + }, }, } diff --git a/src/components/forms/RangeInput/RangeInput.tsx b/src/components/forms/RangeInput/RangeInput.tsx index 40efe1bac3..0fe39eb7a3 100644 --- a/src/components/forms/RangeInput/RangeInput.tsx +++ b/src/components/forms/RangeInput/RangeInput.tsx @@ -12,11 +12,10 @@ interface RangeInputProps { | undefined } -export const RangeInput = ( - props: RangeInputProps & JSX.IntrinsicElements['input'] -): React.ReactElement => { +export const RangeInput = ({ + className, inputRef, ...inputProps +}: RangeInputProps & JSX.IntrinsicElements['input']): React.ReactElement => { // Range defaults to min = 0, max = 100, step = 1, and value = (max/2) if not specified. - const { className, inputRef, ...inputProps } = props const classes = classnames('usa-range', className) diff --git a/src/components/forms/TextInput/TextInput.stories.tsx b/src/components/forms/TextInput/TextInput.stories.tsx index dc117def1e..b76755d48a 100644 --- a/src/components/forms/TextInput/TextInput.stories.tsx +++ b/src/components/forms/TextInput/TextInput.stories.tsx @@ -5,11 +5,15 @@ export default { title: 'Components/Form controls/Text input', component: TextInput, parameters: { - info: ` -USWDS 2.0 TextInput component + docs: { + description: { + component: ` +### USWDS 2.0 TextInput component Source: https://designsystem.digital.gov/components/form-controls/#text-input `, + }, + }, }, } diff --git a/src/components/forms/TextInput/TextInput.tsx b/src/components/forms/TextInput/TextInput.tsx index 7d60d1c2f4..49c5b2f43c 100644 --- a/src/components/forms/TextInput/TextInput.tsx +++ b/src/components/forms/TextInput/TextInput.tsx @@ -43,21 +43,20 @@ export type OptionalTextInputProps = CustomTextInputProps & export type TextInputProps = RequiredTextInputProps & OptionalTextInputProps -export const TextInput = (props: TextInputProps): React.ReactElement => { - const { - id, - name, - type, - className, - validationStatus, - error, - success, - inputSize, - small, - medium, - inputRef, - ...inputProps - } = props +export const TextInput = ({ + id, + name, + type, + className, + validationStatus, + error, + success, + inputSize, + small, + medium, + inputRef, + ...inputProps +}: TextInputProps): React.ReactElement => { if (error) { deprecationWarning( 'TextInput property error is deprecated. Use validationStatus' diff --git a/src/components/forms/Textarea/Textarea.stories.tsx b/src/components/forms/Textarea/Textarea.stories.tsx index 78a1c3d278..ff4246a494 100644 --- a/src/components/forms/Textarea/Textarea.stories.tsx +++ b/src/components/forms/Textarea/Textarea.stories.tsx @@ -5,11 +5,15 @@ export default { title: 'Components/Form controls/Textarea', component: Textarea, parameters: { - info: ` -USWDS 2.0 Textarea component + docs: { + description: { + component: ` +### USWDS 2.0 Textarea component Source: https://designsystem.digital.gov/components/form-controls/#text-input `, + }, + }, }, } diff --git a/src/components/forms/Textarea/Textarea.tsx b/src/components/forms/Textarea/Textarea.tsx index f2a4b99afe..187836ba7c 100644 --- a/src/components/forms/Textarea/Textarea.tsx +++ b/src/components/forms/Textarea/Textarea.tsx @@ -19,20 +19,16 @@ export interface TextareaProps { inputRef?: TextareaRef } -export const Textarea = ( - props: TextareaProps & JSX.IntrinsicElements['textarea'] -): React.ReactElement => { - const { - id, - name, - className, - error, - success, - children, - inputRef, - ...inputProps - } = props - +export const Textarea = ({ + id, + name, + className, + error, + success, + children, + inputRef, + ...inputProps +}: TextareaProps & JSX.IntrinsicElements['textarea']): React.ReactElement => { const classes = classnames( 'usa-textarea', { diff --git a/src/components/forms/Validation/Validation.stories.tsx b/src/components/forms/Validation/Validation.stories.tsx index 6c0a3148d4..42c9dbc593 100644 --- a/src/components/forms/Validation/Validation.stories.tsx +++ b/src/components/forms/Validation/Validation.stories.tsx @@ -13,11 +13,15 @@ export default { component: ValidationChecklist, subcomponents: { ValidationItem }, parameters: { - info: ` -USWDS 2.0 Validation component + docs: { + description: { + component: ` +### USWDS 2.0 Validation component Source: https://designsystem.digital.gov/components/form-controls/#validation `, + }, + }, }, } diff --git a/src/components/grid/Grid.stories.tsx b/src/components/grid/Grid.stories.tsx index 1fd27e0125..2a685e9d54 100644 --- a/src/components/grid/Grid.stories.tsx +++ b/src/components/grid/Grid.stories.tsx @@ -7,11 +7,15 @@ export default { title: 'Components/Grid', component: Grid, parameters: { - info: ` -USWDS 2.0 Grid components + docs: { + description: { + component: ` +### USWDS 2.0 Grid components Source: https://designsystem.digital.gov/utilities/layout-grid/ `, + }, + }, }, } diff --git a/src/components/header/ExtendedNav/ExtendedNav.stories.tsx b/src/components/header/ExtendedNav/ExtendedNav.stories.tsx index 7c945f9112..6604f18ffb 100644 --- a/src/components/header/ExtendedNav/ExtendedNav.stories.tsx +++ b/src/components/header/ExtendedNav/ExtendedNav.stories.tsx @@ -5,11 +5,15 @@ export default { title: 'Components/Header/ExtendedNav', component: ExtendedNav, parameters: { - info: ` -USWDS 2.0 ExtendedNav component used within the Header component + docs: { + description: { + component: ` +### USWDS 2.0 ExtendedNav component used within the Header component Source: https://designsystem.digital.gov/components/header/ `, + }, + }, }, } diff --git a/src/components/header/ExtendedNav/ExtendedNav.tsx b/src/components/header/ExtendedNav/ExtendedNav.tsx index b325c1dc8f..5c8d770ea4 100644 --- a/src/components/header/ExtendedNav/ExtendedNav.tsx +++ b/src/components/header/ExtendedNav/ExtendedNav.tsx @@ -13,19 +13,15 @@ type ExtendedNavProps = { mobileExpanded?: boolean } -export const ExtendedNav = ( - props: ExtendedNavProps & JSX.IntrinsicElements['nav'] -): React.ReactElement => { - const { - primaryItems, - secondaryItems, - mobileExpanded = false, - children, - className, - onToggleMobileNav, - ...navProps - } = props - +export const ExtendedNav = ({ + primaryItems, + secondaryItems, + mobileExpanded = false, + children, + className, + onToggleMobileNav, + ...navProps +}: ExtendedNavProps & JSX.IntrinsicElements['nav']): React.ReactElement => { const classes = classnames( 'usa-nav', { diff --git a/src/components/header/Header/Header.stories.tsx b/src/components/header/Header/Header.stories.tsx index 643ea095e6..353ce8c48c 100644 --- a/src/components/header/Header/Header.stories.tsx +++ b/src/components/header/Header/Header.stories.tsx @@ -14,11 +14,15 @@ export default { title: 'Components/Header', component: Header, parameters: { - info: ` -USWDS 2.0 Header component + docs: { + description: { + component: ` +### USWDS 2.0 Header component Source: https://designsystem.digital.gov/components/header/ -`, +`, + }, + }, }, } diff --git a/src/components/header/Header/Header.tsx b/src/components/header/Header/Header.tsx index 70e94cb76b..6cf6b2bc7d 100644 --- a/src/components/header/Header/Header.tsx +++ b/src/components/header/Header/Header.tsx @@ -8,18 +8,14 @@ interface HeaderProps { children: React.ReactNode } -export const Header = ( - props: HeaderProps & JSX.IntrinsicElements['header'] -): React.ReactElement => { - const { - basic, - extended, - basicWithMegaMenu, - children, - className, - ...headerProps - } = props - +export const Header = ({ + basic, + extended, + basicWithMegaMenu, + children, + className, + ...headerProps +}: HeaderProps & JSX.IntrinsicElements['header']): React.ReactElement => { const classes = classnames( 'usa-header', { diff --git a/src/components/header/MegaMenu/MegaMenu.stories.tsx b/src/components/header/MegaMenu/MegaMenu.stories.tsx index f19696776e..74363c86ce 100644 --- a/src/components/header/MegaMenu/MegaMenu.stories.tsx +++ b/src/components/header/MegaMenu/MegaMenu.stories.tsx @@ -5,11 +5,15 @@ export default { title: 'Components/Header/MegaMenu', component: MegaMenu, parameters: { - info: ` -USWDS 2.0 MegaMenu component used within the Header component + docs: { + description: { + component: ` +### USWDS 2.0 MegaMenu component used within the Header component Source: https://designsystem.digital.gov/components/header/ `, + }, + }, }, } diff --git a/src/components/header/MegaMenu/MegaMenu.tsx b/src/components/header/MegaMenu/MegaMenu.tsx index c91e2db725..6fbd807cc9 100644 --- a/src/components/header/MegaMenu/MegaMenu.tsx +++ b/src/components/header/MegaMenu/MegaMenu.tsx @@ -8,10 +8,9 @@ type MegaMenuProps = { isOpen: boolean } -export const MegaMenu = ( - props: MegaMenuProps & NavListProps -): React.ReactElement => { - const { items, isOpen, className, ...navListProps } = props +export const MegaMenu = ({ + items, isOpen, className, ...navListProps +}: MegaMenuProps & NavListProps): React.ReactElement => { const classes = classnames('usa-nav__submenu usa-megamenu', className) return ( diff --git a/src/components/header/Menu/Menu.stories.tsx b/src/components/header/Menu/Menu.stories.tsx index f230a25d63..61e80fd303 100644 --- a/src/components/header/Menu/Menu.stories.tsx +++ b/src/components/header/Menu/Menu.stories.tsx @@ -5,11 +5,15 @@ export default { title: 'Components/Header/Menu', component: Menu, parameters: { - info: ` -USWDS 2.0 Menu component used within the Header component + docs: { + description: { + component: ` +### USWDS 2.0 Menu component used within the Header component Source: https://designsystem.digital.gov/components/header/ `, + }, + }, }, } diff --git a/src/components/header/Menu/Menu.tsx b/src/components/header/Menu/Menu.tsx index 96bc0671d2..8201e68f93 100644 --- a/src/components/header/Menu/Menu.tsx +++ b/src/components/header/Menu/Menu.tsx @@ -6,8 +6,9 @@ type MenuProps = { isOpen: boolean } -export const Menu = (props: MenuProps & NavListProps): React.ReactElement => { - const { className, items, isOpen, ...navListProps } = props +export const Menu = ({ + className, items, isOpen, ...navListProps +}: MenuProps & NavListProps): React.ReactElement => { return ( { - const { onClick, className, ...buttonProps } = props - +export const NavCloseButton = ({ + onClick, className, ...buttonProps +}: JSX.IntrinsicElements['button']): React.ReactElement => { const classes = classnames('usa-nav__close', className) return ( diff --git a/src/components/header/NavDropDownButton/NavDropDownButton.stories.tsx b/src/components/header/NavDropDownButton/NavDropDownButton.stories.tsx index ecedf95fa7..cca642a8d9 100644 --- a/src/components/header/NavDropDownButton/NavDropDownButton.stories.tsx +++ b/src/components/header/NavDropDownButton/NavDropDownButton.stories.tsx @@ -7,11 +7,15 @@ export default { title: 'Components/Header/NavDropDownButton', component: NavDropDownButton, parameters: { - info: ` -USWDS 2.0 NavDropDownButton component used within the Header component + docs: { + description: { + component: ` +### USWDS 2.0 NavDropDownButton component used within the Header component Source: https://designsystem.digital.gov/components/header/ `, + }, + }, }, } diff --git a/src/components/header/NavDropDownButton/NavDropDownButton.tsx b/src/components/header/NavDropDownButton/NavDropDownButton.tsx index cd1b53f73d..eaa4433ab2 100644 --- a/src/components/header/NavDropDownButton/NavDropDownButton.tsx +++ b/src/components/header/NavDropDownButton/NavDropDownButton.tsx @@ -12,19 +12,15 @@ type NavDropDownButtonProps = { isCurrent?: boolean } -export const NavDropDownButton = ( - props: NavDropDownButtonProps & JSX.IntrinsicElements['button'] -): React.ReactElement => { - const { - label, - menuId, - isOpen, - onToggle, - isCurrent, - className, - ...buttonProps - } = props - +export const NavDropDownButton = ({ + label, + menuId, + isOpen, + onToggle, + isCurrent, + className, + ...buttonProps +}: NavDropDownButtonProps & JSX.IntrinsicElements['button']): React.ReactElement => { const classes = classnames( 'usa-accordion__button', 'usa-nav__link', diff --git a/src/components/header/NavList/NavList.stories.tsx b/src/components/header/NavList/NavList.stories.tsx index a489603cad..6ef2ba1525 100644 --- a/src/components/header/NavList/NavList.stories.tsx +++ b/src/components/header/NavList/NavList.stories.tsx @@ -5,10 +5,15 @@ export default { title: 'Components/Header/NavList', component: NavList, parameters: { - info: ` -USWDS 2.0 NavList component used within the Header component + docs: { + description: { + component: ` +### USWDS 2.0 NavList component used within the Header component +Source: https://designsystem.digital.gov/components/header/ `, + }, + }, }, } diff --git a/src/components/header/NavList/NavList.tsx b/src/components/header/NavList/NavList.tsx index fa25556b29..4210e830d8 100644 --- a/src/components/header/NavList/NavList.tsx +++ b/src/components/header/NavList/NavList.tsx @@ -29,19 +29,17 @@ interface CustomNavListProps { export type NavListProps = CustomNavListProps & JSX.IntrinsicElements['ul'] -export const NavList = (props: NavListProps): React.ReactElement => { - const { - items, - type, - primary, - secondary, - subnav, - megamenu, - footerSecondary, - className, - ...ulProps - } = props - +export const NavList = ({ + items, + type, + primary, + secondary, + subnav, + megamenu, + footerSecondary, + className, + ...ulProps +}: NavListProps): React.ReactElement => { if (primary) { deprecationWarning('NavList property primary is deprecated. Use type') } diff --git a/src/components/header/NavMenuButton/NavMenuButton.stories.tsx b/src/components/header/NavMenuButton/NavMenuButton.stories.tsx index 957051f793..e945d3c486 100644 --- a/src/components/header/NavMenuButton/NavMenuButton.stories.tsx +++ b/src/components/header/NavMenuButton/NavMenuButton.stories.tsx @@ -5,11 +5,15 @@ export default { title: 'Components/Header/NavMenuButton', component: NavMenuButton, parameters: { - info: ` -USWDS 2.0 NavMenuButton used within the Header component + docs: { + description: { + component: ` +### USWDS 2.0 NavMenuButton used within the Header component Source: https://designsystem.digital.gov/components/header/ `, + }, + }, }, } diff --git a/src/components/header/NavMenuButton/NavMenuButton.tsx b/src/components/header/NavMenuButton/NavMenuButton.tsx index 4e2d99cc53..96a429c229 100644 --- a/src/components/header/NavMenuButton/NavMenuButton.tsx +++ b/src/components/header/NavMenuButton/NavMenuButton.tsx @@ -4,11 +4,9 @@ interface NavMenuButtonProps { label: React.ReactNode } -export const NavMenuButton = ( - props: NavMenuButtonProps & JSX.IntrinsicElements['button'] -): React.ReactElement => { - const { label, onClick, ...buttonProps } = props - +export const NavMenuButton = ({ + label, onClick, ...buttonProps +}: NavMenuButtonProps & JSX.IntrinsicElements['button']): React.ReactElement => { return (