From 15ca5de8f4bebba043030c0e05e477c95e8e93ad Mon Sep 17 00:00:00 2001
From: Ollie Curtis <8831547+olliecurtis@users.noreply.github.com>
Date: Wed, 14 Aug 2024 15:36:05 +0100
Subject: [PATCH] [NO JIRA][BpkSpinner]: Updating TS types and removing
 propTypes ahead of React 18

---
 ...-test.js => BpkExtraLargeSpinner-test.tsx} |  2 --
 .../src/BpkExtraLargeSpinner.tsx              | 28 +++++----------
 ...inner-test.js => BpkLargeSpinner-test.tsx} |  0
 .../src/BpkLargeSpinner.tsx                   | 29 ++++++---------
 ...BpkSpinner-test.js => BpkSpinner-test.tsx} |  0
 .../bpk-component-spinner/src/BpkSpinner.tsx  | 35 ++++++-------------
 ...nap => BpkExtraLargeSpinner-test.tsx.snap} |  0
 ....js.snap => BpkLargeSpinner-test.tsx.snap} |  0
 ...-test.js.snap => BpkSpinner-test.tsx.snap} |  0
 ...ibility-test.js => accessibility-test.tsx} |  0
 ...butes-test.js => themeAttributes-test.tsx} |  0
 11 files changed, 30 insertions(+), 64 deletions(-)
 rename packages/bpk-component-spinner/src/{BpkExtraLargeSpinner-test.js => BpkExtraLargeSpinner-test.tsx} (98%)
 rename packages/bpk-component-spinner/src/{BpkLargeSpinner-test.js => BpkLargeSpinner-test.tsx} (100%)
 rename packages/bpk-component-spinner/src/{BpkSpinner-test.js => BpkSpinner-test.tsx} (100%)
 rename packages/bpk-component-spinner/src/__snapshots__/{BpkExtraLargeSpinner-test.js.snap => BpkExtraLargeSpinner-test.tsx.snap} (100%)
 rename packages/bpk-component-spinner/src/__snapshots__/{BpkLargeSpinner-test.js.snap => BpkLargeSpinner-test.tsx.snap} (100%)
 rename packages/bpk-component-spinner/src/__snapshots__/{BpkSpinner-test.js.snap => BpkSpinner-test.tsx.snap} (100%)
 rename packages/bpk-component-spinner/src/{accessibility-test.js => accessibility-test.tsx} (100%)
 rename packages/bpk-component-spinner/src/{themeAttributes-test.js => themeAttributes-test.tsx} (100%)

diff --git a/packages/bpk-component-spinner/src/BpkExtraLargeSpinner-test.js b/packages/bpk-component-spinner/src/BpkExtraLargeSpinner-test.tsx
similarity index 98%
rename from packages/bpk-component-spinner/src/BpkExtraLargeSpinner-test.js
rename to packages/bpk-component-spinner/src/BpkExtraLargeSpinner-test.tsx
index f55a3bb506..d881f977fe 100644
--- a/packages/bpk-component-spinner/src/BpkExtraLargeSpinner-test.js
+++ b/packages/bpk-component-spinner/src/BpkExtraLargeSpinner-test.tsx
@@ -16,8 +16,6 @@
  * limitations under the License.
  */
 
-/* @flow strict */
-
 import { render } from '@testing-library/react';
 
 import BpkExtraLargeSpinner from './BpkExtraLargeSpinner';
diff --git a/packages/bpk-component-spinner/src/BpkExtraLargeSpinner.tsx b/packages/bpk-component-spinner/src/BpkExtraLargeSpinner.tsx
index b17cbb678b..2cc3609e59 100644
--- a/packages/bpk-component-spinner/src/BpkExtraLargeSpinner.tsx
+++ b/packages/bpk-component-spinner/src/BpkExtraLargeSpinner.tsx
@@ -16,8 +16,6 @@
  * limitations under the License.
  */
 
-import PropTypes from 'prop-types';
-
 import XlSpinner from '@skyscanner/bpk-svgs/dist/js/spinners/xl';
 
 import { cssModules } from '../../bpk-react-utils';
