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/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.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/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.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/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.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.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.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/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/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.tsx b/src/components/forms/ComboBox/ComboBox.tsx index 48d4c29efa..fbb8567b6c 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.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.tsx b/src/components/forms/DatePicker/DatePicker.tsx index 7df9ec4c4e..1c07e7a05b 100644 --- a/src/components/forms/DatePicker/DatePicker.tsx +++ b/src/components/forms/DatePicker/DatePicker.tsx @@ -45,10 +45,7 @@ export enum FocusMode { Input, } -export const DatePicker = ( - props: DatePickerProps & JSX.IntrinsicElements['input'] -): React.ReactElement => { - const { +export const DatePicker = ({ id, name, defaultValue, @@ -60,8 +57,7 @@ export const DatePicker = ( onChange, onBlur, ...inputProps - } = props - +}: DatePickerProps & JSX.IntrinsicElements['input']): React.ReactElement => { const datePickerEl = useRef(null) const externalInputEl = useRef(null) 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.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.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.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.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.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.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.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.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.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/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.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.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.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.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.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.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 (