Merge branch 'master' into release/0.18.0
This commit is contained in:
Paul Sealock
GitHub
commit
dfc428e176
|
|
@ -10,9 +10,12 @@ import { applyFilters } from '@wordpress/hooks';
|
|||
*/
|
||||
import { getCategoryLabels } from 'lib/async-requests';
|
||||
|
||||
const CATEGORY_REPORT_CHART_FILTER = 'woocommerce_admin_category_report_chart_filter';
|
||||
const CATEGORY_REPORT_CHARTS_FILTER = 'woocommerce_admin_category_report_charts';
|
||||
const CATEGORY_REPORT_FILTERS_FILTER = 'woocommerce_admin_category_report_filters';
|
||||
const CATEGORY_REPORT_ADVANCED_FILTERS_FILTER =
|
||||
'woocommerce_admin_category_report_advanced_filters';
|
||||
|
||||
export const charts = applyFilters( CATEGORY_REPORT_CHART_FILTER, [
|
||||
export const charts = applyFilters( CATEGORY_REPORT_CHARTS_FILTER, [
|
||||
{
|
||||
key: 'items_sold',
|
||||
label: __( 'Items Sold', 'woocommerce-admin' ),
|
||||
|
|
@ -36,7 +39,7 @@ export const charts = applyFilters( CATEGORY_REPORT_CHART_FILTER, [
|
|||
},
|
||||
] );
|
||||
|
||||
export const filters = [
|
||||
export const filters = applyFilters( CATEGORY_REPORT_FILTERS_FILTER, [
|
||||
{
|
||||
label: __( 'Show', 'woocommerce-admin' ),
|
||||
staticParams: [],
|
||||
|
|
@ -84,4 +87,6 @@ export const filters = [
|
|||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
] );
|
||||
|
||||
export const advancedFilters = applyFilters( CATEGORY_REPORT_ADVANCED_FILTERS_FILTER, {} );
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import { __ } from '@wordpress/i18n';
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { charts, filters } from './config';
|
||||
import { advancedFilters, charts, filters } from './config';
|
||||
import CategoriesReportTable from './table';
|
||||
import getSelectedChart from 'lib/get-selected-chart';
|
||||
import ReportChart from 'analytics/components/report-chart';
|
||||
|
|
@ -52,7 +52,13 @@ export default class CategoriesReport extends Component {
|
|||
|
||||
return (
|
||||
<Fragment>
|
||||
<ReportFilters query={ query } path={ path } filters={ filters } report="categories" />
|
||||
<ReportFilters
|
||||
query={ query }
|
||||
path={ path }
|
||||
filters={ filters }
|
||||
advancedFilters={ advancedFilters }
|
||||
report="categories"
|
||||
/>
|
||||
<ReportSummary
|
||||
charts={ charts }
|
||||
endpoint="products"
|
||||
|
|
@ -61,10 +67,12 @@ export default class CategoriesReport extends Component {
|
|||
query={ chartQuery }
|
||||
selectedChart={ getSelectedChart( query.chart, charts ) }
|
||||
filters={ filters }
|
||||
advancedFilters={ advancedFilters }
|
||||
report="categories"
|
||||
/>
|
||||
<ReportChart
|
||||
filters={ filters }
|
||||
advancedFilters={ advancedFilters }
|
||||
mode={ mode }
|
||||
endpoint="products"
|
||||
limitProperties={ isSingleCategoryView ? [ 'products', 'categories' ] : [ 'categories' ] }
|
||||
|
|
@ -81,12 +89,14 @@ export default class CategoriesReport extends Component {
|
|||
baseSearchQuery={ { filter: 'single_category' } }
|
||||
hideCompare={ isSingleCategoryView }
|
||||
filters={ filters }
|
||||
advancedFilters={ advancedFilters }
|
||||
/>
|
||||
) : (
|
||||
<CategoriesReportTable
|
||||
isRequesting={ isRequesting }
|
||||
query={ query }
|
||||
filters={ filters }
|
||||
advancedFilters={ advancedFilters }
|
||||
/>
|
||||
) }
|
||||
</Fragment>
|
||||
|
|
|
|||
|
|
@ -134,7 +134,7 @@ class CategoriesReportTable extends Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
const { isRequesting, query, filters } = this.props;
|
||||
const { advancedFilters, filters, isRequesting, query } = this.props;
|
||||
|
||||
const labels = {
|
||||
helpText: __( 'Check at least two categories below to compare', 'woocommerce-admin' ),
|
||||
|
|
@ -161,6 +161,7 @@ class CategoriesReportTable extends Component {
|
|||
title={ __( 'Categories', 'woocommerce-admin' ) }
|
||||
columnPrefsKey="categories_report_columns"
|
||||
filters={ filters }
|
||||
advancedFilters={ advancedFilters }
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,9 +10,11 @@ import { applyFilters } from '@wordpress/hooks';
|
|||
*/
|
||||
import { getCouponLabels } from 'lib/async-requests';
|
||||
|
||||
const COUPON_REPORT_CHART_FILTER = 'woocommerce_admin_coupon_report_chart_filter';
|
||||
const COUPON_REPORT_CHARTS_FILTER = 'woocommerce_admin_coupon_report_charts';
|
||||
const COUPON_REPORT_FILTERS_FILTER = 'woocommerce_admin_coupon_report_filters';
|
||||
const COUPON_REPORT_ADVANCED_FILTERS_FILTER = 'woocommerce_admin_coupon_report_advanced_filters';
|
||||
|
||||
export const charts = applyFilters( COUPON_REPORT_CHART_FILTER, [
|
||||
export const charts = applyFilters( COUPON_REPORT_CHARTS_FILTER, [
|
||||
{
|
||||
key: 'orders_count',
|
||||
label: __( 'Discounted Orders', 'woocommerce-admin' ),
|
||||
|
|
@ -29,7 +31,7 @@ export const charts = applyFilters( COUPON_REPORT_CHART_FILTER, [
|
|||
},
|
||||
] );
|
||||
|
||||
export const filters = [
|
||||
export const filters = applyFilters( COUPON_REPORT_FILTERS_FILTER, [
|
||||
{
|
||||
label: __( 'Show', 'woocommerce-admin' ),
|
||||
staticParams: [],
|
||||
|
|
@ -75,4 +77,6 @@ export const filters = [
|
|||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
] );
|
||||
|
||||
export const advancedFilters = applyFilters( COUPON_REPORT_ADVANCED_FILTERS_FILTER, {} );
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import { __ } from '@wordpress/i18n';
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { charts, filters } from './config';
|
||||
import { advancedFilters, charts, filters } from './config';
|
||||
import CouponsReportTable from './table';
|
||||
import getSelectedChart from 'lib/get-selected-chart';
|
||||
import ReportChart from 'analytics/components/report-chart';
|
||||
|
|
@ -45,7 +45,13 @@ export default class CouponsReport extends Component {
|
|||
|
||||
return (
|
||||
<Fragment>
|
||||
<ReportFilters query={ query } path={ path } filters={ filters } report="coupons" />
|
||||
<ReportFilters
|
||||
query={ query }
|
||||
path={ path }
|
||||
filters={ filters }
|
||||
advancedFilters={ advancedFilters }
|
||||
report="coupons"
|
||||
/>
|
||||
<ReportSummary
|
||||
charts={ charts }
|
||||
endpoint="coupons"
|
||||
|
|
@ -53,9 +59,11 @@ export default class CouponsReport extends Component {
|
|||
query={ chartQuery }
|
||||
selectedChart={ getSelectedChart( query.chart, charts ) }
|
||||
filters={ filters }
|
||||
advancedFilters={ advancedFilters }
|
||||
/>
|
||||
<ReportChart
|
||||
filters={ filters }
|
||||
advancedFilters={ advancedFilters }
|
||||
mode={ mode }
|
||||
endpoint="coupons"
|
||||
path={ path }
|
||||
|
|
@ -64,7 +72,12 @@ export default class CouponsReport extends Component {
|
|||
itemsLabel={ itemsLabel }
|
||||
selectedChart={ getSelectedChart( query.chart, charts ) }
|
||||
/>
|
||||
<CouponsReportTable isRequesting={ isRequesting } query={ query } filters={ filters } />
|
||||
<CouponsReportTable
|
||||
isRequesting={ isRequesting }
|
||||
query={ query }
|
||||
filters={ filters }
|
||||
advancedFilters={ advancedFilters }
|
||||
/>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -157,7 +157,7 @@ export default class CouponsReportTable extends Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
const { isRequesting, query, filters } = this.props;
|
||||
const { advancedFilters, filters, isRequesting, query } = this.props;
|
||||
|
||||
return (
|
||||
<ReportTable
|
||||
|
|
@ -178,6 +178,7 @@ export default class CouponsReportTable extends Component {
|
|||
title={ __( 'Coupons', 'woocommerce-admin' ) }
|
||||
columnPrefsKey="coupons_report_columns"
|
||||
filters={ filters }
|
||||
advancedFilters={ advancedFilters }
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
*/
|
||||
import { __, _x } from '@wordpress/i18n';
|
||||
import { decodeEntities } from '@wordpress/html-entities';
|
||||
import { applyFilters } from '@wordpress/hooks';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
|
|
@ -11,7 +12,11 @@ import { decodeEntities } from '@wordpress/html-entities';
|
|||
import { getCustomerLabels, getRequestByIdString } from 'lib/async-requests';
|
||||
import { NAMESPACE } from 'wc-api/constants';
|
||||
|
||||
export const filters = [
|
||||
const CUSTOMERS_REPORT_FILTERS_FILTER = 'woocommerce_admin_customers_report_filters';
|
||||
const CUSTOMERS_REPORT_ADVANCED_FILTERS_FILTER =
|
||||
'woocommerce_admin_customers_report_advanced_filters';
|
||||
|
||||
export const filters = applyFilters( CUSTOMERS_REPORT_FILTERS_FILTER, [
|
||||
{
|
||||
label: __( 'Show', 'woocommerce-admin' ),
|
||||
staticParams: [],
|
||||
|
|
@ -44,10 +49,10 @@ export const filters = [
|
|||
{ label: __( 'Advanced Filters', 'woocommerce-admin' ), value: 'advanced' },
|
||||
],
|
||||
},
|
||||
];
|
||||
] );
|
||||
|
||||
/*eslint-disable max-len*/
|
||||
export const advancedFilters = {
|
||||
export const advancedFilters = applyFilters( CUSTOMERS_REPORT_ADVANCED_FILTERS_FILTER, {
|
||||
title: _x(
|
||||
'Customers Match {{select /}} Filters',
|
||||
'A sentence describing filters for Customers. See screen shot for context: https://cloudup.com/cCsm3GeXJbE',
|
||||
|
|
@ -334,5 +339,5 @@ export const advancedFilters = {
|
|||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
} );
|
||||
/*eslint-enable max-len*/
|
||||
|
|
|
|||
|
|
@ -10,9 +10,12 @@ import { applyFilters } from '@wordpress/hooks';
|
|||
*/
|
||||
import { getCustomerLabels, getProductLabels } from 'lib/async-requests';
|
||||
|
||||
const DOWLOADS_REPORT_CHART_FILTER = 'woocommerce_admin_downloads_report_chart_filter';
|
||||
const DOWLOADS_REPORT_CHARTS_FILTER = 'woocommerce_admin_downloads_report_charts';
|
||||
const DOWLOADS_REPORT_FILTERS_FILTER = 'woocommerce_admin_downloads_report_filters';
|
||||
const DOWLOADS_REPORT_ADVANCED_FILTERS_FILTER =
|
||||
'woocommerce_admin_downloads_report_advanced_filters';
|
||||
|
||||
export const charts = applyFilters( DOWLOADS_REPORT_CHART_FILTER, [
|
||||
export const charts = applyFilters( DOWLOADS_REPORT_CHARTS_FILTER, [
|
||||
{
|
||||
key: 'download_count',
|
||||
label: __( 'Downloads', 'woocommerce-admin' ),
|
||||
|
|
@ -20,7 +23,7 @@ export const charts = applyFilters( DOWLOADS_REPORT_CHART_FILTER, [
|
|||
},
|
||||
] );
|
||||
|
||||
export const filters = [
|
||||
export const filters = applyFilters( DOWLOADS_REPORT_FILTERS_FILTER, [
|
||||
{
|
||||
label: __( 'Show', 'woocommerce-admin' ),
|
||||
staticParams: [],
|
||||
|
|
@ -31,10 +34,10 @@ export const filters = [
|
|||
{ label: __( 'Advanced Filters', 'woocommerce-admin' ), value: 'advanced' },
|
||||
],
|
||||
},
|
||||
];
|
||||
] );
|
||||
|
||||
/*eslint-disable max-len*/
|
||||
export const advancedFilters = {
|
||||
export const advancedFilters = applyFilters( DOWLOADS_REPORT_ADVANCED_FILTERS_FILTER, {
|
||||
title: _x(
|
||||
'Downloads Match {{select /}} Filters',
|
||||
'A sentence describing filters for Downloads. See screen shot for context: https://cloudup.com/ccxhyH2mEDg',
|
||||
|
|
@ -168,5 +171,5 @@ export const advancedFilters = {
|
|||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
} );
|
||||
/*eslint-enable max-len*/
|
||||
|
|
|
|||
|
|
@ -12,9 +12,11 @@ import { getCouponLabels, getProductLabels } from 'lib/async-requests';
|
|||
|
||||
const { orderStatuses } = wcSettings;
|
||||
|
||||
const ORDERS_REPORT_CHART_FILTER = 'woocommerce_admin_orders_report_chart_filter';
|
||||
const ORDERS_REPORT_CHARTS_FILTER = 'woocommerce_admin_orders_report_charts';
|
||||
const ORDERS_REPORT_FILTERS_FILTER = 'woocommerce_admin_orders_report_filters';
|
||||
const ORDERS_REPORT_ADVANCED_FILTERS_FILTER = 'woocommerce_admin_orders_report_advanced_filters';
|
||||
|
||||
export const charts = applyFilters( ORDERS_REPORT_CHART_FILTER, [
|
||||
export const charts = applyFilters( ORDERS_REPORT_CHARTS_FILTER, [
|
||||
{
|
||||
key: 'orders_count',
|
||||
label: __( 'Orders Count', 'woocommerce-admin' ),
|
||||
|
|
@ -41,7 +43,7 @@ export const charts = applyFilters( ORDERS_REPORT_CHART_FILTER, [
|
|||
},
|
||||
] );
|
||||
|
||||
export const filters = [
|
||||
export const filters = applyFilters( ORDERS_REPORT_FILTERS_FILTER, [
|
||||
{
|
||||
label: __( 'Show', 'woocommerce-admin' ),
|
||||
staticParams: [ 'chart' ],
|
||||
|
|
@ -52,10 +54,10 @@ export const filters = [
|
|||
{ label: __( 'Advanced Filters', 'woocommerce-admin' ), value: 'advanced' },
|
||||
],
|
||||
},
|
||||
];
|
||||
] );
|
||||
|
||||
/*eslint-disable max-len*/
|
||||
export const advancedFilters = {
|
||||
export const advancedFilters = applyFilters( ORDERS_REPORT_ADVANCED_FILTERS_FILTER, {
|
||||
title: _x(
|
||||
'Orders Match {{select /}} Filters',
|
||||
'A sentence describing filters for Orders. See screen shot for context: https://cloudup.com/cSsUY9VeCVJ',
|
||||
|
|
@ -185,5 +187,5 @@ export const advancedFilters = {
|
|||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
} );
|
||||
/*eslint-enable max-len*/
|
||||
|
|
|
|||
|
|
@ -10,9 +10,12 @@ import { applyFilters } from '@wordpress/hooks';
|
|||
*/
|
||||
import { getProductLabels, getVariationLabels } from 'lib/async-requests';
|
||||
|
||||
const PRODUCTS_REPORT_CHART_FILTER = 'woocommerce_admin_products_report_chart_filter';
|
||||
const PRODUCTS_REPORT_CHARTS_FILTER = 'woocommerce_admin_products_report_charts';
|
||||
const PRODUCTS_REPORT_FILTERS_FILTER = 'woocommerce_admin_products_report_filters';
|
||||
const PRODUCTS_REPORT_ADVANCED_FILTERS_FILTER =
|
||||
'woocommerce_admin_products_report_advanced_filters';
|
||||
|
||||
export const charts = applyFilters( PRODUCTS_REPORT_CHART_FILTER, [
|
||||
export const charts = applyFilters( PRODUCTS_REPORT_CHARTS_FILTER, [
|
||||
{
|
||||
key: 'items_sold',
|
||||
label: __( 'Items Sold', 'woocommerce-admin' ),
|
||||
|
|
@ -114,4 +117,9 @@ const variationsConfig = {
|
|||
],
|
||||
};
|
||||
|
||||
export const filters = [ filterConfig, variationsConfig ];
|
||||
export const filters = applyFilters( PRODUCTS_REPORT_FILTERS_FILTER, [
|
||||
filterConfig,
|
||||
variationsConfig,
|
||||
] );
|
||||
|
||||
export const advancedFilters = applyFilters( PRODUCTS_REPORT_ADVANCED_FILTERS_FILTER, {} );
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { charts, filters } from './config';
|
||||
import { advancedFilters, charts, filters } from './config';
|
||||
import getSelectedChart from 'lib/get-selected-chart';
|
||||
import ProductsReportTable from './table';
|
||||
import ReportChart from 'analytics/components/report-chart';
|
||||
|
|
@ -64,7 +64,13 @@ class ProductsReport extends Component {
|
|||
|
||||
return (
|
||||
<Fragment>
|
||||
<ReportFilters query={ query } path={ path } filters={ filters } report="products" />
|
||||
<ReportFilters
|
||||
query={ query }
|
||||
path={ path }
|
||||
filters={ filters }
|
||||
advancedFilters={ advancedFilters }
|
||||
report="products"
|
||||
/>
|
||||
<ReportSummary
|
||||
mode={ mode }
|
||||
charts={ charts }
|
||||
|
|
@ -73,10 +79,12 @@ class ProductsReport extends Component {
|
|||
query={ chartQuery }
|
||||
selectedChart={ getSelectedChart( query.chart, charts ) }
|
||||
filters={ filters }
|
||||
advancedFilters={ advancedFilters }
|
||||
/>
|
||||
<ReportChart
|
||||
mode={ mode }
|
||||
filters={ filters }
|
||||
advancedFilters={ advancedFilters }
|
||||
endpoint="products"
|
||||
isRequesting={ isRequesting }
|
||||
itemsLabel={ itemsLabel }
|
||||
|
|
@ -90,9 +98,15 @@ class ProductsReport extends Component {
|
|||
isRequesting={ isRequesting }
|
||||
query={ query }
|
||||
filters={ filters }
|
||||
advancedFilters={ advancedFilters }
|
||||
/>
|
||||
) : (
|
||||
<ProductsReportTable isRequesting={ isRequesting } query={ query } filters={ filters } />
|
||||
<ProductsReportTable
|
||||
isRequesting={ isRequesting }
|
||||
query={ query }
|
||||
filters={ filters }
|
||||
advancedFilters={ advancedFilters }
|
||||
/>
|
||||
) }
|
||||
</Fragment>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -170,7 +170,7 @@ export default class VariationsReportTable extends Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
const { baseSearchQuery, isRequesting, query, filters } = this.props;
|
||||
const { advancedFilters, baseSearchQuery, filters, isRequesting, query } = this.props;
|
||||
|
||||
const labels = {
|
||||
helpText: __( 'Check at least two variations below to compare', 'woocommerce-admin' ),
|
||||
|
|
@ -201,6 +201,7 @@ export default class VariationsReportTable extends Component {
|
|||
title={ __( 'Variations', 'woocommerce-admin' ) }
|
||||
columnPrefsKey="variations_report_columns"
|
||||
filters={ filters }
|
||||
advancedFilters={ advancedFilters }
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -235,7 +235,14 @@ class ProductsReportTable extends Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
const { query, isRequesting, baseSearchQuery, hideCompare, filters } = this.props;
|
||||
const {
|
||||
advancedFilters,
|
||||
baseSearchQuery,
|
||||
filters,
|
||||
hideCompare,
|
||||
isRequesting,
|
||||
query,
|
||||
} = this.props;
|
||||
|
||||
const labels = {
|
||||
helpText: __( 'Check at least two products below to compare', 'woocommerce-admin' ),
|
||||
|
|
@ -264,6 +271,7 @@ class ProductsReportTable extends Component {
|
|||
title={ __( 'Products', 'woocommerce-admin' ) }
|
||||
columnPrefsKey="products_report_columns"
|
||||
filters={ filters }
|
||||
advancedFilters={ advancedFilters }
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,9 +5,11 @@
|
|||
import { __ } from '@wordpress/i18n';
|
||||
import { applyFilters } from '@wordpress/hooks';
|
||||
|
||||
const REVENUE_REPORT_CHART_FILTER = 'woocommerce_admin_revenue_report_chart_filter';
|
||||
const REVENUE_REPORT_CHARTS_FILTER = 'woocommerce_admin_revenue_report_charts';
|
||||
const REVENUE_REPORT_FILTERS_FILTER = 'woocommerce_admin_revenue_report_filters';
|
||||
const REVENUE_REPORT_ADVANCED_FILTERS_FILTER = 'woocommerce_admin_revenue_report_advanced_filters';
|
||||
|
||||
export const charts = applyFilters( REVENUE_REPORT_CHART_FILTER, [
|
||||
export const charts = applyFilters( REVENUE_REPORT_CHARTS_FILTER, [
|
||||
{
|
||||
key: 'gross_revenue',
|
||||
label: __( 'Gross Revenue', 'woocommerce-admin' ),
|
||||
|
|
@ -49,3 +51,6 @@ export const charts = applyFilters( REVENUE_REPORT_CHART_FILTER, [
|
|||
type: 'currency',
|
||||
},
|
||||
] );
|
||||
|
||||
export const filters = applyFilters( REVENUE_REPORT_FILTERS_FILTER, [] );
|
||||
export const advancedFilters = applyFilters( REVENUE_REPORT_ADVANCED_FILTERS_FILTER, {} );
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { charts } from './config';
|
||||
import { advancedFilters, charts, filters } from './config';
|
||||
import getSelectedChart from 'lib/get-selected-chart';
|
||||
import ReportChart from 'analytics/components/report-chart';
|
||||
import ReportSummary from 'analytics/components/report-summary';
|
||||
|
|
@ -21,20 +21,34 @@ export default class RevenueReport extends Component {
|
|||
|
||||
return (
|
||||
<Fragment>
|
||||
<ReportFilters query={ query } path={ path } report="revenue" />
|
||||
<ReportFilters
|
||||
query={ query }
|
||||
path={ path }
|
||||
report="revenue"
|
||||
filters={ filters }
|
||||
advancedFilters={ advancedFilters }
|
||||
/>
|
||||
<ReportSummary
|
||||
charts={ charts }
|
||||
endpoint="revenue"
|
||||
query={ query }
|
||||
selectedChart={ getSelectedChart( query.chart, charts ) }
|
||||
filters={ filters }
|
||||
advancedFilters={ advancedFilters }
|
||||
/>
|
||||
<ReportChart
|
||||
endpoint="revenue"
|
||||
path={ path }
|
||||
query={ query }
|
||||
selectedChart={ getSelectedChart( query.chart, charts ) }
|
||||
filters={ filters }
|
||||
advancedFilters={ advancedFilters }
|
||||
/>
|
||||
<RevenueReportTable
|
||||
query={ query }
|
||||
filters={ filters }
|
||||
advancedFilters={ advancedFilters }
|
||||
/>
|
||||
<RevenueReportTable query={ query } />
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -200,7 +200,7 @@ class RevenueReportTable extends Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
const { query, tableData } = this.props;
|
||||
const { advancedFilters, filters, tableData, query } = this.props;
|
||||
|
||||
return (
|
||||
<ReportTable
|
||||
|
|
@ -212,6 +212,8 @@ class RevenueReportTable extends Component {
|
|||
tableData={ tableData }
|
||||
title={ __( 'Revenue', 'woocommerce-admin' ) }
|
||||
columnPrefsKey="revenue_report_columns"
|
||||
filters={ filters }
|
||||
advancedFilters={ advancedFilters }
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,10 +3,14 @@
|
|||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { applyFilters } from '@wordpress/hooks';
|
||||
|
||||
const STOCK_REPORT_FILTERS_FILTER = 'woocommerce_admin_stock_report_filters';
|
||||
const STOCK_REPORT_ADVANCED_FILTERS_FILTER = 'woocommerce_admin_stock_report_advanced_filters';
|
||||
|
||||
export const showDatePicker = false;
|
||||
|
||||
export const filters = [
|
||||
export const filters = applyFilters( STOCK_REPORT_FILTERS_FILTER, [
|
||||
{
|
||||
label: __( 'Show', 'woocommerce-admin' ),
|
||||
staticParams: [],
|
||||
|
|
@ -20,4 +24,6 @@ export const filters = [
|
|||
{ label: __( 'On Backorder', 'woocommerce-admin' ), value: 'onbackorder' },
|
||||
],
|
||||
},
|
||||
];
|
||||
] );
|
||||
|
||||
export const advancedFilters = applyFilters( STOCK_REPORT_ADVANCED_FILTERS_FILTER, {} );
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { showDatePicker, filters } from './config';
|
||||
import { advancedFilters, showDatePicker, filters } from './config';
|
||||
import StockReportTable from './table';
|
||||
import ReportFilters from 'analytics/components/report-filters';
|
||||
|
||||
|
|
@ -23,9 +23,10 @@ export default class StockReport extends Component {
|
|||
path={ path }
|
||||
showDatePicker={ showDatePicker }
|
||||
filters={ filters }
|
||||
advancedFilters={ advancedFilters }
|
||||
report="stock"
|
||||
/>
|
||||
<StockReportTable query={ query } filters={ filters } />
|
||||
<StockReportTable query={ query } filters={ filters } advancedFilters={ advancedFilters } />
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -141,7 +141,7 @@ export default class StockReportTable extends Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
const { query, filters } = this.props;
|
||||
const { advancedFilters, filters, query } = this.props;
|
||||
|
||||
return (
|
||||
<ReportTable
|
||||
|
|
@ -157,6 +157,7 @@ export default class StockReportTable extends Component {
|
|||
} }
|
||||
title={ __( 'Stock', 'woocommerce-admin' ) }
|
||||
filters={ filters }
|
||||
advancedFilters={ advancedFilters }
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,9 +12,11 @@ import { getRequestByIdString } from 'lib/async-requests';
|
|||
import { getTaxCode } from './utils';
|
||||
import { NAMESPACE } from 'wc-api/constants';
|
||||
|
||||
const TAXES_REPORT_CHART_FILTER = 'woocommerce_admin_taxes_report_chart_filter';
|
||||
const TAXES_REPORT_CHARTS_FILTER = 'woocommerce_admin_taxes_report_charts';
|
||||
const TAXES_REPORT_FILTERS_FILTER = 'woocommerce_admin_taxes_report_filters';
|
||||
const TAXES_REPORT_ADVANCED_FILTERS_FILTER = 'woocommerce_admin_taxes_report_advanced_filters';
|
||||
|
||||
export const charts = applyFilters( TAXES_REPORT_CHART_FILTER, [
|
||||
export const charts = applyFilters( TAXES_REPORT_CHARTS_FILTER, [
|
||||
{
|
||||
key: 'total_tax',
|
||||
label: __( 'Total Tax', 'woocommerce-admin' ),
|
||||
|
|
@ -45,7 +47,7 @@ export const charts = applyFilters( TAXES_REPORT_CHART_FILTER, [
|
|||
},
|
||||
] );
|
||||
|
||||
export const filters = [
|
||||
export const filters = applyFilters( TAXES_REPORT_FILTERS_FILTER, [
|
||||
{
|
||||
label: __( 'Show', 'woocommerce-admin' ),
|
||||
staticParams: [ 'chart' ],
|
||||
|
|
@ -74,4 +76,6 @@ export const filters = [
|
|||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
] );
|
||||
|
||||
export const advancedFilters = applyFilters( TAXES_REPORT_ADVANCED_FILTERS_FILTER, {} );
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import { __ } from '@wordpress/i18n';
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { charts, filters } from './config';
|
||||
import { advancedFilters, charts, filters } from './config';
|
||||
import getSelectedChart from 'lib/get-selected-chart';
|
||||
import ReportChart from 'analytics/components/report-chart';
|
||||
import ReportSummary from 'analytics/components/report-summary';
|
||||
|
|
@ -42,7 +42,13 @@ export default class TaxesReport extends Component {
|
|||
}
|
||||
return (
|
||||
<Fragment>
|
||||
<ReportFilters query={ query } path={ path } filters={ filters } report="taxes" />
|
||||
<ReportFilters
|
||||
query={ query }
|
||||
path={ path }
|
||||
filters={ filters }
|
||||
advancedFilters={ advancedFilters }
|
||||
report="taxes"
|
||||
/>
|
||||
<ReportSummary
|
||||
charts={ charts }
|
||||
endpoint="taxes"
|
||||
|
|
@ -50,9 +56,11 @@ export default class TaxesReport extends Component {
|
|||
query={ chartQuery }
|
||||
selectedChart={ getSelectedChart( query.chart, charts ) }
|
||||
filters={ filters }
|
||||
advancedFilters={ advancedFilters }
|
||||
/>
|
||||
<ReportChart
|
||||
filters={ filters }
|
||||
advancedFilters={ advancedFilters }
|
||||
mode={ mode }
|
||||
endpoint="taxes"
|
||||
query={ chartQuery }
|
||||
|
|
@ -61,7 +69,12 @@ export default class TaxesReport extends Component {
|
|||
itemsLabel={ itemsLabel }
|
||||
selectedChart={ getSelectedChart( query.chart, charts ) }
|
||||
/>
|
||||
<TaxesReportTable isRequesting={ isRequesting } query={ query } filters={ filters } />
|
||||
<TaxesReportTable
|
||||
isRequesting={ isRequesting }
|
||||
query={ query }
|
||||
filters={ filters }
|
||||
advancedFilters={ advancedFilters }
|
||||
/>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -143,7 +143,7 @@ export default class TaxesReportTable extends Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
const { isRequesting, query, filters } = this.props;
|
||||
const { advancedFilters, filters, isRequesting, query } = this.props;
|
||||
|
||||
return (
|
||||
<ReportTable
|
||||
|
|
@ -162,6 +162,7 @@ export default class TaxesReportTable extends Component {
|
|||
title={ __( 'Taxes', 'woocommerce-admin' ) }
|
||||
columnPrefsKey="taxes_report_columns"
|
||||
filters={ filters }
|
||||
advancedFilters={ advancedFilters }
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
.woocommerce-profile-wizard__themes-tab-panel .components-tab-panel__tabs {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background: $white;
|
||||
background: $studio-white;
|
||||
box-shadow: $muriel-box-shadow-1dp;
|
||||
border-radius: 3px;
|
||||
margin-top: $gap-large;
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
button {
|
||||
border: 0;
|
||||
border-bottom: 1px solid transparent;
|
||||
color: $muriel-gray-500;
|
||||
color: $studio-gray-50;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -41,8 +41,8 @@
|
|||
padding: 0 $gap-large;
|
||||
|
||||
&.is-active {
|
||||
border-bottom: 1px solid $muriel-hot-pink-500;
|
||||
color: $muriel-hot-pink-500;
|
||||
border-bottom: 1px solid $studio-woocommerce-purple-60;
|
||||
color: $studio-woocommerce-purple-60;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -78,7 +78,7 @@
|
|||
margin-left: $gap-smaller;
|
||||
|
||||
path {
|
||||
fill: $muriel-red-500;
|
||||
fill: $studio-red-50;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -110,8 +110,8 @@
|
|||
box-shadow: none;
|
||||
|
||||
&.is-default {
|
||||
border-color: $muriel-hot-pink-500;
|
||||
color: $muriel-hot-pink-500;
|
||||
border-color: $studio-pink-50;
|
||||
color: $studio-pink-50;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -190,11 +190,11 @@
|
|||
flex-direction: column;
|
||||
|
||||
.woocommerce-theme-preview__toolbar {
|
||||
background: $white;
|
||||
background: $studio-white;
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
height: 56px;
|
||||
border-bottom: 1px solid $muriel-gray-50;
|
||||
border-bottom: 1px solid $studio-gray-5;
|
||||
padding-left: $gap;
|
||||
padding-right: $gap;
|
||||
align-items: center;
|
||||
|
|
@ -211,7 +211,7 @@
|
|||
|
||||
.woocommerce-theme-preview__theme-name {
|
||||
padding-left: $gap;
|
||||
color: $muriel-gray-900;
|
||||
color: $studio-gray-90;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -220,7 +220,7 @@
|
|||
|
||||
.woocommerce-theme-preview__close {
|
||||
padding: 0 $gap 0 0;
|
||||
color: $muriel-gray-500;
|
||||
color: $studio-gray-50;
|
||||
}
|
||||
|
||||
.woocommerce-theme-preview__devices {
|
||||
|
|
@ -229,14 +229,14 @@
|
|||
|
||||
.muriel-button {
|
||||
padding: $gap-small;
|
||||
color: $muriel-gray-500;
|
||||
color: $studio-gray-50;
|
||||
margin: 0;
|
||||
border-radius: 50%;
|
||||
|
||||
&.is-selected,
|
||||
&:focus {
|
||||
background: $muriel-gray-500;
|
||||
color: $white;
|
||||
background: $studio-gray-50;
|
||||
color: $studio-white;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
|
||||
.woocommerce-profile-wizard__body {
|
||||
.woocommerce-profile-wizard__container a {
|
||||
color: $muriel-gray-600;
|
||||
color: $studio-pink-50;
|
||||
}
|
||||
|
||||
.woocommerce-profile-wizard__skip.components-button.is-link {
|
||||
color: $muriel-gray-600;
|
||||
color: $studio-gray-60;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-weight: normal;
|
||||
|
|
@ -18,9 +18,9 @@
|
|||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
color: $muriel-gray-800;
|
||||
color: $studio-gray-80;
|
||||
}
|
||||
color: $muriel-gray-600;
|
||||
color: $studio-gray-60;
|
||||
text-align: left;
|
||||
|
||||
.muriel-button {
|
||||
|
|
@ -38,23 +38,23 @@
|
|||
|
||||
.woocommerce-profile-wizard__header {
|
||||
height: 56px;
|
||||
border-bottom: 1px solid $muriel-gray-50;
|
||||
border-bottom: 1px solid $studio-gray-5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: $muriel-white;
|
||||
background: $studio-white;
|
||||
|
||||
svg > g {
|
||||
transform: translateX(25%);
|
||||
}
|
||||
|
||||
.woocommerce-profile-wizard__plus {
|
||||
stroke: $muriel-gray-800;
|
||||
stroke: $studio-gray-80;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-profile-wizard__header-title {
|
||||
color: $muriel-gray-800;
|
||||
color: $studio-gray-80;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
font-weight: 400;
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
}
|
||||
|
||||
.woocommerce-profile-wizard__header-subtitle {
|
||||
color: $muriel-gray-600;
|
||||
color: $studio-gray-60;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
|
|
@ -120,7 +120,7 @@
|
|||
margin-top: $gap;
|
||||
margin-bottom: $gap;
|
||||
font-size: 12px;
|
||||
color: $muriel-red-500;
|
||||
color: $studio-red-50;
|
||||
}
|
||||
|
||||
.woocommerce-profile-wizard__benefit {
|
||||
|
|
@ -142,7 +142,7 @@
|
|||
.woocommerce-profile-wizard__benefit-content p {
|
||||
padding-bottom: $gap;
|
||||
margin-top: 0;
|
||||
border-bottom: 1px solid $muriel-gray-50;
|
||||
border-bottom: 1px solid $studio-gray-5;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
|
@ -208,7 +208,7 @@
|
|||
left: $gap-large * 2 + $gap;
|
||||
width: calc(100% - #{$gap-large * 2 + $gap});
|
||||
height: 1px;
|
||||
background-color: $muriel-gray-50;
|
||||
background-color: $studio-gray-5;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
|
|
@ -227,7 +227,7 @@
|
|||
}
|
||||
|
||||
label.components-checkbox-control__label {
|
||||
color: $muriel-gray-800;
|
||||
color: $studio-gray-80;
|
||||
}
|
||||
|
||||
label.components-checkbox-control__label,
|
||||
|
|
@ -236,7 +236,7 @@
|
|||
}
|
||||
|
||||
.components-base-control__help {
|
||||
color: $muriel-gray-600;
|
||||
color: $studio-gray-60;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
margin-top: 3px;
|
||||
|
|
@ -286,7 +286,7 @@
|
|||
z-index: 999;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
border-top: 1px solid $muriel-gray-50;
|
||||
border-top: 1px solid $studio-gray-5;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
}
|
||||
|
||||
.woocommerce-summary__item {
|
||||
background-color: $white;
|
||||
background-color: $studio-white;
|
||||
|
||||
&:hover {
|
||||
background-color: $core-grey-light-200;
|
||||
|
|
|
|||
|
|
@ -78,23 +78,23 @@
|
|||
.woocommerce-onboarding {
|
||||
.woocommerce-stepper .woocommerce-stepper__step {
|
||||
.woocommerce-stepper__step-label {
|
||||
color: $muriel-gray-800;
|
||||
color: $studio-gray-80;
|
||||
}
|
||||
|
||||
&.is-active,
|
||||
&.is-complete {
|
||||
.woocommerce-stepper__step-icon {
|
||||
background: $muriel-hot-purple-600;
|
||||
color: $muriel-white;
|
||||
background: $studio-woocommerce-purple-60;
|
||||
color: $studio-white;
|
||||
}
|
||||
|
||||
.woocommerce-stepper__step-label {
|
||||
color: $muriel-gray-900;
|
||||
color: $studio-gray-90;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-spinner {
|
||||
background: $muriel-hot-purple-600;
|
||||
background: $studio-woocommerce-purple-60;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -106,7 +106,7 @@
|
|||
|
||||
.components-base-control.has-error {
|
||||
margin-bottom: $gap * 2 !important;
|
||||
border-color: $muriel-red-500;
|
||||
border-color: $studio-red-50;
|
||||
|
||||
.components-base-control__help {
|
||||
top: 100%;
|
||||
|
|
@ -114,7 +114,7 @@
|
|||
margin-top: $gap-smallest;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
color: $muriel-red-500;
|
||||
color: $studio-red-50;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -173,7 +173,7 @@
|
|||
|
||||
.muriel-input-text.active,
|
||||
.muriel-select.active {
|
||||
box-shadow: 0 0 0 2px $muriel-hot-purple-600;
|
||||
box-shadow: 0 0 0 2px $studio-woocommerce-purple-60;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
|
|
@ -197,12 +197,21 @@
|
|||
|
||||
&.is-busy {
|
||||
cursor: progress;
|
||||
/* stylelint-disable function-parentheses-space-inside, function-comma-space-after */
|
||||
background-image: linear-gradient(
|
||||
-45deg,
|
||||
$studio-pink-50 28%,
|
||||
color($studio-pink-50 shade(30%)) 28%,
|
||||
color($studio-pink-50 shade(30%)) 72%,
|
||||
$studio-pink-50 72%
|
||||
) !important; // Gutenberg & PostCSS Add the gradient late in output, based on the 'primary' color, which in our case is purple. Our busy state should be pink.
|
||||
/* stylelint-enable */
|
||||
}
|
||||
}
|
||||
|
||||
.muriel-checkbox input[type='checkbox']:checked {
|
||||
background-color: $muriel-hot-purple-600;
|
||||
border-color: $muriel-hot-purple-600;
|
||||
background-color: $studio-woocommerce-purple-60;
|
||||
border-color: $studio-woocommerce-purple-60;
|
||||
}
|
||||
|
||||
.components-form-toggle {
|
||||
|
|
@ -233,8 +242,8 @@
|
|||
|
||||
&.is-checked {
|
||||
.components-form-toggle__track {
|
||||
background-color: $muriel-hot-purple-600;
|
||||
border-color: $muriel-hot-purple-600;
|
||||
background-color: $studio-woocommerce-purple-60;
|
||||
border-color: $studio-woocommerce-purple-60;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ import Connect from './tasks/connect';
|
|||
import Products from './tasks/products';
|
||||
import Shipping from './tasks/shipping';
|
||||
import Tax from './tasks/tax';
|
||||
import Payments from './tasks/payments';
|
||||
import withSelect from 'wc-api/with-select';
|
||||
|
||||
class TaskDashboard extends Component {
|
||||
|
|
@ -42,7 +43,7 @@ class TaskDashboard extends Component {
|
|||
{
|
||||
key: 'connect',
|
||||
title: __( 'Connect your store to WooCommerce.com', 'woocommerce-admin' ),
|
||||
description: __(
|
||||
content: __(
|
||||
'Install and manage your extensions directly from your Dashboard',
|
||||
'wooocommerce-admin'
|
||||
),
|
||||
|
|
@ -55,7 +56,7 @@ class TaskDashboard extends Component {
|
|||
{
|
||||
key: 'products',
|
||||
title: __( 'Add your first product', 'woocommerce-admin' ),
|
||||
description: __(
|
||||
content: __(
|
||||
'Add products manually, import from a sheet or migrate from another platform',
|
||||
'wooocommerce-admin'
|
||||
),
|
||||
|
|
@ -73,7 +74,7 @@ class TaskDashboard extends Component {
|
|||
{
|
||||
key: 'personalize-store',
|
||||
title: __( 'Personalize your store', 'woocommerce-admin' ),
|
||||
description: __( 'Create a custom homepage and upload your logo', 'wooocommerce-admin' ),
|
||||
content: __( 'Create a custom homepage and upload your logo', 'wooocommerce-admin' ),
|
||||
before: <i className="material-icons-outlined">palette</i>,
|
||||
after: <i className="material-icons-outlined">chevron_right</i>,
|
||||
onClick: noop,
|
||||
|
|
@ -82,10 +83,7 @@ class TaskDashboard extends Component {
|
|||
{
|
||||
key: 'shipping',
|
||||
title: __( 'Set up shipping', 'woocommerce-admin' ),
|
||||
description: __(
|
||||
'Configure some basic shipping rates to get started',
|
||||
'wooocommerce-admin'
|
||||
),
|
||||
content: __( 'Configure some basic shipping rates to get started', 'wooocommerce-admin' ),
|
||||
before:
|
||||
shippingZonesCount > 0 ? (
|
||||
<i className="material-icons-outlined">check_circle</i>
|
||||
|
|
@ -101,7 +99,7 @@ class TaskDashboard extends Component {
|
|||
{
|
||||
key: 'tax',
|
||||
title: __( 'Set up tax', 'woocommerce-admin' ),
|
||||
description: __(
|
||||
content: __(
|
||||
'Choose how to configure tax rates - manually or automatically',
|
||||
'wooocommerce-admin'
|
||||
),
|
||||
|
|
@ -114,13 +112,14 @@ class TaskDashboard extends Component {
|
|||
{
|
||||
key: 'payments',
|
||||
title: __( 'Set up payments', 'woocommerce-admin' ),
|
||||
description: __(
|
||||
content: __(
|
||||
'Select which payment providers you’d like to use and configure them',
|
||||
'wooocommerce-admin'
|
||||
),
|
||||
before: <i className="material-icons-outlined">payment</i>,
|
||||
after: <i className="material-icons-outlined">chevron_right</i>,
|
||||
onClick: noop,
|
||||
onClick: () => updateQueryString( { task: 'payments' } ),
|
||||
container: <Payments />,
|
||||
visible: true,
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
|
||||
.woocommerce-task-dashboard__body {
|
||||
.woocommerce-card__description {
|
||||
color: $muriel-gray-500;
|
||||
color: $studio-gray-50;
|
||||
}
|
||||
|
||||
.woocommerce-task-card .woocommerce-card__body {
|
||||
border-top: 1px solid $muriel-gray-50;
|
||||
border-top: 1px solid $studio-gray-5;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
justify-content: center;
|
||||
|
||||
&:not(.is-primary) {
|
||||
color: $muriel-hot-pink-500;
|
||||
color: $studio-pink-50;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -31,17 +31,17 @@
|
|||
margin: 0;
|
||||
|
||||
.woocommerce-list__item.is-complete {
|
||||
background: $muriel-gray-0;
|
||||
background: $studio-gray-0;
|
||||
|
||||
.woocommerce-list__item-before i {
|
||||
color: $muriel-gray-200;
|
||||
color: $studio-gray-20;
|
||||
}
|
||||
|
||||
.woocommerce-list__item-title {
|
||||
color: $muriel-gray-500;
|
||||
color: $studio-gray-50;
|
||||
}
|
||||
|
||||
.woocommerce-list__item-description {
|
||||
.woocommerce-list__item-content {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -50,20 +50,20 @@
|
|||
width: 36px;
|
||||
height: 36px;
|
||||
font-size: 36px;
|
||||
color: $muriel-hot-purple-600;
|
||||
color: $studio-woocommerce-purple-60;
|
||||
}
|
||||
|
||||
.woocommerce-list__item-after i {
|
||||
color: $muriel-gray-600;
|
||||
color: $studio-gray-60;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-list__item-title {
|
||||
color: $muriel-gray-800;
|
||||
color: $studio-gray-80;
|
||||
}
|
||||
|
||||
.woocommerce-list__item-description {
|
||||
color: $muriel-gray-500;
|
||||
.woocommerce-list__item-content {
|
||||
color: $studio-gray-50;
|
||||
}
|
||||
|
||||
#wpbody-content {
|
||||
|
|
@ -91,9 +91,9 @@
|
|||
padding-top: $gap;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: $muriel-gray-900;
|
||||
color: $studio-gray-90;
|
||||
margin-bottom: $gap-small;
|
||||
border-top: 1px solid $new-muriel-gray-5;
|
||||
border-top: 1px solid $studio-gray-5;
|
||||
|
||||
.components-form-toggle {
|
||||
margin-left: auto;
|
||||
|
|
@ -121,7 +121,7 @@
|
|||
z-index: 1;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: $new-muriel-gray-50;
|
||||
color: $studio-gray-50;
|
||||
}
|
||||
|
||||
&.has-value {
|
||||
|
|
@ -149,7 +149,7 @@
|
|||
}
|
||||
|
||||
.woocommerce-task-tax__automated-tax-control-inner {
|
||||
border-top: 1px solid $new-muriel-gray-5;
|
||||
border-top: 1px solid $studio-gray-5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
|
|
@ -194,3 +194,34 @@
|
|||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-task-payments {
|
||||
.woocommerce-list__item .woocommerce-list__item-after {
|
||||
align-self: start;
|
||||
margin-left: $gap;
|
||||
margin-top: $gap-large;
|
||||
}
|
||||
|
||||
.woocommerce-list__item-title {
|
||||
border-top: 1px solid $studio-gray-5;
|
||||
padding-top: $gap;
|
||||
}
|
||||
|
||||
.woocommerce-task-payments__woocommerce-services-options {
|
||||
border-top: 1px solid $studio-gray-5;
|
||||
margin-top: $gap;
|
||||
margin-left: $gap-larger;
|
||||
padding-top: $gap;
|
||||
|
||||
.components-checkbox-control__input {
|
||||
margin-left: -$gap-larger;
|
||||
}
|
||||
|
||||
.components-checkbox-control__label {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
padding-left: $gap-small;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,262 @@
|
|||
/** @format */
|
||||
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { Fragment, Component } from '@wordpress/element';
|
||||
import { compose } from '@wordpress/compose';
|
||||
import { filter, noop } from 'lodash';
|
||||
import { FormToggle, CheckboxControl } from '@wordpress/components';
|
||||
import { TextControl } from 'newspack-components';
|
||||
|
||||
/**
|
||||
* WooCommerce dependencies
|
||||
*/
|
||||
import { getCountryCode } from 'dashboard/utils';
|
||||
import { Form, Card, Stepper, List } from '@woocommerce/components';
|
||||
import { getHistory, getNewPath } from '@woocommerce/navigation';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import withSelect from 'wc-api/with-select';
|
||||
|
||||
class Payments extends Component {
|
||||
constructor() {
|
||||
super( ...arguments );
|
||||
this.state = {
|
||||
step: 'choose',
|
||||
};
|
||||
this.completeStep = this.completeStep.bind( this );
|
||||
}
|
||||
|
||||
getInitialValues() {
|
||||
const values = {
|
||||
stripe: false,
|
||||
paypal: false,
|
||||
klarna_checkout: false,
|
||||
klarna_payments: false,
|
||||
create_stripe: false,
|
||||
create_paypal: false,
|
||||
stripe_email: '',
|
||||
paypal_email: '',
|
||||
};
|
||||
return values;
|
||||
}
|
||||
|
||||
validate() {
|
||||
const errors = {};
|
||||
return errors;
|
||||
}
|
||||
|
||||
completeStep() {
|
||||
const { step } = this.state;
|
||||
const steps = this.getSteps();
|
||||
const currentStepIndex = steps.findIndex( s => s.key === step );
|
||||
const nextStep = steps[ currentStepIndex + 1 ];
|
||||
|
||||
if ( nextStep ) {
|
||||
this.setState( { step: nextStep.key } );
|
||||
} else {
|
||||
getHistory().push( getNewPath( {}, '/', {} ) );
|
||||
}
|
||||
}
|
||||
|
||||
// If Jetpack is connected and WCS is enabled, we will offer a streamlined option.
|
||||
renderWooCommerceServicesStripeConnect( { getInputProps, values } ) {
|
||||
if ( ! values.stripe ) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { isJetpackConnected, activePlugins } = this.props;
|
||||
if ( ! isJetpackConnected || ! activePlugins.includes( 'woocommerce-services' ) ) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="woocommerce-task-payments__woocommerce-services-options">
|
||||
<CheckboxControl
|
||||
label={ __( 'Create a Stripe account for me', 'woocommerce-admin' ) }
|
||||
{ ...getInputProps( 'create_stripe' ) }
|
||||
/>
|
||||
|
||||
{ values.create_stripe && (
|
||||
<TextControl
|
||||
label={ __( 'Email address', 'woocommerce-admin' ) }
|
||||
{ ...getInputProps( 'stripe_email' ) }
|
||||
/>
|
||||
) }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderWooCommerceServicesPayPalConnect( { getInputProps, values } ) {
|
||||
if ( ! values.paypal ) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { isJetpackConnected, activePlugins } = this.props;
|
||||
if ( ! isJetpackConnected || ! activePlugins.includes( 'woocommerce-services' ) ) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="woocommerce-task-payments__woocommerce-services-options">
|
||||
<CheckboxControl
|
||||
label={ __( 'Create a Paypal account for me', 'woocommerce-admin' ) }
|
||||
{ ...getInputProps( 'create_paypal' ) }
|
||||
/>
|
||||
|
||||
{ values.create_paypal && (
|
||||
<TextControl
|
||||
label={ __( 'Email address', 'woocommerce-admin' ) }
|
||||
{ ...getInputProps( 'paypal_email' ) }
|
||||
/>
|
||||
) }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
getMethodOptions( formData ) {
|
||||
const { getInputProps } = formData;
|
||||
const { countryCode, profileItems } = this.props;
|
||||
const methods = [
|
||||
{
|
||||
title: __( 'Credit cards - powered by Stripe', 'woocommerce-admin' ),
|
||||
content: (
|
||||
<Fragment>
|
||||
{ __(
|
||||
'Accept debit and credit cards in 135+ currencies, methods such as Alipay, ' +
|
||||
'and one-touch checkout with Apple Pay.',
|
||||
'woocommerce-admin'
|
||||
) }
|
||||
{ this.renderWooCommerceServicesStripeConnect( formData ) }
|
||||
</Fragment>
|
||||
),
|
||||
before: <div />, // @todo Logo
|
||||
after: <FormToggle { ...getInputProps( 'stripe' ) } />,
|
||||
visible: true,
|
||||
},
|
||||
{
|
||||
title: __( 'PayPal Checkout', 'woocommerce-admin' ),
|
||||
content: (
|
||||
<Fragment>
|
||||
{ __(
|
||||
"Safe and secure payments using credit cards or your customer's PayPal account.",
|
||||
'woocommerce-admin'
|
||||
) }
|
||||
{ this.renderWooCommerceServicesPayPalConnect( formData ) }
|
||||
</Fragment>
|
||||
),
|
||||
before: <div />, // @todo Logo
|
||||
after: <FormToggle { ...getInputProps( 'paypal' ) } />,
|
||||
visible: true,
|
||||
},
|
||||
{
|
||||
title: __( 'Klarna Checkout', 'woocommerce-admin' ),
|
||||
content: __(
|
||||
'Choose the payment that you want, pay now, pay later or slice it. No credit card numbers, no passwords, no worries.',
|
||||
'woocommerce-admin'
|
||||
),
|
||||
before: <div />, // @todo Logo
|
||||
after: <FormToggle { ...getInputProps( 'klarna_checkout' ) } />,
|
||||
visible: [ 'SE', 'FI', 'NO', 'NL' ].includes( countryCode ),
|
||||
},
|
||||
{
|
||||
title: __( 'Klarna Payments', 'woocommerce-admin' ),
|
||||
content: __(
|
||||
'Choose the payment that you want, pay now, pay later or slice it. No credit card numbers, no passwords, no worries.',
|
||||
'woocommerce-admin'
|
||||
),
|
||||
before: <div />, // @todo Logo
|
||||
after: <FormToggle { ...getInputProps( 'klarna_payments' ) } />,
|
||||
visible: [ 'DK', 'DE', 'AT' ].includes( countryCode ),
|
||||
},
|
||||
{
|
||||
title: __( 'Square', 'woocommerce-admin' ),
|
||||
content: __(
|
||||
'Securely accept credit and debit cards with one low rate, no surprise fees (custom rates available). ' +
|
||||
'Sell online and in store and track sales and inventory in one place.',
|
||||
'woocommerce-admin'
|
||||
),
|
||||
before: <div />, // @todo Logo
|
||||
after: <FormToggle { ...getInputProps( 'square' ) } />,
|
||||
visible:
|
||||
[ 'brick-mortar', 'brick-mortar-other' ].includes( profileItems.selling_venues ) &&
|
||||
[ 'US', 'CA', 'JP', 'GB', 'AU' ].includes( countryCode ),
|
||||
},
|
||||
];
|
||||
|
||||
return filter( methods, method => method.visible );
|
||||
}
|
||||
|
||||
getSteps( formData ) {
|
||||
const steps = [
|
||||
{
|
||||
key: 'choose',
|
||||
label: __( 'Choose payment methods', 'woocommerce-admin' ),
|
||||
description: __( "Select which payment methods you'd like to use", 'woocommerce-admin' ),
|
||||
content: <List items={ this.getMethodOptions( formData ) } />,
|
||||
visible: true,
|
||||
},
|
||||
];
|
||||
|
||||
return filter( steps, step => step.visible );
|
||||
}
|
||||
|
||||
render() {
|
||||
const { step } = this.state;
|
||||
const { isSettingsRequesting } = this.props;
|
||||
return (
|
||||
<Form
|
||||
initialValues={ this.getInitialValues() }
|
||||
onSubmitCallback={ noop }
|
||||
validate={ this.validate }
|
||||
>
|
||||
{ ( { getInputProps, values } ) => {
|
||||
return (
|
||||
<div className="woocommerce-task-payments">
|
||||
<Card className="is-narrow">
|
||||
<Stepper
|
||||
isVertical
|
||||
isPending={ isSettingsRequesting }
|
||||
currentStep={ step }
|
||||
steps={ this.getSteps( { getInputProps, values } ) }
|
||||
/>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
} }
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withSelect( select => {
|
||||
const {
|
||||
getSettings,
|
||||
getSettingsError,
|
||||
isGetSettingsRequesting,
|
||||
getProfileItems,
|
||||
isJetpackConnected,
|
||||
getActivePlugins,
|
||||
} = select( 'wc-api' );
|
||||
|
||||
const settings = getSettings( 'general' );
|
||||
const isSettingsError = Boolean( getSettingsError( 'general' ) );
|
||||
const isSettingsRequesting = isGetSettingsRequesting( 'general' );
|
||||
const countryCode = getCountryCode( settings.woocommerce_default_country );
|
||||
|
||||
return {
|
||||
countryCode,
|
||||
isSettingsError,
|
||||
isSettingsRequesting,
|
||||
settings,
|
||||
profileItems: getProfileItems(),
|
||||
activePlugins: getActivePlugins(),
|
||||
isJetpackConnected: isJetpackConnected(),
|
||||
};
|
||||
} )
|
||||
)( Payments );
|
||||
|
|
@ -14,17 +14,14 @@ import { getAdminLink } from '@woocommerce/navigation';
|
|||
const subTasks = [
|
||||
{
|
||||
title: __( 'Add manually (recommended)', 'woocommerce-admin' ),
|
||||
description: __(
|
||||
'For small stores we recommend adding products manually',
|
||||
'woocommerce-admin'
|
||||
),
|
||||
content: __( 'For small stores we recommend adding products manually', 'woocommerce-admin' ),
|
||||
before: <i className="material-icons-outlined">add_box</i>,
|
||||
after: <i className="material-icons-outlined">chevron_right</i>,
|
||||
href: getAdminLink( 'post-new.php?post_type=product&wc_onboarding_active_task=products' ),
|
||||
},
|
||||
{
|
||||
title: __( 'Import', 'woocommerce-admin' ),
|
||||
description: __(
|
||||
content: __(
|
||||
'For larger stores we recommend importing all products at once via CSV file',
|
||||
'woocommerce-admin'
|
||||
),
|
||||
|
|
@ -36,7 +33,7 @@ const subTasks = [
|
|||
},
|
||||
{
|
||||
title: __( 'Migrate', 'woocommerce-admin' ),
|
||||
description: __(
|
||||
content: __(
|
||||
'For stores currently selling elsewhere we suggest using a product migration service',
|
||||
'woocommerce-admin'
|
||||
),
|
||||
|
|
|
|||
|
|
@ -1,15 +1,18 @@
|
|||
[
|
||||
{ "component": "AdvancedFilters" },
|
||||
{ "component": "AnimationSlider" },
|
||||
{ "component": "Autocomplete" },
|
||||
{ "component": "Calendar", "render": "MyDateRange" },
|
||||
{ "component": "Card" },
|
||||
{ "component": "Chart" },
|
||||
{ "component": "CompareFilter" },
|
||||
{ "component": "Count" },
|
||||
{ "component": "Date" },
|
||||
{ "component": "DateRangeFilterPicker" },
|
||||
{ "component": "DropdownButton" },
|
||||
{ "component": "EllipsisMenu" },
|
||||
{ "component": "EmptyContent" },
|
||||
{ "component": "Filters", "render": "MyReportFilters" },
|
||||
{ "component": "FilterPicker" },
|
||||
{ "component": "Flag" },
|
||||
{ "component": "Form" },
|
||||
{ "component": "Gravatar" },
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
background-color: transparent;
|
||||
|
||||
& > .woocommerce-card__header {
|
||||
background-color: $white;
|
||||
background-color: $studio-white;
|
||||
}
|
||||
|
||||
& > .woocommerce-card__body {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
position: relative;
|
||||
padding: $fallback-gutter;
|
||||
padding: $gutter;
|
||||
background: $white;
|
||||
background: $studio-white;
|
||||
border-bottom: 1px solid $core-grey-light-400;
|
||||
color: $gray-text;
|
||||
@include font-size( 13 );
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
flex-direction: column;
|
||||
|
||||
a {
|
||||
color: $woocommerce;
|
||||
color: $studio-woocommerce-purple;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -266,7 +266,7 @@
|
|||
position: relative;
|
||||
|
||||
img.woocommerce-gravatar {
|
||||
border: 2px solid $white;
|
||||
border: 2px solid $studio-white;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
font-weight: 500;
|
||||
line-height: 18px;
|
||||
margin: 0;
|
||||
color: $woocommerce;
|
||||
color: $studio-woocommerce-purple;
|
||||
text-decoration: none;
|
||||
|
||||
.gridicon {
|
||||
|
|
@ -21,33 +21,33 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background: $white;
|
||||
color: $woocommerce;
|
||||
background: $studio-white;
|
||||
color: $studio-woocommerce-purple;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: $core-grey-light-100;
|
||||
color: $woocommerce-700;
|
||||
color: $studio-woocommerce-purple-70;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: $woocommerce;
|
||||
color: $studio-woocommerce-purple;
|
||||
background: $core-grey-light-200;
|
||||
box-shadow: inset 0 0 0 1px $box-shadow-blue, inset 0 0 0 2px #fff;
|
||||
box-shadow: inset 0 0 0 1px $box-shadow-blue, inset 0 0 0 2px $studio-white;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
.gridicon {
|
||||
display: initial;
|
||||
color: $woocommerce;
|
||||
color: $studio-woocommerce-purple;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
.gridicon {
|
||||
display: initial;
|
||||
color: $woocommerce-700;
|
||||
color: $studio-woocommerce-purple-70;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
@include breakpoint( '<782px' ) {
|
||||
position: relative;
|
||||
background: $white;
|
||||
background: $studio-white;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100vw;
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
background-color: $white;
|
||||
background-color: $studio-white;
|
||||
color: $core-grey-dark-500;
|
||||
max-width: min-content;
|
||||
min-width: 80px;
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
height: $header-height;
|
||||
|
||||
&::before {
|
||||
background-color: $woocommerce;
|
||||
background-color: $studio-woocommerce-purple;
|
||||
bottom: 0;
|
||||
content: '';
|
||||
height: 0;
|
||||
|
|
@ -103,7 +103,7 @@
|
|||
position: absolute;
|
||||
padding: 1px;
|
||||
background: $core-orange;
|
||||
border: 2px solid $white;
|
||||
border: 2px solid $studio-white;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
display: inline-block;
|
||||
|
|
@ -163,7 +163,7 @@
|
|||
position: absolute;
|
||||
padding: 1px;
|
||||
background: $core-orange;
|
||||
border: 2px solid $white;
|
||||
border: 2px solid $studio-white;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
display: inline-block;
|
||||
|
|
@ -239,7 +239,7 @@
|
|||
.woocommerce-flag {
|
||||
position: relative;
|
||||
top: 16px;
|
||||
border: 2px solid $white;
|
||||
border: 2px solid $studio-white;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
/** @format */
|
||||
|
||||
.woocommerce-layout__header {
|
||||
background: $white;
|
||||
background: $studio-white;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid $white;
|
||||
border-bottom: 1px solid $studio-white;
|
||||
padding: 0;
|
||||
height: $header-height;
|
||||
position: fixed;
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
flex: 1 auto;
|
||||
height: $header-height;
|
||||
line-height: $header-height;
|
||||
background: $white;
|
||||
background: $studio-white;
|
||||
|
||||
span + span::before {
|
||||
content: ' / ';
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
}
|
||||
|
||||
a {
|
||||
color: $woocommerce;
|
||||
color: $studio-pink;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,8 +43,8 @@
|
|||
}
|
||||
|
||||
.woocommerce-admin-full-screen {
|
||||
background: $muriel-gray-0;
|
||||
color: $muriel-gray-600;
|
||||
background: $studio-gray-0;
|
||||
color: $studio-gray-60;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
|
||||
'Helvetica Neue', sans-serif;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,6 @@
|
|||
/** @format */
|
||||
|
||||
@import 'node_modules/color-studio/dist/color-variables.scss';
|
||||
// @todo Replace duplicate colors below with their color-studio/Muriel counterparts.
|
||||
|
||||
$white: rgba(255, 255, 255, 1);
|
||||
@import 'node_modules/@automattic/color-studio/dist/color-variables.scss';
|
||||
|
||||
// Greys
|
||||
$core-grey-light-100: #f8f9f9;
|
||||
|
|
@ -27,18 +24,6 @@ $core-grey-dark-900: #191e23;
|
|||
|
||||
$gray-text: $core-grey-dark-500;
|
||||
|
||||
// WooCommerce Purples
|
||||
$woocommerce-100: #ffd7ff;
|
||||
$woocommerce-200: #e2a5d7;
|
||||
$woocommerce-300: #c88bbd;
|
||||
$woocommerce-400: #af72a4;
|
||||
$woocommerce-500: #95588a;
|
||||
$woocommerce-600: #7c3f71;
|
||||
$woocommerce-700: #622557;
|
||||
$woocommerce-800: #490c3e;
|
||||
$woocommerce-900: #2f0024;
|
||||
$woocommerce: $woocommerce-500;
|
||||
|
||||
// Gutenberg
|
||||
$button-hover: #fafafa;
|
||||
$button-focus-inner: #00435d;
|
||||
|
|
@ -47,10 +32,6 @@ $input-active-border: #00a0d2;
|
|||
$input-active-inner: $button-focus-inner;
|
||||
$input-active-outer: $button-focus-outer;
|
||||
|
||||
// wp-admin
|
||||
$wp-admin-background: #f1f1f1;
|
||||
$black: #24292d; // same as wp-admin sidebar
|
||||
|
||||
// Bright colors
|
||||
$valid-green: #4ab866;
|
||||
$notice-yellow: #ffb900;
|
||||
|
|
|
|||
|
|
@ -101,47 +101,47 @@
|
|||
}
|
||||
|
||||
@mixin button-style__hover {
|
||||
background-color: $white;
|
||||
background-color: $studio-white;
|
||||
color: $dark-gray-900;
|
||||
box-shadow: inset 0 0 0 1px $light-gray-500, inset 0 0 0 2px $white,
|
||||
box-shadow: inset 0 0 0 1px $light-gray-500, inset 0 0 0 2px $studio-white,
|
||||
0 1px 1px rgba($dark-gray-900, 0.2);
|
||||
}
|
||||
|
||||
@mixin button-style__active() {
|
||||
outline: none;
|
||||
background-color: $white;
|
||||
background-color: $studio-white;
|
||||
color: $dark-gray-900;
|
||||
box-shadow: inset 0 0 0 1px $light-gray-700, inset 0 0 0 2px $white;
|
||||
box-shadow: inset 0 0 0 1px $light-gray-700, inset 0 0 0 2px $studio-white;
|
||||
}
|
||||
|
||||
@mixin button-style__focus-active() {
|
||||
background-color: $white;
|
||||
background-color: $studio-white;
|
||||
color: $dark-gray-900;
|
||||
box-shadow: inset 0 0 0 1px $dark-gray-300, inset 0 0 0 2px $white;
|
||||
box-shadow: inset 0 0 0 1px $dark-gray-300, inset 0 0 0 2px $studio-white;
|
||||
|
||||
// Windows High Contrast mode will show this outline, but not the box-shadow.
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
/* stylelint-disable block-closing-brace-newline-after */
|
||||
@mixin reduce-motion($property: '') {
|
||||
@if $property == 'transition' {
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
transition-duration: 0s;
|
||||
}
|
||||
}
|
||||
@else if $property == 'animation' {
|
||||
} @else if $property == 'animation' {
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
animation-duration: 1ms;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
} @else {
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
transition-duration: 0s;
|
||||
animation-duration: 1ms;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* stylelint-enable */
|
||||
|
||||
@mixin break-small() {
|
||||
@media (min-width: #{ ($break-small) }) {
|
||||
|
|
@ -151,7 +151,7 @@
|
|||
|
||||
// Gutenberg Switch.
|
||||
@mixin switch-style__focus-active() {
|
||||
box-shadow: 0 0 0 2px $white, 0 0 0 3px $dark-gray-300;
|
||||
box-shadow: 0 0 0 2px $studio-white, 0 0 0 3px $dark-gray-300;
|
||||
|
||||
// Windows High Contrast mode will show this outline, but not the box-shadow.
|
||||
outline: 2px solid transparent;
|
||||
|
|
|
|||
|
|
@ -36,6 +36,8 @@ $default-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-San
|
|||
'Helvetica Neue', sans-serif;
|
||||
$default-font-size: 13px;
|
||||
$default-line-height: 1.4;
|
||||
$white: $studio-white;
|
||||
$black: $studio-black;
|
||||
$blue-medium-900: #006589;
|
||||
$blue-medium-800: #00739c;
|
||||
$blue-medium-700: #007fac;
|
||||
|
|
@ -73,10 +75,32 @@ $radius-round-rectangle: 4px;
|
|||
$icon-button-size: 36px;
|
||||
$icon-button-size-small: 24px;
|
||||
|
||||
// Newspack variables. These are temporary until we move away from Newspack components.
|
||||
$muriel-white: $studio-white;
|
||||
$muriel-hot-pink-400: $studio-pink-40;
|
||||
$muriel-hot-pink-500: $studio-pink-50;
|
||||
$muriel-hot-pink-700: $studio-pink-70;
|
||||
$muriel-hot-purple-600: $studio-woocommerce-purple-60;
|
||||
$muriel-gray-0: $studio-gray-0;
|
||||
$muriel-gray-50: $studio-gray-5;
|
||||
$muriel-gray-100: $studio-gray-10;
|
||||
$muriel-gray-200: $studio-gray-20;
|
||||
$muriel-gray-300: $studio-gray-30;
|
||||
$muriel-gray-500: $studio-gray-50;
|
||||
$muriel-gray-600: $studio-gray-60;
|
||||
$muriel-gray-700: $studio-gray-70;
|
||||
$muriel-gray-800: $studio-gray-80;
|
||||
$muriel-green-400: $studio-green-40;
|
||||
$muriel-red-500: $studio-red-50;
|
||||
|
||||
// WordPress defaults
|
||||
$adminbar-height: 32px;
|
||||
$adminbar-height-mobile: 46px;
|
||||
|
||||
// wp-admin colors
|
||||
$wp-admin-background: #f1f1f1;
|
||||
$wp-admin-sidebar: #24292d;
|
||||
|
||||
// Muriel
|
||||
$muriel-box-shadow-1dp: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
|
||||
0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
||||
|
|
@ -84,9 +108,3 @@ $muriel-box-shadow-6dp: 0 3px 5px rgba(0, 0, 0, 0.2), 0 1px 18px rgba(0, 0, 0, 0
|
|||
0 6px 10px rgba(0, 0, 0, 0.14);
|
||||
$muriel-box-shadow-8dp: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
|
||||
0 3px 14px 2px rgba(0, 0, 0, 0.12);
|
||||
// @todo These can be removed once color-studio is updated to >= 2.0.0.
|
||||
$new-muriel-gray-5: #e3dfe2;
|
||||
$new-muriel-gray-20: #a7aaad;
|
||||
$new-muriel-gray-50: #646970;
|
||||
$new-muriel-gray-80: #2c3338;
|
||||
$new-muriel-primary-500: #005fb7;
|
||||
|
|
|
|||
|
|
@ -34,11 +34,11 @@
|
|||
a:link,
|
||||
a:visited,
|
||||
.components-button.is-link {
|
||||
color: $woocommerce-500;
|
||||
color: $studio-pink;
|
||||
}
|
||||
|
||||
a.components-button.is-button {
|
||||
color: $white;
|
||||
color: $studio-white;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
|
|
@ -47,22 +47,67 @@
|
|||
.components-button.is-link:hover,
|
||||
.components-button.is-link:active,
|
||||
.components-button.is-link:focus {
|
||||
color: $woocommerce-400;
|
||||
color: $studio-pink;
|
||||
}
|
||||
|
||||
a:focus {
|
||||
box-shadow: 0 0 0 1px $woocommerce-300, 0 0 2px 1px rgba($woocommerce-300, 0.8);
|
||||
box-shadow: 0 0 0 1px $studio-pink, 0 0 2px 1px rgba($studio-pink, 0.8);
|
||||
}
|
||||
|
||||
.components-button.is-button.is-primary {
|
||||
color: $white;
|
||||
color: $studio-white;
|
||||
|
||||
&:not(:disabled) {
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: $white;
|
||||
color: $studio-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input:focus,
|
||||
select:focus,
|
||||
button:focus {
|
||||
border-color: $studio-woocommerce-purple-60;
|
||||
box-shadow: 0 0 2px rgba($studio-woocommerce-purple-60, 0.8);
|
||||
}
|
||||
|
||||
input[type='checkbox'] {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
input[type='checkbox'],
|
||||
input[type='radio'] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
min-width: 18px;
|
||||
border: 2px solid $studio-gray-50;
|
||||
|
||||
&:focus {
|
||||
border-color: $studio-woocommerce-purple-60;
|
||||
box-shadow: 0 0 0 1px $studio-woocommerce-purple-60,
|
||||
0 0 2px 1px rgba($studio-woocommerce-purple-60, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked,
|
||||
input[type='radio']:checked {
|
||||
background-color: $studio-woocommerce-purple-60;
|
||||
border-color: $studio-woocommerce-purple-60;
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked::before {
|
||||
color: $studio-white;
|
||||
font-size: 18px;
|
||||
margin-left: -2.5px;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
input[type='radio']:checked::before {
|
||||
font-size: 18px;
|
||||
margin-left: 4px;
|
||||
margin-top: 4px;
|
||||
background-color: $studio-white;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import { __ } from '@wordpress/i18n';
|
|||
* Onboarding namespace.
|
||||
*/
|
||||
export const NAMESPACE = '/wc-admin/v1';
|
||||
export const JETPACK_NAMESPACE = '/jetpack/v4';
|
||||
|
||||
/**
|
||||
* Plugin slugs and names as key/value pairs.
|
||||
|
|
|
|||
|
|
@ -10,12 +10,13 @@ import apiFetch from '@wordpress/api-fetch';
|
|||
* Internal dependencies
|
||||
*/
|
||||
import { getResourceName } from '../utils';
|
||||
import { NAMESPACE, pluginNames } from './constants';
|
||||
import { JETPACK_NAMESPACE, NAMESPACE, pluginNames } from './constants';
|
||||
|
||||
function read( resourceNames, fetch = apiFetch ) {
|
||||
return [
|
||||
...readActivePlugins( resourceNames, fetch ),
|
||||
...readProfileItems( resourceNames, fetch ),
|
||||
...readJetpackStatus( resourceNames, fetch ),
|
||||
...readJetpackConnectUrl( resourceNames, fetch ),
|
||||
];
|
||||
}
|
||||
|
|
@ -170,6 +171,28 @@ function activatePluginToResource( response, items ) {
|
|||
return resources;
|
||||
}
|
||||
|
||||
function readJetpackStatus( resourceNames, fetch ) {
|
||||
const resourceName = 'jetpack-status';
|
||||
|
||||
if ( resourceNames.includes( resourceName ) ) {
|
||||
const url = JETPACK_NAMESPACE + '/connection';
|
||||
|
||||
return [
|
||||
fetch( {
|
||||
path: url,
|
||||
} )
|
||||
.then( response => {
|
||||
return { [ resourceName ]: { data: response } };
|
||||
} )
|
||||
.catch( error => {
|
||||
return { [ resourceName ]: { error: String( error.message ) } };
|
||||
} ),
|
||||
];
|
||||
}
|
||||
|
||||
return [];
|
||||
}
|
||||
|
||||
function readJetpackConnectUrl( resourceNames, fetch ) {
|
||||
const resourceName = 'jetpack-connect-url';
|
||||
|
||||
|
|
|
|||
|
|
@ -77,6 +77,24 @@ const getPluginInstallations = getResource => plugins => {
|
|||
return installations;
|
||||
};
|
||||
|
||||
const isJetpackConnected = ( getResource, requireResource ) => (
|
||||
requirement = DEFAULT_REQUIREMENT
|
||||
) => {
|
||||
const activePluginsData = requireResource( requirement, 'active-plugins' ).data || undefined;
|
||||
const activePlugins = ! activePluginsData
|
||||
? wcSettings.onboarding.activePlugins
|
||||
: activePluginsData;
|
||||
|
||||
// Avoid issuing API calls, since Jetpack is obviously not connected.
|
||||
if ( ! activePlugins.includes( 'jetpack' ) ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const data =
|
||||
requireResource( requirement, 'jetpack-status' ).data || wcSettings.dataEndpoints.jetpackStatus;
|
||||
return ( data && data.isActive ) || false;
|
||||
};
|
||||
|
||||
const getActivePlugins = ( getResource, requireResource ) => (
|
||||
requirement = DEFAULT_REQUIREMENT
|
||||
) => {
|
||||
|
|
@ -181,4 +199,5 @@ export default {
|
|||
getPluginActivationErrors,
|
||||
isPluginActivateRequesting,
|
||||
isPluginInstallRequesting,
|
||||
isJetpackConnected,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -8,16 +8,20 @@
|
|||
* [ReportSummary](components/analytics/report-summary.md)
|
||||
* [ReportTable](components/analytics/report-table.md)
|
||||
* [Package components](components/packages/)
|
||||
* [AdvancedFilters](components/packages/advanced-filters.md)
|
||||
* [AnimationSlider](components/packages/animation-slider.md)
|
||||
* [Autocomplete](components/packages/autocomplete.md)
|
||||
* [Calendar](components/packages/calendar.md)
|
||||
* [Card](components/packages/card.md)
|
||||
* [Chart](components/packages/chart.md)
|
||||
* [CompareFilter](components/packages/compare-filter.md)
|
||||
* [Count](components/packages/count.md)
|
||||
* [DateRangeFilterPicker](components/packages/date-range-filter-picker.md)
|
||||
* [Date](components/packages/date.md)
|
||||
* [DropdownButton](components/packages/dropdown-button.md)
|
||||
* [EllipsisMenu](components/packages/ellipsis-menu.md)
|
||||
* [EmptyContent](components/packages/empty-content.md)
|
||||
* [FilterPicker](components/packages/filter-picker.md)
|
||||
* [Filters](components/packages/filters.md)
|
||||
* [Flag](components/packages/flag.md)
|
||||
* [Form](components/packages/form.md)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,49 @@
|
|||
`AdvancedFilters` (component)
|
||||
=============================
|
||||
|
||||
Displays a configurable set of filters which can modify query parameters.
|
||||
|
||||
Props
|
||||
-----
|
||||
|
||||
### `config`
|
||||
|
||||
- **Required**
|
||||
- Type: Object
|
||||
- title: String
|
||||
- filters: Object
|
||||
- labels: Object
|
||||
- add: String
|
||||
- remove: String
|
||||
- rule: String
|
||||
- title: String
|
||||
- filter: String
|
||||
- rules: Array
|
||||
Object
|
||||
- input: Object
|
||||
- Default: null
|
||||
|
||||
The configuration object required to render filters.
|
||||
|
||||
### `path`
|
||||
|
||||
- **Required**
|
||||
- Type: String
|
||||
- Default: null
|
||||
|
||||
Name of this filter, used in translations.
|
||||
|
||||
### `query`
|
||||
|
||||
- Type: Object
|
||||
- Default: `{}`
|
||||
|
||||
The query string represented in object form.
|
||||
|
||||
### `onAdvancedFilterAction`
|
||||
|
||||
- Type: Function
|
||||
- Default: `() => {}`
|
||||
|
||||
Function to be called after an advanced filter action has been taken.
|
||||
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
`CompareFilter` (component)
|
||||
===========================
|
||||
|
||||
Displays a card + search used to filter results as a comparison between objects.
|
||||
|
||||
Props
|
||||
-----
|
||||
|
||||
### `getLabels`
|
||||
|
||||
- **Required**
|
||||
- Type: Function
|
||||
- Default: null
|
||||
|
||||
Function used to fetch object labels via an API request, returns a Promise.
|
||||
|
||||
### `labels`
|
||||
|
||||
- Type: Object
|
||||
- placeholder: String - Label for the search placeholder.
|
||||
- title: String - Label for the card title.
|
||||
- update: String - Label for button which updates the URL/report.
|
||||
- Default: `{}`
|
||||
|
||||
Object of localized labels.
|
||||
|
||||
### `param`
|
||||
|
||||
- **Required**
|
||||
- Type: String
|
||||
- Default: null
|
||||
|
||||
The parameter to use in the querystring.
|
||||
|
||||
### `path`
|
||||
|
||||
- **Required**
|
||||
- Type: String
|
||||
- Default: null
|
||||
|
||||
The `path` parameter supplied by React-Router
|
||||
|
||||
### `query`
|
||||
|
||||
- Type: Object
|
||||
- Default: `{}`
|
||||
|
||||
The query string represented in object form
|
||||
|
||||
### `type`
|
||||
|
||||
- **Required**
|
||||
- Type: String
|
||||
- Default: null
|
||||
|
||||
Which type of autocompleter should be used in the Search
|
||||
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
`DateRangeFilterPicker` (component)
|
||||
===================================
|
||||
|
||||
Select a range of dates or single dates.
|
||||
|
||||
Props
|
||||
-----
|
||||
|
||||
### `onRangeSelect`
|
||||
|
||||
- **Required**
|
||||
- Type: Function
|
||||
- Default: null
|
||||
|
||||
Callback called when selection is made.
|
||||
|
||||
### `query`
|
||||
|
||||
- Type: Object
|
||||
- Default: `{}`
|
||||
|
||||
The query string represented in object form.
|
||||
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
`FilterPicker` (component)
|
||||
==========================
|
||||
|
||||
Modify a url query parameter via a dropdown selection of configurable options.
|
||||
This component manipulates the `filter` query parameter.
|
||||
|
||||
Props
|
||||
-----
|
||||
|
||||
### `config`
|
||||
|
||||
- **Required**
|
||||
- Type: Object
|
||||
- label: String - A label above the filter selector.
|
||||
- staticParams: Array - Url parameters to persist when selecting a new filter.
|
||||
- param: String - The url paramter this filter will modify.
|
||||
- defaultValue: String - The default paramter value to use instead of 'all'.
|
||||
- showFilters: Function - Determine if the filter should be shown. Supply a function with the query object as an argument returning a boolean.
|
||||
- filters: Array
|
||||
- chartMode: One of: 'item-comparison', 'time-comparison'
|
||||
- component: String - A custom component used instead of a button, might have special handling for filtering. TBD, not yet implemented.
|
||||
- label: String - The label for this filter. Optional only for custom component filters.
|
||||
- path: String - An array representing the "path" to this filter, if nested.
|
||||
- subFilters: Array - An array of more filter objects that act as "children" to this item.
|
||||
This set of filters is shown if the parent filter is clicked.
|
||||
- value: String - The value for this filter, used to set the `filter` query param when clicked, if there are no `subFilters`.
|
||||
- Default: null
|
||||
|
||||
An array of filters and subFilters to construct the menu.
|
||||
|
||||
### `path`
|
||||
|
||||
- **Required**
|
||||
- Type: String
|
||||
- Default: null
|
||||
|
||||
The `path` parameter supplied by React-Router.
|
||||
|
||||
### `query`
|
||||
|
||||
- Type: Object
|
||||
- Default: `{}`
|
||||
|
||||
The query string represented in object form.
|
||||
|
||||
### `onFilterSelect`
|
||||
|
||||
- Type: Function
|
||||
- Default: `() => {}`
|
||||
|
||||
Function to be called after filter selection.
|
||||
|
||||
|
|
@ -66,184 +66,3 @@ Function to be called after filter selection.
|
|||
|
||||
Function to be called after an advanced filter action has been taken.
|
||||
|
||||
`AdvancedFilters` (component)
|
||||
=============================
|
||||
|
||||
Displays a configurable set of filters which can modify query parameters.
|
||||
|
||||
Props
|
||||
-----
|
||||
|
||||
### `config`
|
||||
|
||||
- **Required**
|
||||
- Type: Object
|
||||
- title: String
|
||||
- filters: Object
|
||||
- labels: Object
|
||||
- add: String
|
||||
- remove: String
|
||||
- rule: String
|
||||
- title: String
|
||||
- filter: String
|
||||
- rules: Array
|
||||
Object
|
||||
- input: Object
|
||||
- Default: null
|
||||
|
||||
The configuration object required to render filters.
|
||||
|
||||
### `path`
|
||||
|
||||
- **Required**
|
||||
- Type: String
|
||||
- Default: null
|
||||
|
||||
Name of this filter, used in translations.
|
||||
|
||||
### `query`
|
||||
|
||||
- Type: Object
|
||||
- Default: `{}`
|
||||
|
||||
The query string represented in object form.
|
||||
|
||||
### `onAdvancedFilterAction`
|
||||
|
||||
- Type: Function
|
||||
- Default: `() => {}`
|
||||
|
||||
Function to be called after an advanced filter action has been taken.
|
||||
|
||||
`CompareFilter` (component)
|
||||
===========================
|
||||
|
||||
Displays a card + search used to filter results as a comparison between objects.
|
||||
|
||||
Props
|
||||
-----
|
||||
|
||||
### `getLabels`
|
||||
|
||||
- **Required**
|
||||
- Type: Function
|
||||
- Default: null
|
||||
|
||||
Function used to fetch object labels via an API request, returns a Promise.
|
||||
|
||||
### `labels`
|
||||
|
||||
- Type: Object
|
||||
- placeholder: String - Label for the search placeholder.
|
||||
- title: String - Label for the card title.
|
||||
- update: String - Label for button which updates the URL/report.
|
||||
- Default: `{}`
|
||||
|
||||
Object of localized labels.
|
||||
|
||||
### `param`
|
||||
|
||||
- **Required**
|
||||
- Type: String
|
||||
- Default: null
|
||||
|
||||
The parameter to use in the querystring.
|
||||
|
||||
### `path`
|
||||
|
||||
- **Required**
|
||||
- Type: String
|
||||
- Default: null
|
||||
|
||||
The `path` parameter supplied by React-Router
|
||||
|
||||
### `query`
|
||||
|
||||
- Type: Object
|
||||
- Default: `{}`
|
||||
|
||||
The query string represented in object form
|
||||
|
||||
### `type`
|
||||
|
||||
- **Required**
|
||||
- Type: String
|
||||
- Default: null
|
||||
|
||||
Which type of autocompleter should be used in the Search
|
||||
|
||||
`DateRangeFilterPicker` (component)
|
||||
===================================
|
||||
|
||||
Select a range of dates or single dates.
|
||||
|
||||
Props
|
||||
-----
|
||||
|
||||
### `onRangeSelect`
|
||||
|
||||
- **Required**
|
||||
- Type: Function
|
||||
- Default: null
|
||||
|
||||
Callback called when selection is made.
|
||||
|
||||
### `query`
|
||||
|
||||
- Type: Object
|
||||
- Default: `{}`
|
||||
|
||||
The query string represented in object form.
|
||||
|
||||
`FilterPicker` (component)
|
||||
==========================
|
||||
|
||||
Modify a url query parameter via a dropdown selection of configurable options.
|
||||
This component manipulates the `filter` query parameter.
|
||||
|
||||
Props
|
||||
-----
|
||||
|
||||
### `config`
|
||||
|
||||
- **Required**
|
||||
- Type: Object
|
||||
- label: String - A label above the filter selector.
|
||||
- staticParams: Array - Url parameters to persist when selecting a new filter.
|
||||
- param: String - The url paramter this filter will modify.
|
||||
- defaultValue: String - The default paramter value to use instead of 'all'.
|
||||
- showFilters: Function - Determine if the filter should be shown. Supply a function with the query object as an argument returning a boolean.
|
||||
- filters: Array
|
||||
- chartMode: One of: 'item-comparison', 'time-comparison'
|
||||
- component: String - A custom component used instead of a button, might have special handling for filtering. TBD, not yet implemented.
|
||||
- label: String - The label for this filter. Optional only for custom component filters.
|
||||
- path: String - An array representing the "path" to this filter, if nested.
|
||||
- subFilters: Array - An array of more filter objects that act as "children" to this item.
|
||||
This set of filters is shown if the parent filter is clicked.
|
||||
- value: String - The value for this filter, used to set the `filter` query param when clicked, if there are no `subFilters`.
|
||||
- Default: null
|
||||
|
||||
An array of filters and subFilters to construct the menu.
|
||||
|
||||
### `path`
|
||||
|
||||
- **Required**
|
||||
- Type: String
|
||||
- Default: null
|
||||
|
||||
The `path` parameter supplied by React-Router.
|
||||
|
||||
### `query`
|
||||
|
||||
- Type: Object
|
||||
- Default: `{}`
|
||||
|
||||
The query string represented in object form.
|
||||
|
||||
### `onFilterSelect`
|
||||
|
||||
- Type: Function
|
||||
- Default: `() => {}`
|
||||
|
||||
Function to be called after filter selection.
|
||||
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ Additional class name to style the component.
|
|||
- before: ReactNode - Content displayed before the list item text.
|
||||
- className: String - Additional class name to style the list item.
|
||||
- description: String - Description displayed beneath the list item title.
|
||||
- content: One of type: string, node
|
||||
- href: String - Href attribute used in a Link wrapped around the item.
|
||||
- onClick: Function - Content displayed after the list item text.
|
||||
- target: String - Target attribute used for Link wrapper.
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<!-- Customization -->
|
||||
<style>
|
||||
:root {
|
||||
--theme-color : #95588a;
|
||||
--theme-color : #7f54b3;
|
||||
}
|
||||
.markdown-section h1 code,
|
||||
.markdown-section h2 code,
|
||||
|
|
|
|||
|
|
@ -4,6 +4,12 @@
|
|||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
"@automattic/color-studio": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@automattic/color-studio/-/color-studio-2.1.0.tgz",
|
||||
"integrity": "sha512-h1m7IRCz4UUQD8O568TKlCQDPyaEtNhzPs0TAP03dpOb/OIt/o8MBsa2gx9kwgcP/cpTLDEj0E5Z96YNBVDL4w==",
|
||||
"dev": true
|
||||
},
|
||||
"@babel/cli": {
|
||||
"version": "7.5.5",
|
||||
"resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.5.5.tgz",
|
||||
|
|
@ -4587,25 +4593,24 @@
|
|||
"dev": true
|
||||
},
|
||||
"babel-eslint": {
|
||||
"version": "10.0.2",
|
||||
"resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.0.2.tgz",
|
||||
"integrity": "sha512-UdsurWPtgiPgpJ06ryUnuaSXC2s0WoSZnQmEpbAH65XZSdwowgN5MvyP7e88nW07FYXv72erVtpBkxyDVKhH1Q==",
|
||||
"version": "10.0.3",
|
||||
"resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.0.3.tgz",
|
||||
"integrity": "sha512-z3U7eMY6r/3f3/JB9mTsLjyxrv0Yb1zb8PCWCLpguxfCzBIZUwy23R1t/XKewP+8mEN2Ck8Dtr4q20z6ce6SoA==",
|
||||
"requires": {
|
||||
"@babel/code-frame": "^7.0.0",
|
||||
"@babel/parser": "^7.0.0",
|
||||
"@babel/traverse": "^7.0.0",
|
||||
"@babel/types": "^7.0.0",
|
||||
"eslint-scope": "3.7.1",
|
||||
"eslint-visitor-keys": "^1.0.0"
|
||||
"eslint-visitor-keys": "^1.0.0",
|
||||
"resolve": "^1.12.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"eslint-scope": {
|
||||
"version": "3.7.1",
|
||||
"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-3.7.1.tgz",
|
||||
"integrity": "sha1-PWPD7f2gLgbgGkUq2IyqzHzctug=",
|
||||
"resolve": {
|
||||
"version": "1.12.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.12.0.tgz",
|
||||
"integrity": "sha512-B/dOmuoAik5bKcD6s6nXDCjzUKnaDvdkRyAk6rsmsKLipWj4797iothd7jmmUhWTfinVMU+wc56rYKsit2Qy4w==",
|
||||
"requires": {
|
||||
"esrecurse": "^4.1.0",
|
||||
"estraverse": "^4.1.1"
|
||||
"path-parse": "^1.0.6"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -5797,12 +5802,6 @@
|
|||
"color-name": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"color-studio": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/color-studio/-/color-studio-1.0.5.tgz",
|
||||
"integrity": "sha512-XW2pF7K4v0wd4G9oab7wxiaf07wW1chv5ZSEsKZ0aY8clS05/hnb1x5gNwytH949S0Tu9v9J6ttKaNebCt3gpg==",
|
||||
"dev": true
|
||||
},
|
||||
"colormin": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/colormin/-/colormin-1.1.2.tgz",
|
||||
|
|
@ -7163,9 +7162,9 @@
|
|||
}
|
||||
},
|
||||
"d3-scale-chromatic": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-1.4.0.tgz",
|
||||
"integrity": "sha512-0vyEt8ZqhdgzC+IvdkJZL7fc3k7UZyJvMxR3zvU312z/HilJ0N+WSY3099jAxdfhe99ak9VhcK1ChDVVGc8Q0Q==",
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-1.5.0.tgz",
|
||||
"integrity": "sha512-ACcL46DYImpRFMBcpk9HhtIyC7bTBR4fNOPxwVSl0LfulDAwyiHyPOTqcDG1+t5d4P9W7t/2NAuWu59aKko/cg==",
|
||||
"requires": {
|
||||
"d3-color": "1",
|
||||
"d3-interpolate": "1"
|
||||
|
|
@ -8343,9 +8342,9 @@
|
|||
}
|
||||
},
|
||||
"eslint-plugin-jest": {
|
||||
"version": "22.15.1",
|
||||
"resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-22.15.1.tgz",
|
||||
"integrity": "sha512-CWq/RR/3tLaKFB+FZcCJwU9hH5q/bKeO3rFP8G07+q7hcDCFNqpvdphVbEbGE6o6qo1UbciEev4ejUWv7brUhw==",
|
||||
"version": "22.15.2",
|
||||
"resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-22.15.2.tgz",
|
||||
"integrity": "sha512-p4NME9TgXIt+KgpxcXyNBvO30ZKxwFAO1dJZBc2OGfDnXVEtPwEyNs95GSr6RIE3xLHdjd8ngDdE2icRRXrbxg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@typescript-eslint/experimental-utils": "^1.13.0"
|
||||
|
|
@ -13278,9 +13277,9 @@
|
|||
"integrity": "sha512-Dm8Jhb5kiC4+ynYsVR4QDXKt+o2dfqGuY4hE2x+XlXZkdndlT80bJxfcMv5QGp/FCy6MhG7f5ElpmKPFKOSEpg=="
|
||||
},
|
||||
"memoize-one": {
|
||||
"version": "5.0.5",
|
||||
"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.0.5.tgz",
|
||||
"integrity": "sha512-ey6EpYv0tEaIbM/nTDOpHciXUvd+ackQrJgEzBwemhZZIWZjcyodqEcrmqDy2BKRTM3a65kKBV4WtLXJDt26SQ=="
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.1.1.tgz",
|
||||
"integrity": "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA=="
|
||||
},
|
||||
"memory-fs": {
|
||||
"version": "0.4.1",
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@
|
|||
"d3-axis": "1.0.12",
|
||||
"d3-format": "1.3.2",
|
||||
"d3-scale": "2.2.2",
|
||||
"d3-scale-chromatic": "1.4.0",
|
||||
"d3-scale-chromatic": "1.5.0",
|
||||
"d3-selection": "1.4.0",
|
||||
"d3-shape": "1.3.5",
|
||||
"d3-time-format": "2.1.3",
|
||||
|
|
@ -99,7 +99,7 @@
|
|||
"html-to-react": "1.4.1",
|
||||
"interpolate-components": "1.1.1",
|
||||
"marked": "0.7.0",
|
||||
"memoize-one": "5.0.5",
|
||||
"memoize-one": "5.1.1",
|
||||
"newspack-components": "0.1.5",
|
||||
"prismjs": "1.17.1",
|
||||
"qs": "6.8.0",
|
||||
|
|
@ -127,12 +127,12 @@
|
|||
"ast-types": "0.13.2",
|
||||
"autoprefixer": "9.6.1",
|
||||
"babel-core": "7.0.0-bridge.0",
|
||||
"babel-eslint": "10.0.2",
|
||||
"babel-eslint": "10.0.3",
|
||||
"babel-loader": "8.0.6",
|
||||
"babel-plugin-transform-class-properties": "6.24.1",
|
||||
"babel-plugin-transform-es2015-template-literals": "6.22.0",
|
||||
"chalk": "2.4.2",
|
||||
"color-studio": "1.0.5",
|
||||
"@automattic/color-studio": "2.1.0",
|
||||
"concurrently": "4.1.2",
|
||||
"copy-webpack-plugin": "5.0.4",
|
||||
"cross-env": "5.2.0",
|
||||
|
|
@ -143,7 +143,7 @@
|
|||
"eslint": "5.16.0",
|
||||
"eslint-config-wpcalypso": "4.0.1",
|
||||
"eslint-loader": "2.2.1",
|
||||
"eslint-plugin-jest": "22.15.1",
|
||||
"eslint-plugin-jest": "22.15.2",
|
||||
"eslint-plugin-jsx-a11y": "6.2.3",
|
||||
"eslint-plugin-react": "7.14.3",
|
||||
"eslint-plugin-wpcalypso": "4.1.0",
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
# 4.0.0
|
||||
- Changed the <List /> `description` prop to `content` and allowed content nodes to be passed in addition to strings.
|
||||
|
||||
# 3.2.0
|
||||
- AdvancedFilters component: fire `onAdvancedFilterAction` for match changes.
|
||||
- TableCard component: add `onSearch` and `onSort` function props.
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
"gridicons": "3.3.1",
|
||||
"interpolate-components": "1.1.1",
|
||||
"lodash": "4.17.15",
|
||||
"memoize-one": "5.0.5",
|
||||
"memoize-one": "5.1.1",
|
||||
"moment": "2.22.1",
|
||||
"prop-types": "15.7.2",
|
||||
"qs": "6.8.0",
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ import { isoDateFormat, toMoment } from '@woocommerce/date';
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import DatePicker from '../../calendar/date-picker';
|
||||
import DatePicker from '../calendar/date-picker';
|
||||
import { textContent } from './utils';
|
||||
import moment from 'moment';
|
||||
|
||||
|
|
@ -0,0 +1,141 @@
|
|||
```jsx
|
||||
import { AdvancedFilters } from '@woocommerce/components';
|
||||
const { orderStatuses } = wcSettings;
|
||||
|
||||
const path = (new URL(document.location)).searchParams.get('path') || '/devdocs';
|
||||
const query = {};
|
||||
|
||||
const advancedFilters = {
|
||||
title: 'Orders Match {{select /}} Filters',
|
||||
filters: {
|
||||
status: {
|
||||
labels: {
|
||||
add: 'Order Status',
|
||||
remove: 'Remove order status filter',
|
||||
rule: 'Select an order status filter match',
|
||||
title: '{{title}}Order Status{{/title}} {{rule /}} {{filter /}}',
|
||||
filter: 'Select an order status',
|
||||
},
|
||||
rules: [
|
||||
{
|
||||
value: 'is',
|
||||
label: 'Is',
|
||||
},
|
||||
{
|
||||
value: 'is_not',
|
||||
label: 'Is Not',
|
||||
},
|
||||
],
|
||||
input: {
|
||||
component: 'SelectControl',
|
||||
options: Object.keys( orderStatuses ).map( key => ( {
|
||||
value: key,
|
||||
label: orderStatuses[ key ],
|
||||
} ) ),
|
||||
},
|
||||
},
|
||||
product: {
|
||||
labels: {
|
||||
add: 'Products',
|
||||
placeholder: 'Search products',
|
||||
remove: 'Remove products filter',
|
||||
rule: 'Select a product filter match',
|
||||
title: '{{title}}Product{{/title}} {{rule /}} {{filter /}}',
|
||||
filter:'Select products',
|
||||
},
|
||||
rules: [
|
||||
{
|
||||
value: 'includes',
|
||||
label: 'Includes',
|
||||
},
|
||||
{
|
||||
value: 'excludes',
|
||||
label: 'Excludes',
|
||||
},
|
||||
],
|
||||
input: {
|
||||
component: 'Search',
|
||||
type: 'products',
|
||||
getLabels: () => Promise.resolve( [] ),
|
||||
},
|
||||
},
|
||||
customer: {
|
||||
labels: {
|
||||
add: 'Customer Type',
|
||||
remove: 'Remove customer filter',
|
||||
rule: 'Select a customer filter match',
|
||||
title: '{{title}}Customer is{{/title}} {{filter /}}',
|
||||
filter: 'Select a customer type',
|
||||
},
|
||||
input: {
|
||||
component: 'SelectControl',
|
||||
options: [
|
||||
{ value: 'new', label: 'New', },
|
||||
{ value: 'returning', label: 'Returning', },
|
||||
],
|
||||
defaultOption: 'new',
|
||||
},
|
||||
},
|
||||
quantity: {
|
||||
labels: {
|
||||
add: 'Item Quantity',
|
||||
remove: 'Remove item quantity filter',
|
||||
rule: 'Select an item quantity filter match',
|
||||
title: '{{title}}Item Quantity is{{/title}} {{rule /}} {{filter /}}',
|
||||
},
|
||||
rules: [
|
||||
{
|
||||
value: 'lessthan',
|
||||
label: 'Less Than',
|
||||
},
|
||||
{
|
||||
value: 'morethan',
|
||||
label: 'More Than',
|
||||
},
|
||||
{
|
||||
value: 'between',
|
||||
label: 'Between',
|
||||
},
|
||||
],
|
||||
input: {
|
||||
component: 'Number',
|
||||
},
|
||||
},
|
||||
subtotal: {
|
||||
labels: {
|
||||
add: 'Subtotal',
|
||||
remove: 'Remove subtotal filter',
|
||||
rule: 'Select a subtotal filter match',
|
||||
title: '{{title}}Subtotal is{{/title}} {{rule /}} {{filter /}}',
|
||||
},
|
||||
rules: [
|
||||
{
|
||||
value: 'lessthan',
|
||||
label: 'Less Than',
|
||||
},
|
||||
{
|
||||
value: 'morethan',
|
||||
label: 'More Than',
|
||||
},
|
||||
{
|
||||
value: 'between',
|
||||
label: 'Between',
|
||||
},
|
||||
],
|
||||
input: {
|
||||
component: 'Number',
|
||||
type: 'currency',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const MyAdvancedFilters = () => (
|
||||
<AdvancedFilters
|
||||
path={ path }
|
||||
query={ query }
|
||||
filterTitle="Orders"
|
||||
config={ advancedFilters }
|
||||
/>
|
||||
);
|
||||
```
|
||||
|
|
@ -25,8 +25,8 @@ import {
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import Card from '../../card';
|
||||
import Link from '../../link';
|
||||
import Card from '../card';
|
||||
import Link from '../link';
|
||||
import SelectFilter from './select-filter';
|
||||
import SearchFilter from './search-filter';
|
||||
import NumberFilter from './number-filter';
|
||||
|
|
@ -12,7 +12,7 @@ import { sprintf, __, _x } from '@wordpress/i18n';
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import TextControlWithAffixes from '../../text-control-with-affixes';
|
||||
import TextControlWithAffixes from '../text-control-with-affixes';
|
||||
import { textContent } from './utils';
|
||||
|
||||
/**
|
||||
|
|
@ -13,7 +13,7 @@ import classnames from 'classnames';
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import Search from '../../search';
|
||||
import Search from '../search';
|
||||
import { textContent } from './utils';
|
||||
|
||||
class SearchFilter extends Component {
|
||||
|
|
@ -87,7 +87,7 @@
|
|||
.woocommerce-filters-advanced__add-filter {
|
||||
padding: $gap-small;
|
||||
margin: 0;
|
||||
color: $woocommerce;
|
||||
color: $studio-woocommerce-purple;
|
||||
display: block;
|
||||
background-color: $core-grey-light-100;
|
||||
border-bottom: 1px solid $core-grey-light-700;
|
||||
|
|
@ -168,11 +168,11 @@
|
|||
}
|
||||
|
||||
&.components-icon-button:not(:disabled):not([aria-disabled='true']):not(.is-default):hover {
|
||||
color: $woocommerce-300;
|
||||
color: $studio-woocommerce-purple-30;
|
||||
}
|
||||
|
||||
&:not(:disabled):not([aria-disabled='true']):focus {
|
||||
color: $woocommerce;
|
||||
color: $studio-woocommerce-purple;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
|
@ -5,9 +5,9 @@
|
|||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid $new-muriel-gray-20;
|
||||
border: 1px solid $studio-gray-20;
|
||||
border-radius: 3px;
|
||||
background: $white;
|
||||
background: $studio-white;
|
||||
padding: $gap-small $gap;
|
||||
position: relative;
|
||||
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
.components-base-control__label {
|
||||
left: 52px;
|
||||
position: absolute;
|
||||
color: $new-muriel-gray-50;
|
||||
color: $studio-gray-50;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
font-size: 16px;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
color: $new-muriel-gray-80;
|
||||
color: $studio-gray-80;
|
||||
margin: $gap-small 0 0 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
|
|
@ -56,8 +56,8 @@
|
|||
}
|
||||
|
||||
&.is-active {
|
||||
box-shadow: 0 0 0 1px $new-muriel-primary-500;
|
||||
border-color: $new-muriel-primary-500;
|
||||
box-shadow: 0 0 0 1px $studio-wordpress-blue-50;
|
||||
border-color: $studio-wordpress-blue-50;
|
||||
}
|
||||
|
||||
&.with-value .components-base-control__label,
|
||||
|
|
@ -92,7 +92,7 @@
|
|||
}
|
||||
|
||||
.woocommerce-autocomplete__listbox {
|
||||
background: $white;
|
||||
background: $studio-white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
|
|
@ -118,7 +118,7 @@
|
|||
|
||||
&.is-selected,
|
||||
&:hover {
|
||||
background: $muriel-gray-0;
|
||||
background: $studio-gray-0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,19 +24,19 @@
|
|||
}
|
||||
|
||||
.CalendarDay__selected_span {
|
||||
background: $woocommerce;
|
||||
background: $studio-woocommerce-purple;
|
||||
border: 1px solid $core-grey-light-700;
|
||||
}
|
||||
|
||||
.CalendarDay__selected {
|
||||
background: $woocommerce-700;
|
||||
background: $studio-woocommerce-purple-70;
|
||||
border: 1px solid $core-grey-light-700;
|
||||
}
|
||||
|
||||
.CalendarDay__hovered_span {
|
||||
background: $woocommerce;
|
||||
background: $studio-woocommerce-purple;
|
||||
border: 1px solid $core-grey-light-500;
|
||||
color: $white;
|
||||
color: $studio-white;
|
||||
}
|
||||
|
||||
.CalendarDay__blocked_out_of_range {
|
||||
|
|
@ -71,7 +71,7 @@
|
|||
}
|
||||
|
||||
.CalendarDay__selected {
|
||||
background: $woocommerce-700;
|
||||
background: $studio-woocommerce-purple-70;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -173,7 +173,7 @@
|
|||
|
||||
.components-popover__content {
|
||||
background-color: $core-grey-dark-400;
|
||||
color: $white;
|
||||
color: $studio-white;
|
||||
padding: 0.5em;
|
||||
border: none;
|
||||
}
|
||||
|
|
@ -208,5 +208,5 @@
|
|||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 1em;
|
||||
background-color: $white;
|
||||
background-color: $studio-white;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
.woocommerce-card {
|
||||
margin-bottom: $gap-large;
|
||||
background: $white;
|
||||
background: $studio-white;
|
||||
border-radius: 3px;
|
||||
box-shadow: $muriel-box-shadow-1dp;
|
||||
transition: box-shadow 0.2s cubic-bezier(0.4, 1, 0.4, 1);
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
}
|
||||
|
||||
&.is-inactive {
|
||||
background-color: $muriel-gray-0;
|
||||
background-color: $studio-gray-0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -67,7 +67,7 @@
|
|||
.woocommerce-card__description {
|
||||
@include font-size( 16 );
|
||||
line-height: 1.5;
|
||||
color: $muriel-gray-500;
|
||||
color: $studio-gray-50;
|
||||
margin-top: $gap-small;
|
||||
margin-bottom: 0;
|
||||
font-weight: 400;
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
}
|
||||
|
||||
.woocommerce-legend__list {
|
||||
color: $black;
|
||||
color: $wp-admin-sidebar;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: $white;
|
||||
background-color: $studio-white;
|
||||
color: $core-grey-dark-500;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
|
|
@ -91,7 +91,7 @@
|
|||
left: 0;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background-color: $white;
|
||||
background-color: $studio-white;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
|
|
@ -109,7 +109,7 @@
|
|||
top: 2px;
|
||||
width: 3px;
|
||||
height: 6px;
|
||||
border: solid $white;
|
||||
border: solid $studio-white;
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
|
@ -184,7 +184,7 @@
|
|||
|
||||
.woocommerce-legend__total {
|
||||
align-items: center;
|
||||
background: $white;
|
||||
background: $studio-white;
|
||||
border-top: 1px solid $core-grey-light-700;
|
||||
bottom: 0;
|
||||
color: $core-grey-dark-500;
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
display: flex;
|
||||
min-width: 324px;
|
||||
height: auto;
|
||||
background-color: $white;
|
||||
background-color: $studio-white;
|
||||
text-align: left;
|
||||
padding: 17px;
|
||||
box-shadow: 0 3px 20px 0 rgba(18, 24, 30, 0.1), 0 1px 3px 0 rgba(18, 24, 30, 0.1);
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
.woocommerce-chart {
|
||||
margin-top: -$gap;
|
||||
margin-bottom: $gap-large;
|
||||
background: $white;
|
||||
background: $studio-white;
|
||||
border: 1px solid $core-grey-light-700;
|
||||
border-top: 0;
|
||||
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
|
||||
.woocommerce-chart__title {
|
||||
height: 18px;
|
||||
color: $black;
|
||||
color: $wp-admin-sidebar;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
line-height: 18px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
```jsx
|
||||
import { CompareFilter } from '@woocommerce/components';
|
||||
|
||||
const path = (new URL(document.location)).searchParams.get('path') || '/devdocs';
|
||||
const query = {};
|
||||
const compareFilter = {
|
||||
type: 'products',
|
||||
param: 'product',
|
||||
getLabels: function() {
|
||||
return Promise.resolve( [] );
|
||||
},
|
||||
labels: {
|
||||
helpText: 'Select at least two products to compare',
|
||||
placeholder: 'Search for products to compare',
|
||||
title: 'Compare Products',
|
||||
update: 'Compare',
|
||||
},
|
||||
};
|
||||
|
||||
const MyCompareFilter = () => (
|
||||
<CompareFilter path={ path } query={ query } { ...compareFilter } />
|
||||
);
|
||||
```
|
||||
|
|
@ -16,9 +16,9 @@ import { getIdsFromQuery, updateQueryString } from '@woocommerce/navigation';
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import Card from '../../card';
|
||||
import Card from '../card';
|
||||
import CompareButton from './button';
|
||||
import Search from '../../search';
|
||||
import Search from '../search';
|
||||
|
||||
/**
|
||||
* Displays a card + search used to filter results as a comparison between objects.
|
||||
|
|
@ -14,7 +14,7 @@ import { periods } from '@woocommerce/date';
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import SegmentedSelection from '../../segmented-selection';
|
||||
import SegmentedSelection from '../segmented-selection';
|
||||
|
||||
class ComparePeriods extends Component {
|
||||
render() {
|
||||
|
|
@ -13,8 +13,8 @@ import moment from 'moment';
|
|||
* Internal dependencies
|
||||
*/
|
||||
import ComparePeriods from './compare-periods';
|
||||
import DateRange from '../../calendar/date-range';
|
||||
import { H, Section } from '../../section';
|
||||
import DateRange from '../calendar/date-range';
|
||||
import { H, Section } from '../section';
|
||||
import PresetPeriods from './preset-periods';
|
||||
|
||||
class DatePickerContent extends Component {
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
```jsx
|
||||
import DateRangeFilterPicker from '@woocommerce/components';
|
||||
|
||||
const query = {};
|
||||
|
||||
const MyDateRangeFilterPicker = () => (
|
||||
<DateRangeFilterPicker
|
||||
key="daterange"
|
||||
query={ query }
|
||||
onRangeSelect={ () => {} }
|
||||
/>
|
||||
);
|
||||
```
|
||||
|
|
@ -16,7 +16,7 @@ import { getCurrentDates, getDateParamsFromQuery, isoDateFormat } from '@woocomm
|
|||
* Internal dependencies
|
||||
*/
|
||||
import DatePickerContent from './content';
|
||||
import DropdownButton from '../../dropdown-button';
|
||||
import DropdownButton from '../dropdown-button';
|
||||
|
||||
const shortDateFormat = __( 'MM/DD/YYYY', 'woocommerce-admin' );
|
||||
|
||||
|
|
@ -15,7 +15,7 @@ import { presetValues } from '@woocommerce/date';
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import SegmentedSelection from '../../segmented-selection';
|
||||
import SegmentedSelection from '../segmented-selection';
|
||||
|
||||
class PresetPeriods extends Component {
|
||||
render() {
|
||||
|
|
@ -41,16 +41,16 @@
|
|||
|
||||
button.woocommerce-filters-date__tab {
|
||||
outline: none;
|
||||
border: 1px solid $woocommerce;
|
||||
border: 1px solid $studio-pink;
|
||||
padding: $gap-smaller;
|
||||
margin: 0;
|
||||
border-radius: 4px 0 0 4px;
|
||||
color: $woocommerce;
|
||||
color: $studio-pink;
|
||||
background-color: transparent;
|
||||
justify-content: center;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($woocommerce, 50%);
|
||||
background-color: lighten($studio-pink, 50%);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -60,8 +60,8 @@ button.woocommerce-filters-date__tab {
|
|||
|
||||
&.is-active,
|
||||
&.is-active:focus {
|
||||
background-color: $woocommerce;
|
||||
color: $white;
|
||||
background-color: $studio-pink;
|
||||
color: $studio-white;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
|
@ -78,7 +78,7 @@ button.woocommerce-filters-date__tab {
|
|||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 1em;
|
||||
background-color: $white;
|
||||
background-color: $studio-white;
|
||||
}
|
||||
|
||||
.woocommerce-filters-date__content-controls {
|
||||
|
|
@ -87,7 +87,7 @@ button.woocommerce-filters-date__tab {
|
|||
width: 100%;
|
||||
align-items: center;
|
||||
padding-bottom: 1em;
|
||||
background-color: $white;
|
||||
background-color: $studio-white;
|
||||
|
||||
&.is-custom {
|
||||
border-top: 1px solid $core-grey-light-700;
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
/** @format */
|
||||
|
||||
.woocommerce-page .woocommerce-dropdown-button {
|
||||
background-color: $white;
|
||||
background-color: $studio-white;
|
||||
position: relative;
|
||||
border: 1px solid $core-grey-light-500;
|
||||
color: $core-grey-dark-500;
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
}
|
||||
|
||||
.components-form-toggle.is-checked .components-form-toggle__track {
|
||||
background-color: $woocommerce;
|
||||
background-color: $studio-woocommerce-purple;
|
||||
}
|
||||
|
||||
.woocommerce-ellipsis-menu__content {
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
color: $core-grey-dark-300;
|
||||
|
||||
&:focus {
|
||||
box-shadow: inset 0 0 0 1px #6c7781, inset 0 0 0 2px #fff;
|
||||
box-shadow: inset 0 0 0 1px #6c7781, inset 0 0 0 2px $studio-white;
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,46 @@
|
|||
```jsx
|
||||
import { FilterPicker } from '@woocommerce/components';
|
||||
|
||||
const path = (new URL(document.location)).searchParams.get('path') || '/devdocs';
|
||||
const query = {
|
||||
meal: 'breakfast',
|
||||
};
|
||||
const config = {
|
||||
label: 'Meal',
|
||||
staticParams: [],
|
||||
param: 'meal',
|
||||
showFilters: () => true,
|
||||
filters: [
|
||||
{ label: 'Breakfast', value: 'breakfast' },
|
||||
{
|
||||
label: 'Lunch',
|
||||
value: 'lunch',
|
||||
subFilters: [
|
||||
{ label: 'Meat', value: 'meat', path: [ 'lunch' ] },
|
||||
{ label: 'Vegan', value: 'vegan', path: [ 'lunch' ] },
|
||||
{
|
||||
label: 'Pescatarian',
|
||||
value: 'fish',
|
||||
path: [ 'lunch' ],
|
||||
subFilters: [
|
||||
{ label: 'Snapper', value: 'snapper', path: [ 'lunch', 'fish' ] },
|
||||
{ label: 'Cod', value: 'cod', path: [ 'lunch', 'fish' ] },
|
||||
// Specify a custom component to render (Work in Progress)
|
||||
{
|
||||
label: 'Other',
|
||||
value: 'other_fish',
|
||||
path: [ 'lunch', 'fish' ],
|
||||
component: 'OtherFish',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{ label: 'Dinner', value: 'dinner' },
|
||||
],
|
||||
};
|
||||
|
||||
const MyFilterPicker = () => (
|
||||
<FilterPicker config={ config } path={ path } query={ query } />
|
||||
);
|
||||
```
|
||||
|
|
@ -18,9 +18,9 @@ import { flattenFilters, getPersistedQuery, updateQueryString } from '@woocommer
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import AnimationSlider from '../../animation-slider';
|
||||
import DropdownButton from '../../dropdown-button';
|
||||
import Search from '../../search';
|
||||
import AnimationSlider from '../animation-slider';
|
||||
import DropdownButton from '../dropdown-button';
|
||||
import Search from '../search';
|
||||
|
||||
export const DEFAULT_FILTER = 'all';
|
||||
|
||||
|
|
@ -32,17 +32,17 @@
|
|||
|
||||
&.is-selected {
|
||||
.woocommerce-filters-filter__button {
|
||||
background-color: $white;
|
||||
background-color: $studio-white;
|
||||
|
||||
&.components-button:not(:disabled):not([aria-disabled='true']):focus {
|
||||
background-color: $white;
|
||||
background-color: $studio-white;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: $woocommerce;
|
||||
background-color: $studio-woocommerce-purple;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 1em;
|
||||
|
|
@ -15,10 +15,10 @@ import { updateQueryString } from '@woocommerce/navigation';
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import AdvancedFilters from './advanced';
|
||||
import CompareFilter from './compare';
|
||||
import DateRangeFilterPicker from './date';
|
||||
import FilterPicker from './filter';
|
||||
import AdvancedFilters from '../advanced-filters';
|
||||
import CompareFilter from '../compare-filter';
|
||||
import DateRangeFilterPicker from '../date-range-filter-picker';
|
||||
import FilterPicker from '../filter-picker';
|
||||
import { H, Section } from '../section';
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@
|
|||
.components-popover__content {
|
||||
width: 320px;
|
||||
border: 1px solid $core-grey-light-700;
|
||||
background-color: $white;
|
||||
background-color: $studio-white;
|
||||
}
|
||||
|
||||
.woocommerce-calendar__input-error .components-popover__content {
|
||||
|
|
|
|||
|
|
@ -5,16 +5,16 @@
|
|||
// Turn on react-dates classes/styles, see https://github.com/airbnb/react-dates#initialize
|
||||
import 'react-dates/initialize';
|
||||
|
||||
export { default as AdvancedFilters } from './filters/advanced';
|
||||
export { default as AdvancedFilters } from './advanced-filters';
|
||||
export { default as AnimationSlider } from './animation-slider';
|
||||
export { default as Autocomplete } from './autocomplete';
|
||||
export { default as Chart } from './chart';
|
||||
export { default as ChartPlaceholder } from './chart/placeholder';
|
||||
export { default as Card } from './card';
|
||||
export { default as Count } from './count';
|
||||
export { default as CompareFilter } from './filters/compare';
|
||||
export { default as CompareFilter } from './compare-filter';
|
||||
export { default as Date } from './date';
|
||||
export { default as DateRangeFilterPicker } from './filters/date';
|
||||
export { default as DateRangeFilterPicker } from './date-range-filter-picker';
|
||||
export { default as DateRange } from './calendar/date-range';
|
||||
export { default as DatePicker } from './calendar/date-picker';
|
||||
export { default as DropdownButton } from './dropdown-button';
|
||||
|
|
@ -22,7 +22,7 @@ export { default as EllipsisMenu } from './ellipsis-menu';
|
|||
export { default as EmptyContent } from './empty-content';
|
||||
export { default as Flag } from './flag';
|
||||
export { default as Form } from './form';
|
||||
export { default as FilterPicker } from './filters/filter';
|
||||
export { default as FilterPicker } from './filter-picker';
|
||||
export { default as Gravatar } from './gravatar';
|
||||
export { H, Section } from './section';
|
||||
export { default as ImageAsset } from './image-asset';
|
||||
|
|
|
|||
|
|
@ -5,22 +5,22 @@ import Gridicon from 'gridicons';
|
|||
const listItems = [
|
||||
{
|
||||
title: 'List item title',
|
||||
description: 'List item description text',
|
||||
content: 'List item description text',
|
||||
},
|
||||
{
|
||||
before: <Gridicon icon="star" />,
|
||||
title: 'List item with before icon',
|
||||
description: 'List item description text',
|
||||
content: 'List item description text',
|
||||
},
|
||||
{
|
||||
before: <Gridicon icon="star" />,
|
||||
after: <Gridicon icon="chevron-right" />,
|
||||
title: 'List item with before and after icons',
|
||||
description: 'List item description text',
|
||||
content: 'List item description text',
|
||||
},
|
||||
{
|
||||
title: 'Clickable list item',
|
||||
description: 'List item description text',
|
||||
content: 'List item description text',
|
||||
onClick: () => alert( 'List item clicked' ),
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ class List extends Component {
|
|||
return (
|
||||
<ul className={ listClassName } role="menu">
|
||||
{ items.map( ( item, i ) => {
|
||||
const { after, before, className: itemClasses, description, href, onClick, target, title } = item;
|
||||
const { after, before, className: itemClasses, content, href, onClick, target, title } = item;
|
||||
const hasAction = 'function' === typeof onClick || href;
|
||||
const itemClassName = classnames( 'woocommerce-list__item', itemClasses, {
|
||||
'has-action': hasAction,
|
||||
|
|
@ -63,9 +63,9 @@ class List extends Component {
|
|||
<span className="woocommerce-list__item-title">
|
||||
{ title }
|
||||
</span>
|
||||
{ description &&
|
||||
<span className="woocommerce-list__item-description">
|
||||
{ description }
|
||||
{ content &&
|
||||
<span className="woocommerce-list__item-content">
|
||||
{ content }
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
|
|
@ -106,9 +106,12 @@ List.propTypes = {
|
|||
*/
|
||||
className: PropTypes.string,
|
||||
/**
|
||||
* Description displayed beneath the list item title.
|
||||
* Content displayed beneath the list item title.
|
||||
*/
|
||||
description: PropTypes.string,
|
||||
content: PropTypes.oneOfType( [
|
||||
PropTypes.string,
|
||||
PropTypes.node,
|
||||
] ),
|
||||
/**
|
||||
* Href attribute used in a Link wrapped around the item.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
padding: $gap;
|
||||
|
||||
&:focus {
|
||||
box-shadow: inset 0 0 0 1px $new-muriel-primary-500, inset 0 0 0 2px #fff;
|
||||
box-shadow: inset 0 0 0 1px $studio-wordpress-blue, inset 0 0 0 2px $studio-white;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -23,10 +23,10 @@
|
|||
display: block;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: $muriel-gray-900;
|
||||
color: $studio-gray-90;
|
||||
}
|
||||
|
||||
.woocommerce-list__item-description {
|
||||
.woocommerce-list__item-content {
|
||||
margin-top: $gap-smallest;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
background: $button;
|
||||
|
||||
.components-button:not(:disabled):not([aria-disabled='true']) {
|
||||
color: $black;
|
||||
color: $wp-admin-sidebar;
|
||||
height: 30px;
|
||||
width: 32px;
|
||||
justify-content: center;
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@
|
|||
align-items: center;
|
||||
margin-bottom: 0;
|
||||
padding: $gap-small $gap;
|
||||
background: $white;
|
||||
background: $studio-white;
|
||||
// !important to keep the border around on hover
|
||||
border-bottom: 1px solid $core-grey-light-500 !important;
|
||||
color: $core-grey-dark-500;
|
||||
|
|
@ -182,7 +182,7 @@
|
|||
font-size: 0.8em;
|
||||
line-height: 1.4;
|
||||
color: $core-grey-dark-300;
|
||||
background: $white;
|
||||
background: $studio-white;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
width: 100%;
|
||||
padding: 4px 2px 4px 36px;
|
||||
border: 1px solid $core-grey-light-700;
|
||||
background-color: $white;
|
||||
background-color: $studio-white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
|
@ -114,7 +114,7 @@
|
|||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
padding: $gap-small;
|
||||
color: $woocommerce;
|
||||
color: $studio-woocommerce-purple;
|
||||
text-align: left;
|
||||
background: $core-grey-light-100;
|
||||
border-bottom: 1px solid $core-grey-light-500;
|
||||
|
|
@ -125,16 +125,16 @@
|
|||
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
color: $woocommerce;
|
||||
color: $studio-woocommerce-purple;
|
||||
background: $core-grey-light-200;
|
||||
}
|
||||
|
||||
&.is-selected,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $woocommerce;
|
||||
background: $white;
|
||||
box-shadow: inset 0 0 0 1px $core-grey-light-200, inset 0 0 0 2px $black;
|
||||
color: $studio-woocommerce-purple;
|
||||
background: $studio-white;
|
||||
box-shadow: inset 0 0 0 1px $core-grey-light-200, inset 0 0 0 2px $wp-admin-sidebar;
|
||||
}
|
||||
|
||||
.woocommerce-search__result-thumbnail {
|
||||
|
|
|
|||
|
|
@ -55,14 +55,14 @@
|
|||
}
|
||||
|
||||
&:checked + label .woocommerce-segmented-selection__label {
|
||||
background-color: $white;
|
||||
background-color: $studio-white;
|
||||
font-weight: 600;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: $woocommerce;
|
||||
background-color: $studio-woocommerce-purple;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-20px, -50%);
|
||||
|
|
@ -70,6 +70,6 @@
|
|||
}
|
||||
|
||||
&:focus + label .woocommerce-segmented-selection__label {
|
||||
box-shadow: inset 0 0 0 1px $black;
|
||||
box-shadow: inset 0 0 0 1px $wp-admin-sidebar;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
box-shadow: none;
|
||||
box-sizing: border-box;
|
||||
border-radius: 3px;
|
||||
background: #fff;
|
||||
background: $studio-white;
|
||||
font-size: 16px;
|
||||
line-height: 54px;
|
||||
font-weight: 400;
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
top: 0;
|
||||
right: $gap;
|
||||
bottom: 16px;
|
||||
color: #000;
|
||||
color: $studio-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
text-align: left;
|
||||
|
||||
&.is-selected {
|
||||
background: $muriel-gray-100;
|
||||
background: $studio-gray-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,5 +34,5 @@
|
|||
stroke-dashoffset: 0;
|
||||
transform-origin: center;
|
||||
animation: growAndShrink 2s ease-in-out infinite;
|
||||
stroke: $muriel-gray-900;
|
||||
stroke: $studio-gray-90;
|
||||
}
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue