/* eslint-disable react/display-name */ /* eslint-disable @typescript-eslint/no-unsafe-assignment */ import { forwardRef } from 'react'; import { ButtonReferenceType, ButtonProps as NewButtonProps } from './Button.types'; import { PrimitiveAnchor, PrimitiveButton } from '../primitives'; import AvatarLayout from '../avatarLayout'; import ProcessIndicator from '../processIndicator'; import { clsx } from 'clsx'; import { Typography } from '../common'; import Body from '../body'; import type { CommonProps, LegacyButtonProps, ButtonProps } from './LegacyButton'; const Button = forwardRef( ( { as, children, className, size = 'lg', href, disabled = false, priority = 'primary', sentiment = 'default', addonStart, addonEnd, // @ts-expect-error NewButtonProps has `type` prop type = 'button', loading = false, block = false, v2, ...props }, ref, ) => { const classNames = clsx( 'wds-Button', { [`wds-Button--block`]: block, [`wds-Button--disabled`]: disabled, [`wds-Button--loading`]: loading, }, `wds-Button--${{ sm: 'small', md: 'medium', lg: 'large' }[size]}`, `wds-Button--${priority}`, `wds-Button--${sentiment}`, className, ); const contentClassNames = clsx('wds-Button-content', { [`wds-Button-content--loading`]: loading, }); const content = ( {loading && ( )} {size === 'lg' ? ( {children} ) : ( <> {size === 'md' && addonStart?.type === 'avatar' && addonStart.value && ( )} {addonStart?.type === 'icon' && addonStart.value && ( {addonStart.value} )} {children} {addonEnd?.type === 'icon' && addonEnd?.value && ( {addonEnd.value} )} )} ); if ((href && as !== 'button') || as === 'a') { return ( } {...(props as any)} href={href} className={classNames} disabled={disabled || loading} aria-busy={loading || undefined} type={undefined} > {content} ); } return ( } {...(props as any)} className={classNames} disabled={disabled} loading={loading} type={type} href={undefined} target={undefined} > {content} ); }, ); export default Button; // re-export APIs for backwards compatibility with legacy Button interface // delete this when migration to new Button is done (or aleast no more deep imports, use following query) // https://github.com/search?q=org%3Atransferwise+%2Fbuild%5C%2Ftypes%5C%2Fbutton%2F+-is%3Aarchived&type=code export { CommonProps, LegacyButtonProps as Props, ButtonProps };