diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/address-form/address-form.tsx b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/address-form/address-form.tsx
index 84b45a8df64..b054ca2ca96 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/address-form/address-form.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/address-form/address-form.tsx
@@ -1,7 +1,6 @@
/**
* External dependencies
*/
-import PropTypes from 'prop-types';
import { ValidatedTextInput } from '@woocommerce/base-components/text-input';
import {
BillingCountryInput,
@@ -241,14 +240,4 @@ const AddressForm = ( {
);
};
-AddressForm.propTypes = {
- onChange: PropTypes.func.isRequired,
- values: PropTypes.object.isRequired,
- fields: PropTypes.arrayOf(
- PropTypes.oneOf( Object.keys( defaultAddressFields ) )
- ),
- fieldConfig: PropTypes.object,
- type: PropTypes.oneOf( [ 'billing', 'shipping' ] ),
-};
-
export default withInstanceId( AddressForm );
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form-step/index.js b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form-step/index.tsx
similarity index 77%
rename from plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form-step/index.js
rename to plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form-step/index.tsx
index 09a94e6eebc..7897bb6bb02 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form-step/index.js
+++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form-step/index.tsx
@@ -2,7 +2,6 @@
* External dependencies
*/
import classnames from 'classnames';
-import PropTypes from 'prop-types';
import Title from '@woocommerce/base-components/title';
/**
@@ -10,7 +9,12 @@ import Title from '@woocommerce/base-components/title';
*/
import './style.scss';
-const StepHeading = ( { title, stepHeadingContent } ) => (
+interface StepHeadingProps {
+ title: string;
+ stepHeadingContent?: JSX.Element;
+}
+
+const StepHeading = ( { title, stepHeadingContent }: StepHeadingProps ) => (
(
);
+interface FormStepProps {
+ id?: string;
+ className?: string;
+ title?: string;
+ legend?: string;
+ description?: string;
+ children?: React.ReactNode;
+ disabled?: boolean;
+ showStepNumber?: boolean;
+ stepHeadingContent?: () => JSX.Element | undefined;
+}
+
const FormStep = ( {
id,
className,
@@ -36,8 +52,8 @@ const FormStep = ( {
children,
disabled = false,
showStepNumber = true,
- stepHeadingContent = () => {},
-} ) => {
+ stepHeadingContent = () => undefined,
+}: FormStepProps ): JSX.Element => {
// If the form step doesn't have a legend or title, render a instead
// of a