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

Sidebar: Add Tabs
This commit is contained in:
Paul Sealock 2018-05-23 12:45:01 +12:00 committed by GitHub
commit e66b8a6f7c
9 changed files with 2585 additions and 15935 deletions

View File

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

View File

@ -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

View File

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

View File

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

View File

@ -4,8 +4,8 @@
*/
import { __ } from '@wordpress/i18n';
import classnames from 'classnames';
import { Component } from '@wordpress/element';
import { IconButton } from '@wordpress/components';
import { Component, Fragment } from '@wordpress/element';
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 }>
{ selectedTabName => {
return (
<Fragment>
<h3>Section: { selectedTabName }</h3>
<SidebarHeader label={ __( 'Today', 'woo-dash' ) } />
<Activity />
</Fragment>
);
} }
</TabPanel>
</aside>
);
}

View File

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

View File

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

View File

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

File diff suppressed because it is too large Load Diff