From 664694e165cfa3f34fe65a59e43ac1cebcb8090b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ismael=20Mart=C3=ADn=20Alabarce?= <info@ismaeld.com>
Date: Thu, 15 Apr 2021 08:49:35 +0200
Subject: [PATCH] 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  | 4 ++++
 .../packages/components/src/summary/README.md               | 6 ++++--
 .../packages/components/src/summary/number.js               | 5 ++++-
 .../packages/components/src/summary/stories/index.js        | 4 +++-
 plugins/woocommerce-admin/readme.txt                        | 1 +
 5 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/plugins/woocommerce-admin/packages/components/CHANGELOG.md b/plugins/woocommerce-admin/packages/components/CHANGELOG.md
index 44187f7b38a..967bad67a15 100644
--- a/plugins/woocommerce-admin/packages/components/CHANGELOG.md
+++ b/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 />`.
diff --git a/plugins/woocommerce-admin/packages/components/src/summary/README.md b/plugins/woocommerce-admin/packages/components/src/summary/README.md
index 3fd296d005f..20ba6c2203b 100644
--- a/plugins/woocommerce-admin/packages/components/src/summary/README.md
+++ b/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
 
diff --git a/plugins/woocommerce-admin/packages/components/src/summary/number.js b/plugins/woocommerce-admin/packages/components/src/summary/number.js
index a213636eee7..8f279f17831 100644
--- a/plugins/woocommerce-admin/packages/components/src/summary/number.js
+++ b/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>
 	);
diff --git a/plugins/woocommerce-admin/packages/components/src/summary/stories/index.js b/plugins/woocommerce-admin/packages/components/src/summary/stories/index.js
index f60e0b2356d..0868a243cc2 100644
--- a/plugins/woocommerce-admin/packages/components/src/summary/stories/index.js
+++ b/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' }
diff --git a/plugins/woocommerce-admin/readme.txt b/plugins/woocommerce-admin/readme.txt
index dd94ac0a7bd..73aa4c619bc 100644
--- a/plugins/woocommerce-admin/readme.txt
+++ b/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 ==