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 (
-
+
);
};
-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 (
-
+
);
};
-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