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

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

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"

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,10 +58,13 @@ 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 }
-				>
+				<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(
@@ -82,6 +90,7 @@ class ChartBlock extends Component {
 							showHeaderControls={ false }
 							filters={ filters }
 						/>
+					</CardBody>
 				</Card>
 			</div>
 		);

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 {