[NO-JIRA][BpkFloatingNotification] Migrate Floating Notification comp…

…onent to TS (#3221)

[NO-JIRA][BpkFloatingNotification] Migrate Floating Notification component to TS (#3221)

packages/bpk-component-floating-notification/src/BpkFloatingNotification-test.js → 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';

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;

packages/bpk-component-floating-notification/src/BpkFloatingNotification.js → packages/bpk-component-floating-notification/src/BpkFloatingNotification.tsx

@@ -17,47 +17,49 @@
  */
 /* @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';
 
 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<HTMLButtonElement>) => 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<typeof setTimeout>;
     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;

packages/bpk-component-floating-notification/src/accessibility-test.js → 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(<BpkFloatingNotification />);
+    const { container } = render(<BpkFloatingNotification {...props} />);
     const results = await axe(container);
     expect(results).toHaveNoViolations();
   });