@shopgate/engage 7.30.0-alpha.7 → 7.30.0-alpha.8

package/filter/components/FilterPageContent/components/ApplyButton/style.js

@@ -1 +1,11 @@
-import{css}from'glamor';var wrapper=css({display:'flex'});var button=css({padding:'0 !important'}).toString();export default{wrapper:wrapper,button:button};
+import { css } from 'glamor';
+const wrapper = css({
+  display: 'flex'
+});
+const button = css({
+  padding: '0 !important'
+}).toString();
+export default {
+  wrapper,
+  button
+};

package/filter/components/FilterPageContent/components/ResetButton/index.js

@@ -1,7 +1,37 @@
-import React,{memo}from'react';import PropTypes from'prop-types';import{I18n,Button,SurroundPortals}from'@shopgate/engage/components';import{PORTAL_FILTER_RESET_BUTTON}from'@shopgate/engage/filter/constants';import styles from"./style";/**
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import { I18n, Button, SurroundPortals } from '@shopgate/engage/components';
+import { PORTAL_FILTER_RESET_BUTTON } from '@shopgate/engage/filter/constants';
+import styles from "./style";
+
+/**
  * The filter reset button component.
  * @param {Object} props The component props.
  * @param {boolean} props.disabled Whether the button is disabled
  * @param {Function} props.onClick Click handler for the button
  * @returns {JSX.Element}
- */var FilterResetButton=function FilterResetButton(_ref){var disabled=_ref.disabled,onClick=_ref.onClick;return React.createElement(SurroundPortals,{portalName:PORTAL_FILTER_RESET_BUTTON,portalProps:{disabled:disabled,onClick:onClick}},React.createElement("div",{className:styles},React.createElement(Button,{flat:true,type:"primary",onClick:onClick,disabled:disabled,testId:"clearAllButton"},React.createElement(I18n.Text,{string:"filter.reset"}))));};FilterResetButton.defaultProps={disabled:false};export default memo(FilterResetButton);
+ */
+const FilterResetButton = ({
+  disabled,
+  onClick
+}) => /*#__PURE__*/React.createElement(SurroundPortals, {
+  portalName: PORTAL_FILTER_RESET_BUTTON,
+  portalProps: {
+    disabled,
+    onClick
+  }
+}, /*#__PURE__*/React.createElement("div", {
+  className: styles
+}, /*#__PURE__*/React.createElement(Button, {
+  flat: true,
+  type: "primary",
+  onClick: onClick,
+  disabled: disabled,
+  testId: "clearAllButton"
+}, /*#__PURE__*/React.createElement(I18n.Text, {
+  string: "filter.reset"
+}))));
+FilterResetButton.defaultProps = {
+  disabled: false
+};
+export default /*#__PURE__*/memo(FilterResetButton);

package/filter/components/FilterPageContent/components/ResetButton/spec.js

