@@ -225,4 +224,7 @@ DateRange.propTypes = {
shortDateFormat: PropTypes.string.isRequired,
};
-export default DateRange;
+export default withViewportMatch( {
+ isViewportMobile: '< medium',
+ isViewportSmall: '< small',
+} )( DateRange );
diff --git a/plugins/woocommerce-admin/client/components/calendar/input.js b/plugins/woocommerce-admin/packages/components/src/calendar/input.js
similarity index 100%
rename from plugins/woocommerce-admin/client/components/calendar/input.js
rename to plugins/woocommerce-admin/packages/components/src/calendar/input.js
diff --git a/plugins/woocommerce-admin/client/components/calendar/phrases.js b/plugins/woocommerce-admin/packages/components/src/calendar/phrases.js
similarity index 100%
rename from plugins/woocommerce-admin/client/components/calendar/phrases.js
rename to plugins/woocommerce-admin/packages/components/src/calendar/phrases.js
diff --git a/plugins/woocommerce-admin/client/components/calendar/style.scss b/plugins/woocommerce-admin/packages/components/src/calendar/style.scss
similarity index 100%
rename from plugins/woocommerce-admin/client/components/calendar/style.scss
rename to plugins/woocommerce-admin/packages/components/src/calendar/style.scss
diff --git a/plugins/woocommerce-admin/client/components/card/example.md b/plugins/woocommerce-admin/packages/components/src/card/example.md
similarity index 100%
rename from plugins/woocommerce-admin/client/components/card/example.md
rename to plugins/woocommerce-admin/packages/components/src/card/example.md
diff --git a/plugins/woocommerce-admin/client/components/card/index.js b/plugins/woocommerce-admin/packages/components/src/card/index.js
similarity index 89%
rename from plugins/woocommerce-admin/client/components/card/index.js
rename to plugins/woocommerce-admin/packages/components/src/card/index.js
index d0a30dc5c84..fc79d21e711 100644
--- a/plugins/woocommerce-admin/client/components/card/index.js
+++ b/plugins/woocommerce-admin/packages/components/src/card/index.js
@@ -9,10 +9,9 @@ import PropTypes from 'prop-types';
/**
* Internal dependencies
*/
-import './style.scss';
-import EllipsisMenu from 'components/ellipsis-menu';
-import { H, Section } from 'components/section';
-import { validateComponent } from 'lib/proptype-validator';
+import EllipsisMenu from '../ellipsis-menu';
+import { H, Section } from '../section';
+import { validateComponent } from '../../lib/proptype-validator';
/**
* A basic card component with a header. The header can contain a title, an action, and an `EllipsisMenu` menu.
diff --git a/plugins/woocommerce-admin/client/components/card/style.scss b/plugins/woocommerce-admin/packages/components/src/card/style.scss
similarity index 98%
rename from plugins/woocommerce-admin/client/components/card/style.scss
rename to plugins/woocommerce-admin/packages/components/src/card/style.scss
index 79692ccce57..3467cd738d7 100644
--- a/plugins/woocommerce-admin/client/components/card/style.scss
+++ b/plugins/woocommerce-admin/packages/components/src/card/style.scss
@@ -2,7 +2,7 @@
.woocommerce-card {
margin-bottom: $gap-large;
- background: white;
+ background: $white;
border: 1px solid $core-grey-light-700;
@include breakpoint( '<782px' ) {
diff --git a/plugins/woocommerce-admin/packages/components/src/card/test/__snapshots__/index.js.snap b/plugins/woocommerce-admin/packages/components/src/card/test/__snapshots__/index.js.snap
new file mode 100644
index 00000000000..74c3fce3b4a
--- /dev/null
+++ b/plugins/woocommerce-admin/packages/components/src/card/test/__snapshots__/index.js.snap
@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Card it renders correctly 1`] = `
+
+
+
+ A Card Example
+
+
+
+
+`;
diff --git a/plugins/woocommerce-admin/client/components/card/test/index.js b/plugins/woocommerce-admin/packages/components/src/card/test/index.js
similarity index 71%
rename from plugins/woocommerce-admin/client/components/card/test/index.js
rename to plugins/woocommerce-admin/packages/components/src/card/test/index.js
index 80d75cf3681..a5fad0da225 100644
--- a/plugins/woocommerce-admin/client/components/card/test/index.js
+++ b/plugins/woocommerce-admin/packages/components/src/card/test/index.js
@@ -3,7 +3,7 @@
*
* @format
*/
-
+import renderer from 'react-test-renderer';
import { shallow } from 'enzyme';
/**
@@ -12,6 +12,11 @@ import { shallow } from 'enzyme';
import Card from '../';
describe( 'Card', () => {
+ test( 'it renders correctly', () => {
+ const tree = renderer.create(
).toJSON();
+ expect( tree ).toMatchSnapshot();
+ } );
+
test( 'should have correct title', () => {
const card =
;
expect( card.props.title ).toBe( 'A Card Example' );
diff --git a/plugins/woocommerce-admin/client/components/count/example.md b/plugins/woocommerce-admin/packages/components/src/count/example.md
similarity index 100%
rename from plugins/woocommerce-admin/client/components/count/example.md
rename to plugins/woocommerce-admin/packages/components/src/count/example.md
diff --git a/plugins/woocommerce-admin/client/components/count/index.js b/plugins/woocommerce-admin/packages/components/src/count/index.js
similarity index 92%
rename from plugins/woocommerce-admin/client/components/count/index.js
rename to plugins/woocommerce-admin/packages/components/src/count/index.js
index ee9bfbcb72e..967881de05a 100644
--- a/plugins/woocommerce-admin/client/components/count/index.js
+++ b/plugins/woocommerce-admin/packages/components/src/count/index.js
@@ -4,10 +4,6 @@
*/
import { __, sprintf } from '@wordpress/i18n';
import PropTypes from 'prop-types';
-/**
- * Internal dependencies
- */
-import './style.scss';
/**
* Display a number with a styled border.
diff --git a/plugins/woocommerce-admin/client/components/count/style.scss b/plugins/woocommerce-admin/packages/components/src/count/style.scss
similarity index 100%
rename from plugins/woocommerce-admin/client/components/count/style.scss
rename to plugins/woocommerce-admin/packages/components/src/count/style.scss
diff --git a/plugins/woocommerce-admin/packages/components/src/count/test/__snapshots__/index.js.snap b/plugins/woocommerce-admin/packages/components/src/count/test/__snapshots__/index.js.snap
new file mode 100644
index 00000000000..0d77f5c451f
--- /dev/null
+++ b/plugins/woocommerce-admin/packages/components/src/count/test/__snapshots__/index.js.snap
@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Count it renders correctly 1`] = `
+
+ 33
+
+`;
diff --git a/plugins/woocommerce-admin/packages/components/src/count/test/index.js b/plugins/woocommerce-admin/packages/components/src/count/test/index.js
new file mode 100644
index 00000000000..2f1dc32efb8
--- /dev/null
+++ b/plugins/woocommerce-admin/packages/components/src/count/test/index.js
@@ -0,0 +1,17 @@
+/** @format */
+/**
+ * External dependencies
+ */
+import renderer from 'react-test-renderer';
+
+/**
+ * Internal dependencies
+ */
+import Count from '../';
+
+describe( 'Count', () => {
+ test( 'it renders correctly', () => {
+ const tree = renderer.create(
).toJSON();
+ expect( tree ).toMatchSnapshot();
+ } );
+} );
diff --git a/plugins/woocommerce-admin/client/components/dropdown-button/example.md b/plugins/woocommerce-admin/packages/components/src/dropdown-button/example.md
similarity index 100%
rename from plugins/woocommerce-admin/client/components/dropdown-button/example.md
rename to plugins/woocommerce-admin/packages/components/src/dropdown-button/example.md
diff --git a/plugins/woocommerce-admin/client/components/dropdown-button/index.js b/plugins/woocommerce-admin/packages/components/src/dropdown-button/index.js
similarity index 93%
rename from plugins/woocommerce-admin/client/components/dropdown-button/index.js
rename to plugins/woocommerce-admin/packages/components/src/dropdown-button/index.js
index 42ba9bf12af..b5f55de9db2 100644
--- a/plugins/woocommerce-admin/client/components/dropdown-button/index.js
+++ b/plugins/woocommerce-admin/packages/components/src/dropdown-button/index.js
@@ -6,11 +6,6 @@ import { Button } from '@wordpress/components';
import PropTypes from 'prop-types';
import classnames from 'classnames';
-/**
- * Internal dependencies
- */
-import './style.scss';
-
/**
* A button useful for a launcher of a dropdown component. The button is 100% width of its container and displays
* single or multiple lines rendered as `
` elments.
@@ -37,7 +32,7 @@ DropdownButton.propTypes = {
/**
* An array of elements to be rendered as the content of the button.
*/
- labels: PropTypes.array,
+ labels: PropTypes.array.isRequired,
/**
* Boolean describing if the dropdown in open or not.
*/
diff --git a/plugins/woocommerce-admin/client/components/dropdown-button/style.scss b/plugins/woocommerce-admin/packages/components/src/dropdown-button/style.scss
similarity index 100%
rename from plugins/woocommerce-admin/client/components/dropdown-button/style.scss
rename to plugins/woocommerce-admin/packages/components/src/dropdown-button/style.scss
diff --git a/plugins/woocommerce-admin/packages/components/src/dropdown-button/test/__snapshots__/index.js.snap b/plugins/woocommerce-admin/packages/components/src/dropdown-button/test/__snapshots__/index.js.snap
new file mode 100644
index 00000000000..dc70375924e
--- /dev/null
+++ b/plugins/woocommerce-admin/packages/components/src/dropdown-button/test/__snapshots__/index.js.snap
@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DropdownButton it renders correctly 1`] = `
+
+`;
diff --git a/plugins/woocommerce-admin/packages/components/src/dropdown-button/test/index.js b/plugins/woocommerce-admin/packages/components/src/dropdown-button/test/index.js
new file mode 100644
index 00000000000..738287f190c
--- /dev/null
+++ b/plugins/woocommerce-admin/packages/components/src/dropdown-button/test/index.js
@@ -0,0 +1,17 @@
+/** @format */
+/**
+ * External dependencies
+ */
+import renderer from 'react-test-renderer';
+
+/**
+ * Internal dependencies
+ */
+import DropdownButton from '../';
+
+describe( 'DropdownButton', () => {
+ test( 'it renders correctly', () => {
+ const tree = renderer.create(
).toJSON();
+ expect( tree ).toMatchSnapshot();
+ } );
+} );
diff --git a/plugins/woocommerce-admin/client/components/ellipsis-menu/example.md b/plugins/woocommerce-admin/packages/components/src/ellipsis-menu/example.md
similarity index 100%
rename from plugins/woocommerce-admin/client/components/ellipsis-menu/example.md
rename to plugins/woocommerce-admin/packages/components/src/ellipsis-menu/example.md
diff --git a/plugins/woocommerce-admin/client/components/ellipsis-menu/index.js b/plugins/woocommerce-admin/packages/components/src/ellipsis-menu/index.js
similarity index 96%
rename from plugins/woocommerce-admin/client/components/ellipsis-menu/index.js
rename to plugins/woocommerce-admin/packages/components/src/ellipsis-menu/index.js
index 623f40bca1d..7ea9ad52566 100644
--- a/plugins/woocommerce-admin/client/components/ellipsis-menu/index.js
+++ b/plugins/woocommerce-admin/packages/components/src/ellipsis-menu/index.js
@@ -7,11 +7,6 @@ import classnames from 'classnames';
import { IconButton, Dropdown, NavigableMenu } from '@wordpress/components';
import PropTypes from 'prop-types';
-/**
- * Internal dependencies
- */
-import './style.scss';
-
/**
* This is a dropdown menu hidden behind a vertical ellipsis icon. When clicked, the inner MenuItems are displayed.
*/
diff --git a/plugins/woocommerce-admin/client/components/ellipsis-menu/menu-item.js b/plugins/woocommerce-admin/packages/components/src/ellipsis-menu/menu-item.js
similarity index 100%
rename from plugins/woocommerce-admin/client/components/ellipsis-menu/menu-item.js
rename to plugins/woocommerce-admin/packages/components/src/ellipsis-menu/menu-item.js
diff --git a/plugins/woocommerce-admin/client/components/ellipsis-menu/menu-title.js b/plugins/woocommerce-admin/packages/components/src/ellipsis-menu/menu-title.js
similarity index 100%
rename from plugins/woocommerce-admin/client/components/ellipsis-menu/menu-title.js
rename to plugins/woocommerce-admin/packages/components/src/ellipsis-menu/menu-title.js
diff --git a/plugins/woocommerce-admin/client/components/ellipsis-menu/style.scss b/plugins/woocommerce-admin/packages/components/src/ellipsis-menu/style.scss
similarity index 100%
rename from plugins/woocommerce-admin/client/components/ellipsis-menu/style.scss
rename to plugins/woocommerce-admin/packages/components/src/ellipsis-menu/style.scss
diff --git a/plugins/woocommerce-admin/client/components/empty-content/example.md b/plugins/woocommerce-admin/packages/components/src/empty-content/example.md
similarity index 100%
rename from plugins/woocommerce-admin/client/components/empty-content/example.md
rename to plugins/woocommerce-admin/packages/components/src/empty-content/example.md
diff --git a/plugins/woocommerce-admin/client/components/empty-content/index.js b/plugins/woocommerce-admin/packages/components/src/empty-content/index.js
similarity index 93%
rename from plugins/woocommerce-admin/client/components/empty-content/index.js
rename to plugins/woocommerce-admin/packages/components/src/empty-content/index.js
index f3181082bd8..32aaeb2c8af 100644
--- a/plugins/woocommerce-admin/client/components/empty-content/index.js
+++ b/plugins/woocommerce-admin/packages/components/src/empty-content/index.js
@@ -10,9 +10,8 @@ import PropTypes from 'prop-types';
/**
* Internal dependencies
*/
-import './style.scss';
-import { H } from 'components/section';
-import ImageAsset from 'components/image-asset';
+import { H } from '../section';
+import ImageAsset from '../image-asset';
/**
* A component to be used when there is no data to show.
@@ -88,9 +87,9 @@ class EmptyContent extends Component {
}
render() {
- const { title, message, illustration } = this.props;
+ const { className, title, message, illustration } = this.props;
return (
-
+
{ illustration && this.renderIllustration() }
{ title ?
{ title } : null }
{ message ?
{ message }
: null }
diff --git a/plugins/woocommerce-admin/client/components/empty-content/style.scss b/plugins/woocommerce-admin/packages/components/src/empty-content/style.scss
similarity index 100%
rename from plugins/woocommerce-admin/client/components/empty-content/style.scss
rename to plugins/woocommerce-admin/packages/components/src/empty-content/style.scss
diff --git a/plugins/woocommerce-admin/client/components/filters/advanced/README.md b/plugins/woocommerce-admin/packages/components/src/filters/advanced/README.md
similarity index 96%
rename from plugins/woocommerce-admin/client/components/filters/advanced/README.md
rename to plugins/woocommerce-admin/packages/components/src/filters/advanced/README.md
index e629bd15c7d..c4c392cdef7 100644
--- a/plugins/woocommerce-admin/client/components/filters/advanced/README.md
+++ b/plugins/woocommerce-admin/packages/components/src/filters/advanced/README.md
@@ -54,7 +54,7 @@ const config = {
Render a select component with options.
-```jsx
+```jsx
input: {
component: 'SelectControl',
options: [
@@ -66,11 +66,11 @@ input: {
}
```
-`options`: An array of objects with `key` and `label` properties.
+`options`: An array of objects with `key` and `label` properties.
### Search
-Render an input for users to search and select using an autocomplete.
+Render an input for users to search and select using an autocomplete.
```jsx
input: {
@@ -83,7 +83,7 @@ input: {
}
```
-`type`: A string Autocompleter type used by the [Search Component](https://github.com/woocommerce/wc-admin/tree/master/client/components/search).
+`type`: A string Autocompleter type used by the [Search Component](https://github.com/woocommerce/wc-admin/tree/master/packages/components/src/search).
`getLabels`: A function returning a Promise resolving to an array of objects with `id` and `label` properties.
### Date
diff --git a/plugins/woocommerce-admin/client/components/filters/advanced/index.js b/plugins/woocommerce-admin/packages/components/src/filters/advanced/index.js
similarity index 97%
rename from plugins/woocommerce-admin/client/components/filters/advanced/index.js
rename to plugins/woocommerce-admin/packages/components/src/filters/advanced/index.js
index 4f070b0308d..8385b87b956 100644
--- a/plugins/woocommerce-admin/client/components/filters/advanced/index.js
+++ b/plugins/woocommerce-admin/packages/components/src/filters/advanced/index.js
@@ -11,19 +11,22 @@ import Gridicon from 'gridicons';
import interpolateComponents from 'interpolate-components';
/**
- * Internal dependencies
+ * WooCommerce dependencies
*/
-import Card from 'components/card';
-import Link from 'components/link';
-import SelectFilter from './select-filter';
-import SearchFilter from './search-filter';
import {
getActiveFiltersFromQuery,
- getQueryFromActiveFilters,
getDefaultOptionValue,
-} from './utils';
-import { getNewPath } from 'lib/nav-utils';
-import './style.scss';
+ getNewPath,
+ getQueryFromActiveFilters,
+} from '@woocommerce/navigation';
+
+/**
+ * Internal dependencies
+ */
+import Card from '../../card';
+import Link from '../../link';
+import SelectFilter from './select-filter';
+import SearchFilter from './search-filter';
const matches = [
{ value: 'all', label: __( 'All', 'wc-admin' ) },
@@ -144,7 +147,7 @@ class AdvancedFilters extends Component {
}
render() {
- const { config } = this.props;
+ const { config, query } = this.props;
const { activeFilters, match } = this.state;
const availableFilterKeys = this.getAvailableFilterKeys();
const updateHref = this.getUpdateHref( activeFilters, match );
@@ -172,6 +175,7 @@ class AdvancedFilters extends Component {
config={ config.filters[ key ] }
onFilterChange={ this.onFilterChange }
isEnglish={ isEnglish }
+ query={ query }
/>
) }
window.innerWidth < 782;
diff --git a/plugins/woocommerce-admin/client/components/filters/date/index.js b/plugins/woocommerce-admin/packages/components/src/filters/date/index.js
similarity index 97%
rename from plugins/woocommerce-admin/client/components/filters/date/index.js
rename to plugins/woocommerce-admin/packages/components/src/filters/date/index.js
index 7b24f14c04e..1260dbbbd57 100644
--- a/plugins/woocommerce-admin/client/components/filters/date/index.js
+++ b/plugins/woocommerce-admin/packages/components/src/filters/date/index.js
@@ -11,14 +11,13 @@ import PropTypes from 'prop-types';
* WooCommerce dependencies
*/
import { getCurrentDates, getDateParamsFromQuery, isoDateFormat } from '@woocommerce/date';
+import { updateQueryString } from '@woocommerce/navigation';
/**
* Internal dependencies
*/
import DatePickerContent from './content';
-import DropdownButton from 'components/dropdown-button';
-import { updateQueryString } from 'lib/nav-utils';
-import './style.scss';
+import DropdownButton from '../../dropdown-button';
const shortDateFormat = __( 'MM/DD/YYYY', 'wc-admin' );
diff --git a/plugins/woocommerce-admin/client/components/filters/date/preset-periods.js b/plugins/woocommerce-admin/packages/components/src/filters/date/preset-periods.js
similarity index 92%
rename from plugins/woocommerce-admin/client/components/filters/date/preset-periods.js
rename to plugins/woocommerce-admin/packages/components/src/filters/date/preset-periods.js
index 74309f5a957..8a6b8fc65e4 100644
--- a/plugins/woocommerce-admin/client/components/filters/date/preset-periods.js
+++ b/plugins/woocommerce-admin/packages/components/src/filters/date/preset-periods.js
@@ -15,7 +15,7 @@ import { presetValues } from '@woocommerce/date';
/**
* Internal dependencies
*/
-import SegmentedSelection from 'components/segmented-selection';
+import SegmentedSelection from '../../segmented-selection';
class PresetPeriods extends Component {
render() {
diff --git a/plugins/woocommerce-admin/client/components/filters/date/style.scss b/plugins/woocommerce-admin/packages/components/src/filters/date/style.scss
similarity index 100%
rename from plugins/woocommerce-admin/client/components/filters/date/style.scss
rename to plugins/woocommerce-admin/packages/components/src/filters/date/style.scss
diff --git a/plugins/woocommerce-admin/client/components/filters/example.md b/plugins/woocommerce-admin/packages/components/src/filters/example.md
similarity index 100%
rename from plugins/woocommerce-admin/client/components/filters/example.md
rename to plugins/woocommerce-admin/packages/components/src/filters/example.md
diff --git a/plugins/woocommerce-admin/client/components/filters/filter/README.md b/plugins/woocommerce-admin/packages/components/src/filters/filter/README.md
similarity index 100%
rename from plugins/woocommerce-admin/client/components/filters/filter/README.md
rename to plugins/woocommerce-admin/packages/components/src/filters/filter/README.md
diff --git a/plugins/woocommerce-admin/client/components/filters/filter/index.js b/plugins/woocommerce-admin/packages/components/src/filters/filter/index.js
similarity index 94%
rename from plugins/woocommerce-admin/client/components/filters/filter/index.js
rename to plugins/woocommerce-admin/packages/components/src/filters/filter/index.js
index 442cd07ff55..a955cf0bf92 100644
--- a/plugins/woocommerce-admin/client/components/filters/filter/index.js
+++ b/plugins/woocommerce-admin/packages/components/src/filters/filter/index.js
@@ -9,15 +9,17 @@ import { Component } from '@wordpress/element';
import { find, partial, last, get, includes } from 'lodash';
import PropTypes from 'prop-types';
+/**
+ * WooCommerce dependencies
+ */
+import { flattenFilters, getTimeRelatedQuery, updateQueryString } from '@woocommerce/navigation';
+
/**
* Internal dependencies
*/
-import AnimationSlider from 'components/animation-slider';
-import DropdownButton from 'components/dropdown-button';
-import Search from 'components/search';
-import { getTimeRelatedQuery, updateQueryString } from 'lib/nav-utils';
-import { flatenFilters } from './utils';
-import './style.scss';
+import AnimationSlider from '../../animation-slider';
+import DropdownButton from '../../dropdown-button';
+import Search from '../../search';
export const DEFAULT_FILTER = 'all';
@@ -45,7 +47,7 @@ class FilterPicker extends Component {
if ( selectedFilter.settings && selectedFilter.settings.getLabels ) {
const { query } = this.props;
const { param: filterParam, getLabels } = selectedFilter.settings;
- getLabels( query[ filterParam ] ).then( this.updateSelectedTag );
+ getLabels( query[ filterParam ], query ).then( this.updateSelectedTag );
}
}
@@ -55,7 +57,7 @@ class FilterPicker extends Component {
getFilter( value ) {
const { config, query } = this.props;
- const allFilters = flatenFilters( config.filters );
+ const allFilters = flattenFilters( config.filters );
value = value || query[ config.param ] || DEFAULT_FILTER;
return find( allFilters, { value } ) || {};
}
diff --git a/plugins/woocommerce-admin/client/components/filters/filter/style.scss b/plugins/woocommerce-admin/packages/components/src/filters/filter/style.scss
similarity index 100%
rename from plugins/woocommerce-admin/client/components/filters/filter/style.scss
rename to plugins/woocommerce-admin/packages/components/src/filters/filter/style.scss
diff --git a/plugins/woocommerce-admin/client/components/filters/index.js b/plugins/woocommerce-admin/packages/components/src/filters/index.js
similarity index 97%
rename from plugins/woocommerce-admin/client/components/filters/index.js
rename to plugins/woocommerce-admin/packages/components/src/filters/index.js
index ef0d4975a2d..4cdcd81206c 100644
--- a/plugins/woocommerce-admin/client/components/filters/index.js
+++ b/plugins/woocommerce-admin/packages/components/src/filters/index.js
@@ -14,8 +14,7 @@ import AdvancedFilters from './advanced';
import CompareFilter from './compare';
import DatePicker from './date';
import FilterPicker from './filter';
-import { H, Section } from 'components/section';
-import './style.scss';
+import { H, Section } from '../section';
/**
* Add a collection of report filters to a page. This uses `DatePicker` & `FilterPicker` for the "basic" filters, and `AdvancedFilters`
diff --git a/plugins/woocommerce-admin/client/components/filters/style.scss b/plugins/woocommerce-admin/packages/components/src/filters/style.scss
similarity index 93%
rename from plugins/woocommerce-admin/client/components/filters/style.scss
rename to plugins/woocommerce-admin/packages/components/src/filters/style.scss
index 43071daecc1..41f8c0c6113 100644
--- a/plugins/woocommerce-admin/client/components/filters/style.scss
+++ b/plugins/woocommerce-admin/packages/components/src/filters/style.scss
@@ -10,7 +10,7 @@
display: flex;
margin-bottom: $gap-large;
- @include breakpoint( '<1100px' ) {
+ @include breakpoint( '<1280px' ) {
flex-direction: column;
}
}
@@ -31,7 +31,7 @@
padding-right: 0;
}
- @include breakpoint( '<1100px' ) {
+ @include breakpoint( '<1280px' ) {
width: 50%;
padding: 0;
min-height: 78px;
@@ -46,7 +46,7 @@
margin: 7px 0;
display: block;
- @include breakpoint( '<1100px' ) {
+ @include breakpoint( '<1280px' ) {
margin: 5px 0;
}
}
diff --git a/plugins/woocommerce-admin/client/components/flag/example.md b/plugins/woocommerce-admin/packages/components/src/flag/example.md
similarity index 100%
rename from plugins/woocommerce-admin/client/components/flag/example.md
rename to plugins/woocommerce-admin/packages/components/src/flag/example.md
diff --git a/plugins/woocommerce-admin/client/components/flag/index.js b/plugins/woocommerce-admin/packages/components/src/flag/index.js
similarity index 96%
rename from plugins/woocommerce-admin/client/components/flag/index.js
rename to plugins/woocommerce-admin/packages/components/src/flag/index.js
index 45d781fd7b9..7d53386bef0 100644
--- a/plugins/woocommerce-admin/client/components/flag/index.js
+++ b/plugins/woocommerce-admin/packages/components/src/flag/index.js
@@ -7,11 +7,6 @@ import ReactFlag from 'react-world-flags';
import classnames from 'classnames';
import PropTypes from 'prop-types';
-/**
- * Internal dependencies
- */
-import './style.scss';
-
/**
* Use the `Flag` component to display a country's flag.
*
diff --git a/plugins/woocommerce-admin/client/components/flag/style.scss b/plugins/woocommerce-admin/packages/components/src/flag/style.scss
similarity index 100%
rename from plugins/woocommerce-admin/client/components/flag/style.scss
rename to plugins/woocommerce-admin/packages/components/src/flag/style.scss
diff --git a/plugins/woocommerce-admin/client/components/gravatar/example.md b/plugins/woocommerce-admin/packages/components/src/gravatar/example.md
similarity index 100%
rename from plugins/woocommerce-admin/client/components/gravatar/example.md
rename to plugins/woocommerce-admin/packages/components/src/gravatar/example.md
diff --git a/plugins/woocommerce-admin/client/components/gravatar/index.js b/plugins/woocommerce-admin/packages/components/src/gravatar/index.js
similarity index 97%
rename from plugins/woocommerce-admin/client/components/gravatar/index.js
rename to plugins/woocommerce-admin/packages/components/src/gravatar/index.js
index da709f7566c..56bb14001e2 100644
--- a/plugins/woocommerce-admin/client/components/gravatar/index.js
+++ b/plugins/woocommerce-admin/packages/components/src/gravatar/index.js
@@ -9,11 +9,6 @@ import url from 'url';
import { isString } from 'lodash';
import crypto from 'crypto';
-/**
- * Internal dependencies
- */
-import './style.scss';
-
/**
* Display a users Gravatar.
*
diff --git a/plugins/woocommerce-admin/client/components/gravatar/style.scss b/plugins/woocommerce-admin/packages/components/src/gravatar/style.scss
similarity index 100%
rename from plugins/woocommerce-admin/client/components/gravatar/style.scss
rename to plugins/woocommerce-admin/packages/components/src/gravatar/style.scss
diff --git a/plugins/woocommerce-admin/client/components/gravatar/test/index.js b/plugins/woocommerce-admin/packages/components/src/gravatar/test/index.js
similarity index 100%
rename from plugins/woocommerce-admin/client/components/gravatar/test/index.js
rename to plugins/woocommerce-admin/packages/components/src/gravatar/test/index.js
diff --git a/plugins/woocommerce-admin/client/components/higher-order/use-filters/README.md b/plugins/woocommerce-admin/packages/components/src/higher-order/use-filters/README.md
similarity index 76%
rename from plugins/woocommerce-admin/client/components/higher-order/use-filters/README.md
rename to plugins/woocommerce-admin/packages/components/src/higher-order/use-filters/README.md
index e659cf7b259..31465511950 100644
--- a/plugins/woocommerce-admin/client/components/higher-order/use-filters/README.md
+++ b/plugins/woocommerce-admin/packages/components/src/higher-order/use-filters/README.md
@@ -1,7 +1,7 @@
useFilters
==========
-`useFilters` is a fork of [gutenberg's `withFilters`](https://github.com/WordPress/gutenberg/tree/master/components/higher-order/with-filters). It is also a React [higher-order component](https://facebook.github.io/react/docs/higher-order-components.html).
+`useFilters` is a fork of [gutenberg's `withFilters`.](https://github.com/WordPress/gutenberg/tree/master/packages/components/src/higher-order/with-filters) It is also a React [higher-order component.](https://facebook.github.io/react/docs/higher-order-components.html)
Wrapping a component with `useFilters` provides a filtering capability controlled externally by the list of `hookName`s.
@@ -9,7 +9,7 @@ Wrapping a component with `useFilters` provides a filtering capability controlle
```jsx
import { applyFilters } from '@wordpress/hooks';
-import { useFilters } from 'components/higher-order/use-filters';
+import { useFilters } from '@woocommerce/components';
function MyCustomElement() {
return { applyFilters( 'woocommerce.componentTitle', 'Title Text' ) }
;
diff --git a/plugins/woocommerce-admin/client/components/higher-order/use-filters/index.js b/plugins/woocommerce-admin/packages/components/src/higher-order/use-filters/index.js
similarity index 100%
rename from plugins/woocommerce-admin/client/components/higher-order/use-filters/index.js
rename to plugins/woocommerce-admin/packages/components/src/higher-order/use-filters/index.js
diff --git a/plugins/woocommerce-admin/client/components/image-asset/example.md b/plugins/woocommerce-admin/packages/components/src/image-asset/example.md
similarity index 100%
rename from plugins/woocommerce-admin/client/components/image-asset/example.md
rename to plugins/woocommerce-admin/packages/components/src/image-asset/example.md
diff --git a/plugins/woocommerce-admin/client/components/image-asset/index.js b/plugins/woocommerce-admin/packages/components/src/image-asset/index.js
similarity index 100%
rename from plugins/woocommerce-admin/client/components/image-asset/index.js
rename to plugins/woocommerce-admin/packages/components/src/image-asset/index.js
diff --git a/plugins/woocommerce-admin/packages/components/src/index.js b/plugins/woocommerce-admin/packages/components/src/index.js
new file mode 100644
index 00000000000..79b7de8dd4d
--- /dev/null
+++ b/plugins/woocommerce-admin/packages/components/src/index.js
@@ -0,0 +1,47 @@
+/** @format */
+/**
+ * External Dependencies
+ */
+// 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 AnimationSlider } from './animation-slider';
+export { default as Card } from './card';
+export { default as Count } from './count';
+export { default as CompareFilter } from './filters/compare';
+export { default as DatePicker } from './filters/date';
+export { default as DateRange } from './calendar';
+export { default as DropdownButton } from './dropdown-button';
+export { default as EllipsisMenu } from './ellipsis-menu';
+export { default as EmptyContent } from './empty-content';
+export { default as Flag } from './flag';
+export { default as FilterPicker } from './filters/filter';
+export { default as Gravatar } from './gravatar';
+export { H, Section } from './section';
+export { default as ImageAsset } from './image-asset';
+export { default as Link } from './link';
+export { default as MenuItem } from './ellipsis-menu/menu-item';
+export { default as MenuTitle } from './ellipsis-menu/menu-title';
+export { default as OrderStatus } from './order-status';
+export { default as Pagination } from './pagination';
+export { default as ProductImage } from './product-image';
+export { default as ProductRating } from './rating/product';
+export { default as Rating } from './rating';
+export { default as ReportFilters } from './filters';
+export { default as ReviewRating } from './rating/review';
+export { default as Search } from './search';
+export { default as SectionHeader } from './section-header';
+export { default as SegmentedSelection } from './segmented-selection';
+export { default as SplitButton } from './split-button';
+export { default as SummaryList } from './summary';
+export { default as SummaryListPlaceholder } from './summary/placeholder';
+export { default as SummaryNumber } from './summary/item';
+export { default as Table } from './table/table';
+export { default as TableCard } from './table';
+export { default as EmptyTable } from './table/empty';
+export { default as TablePlaceholder } from './table/placeholder';
+export { default as TableSummary } from './table/summary';
+export { default as Tag } from './tag';
+export { default as useFilters } from './higher-order/use-filters';
+export { default as ViewMoreList } from './view-more-list';
diff --git a/plugins/woocommerce-admin/client/components/link/example.md b/plugins/woocommerce-admin/packages/components/src/link/example.md
similarity index 100%
rename from plugins/woocommerce-admin/client/components/link/example.md
rename to plugins/woocommerce-admin/packages/components/src/link/example.md
diff --git a/plugins/woocommerce-admin/client/components/link/index.js b/plugins/woocommerce-admin/packages/components/src/link/index.js
similarity index 93%
rename from plugins/woocommerce-admin/client/components/link/index.js
rename to plugins/woocommerce-admin/packages/components/src/link/index.js
index 7a4a0a4b397..463a0dcb861 100644
--- a/plugins/woocommerce-admin/client/components/link/index.js
+++ b/plugins/woocommerce-admin/packages/components/src/link/index.js
@@ -3,13 +3,13 @@
* External dependencies
*/
import { Component } from '@wordpress/element';
-import PropTypes from 'prop-types';
import { Link as RouterLink } from 'react-router-dom';
+import PropTypes from 'prop-types';
/**
- * Internal dependencies
+ * WooCommerce dependencies
*/
-import { getAdminLink } from 'lib/nav-utils';
+import { getAdminLink } from '@woocommerce/navigation';
/**
* Use `Link` to create a link to another resource. It accepts a type to automatically
diff --git a/plugins/woocommerce-admin/client/components/order-status/example.md b/plugins/woocommerce-admin/packages/components/src/order-status/example.md
similarity index 100%
rename from plugins/woocommerce-admin/client/components/order-status/example.md
rename to plugins/woocommerce-admin/packages/components/src/order-status/example.md
diff --git a/plugins/woocommerce-admin/client/components/order-status/index.js b/plugins/woocommerce-admin/packages/components/src/order-status/index.js
similarity index 94%
rename from plugins/woocommerce-admin/client/components/order-status/index.js
rename to plugins/woocommerce-admin/packages/components/src/order-status/index.js
index 4d6fcd77f0e..fc1a55ffa8b 100644
--- a/plugins/woocommerce-admin/client/components/order-status/index.js
+++ b/plugins/woocommerce-admin/packages/components/src/order-status/index.js
@@ -6,11 +6,6 @@
import classnames from 'classnames';
import PropTypes from 'prop-types';
-/**
- * Internal dependencies
- */
-import './style.scss';
-
/**
* Use `OrderStatus` to display a badge with human-friendly text describing the current order status.
*
diff --git a/plugins/woocommerce-admin/client/components/order-status/style.scss b/plugins/woocommerce-admin/packages/components/src/order-status/style.scss
similarity index 100%
rename from plugins/woocommerce-admin/client/components/order-status/style.scss
rename to plugins/woocommerce-admin/packages/components/src/order-status/style.scss
diff --git a/plugins/woocommerce-admin/client/components/pagination/example.md b/plugins/woocommerce-admin/packages/components/src/pagination/example.md
similarity index 100%
rename from plugins/woocommerce-admin/client/components/pagination/example.md
rename to plugins/woocommerce-admin/packages/components/src/pagination/example.md
diff --git a/plugins/woocommerce-admin/client/components/pagination/index.js b/plugins/woocommerce-admin/packages/components/src/pagination/index.js
similarity index 98%
rename from plugins/woocommerce-admin/client/components/pagination/index.js
rename to plugins/woocommerce-admin/packages/components/src/pagination/index.js
index dad30fab5bd..7068753733d 100644
--- a/plugins/woocommerce-admin/client/components/pagination/index.js
+++ b/plugins/woocommerce-admin/packages/components/src/pagination/index.js
@@ -10,11 +10,6 @@ import classNames from 'classnames';
import PropTypes from 'prop-types';
import { isFinite, noop, uniqueId } from 'lodash';
-/**
- * Internal dependencies
- */
-import './style.scss';
-
const PER_PAGE_OPTIONS = [ 25, 50, 75, 100 ];
/**
diff --git a/plugins/woocommerce-admin/client/components/pagination/style.scss b/plugins/woocommerce-admin/packages/components/src/pagination/style.scss
similarity index 100%
rename from plugins/woocommerce-admin/client/components/pagination/style.scss
rename to plugins/woocommerce-admin/packages/components/src/pagination/style.scss
diff --git a/plugins/woocommerce-admin/client/components/product-image/example.md b/plugins/woocommerce-admin/packages/components/src/product-image/example.md
similarity index 100%
rename from plugins/woocommerce-admin/client/components/product-image/example.md
rename to plugins/woocommerce-admin/packages/components/src/product-image/example.md
diff --git a/plugins/woocommerce-admin/client/components/product-image/index.js b/plugins/woocommerce-admin/packages/components/src/product-image/index.js
similarity index 73%
rename from plugins/woocommerce-admin/client/components/product-image/index.js
rename to plugins/woocommerce-admin/packages/components/src/product-image/index.js
index c55805594e2..e0614e9bbd0 100644
--- a/plugins/woocommerce-admin/client/components/product-image/index.js
+++ b/plugins/woocommerce-admin/packages/components/src/product-image/index.js
@@ -1,25 +1,21 @@
/** @format */
-
/**
* External dependencies
*/
import classnames from 'classnames';
import PropTypes from 'prop-types';
+import { get } from 'lodash';
/**
- * Internal dependencies
- */
-import './style.scss';
-
-/**
- * Use `ProductImage` to display a product's featured image. If no image can be found, a placeholder matching the front-end image
+ * Use `ProductImage` to display a product's or variation's featured image.
+ * If no image can be found, a placeholder matching the front-end image
* placeholder will be displayed.
*
* @return { object } -
*/
const ProductImage = ( { product, alt, width, height, className, ...props } ) => {
// The first returned image from the API is the featured/product image.
- const productImage = product && product.images && product.images[ 0 ];
+ const productImage = get( product, [ 'images', 0 ] ) || get( product, [ 'image' ] );
const src = ( productImage && productImage.src ) || false;
const altText = alt || ( productImage && productImage.alt ) || '';
@@ -53,8 +49,10 @@ ProductImage.propTypes = {
*/
className: PropTypes.string,
/**
- * Product object. The image to display will be pulled from `product.images`.
+ * Product or variation object. The image to display will be pulled from
+ * `product.images` or `variation.image`.
* See https://woocommerce.github.io/woocommerce-rest-api-docs/#product-properties
+ * and https://woocommerce.github.io/woocommerce-rest-api-docs/#product-variation-properties
*/
product: PropTypes.object,
/**
diff --git a/plugins/woocommerce-admin/client/components/product-image/style.scss b/plugins/woocommerce-admin/packages/components/src/product-image/style.scss
similarity index 100%
rename from plugins/woocommerce-admin/client/components/product-image/style.scss
rename to plugins/woocommerce-admin/packages/components/src/product-image/style.scss
diff --git a/plugins/woocommerce-admin/client/components/product-image/test/__snapshots__/index.js.snap b/plugins/woocommerce-admin/packages/components/src/product-image/test/__snapshots__/index.js.snap
similarity index 85%
rename from plugins/woocommerce-admin/client/components/product-image/test/__snapshots__/index.js.snap
rename to plugins/woocommerce-admin/packages/components/src/product-image/test/__snapshots__/index.js.snap
index ed2bf21ae5b..e8f2021b9ba 100644
--- a/plugins/woocommerce-admin/client/components/product-image/test/__snapshots__/index.js.snap
+++ b/plugins/woocommerce-admin/packages/components/src/product-image/test/__snapshots__/index.js.snap
@@ -40,6 +40,16 @@ exports[`ProductImage should render a product image 1`] = `
/>
`;
+exports[`ProductImage should render a variations image 1`] = `
+
+`;
+
exports[`ProductImage should render the passed alt prop 1`] = `
{
expect( image ).toMatchSnapshot();
} );
+ test( 'should render a variations image', () => {
+ const variation = {
+ name: 'Test Variation',
+ image: {
+ src: 'https://i.cloudup.com/pt4DjwRB84-3000x3000.png',
+ },
+ };
+ const image = shallow( );
+ expect( image ).toMatchSnapshot();
+ } );
+
test( 'should render a placeholder image if no product images are found', () => {
global.wcSettings.wcAssetUrl = 'https://woocommerce.com/wp-content/plugins/woocommerce/assets/';
const product = {
diff --git a/plugins/woocommerce-admin/client/components/rating/example.md b/plugins/woocommerce-admin/packages/components/src/rating/example.md
similarity index 100%
rename from plugins/woocommerce-admin/client/components/rating/example.md
rename to plugins/woocommerce-admin/packages/components/src/rating/example.md
diff --git a/plugins/woocommerce-admin/client/components/rating/index.js b/plugins/woocommerce-admin/packages/components/src/rating/index.js
similarity index 96%
rename from plugins/woocommerce-admin/client/components/rating/index.js
rename to plugins/woocommerce-admin/packages/components/src/rating/index.js
index 0550b3a4ca8..bcd53d90700 100644
--- a/plugins/woocommerce-admin/client/components/rating/index.js
+++ b/plugins/woocommerce-admin/packages/components/src/rating/index.js
@@ -9,11 +9,6 @@ import { Component } from '@wordpress/element';
import Gridicon from 'gridicons';
import PropTypes from 'prop-types';
-/**
- * Internal dependencies
- */
-import './style.scss';
-
/**
* Use `Rating` to display a set of stars, filled, empty or half-filled, that represents a
* rating in a scale between 0 and the prop `totalStars` (default 5).
diff --git a/plugins/woocommerce-admin/client/components/rating/product.js b/plugins/woocommerce-admin/packages/components/src/rating/product.js
similarity index 100%
rename from plugins/woocommerce-admin/client/components/rating/product.js
rename to plugins/woocommerce-admin/packages/components/src/rating/product.js
diff --git a/plugins/woocommerce-admin/client/components/rating/review.js b/plugins/woocommerce-admin/packages/components/src/rating/review.js
similarity index 100%
rename from plugins/woocommerce-admin/client/components/rating/review.js
rename to plugins/woocommerce-admin/packages/components/src/rating/review.js
diff --git a/plugins/woocommerce-admin/client/components/rating/style.scss b/plugins/woocommerce-admin/packages/components/src/rating/style.scss
similarity index 100%
rename from plugins/woocommerce-admin/client/components/rating/style.scss
rename to plugins/woocommerce-admin/packages/components/src/rating/style.scss
diff --git a/plugins/woocommerce-admin/client/components/rating/test/__snapshots__/index.js.snap b/plugins/woocommerce-admin/packages/components/src/rating/test/__snapshots__/index.js.snap
similarity index 100%
rename from plugins/woocommerce-admin/client/components/rating/test/__snapshots__/index.js.snap
rename to plugins/woocommerce-admin/packages/components/src/rating/test/__snapshots__/index.js.snap
diff --git a/plugins/woocommerce-admin/client/components/rating/test/index.js b/plugins/woocommerce-admin/packages/components/src/rating/test/index.js
similarity index 100%
rename from plugins/woocommerce-admin/client/components/rating/test/index.js
rename to plugins/woocommerce-admin/packages/components/src/rating/test/index.js
diff --git a/plugins/woocommerce-admin/client/components/search/autocomplete.js b/plugins/woocommerce-admin/packages/components/src/search/autocomplete.js
similarity index 100%
rename from plugins/woocommerce-admin/client/components/search/autocomplete.js
rename to plugins/woocommerce-admin/packages/components/src/search/autocomplete.js
diff --git a/plugins/woocommerce-admin/client/components/search/autocompleters/coupons.js b/plugins/woocommerce-admin/packages/components/src/search/autocompleters/coupons.js
similarity index 94%
rename from plugins/woocommerce-admin/client/components/search/autocompleters/coupons.js
rename to plugins/woocommerce-admin/packages/components/src/search/autocompleters/coupons.js
index 53fd6f977c9..d0d4b3b9d4d 100644
--- a/plugins/woocommerce-admin/client/components/search/autocompleters/coupons.js
+++ b/plugins/woocommerce-admin/packages/components/src/search/autocompleters/coupons.js
@@ -4,11 +4,15 @@
*/
import apiFetch from '@wordpress/api-fetch';
+/**
+ * WooCommerce dependencies
+ */
+import { stringifyQuery } from '@woocommerce/navigation';
+
/**
* Internal dependencies
*/
import { computeSuggestionMatch } from './utils';
-import { stringifyQuery } from 'lib/nav-utils';
import { NAMESPACE } from 'store/constants';
/**
diff --git a/plugins/woocommerce-admin/client/components/search/autocompleters/index.js b/plugins/woocommerce-admin/packages/components/src/search/autocompleters/index.js
similarity index 79%
rename from plugins/woocommerce-admin/client/components/search/autocompleters/index.js
rename to plugins/woocommerce-admin/packages/components/src/search/autocompleters/index.js
index babe4b3d63b..04cc04bc099 100644
--- a/plugins/woocommerce-admin/client/components/search/autocompleters/index.js
+++ b/plugins/woocommerce-admin/packages/components/src/search/autocompleters/index.js
@@ -2,6 +2,7 @@
/**
* Export all autocompleters
*/
+export { default as coupons } from './coupons';
export { default as product } from './product';
export { default as productCategory } from './product-cat';
-export { default as coupons } from './coupons';
+export { default as variations } from './variations';
diff --git a/plugins/woocommerce-admin/client/components/search/autocompleters/product-cat.js b/plugins/woocommerce-admin/packages/components/src/search/autocompleters/product-cat.js
similarity index 94%
rename from plugins/woocommerce-admin/client/components/search/autocompleters/product-cat.js
rename to plugins/woocommerce-admin/packages/components/src/search/autocompleters/product-cat.js
index 939d3020e79..8819a2fd2bf 100644
--- a/plugins/woocommerce-admin/client/components/search/autocompleters/product-cat.js
+++ b/plugins/woocommerce-admin/packages/components/src/search/autocompleters/product-cat.js
@@ -4,11 +4,15 @@
*/
import apiFetch from '@wordpress/api-fetch';
+/**
+ * WooCommerce dependencies
+ */
+import { stringifyQuery } from '@woocommerce/navigation';
+
/**
* Internal dependencies
*/
import { computeSuggestionMatch } from './utils';
-import { stringifyQuery } from 'lib/nav-utils';
import { NAMESPACE } from 'store/constants';
/**
diff --git a/plugins/woocommerce-admin/client/components/search/autocompleters/product.js b/plugins/woocommerce-admin/packages/components/src/search/autocompleters/product.js
similarity index 92%
rename from plugins/woocommerce-admin/client/components/search/autocompleters/product.js
rename to plugins/woocommerce-admin/packages/components/src/search/autocompleters/product.js
index a4257b3e5d7..715672bda87 100644
--- a/plugins/woocommerce-admin/client/components/search/autocompleters/product.js
+++ b/plugins/woocommerce-admin/packages/components/src/search/autocompleters/product.js
@@ -4,12 +4,16 @@
*/
import apiFetch from '@wordpress/api-fetch';
+/**
+ * WooCommerce dependencies
+ */
+import { stringifyQuery } from '@woocommerce/navigation';
+
/**
* Internal dependencies
*/
import { computeSuggestionMatch } from './utils';
-import ProductImage from 'components/product-image';
-import { stringifyQuery } from 'lib/nav-utils';
+import ProductImage from '../../product-image';
import { NAMESPACE } from 'store/constants';
/**
diff --git a/plugins/woocommerce-admin/client/components/search/autocompleters/utils.js b/plugins/woocommerce-admin/packages/components/src/search/autocompleters/utils.js
similarity index 100%
rename from plugins/woocommerce-admin/client/components/search/autocompleters/utils.js
rename to plugins/woocommerce-admin/packages/components/src/search/autocompleters/utils.js
diff --git a/plugins/woocommerce-admin/packages/components/src/search/autocompleters/variations.js b/plugins/woocommerce-admin/packages/components/src/search/autocompleters/variations.js
new file mode 100644
index 00000000000..088875b965c
--- /dev/null
+++ b/plugins/woocommerce-admin/packages/components/src/search/autocompleters/variations.js
@@ -0,0 +1,94 @@
+/** @format */
+/**
+ * External dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+
+/**
+ * WooCommerce dependencies
+ */
+import { stringifyQuery, getQuery } from '@woocommerce/navigation';
+
+/**
+ * Internal dependencies
+ */
+import { computeSuggestionMatch } from './utils';
+import ProductImage from '../../product-image';
+import { NAMESPACE } from 'store/constants';
+
+/**
+ * Create a variation name by concatenating each of the variation's
+ * attribute option strings.
+ *
+ * @param {object} variation - variation returned by the api
+ * @returns {string} - variation name
+ */
+function getVariationName( variation ) {
+ return variation.attributes.reduce(
+ ( desc, attribute, index, arr ) =>
+ desc + `${ attribute.option }${ arr.length === index + 1 ? '' : ', ' }`,
+ ''
+ );
+}
+
+/**
+ * A products completer.
+ * See https://github.com/WordPress/gutenberg/tree/master/packages/components/src/autocomplete#the-completer-interface
+ *
+ * @type {Completer}
+ */
+export default {
+ name: 'products',
+ className: 'woocommerce-search__product-result',
+ options( search ) {
+ let payload = '';
+ if ( search ) {
+ const query = {
+ search: encodeURIComponent( search ),
+ per_page: 10,
+ };
+ payload = stringifyQuery( query );
+ }
+ const product = getQuery().products;
+ if ( ! product || product.includes( ',' ) ) {
+ console.warn( 'Invalid product id supplied to Variations autocompleter' );
+ }
+ return apiFetch( { path: `${ NAMESPACE }products/${ product }/variations${ payload }` } );
+ },
+ isDebounced: true,
+ getOptionKeywords( variation ) {
+ return [ getVariationName( variation ) ];
+ },
+ getOptionLabel( variation, query ) {
+ const match = computeSuggestionMatch( getVariationName( variation ), query ) || {};
+ return [
+ ,
+
+ { match.suggestionBeforeMatch }
+
+ { match.suggestionMatch }
+
+ { match.suggestionAfterMatch }
+ ,
+ ];
+ },
+ // This is slightly different than gutenberg/Autocomplete, we don't support different methods
+ // of replace/insertion, so we can just return the value.
+ getOptionCompletion( variation ) {
+ return {
+ id: variation.id,
+ label: getVariationName( variation ),
+ };
+ },
+};
diff --git a/plugins/woocommerce-admin/client/components/search/example.md b/plugins/woocommerce-admin/packages/components/src/search/example.md
similarity index 100%
rename from plugins/woocommerce-admin/client/components/search/example.md
rename to plugins/woocommerce-admin/packages/components/src/search/example.md
diff --git a/plugins/woocommerce-admin/client/components/search/index.js b/plugins/woocommerce-admin/packages/components/src/search/index.js
similarity index 95%
rename from plugins/woocommerce-admin/client/components/search/index.js
rename to plugins/woocommerce-admin/packages/components/src/search/index.js
index 50f04aa6236..109795d3f5a 100644
--- a/plugins/woocommerce-admin/client/components/search/index.js
+++ b/plugins/woocommerce-admin/packages/components/src/search/index.js
@@ -14,9 +14,8 @@ import classnames from 'classnames';
* Internal dependencies
*/
import Autocomplete from './autocomplete';
-import { product, productCategory, coupons } from './autocompleters';
-import Tag from 'components/tag';
-import './style.scss';
+import { product, productCategory, coupons, variations } from './autocompleters';
+import Tag from '../tag';
/**
* A search box which autocompletes results while typing, allowing for the user to select an existing object
@@ -73,6 +72,8 @@ class Search extends Component {
return productCategory;
case 'coupons':
return coupons;
+ case 'variations':
+ return variations;
default:
return {};
}
@@ -197,8 +198,14 @@ Search.propTypes = {
/**
* The object type to be used in searching.
*/
- type: PropTypes.oneOf( [ 'products', 'product_cats', 'orders', 'customers', 'coupons' ] )
- .isRequired,
+ type: PropTypes.oneOf( [
+ 'products',
+ 'product_cats',
+ 'orders',
+ 'customers',
+ 'coupons',
+ 'variations',
+ ] ).isRequired,
/**
* A placeholder for the search input.
*/
diff --git a/plugins/woocommerce-admin/client/components/search/style.scss b/plugins/woocommerce-admin/packages/components/src/search/style.scss
similarity index 100%
rename from plugins/woocommerce-admin/client/components/search/style.scss
rename to plugins/woocommerce-admin/packages/components/src/search/style.scss
diff --git a/plugins/woocommerce-admin/client/components/section-header/example.md b/plugins/woocommerce-admin/packages/components/src/section-header/example.md
similarity index 100%
rename from plugins/woocommerce-admin/client/components/section-header/example.md
rename to plugins/woocommerce-admin/packages/components/src/section-header/example.md
diff --git a/plugins/woocommerce-admin/client/components/section-header/index.js b/plugins/woocommerce-admin/packages/components/src/section-header/index.js
similarity index 88%
rename from plugins/woocommerce-admin/client/components/section-header/index.js
rename to plugins/woocommerce-admin/packages/components/src/section-header/index.js
index 28888a66c30..a626819d028 100644
--- a/plugins/woocommerce-admin/client/components/section-header/index.js
+++ b/plugins/woocommerce-admin/packages/components/src/section-header/index.js
@@ -9,10 +9,9 @@ import PropTypes from 'prop-types';
/**
* Internal dependencies
*/
-import './style.scss';
-import EllipsisMenu from 'components/ellipsis-menu';
-import { H } from 'components/section';
-import { validateComponent } from 'lib/proptype-validator';
+import EllipsisMenu from '../ellipsis-menu';
+import { H } from '../section';
+import { validateComponent } from '../../lib/proptype-validator';
/**
* A header component. The header can contain a title, actions via children, and an `EllipsisMenu` menu.
diff --git a/plugins/woocommerce-admin/client/components/section-header/style.scss b/plugins/woocommerce-admin/packages/components/src/section-header/style.scss
similarity index 100%
rename from plugins/woocommerce-admin/client/components/section-header/style.scss
rename to plugins/woocommerce-admin/packages/components/src/section-header/style.scss
diff --git a/plugins/woocommerce-admin/client/components/section-header/test/__snapshots__/index.js.snap b/plugins/woocommerce-admin/packages/components/src/section-header/test/__snapshots__/index.js.snap
similarity index 100%
rename from plugins/woocommerce-admin/client/components/section-header/test/__snapshots__/index.js.snap
rename to plugins/woocommerce-admin/packages/components/src/section-header/test/__snapshots__/index.js.snap
diff --git a/plugins/woocommerce-admin/client/components/section-header/test/index.js b/plugins/woocommerce-admin/packages/components/src/section-header/test/index.js
similarity index 93%
rename from plugins/woocommerce-admin/client/components/section-header/test/index.js
rename to plugins/woocommerce-admin/packages/components/src/section-header/test/index.js
index e91a920215e..a2af5e32f11 100644
--- a/plugins/woocommerce-admin/client/components/section-header/test/index.js
+++ b/plugins/woocommerce-admin/packages/components/src/section-header/test/index.js
@@ -1,9 +1,7 @@
+/** @format */
/**
* External dependencies
- *
- * @format
*/
-import React from 'react';
import renderer from 'react-test-renderer';
/**
diff --git a/plugins/woocommerce-admin/client/components/section/example.md b/plugins/woocommerce-admin/packages/components/src/section/example.md
similarity index 100%
rename from plugins/woocommerce-admin/client/components/section/example.md
rename to plugins/woocommerce-admin/packages/components/src/section/example.md
diff --git a/plugins/woocommerce-admin/client/components/section/index.js b/plugins/woocommerce-admin/packages/components/src/section/index.js
similarity index 100%
rename from plugins/woocommerce-admin/client/components/section/index.js
rename to plugins/woocommerce-admin/packages/components/src/section/index.js
diff --git a/plugins/woocommerce-admin/client/components/segmented-selection/example.md b/plugins/woocommerce-admin/packages/components/src/segmented-selection/example.md
similarity index 100%
rename from plugins/woocommerce-admin/client/components/segmented-selection/example.md
rename to plugins/woocommerce-admin/packages/components/src/segmented-selection/example.md
diff --git a/plugins/woocommerce-admin/client/components/segmented-selection/index.js b/plugins/woocommerce-admin/packages/components/src/segmented-selection/index.js
similarity index 97%
rename from plugins/woocommerce-admin/client/components/segmented-selection/index.js
rename to plugins/woocommerce-admin/packages/components/src/segmented-selection/index.js
index 9a3c49d15d5..94f0ca5cedc 100644
--- a/plugins/woocommerce-admin/client/components/segmented-selection/index.js
+++ b/plugins/woocommerce-admin/packages/components/src/segmented-selection/index.js
@@ -7,11 +7,6 @@ import classnames from 'classnames';
import PropTypes from 'prop-types';
import { partial, uniqueId } from 'lodash';
-/**
- * Internal dependencies
- */
-import './style.scss';
-
/**
* Create a panel of styled selectable options rendering stylized checkboxes and labels
*/
diff --git a/plugins/woocommerce-admin/client/components/segmented-selection/style.scss b/plugins/woocommerce-admin/packages/components/src/segmented-selection/style.scss
similarity index 100%
rename from plugins/woocommerce-admin/client/components/segmented-selection/style.scss
rename to plugins/woocommerce-admin/packages/components/src/segmented-selection/style.scss
diff --git a/plugins/woocommerce-admin/client/components/split-button/example.md b/plugins/woocommerce-admin/packages/components/src/split-button/example.md
similarity index 100%
rename from plugins/woocommerce-admin/client/components/split-button/example.md
rename to plugins/woocommerce-admin/packages/components/src/split-button/example.md
diff --git a/plugins/woocommerce-admin/client/components/split-button/index.js b/plugins/woocommerce-admin/packages/components/src/split-button/index.js
similarity index 98%
rename from plugins/woocommerce-admin/client/components/split-button/index.js
rename to plugins/woocommerce-admin/packages/components/src/split-button/index.js
index 1c247776f0d..3f6f3298bae 100644
--- a/plugins/woocommerce-admin/client/components/split-button/index.js
+++ b/plugins/woocommerce-admin/packages/components/src/split-button/index.js
@@ -1,18 +1,12 @@
+/** @format */
/**
* External dependencies
- *
- * @format
*/
import { Button, IconButton, Dropdown, NavigableMenu } from '@wordpress/components';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import { noop } from 'lodash';
-/**
- * Internal dependencies
- */
-import './style.scss';
-
/**
* A component for displaying a button with a main action plus a secondary set of actions behind a menu toggle.
*
diff --git a/plugins/woocommerce-admin/client/components/split-button/style.scss b/plugins/woocommerce-admin/packages/components/src/split-button/style.scss
similarity index 100%
rename from plugins/woocommerce-admin/client/components/split-button/style.scss
rename to plugins/woocommerce-admin/packages/components/src/split-button/style.scss
diff --git a/plugins/woocommerce-admin/packages/components/src/style.scss b/plugins/woocommerce-admin/packages/components/src/style.scss
new file mode 100644
index 00000000000..a59795b8115
--- /dev/null
+++ b/plugins/woocommerce-admin/packages/components/src/style.scss
@@ -0,0 +1,28 @@
+/**
+ * Internal Dependencies
+ */
+@import 'animation-slider/style.scss';
+@import 'calendar/style.scss';
+@import 'card/style.scss';
+@import 'count/style.scss';
+@import 'dropdown-button/style.scss';
+@import 'ellipsis-menu/style.scss';
+@import 'empty-content/style.scss';
+@import 'filters/advanced/style.scss';
+@import 'filters/date/style.scss';
+@import 'filters/filter/style.scss';
+@import 'filters/style.scss';
+@import 'flag/style.scss';
+@import 'gravatar/style.scss';
+@import 'order-status/style.scss';
+@import 'pagination/style.scss';
+@import 'product-image/style.scss';
+@import 'rating/style.scss';
+@import 'search/style.scss';
+@import 'section-header/style.scss';
+@import 'segmented-selection/style.scss';
+@import 'split-button/style.scss';
+@import 'summary/style.scss';
+@import 'table/style.scss';
+@import 'tag/style.scss';
+@import 'view-more-list/style.scss';
diff --git a/plugins/woocommerce-admin/client/components/summary/example.md b/plugins/woocommerce-admin/packages/components/src/summary/example.md
similarity index 100%
rename from plugins/woocommerce-admin/client/components/summary/example.md
rename to plugins/woocommerce-admin/packages/components/src/summary/example.md
diff --git a/plugins/woocommerce-admin/client/components/summary/index.js b/plugins/woocommerce-admin/packages/components/src/summary/index.js
similarity index 89%
rename from plugins/woocommerce-admin/client/components/summary/index.js
rename to plugins/woocommerce-admin/packages/components/src/summary/index.js
index 85968bbd96e..6c6812bfd0f 100644
--- a/plugins/woocommerce-admin/client/components/summary/index.js
+++ b/plugins/woocommerce-admin/packages/components/src/summary/index.js
@@ -8,12 +8,7 @@ import { Children, cloneElement } from '@wordpress/element';
import { Dropdown, NavigableMenu } from '@wordpress/components';
import PropTypes from 'prop-types';
import { uniqueId } from 'lodash';
-
-/**
- * Internal dependencies
- */
-import { isMobileViewport, isTabletViewport } from 'lib/ui';
-import './style.scss';
+import { withViewportMatch } from '@wordpress/viewport';
/**
* A container element for a list of SummaryNumbers. This component handles detecting & switching to
@@ -21,11 +16,10 @@ import './style.scss';
*
* @return { object } -
*/
-const SummaryList = ( { children, label } ) => {
+const SummaryList = ( { children, isDropdownBreakpoint, label } ) => {
if ( ! label ) {
label = __( 'Performance Indicators', 'wc-admin' );
}
- const isDropdownBreakpoint = isTabletViewport() || isMobileViewport();
// We default to "one" because we can't have empty children.
const itemCount = Children.count( children ) || 1;
@@ -86,4 +80,6 @@ SummaryList.propTypes = {
label: PropTypes.string,
};
-export default SummaryList;
+export default withViewportMatch( {
+ isDropdownBreakpoint: '< large',
+} )( SummaryList );
diff --git a/plugins/woocommerce-admin/client/components/summary/item.js b/plugins/woocommerce-admin/packages/components/src/summary/item.js
similarity index 99%
rename from plugins/woocommerce-admin/client/components/summary/item.js
rename to plugins/woocommerce-admin/packages/components/src/summary/item.js
index 79afedc8986..75c6b649d40 100644
--- a/plugins/woocommerce-admin/client/components/summary/item.js
+++ b/plugins/woocommerce-admin/packages/components/src/summary/item.js
@@ -12,7 +12,7 @@ import PropTypes from 'prop-types';
/**
* Internal dependencies
*/
-import Link from 'components/link';
+import Link from '../link';
/**
* A component to show a value, label, and an optional change percentage. Can also act as a link to a specific report focus.
diff --git a/plugins/woocommerce-admin/client/components/summary/placeholder.js b/plugins/woocommerce-admin/packages/components/src/summary/placeholder.js
similarity index 89%
rename from plugins/woocommerce-admin/client/components/summary/placeholder.js
rename to plugins/woocommerce-admin/packages/components/src/summary/placeholder.js
index 48f430771ae..122bf5bbeda 100644
--- a/plugins/woocommerce-admin/client/components/summary/placeholder.js
+++ b/plugins/woocommerce-admin/packages/components/src/summary/placeholder.js
@@ -6,11 +6,7 @@ import { Component } from '@wordpress/element';
import classnames from 'classnames';
import { range } from 'lodash';
import PropTypes from 'prop-types';
-
-/**
- * Internal dependencies
- */
-import { isMobileViewport, isTabletViewport } from 'lib/ui';
+import { withViewportMatch } from '@wordpress/viewport';
/**
* `SummaryListPlaceholder` behaves like `SummaryList` but displays placeholder summary items instead of data.
@@ -18,7 +14,7 @@ import { isMobileViewport, isTabletViewport } from 'lib/ui';
*/
class SummaryListPlaceholder extends Component {
render() {
- const isDropdownBreakpoint = isTabletViewport() || isMobileViewport();
+ const { isDropdownBreakpoint } = this.props;
const numberOfItems = isDropdownBreakpoint ? 1 : this.props.numberOfItems;
const hasItemsClass = numberOfItems < 10 ? `has-${ numberOfItems }-items` : 'has-10-items';
@@ -64,4 +60,6 @@ SummaryListPlaceholder.defaultProps = {
numberOfRows: 5,
};
-export default SummaryListPlaceholder;
+export default withViewportMatch( {
+ isDropdownBreakpoint: '< large',
+} )( SummaryListPlaceholder );
diff --git a/plugins/woocommerce-admin/client/components/summary/style.scss b/plugins/woocommerce-admin/packages/components/src/summary/style.scss
similarity index 97%
rename from plugins/woocommerce-admin/client/components/summary/style.scss
rename to plugins/woocommerce-admin/packages/components/src/summary/style.scss
index 3cb5f425ed7..19603cd1332 100644
--- a/plugins/woocommerce-admin/client/components/summary/style.scss
+++ b/plugins/woocommerce-admin/packages/components/src/summary/style.scss
@@ -145,7 +145,7 @@ $inner-border: $core-grey-light-500;
@include wrap-contents;
}
- @include breakpoint( '<1365px' ) {
+ @include breakpoint( '<1440px' ) {
&.has-4-items,
&.has-7-items,
&.has-8-items {
@@ -170,7 +170,7 @@ $inner-border: $core-grey-light-500;
}
}
- @include breakpoint( '<1100px' ) {
+ @include breakpoint( '<960px' ) {
.woocommerce-summary__item {
// One-col layout for all items means right border is always "outer"
border-right-color: $outer-border;
@@ -281,7 +281,7 @@ $inner-border: $core-grey-light-500;
.has-6-items .woocommerce-summary__item-container {
@include set-grid-item-position( 6, 6 );
- @include breakpoint( '<1365px' ) {
+ @include breakpoint( '<1440px' ) {
@include set-grid-item-position( 3, 6 );
}
}
@@ -297,7 +297,7 @@ $inner-border: $core-grey-light-500;
.has-9-items .woocommerce-summary__item-container {
@include set-grid-item-position( 5, 9 );
- @include breakpoint( '<1365px' ) {
+ @include breakpoint( '<1440px' ) {
@include set-grid-item-position( 3, 9 );
}
}
@@ -305,12 +305,12 @@ $inner-border: $core-grey-light-500;
.has-10-items .woocommerce-summary__item-container {
@include set-grid-item-position( 5, 10 );
- @include breakpoint( '<1365px' ) {
+ @include breakpoint( '<1440px' ) {
@include set-grid-item-position( 4, 10 );
}
}
-@include breakpoint( '<1100px' ) {
+@include breakpoint( '<960px' ) {
@for $i from 1 through 10 {
.woocommerce-summary > .woocommerce-summary__item-container:nth-child(#{$i}) {
grid-column-start: 1;
diff --git a/plugins/woocommerce-admin/client/components/table/__mocks__/table-mock-csv.js b/plugins/woocommerce-admin/packages/components/src/table/__mocks__/table-mock-csv.js
similarity index 100%
rename from plugins/woocommerce-admin/client/components/table/__mocks__/table-mock-csv.js
rename to plugins/woocommerce-admin/packages/components/src/table/__mocks__/table-mock-csv.js
diff --git a/plugins/woocommerce-admin/client/components/table/__mocks__/table-mock-data.js b/plugins/woocommerce-admin/packages/components/src/table/__mocks__/table-mock-data.js
similarity index 100%
rename from plugins/woocommerce-admin/client/components/table/__mocks__/table-mock-data.js
rename to plugins/woocommerce-admin/packages/components/src/table/__mocks__/table-mock-data.js
diff --git a/plugins/woocommerce-admin/client/components/table/__mocks__/table-mock-headers.js b/plugins/woocommerce-admin/packages/components/src/table/__mocks__/table-mock-headers.js
similarity index 100%
rename from plugins/woocommerce-admin/client/components/table/__mocks__/table-mock-headers.js
rename to plugins/woocommerce-admin/packages/components/src/table/__mocks__/table-mock-headers.js
diff --git a/plugins/woocommerce-admin/client/components/table/download-icon.js b/plugins/woocommerce-admin/packages/components/src/table/download-icon.js
similarity index 69%
rename from plugins/woocommerce-admin/client/components/table/download-icon.js
rename to plugins/woocommerce-admin/packages/components/src/table/download-icon.js
index 56af517b6b8..3f1c66c24aa 100644
--- a/plugins/woocommerce-admin/client/components/table/download-icon.js
+++ b/plugins/woocommerce-admin/packages/components/src/table/download-icon.js
@@ -1,11 +1,16 @@
/** @format */
-/**
- * External dependencies
- */
-import React from 'react';
export default () => (
-