From d47454300a6bea3e0675e206726b38b6847c1f43 Mon Sep 17 00:00:00 2001
From: Justin Shreve <justin.shreve@gmail.com>
Date: Tue, 22 May 2018 16:15:00 -0400
Subject: [PATCH] Add timeline separator/heading to the sidebar
 (https://github.com/woocommerce/woocommerce-admin/pull/71)

* Add a timeline separator to the sidebar.

* Rename Timeline/Separator to SidebarHeader
---
 .../client/layout/sidebar/README.md           |  8 +++++++
 .../client/layout/sidebar/header.js           | 24 +++++++++++++++++++
 .../layout/{sidebar.js => sidebar/index.js}   |  5 +++-
 .../client/layout/sidebar/style.scss          | 22 +++++++++++++++++
 .../client/layout/style.scss                  |  6 ++---
 .../client/stylesheets/_colors.scss           |  1 -
 6 files changed, 61 insertions(+), 5 deletions(-)
 create mode 100644 plugins/woocommerce-admin/client/layout/sidebar/README.md
 create mode 100644 plugins/woocommerce-admin/client/layout/sidebar/header.js
 rename plugins/woocommerce-admin/client/layout/{sidebar.js => sidebar/index.js} (86%)
 create mode 100644 plugins/woocommerce-admin/client/layout/sidebar/style.scss

diff --git a/plugins/woocommerce-admin/client/layout/sidebar/README.md b/plugins/woocommerce-admin/client/layout/sidebar/README.md
new file mode 100644
index 00000000000..f87879c60c8
--- /dev/null
+++ b/plugins/woocommerce-admin/client/layout/sidebar/README.md
@@ -0,0 +1,8 @@
+Sidebar
+======
+
+This component contains the sidebar content. This is shown on every page, but conditionally hidden behind a toggle button in the Header.
+
+## SidebarHeader
+
+The `SidebarHeader` component is used to separate timeline entries by date. It accepts a required `label` prop (i.e. Today, Yesterday, 2 Days Ago, Last Week).
diff --git a/plugins/woocommerce-admin/client/layout/sidebar/header.js b/plugins/woocommerce-admin/client/layout/sidebar/header.js
new file mode 100644
index 00000000000..1a7eaabe7ce
--- /dev/null
+++ b/plugins/woocommerce-admin/client/layout/sidebar/header.js
@@ -0,0 +1,24 @@
+/** @format */
+/**
+ * External dependencies
+ */
+import { Component } from '@wordpress/element';
+import PropTypes from 'prop-types';
+
+class SidebarHeader extends Component {
+	render() {
+		const { label } = this.props;
+		return (
+			<div class="woo-dash__sidebar-header">
+				<h3 className="woo-dash__sidebar-header-label">{ label }</h3>
+				<div class="woo-dash__sidebar-header-divider" />
+			</div>
+		);
+	}
+}
+
+SidebarHeader.propTypes = {
+	label: PropTypes.string.isRequired,
+};
+
+export default SidebarHeader;
diff --git a/plugins/woocommerce-admin/client/layout/sidebar.js b/plugins/woocommerce-admin/client/layout/sidebar/index.js
similarity index 86%
rename from plugins/woocommerce-admin/client/layout/sidebar.js
rename to plugins/woocommerce-admin/client/layout/sidebar/index.js
index 8fd7b1b2bd0..1f30600a61e 100644
--- a/plugins/woocommerce-admin/client/layout/sidebar.js
+++ b/plugins/woocommerce-admin/client/layout/sidebar/index.js
@@ -11,7 +11,9 @@ import { uniqueId } from 'lodash';
 /**
  * Internal dependencies
  */
+import './style.scss';
 import Activity from 'dashboard/activity';
+import SidebarHeader from './header';
 
 class Sidebar extends Component {
 	render() {
@@ -23,7 +25,7 @@ class Sidebar extends Component {
 
 		return (
 			<aside className={ className } aria-labelledby={ headerId }>
-				<header className="woo-dash__sidebar-header">
+				<header className="woo-dash__sidebar-top">
 					<h2 className="woo-dash__sidebar-title" id={ headerId }>
 						{ __( 'Store Activity', 'woo-dash' ) }
 					</h2>
@@ -37,6 +39,7 @@ class Sidebar extends Component {
 					</div>
 				</header>
 
+				<SidebarHeader label={ __( 'Today', 'woo-dash' ) } />
 				<Activity />
 			</aside>
 		);
diff --git a/plugins/woocommerce-admin/client/layout/sidebar/style.scss b/plugins/woocommerce-admin/client/layout/sidebar/style.scss
new file mode 100644
index 00000000000..2ac16e23676
--- /dev/null
+++ b/plugins/woocommerce-admin/client/layout/sidebar/style.scss
@@ -0,0 +1,22 @@
+/** @format */
+
+.woo-dash__sidebar-header {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+
+	.woo-dash__sidebar-header-label {
+		flex-grow: 0;
+		text-transform: uppercase;
+		margin-right: 8px;
+		color: $gray-dark;
+		font-weight: 500;
+		font-size: 1.1em;
+	}
+
+	.woo-dash__sidebar-header-divider {
+		flex-grow: 1;
+		height: 1px;
+		background-color: $gray-dark;
+	}
+}
diff --git a/plugins/woocommerce-admin/client/layout/style.scss b/plugins/woocommerce-admin/client/layout/style.scss
index 8cbca99d2d3..4e2c681e60f 100644
--- a/plugins/woocommerce-admin/client/layout/style.scss
+++ b/plugins/woocommerce-admin/client/layout/style.scss
@@ -51,11 +51,11 @@
 	height: calc(100vh - 32px);
 	overflow-x: hidden;
 	overflow-y: scroll;
-	transform: translate3d( 100%, 0, 0 );
+	transform: translate3d(100%, 0, 0);
 	transition: transform 0.15s ease-in-out;
 
 	&.is-opened {
-		transform: translate3d( 0, 0, 0 );
+		transform: translate3d(0, 0, 0);
 	}
 }
 
@@ -76,7 +76,7 @@
 		height: calc(100vh - 46px);
 	}
 
-	.woo-dash__sidebar-header {
+	.woo-dash__sidebar-top {
 		display: flex;
 		justify-content: space-between;
 	}
diff --git a/plugins/woocommerce-admin/client/stylesheets/_colors.scss b/plugins/woocommerce-admin/client/stylesheets/_colors.scss
index 7faf05bf3f0..abbf71555a9 100644
--- a/plugins/woocommerce-admin/client/stylesheets/_colors.scss
+++ b/plugins/woocommerce-admin/client/stylesheets/_colors.scss
@@ -8,5 +8,4 @@ $gray-dark: darken($gray, 38%);
 $gray-darken-10: darken($gray, 10%);
 $gray-darken-20: darken($gray, 20%);
 $gray-darken-30: darken($gray, 30%);
-
 $gray-text: $gray-dark;