[NO JIRA][BpkSpinner]: Updating TS types and removing propTypes ahead…

… of React 18 (#3586)

packages/bpk-component-spinner/src/BpkExtraLargeSpinner-test.js → 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';

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;

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;

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;