diff --git a/plugins/woocommerce-admin/client/dashboard/index.js b/plugins/woocommerce-admin/client/dashboard/index.js index c6f42b355bc..4dbb84b12cb 100644 --- a/plugins/woocommerce-admin/client/dashboard/index.js +++ b/plugins/woocommerce-admin/client/dashboard/index.js @@ -10,14 +10,14 @@ import { Component, Fragment } from '@wordpress/element'; */ import Agenda from './widgets/agenda'; import Header from 'layout/header'; -import Numbers from './numbers'; +import StorePerformance from './store-performance'; export default class Dashboard extends Component { render() { return (
- + ); diff --git a/plugins/woocommerce-admin/client/dashboard/numbers.js b/plugins/woocommerce-admin/client/dashboard/store-performance/index.js similarity index 65% rename from plugins/woocommerce-admin/client/dashboard/numbers.js rename to plugins/woocommerce-admin/client/dashboard/store-performance/index.js index 4d07d142b6f..b4462e1b47a 100644 --- a/plugins/woocommerce-admin/client/dashboard/numbers.js +++ b/plugins/woocommerce-admin/client/dashboard/store-performance/index.js @@ -2,8 +2,8 @@ /** * External dependencies */ -import { __, _n, sprintf } from '@wordpress/i18n'; -import { Button, ToggleControl, withAPIData } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { ToggleControl, withAPIData } from '@wordpress/components'; import { Component, compose } from '@wordpress/element'; /** @@ -11,8 +11,10 @@ import { Component, compose } from '@wordpress/element'; */ import Card from 'components/card'; import { EllipsisMenu, MenuItem, MenuTitle } from 'components/ellipsis-menu'; +import { SummaryList, SummaryNumber } from 'components/summary'; +import './style.scss'; -class WidgetNumbers extends Component { +class PerformanceIndicators extends Component { constructor() { super( ...arguments ); this.state = { @@ -66,35 +68,27 @@ class WidgetNumbers extends Component { const { showCustomers, showProducts, showOrders } = this.state; return ( - -
+ + { showCustomers && ( -
- { sprintf( _n( '%d New Customer', '%d New Customers', 4, 'woo-dash' ), 4 ) } -
- ) } - { showOrders && ( -
- { sprintf( - _n( '%d New Order', '%d New Orders', totalOrders, 'woo-dash' ), - totalOrders - ) } -
+ ) } { showProducts && ( -
- { sprintf( - _n( '%d Product', '%d Products', totalProducts, 'woo-dash' ), - totalProducts - ) } -
+ ) } -
- -
-
+ { showOrders && ( + + ) } +
); } @@ -105,4 +99,4 @@ export default compose( [ orders: '/wc/v2/orders?status=processing', products: '/wc/v2/products', } ) ), -] )( WidgetNumbers ); +] )( PerformanceIndicators ); diff --git a/plugins/woocommerce-admin/client/dashboard/store-performance/style.scss b/plugins/woocommerce-admin/client/dashboard/store-performance/style.scss new file mode 100644 index 00000000000..21613eb1a56 --- /dev/null +++ b/plugins/woocommerce-admin/client/dashboard/store-performance/style.scss @@ -0,0 +1,17 @@ +/** @format */ + +.woocommerce-dashboard__store-performance { + .woocommerce-card__body { + padding: 0; + } + + .woocommerce-summary { + margin: 0; + border-top: 0px; + border-bottom: 0px; + + .woocommerce-summary__item { + border-width: 0 1px 0 0; + } + } +}