@@ -31,12 +29,16 @@ import STYLES from './BpkSpinner.module.scss';
 const getClassName = cssModules(STYLES);
 
 type Props = {
-  type: SpinnerTypes,
-  className?: string,
+  type?: SpinnerTypes;
+  className?: string | null;
+  [rest: string]: any;
 };
 
-const BpkExtraLargeSpinner = (props: Props) => {
-  const { className, type, ...rest } = props;
+const BpkExtraLargeSpinner = ({
+  className = null,
+  type = SPINNER_TYPES.dark,
+  ...rest
+}: Props) => {
   const classNames = getClassName(
     'bpk-spinner',
     'bpk-spinner--extra-large',
@@ -46,21 +48,9 @@ const BpkExtraLargeSpinner = (props: Props) => {
 
   return (
     <span className={classNames}>
-      <XlSpinner
-        {...rest}
-      />
+      <XlSpinner {...rest} />
     </span>
   );
 };
 
-BpkExtraLargeSpinner.propTypes = {
-  type: PropTypes.oneOf(Object.keys(SPINNER_TYPES)),
-  className: PropTypes.string,
-};
-
-BpkExtraLargeSpinner.defaultProps = {
-  type: SPINNER_TYPES.dark,
-  className: null,
-};
-
 export default BpkExtraLargeSpinner;
diff --git a/packages/bpk-component-spinner/src/BpkLargeSpinner-test.js b/packages/bpk-component-spinner/src/BpkLargeSpinner-test.tsx
similarity index 100%
rename from packages/bpk-component-spinner/src/BpkLargeSpinner-test.js
rename to packages/bpk-component-spinner/src/BpkLargeSpinner-test.tsx
diff --git a/packages/bpk-component-spinner/src/BpkLargeSpinner.tsx b/packages/bpk-component-spinner/src/BpkLargeSpinner.tsx
index 9c4010eead..f1e9f52668 100644
--- a/packages/bpk-component-spinner/src/BpkLargeSpinner.tsx
+++ b/packages/bpk-component-spinner/src/BpkLargeSpinner.tsx
@@ -16,8 +16,6 @@
  * limitations under the License.
  */
 
-import PropTypes from 'prop-types';
-
 import LgSpinner from '@skyscanner/bpk-svgs/dist/js/spinners/lg';
 
 import { cssModules } from '../../bpk-react-utils';
@@ -31,13 +29,18 @@ import STYLES from './BpkSpinner.module.scss';
 const getClassName = cssModules(STYLES);
 
 type Props = {
-  type: SpinnerTypes,
-  className?: string,
-  alignToButton: boolean,
+  type?: SpinnerTypes,
+  className?: string | null,
+  alignToButton?: boolean,
+  [rest: string]: any,
 };
 
-const BpkLargeSpinner = (props: Props) => {
-  const { alignToButton, className, type, ...rest } = props;
+const BpkLargeSpinner = ({
+  alignToButton = false,
+  className = null,
+  type = SPINNER_TYPES.dark,
+  ...rest
+}: Props) => {
 
   const classNames = getClassName(
     'bpk-spinner',
@@ -57,16 +60,4 @@ const BpkLargeSpinner = (props: Props) => {
   );
 };
 
-BpkLargeSpinner.propTypes = {
-  type: PropTypes.oneOf(Object.keys(SPINNER_TYPES)),
-  className: PropTypes.string,
-  alignToButton: PropTypes.bool,
-};
-
-BpkLargeSpinner.defaultProps = {
-  type: SPINNER_TYPES.dark,
-  className: null,
-  alignToButton: false,
-};
-
 export default BpkLargeSpinner;
diff --git a/packages/bpk-component-spinner/src/BpkSpinner-test.js b/packages/bpk-component-spinner/src/BpkSpinner-test.tsx
similarity index 100%
rename from packages/bpk-component-spinner/src/BpkSpinner-test.js
rename to packages/bpk-component-spinner/src/BpkSpinner-test.tsx
diff --git a/packages/bpk-component-spinner/src/BpkSpinner.tsx b/packages/bpk-component-spinner/src/BpkSpinner.tsx
index 8b3a29e0a0..d52550314a 100644
--- a/packages/bpk-component-spinner/src/BpkSpinner.tsx
+++ b/packages/bpk-component-spinner/src/BpkSpinner.tsx
@@ -16,9 +16,6 @@
  * limitations under the License.
  */
 
-
-import PropTypes from 'prop-types';
-
 import SmSpinner from '@skyscanner/bpk-svgs/dist/js/spinners/sm';
 
 import { cssModules } from '../../bpk-react-utils';
@@ -32,14 +29,18 @@ import STYLES from './BpkSpinner.module.scss';
 const getClassName = cssModules(STYLES);
 
 type Props = {
-  type: SpinnerTypes,
-  className?: string,
-  alignToButton: boolean,
+  type?: SpinnerTypes;
+  className?: string | null;
+  alignToButton?: boolean;
+  [rest: string]: any;
 };
 
-const BpkSpinner = (props: Props) => {
-  const { alignToButton, className, type, ...rest } = props;
-
+const BpkSpinner = ({
+  alignToButton = false,
+  className = null,
+  type = SPINNER_TYPES.dark,
+  ...rest
+}: Props) => {
   const classNames = getClassName(
     'bpk-spinner',
     `bpk-spinner--${type}`,
@@ -49,23 +50,9 @@ const BpkSpinner = (props: Props) => {
 
   return (
     <span className={classNames}>
-      <SmSpinner
-        {...rest}
-      />
+      <SmSpinner {...rest} />
     </span>
   );
 };
 
-BpkSpinner.propTypes = {
-  type: PropTypes.oneOf(Object.keys(SPINNER_TYPES)),
-  className: PropTypes.string,
-  alignToButton: PropTypes.bool,
-};
-
-BpkSpinner.defaultProps = {
-  type: SPINNER_TYPES.dark,
-  className: null,
-  alignToButton: false,
-};
-
 export default BpkSpinner;
diff --git a/packages/bpk-component-spinner/src/__snapshots__/BpkExtraLargeSpinner-test.js.snap b/packages/bpk-component-spinner/src/__snapshots__/BpkExtraLargeSpinner-test.tsx.snap
similarity index 100%
rename from packages/bpk-component-spinner/src/__snapshots__/BpkExtraLargeSpinner-test.js.snap
rename to packages/bpk-component-spinner/src/__snapshots__/BpkExtraLargeSpinner-test.tsx.snap
diff --git a/packages/bpk-component-spinner/src/__snapshots__/BpkLargeSpinner-test.js.snap b/packages/bpk-component-spinner/src/__snapshots__/BpkLargeSpinner-test.tsx.snap
similarity index 100%
rename from packages/bpk-component-spinner/src/__snapshots__/BpkLargeSpinner-test.js.snap
rename to packages/bpk-component-spinner/src/__snapshots__/BpkLargeSpinner-test.tsx.snap
diff --git a/packages/bpk-component-spinner/src/__snapshots__/BpkSpinner-test.js.snap b/packages/bpk-component-spinner/src/__snapshots__/BpkSpinner-test.tsx.snap
similarity index 100%
rename from packages/bpk-component-spinner/src/__snapshots__/BpkSpinner-test.js.snap
rename to packages/bpk-component-spinner/src/__snapshots__/BpkSpinner-test.tsx.snap
diff --git a/packages/bpk-component-spinner/src/accessibility-test.js b/packages/bpk-component-spinner/src/accessibility-test.tsx
similarity index 100%
rename from packages/bpk-component-spinner/src/accessibility-test.js
rename to packages/bpk-component-spinner/src/accessibility-test.tsx
diff --git a/packages/bpk-component-spinner/src/themeAttributes-test.js b/packages/bpk-component-spinner/src/themeAttributes-test.tsx
similarity index 100%
rename from packages/bpk-component-spinner/src/themeAttributes-test.js
rename to packages/bpk-component-spinner/src/themeAttributes-test.tsx