From fc47e16bcbaec5818d6c3de24c52c03007610342 Mon Sep 17 00:00:00 2001
From: Tarun Vijwani <tarun.vijwani@automattic.com>
Date: Tue, 6 Dec 2022 21:23:46 +0400
Subject: [PATCH] Convert radio-control-accordion component to TypeScript
 (#7849)

---
 .../radio-control-accordion/index.js          | 74 ----------------
 .../radio-control-accordion/index.tsx         | 88 +++++++++++++++++++
 .../js/base/components/radio-control/types.ts |  2 +-
 3 files changed, 89 insertions(+), 75 deletions(-)
 delete mode 100644 assets/js/base/components/radio-control-accordion/index.js
 create mode 100644 assets/js/base/components/radio-control-accordion/index.tsx

diff --git a/assets/js/base/components/radio-control-accordion/index.js b/assets/js/base/components/radio-control-accordion/index.js
deleted file mode 100644
index 6d01e3bd5af..00000000000
--- a/assets/js/base/components/radio-control-accordion/index.js
+++ /dev/null
@@ -1,74 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-import { withInstanceId } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import RadioControlOption from '../radio-control/option';
-
-const RadioControlAccordion = ( {
-	className,
-	instanceId,
-	id,
-	selected,
-	onChange,
-	options = [],
-} ) => {
-	const radioControlId = id || instanceId;
-
-	return (
-		options.length && (
-			<div
-				className={ classnames(
-					'wc-block-components-radio-control',
-					className
-				) }
-			>
-				{ options.map( ( option ) => {
-					const hasOptionContent =
-						typeof option === 'object' && 'content' in option;
-					const checked = option.value === selected;
-					return (
-						<div
-							className="wc-block-components-radio-control-accordion-option"
-							key={ option.value }
-						>
-							<RadioControlOption
-								name={ `radio-control-${ radioControlId }` }
-								checked={ checked }
-								option={ option }
-								onChange={ ( value ) => {
-									onChange( value );
-									if (
-										typeof option.onChange === 'function'
-									) {
-										option.onChange( value );
-									}
-								} }
-							/>
-							{ hasOptionContent && checked && (
-								<div
-									className={ classnames(
-										'wc-block-components-radio-control-accordion-content',
-										{
-											'wc-block-components-radio-control-accordion-content-hide':
-												! checked,
-										}
-									) }
-								>
-									{ option.content }
-								</div>
-							) }
-						</div>
-					);
-				} ) }
-			</div>
-		)
-	);
-};
-
-export default withInstanceId( RadioControlAccordion );
-export { RadioControlAccordion };
diff --git a/assets/js/base/components/radio-control-accordion/index.tsx b/assets/js/base/components/radio-control-accordion/index.tsx
new file mode 100644
index 00000000000..d55cf315bd3
--- /dev/null
+++ b/assets/js/base/components/radio-control-accordion/index.tsx
@@ -0,0 +1,88 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { withInstanceId } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import RadioControlOption from '../radio-control/option';
+
+interface RadioControlAccordionProps {
+	className?: string;
+	instanceId: number;
+	id: string;
+	onChange: ( value: string ) => void;
+	options: Array< {
+		value: string;
+		label: string | JSX.Element;
+		onChange?: ( value: string ) => void;
+		name: string;
+		content: JSX.Element;
+	} >;
+	selected: string | null;
+}
+
+const RadioControlAccordion = ( {
+	className,
+	instanceId,
+	id,
+	selected,
+	onChange,
+	options = [],
+}: RadioControlAccordionProps ): JSX.Element | null => {
+	const radioControlId = id || instanceId;
+
+	if ( ! options.length ) {
+		return null;
+	}
+	return (
+		<div
+			className={ classnames(
+				'wc-block-components-radio-control',
+				className
+			) }
+		>
+			{ options.map( ( option ) => {
+				const hasOptionContent =
+					typeof option === 'object' && 'content' in option;
+				const checked = option.value === selected;
+				return (
+					<div
+						className="wc-block-components-radio-control-accordion-option"
+						key={ option.value }
+					>
+						<RadioControlOption
+							name={ `radio-control-${ radioControlId }` }
+							checked={ checked }
+							option={ option }
+							onChange={ ( value ) => {
+								onChange( value );
+								if ( typeof option.onChange === 'function' ) {
+									option.onChange( value );
+								}
+							} }
+						/>
+						{ hasOptionContent && checked && (
+							<div
+								className={ classnames(
+									'wc-block-components-radio-control-accordion-content',
+									{
+										'wc-block-components-radio-control-accordion-content-hide':
+											! checked,
+									}
+								) }
+							>
+								{ option.content }
+							</div>
+						) }
+					</div>
+				);
+			} ) }
+		</div>
+	);
+};
+
+export default withInstanceId( RadioControlAccordion );
+export { RadioControlAccordion };
diff --git a/assets/js/base/components/radio-control/types.ts b/assets/js/base/components/radio-control/types.ts
index a5c4188e324..75bd4262ebe 100644
--- a/assets/js/base/components/radio-control/types.ts
+++ b/assets/js/base/components/radio-control/types.ts
@@ -24,7 +24,7 @@ export interface RadioControlOptionProps {
 }
 
 interface RadioControlOptionContent {
-	label: string;
+	label: string | JSX.Element;
 	description?: string | ReactElement | undefined;
 	secondaryLabel?: string | ReactElement | undefined;
 	secondaryDescription?: string | undefined;