@@ -1 +1,28 @@
-import React from'react';import{shallow}from'enzyme';import ResetButton from"./index";var clickMock=jest.fn();jest.mock('@shopgate/engage/components');describe('Filter: <ResetButton />',function(){it('should render as activated',function(){var wrapper=shallow(React.createElement(ResetButton,{onClick:function onClick(){}}));expect(wrapper).toMatchSnapshot();});it('should render as deactivated',function(){var wrapper=shallow(React.createElement(ResetButton,{disabled:true,onClick:function onClick(){}}));expect(wrapper).toMatchSnapshot();});it('should handle clicks',function(){var wrapper=shallow(React.createElement(ResetButton,{onClick:clickMock}));expect(wrapper).toMatchSnapshot();wrapper.find('Button').simulate('click');expect(clickMock).toHaveBeenCalled();});});
+import React from 'react';
+import { shallow } from 'enzyme';
+import ResetButton from "./index";
+const clickMock = jest.fn();
+jest.mock('@shopgate/engage/components');
+describe('Filter: <ResetButton />', () => {
+  it('should render as activated', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(ResetButton, {
+      onClick: () => {}
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('should render as deactivated', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(ResetButton, {
+      disabled: true,
+      onClick: () => {}
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('should handle clicks', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(ResetButton, {
+      onClick: clickMock
+    }));
+    expect(wrapper).toMatchSnapshot();
+    wrapper.find('Button').simulate('click');
+    expect(clickMock).toHaveBeenCalled();
+  });
+});

package/filter/components/FilterPageContent/components/ResetButton/style.js

@@ -1 +1,6 @@
-import{css}from'glamor';export default css({marginTop:4,marginBottom:40,textAlign:'right'});
+import { css } from 'glamor';
+export default css({
+  marginTop: 4,
+  marginBottom: 40,
+  textAlign: 'right'
+});

package/filter/components/FilterPageContent/components/Selector/components/Selected/index.js

@@ -1,7 +1,46 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{Fragment,PureComponent}from'react';import PropTypes from'prop-types';import*as styles from"./style";/**
+import "core-js/modules/es.array.reduce.js";
+import React, { Fragment, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import * as styles from "./style";
+
+/**
  * The filter selected component.
- */var Selected=/*#__PURE__*/function(_PureComponent){function Selected(){_classCallCheck(this,Selected);return _callSuper(this,Selected,arguments);}_inherits(Selected,_PureComponent);return _createClass(Selected,[{key:"getItems",value:/**
+ */
+class Selected extends PureComponent {
+  /**
    * @returns {Array}
-   */function getItems(){var _this$props=this.props,selected=_this$props.selected,values=_this$props.values;return values.reduce(function(prevValues,value){if(selected.includes(value.id)){prevValues.push(value.label);}return prevValues;},[]);}/**
+   */
+  getItems() {
+    const {
+      selected,
+      values
+    } = this.props;
+    return values.reduce((prevValues, value) => {
+      if (selected.includes(value.id)) {
+        prevValues.push(value.label);
+      }
+      return prevValues;
+    }, []);
+  }
+
+  /**
    * @returns {JSX}
-   */},{key:"render",value:function render(){if(!this.props.selected||this.props.selected.length===0){return null;}var items=this.getItems();return React.createElement(Fragment,null,items.map(function(item,index){return React.createElement(Fragment,{key:item},React.createElement("span",{className:styles.elipsed},item),index<items.length-1?React.createElement("span",{className:styles.comma},", "):'');}));}}]);}(PureComponent);_defineProperty(Selected,"defaultProps",{selected:null});export default Selected;
+   */
+  render() {
+    if (!this.props.selected || this.props.selected.length === 0) {
+      return null;
+    }
+    const items = this.getItems();
+    return /*#__PURE__*/React.createElement(Fragment, null, items.map((item, index) => /*#__PURE__*/React.createElement(Fragment, {
+      key: item
+    }, /*#__PURE__*/React.createElement("span", {
+      className: styles.elipsed
+    }, item), index < items.length - 1 ? /*#__PURE__*/React.createElement("span", {
+      className: styles.comma
+    }, ", ") : '')));
+  }
+}
+Selected.defaultProps = {
+  selected: null
+};
+export default Selected;

package/filter/components/FilterPageContent/components/Selector/components/Selected/spec.js

@@ -1 +1,25 @@
-import React from'react';import{shallow}from'enzyme';import Selected from"./index";var values=[{id:'foo',label:'fooLabel'},{id:'bar',label:'barLabel'}];describe('Filter: <Selected />',function(){it('should not render without selected',function(){var wrapper=shallow(React.createElement(Selected,{values:values}));expect(wrapper).toMatchSnapshot();});it('should render with selected',function(){var wrapper=shallow(React.createElement(Selected,{values:values,selected:['foo']}));expect(wrapper).toMatchSnapshot();});});
+import React from 'react';
+import { shallow } from 'enzyme';
+import Selected from "./index";
+const values = [{
+  id: 'foo',
+  label: 'fooLabel'
+}, {
+  id: 'bar',
+  label: 'barLabel'
+}];
+describe('Filter: <Selected />', () => {
+  it('should not render without selected', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(Selected, {
+      values: values
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('should render with selected', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(Selected, {
+      values: values,
+      selected: ['foo']
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+});

package/filter/components/FilterPageContent/components/Selector/components/Selected/style.js

@@ -1 +1,19 @@
-import{css}from'glamor';export var item=css({whiteSpace:'nowrap',flexShrink:0,flexGrow:0,alignSelf:'flex-end'});export var elipsed=css({maxWidth:'95%',overflow:'hidden',textAlign:'right',textOverflow:'ellipsis',whiteSpace:'nowrap'});export var comma=css({' + span':{marginLeft:'0.65ch'}});
+import { css } from 'glamor';
+export const item = css({
+  whiteSpace: 'nowrap',
+  flexShrink: 0,
+  flexGrow: 0,
+  alignSelf: 'flex-end'
+});
+export const elipsed = css({
+  maxWidth: '95%',
+  overflow: 'hidden',
+  textAlign: 'right',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+export const comma = css({
+  ' + span': {
+    marginLeft: '0.65ch'
+  }
+});

package/filter/components/FilterPageContent/components/Selector/components/Toggle/index.js

@@ -1,7 +1,45 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{PureComponent}from'react';import PropTypes from'prop-types';import classNames from'classnames';import*as styles from"./style";/**
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import * as styles from "./style";
+
+/**
  * The toggle component.
- */var Toggle=/*#__PURE__*/function(_PureComponent){function Toggle(){_classCallCheck(this,Toggle);return _callSuper(this,Toggle,arguments);}_inherits(Toggle,_PureComponent);return _createClass(Toggle,[{key:"className",get:/**
+ */
+class Toggle extends PureComponent {
+  /**
    * @returns {string}
-   */function get(){var open=this.props.open;return classNames(_defineProperty(_defineProperty(_defineProperty({},styles.label,true),styles.open,open),styles.closed,!open));}/**
+   */
+  get className() {
+    const {
+      open
+    } = this.props;
+    return classNames({
+      [styles.label]: true,
+      [styles.open]: open,
+      [styles.closed]: !open
+    });
+  }
+
+  /**
    * @returns {JSX}
-   */},{key:"render",value:function render(){var _this$props=this.props,label=_this$props.label,selected=_this$props.selected;return React.createElement("div",{className:styles.toggle},React.createElement("span",{className:this.className},label),selected&&React.createElement("span",{className:styles.selected},selected));}}]);}(PureComponent);_defineProperty(Toggle,"defaultProps",{open:false,selected:null});export default Toggle;
+   */
+  render() {
+    const {
+      label,
+      selected
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles.toggle
+    }, /*#__PURE__*/React.createElement("span", {
+      className: this.className
+    }, label), selected && /*#__PURE__*/React.createElement("span", {
+      className: styles.selected
+    }, selected));
+  }
+}
+Toggle.defaultProps = {
+  open: false,
+  selected: null
+};
+export default Toggle;

package/filter/components/FilterPageContent/components/Selector/components/Toggle/spec.js

@@ -1 +1,33 @@
-import React from'react';import{render}from'enzyme';import Toggle from"./index";describe('<Toggle />',function(){it('should render without selected',function(){var wrapper=render(React.createElement(Toggle,{label:"somelabel"}));expect(wrapper).toMatchSnapshot();});it('should render without selected as open',function(){var wrapper=render(React.createElement(Toggle,{label:"somelabel",open:true}));expect(wrapper).toMatchSnapshot();});it('should render with selected',function(){var wrapper=render(React.createElement(Toggle,{label:"somelabel",selected:"Some, Thing, Selected"}));expect(wrapper).toMatchSnapshot();});it('should render with selected as open',function(){var wrapper=render(React.createElement(Toggle,{label:"somelabel",selected:"Some, Thing, Selected",open:true}));expect(wrapper).toMatchSnapshot();});});
+import React from 'react';
+import { render } from 'enzyme';
+import Toggle from "./index";
+describe('<Toggle />', () => {
+  it('should render without selected', () => {
+    const wrapper = render(/*#__PURE__*/React.createElement(Toggle, {
+      label: "somelabel"
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('should render without selected as open', () => {
+    const wrapper = render(/*#__PURE__*/React.createElement(Toggle, {
+      label: "somelabel",
+      open: true
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('should render with selected', () => {
+    const wrapper = render(/*#__PURE__*/React.createElement(Toggle, {
+      label: "somelabel",
+      selected: "Some, Thing, Selected"
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('should render with selected as open', () => {
+    const wrapper = render(/*#__PURE__*/React.createElement(Toggle, {
+      label: "somelabel",
+      selected: "Some, Thing, Selected",
+      open: true
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+});

package/filter/components/FilterPageContent/components/Selector/components/Toggle/style.js

@@ -1 +1,30 @@
-import{css}from'glamor';export var toggle=css({display:'flex',flexFlow:'row no-wrap',alignContent:'stretch',alignItems:'flex-start'});export var label=css({whiteSpace:'no-wrap',flexShrink:0,flexGrow:1,textAlign:'left',maxWidth:'50%',minWidth:'35%',paddingRight:'16px'});export var selected=css({display:'flex',flexFlow:'row wrap',flexGrow:1,justifyContent:'flex-end',minWidth:'50%',maxWidth:'65%'});export var closed=css({fontWeight:'normal'});export var open=css({fontWeight:'bold'});
+import { css } from 'glamor';
+export const toggle = css({
+  display: 'flex',
+  flexFlow: 'row no-wrap',
+  alignContent: 'stretch',
+  alignItems: 'flex-start'
+});
+export const label = css({
+  whiteSpace: 'no-wrap',
+  flexShrink: 0,
+  flexGrow: 1,
+  textAlign: 'left',
+  maxWidth: '50%',
+  minWidth: '35%',
+  paddingRight: '16px'
+});
+export const selected = css({
+  display: 'flex',
+  flexFlow: 'row wrap',
+  flexGrow: 1,
+  justifyContent: 'flex-end',
+  minWidth: '50%',
+  maxWidth: '65%'
+});
+export const closed = css({
+  fontWeight: 'normal'
+});
+export const open = css({
+  fontWeight: 'bold'
+});

package/filter/components/FilterPageContent/components/Selector/components/ValueButton/index.js

@@ -1,7 +1,50 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{PureComponent}from'react';import PropTypes from'prop-types';import classNames from'classnames';import*as styles from"./style";/**
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import * as styles from "./style";
+
+/**
  * The value button component.
- */var ValueButton=/*#__PURE__*/function(_PureComponent){function ValueButton(){_classCallCheck(this,ValueButton);return _callSuper(this,ValueButton,arguments);}_inherits(ValueButton,_PureComponent);return _createClass(ValueButton,[{key:"className",get:/**
+ */
+class ValueButton extends PureComponent {
+  /**
    * @returns {string}
-   */function get(){var isActive=this.props.isActive;return classNames(_defineProperty(_defineProperty({},styles.inactive,!isActive),styles.active,isActive));}/**
+   */
+  get className() {
+    const {
+      isActive
+    } = this.props;
+    return classNames({
+      [styles.inactive]: !isActive,
+      [styles.active]: isActive
+    });
+  }
+
+  /**
    * @returns {JSX}
-   */},{key:"render",value:function render(){var _this$props=this.props,label=_this$props.label,id=_this$props.id,onClick=_this$props.onClick,isActive=_this$props.isActive;return React.createElement("button",{className:this.className,value:id,onClick:onClick,"data-test-id":id,type:"button",role:"checkbox","aria-checked":isActive},label);}}]);}(PureComponent);_defineProperty(ValueButton,"defaultProps",{id:null,label:null,isActive:false,onClick:function onClick(){}});export default ValueButton;
+   */
+  render() {
+    const {
+      label,
+      id,
+      onClick,
+      isActive
+    } = this.props;
+    return /*#__PURE__*/React.createElement("button", {
+      className: this.className,
+      value: id,
+      onClick: onClick,
+      "data-test-id": id,
+      type: "button",
+      role: "checkbox",
+      "aria-checked": isActive
+    }, label);
+  }
+}
+ValueButton.defaultProps = {
+  id: null,
+  label: null,
+  isActive: false,
+  onClick() {}
+};
+export default ValueButton;

package/filter/components/FilterPageContent/components/Selector/components/ValueButton/spec.js

@@ -1 +1,31 @@
-import React from'react';import{shallow}from'enzyme';import ValueButton from"./index";var onClick=jest.fn();describe('<ValueButton />',function(){it('should render as inactive',function(){var wrapper=shallow(React.createElement(ValueButton,{id:"someid",label:"somelabel"}));expect(wrapper).toMatchSnapshot();});it('should render as active',function(){var wrapper=shallow(React.createElement(ValueButton,{id:"someid",label:"somelabel",isActive:true}));expect(wrapper).toMatchSnapshot();});it('should handle click event',function(){var wrapper=shallow(React.createElement(ValueButton,{id:"someid",label:"somelabel",onClick:onClick}));wrapper.simulate('click');expect(wrapper).toMatchSnapshot();expect(onClick).toHaveBeenCalledTimes(1);});});
+import React from 'react';
+import { shallow } from 'enzyme';
+import ValueButton from "./index";
+const onClick = jest.fn();
+describe('<ValueButton />', () => {
+  it('should render as inactive', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(ValueButton, {
+      id: "someid",
+      label: "somelabel"
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('should render as active', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(ValueButton, {
+      id: "someid",
+      label: "somelabel",
+      isActive: true
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('should handle click event', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(ValueButton, {
+      id: "someid",
+      label: "somelabel",
+      onClick: onClick
+    }));
+    wrapper.simulate('click');
+    expect(wrapper).toMatchSnapshot();
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+});

package/filter/components/FilterPageContent/components/Selector/components/ValueButton/style.js

@@ -1 +1,23 @@
-import{css}from'glamor';import{themeColors}from'@shopgate/pwa-common/helpers/config';export var inactive=css({border:"1px solid ".concat(themeColors.darkGray),borderRadius:2,color:'inherit',height:42,marginLeft:8,marginBottom:8,maxWidth:'100%',minWidth:42,outline:0,overflow:'hidden',padding:'0 8px',textOverflow:'ellipsis',whiteSpace:'nowrap',transition:'color 100ms cubic-bezier(0.25, 0.1, 0.25, 1), border-color 100ms cubic-bezier(0.25, 0.1, 0.25, 1)',willChange:'color, border-color'});export var active=css(inactive,{borderColor:"var(--color-secondary, ".concat(themeColors.accent,")"),color:"var(--color-secondary, ".concat(themeColors.accent,")")});
+import { css } from 'glamor';
+import { themeColors } from '@shopgate/pwa-common/helpers/config';
+export const inactive = css({
+  border: `1px solid ${themeColors.darkGray}`,
+  borderRadius: 2,
+  color: 'inherit',
+  height: 42,
+  marginLeft: 8,
+  marginBottom: 8,
+  maxWidth: '100%',
+  minWidth: 42,
+  outline: 0,
+  overflow: 'hidden',
+  padding: '0 8px',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  transition: 'color 100ms cubic-bezier(0.25, 0.1, 0.25, 1), border-color 100ms cubic-bezier(0.25, 0.1, 0.25, 1)',
+  willChange: 'color, border-color'
+});
+export const active = css(inactive, {
+  borderColor: `var(--color-secondary, ${themeColors.accent})`,
+  color: `var(--color-secondary, ${themeColors.accent})`
+});

package/filter/components/FilterPageContent/components/Selector/index.js

@@ -1,19 +1,148 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{PureComponent}from'react';import PropTypes from'prop-types';import{Accordion,SurroundPortals}from'@shopgate/engage/components';import{i18n}from'@shopgate/engage/core';import{FilterItem}from'@shopgate/engage/filter';import{PORTAL_FILTER_SELECTOR}from'@shopgate/engage/filter/constants';import ValueButton from"./components/ValueButton";import Toggle from"./components/Toggle";import Selected from"./components/Selected";import*as styles from"./style";/**
+import _extends from "@babel/runtime/helpers/extends";
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { Accordion, SurroundPortals } from '@shopgate/engage/components';
+import { i18n } from '@shopgate/engage/core';
+import { FilterItem } from '@shopgate/engage/filter';
+import { PORTAL_FILTER_SELECTOR } from '@shopgate/engage/filter/constants';
+import ValueButton from "./components/ValueButton";
+import Toggle from "./components/Toggle";
+import Selected from "./components/Selected";
+import * as styles from "./style";
+
+/**
  * The selector component.
- */var Selector=/*#__PURE__*/function(_PureComponent){function Selector(){var _this2;_classCallCheck(this,Selector);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this2=_callSuper(this,Selector,[].concat(args));_defineProperty(_this2,"state",{selected:_this2.props.selected||[]});/**
-   * @param {SyntheticEvent} event The button click event.
-   */_defineProperty(_this2,"handleClick",function(event){var value=event.target.value;var selected=_this2.state.selected;var _this2$props=_this2.props,id=_this2$props.id,multi=_this2$props.multi,onChange=_this2$props.onChange;var newSelected=[].concat(selected,[value]);// If in single select mode, only allow one selected value.
-if(!multi&&selected.length===1){newSelected=[value];}// If the clicked value was already selected, remove it again.
-if(selected.includes(value)){newSelected=selected.filter(function(item){return item!==value;});}// Set it if it wasn't selected already.
-_this2.setState({selected:newSelected});onChange(id,newSelected);});/**
-   * Filter value change handler for the portal props. Invokes handleClick method with a mocked
-   * click event
-   * @param {string} updatedId Id of the updated filter value
-   */_defineProperty(_this2,"handlePortalChange",function(updatedId){_this2.handleClick({target:{value:updatedId}});});/**
-   * @param {Object} props The send render props.
-   * @return {JSX}
-   */_defineProperty(_this2,"renderLabel",function(props){var _this2$props2=_this2.props,label=_this2$props2.label,values=_this2$props2.values;var selected=_this2.state.selected;return React.createElement(Toggle,_extends({},props,{label:label,selected:React.createElement(Selected,{values:values,selected:selected})}));});return _this2;}_inherits(Selector,_PureComponent);return _createClass(Selector,[{key:"UNSAFE_componentWillReceiveProps",value:/**
+ */
+class Selector extends PureComponent {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      selected: this.props.selected || []
+    };
+    /**
+     * @param {SyntheticEvent} event The button click event.
+     */
+    this.handleClick = event => {
+      const {
+        value
+      } = event.target;
+      const {
+        selected
+      } = this.state;
+      const {
+        id,
+        multi,
+        onChange
+      } = this.props;
+      let newSelected = [...selected, value];
+
+      // If in single select mode, only allow one selected value.
+      if (!multi && selected.length === 1) {
+        newSelected = [value];
+      }
+
+      // If the clicked value was already selected, remove it again.
+      if (selected.includes(value)) {
+        newSelected = selected.filter(item => item !== value);
+      }
+
+      // Set it if it wasn't selected already.
+      this.setState({
+        selected: newSelected
+      });
+      onChange(id, newSelected);
+    };
+    /**
+     * Filter value change handler for the portal props. Invokes handleClick method with a mocked
+     * click event
+     * @param {string} updatedId Id of the updated filter value
+     */
+    this.handlePortalChange = updatedId => {
+      this.handleClick({
+        target: {
+          value: updatedId
+        }
+      });
+    };
+    /**
+     * @param {Object} props The send render props.
+     * @return {JSX}
+     */
+    this.renderLabel = props => {
+      const {
+        label,
+        values
+      } = this.props;
+      const {
+        selected
+      } = this.state;
+      return /*#__PURE__*/React.createElement(Toggle, _extends({}, props, {
+        label: label,
+        selected: /*#__PURE__*/React.createElement(Selected, {
+          values: values,
+          selected: selected
+        })
+      }));
+    };
+  }
+  /**
    * @param {Object} nextProps The new incoming props.
-   */function UNSAFE_componentWillReceiveProps(_ref){var selected=_ref.selected;if(selected!==this.state.selected){this.setState({selected:selected});}}},{key:"render",value:/**
+   */
+  UNSAFE_componentWillReceiveProps({
+    selected
+  }) {
+    if (selected !== this.state.selected) {
+      this.setState({
+        selected
+      });
+    }
+  }
+  /**
    * @returns {JSX}
-   */function render(){var _this3=this;var _this$props=this.props,values=_this$props.values,id=_this$props.id,label=_this$props.label,multi=_this$props.multi;var selected=this.state.selected;return React.createElement(SurroundPortals,{portalName:PORTAL_FILTER_SELECTOR,portalProps:{filter:{id:id,label:label,values:values,isMultiSelect:multi},selectedValueIds:selected,onChange:this.handlePortalChange}},React.createElement(FilterItem,null,React.createElement(Accordion,{renderLabel:this.renderLabel,testId:id,handleLabel:i18n.text('filter.filter_by',{label:label}),className:styles.accordion},React.createElement("div",{className:styles.content},values.map(function(value){return React.createElement(ValueButton,{key:value.id,id:value.id,label:value.label,isActive:selected&&selected.includes(value.id),onClick:_this3.handleClick});})))));}}]);}(PureComponent);_defineProperty(Selector,"defaultProps",{multi:false,onChange:function onChange(){},selected:null});export default Selector;
+   */
+  render() {
+    const {
+      values,
+      id,
+      label,
+      multi
+    } = this.props;
+    const {
+      selected
+    } = this.state;
+    return /*#__PURE__*/React.createElement(SurroundPortals, {
+      portalName: PORTAL_FILTER_SELECTOR,
+      portalProps: {
+        filter: {
+          id,
+          label,
+          values,
+          isMultiSelect: multi
+        },
+        selectedValueIds: selected,
+        onChange: this.handlePortalChange
+      }
+    }, /*#__PURE__*/React.createElement(FilterItem, null, /*#__PURE__*/React.createElement(Accordion, {
+      renderLabel: this.renderLabel,
+      testId: id,
+      handleLabel: i18n.text('filter.filter_by', {
+        label
+      }),
+      className: styles.accordion
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.content
+    }, values.map(value => /*#__PURE__*/React.createElement(ValueButton, {
+      key: value.id,
+      id: value.id,
+      label: value.label,
+      isActive: selected && selected.includes(value.id),
+      onClick: this.handleClick
+    }))))));
+  }
+}
+Selector.defaultProps = {
+  multi: false,
+  onChange() {},
+  selected: null
+};
+export default Selector;