From 8eb7250f58ca90163c4b5ae00a8fdb05381f13fc Mon Sep 17 00:00:00 2001 From: Matthew Robertson Date: Mon, 13 May 2024 11:14:21 +0100 Subject: [PATCH] spinner fixes (#3434) Co-authored-by: Mungo Dewar --- .../{SpinnerLayout.js => SpinnerLayout.tsx} | 6 +-- .../{examples.js => examples.tsx} | 0 .../{stories.js => stories.ts} | 0 .../src/BpkExtraLargeSpinner.d.ts | 38 ----------------- .../src/BpkExtraLargeSpinner.tsx | 4 +- .../src/BpkLargeSpinner.d.ts | 41 ------------------- .../src/BpkLargeSpinner.tsx | 4 +- .../bpk-component-spinner/src/BpkSpinner.d.ts | 41 ------------------- .../bpk-component-spinner/src/BpkSpinner.tsx | 4 +- .../bpk-component-spinner/src/spinnerTypes.ts | 10 +++-- 10 files changed, 17 insertions(+), 131 deletions(-) rename examples/bpk-component-spinner/{SpinnerLayout.js => SpinnerLayout.tsx} (90%) rename examples/bpk-component-spinner/{examples.js => examples.tsx} (100%) rename examples/bpk-component-spinner/{stories.js => stories.ts} (100%) delete mode 100644 packages/bpk-component-spinner/src/BpkExtraLargeSpinner.d.ts delete mode 100644 packages/bpk-component-spinner/src/BpkLargeSpinner.d.ts delete mode 100644 packages/bpk-component-spinner/src/BpkSpinner.d.ts diff --git a/examples/bpk-component-spinner/SpinnerLayout.js b/examples/bpk-component-spinner/SpinnerLayout.tsx similarity index 90% rename from examples/bpk-component-spinner/SpinnerLayout.js rename to examples/bpk-component-spinner/SpinnerLayout.tsx index 2ed70ed6a1..cae5accec1 100644 --- a/examples/bpk-component-spinner/SpinnerLayout.js +++ b/examples/bpk-component-spinner/SpinnerLayout.tsx @@ -16,10 +16,8 @@ * limitations under the License. */ -/* @flow strict */ - import PropTypes from 'prop-types'; -import type { Node } from 'react'; +import type { ReactElement } from 'react'; import { Children } from 'react'; import { SPINNER_TYPES } from '../../packages/bpk-component-spinner'; @@ -30,7 +28,7 @@ import STYLES from './SpinnerLayout.module.scss'; const getClassName = cssModules(STYLES); type Props = { - children: Node, + children: Array> | ReactElement // Expect a single or array of React elements }; const SpinnerLayout = (props: Props) => { diff --git a/examples/bpk-component-spinner/examples.js b/examples/bpk-component-spinner/examples.tsx similarity index 100% rename from examples/bpk-component-spinner/examples.js rename to examples/bpk-component-spinner/examples.tsx diff --git a/examples/bpk-component-spinner/stories.js b/examples/bpk-component-spinner/stories.ts similarity index 100% rename from examples/bpk-component-spinner/stories.js rename to examples/bpk-component-spinner/stories.ts diff --git a/packages/bpk-component-spinner/src/BpkExtraLargeSpinner.d.ts b/packages/bpk-component-spinner/src/BpkExtraLargeSpinner.d.ts deleted file mode 100644 index 3ab8332a05..0000000000 --- a/packages/bpk-component-spinner/src/BpkExtraLargeSpinner.d.ts +++ /dev/null @@ -1,38 +0,0 @@ - -/* - * 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 PropTypes from 'prop-types'; -import SPINNER_TYPES from './spinnerTypes'; -type Props = { - type: keyof typeof SPINNER_TYPES; - className?: string; -}; -declare const BpkExtraLargeSpinner: { - (props: Props): JSX.Element; - propTypes: { - type: PropTypes.Requireable; - className: PropTypes.Requireable; - }; - defaultProps: { - type: string; - className: null; - }; -}; -export default BpkExtraLargeSpinner; diff --git a/packages/bpk-component-spinner/src/BpkExtraLargeSpinner.tsx b/packages/bpk-component-spinner/src/BpkExtraLargeSpinner.tsx index f6e6a239c2..b17cbb678b 100644 --- a/packages/bpk-component-spinner/src/BpkExtraLargeSpinner.tsx +++ b/packages/bpk-component-spinner/src/BpkExtraLargeSpinner.tsx @@ -24,12 +24,14 @@ import { cssModules } from '../../bpk-react-utils'; import SPINNER_TYPES from './spinnerTypes'; +import type { SpinnerTypes } from './spinnerTypes'; + import STYLES from './BpkSpinner.module.scss'; const getClassName = cssModules(STYLES); type Props = { - type: keyof typeof SPINNER_TYPES, + type: SpinnerTypes, className?: string, }; diff --git a/packages/bpk-component-spinner/src/BpkLargeSpinner.d.ts b/packages/bpk-component-spinner/src/BpkLargeSpinner.d.ts deleted file mode 100644 index 6cd8e2dc64..0000000000 --- a/packages/bpk-component-spinner/src/BpkLargeSpinner.d.ts +++ /dev/null @@ -1,41 +0,0 @@ - -/* - * 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 PropTypes from 'prop-types'; -import SPINNER_TYPES from './spinnerTypes'; -type Props = { - type: keyof typeof SPINNER_TYPES; - className?: string; - alignToButton: boolean; -}; -declare const BpkLargeSpinner: { - (props: Props): JSX.Element; - propTypes: { - type: PropTypes.Requireable; - className: PropTypes.Requireable; - alignToButton: PropTypes.Requireable; - }; - defaultProps: { - type: string; - className: null; - alignToButton: boolean; - }; -}; -export default BpkLargeSpinner; diff --git a/packages/bpk-component-spinner/src/BpkLargeSpinner.tsx b/packages/bpk-component-spinner/src/BpkLargeSpinner.tsx index f4dcc2366e..9c4010eead 100644 --- a/packages/bpk-component-spinner/src/BpkLargeSpinner.tsx +++ b/packages/bpk-component-spinner/src/BpkLargeSpinner.tsx @@ -24,12 +24,14 @@ import { cssModules } from '../../bpk-react-utils'; import SPINNER_TYPES from './spinnerTypes'; +import type { SpinnerTypes } from './spinnerTypes'; + import STYLES from './BpkSpinner.module.scss'; const getClassName = cssModules(STYLES); type Props = { - type: keyof typeof SPINNER_TYPES, + type: SpinnerTypes, className?: string, alignToButton: boolean, }; diff --git a/packages/bpk-component-spinner/src/BpkSpinner.d.ts b/packages/bpk-component-spinner/src/BpkSpinner.d.ts deleted file mode 100644 index 70ac8e0d75..0000000000 --- a/packages/bpk-component-spinner/src/BpkSpinner.d.ts +++ /dev/null @@ -1,41 +0,0 @@ - -/* - * 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 PropTypes from 'prop-types'; -import SPINNER_TYPES from './spinnerTypes'; -type Props = { - type: keyof typeof SPINNER_TYPES; - className?: string; - alignToButton: boolean; -}; -declare const BpkSpinner: { - (props: Props): JSX.Element; - propTypes: { - type: PropTypes.Requireable; - className: PropTypes.Requireable; - alignToButton: PropTypes.Requireable; - }; - defaultProps: { - type: string; - className: null; - alignToButton: boolean; - }; -}; -export default BpkSpinner; diff --git a/packages/bpk-component-spinner/src/BpkSpinner.tsx b/packages/bpk-component-spinner/src/BpkSpinner.tsx index bbcea4e660..8b3a29e0a0 100644 --- a/packages/bpk-component-spinner/src/BpkSpinner.tsx +++ b/packages/bpk-component-spinner/src/BpkSpinner.tsx @@ -25,12 +25,14 @@ import { cssModules } from '../../bpk-react-utils'; import SPINNER_TYPES from './spinnerTypes'; +import type { SpinnerTypes } from './spinnerTypes'; + import STYLES from './BpkSpinner.module.scss'; const getClassName = cssModules(STYLES); type Props = { - type: keyof typeof SPINNER_TYPES, + type: SpinnerTypes, className?: string, alignToButton: boolean, }; diff --git a/packages/bpk-component-spinner/src/spinnerTypes.ts b/packages/bpk-component-spinner/src/spinnerTypes.ts index 653b263b7b..849d81850e 100644 --- a/packages/bpk-component-spinner/src/spinnerTypes.ts +++ b/packages/bpk-component-spinner/src/spinnerTypes.ts @@ -16,10 +16,12 @@ * limitations under the License. */ -/* @flow strict */ - -export default { +const SPINNER_TYPES = { primary: 'primary', light: 'light', dark: 'dark', -}; +} as const; + +export default SPINNER_TYPES; + +export type SpinnerTypes = (typeof SPINNER_TYPES)[keyof typeof SPINNER_TYPES]; \ No newline at end of file