Add Order Status Component (https://github.com/woocommerce/woocommerce-admin/pull/214)

plugins/woocommerce-admin/client/components/order-status/README.md

@@ -0,0 +1,23 @@
+OrderStatus
+============
+
+Use `OrderStatus` to display a badge with human-friendly text describing the current order status.
+
+## How to use:
+
+```jsx
+import OrderStatus from 'components/order-status';
+
+render: function() {
+  return (
+	<OrderStatus
+		order={ order }
+	/>
+  );
+}
+```
+
+## Props
+
+* `order` (required): The order to display a status for.
+* `className`: Additional CSS classes.

plugins/woocommerce-admin/client/components/order-status/index.js

@@ -0,0 +1,35 @@
+/** @format */
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+const OrderStatus = ( { order, className } ) => {
+	const { status } = order;
+	const { orderStatuses } = wcSettings;
+	const classes = classnames( 'woocommerce-order-status', className );
+	const indicatorClasses = classnames( 'woocommerce-order-status__indicator', {
+		[ 'is-' + status ]: true,
+	} );
+	const label = orderStatuses[ 'wc-' + status ] || status;
+	return (
+		<div className={ classes }>
+			<span className={ indicatorClasses } />
+			{ label }
+		</div>
+	);
+};
+
+OrderStatus.propTypes = {
+	order: PropTypes.object.isRequired,
+	className: PropTypes.string,
+};
+
+export default OrderStatus;

plugins/woocommerce-admin/client/components/order-status/style.scss

@@ -0,0 +1,26 @@
+/** @format */
+
+.woocommerce-order-status {
+	display: flex;
+	align-items: center;
+}
+
+.woocommerce-order-status__indicator {
+	width: 16px;
+	height: 16px;
+	display: block;
+	background: $core-grey-light-700;
+	margin-right: $gap-smallest * 2;
+	border-radius: 50%;
+	border: 3px solid $core-grey-light-500;
+
+	&.is-processing {
+		background: $valid-green;
+		border-color: lighten($valid-green, 20%);
+	}
+
+	&.is-on-hold {
+		background: $notice-yellow;
+		border-color: lighten($notice-yellow, 20%);
+	}
+}

plugins/woocommerce-admin/client/layout/activity-panel/panels/orders.js

@@ -18,6 +18,7 @@ import { formatCurrency, getCurrencyFormatDecimal } from 'lib/currency';
 import { getOrderRefundTotal } from 'lib/order-values';
 import Gravatar from 'components/gravatar';
 import Flag from 'components/flag';
+import OrderStatus from 'components/order-status';
 import { Section } from 'layout/section';
 
 function OrdersPanel( { orders } ) {
@@ -90,7 +91,7 @@ function OrdersPanel( { orders } ) {
 									</Button>
 								}
 							>
-								Pending
+								<OrderStatus order={ order } />
 							</ActivityCard>
 						);
 					} )

plugins/woocommerce-admin/client/stylesheets/_colors.scss

@@ -38,6 +38,7 @@ $black: #24292d; // same as wp-admin sidebar
 
 // Bright colors
 $valid-green: #4ab866;
+$notice-yellow: #ffb900;
 $error-red: #d94f4f;
 $woocommerce: #95588a;
 $core-orange: #ca4a1f;

plugins/woocommerce-admin/lib/client-assets.php

@@ -43,11 +43,12 @@ function wc_admin_register_script() {
 	$settings = array(
 		'adminUrl'           => admin_url(),
 		'embedBreadcrumbs'   => wc_admin_get_embed_breadcrumbs(),
-		'siteLocale'   => esc_attr( get_bloginfo( 'language' ) ),
-		'currency'  => wc_admin_currency_settings(),
-		'date' => array(
+		'siteLocale'         => esc_attr( get_bloginfo( 'language' ) ),
+		'currency'           => wc_admin_currency_settings(),
+		'date'               => array(
 			'dow' => get_option( 'start_of_week', 0 ),
 		),
+		'orderStatuses'      => wc_get_order_statuses(),
 	);
 
 	wp_add_inline_script(