From 0fe028d8c2b61a3fb8dba8ff08daaa845b53facc Mon Sep 17 00:00:00 2001
From: Gan Eng Chin <ecgan@users.noreply.github.com>
Date: Fri, 9 Dec 2022 19:30:24 +0800
Subject: [PATCH] Code refactor with CardHeaderTitle component.

This component will be used in other components later.

(cherry picked from commit 995fb7e02d80b721376562727416317534ca177d)
---
 .../components/CardHeaderTitle/CardHeaderTitle.scss  |  6 ++++++
 .../components/CardHeaderTitle/CardHeaderTitle.tsx   | 12 ++++++++++++
 .../marketing/components/CardHeaderTitle/index.ts    |  1 +
 .../components/CollapsibleCard/CollapsibleCard.scss  |  4 ----
 .../components/CollapsibleCard/CollapsibleCard.tsx   |  3 ++-
 .../client/marketing/components/index.js             |  1 +
 6 files changed, 22 insertions(+), 5 deletions(-)
 create mode 100644 plugins/woocommerce-admin/client/marketing/components/CardHeaderTitle/CardHeaderTitle.scss
 create mode 100644 plugins/woocommerce-admin/client/marketing/components/CardHeaderTitle/CardHeaderTitle.tsx
 create mode 100644 plugins/woocommerce-admin/client/marketing/components/CardHeaderTitle/index.ts

diff --git a/plugins/woocommerce-admin/client/marketing/components/CardHeaderTitle/CardHeaderTitle.scss b/plugins/woocommerce-admin/client/marketing/components/CardHeaderTitle/CardHeaderTitle.scss
new file mode 100644
index 00000000000..b5b6e6ced57
--- /dev/null
+++ b/plugins/woocommerce-admin/client/marketing/components/CardHeaderTitle/CardHeaderTitle.scss
@@ -0,0 +1,6 @@
+.woocommerce-marketing-card-header-title {
+	font-size: 20px;
+	font-weight: 400;
+	line-height: 28px;
+	letter-spacing: 0;
+}
diff --git a/plugins/woocommerce-admin/client/marketing/components/CardHeaderTitle/CardHeaderTitle.tsx b/plugins/woocommerce-admin/client/marketing/components/CardHeaderTitle/CardHeaderTitle.tsx
new file mode 100644
index 00000000000..6861b8fbe0f
--- /dev/null
+++ b/plugins/woocommerce-admin/client/marketing/components/CardHeaderTitle/CardHeaderTitle.tsx
@@ -0,0 +1,12 @@
+/**
+ * Internal dependencies
+ */
+import './CardHeaderTitle.scss';
+
+export const CardHeaderTitle: React.FC = ( { children } ) => {
+	return (
+		<div className="woocommerce-marketing-card-header-title">
+			{ children }
+		</div>
+	);
+};
diff --git a/plugins/woocommerce-admin/client/marketing/components/CardHeaderTitle/index.ts b/plugins/woocommerce-admin/client/marketing/components/CardHeaderTitle/index.ts
new file mode 100644
index 00000000000..424e3f75a78
--- /dev/null
+++ b/plugins/woocommerce-admin/client/marketing/components/CardHeaderTitle/index.ts
@@ -0,0 +1 @@
+export { CardHeaderTitle } from './CardHeaderTitle';
diff --git a/plugins/woocommerce-admin/client/marketing/components/CollapsibleCard/CollapsibleCard.scss b/plugins/woocommerce-admin/client/marketing/components/CollapsibleCard/CollapsibleCard.scss
index 5c1aef987c1..4303cbd3e65 100644
--- a/plugins/woocommerce-admin/client/marketing/components/CollapsibleCard/CollapsibleCard.scss
+++ b/plugins/woocommerce-admin/client/marketing/components/CollapsibleCard/CollapsibleCard.scss
@@ -1,9 +1,5 @@
 .woocommerce-collapsible-card {
 	.components-card-header {
-		font-size: 20px;
-		font-weight: 400;
-		line-height: 28px;
-		letter-spacing: 0;
 		cursor: pointer;
 	}
 }
diff --git a/plugins/woocommerce-admin/client/marketing/components/CollapsibleCard/CollapsibleCard.tsx b/plugins/woocommerce-admin/client/marketing/components/CollapsibleCard/CollapsibleCard.tsx
index c0a767b1738..c7044810222 100644
--- a/plugins/woocommerce-admin/client/marketing/components/CollapsibleCard/CollapsibleCard.tsx
+++ b/plugins/woocommerce-admin/client/marketing/components/CollapsibleCard/CollapsibleCard.tsx
@@ -17,6 +17,7 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
+import { CardHeaderTitle } from '~/marketing/components';
 import './CollapsibleCard.scss';
 
 type CollapsibleCardProps = {
@@ -48,7 +49,7 @@ const CollapsibleCard: React.FC< CollapsibleCardProps > = ( {
 			) }
 		>
 			<CardHeader onClick={ handleClick }>
-				<div>{ header }</div>
+				<CardHeaderTitle>{ header }</CardHeaderTitle>
 				<Button
 					isSmall
 					icon={ collapsed ? chevronDown : chevronUp }
diff --git a/plugins/woocommerce-admin/client/marketing/components/index.js b/plugins/woocommerce-admin/client/marketing/components/index.js
index 9131b5f57a5..186698cc0b4 100644
--- a/plugins/woocommerce-admin/client/marketing/components/index.js
+++ b/plugins/woocommerce-admin/client/marketing/components/index.js
@@ -5,4 +5,5 @@ export { default as Slider } from './slider';
 export { default as ReadBlogMessage } from './ReadBlogMessage';
 export { CollapsibleCard, CardBody, CardDivider } from './CollapsibleCard';
 export { PluginCardBody } from './PluginCardBody';
+export { CardHeaderTitle } from './CardHeaderTitle';
 export { CenteredSpinner } from './CenteredSpinner';