diff --git a/plugins/woocommerce-admin/client/components/count/README.md b/plugins/woocommerce-admin/client/components/count/README.md index 75519d2198d..1a9175a896b 100644 --- a/plugins/woocommerce-admin/client/components/count/README.md +++ b/plugins/woocommerce-admin/client/components/count/README.md @@ -22,4 +22,4 @@ export default function myCount() { Name | Type | Default | Description --- | --- | --- | --- `count`* | `number` | none | Value of the number to be displayed - +`label` | `string` | "Total {props.count}" | A translated label with the number in context, used for screen readers diff --git a/plugins/woocommerce-admin/client/components/count/index.js b/plugins/woocommerce-admin/client/components/count/index.js index da473356b05..8c49c534645 100644 --- a/plugins/woocommerce-admin/client/components/count/index.js +++ b/plugins/woocommerce-admin/client/components/count/index.js @@ -2,18 +2,32 @@ /** * External dependencies */ +import { __, sprintf } from '@wordpress/i18n'; import PropTypes from 'prop-types'; /** * Internal dependencies */ import './style.scss'; -const Count = ( { count } ) => { - return { count }; +const Count = ( { count, label } ) => { + if ( ! label ) { + label = sprintf( __( 'Total %d', 'woo-dash' ), count ); + } + + return ( + + { count } + + ); }; Count.propTypes = { count: PropTypes.number.isRequired, + label: PropTypes.string, +}; + +Count.defaultProps = { + label: '', }; export default Count; diff --git a/plugins/woocommerce-admin/client/layout/sidebar/index.js b/plugins/woocommerce-admin/client/layout/sidebar/index.js index aae51deeaf2..2d241e21574 100644 --- a/plugins/woocommerce-admin/client/layout/sidebar/index.js +++ b/plugins/woocommerce-admin/client/layout/sidebar/index.js @@ -2,7 +2,7 @@ /** * External dependencies */ -import { __ } from '@wordpress/i18n'; +import { __, sprintf } from '@wordpress/i18n'; import classnames from 'classnames'; import { Component, Fragment } from '@wordpress/element'; import { IconButton, TabPanel } from '@wordpress/components'; @@ -32,7 +32,8 @@ class Sidebar extends Component { name: 'orders', title: ( - { __( 'Orders', 'woo-dash' ) } + { __( 'Orders', 'woo-dash' ) }{' '} + ), className: 'woocommerce-layout__sidebar-tab',