diff --git a/plugins/woocommerce-admin/client/components/gravatar/README.md b/plugins/woocommerce-admin/client/components/gravatar/README.md index 72ba6ea0e1f..6f85acbe507 100644 --- a/plugins/woocommerce-admin/client/components/gravatar/README.md +++ b/plugins/woocommerce-admin/client/components/gravatar/README.md @@ -6,7 +6,7 @@ Use `Gravatar` to display a user's Gravatar. ## How to use: ```jsx -import { Gravatar } from 'components/gravatar'; +import Gravatar from 'components/gravatar'; render: function() { return ( diff --git a/plugins/woocommerce-admin/client/components/link/README.md b/plugins/woocommerce-admin/client/components/link/README.md new file mode 100644 index 00000000000..f7391fc4e3e --- /dev/null +++ b/plugins/woocommerce-admin/client/components/link/README.md @@ -0,0 +1,26 @@ +Link +============ + +Use `Link` to create a link to another resource. It accepts a type to automatically create wp-admin links, wc-admin links, and external links. + +## How to use: + +```jsx +import Link from 'components/link'; + +render: function() { + return ( + + Coupons + + ); +} +``` + +## Props + +* `href` (required): The resource to link to. +* `type` (required): Type of link. For wp-admin and wc-admin, the correct prefix is appended. Accepts: wc-admin, wp-admin, external. \ No newline at end of file diff --git a/plugins/woocommerce-admin/client/components/link/index.js b/plugins/woocommerce-admin/client/components/link/index.js index 1c11ea2d366..033e4202702 100644 --- a/plugins/woocommerce-admin/client/components/link/index.js +++ b/plugins/woocommerce-admin/client/components/link/index.js @@ -13,16 +13,24 @@ import { getAdminLink } from 'lib/nav-utils'; class Link extends Component { render() { - const { children, to, wpAdmin, ...props } = this.props; - if ( this.context.router && ! wpAdmin ) { + const { children, href, type, ...props } = this.props; + if ( this.context.router && 'wc-admin' === type ) { return ( - + { children } ); } - const path = wpAdmin ? getAdminLink( to ) : getAdminLink( 'admin.php?page=wcadmin#' + to ); + let path; + if ( 'wp-admin' === type ) { + path = getAdminLink( href ); + } else if ( 'external' === type ) { + path = href; + } else { + path = getAdminLink( 'admin.php?page=wc-admin#' + href ); + } + return ( { children } @@ -32,12 +40,12 @@ class Link extends Component { } Link.propTypes = { - to: PropTypes.string, - wpAdmin: PropTypes.bool, + href: PropTypes.string.isRequired, + type: PropTypes.oneOf( [ 'wp-admin', 'wc-admin', 'external' ] ).isRequired, }; Link.defaultProps = { - wpAdmin: false, + type: 'wc-admin', }; Link.contextTypes = { diff --git a/plugins/woocommerce-admin/client/layout/activity-panel/activity-header/README.md b/plugins/woocommerce-admin/client/layout/activity-panel/activity-header/README.md index ababde6e8aa..f7096077496 100644 --- a/plugins/woocommerce-admin/client/layout/activity-panel/activity-header/README.md +++ b/plugins/woocommerce-admin/client/layout/activity-panel/activity-header/README.md @@ -6,7 +6,7 @@ A component designed for use in the activity panel. It returns a title and can o ## How to use: ```jsx -import ActivityHeader from 'components/activity-header'; +import ActivityHeader from 'layout/activity-panel/activity-header'; render: function() { return ( diff --git a/plugins/woocommerce-admin/client/layout/activity-panel/activity-outbound-link/README.md b/plugins/woocommerce-admin/client/layout/activity-panel/activity-outbound-link/README.md new file mode 100644 index 00000000000..03941421f91 --- /dev/null +++ b/plugins/woocommerce-admin/client/layout/activity-panel/activity-outbound-link/README.md @@ -0,0 +1,26 @@ +ActivityOutboundLink +============ + +`ActivityOutboundLink` creates a styled link for use in the Activity Panel. + +## How to use: + +```jsx +import ActivityOutboundLink from 'layout/activity-panel/activity-outbound-link'; + +render: function() { + return ( + + Coupons + + ); +} +``` + +## Props + +* `href` (required): The resource to link to. +* `type` (required): Type of link. For wp-admin and wc-admin, the correct prefix is appended. Accepts: wc-admin, wp-admin, external. \ No newline at end of file diff --git a/plugins/woocommerce-admin/client/layout/activity-panel/activity-outbound-link/index.js b/plugins/woocommerce-admin/client/layout/activity-panel/activity-outbound-link/index.js new file mode 100644 index 00000000000..f8e63a53471 --- /dev/null +++ b/plugins/woocommerce-admin/client/layout/activity-panel/activity-outbound-link/index.js @@ -0,0 +1,37 @@ +/** @format */ + +/** + * External dependencies + */ +import PropTypes from 'prop-types'; +import classnames from 'classnames'; +import Gridicon from 'gridicons'; + +/** + * Internal dependencies + */ +import './style.scss'; +import Link from 'components/link'; + +const ActivityOutboundLink = props => { + const { href, type, className, children, ...restOfProps } = props; + const classes = classnames( 'woocommerce-layout__activity-panel-outbound-link', className ); + return ( + + { children } + + + ); +}; + +ActivityOutboundLink.propTypes = { + href: PropTypes.string.isRequired, + type: PropTypes.oneOf( [ 'wp-admin', 'wc-admin', 'external' ] ).isRequired, + className: PropTypes.string, +}; + +ActivityOutboundLink.defaultProps = { + type: 'wp-admin', +}; + +export default ActivityOutboundLink; diff --git a/plugins/woocommerce-admin/client/layout/activity-panel/activity-outbound-link/style.scss b/plugins/woocommerce-admin/client/layout/activity-panel/activity-outbound-link/style.scss new file mode 100644 index 00000000000..5840f42a63b --- /dev/null +++ b/plugins/woocommerce-admin/client/layout/activity-panel/activity-outbound-link/style.scss @@ -0,0 +1,52 @@ +/** @format */ + +.woocommerce-layout__activity-panel-outbound-link { + display: flex; + justify-content: space-between; + align-items: center; + height: 50px; + background: $core-grey-light-200; + border-bottom: 1px solid $core-grey-light-400; + padding: $gap $gutter; + font-size: 13px; + font-weight: 500; + line-height: 18px; + margin: 0; + color: $woocommerce; + text-decoration: none; + + .gridicon { + display: none; + } + + &:hover { + background: $white; + color: $woocommerce; + } + + &:active { + background: $core-grey-light-100; + color: $woocommerce-darker; + } + + &:focus { + color: $woocommerce; + background: $core-grey-light-200; + box-shadow: inset 0 0 0 1px $box-shadow-blue, inset 0 0 0 2px #fff; + } + + &:hover, + &:focus { + .gridicon { + display: initial; + color: $woocommerce; + } + } + + &:active { + .gridicon { + display: initial; + color: $woocommerce-darker; + } + } +} diff --git a/plugins/woocommerce-admin/client/layout/activity-panel/panels/orders.js b/plugins/woocommerce-admin/client/layout/activity-panel/panels/orders.js index de71eab2672..26e358ae3c3 100644 --- a/plugins/woocommerce-admin/client/layout/activity-panel/panels/orders.js +++ b/plugins/woocommerce-admin/client/layout/activity-panel/panels/orders.js @@ -13,6 +13,7 @@ import { noop } from 'lodash'; */ import ActivityCard from '../activity-card'; import ActivityHeader from '../activity-header'; +import ActivityOutboundLink from '../activity-outbound-link'; import { EllipsisMenu, MenuTitle, MenuItem } from 'components/ellipsis-menu'; import { formatCurrency, getCurrencyFormatDecimal } from 'lib/currency'; import { getOrderRefundTotal } from 'lib/order-values'; @@ -47,18 +48,19 @@ function OrdersPanel( { orders } ) { { isLoading ? (

