diff --git a/plugins/woocommerce-admin/client/analytics/index.js b/plugins/woocommerce-admin/client/analytics/index.js index f394cdc4b0f..fffacac40ce 100644 --- a/plugins/woocommerce-admin/client/analytics/index.js +++ b/plugins/woocommerce-admin/client/analytics/index.js @@ -9,47 +9,14 @@ import { Component, Fragment } from '@wordpress/element'; * Internal dependencies */ import Header from 'components/header'; -import SegmentedSelection from 'components/segmented-selection'; +import DatePicker from 'components/date-picker'; export default class extends Component { - constructor() { - super(); - this.state = { - numbers: [], - }; - this.onSelect = this.onSelect.bind( this ); - } - - onSelect( key, value ) { - this.setState( { [ key ]: value } ); - } - render() { return (
-
-

Example

- -
+ ); } diff --git a/plugins/woocommerce-admin/client/components/date-picker/README.md b/plugins/woocommerce-admin/client/components/date-picker/README.md new file mode 100644 index 00000000000..6ad52bfba59 --- /dev/null +++ b/plugins/woocommerce-admin/client/components/date-picker/README.md @@ -0,0 +1,21 @@ +Date Picker (Work in Progress) +=== + +Select a range of dates or single dates + +## Usage + +```jsx + +``` + +### Props + +Required props are marked with `*`. + +Name | Type | Default | Description +--- | --- | --- | --- +`period`* | `string` | none | Selected period. `today`, `yesterday`, `week`, `last_week`, `month`, `last_month`, `quarter`, `last_quarter`, `year`, `last_year`, `custom` +`compare`* | `string` | none | Selected period to compare. `previous_period`, `previous_year` +`start` | `string` | none | If a `custom` period is selected, this is the start date +`end` | `string` | none | If a `custom` period is selected, this is the end date diff --git a/plugins/woocommerce-admin/client/components/date-picker/index.js b/plugins/woocommerce-admin/client/components/date-picker/index.js new file mode 100644 index 00000000000..475741a87a2 --- /dev/null +++ b/plugins/woocommerce-admin/client/components/date-picker/index.js @@ -0,0 +1,106 @@ +/** @format */ +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; +import { Component, Fragment } from '@wordpress/element'; +import { Button, TabPanel } from '@wordpress/components'; +import { partial } from 'lodash'; + +/** + * Internal dependencies + */ +import './style.scss'; +import SegmentedSelection from 'components/segmented-selection'; +import PresetPeriods from './preset-periods'; + +class DatePicker extends Component { + constructor( props ) { + super( props ); + /** + * Getting initial data from props here, but they will come from the url + * Defaults can be added here + */ + const { period, compare, start, end } = props; + const state = { + period, + compare: compare, + }; + if ( 'custom' === period ) { + Object.assign( state, { start, end } ); + } + this.state = state; + this.update = this.update.bind( this ); + this.select = this.select.bind( this ); + } + + select( key, value ) { + this.setState( { [ key ]: value } ); + } + + update( selectedTab ) { + const data = { + period: 'custom' === selectedTab ? 'custom' : this.state.period, + compare: this.state.compare, + }; + // This would be set as a result of the custom date picker, placing here as an example + if ( 'custom' === selectedTab ) { + Object.assign( data, { start: 'a date', end: 'another date' } ); + } + console.log( data ); + } + + render() { + const { period, compare } = this.state; + const compareToString = __( 'compare to', 'woo-dash' ); + return ( +
+

{ __( 'select a date range', 'woo-dash' ) }

+ + { selectedTab => ( + + { selectedTab === 'period' && ( + + ) } + { selectedTab === 'custom' &&
Custom Date Picker Goes here
} +

{ compareToString }

+ + + + ) } + +
+ ); + } +} + +export default DatePicker; diff --git a/plugins/woocommerce-admin/client/components/date-picker/preset-periods.js b/plugins/woocommerce-admin/client/components/date-picker/preset-periods.js new file mode 100644 index 00000000000..599bc9c7678 --- /dev/null +++ b/plugins/woocommerce-admin/client/components/date-picker/preset-periods.js @@ -0,0 +1,39 @@ +/** @format */ +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; +import { Component } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import SegmentedSelection from 'components/segmented-selection'; + +class PresetPeriods extends Component { + render() { + const { onSelect, period } = this.props; + return ( + + ); + } +} + +export default PresetPeriods; diff --git a/plugins/woocommerce-admin/client/components/date-picker/style.scss b/plugins/woocommerce-admin/client/components/date-picker/style.scss new file mode 100644 index 00000000000..a4c5e202180 --- /dev/null +++ b/plugins/woocommerce-admin/client/components/date-picker/style.scss @@ -0,0 +1,79 @@ +/** @format */ + +.woo-dash__datepicker { + width: 350px; + padding: 1em 0; + border: 1px solid $gray; + background-color: $white; + display: flex; + flex-direction: column; + + & > * { + margin: 0 0 1em 0; + + &:last-child { + margin: 0; + } + } +} + +.woo-dash__datepicker-tabs { + .components-tab-panel__tabs { + display: grid; + grid-template-columns: 1fr 1fr; + border-radius: 5px; + margin: 0 1em 1em 1em; + } + + .components-tab-panel__tab-content { + display: flex; + flex-direction: column; + + & > * { + margin: 0 0 1em 0; + + &:last-child { + margin: 0; + } + } + } +} + +.woo-dash__datepicker-tab { + outline: none; + border: 1px solid $black; + padding: 10px; + margin: 0; + border-radius: 5px 0 0 5px; + background-color: transparent; + + &:last-child { + border-radius: 0 5px 5px 0; + } + + &.is-active { + background-color: $black; + color: $white; + } + + &:focus { + outline: 2px solid lightseagreen; + } +} + +.woo-dash__datepicker-update-btn { + border: 1px solid $gray; + background-color: transparent; + align-self: center; + padding: 0.5em; + width: 50%; + justify-content: center; +} + +.woo-dash__datepicker-text { + font-size: 14px; + font-weight: 200; + text-transform: uppercase; + text-align: center; + color: $gray-text; +} diff --git a/plugins/woocommerce-admin/client/components/segmented-selection/README.md b/plugins/woocommerce-admin/client/components/segmented-selection/README.md index a412eda9db2..6ff3ec03387 100644 --- a/plugins/woocommerce-admin/client/components/segmented-selection/README.md +++ b/plugins/woocommerce-admin/client/components/segmented-selection/README.md @@ -22,7 +22,6 @@ const Numbers = () => { /> ); } - ``` ### Props diff --git a/plugins/woocommerce-admin/client/components/segmented-selection/style.scss b/plugins/woocommerce-admin/client/components/segmented-selection/style.scss index 8bea0853588..454c3e3cc18 100644 --- a/plugins/woocommerce-admin/client/components/segmented-selection/style.scss +++ b/plugins/woocommerce-admin/client/components/segmented-selection/style.scss @@ -4,7 +4,8 @@ width: 100%; grid-template-columns: 1fr 1fr; display: grid; - border: 1px solid $gray; + border-top: 1px solid $gray; + border-bottom: 1px solid $gray; grid-gap: 1px; background-color: $gray; } @@ -14,6 +15,7 @@ padding: 1em; position: relative; display: block; + height: 100%; } .woo-dash__segmented-selection-input { diff --git a/plugins/woocommerce-admin/client/stylesheets/_colors.scss b/plugins/woocommerce-admin/client/stylesheets/_colors.scss index fc1829b24ba..47827dae7e3 100644 --- a/plugins/woocommerce-admin/client/stylesheets/_colors.scss +++ b/plugins/woocommerce-admin/client/stylesheets/_colors.scss @@ -13,3 +13,6 @@ $gray-text: $gray-darken-40; $gray-light-10: lighten($gray, 10%); $wp-admin-background: #f1f1f1; + +// Black +$black: #24292d; // same as wp-admin sidebar