From 02ce7cccc5ece0ba6e7aead365836ced0bdf8358 Mon Sep 17 00:00:00 2001
From: Gan Eng Chin <ecgan@users.noreply.github.com>
Date: Tue, 13 Dec 2022 21:35:01 +0800
Subject: [PATCH] Modify PluginCardBody to accept className, and change
 description type.

---
 .../components/PluginCardBody/PluginCardBody.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/plugins/woocommerce-admin/client/marketing/components/PluginCardBody/PluginCardBody.tsx b/plugins/woocommerce-admin/client/marketing/components/PluginCardBody/PluginCardBody.tsx
index 1e67edeb3ed..6b0b4acd0c8 100644
--- a/plugins/woocommerce-admin/client/marketing/components/PluginCardBody/PluginCardBody.tsx
+++ b/plugins/woocommerce-admin/client/marketing/components/PluginCardBody/PluginCardBody.tsx
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * Internal dependencies
  */
@@ -5,6 +10,7 @@ import { CardBody } from '~/marketing/components';
 import './PluginCardBody.scss';
 
 type PluginCardBodyProps = {
+	className?: string;
 	icon: JSX.Element;
 	name: string;
 
@@ -13,7 +19,7 @@ type PluginCardBodyProps = {
 	 */
 	pills?: Array< JSX.Element >;
 
-	description: string;
+	description: React.ReactNode;
 	button?: JSX.Element;
 };
 
@@ -21,6 +27,7 @@ type PluginCardBodyProps = {
  * Renders a CardBody layout component to display plugin info and button.
  */
 export const PluginCardBody: React.FC< PluginCardBodyProps > = ( {
+	className,
 	icon,
 	name,
 	pills,
@@ -28,7 +35,12 @@ export const PluginCardBody: React.FC< PluginCardBodyProps > = ( {
 	button,
 } ) => {
 	return (
-		<CardBody className="woocommerce_marketing_plugin_card_body">
+		<CardBody
+			className={ classnames(
+				'woocommerce_marketing_plugin_card_body',
+				className
+			) }
+		>
 			<div className="woocommerce_marketing_plugin_card_body__icon">
 				{ icon }
 			</div>