add default (= null) for classNames prop so it's optional for WizardTaskItem and CollapsibleBody

changelog/fix-9142-classname-optional-default-null

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Migrate WizardTaskItem and CollapsibleBody components to TypeScript, making the className prop optional.

client/additional-methods-setup/wizard/collapsible-body.js → client/additional-methods-setup/wizard/collapsible-body.tsx

@@ -10,7 +10,10 @@ import classNames from 'classnames';
 import WizardTaskContext from './task/context';
 import './collapsible-body.scss';
 
-const CollapsibleBody = ( { className, ...restProps } ) => {
+const CollapsibleBody: React.FC< React.HTMLAttributes< HTMLDivElement > > = ( {
+	className,
+	...restProps
+} ) => {
 	const { isActive } = useContext( WizardTaskContext );
 
 	return (

client/additional-methods-setup/wizard/task-item.js → client/additional-methods-setup/wizard/task-item.tsx

@@ -11,7 +11,19 @@ import { Icon, check } from '@wordpress/icons';
 import WizardTaskContext from './task/context';
 import './task-item.scss';
 
-const WizardTaskItem = ( { children, title, index, className } ) => {
+interface WizardTaskItemProps {
+	children: React.ReactNode;
+	title: string;
+	index: number;
+	className?: string;
+}
+
+const WizardTaskItem: React.FC< WizardTaskItemProps > = ( {
+	children,
+	title,
+	index,
+	className,
+} ) => {
 	const { isCompleted, isActive } = useContext( WizardTaskContext );
 
 	return (
@@ -26,7 +38,7 @@ const WizardTaskItem = ( { children, title, index, className } ) => {
 				className="wcpay-wizard-task__headline"
 				// tabindex with value `-1` is necessary to programmatically set the focus
 				// on an element that is not interactive.
-				tabIndex="-1"
+				tabIndex={ -1 }
 			>
 				<div className="wcpay-wizard-task__icon-wrapper">
 					<div className="wcpay-wizard-task__icon-text">

client/multi-currency-setup/wizard/task-item.js → client/multi-currency-setup/wizard/task-item.tsx

@@ -11,12 +11,20 @@ import { Icon, check } from '@wordpress/icons';
 import WizardTaskContext from '../../additional-methods-setup/wizard/task/context';
 import './task-item.scss';
 
-const WizardTaskItem = ( {
+interface WizardTaskItemProps {
+	children: React.ReactNode;
+	title: string;
+	index: number;
+	visibleDescription: string;
+	className?: string;
+}
+
+const WizardTaskItem: React.FC< WizardTaskItemProps > = ( {
 	children,
 	title,
 	index,
-	className,
 	visibleDescription,
+	className,
 } ) => {
 	const { isCompleted, isActive } = useContext( WizardTaskContext );
 
@@ -32,7 +40,7 @@ const WizardTaskItem = ( {
 				className="wcpay-wizard-task__headline"
 				// tabindex with value `-1` is necessary to programmatically set the focus
 				// on an element that is not interactive.
-				tabIndex="-1"
+				tabIndex={ -1 }
 			>
 				<div className="wcpay-wizard-task__icon-wrapper">
 					<div className="wcpay-wizard-task__icon-text">

client/vat/form/tasks/company-data-task.tsx

@@ -96,9 +96,8 @@ export const CompanyDataTask = ( {
 				'Confirm your business details',
 				'woocommerce-payments'
 			) }
-			className={ null }
 		>
-			<CollapsibleBody className={ null }>
+			<CollapsibleBody>
 				<TextControl
 					label={ __( 'Business name', 'woocommerce-payments' ) }
 					value={ companyName }

client/vat/form/tasks/vat-number-task.tsx

@@ -159,7 +159,6 @@ export const VatNumberTask = ( {
 				),
 				getVatTaxIDName()
 			) }
-			className={ null }
 		>
 			<p className="wcpay-wizard-task__description-element">
 				{ __(
@@ -168,7 +167,7 @@ export const VatNumberTask = ( {
 				) }
 			</p>
 
-			<CollapsibleBody className={ null }>
+			<CollapsibleBody>
 				<CheckboxControl
 					checked={ isVatRegistered }
 					onChange={ setVatRegistered }