From 8d99e637c5d21f7a9f516525d9900e92b63dfc54 Mon Sep 17 00:00:00 2001
From: Joshua T Flowers <joshuatf@gmail.com>
Date: Mon, 21 Dec 2020 14:06:41 -0500
Subject: [PATCH] Update dashboard charts to use WP Card
 (https://github.com/woocommerce/woocommerce-admin/pull/5897)

* Update dashboard charts to use WP Card

* Fix lint and test errors
---
 .../analytics/components/leaderboard/index.js | 29 +++++---
 .../test/__snapshots__/index.js.snap          | 12 +++-
 .../dashboard/dashboard-charts/block.js       | 69 +++++++++++--------
 .../dashboard/dashboard-charts/block.scss     |  5 ++
 4 files changed, 74 insertions(+), 41 deletions(-)

diff --git a/plugins/woocommerce-admin/client/analytics/components/leaderboard/index.js b/plugins/woocommerce-admin/client/analytics/components/leaderboard/index.js
index 19427430414..476e9559d18 100644
--- a/plugins/woocommerce-admin/client/analytics/components/leaderboard/index.js
+++ b/plugins/woocommerce-admin/client/analytics/components/leaderboard/index.js
@@ -2,11 +2,17 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
+import {
+	Card,
+	CardBody,
+	CardHeader,
+	__experimentalText as Text,
+} from '@wordpress/components';
 import { Component } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
+import { EmptyTable, TableCard } from '@woocommerce/components';
 import { withSelect } from '@wordpress/data';
 import PropTypes from 'prop-types';
-import { Card, EmptyTable, TableCard } from '@woocommerce/components';
 import { getPersistedQuery } from '@woocommerce/navigation';
 import {
 	getFilterQuery,
@@ -63,13 +69,20 @@ export class Leaderboard extends Component {
 
 		if ( ! isRequesting && rows.length === 0 ) {
 			return (
-				<Card title={ title } className={ classes }>
-					<EmptyTable>
-						{ __(
-							'No data recorded for the selected time period.',
-							'woocommerce-admin'
-						) }
-					</EmptyTable>
+				<Card className={ classes }>
+					<CardHeader>
+						<Text variant="title.small" as="h3">
+							{ title }
+						</Text>
+					</CardHeader>
+					<CardBody size={ null }>
+						<EmptyTable>
+							{ __(
+								'No data recorded for the selected time period.',
+								'woocommerce-admin'
+							) }
+						</EmptyTable>
+					</CardBody>
 				</Card>
 			);
 		}
diff --git a/plugins/woocommerce-admin/client/analytics/components/leaderboard/test/__snapshots__/index.js.snap b/plugins/woocommerce-admin/client/analytics/components/leaderboard/test/__snapshots__/index.js.snap
index 44a81c8ff15..2482ab91a4a 100644
--- a/plugins/woocommerce-admin/client/analytics/components/leaderboard/test/__snapshots__/index.js.snap
+++ b/plugins/woocommerce-admin/client/analytics/components/leaderboard/test/__snapshots__/index.js.snap
@@ -255,11 +255,17 @@ exports[`Leaderboard should render correct data in the table 1`] = `
 exports[`Leaderboard should render empty message when there are no rows 1`] = `
 <div>
   <div
-    class="woocommerce-card woocommerce-leaderboard"
+    class="components-card is-size-medium woocommerce-leaderboard css-1xs3c37-CardUI e1q7k77g0"
   >
-    
     <div
-      class="woocommerce-card__body"
+      class="components-flex components-card__header is-size-medium e1q7k77g1 css-jsa6v9-Flex-HeaderUI eboqfv50"
+    >
+      <h3
+        class="css-1ahfdc3-Text e15wbhsk0"
+      />
+    </div>
+    <div
+      class="components-card__body css-xmjzce-BodyUI e1q7k77g3"
     >
       <div
         class="woocommerce-table is-empty"
diff --git a/plugins/woocommerce-admin/client/dashboard/dashboard-charts/block.js b/plugins/woocommerce-admin/client/dashboard/dashboard-charts/block.js
index f6afe31e9c4..394a88fb252 100644
--- a/plugins/woocommerce-admin/client/dashboard/dashboard-charts/block.js
+++ b/plugins/woocommerce-admin/client/dashboard/dashboard-charts/block.js
@@ -4,7 +4,12 @@
 import { Component } from '@wordpress/element';
 import PropTypes from 'prop-types';
 import { __, sprintf } from '@wordpress/i18n';
-import { Card } from '@woocommerce/components';
+import {
+	Card,
+	CardBody,
+	CardHeader,
+	__experimentalText as Text,
+} from '@wordpress/components';
 import {
 	getHistory,
 	getNewPath,
@@ -53,35 +58,39 @@ class ChartBlock extends Component {
 				className="woocommerce-dashboard__chart-block-wrapper"
 				onClick={ this.handleChartClick }
 			>
-				<Card
-					className="woocommerce-dashboard__chart-block woocommerce-analytics__card"
-					title={ selectedChart.label }
-				>
-					<a
-						className="screen-reader-text"
-						href={ getAdminLink(
-							this.getChartPath( selectedChart )
-						) }
-					>
-						{
-							/* translators: %s is the chart type */
-							sprintf(
-								__( '%s Report', 'woocommerce-admin' ),
-								selectedChart.label
-							)
-						}
-					</a>
-					<ReportChart
-						charts={ charts }
-						endpoint={ endpoint }
-						query={ query }
-						interactiveLegend={ false }
-						legendPosition="bottom"
-						path={ path }
-						selectedChart={ selectedChart }
-						showHeaderControls={ false }
-						filters={ filters }
-					/>
+				<Card className="woocommerce-dashboard__chart-block">
+					<CardHeader>
+						<Text variant="title.small" as="h3">
+							{ selectedChart.label }
+						</Text>
+					</CardHeader>
+					<CardBody size={ null }>
+						<a
+							className="screen-reader-text"
+							href={ getAdminLink(
+								this.getChartPath( selectedChart )
+							) }
+						>
+							{
+								/* translators: %s is the chart type */
+								sprintf(
+									__( '%s Report', 'woocommerce-admin' ),
+									selectedChart.label
+								)
+							}
+						</a>
+						<ReportChart
+							charts={ charts }
+							endpoint={ endpoint }
+							query={ query }
+							interactiveLegend={ false }
+							legendPosition="bottom"
+							path={ path }
+							selectedChart={ selectedChart }
+							showHeaderControls={ false }
+							filters={ filters }
+						/>
+					</CardBody>
 				</Card>
 			</div>
 		);
diff --git a/plugins/woocommerce-admin/client/dashboard/dashboard-charts/block.scss b/plugins/woocommerce-admin/client/dashboard/dashboard-charts/block.scss
index cef54d1e74f..65560b9aa33 100644
--- a/plugins/woocommerce-admin/client/dashboard/dashboard-charts/block.scss
+++ b/plugins/woocommerce-admin/client/dashboard/dashboard-charts/block.scss
@@ -9,6 +9,11 @@
 			background: transparent;
 		}
 	}
+	.woocommerce-chart {
+		margin-top: 0;
+		margin-bottom: 0;
+		border: 0;
+	}
 	.woocommerce-chart__footer {
 		position: relative;
 		&::after {