Alllow storybook to infer prop defaults

- Destruccuting props as args in functional component signatures allows storybook to infer default values of props

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)
   )

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')

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',
     {

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

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)

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')
   }

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,

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) {

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',
     {

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',
     {

src/components/breadcrumb/BreadcrumbLink/BreadcrumbLink.tsx

@@ -9,15 +9,20 @@ import {
 
 export function BreadcrumbLink(props: DefaultLinkProps): React.ReactElement
 export function BreadcrumbLink<T>(props: CustomLinkProps<T>): React.ReactElement
-export function BreadcrumbLink<FCProps = DefaultLinkProps>(
-  props: DefaultLinkProps | CustomLinkProps<FCProps>
-): React.ReactElement {
-  const { className } = props
+export function BreadcrumbLink<FCProps = DefaultLinkProps>({ 
+  className,
+  ...passThroughProps
+}: DefaultLinkProps | CustomLinkProps<FCProps>): React.ReactElement {
   const classes = classnames(className, 'usa-breadcrumb__link')
 
-  if (isCustomProps(props)) {
-    return <Link<FCProps> {...props} className={classes} variant="unstyled" />
+  const linkProps = {
+    ...passThroughProps,
+    className: classes
+  } as DefaultLinkProps | CustomLinkProps<FCProps>
+
+  if (isCustomProps(linkProps)) {
+    return <Link<FCProps> {...linkProps} variant="unstyled" />
   }
 
-  return <Link {...props} className={classes} variant="unstyled" />
+  return <Link {...linkProps} variant="unstyled" />
 }

src/components/card/Card/Card.tsx

@@ -9,19 +9,15 @@ interface CardProps {
   containerProps?: React.HTMLAttributes<HTMLDivElement>
 }
 
-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 || {}
 

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',
     {

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',
     {

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 (

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',

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',
     {

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 (