Merge pull request woocommerce/woocommerce-admin#67 from woocommerce/add/sidebar-tabs

Sidebar: Add Tabs

plugins/woocommerce-admin/.gitignore

@@ -11,3 +11,5 @@ node_modules/
 dist
 languages/*
 !languages/README.md
+
+.idea

plugins/woocommerce-admin/client/components/count/README.md

@@ -0,0 +1,25 @@
+Count
+===
+
+Display a number with a styled border
+
+## Usage
+
+```jsx
+import Count from 'components/count';
+
+export default function myCount() {
+	return (
+		<Count count={ 33 } />
+	);
+}
+```
+
+### Props
+
+* Marks required props
+
+Name | Type | Default | Description
+--- | --- | --- | ---
+`count`* | `number` | none | Value of the number to be displayed
+

plugins/woocommerce-admin/client/components/count/index.js

@@ -0,0 +1,19 @@
+/** @format */
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+const Count = ( { count } ) => {
+	return <span className="woo-dash__count">{ count }</span>;
+};
+
+Count.propTypes = {
+	count: PropTypes.number.isRequired,
+};
+
+export default Count;

plugins/woocommerce-admin/client/components/count/style.scss

@@ -0,0 +1,7 @@
+/** @format */
+
+.woo-dash__count {
+	border: 1px solid;
+	border-radius: 10px;
+	padding: 0px 8px;
+}

plugins/woocommerce-admin/client/layout/sidebar/index.js

@@ -4,8 +4,8 @@
  */
 import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
-import { Component } from '@wordpress/element';
+import { Component, Fragment } from '@wordpress/element';
-import { IconButton } from '@wordpress/components';
+import { IconButton, TabPanel } from '@wordpress/components';
 import { uniqueId } from 'lodash';
 
 /**
@@ -14,14 +14,48 @@ import { uniqueId } from 'lodash';
 import './style.scss';
 import Activity from 'dashboard/activity';
 import SidebarHeader from './header';
+import Count from 'components/count';
 
 class Sidebar extends Component {
+	getTabs() {
+		return [
+			{
+				name: 'insights',
+				title: (
+					<span>
+						{ __( 'Insights', 'woo-dash' ) } <Count count={ 3 } />
+					</span>
+				),
+				className: 'woo-dash__sidebar-tab',
+			},
+			{
+				name: 'orders',
+				title: (
+					<span>
+						{ __( 'Orders', 'woo-dash' ) } <Count count={ 1 } />
+					</span>
+				),
+				className: 'woo-dash__sidebar-tab',
+			},
+			{
+				name: 'reviews',
+				title: (
+					<span>
+						{ __( 'Reviews', 'woo-dash' ) } <Count count={ 7 } />
+					</span>
+				),
+				className: 'woo-dash__sidebar-tab',
+			},
+		];
+	}
+
 	render() {
 		const { isOpen, onToggle } = this.props;
 		const className = classnames( 'woo-dash__secondary', {
 			'is-opened': isOpen,
 		} );
 		const headerId = uniqueId( 'sidebar-header_' );
+		const tabs = this.getTabs();
 
 		return (
 			<aside className={ className } aria-labelledby={ headerId }>
@@ -38,9 +72,17 @@ class Sidebar extends Component {
 						/>
 					</div>
 				</header>
-
+				<TabPanel className="woo-dash__sidebar-tabs" activeClass="is-active" tabs={ tabs }>
-				<SidebarHeader label={ __( 'Today', 'woo-dash' ) } />
+					{ selectedTabName => {
-				<Activity />
+						return (
+							<Fragment>
+								<h3>Section: { selectedTabName }</h3>
+								<SidebarHeader label={ __( 'Today', 'woo-dash' ) } />
+								<Activity />
+							</Fragment>
+						);
+					} }
+				</TabPanel>
 			</aside>
 		);
 	}

plugins/woocommerce-admin/client/layout/sidebar/style.scss

@@ -9,7 +9,7 @@
 		flex-grow: 0;
 		text-transform: uppercase;
 		margin-right: 8px;
-		color: $gray-dark;
+		color: $gray-text;
 		font-weight: 500;
 		font-size: 1.1em;
 	}
@@ -17,6 +17,6 @@
 	.woo-dash__sidebar-header-divider {
 		flex-grow: 1;
 		height: 1px;
-		background-color: $gray-dark;
+		background-color: $gray-darken-40;
 	}
 }

plugins/woocommerce-admin/client/layout/style.scss

@@ -64,9 +64,8 @@
 }
 
 .woo-dash__secondary {
-	background: $white;
+	background: $gray;
 	border-left: 1px solid $gray;
-	padding: 2em;
 	min-height: calc(100vh - 32px);
 
 	@include breakpoint( '<782px' ) {
@@ -90,6 +89,42 @@
 	}
 }
 
+.woo-dash__sidebar-tabs {
+	min-height: inherit;
+
+	.components-tab-panel__tabs {
+		display: grid;
+		grid-template-columns: 1fr 1fr 1fr;
+		grid-column-gap: 5px;
+		padding: 2em 2em 0;
+		background-color: transparent;
+	}
+
+	.components-tab-panel__tab-content {
+		min-height: inherit;
+		background-color: $wp-admin-background;
+		padding: 2em;
+	}
+
+	.woo-dash__sidebar-tab {
+		border: none;
+		outline: none;
+		cursor: pointer;
+		background-color: transparent;
+		padding: 1em 0.5em;
+		color: $gray-darken-30;
+
+		&.is-active {
+			background-color: $wp-admin-background;
+			color: $gray-darken-40;
+		}
+
+		h2 {
+			font-size: 1.2em;
+		}
+	}
+}
+
 // @TODO remove this?
 .woo-dash__widget {
 	display: flex;

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

@@ -4,8 +4,10 @@ $white: rgba(255, 255, 255, 1);
 
 // Grays
 $gray: #ccc;
-$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;
+$gray-darken-40: darken($gray, 40%);
+$gray-text: $gray-darken-40;
+
+$wp-admin-background: #f1f1f1;