From 71e210d1f84af7e5ec9bb1d88896d3c90716a849 Mon Sep 17 00:00:00 2001
From: Jeff Stieler <jeff.m.stieler@gmail.com>
Date: Fri, 7 Dec 2018 16:47:30 -0700
Subject: [PATCH 1/2] Fix missing key warning on TableCard devdocs example.

---
 .../packages/components/src/table/example.md                | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/plugins/woocommerce-admin/packages/components/src/table/example.md b/plugins/woocommerce-admin/packages/components/src/table/example.md
index 99f6c3db72f..164771e2604 100644
--- a/plugins/woocommerce-admin/packages/components/src/table/example.md
+++ b/plugins/woocommerce-admin/packages/components/src/table/example.md
@@ -2,7 +2,11 @@
 import { TableCard } from '@woocommerce/components';
 
 const noop = () => {};
-const headers = [ { label: 'Month' }, { label: 'Orders' }, { label: 'Revenue' } ];
+const headers = [
+	{ key: 'month', label: 'Month' },
+	{ key: 'orders', label: 'Orders' },
+	{ key: 'revenue', label: 'Revenue' },
+];
 const rows = [
 	[
 		{ display: 'January', value: 1 },

From 7291a880eb6e0ded87ea9b0941d528bfc1f75637 Mon Sep 17 00:00:00 2001
From: Jeff Stieler <jeff.m.stieler@gmail.com>
Date: Fri, 7 Dec 2018 17:07:15 -0700
Subject: [PATCH 2/2] Update filter component examples with real usage from
 Orders report.

Also resolves JS errors that were occurring.
---
 .../components/src/filters/example.md         | 117 ++++++++++++------
 1 file changed, 76 insertions(+), 41 deletions(-)

diff --git a/plugins/woocommerce-admin/packages/components/src/filters/example.md b/plugins/woocommerce-admin/packages/components/src/filters/example.md
index b91bf6fcd8c..b8dcc9ef844 100644
--- a/plugins/woocommerce-admin/packages/components/src/filters/example.md
+++ b/plugins/woocommerce-admin/packages/components/src/filters/example.md
@@ -1,56 +1,91 @@
 ```jsx
 import { ReportFilters } from '@woocommerce/components';
+const { orderStatuses } = wcSettings;
 
 const path = '';
 const query = {};
 const filters = [
-	{ label: 'All Products', value: 'all' },
-	{ label: 'Top Products by Items Sold', value: 'top_items' },
-	{ label: 'Top Products by Gross Sales', value: 'top_sales' },
+	{
+		label: 'Show',
+		staticParams: [ 'chart' ],
+		param: 'filter',
+		showFilters: () => true,
+		filters: [
+			{ label: 'All Orders', value: 'all' },
+			{ label: 'Advanced Filters', value: 'advanced' },
+		],
+	},
 ];
 
 const advancedFilters = {
-	status: {
-		labels: {
-			add: 'Order Status',
-			remove: 'Remove order status filter',
-			rule: 'Select an order status filter match',
-			title: 'Order Status',
-		},
-		rules: [
-			{ value: 'is', label: 'Is' },
-			{ value: 'is_not', label: 'Is Not' },
-		],
-		input: {
-			component: 'SelectControl',
-			options: [
-				{ value: 'pending', label: 'Pending' },
-				{ value: 'processing', label: 'Processing' },
-				{ value: 'on-hold', label: 'On Hold' },
-				{ value: 'completed', label: 'Completed' },
-				{ value: 'refunded', label: 'Refunded' },
-				{ value: 'cancelled', label: 'Cancelled' },
-				{ value: 'failed', label: 'Failed' },
+	title: 'Orders Match {{select /}} Filters',
+	filters: {
+		status: {
+			labels: {
+				add: 'Order Status',
+				remove: 'Remove order status filter',
+				rule: 'Select an order status filter match',
+				title: 'Order Status {{rule /}} {{filter /}}',
+				filter: 'Select an order status',
+			},
+			rules: [
+				{
+					value: 'is',
+					label: 'Is',
+				},
+				{
+					value: 'is_not',
+					label: 'Is Not',
+				},
 			],
+			input: {
+				component: 'SelectControl',
+				options: Object.keys( orderStatuses ).map( key => ( {
+					value: key,
+					label: orderStatuses[ key ],
+				} ) ),
+			},
 		},
-	},
-	product_id: {
-		labels: {
-			add: 'Products',
-			placeholder: 'Search products',
-			remove: 'Remove products filter',
-			rule: 'Select a product filter match',
-			title: 'Product',
+		product: {
+			labels: {
+				add: 'Products',
+				placeholder: 'Search products',
+				remove: 'Remove products filter',
+				rule: 'Select a product filter match',
+				title: 'Product {{rule /}} {{filter /}}',
+				filter:'Select products',
+			},
+			rules: [
+				{
+					value: 'includes',
+					label: 'Includes',
+				},
+				{
+					value: 'excludes',
+					label: 'Excludes',
+				},
+			],
+			input: {
+				component: 'Search',
+				type: 'products',
+				getLabels: () => Promise.resolve( [] ),
+			},
 		},
-		rules: [
-			{ value: 'includes', label: 'Includes' },
-			{ value: 'excludes', label: 'Excludes' },
-		],
-		input: {
-			component: 'Search',
-			type: 'products',
-			getLabels: function() {
-				return Promise.resolve( [] );
+		customer: {
+			labels: {
+				add: 'Customer Type',
+				remove: 'Remove customer filter',
+				rule: 'Select a customer filter match',
+				title: 'Customer is {{filter /}}',
+				filter: 'Select a customer type',
+			},
+			input: {
+				component: 'SelectControl',
+				options: [
+					{ value: 'new', label: 'New', },
+					{ value: 'returning', label: 'Returning', },
+				],
+				defaultOption: 'new',
 			},
 		},
 	},