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
+
+Default classNames prop to null so components are more flexible/easier to use.

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

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

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

@@ -11,7 +11,7 @@ import { Icon, check } from '@wordpress/icons';
 import WizardTaskContext from './task/context';
 import './task-item.scss';
 
-const WizardTaskItem = ( { children, title, index, className } ) => {
+const WizardTaskItem = ( { children, title, index, className = '' } ) => {
 	const { isCompleted, isActive } = useContext( WizardTaskContext );
 
 	return (

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

@@ -15,8 +15,8 @@ const WizardTaskItem = ( {
 	children,
 	title,
 	index,
-	className,
 	visibleDescription,
+	className = '',
 } ) => {
 	const { isCompleted, isActive } = useContext( WizardTaskContext );
 

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 }