diff --git a/assets/js/components/Banner/CTAButton.js b/assets/js/components/Banner/CTAButton.tsx similarity index 67% rename from assets/js/components/Banner/CTAButton.js rename to assets/js/components/Banner/CTAButton.tsx index 1e6146c1c45..71d42b15a51 100644 --- a/assets/js/components/Banner/CTAButton.js +++ b/assets/js/components/Banner/CTAButton.tsx @@ -17,7 +17,7 @@ /** * External dependencies */ -import PropTypes from 'prop-types'; +import { MouseEvent } from 'react'; /** * Internal dependencies @@ -25,16 +25,32 @@ import PropTypes from 'prop-types'; import { SpinnerButton } from 'googlesitekit-components'; import ExternalIcon from '@/svg/icons/external.svg'; -export default function CTAButton( { - label, - ariaLabel, - disabled, - inProgress, - onClick, - href, - external = false, - hideExternalIndicator = false, -} ) { +// eslint-disable-next-line sitekit/acronym-case +export interface CTAButtonProps { + ariaLabel?: string; + disabled?: boolean; + external?: boolean; + hideExternalIndicator?: boolean; + href?: string; + inProgress?: boolean; + label?: string; + onClick?: ( + event: MouseEvent< HTMLAnchorElement | HTMLButtonElement > + ) => void; +} + +export default function CTAButton( + { + ariaLabel, + disabled = false, + external = false, + hideExternalIndicator = false, + href, + inProgress = false, + label, + onClick = () => {}, + }: CTAButtonProps /* eslint-disable-line sitekit/acronym-case */ +) { if ( ! label || ( ! onClick && ! href ) ) { return null; } @@ -45,6 +61,7 @@ export default function CTAButton( { } return ( + // @ts-expect-error `SpinnerButton` component is not yet typed. ); } - -CTAButton.propTypes = { - label: PropTypes.string, - ariaLabel: PropTypes.string, - disabled: PropTypes.bool, - inProgress: PropTypes.bool, - onClick: PropTypes.func, - href: PropTypes.string, - dismissOnClick: PropTypes.bool, - dismissOptions: PropTypes.shape( { - expiresInSeconds: PropTypes.number, - skipHidingFromQueue: PropTypes.bool, - } ), -}; diff --git a/assets/js/components/Banner/DismissButton.js b/assets/js/components/Banner/DismissButton.tsx similarity index 77% rename from assets/js/components/Banner/DismissButton.js rename to assets/js/components/Banner/DismissButton.tsx index 58414a92171..4deb765e294 100644 --- a/assets/js/components/Banner/DismissButton.js +++ b/assets/js/components/Banner/DismissButton.tsx @@ -17,7 +17,7 @@ /** * External dependencies */ -import PropTypes from 'prop-types'; +import { MouseEvent, ReactNode } from 'react'; /** * WordPress dependencies @@ -29,18 +29,29 @@ import { __ } from '@wordpress/i18n'; */ import { Button } from 'googlesitekit-components'; +export interface DismissButtonProps { + className?: string; + disabled?: boolean; + label?: ReactNode; + onClick?: ( + event: MouseEvent< HTMLAnchorElement | HTMLButtonElement > + ) => void; + tertiary?: boolean; +} + export default function DismissButton( { className, label = __( 'Maybe later', 'google-site-kit' ), onClick, disabled, tertiary = true, -} ) { +}: DismissButtonProps ) { if ( ! onClick ) { return null; } return ( + // @ts-expect-error `Button` component is not yet typed.