Loading

) : ( - data.map( ( order, i ) => { - // We want the billing address, but shipping can be used as a fallback. - const address = { ...order.shipping, ...order.billing }; - const name = `${ address.first_name } ${ address.last_name }`; - const productsCount = order.line_items.reduce( - ( total, line ) => total + line.quantity, - 0 - ); + + { data.map( ( order, i ) => { + // We want the billing address, but shipping can be used as a fallback. + const address = { ...order.shipping, ...order.billing }; + const name = `${ address.first_name } ${ address.last_name }`; + const productsCount = order.line_items.reduce( + ( total, line ) => total + line.quantity, + 0 + ); - const total = order.total; - const refundValue = getOrderRefundTotal( order ); - const remainingTotal = getCurrencyFormatDecimal( order.total ) + refundValue; + const total = order.total; + const refundValue = getOrderRefundTotal( order ); + const remainingTotal = getCurrencyFormatDecimal( order.total ) + refundValue; return ( - ); - } ) + ); + } ) } + + { __( 'Manage all orders' ) } + + ) } diff --git a/plugins/woocommerce-admin/client/layout/activity-panel/style.scss b/plugins/woocommerce-admin/client/layout/activity-panel/style.scss index f62002bae25..410cda142e8 100644 --- a/plugins/woocommerce-admin/client/layout/activity-panel/style.scss +++ b/plugins/woocommerce-admin/client/layout/activity-panel/style.scss @@ -186,8 +186,14 @@ overflow-x: hidden; overflow-y: scroll; + // Extra padding is needed at the bottom of the wrapper because of our positioning, height, and overflow rules. Otherwise, some content can get cut off. + padding-bottom: $gap-small * 6; + @include breakpoint( '782px-1100px' ) { + padding-bottom: $gap-small; + } @include breakpoint( '>1100px' ) { top: 112px; + padding-bottom: $gap * 2; } @include breakpoint( '<782px' ) { diff --git a/plugins/woocommerce-admin/client/layout/header/index.js b/plugins/woocommerce-admin/client/layout/header/index.js index 79ee08fd2b6..3067da1076b 100644 --- a/plugins/woocommerce-admin/client/layout/header/index.js +++ b/plugins/woocommerce-admin/client/layout/header/index.js @@ -81,11 +81,11 @@ class Header extends Component {

- WooCommerce + WooCommerce { _sections.map( ( section, i ) => { const sectionPiece = isArray( section ) ? ( - + { section[ 1 ] } ) : ( diff --git a/plugins/woocommerce-admin/client/stylesheets/_colors.scss b/plugins/woocommerce-admin/client/stylesheets/_colors.scss index 58adf555885..649784cdacb 100644 --- a/plugins/woocommerce-admin/client/stylesheets/_colors.scss +++ b/plugins/woocommerce-admin/client/stylesheets/_colors.scss @@ -41,6 +41,8 @@ $valid-green: #4ab866; $notice-yellow: #ffb900; $error-red: #d94f4f; $woocommerce: #95588a; +$woocommerce-darker: #5b3453; +$box-shadow-blue: #5b9dd9; $core-orange: #ca4a1f; $button: #f0f2f4;