Update Card component to use Muriel design (https://github.com/woocommerce/woocommerce-admin/pull/2252)

* Use Muriel card styling and override card styles in reports

* Add card description prop

* Add isInactive prop and styling to card component

plugins/woocommerce-admin/client/analytics/components/leaderboard/index.js

@@ -56,7 +56,7 @@ export class Leaderboard extends Component {
 
 		if ( ! isRequesting && rows.length === 0 ) {
 			return (
-				<Card title={ title } className="woocommerce-leaderboard">
+				<Card title={ title } className="woocommerce-leaderboard woocommerce-analytics__card">
 					<EmptyTable>
 						{ __( 'No data recorded for the selected time period.', 'woocommerce-admin' ) }
 					</EmptyTable>

plugins/woocommerce-admin/client/analytics/report/style.scss

@@ -12,3 +12,34 @@
 		}
 	}
 }
+
+.woocommerce-analytics__card {
+	border-radius: 0;
+	border: 1px solid $core-grey-light-700;
+	box-shadow: none;
+
+	&:hover {
+		box-shadow: none;
+	}
+
+	@include breakpoint( '<782px' ) {
+		border-left: none;
+		border-right: none;
+		margin-left: -16px;
+		margin-right: -16px;
+	}
+
+	> .woocommerce-card__header {
+		padding: ($gap - 3) $gap;
+		border-bottom: 1px solid $core-grey-light-700;
+		border-radius: 0;
+
+		> .woocommerce-card__title-wrapper > .woocommerce-card__title {
+			// EllipsisMenu is 24px, so to match we add 6px padding around the
+			// heading text, which we know is 18px from line-height.
+			padding: 3px 0;
+			@include font-size( 15 );
+			font-weight: 600;
+		}
+	}
+}

plugins/woocommerce-admin/client/dashboard/dashboard-charts/block.js

@@ -42,7 +42,10 @@ class ChartBlock extends Component {
 				className="woocommerce-dashboard__chart-block-wrapper"
 				onClick={ this.handleChartClick }
 			>
-				<Card className="woocommerce-dashboard__chart-block" title={ charts[ 0 ].label }>
+				<Card
+					className="woocommerce-dashboard__chart-block woocommerce-analytics__card"
+					title={ charts[ 0 ].label }
+				>
 					<a
 						className="screen-reader-text"
 						href={ getAdminLink(

plugins/woocommerce-admin/client/devdocs/index.js

@@ -55,7 +55,8 @@ export default class extends Component {
 					const { componentName, filePath, render, docPath } = getExampleData( example );
 					const cardClasses = classnames(
 						'woocommerce-devdocs__card',
-						`woocommerce-devdocs__card--${ filePath }`
+						`woocommerce-devdocs__card--${ filePath }`,
+						'woocommerce-analytics__card'
 					);
 					return (
 						<Card

plugins/woocommerce-admin/client/layout/store-alerts/index.js

@@ -180,7 +180,7 @@ class StoreAlerts extends Component {
 		const numberOfAlerts = alerts.length;
 		const alert = alerts[ currentIndex ];
 		const type = alert.type;
-		const className = classnames( 'woocommerce-store-alerts', {
+		const className = classnames( 'woocommerce-store-alerts', 'woocommerce-analytics__card', {
 			'is-alert-error': 'error' === type,
 			'is-alert-update': 'update' === type,
 		} );

plugins/woocommerce-admin/client/stylesheets/abstracts/_variables.scss

@@ -33,3 +33,7 @@ $alert-red: $error-red;
 // WordPress defaults
 $adminbar-height: 32px;
 $adminbar-height-mobile: 46px;
+
+// Muriel
+$muriel-card-box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
+	0 1px 3px 0 rgba(0, 0, 0, 0.12);

plugins/woocommerce-admin/packages/components/CHANGELOG.md

@@ -7,6 +7,9 @@
 - EllipsisMenu component (breaking change): Remove `children` prop in favor of a render prop `renderContent` so that function arguments `isOpen`, `onToggle`, and `onClose` can be passed down.
 - Chart has a new prop named `yBelow1Format` which overrides the `yFormat` for values between -1 and 1 (not included).
 - Add new component `<Stepper />` for showing a list of steps and progress.
+- Card component: updated default Muriel design.
+- Card component: new `description` prop.
+- Card component: new `isInactive` prop.
 
 # 2.0.0
 - Chart legend component now uses withInstanceId HOC so the ids used in several HTML elements are unique.

plugins/woocommerce-admin/packages/components/src/card/example.md

@@ -2,8 +2,13 @@
 import { Card } from '@woocommerce/components';
 
 const MyCard = () => (
-	<Card title={ "Store Performance" }>
-		<p>Your stuff in a Card</p>
-	</Card>
+	<div>
+		<Card title={ "Store Performance" } description={ "Key performance metrics" }>
+			<p>Your stuff in a Card.</p>
+		</Card>
+		<Card title={ "Inactive Card" } isInactive={ true }>
+			<p>This Card is grayed out and has no box-shadow.</p>
+		</Card>
+	</div>
 );
 ```

plugins/woocommerce-admin/packages/components/src/card/index.js

@@ -18,16 +18,24 @@ import { validateComponent } from '../lib/proptype-validator';
  */
 class Card extends Component {
 	render() {
-		const { action, children, menu, title } = this.props;
+		const { action, children, description, isInactive, menu, title } = this.props;
 		const className = classnames( 'woocommerce-card', this.props.className, {
 			'has-menu': !! menu,
 			'has-action': !! action,
+			'is-inactive': !! isInactive,
 		} );
 		return (
 			<div className={ className }>
 				{ title && (
 					<div className="woocommerce-card__header">
-						<H className="woocommerce-card__title woocommerce-card__header-item">{ title }</H>
+						<div className="woocommerce-card__title-wrapper">
+							<H className="woocommerce-card__title woocommerce-card__header-item">{ title }</H>
+							{ description && (
+								<H className="woocommerce-card__description woocommerce-card__header-item">
+									{ description }
+								</H>
+							) }
+						</div>
 						{ action && (
 							<div className="woocommerce-card__action woocommerce-card__header-item">
 								{ action }
@@ -53,6 +61,14 @@ Card.propTypes = {
 	 * Additional CSS classes.
 	 */
 	className: PropTypes.string,
+	/**
+	 * The description displayed beneath the title.
+	 */
+	description: PropTypes.oneOfType( [ PropTypes.string, PropTypes.node ] ),
+	/**
+	 * Boolean representing whether the card is inactive or not.
+	 */
+	isInactive: PropTypes.bool,
 	/**
 	 * An `EllipsisMenu`, with filters used to control the content visible in this card
 	 */

plugins/woocommerce-admin/packages/components/src/card/style.scss

@@ -3,23 +3,33 @@
 .woocommerce-card {
 	margin-bottom: $gap-large;
 	background: $white;
-	border: 1px solid $core-grey-light-700;
+	border-radius: 3px;
+	box-shadow: $muriel-card-box-shadow;
+	transition: box-shadow 0.2s cubic-bezier(0.4, 1, 0.4, 1);
 
 	@include breakpoint( '<782px' ) {
-		margin-left: -16px;
-		margin-right: -16px;
 		margin-bottom: $gap-small;
-		border-left: none;
-		border-right: none;
 		width: auto;
 	}
+
+	&:hover {
+		box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+			0 8px 10px 1px rgba(0, 0, 0, 0.14),
+			0 3px 14px 2px rgba(0, 0, 0, 0.12);
+	}
+
+	&.is-inactive {
+		background-color: #f6f6f6;
+		box-shadow: none;
+	}
 }
 
 .woocommerce-card__header {
-	padding: ($gap - 3) $gap;
-	border-bottom: 1px solid $core-grey-light-700;
+	padding: $gap;
 	display: grid;
 	align-items: center;
+	border-top-left-radius: 3px;
+	border-top-left-radius: 4px;
 
 	.has-action & {
 		grid-template-columns: auto 1fr;
@@ -55,10 +65,16 @@
 
 .woocommerce-card__title {
 	margin: 0;
-	// EllipsisMenu is 24px, so to match we add 6px padding around the
-	// heading text, which we know is 18px from line-height.
-	padding: 3px 0;
-	@include font-size( 15 );
+	@include font-size( 24 );
 	line-height: 1.2;
-	font-weight: 600;
+	font-weight: 400;
+}
+
+.woocommerce-card__description {
+	@include font-size( 16 );
+	line-height: 1.5;
+	color: $muriel-gray-500;
+	margin-top: $gap-small;
+	margin-bottom: 0;
+	font-weight: 400;
 }

plugins/woocommerce-admin/packages/components/src/card/test/__snapshots__/index.js.snap

@@ -7,11 +7,15 @@ exports[`Card it renders correctly 1`] = `
   <div
     className="woocommerce-card__header"
   >
-    <h2
-      className="woocommerce-card__title woocommerce-card__header-item"
+    <div
+      className="woocommerce-card__title-wrapper"
     >
-      A Card Example
-    </h2>
+      <h2
+        className="woocommerce-card__title woocommerce-card__header-item"
+      >
+        A Card Example
+      </h2>
+    </div>
   </div>
   <div
     className="woocommerce-card__body"

plugins/woocommerce-admin/packages/components/src/filters/advanced/index.js

@@ -187,7 +187,7 @@ class AdvancedFilters extends Component {
 		const updateDisabled = window.location.hash && ( window.location.hash.substr( 1 ) === updateHref || 0 === activeFilters.length );
 		const isEnglish = this.isEnglish();
 		return (
-			<Card className="woocommerce-filters-advanced" title={ this.getTitle() }>
+			<Card className="woocommerce-filters-advanced woocommerce-analytics__card" title={ this.getTitle() }>
 				<ul className="woocommerce-filters-advanced__list" ref={ this.filterListRef }>
 					{ activeFilters.map( filter => {
 						const { key } = filter;

plugins/woocommerce-admin/packages/components/src/filters/compare/index.js

@@ -79,7 +79,7 @@ class CompareFilter extends Component {
 		const { labels, type } = this.props;
 		const { selected } = this.state;
 		return (
-			<Card title={ labels.title } className="woocommerce-filters__compare">
+			<Card title={ labels.title } className="woocommerce-filters__compare woocommerce-analytics__card">
 				<div className="woocommerce-filters__compare-body">
 					<Search
 						type={ type }

plugins/woocommerce-admin/packages/components/src/stepper/style.scss

@@ -1,8 +1,6 @@
 .woocommerce-stepper {
 	background: #fff;
-	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2),
-		0 2px 2px rgba(0, 0, 0, 0.12),
-		0 0 2px rgba(0, 0, 0, 0.14);
+	box-shadow: $muriel-card-box-shadow;
 	display: flex;
 	justify-content: space-around;
 	align-items: center;

plugins/woocommerce-admin/packages/components/src/table/index.js

@@ -288,7 +288,7 @@ class TableCard extends Component {
 			headers = [ this.getAllCheckbox(), ...headers ];
 		}
 
-		const className = classnames( {
+		const className = classnames( 'woocommerce-analytics__card', {
 			'woocommerce-table': true,
 			'has-compare': !! compareBy,
 			'has-search': !! searchBy,