Remove Agenda Widget (https://github.com/woocommerce/woocommerce-admin/pull/216)
This commit is contained in:
Justin Shreve
GitHub
parent
0e0426e3cd
commit
b64d729f0a
|
|
@ -8,7 +8,6 @@ import { Component, Fragment } from '@wordpress/element';
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import Agenda from './widgets/agenda';
|
||||
import Header from 'layout/header';
|
||||
import StorePerformance from './store-performance';
|
||||
import Charts from './charts';
|
||||
|
|
@ -19,7 +18,6 @@ export default class Dashboard extends Component {
|
|||
<Fragment>
|
||||
<Header sections={ [ __( 'Dashboard', 'wc-admin' ) ] } />
|
||||
<StorePerformance />
|
||||
<Agenda />
|
||||
<Charts />
|
||||
</Fragment>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,82 +0,0 @@
|
|||
Agenda
|
||||
============
|
||||
|
||||
This widget displays agenda items for WooCommerce (i.e. orders that need fulfilled, reviews to moderate, etc).
|
||||
|
||||
An `Agenda` widget is made up of multiple `AgendaHeader` components, each with their own `AgendaItem`.
|
||||
|
||||
`Agenda` acts as a wrapper widget, and will be responsible for pulling in agenda data from the API.
|
||||
|
||||
`AgendaHeader` displays multiple `AgendaItem` child components. All `AgendaItem`s under an `AgendaHeader` should relate to the same task at hand (example: "Orders to fulfill"). Alternatively, a link can be passed and `AgendaHeader` will act as a link instead.
|
||||
|
||||
`AgendaItem` contains information to each individual item (i.e. order number, date, etc). It will output an action button for acting on each item.
|
||||
|
||||
## How to use `Agenda`:
|
||||
|
||||
```jsx
|
||||
import { Agenda } from 'dashboard/widgets/agenda';
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<div>
|
||||
<Agenda />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## How to use `AgendaHeader` and `AgendaItem`:
|
||||
|
||||
```jsx
|
||||
import { AgendaHeader } from 'dashboard/widgets/agenda/header';
|
||||
import { AgendaItem } from 'dashboard/widgets/agenda/item';
|
||||
import { getWpAdminLink } from 'lib/nav-utils';
|
||||
import { noop } from 'lodash';
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<div>
|
||||
<AgendaHeader
|
||||
count={ 2 }
|
||||
title={ _n(
|
||||
'Order needs to be fulfilled',
|
||||
'Orders need to be fulfilled',
|
||||
2,
|
||||
'wc-admin'
|
||||
) }
|
||||
>
|
||||
<AgendaItem onClick={ noop } actionLabel={ __( 'Fulfill', 'wc-admin' ) }>Order #99</AgendaItem>
|
||||
<AgendaItem
|
||||
href={ getWpAdminLink( '/edit.php?post_type=shop_order' ) }
|
||||
actionLabel={ __( 'Fulfill', 'wc-admin' ) }
|
||||
>
|
||||
Order #101
|
||||
</AgendaItem>
|
||||
</AgendaHeader>
|
||||
<AgendaHeader
|
||||
count={ 1 }
|
||||
title={ _n( 'Order awaiting payment', 'Orders awaiting payment', 1, 'wc-admin' ) }
|
||||
href={ getWpAdminLink( '/edit.php?post_status=wc-pending&post_type=shop_order' ) }
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## `AgendaHeader` Props
|
||||
|
||||
* `title` (required): A title that describes the associated agenda items.
|
||||
* `count`: Number of agenda items that need taken care of.
|
||||
* `children`: A list of AgendaItem components.
|
||||
* `href`: If a href is passed, the AgendaHeader will not be expandable, and will instead link to the destination.
|
||||
* `className`: Optional extra class name.
|
||||
* `initialOpen` (default: false): Initial open status of the accordion (if not passing an href).
|
||||
|
||||
## `AgendaItem` Props
|
||||
|
||||
* `onClick`: A function called when the action button is clicked.
|
||||
* `href`: A link when the action button is clicked.
|
||||
* `actionLabel` (required): A string to be used for the action button.
|
||||
* `className`: Optional extra class name.
|
||||
* `children`: Information about the agenda item.
|
||||
|
|
@ -1,107 +0,0 @@
|
|||
/** @format */
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import classnames from 'classnames';
|
||||
import { Component } from '@wordpress/element';
|
||||
import { Dashicon, IconButton } from '@wordpress/components';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import Count from 'components/count';
|
||||
import { H, Section } from 'layout/section';
|
||||
|
||||
class AgendaHeader extends Component {
|
||||
constructor( props ) {
|
||||
super( ...arguments );
|
||||
this.state = {
|
||||
opened: props.initialOpen === undefined ? false : props.initialOpen,
|
||||
};
|
||||
this.toggle = this.toggle.bind( this );
|
||||
}
|
||||
|
||||
toggle( event ) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
if ( this.props.opened === undefined ) {
|
||||
this.setState( state => ( {
|
||||
opened: ! state.opened,
|
||||
} ) );
|
||||
}
|
||||
|
||||
if ( this.props.onToggle ) {
|
||||
this.props.onToggle();
|
||||
}
|
||||
}
|
||||
|
||||
renderLink() {
|
||||
const { title, className, count, href } = this.props;
|
||||
const classes = classnames( 'woocommerce-dashboard__agenda-group-wrapper', className );
|
||||
|
||||
return (
|
||||
<a className={ classes } href={ href }>
|
||||
<div className="woocommerce-dashboard__agenda-group-title is-link">
|
||||
<H className="woocommerce-dashboard__agenda-group-label">
|
||||
{ count && <Count count={ count } /> }
|
||||
{ title }
|
||||
</H>
|
||||
<span className="woocommerce-dashboard__agenda-group-arrow">
|
||||
<Dashicon icon="arrow-right-alt2" />
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { title, children, opened, className, count, href } = this.props;
|
||||
|
||||
// Render a link instead of an accordion if `href` is passed.
|
||||
if ( href ) {
|
||||
return this.renderLink();
|
||||
}
|
||||
|
||||
const isOpened = opened === undefined ? this.state.opened : opened;
|
||||
const classes = classnames( 'woocommerce-dashboard__agenda-group-wrapper', className, {
|
||||
'is-opened': isOpened,
|
||||
} );
|
||||
const icon = `arrow-${ isOpened ? 'up-alt2' : 'down-alt2' }`;
|
||||
|
||||
/* eslint-disable jsx-a11y/click-events-have-key-events */
|
||||
/* eslint-disable jsx-a11y/no-static-element-interactions */
|
||||
return (
|
||||
<div className={ classes }>
|
||||
<div
|
||||
onClick={ this.toggle }
|
||||
className="woocommerce-dashboard__agenda-group-title is-accordion"
|
||||
>
|
||||
<H className="woocommerce-dashboard__agenda-group-label">
|
||||
{ count && <Count count={ count } /> }
|
||||
{ title }
|
||||
</H>
|
||||
<IconButton onClick={ this.toggle } aria-expanded={ isOpened } icon={ icon } />
|
||||
</div>
|
||||
|
||||
{ isOpened &&
|
||||
children && (
|
||||
<Section className="woocommerce-dashboard__agenda-group-content">{ children }</Section>
|
||||
) }
|
||||
</div>
|
||||
);
|
||||
/* eslint-enable jsx-a11y/click-events-have-key-events */
|
||||
/* eslint-enable jsx-a11y/no-static-element-interactions */
|
||||
}
|
||||
}
|
||||
|
||||
AgendaHeader.propTypes = {
|
||||
title: PropTypes.string.isRequired,
|
||||
className: PropTypes.string,
|
||||
count: PropTypes.number,
|
||||
initialOpen: PropTypes.bool,
|
||||
children: PropTypes.node,
|
||||
href: PropTypes.string,
|
||||
};
|
||||
|
||||
export default AgendaHeader;
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
/** @format */
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __, _n } from '@wordpress/i18n';
|
||||
import { Component } from '@wordpress/element';
|
||||
import { noop } from 'lodash';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import AgendaHeader from './header';
|
||||
import AgendaItem from './item';
|
||||
import Card from 'components/card';
|
||||
import { getAdminLink } from 'lib/nav-utils';
|
||||
|
||||
import './style.scss';
|
||||
|
||||
// TODO Hook up to API Data once agenda API is available
|
||||
class Agenda extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Card
|
||||
title={ __( 'Your agenda', 'wc-admin' ) }
|
||||
className="woocommerce-dashboard__agenda-card"
|
||||
>
|
||||
<AgendaHeader
|
||||
count={ 2 }
|
||||
title={ _n(
|
||||
'Order needs to be fulfilled',
|
||||
'Orders need to be fulfilled',
|
||||
2,
|
||||
'wc-admin'
|
||||
) }
|
||||
>
|
||||
<AgendaItem onClick={ noop } actionLabel={ __( 'Fulfill', 'wc-admin' ) }>
|
||||
Order #99
|
||||
</AgendaItem>
|
||||
<AgendaItem
|
||||
href={ getAdminLink( '/edit.php?post_type=shop_order' ) }
|
||||
actionLabel={ __( 'Fulfill', 'wc-admin' ) }
|
||||
>
|
||||
Order #101
|
||||
</AgendaItem>
|
||||
</AgendaHeader>
|
||||
<AgendaHeader
|
||||
count={ 1 }
|
||||
title={ _n( 'Order awaiting payment', 'Orders awaiting payment', 1, 'wc-admin' ) }
|
||||
href={ getAdminLink( '/edit.php?post_status=wc-pending&post_type=shop_order' ) }
|
||||
/>
|
||||
<AgendaHeader
|
||||
title={ __( 'Extensions', 'wc-admin' ) }
|
||||
href={ getAdminLink( '/admin.php?page=wc-addons' ) }
|
||||
/>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Agenda;
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
/** @format */
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { Button } from '@wordpress/components';
|
||||
import classnames from 'classnames';
|
||||
import { Component } from '@wordpress/element';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
class AgendaItem extends Component {
|
||||
render() {
|
||||
const { children, className, onClick, href, actionLabel } = this.props;
|
||||
const classes = classnames( 'woocommerce-dashboard__agenda-item-wrapper', className );
|
||||
|
||||
const action = href !== undefined ? { href } : { onClick };
|
||||
|
||||
return (
|
||||
<div className={ classes }>
|
||||
{ children && (
|
||||
<div className="woocommerce-dashboard__agenda-item-content"> { children } </div>
|
||||
) }
|
||||
<Button
|
||||
className="woocommerce-dashboard__agenda-item-action-button button-secondary"
|
||||
{ ...action }
|
||||
>
|
||||
{ actionLabel }
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
AgendaItem.propTypes = {
|
||||
onClick: PropTypes.func,
|
||||
href: PropTypes.string,
|
||||
actionLabel: PropTypes.string.isRequired,
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
export default AgendaItem;
|
||||
|
|
@ -1,101 +0,0 @@
|
|||
/** @format */
|
||||
|
||||
.woocommerce-dashboard__agenda-card .woocommerce-card__body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.woocommerce-dashboard__agenda-group-wrapper {
|
||||
background: #f9f9f9;
|
||||
font-size: 13px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
|
||||
.woocommerce-dashboard__agenda-group-label {
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
|
||||
.woocommerce-count {
|
||||
border-color: $white;
|
||||
background: $white;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-dashboard__agenda-group-content {
|
||||
background: $white;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.woocommerce-dashboard__agenda-group-title {
|
||||
height: 60px;
|
||||
padding: 20px 0px 0px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
&.is-accordion {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.woocommerce-dashboard__agenda-group-label {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.woocommerce-dashboard__agenda-group-arrow,
|
||||
.components-button {
|
||||
position: relative;
|
||||
padding: 16px;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.woocommerce-dashboard__agenda-group-arrow .dashicon,
|
||||
.components-icon-button {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.components-button:not(:disabled):focus,
|
||||
.components-button:not(:disabled):hover {
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.components-button:not(:disabled):focus {
|
||||
.dashicon {
|
||||
box-shadow: inset 0 0 0 1px $gray-darken-10, inset 0 0 0 2px $white;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-link {
|
||||
a {
|
||||
color: #444;
|
||||
}
|
||||
}
|
||||
|
||||
.dashicon {
|
||||
position: absolute;
|
||||
top: -18px;
|
||||
right: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-dashboard__agenda-item-wrapper {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-dashboard__agenda-item-content {
|
||||
max-width: 75%;
|
||||
}
|
||||
Loading…
Reference in New Issue