diff --git a/packages/bpk-component-floating-notification/index.js b/packages/bpk-component-floating-notification/index.ts similarity index 100% rename from packages/bpk-component-floating-notification/index.js rename to packages/bpk-component-floating-notification/index.ts diff --git a/packages/bpk-component-floating-notification/src/BpkFloatingNotification-test.js b/packages/bpk-component-floating-notification/src/BpkFloatingNotification-test.tsx similarity index 97% rename from packages/bpk-component-floating-notification/src/BpkFloatingNotification-test.js rename to packages/bpk-component-floating-notification/src/BpkFloatingNotification-test.tsx index dbeb58fa24..5758355cb7 100644 --- a/packages/bpk-component-floating-notification/src/BpkFloatingNotification-test.js +++ b/packages/bpk-component-floating-notification/src/BpkFloatingNotification-test.tsx @@ -20,6 +20,7 @@ import { fireEvent, render } from '@testing-library/react'; import { cssModules } from '../../bpk-react-utils'; +// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import BpkIconHeart from '../../bpk-component-icon/sm/heart'; import BpkFloatingNotification from './BpkFloatingNotification'; diff --git a/packages/bpk-component-floating-notification/src/BpkFloatingNotification.d.ts b/packages/bpk-component-floating-notification/src/BpkFloatingNotification.d.ts new file mode 100644 index 0000000000..df34ae5f5f --- /dev/null +++ b/packages/bpk-component-floating-notification/src/BpkFloatingNotification.d.ts @@ -0,0 +1,45 @@ +/* + * Backpack - Skyscanner's Design System + * + * Copyright 2016 Skyscanner Ltd + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import type { ReactNode, ReactElement, MouseEvent } from 'react'; + +export type Props = { + animateOnEnter?: boolean; + animateOnExit?: boolean; + className?: string; + ctaText?: string; + hideAfter?: number; + icon?: () => ReactElement; + onClick?: (e: MouseEvent) => void; + onExit?: () => void; + text: string; + [rest: string]: any; +}; +declare const BpkFloatingNotification: ({ + animateOnEnter, + animateOnExit, + className, + ctaText, + hideAfter, + icon, + onClick, + onExit, + text, + ...rest +}: Props) => JSX.Element; +export default BpkFloatingNotification; diff --git a/packages/bpk-component-floating-notification/src/BpkFloatingNotification.js b/packages/bpk-component-floating-notification/src/BpkFloatingNotification.tsx similarity index 75% rename from packages/bpk-component-floating-notification/src/BpkFloatingNotification.js rename to packages/bpk-component-floating-notification/src/BpkFloatingNotification.tsx index 5caafc1663..2b268ed2ba 100644 --- a/packages/bpk-component-floating-notification/src/BpkFloatingNotification.js +++ b/packages/bpk-component-floating-notification/src/BpkFloatingNotification.tsx @@ -17,12 +17,13 @@ */ /* @flow strict */ -import PropTypes from 'prop-types'; -import { useEffect, useState, ReactElement } from 'react'; +import type { MouseEvent, FunctionComponent } from 'react'; +import { useEffect, useState } from 'react'; +// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import { CSSTransition } from 'react-transition-group'; import BpkAriaLive from '../../bpk-component-aria-live'; -import {BUTTON_TYPES, BpkButtonV2} from '../../bpk-component-button'; +import { BUTTON_TYPES, BpkButtonV2 } from '../../bpk-component-button'; import BpkText, { TEXT_STYLES } from '../../bpk-component-text'; import { cssModules } from '../../bpk-react-utils'; @@ -30,34 +31,35 @@ import STYLES from './BpkFloatingNotification.module.scss'; const getClassName = cssModules(STYLES); -type Props = { - animateOnEnter: ?boolean, - animateOnExit: ?boolean, - className: ?string, - ctaText: ?string, +export type Props = { + animateOnEnter?: boolean; + animateOnExit?: boolean; + className?: string; + ctaText?: string; /** * This prop controls the amount of time that the notification stays visible before the exit animation begins. * The default value is 4 seconds (4000 milliseconds). */ - hideAfter: ?number, - icon: ?() => ReactElement, - onClick: ?() => void, + hideAfter?: number; + icon?: FunctionComponent; + onClick?: (e: MouseEvent) => void; /** * Execute a function after the component has finished the exit animation. */ - onExit: ?() => void, - text: string, + onExit?: () => void; + text: string; + [rest: string]: any; // Inexact rest. See decisions/inexact-rest.md }; const BpkFloatingNotification = (props: Props) => { const [showMessage, setShowMessage] = useState(true); const { - animateOnEnter, - animateOnExit, + animateOnEnter = true, + animateOnExit = true, className, ctaText, - hideAfter, + hideAfter = 4000, icon: Icon, onClick, onExit, @@ -68,7 +70,7 @@ const BpkFloatingNotification = (props: Props) => { const classNames = getClassName('bpk-floating-notification', className); useEffect(() => { - let timer; + let timer: ReturnType; if (hideAfter) { timer = setTimeout(() => setShowMessage(false), hideAfter); } @@ -118,27 +120,4 @@ const BpkFloatingNotification = (props: Props) => { ); }; -BpkFloatingNotification.propTypes = { - animateOnEnter: PropTypes.bool, - animateOnExit: PropTypes.bool, - className: PropTypes.string, - ctaText: PropTypes.string, - hideAfter: PropTypes.number, - icon: PropTypes.ReactElement, - onClick: PropTypes.func, - onExit: PropTypes.func, - text: PropTypes.string.isRequired, -}; - -BpkFloatingNotification.defaultProps = { - animateOnEnter: true, - animateOnExit: true, - className: null, - ctaText: null, - hideAfter: 4000, - icon: null, - onClick: null, - onExit: null, -}; - export default BpkFloatingNotification; diff --git a/packages/bpk-component-floating-notification/src/__snapshots__/BpkFloatingNotification-test.js.snap b/packages/bpk-component-floating-notification/src/__snapshots__/BpkFloatingNotification-test.tsx.snap similarity index 100% rename from packages/bpk-component-floating-notification/src/__snapshots__/BpkFloatingNotification-test.js.snap rename to packages/bpk-component-floating-notification/src/__snapshots__/BpkFloatingNotification-test.tsx.snap diff --git a/packages/bpk-component-floating-notification/src/accessibility-test.js b/packages/bpk-component-floating-notification/src/accessibility-test.tsx similarity index 93% rename from packages/bpk-component-floating-notification/src/accessibility-test.js rename to packages/bpk-component-floating-notification/src/accessibility-test.tsx index dc1da11023..f126b3182a 100644 --- a/packages/bpk-component-floating-notification/src/accessibility-test.js +++ b/packages/bpk-component-floating-notification/src/accessibility-test.tsx @@ -20,6 +20,7 @@ import { render } from '@testing-library/react'; import { axe } from 'jest-axe'; +// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import BpkIconHeart from '../../bpk-component-icon/sm/heart'; import BpkFloatingNotification from './BpkFloatingNotification'; @@ -30,7 +31,7 @@ const props = { describe('BpkFloatingNotification accessibility tests', () => { it('should not have programmatically-detectable accessibility issues', async () => { - const { container } = render(); + const { container } = render(); const results = await axe(container); expect(results).toHaveNoViolations(); });