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

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).

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;

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>
 		);

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;
+	}
+}

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;
 	}

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;