[CLOV-102] BpkPrice Migrate JS to TypeScript

packages/backpack-web/src/bpk-component-card/src/BpkCardV2.stories.tsx

@@ -37,7 +37,6 @@ import {
   BpkVStack,
 } from '../../bpk-component-layout';
 import BpkLink from '../../bpk-component-link';
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkPrice, { SIZES, ALIGNS } from '../../bpk-component-price';
 import BpkRating from '../../bpk-component-rating';
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
@@ -187,7 +186,7 @@ const PackagesCardExample = () => (
         >
           <BpkFlex direction="column" gap={BpkSpacing.MD}>
             <BpkPrice
-              size={SIZES.Large}
+              size={SIZES.large}
               leadingText="Half board"
               price="£2,185"
               trailingText="total"
@@ -324,7 +323,7 @@ const FlightsCardExample = () => (
         <BpkCardV2.Section gap={BpkSpacing.Base} justifyContent="end">
           <BpkFlex direction="column" gap={BpkSpacing.SM}>
             <BpkPrice
-              size={SIZES.Large}
+              size={SIZES.large}
               price="£752"
               trailingText="£1,523 total"
               align={ALIGNS.right}
@@ -378,7 +377,7 @@ const HotelCardExample = () => (
               Our cheapest price
             </BpkText>
             <BpkPrice
-              size={SIZES.Large}
+              size={SIZES.large}
               previousPrice="£2,033"
               leadingText="19% off"
               price="£1,830"

packages/backpack-web/src/bpk-component-checkbox-card/src/BpkCheckboxCard.stories.tsx

@@ -29,7 +29,6 @@ import TrendDownIconLg from '../../bpk-component-icon/lg/trend--down';
 import BpkImage from '../../bpk-component-image';
 import { BpkBox, BpkVStack, BpkHStack, BpkFlex, BpkProvider } from '../../bpk-component-layout';
 import BpkMobileScrollContainer from '../../bpk-component-mobile-scroll-container';
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkPrice from '../../bpk-component-price';
 import BpkText, { TEXT_COLORS, TEXT_STYLES } from '../../bpk-component-text';
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.

packages/backpack-web/src/bpk-component-price/index.js → packages/backpack-web/src/bpk-component-price/index.ts

@@ -15,10 +15,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* @flow strict */
 
-import BpkPrice from './src/BpkPrice';
+import BpkPrice, { type Props as BpkPriceProps } from './src/BpkPrice';
 import { SIZES, ALIGNS } from './src/common-types';
 
 export default BpkPrice;
+export type { BpkPriceProps };
 export { SIZES, ALIGNS };

packages/backpack-web/src/bpk-component-price/src/BpkPrice-test.js → packages/backpack-web/src/bpk-component-price/src/BpkPrice-test.tsx

@@ -15,21 +15,23 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* @flow strict */
+
+import type { ReactNode } from 'react';
 
 import { render, screen } from '@testing-library/react';
 
+
 import NewWindowIcon from '../../bpk-component-icon/sm/new-window';
 
-import BpkPrice from './BpkPrice';
+import BpkPrice, { type Props as BpkPriceProps } from './BpkPrice';
 import { ALIGNS, SIZES } from './common-types';
 
 const price = '£1,830';
 const previousPrice = '£2,000';
 const leadingText = 'from';
 const trailingText = 'per day';
-const icon = NewWindowIcon;
-let props;
+const icon = NewWindowIcon as unknown as ReactNode;
+let props: BpkPriceProps;
 
 describe.each([
   [SIZES.xsmall, ALIGNS.left],

packages/backpack-web/src/bpk-component-price/src/BpkPrice.stories.tsx

@@ -19,9 +19,7 @@
 
 import NewWindowIcon from '../../bpk-component-icon/sm/new-window';
 
-// @ts-expect-error Untyped import
 import BpkPrice from './BpkPrice';
-// @ts-expect-error Untyped import
 import { SIZES, ALIGNS } from './common-types';
 
 import type { Meta } from '@storybook/react';

packages/backpack-web/src/bpk-component-price/src/BpkPrice.js → packages/backpack-web/src/bpk-component-price/src/BpkPrice.tsx

@@ -15,10 +15,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* @flow strict */
 
-import PropTypes from 'prop-types';
-import type { Node } from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
 
 import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
 import { cssModules } from '../../bpk-react-utils';
@@ -27,26 +25,28 @@ import { SIZES, ALIGNS } from './common-types';
 
 import STYLES from './BpkPrice.module.scss';
 
-type Props = {
-  price: string,
-  size: $Values<typeof SIZES>,
-  align: $Values<typeof ALIGNS>,
-  className: ?string,
-  leadingText: ?string,
+type NativeDivProps = HTMLAttributes<HTMLDivElement>;
+
+export type Props = Omit<NativeDivProps, 'className'> & {
+  price: string;
+  size?: (typeof SIZES)[keyof typeof SIZES];
+  align?: (typeof ALIGNS)[keyof typeof ALIGNS];
+  className?: string | null;
+  leadingText?: string | null;
   /**
    * **Experimental** This prop is experimental and subject to change.
    * Use with caution.
    */
-  leadingClassName: ?string,
-  trailingText: ?string,
-  previousPrice: ?string,
-  icon?: Node,
-  dataAttributes?: Record<string, string>,
+  leadingClassName?: string | null;
+  trailingText?: string | null;
+  previousPrice?: string | null;
+  icon?: ReactNode;
+  dataAttributes?: Record<string, string>;
 };
 
 const getClassName = cssModules(STYLES);
 
-const getPriceTextStyle = (size: $Values<typeof SIZES>) => {
+const getPriceTextStyle = (size: Props['size']) => {
   if (size === SIZES.small) {
     return TEXT_STYLES.heading4;
   }
@@ -62,7 +62,7 @@ const getPriceTextStyle = (size: $Values<typeof SIZES>) => {
   return TEXT_STYLES.heading5;
 };
 
-const getDefaultTextStyle = (size: $Values<typeof SIZES>) => {
+const getDefaultTextStyle = (size: Props['size']) => {
   if (size === SIZES.large) {
     return TEXT_STYLES.sm;
   }
@@ -112,7 +112,6 @@ const BpkPrice = ({
         isAlignRight && 'bpk-price--right',
         className,
       )}
-      // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
       {...rest}
     >
       <div
@@ -176,16 +175,4 @@ const BpkPrice = ({
   );
 };
 
-BpkPrice.propTypes = {
-  price: PropTypes.string.isRequired,
-  size: PropTypes.oneOf(Object.keys(SIZES)),
-  align: PropTypes.oneOf(Object.keys(ALIGNS)),
-  className: PropTypes.string,
-  leadingText: PropTypes.string,
-  trailingText: PropTypes.string,
-  previousPrice: PropTypes.string,
-  leadingClassName: PropTypes.string,
-  dataAttributes: PropTypes.objectOf(PropTypes.string),
-};
-
 export default BpkPrice;

packages/backpack-web/src/bpk-component-price/src/accessibility-test.js → packages/backpack-web/src/bpk-component-price/src/accessibility-test.tsx

@@ -15,7 +15,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* @flow strict */
 
 import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';

packages/backpack-web/src/bpk-component-price/src/common-types.js → packages/backpack-web/src/bpk-component-price/src/common-types.ts

@@ -16,16 +16,14 @@
  * limitations under the License.
  */
 
-/* @flow strict */
-
 export const SIZES = {
   xsmall: 'xsmall',
   small: 'small',
   medium: 'medium',
   large: 'large',
-};
+} as const;
 
 export const ALIGNS = {
   left: 'left',
   right: 'right',
-};
+} as const;