Render optional children in summary number component (https://github.com/woocommerce/woocommerce-admin/pull/6748)

* WIP add details prop to summary number component. New optional prop to add additional information at the bottom.

* Update component readme and stories to include new prop

* Revert commits to use children instead of a new prop

* Render optional summary number component children

* Typo fix, doc improvement and add entry to changelog

* Add readme.txt entry

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

@@ -1,3 +1,7 @@
+# Unreleased
+
+-   Add optional `children` prop to `<SummaryNumber>`.
+
 # 6.0.0
 
 -   Change styling of `<ProductImage />`.

plugins/woocommerce-admin/packages/components/src/summary/README.md

@@ -15,7 +15,9 @@ A container element for a list of SummaryNumbers. This component handles detecti
 				label="Total Sales"
 				delta={ 29 }
 				href="/analytics/report"
-			/>,
+			>
+				<span>27 orders</span>
+			</SummaryNumber>,
 			<SummaryNumber
 				key="refunds"
 				value={ '$24.00' }
@@ -40,7 +42,7 @@ Name | Type | Default | Description
 SummaryNumber
 ===
 
-A component to show a value, label, and an optional change percentage. Can also act as a link to a specific report focus.
+A component to show a value, label, and optionally a change percentage and children node. Can also act as a link to a specific report focus.
 
 ## Usage
 

plugins/woocommerce-admin/packages/components/src/summary/number.js

@@ -15,9 +15,10 @@ import { Text } from '@woocommerce/experimental';
 import Link from '../link';
 
 /**
- * A component to show a value, label, and an optional change percentage. Can also act as a link to a specific report focus.
+ * A component to show a value, label, and optionally a change percentage and children node. Can also act as a link to a specific report focus.
  *
  * @param {Object} props
+ * @param {Node} props.children
  * @param {number} props.delta Change percentage. Float precision is rendered as given.
  * @param {string} props.href
  * @param {string} props.hrefType
@@ -33,6 +34,7 @@ import Link from '../link';
  * @return {Object} -
  */
 const SummaryNumber = ( {
+	children,
 	delta,
 	href,
 	hrefType,
@@ -143,6 +145,7 @@ const SummaryNumber = ( {
 						size={ 24 }
 					/>
 				) : null }
+				{ children }
 			</Container>
 		</li>
 	);

plugins/woocommerce-admin/packages/components/src/summary/stories/index.js

@@ -13,7 +13,9 @@ export const Basic = () => (
 					label="Total Sales"
 					delta={ 29 }
 					href="/analytics/report"
-				/>,
+				>
+					<span>27 orders</span>
+				</SummaryNumber>,
 				<SummaryNumber
 					key="refunds"
 					value={ '$24.00' }

plugins/woocommerce-admin/readme.txt

@@ -93,6 +93,7 @@ Release and roadmap notes are available on the [WooCommerce Developers Blog](htt
 - Fix: Remove no-reply from inbox notification emails #6644
 - Performance: Avoid updating customer info synchronously from the front end. #6765
 - Fix: Set up shipping costs task, redirect to shipping settings after completion. #6791
+- Add: Optional children prop to SummaryNumber component #6748
 
 == 2.2.0 3/30/2021 ==