Convert radio-control-accordion component to TypeScript (#7849)

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 };

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;