@shopgate/engage 7.30.4-beta.1 → 7.31.0-alpha.1

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

@@ -1,62 +1,70 @@
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { PureComponent } from 'react';
+import React, { memo, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import * as styles from "./style";
+import { makeStyles } from '@shopgate/engage/styles';
+import { themeColors } from '@shopgate/pwa-common/helpers/config';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()(() => {
+  const inactive = {
+    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'
+  };
+  return {
+    inactive,
+    active: {
+      ...inactive,
+      borderColor: 'var(--color-secondary)',
+      color: 'var(--color-secondary)'
+    }
+  };
+});
 
 /**
  * The value button component.
+ * @param {Object} props Props.
+ * @returns {JSX.Element}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-let ValueButton = /*#__PURE__*/function (_PureComponent) {
-  function ValueButton() {
-    return _PureComponent.apply(this, arguments) || this;
-  }
-  _inheritsLoose(ValueButton, _PureComponent);
-  var _proto = ValueButton.prototype;
-  /**
-   * @returns {JSX}
-   */
-  _proto.render = function render() {
-    const {
-      label,
-      id,
-      onClick,
-      isActive
-    } = this.props;
-    return /*#__PURE__*/_jsx("button", {
-      className: this.className,
-      value: id,
-      onClick: onClick,
-      "data-test-id": id,
-      type: "button",
-      role: "checkbox",
-      "aria-checked": isActive,
-      children: label
-    });
-  };
-  return _createClass(ValueButton, [{
-    key: "className",
-    get:
-    /**
-     * @returns {string}
-     */
-    function () {
-      const {
-        isActive
-      } = this.props;
-      return classNames({
-        [styles.inactive]: !isActive,
-        [styles.active]: isActive
-      });
-    }
-  }]);
-}(PureComponent);
+const ValueButton = ({
+  id,
+  isActive,
+  label,
+  onClick
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  const buttonClassName = useMemo(() => cx({
+    [classes.inactive]: !isActive,
+    [classes.active]: isActive
+  }), [classes.active, classes.inactive, isActive, cx]);
+  return /*#__PURE__*/_jsx("button", {
+    className: buttonClassName,
+    value: id,
+    onClick: onClick,
+    "data-test-id": id,
+    type: "button",
+    role: "checkbox",
+    "aria-checked": isActive,
+    children: label
+  });
+};
 ValueButton.defaultProps = {
   id: null,
   label: null,
   isActive: false,
   onClick() {}
 };
-export default ValueButton;
+export default /*#__PURE__*/memo(ValueButton);

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

@@ -1,163 +1,112 @@
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { PureComponent } from 'react';
+import "core-js/modules/es.array.includes.js";
+import React, { useState, useEffect, useCallback, memo } from 'react';
 import PropTypes from 'prop-types';
 import { Accordion, SurroundPortals } from '@shopgate/engage/components';
-import { i18n } from '@shopgate/engage/core';
+import { i18n } from '@shopgate/engage/core/helpers';
+import { makeStyles } from '@shopgate/engage/styles';
 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 { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()(() => ({
+  accordion: {
+    overflow: 'hidden'
+  },
+  content: {
+    marginLeft: -8,
+    marginBottom: -8
+  }
+}));
 
 /**
  * The selector component.
+ * @param {Object} props Props.
+ * @returns {JSX.Element}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-let Selector = /*#__PURE__*/function (_PureComponent) {
-  /**
-   * @param {Object} props The component props
-   */
-  function Selector(_props) {
-    var _this;
-    _this = _PureComponent.call(this, _props) || this;
-    /**
-     * @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 = [].concat(selected, [value]);
-
-      // If in single select mode, only allow one selected value.
-      if (!multi && selected.length === 1) {
+const Selector = ({
+  id,
+  label,
+  values,
+  multi,
+  onChange,
+  selected: selectedFromProps
+}) => {
+  const {
+    classes
+  } = useStyles();
+  const [selected, setSelected] = useState(() => selectedFromProps || []);
+  useEffect(() => {
+    setSelected(selectedFromProps || []);
+  }, [selectedFromProps]);
+  const handleClick = useCallback(event => {
+    const {
+      value
+    } = event.target;
+    setSelected(prev => {
+      let newSelected = [].concat(prev, [value]);
+      if (!multi && prev.length === 1) {
         newSelected = [value];
       }
-
-      // If the clicked value was already selected, remove it again.
-      if (selected.includes(value)) {
-        newSelected = selected.filter(item => item !== value);
+      if (prev.includes(value)) {
+        newSelected = prev.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 {
+      return newSelected;
+    });
+  }, [id, multi, onChange]);
+  const handlePortalChange = useCallback(updatedId => {
+    handleClick({
+      target: {
+        value: updatedId
+      }
+    });
+  }, [handleClick]);
+  const renderLabel = useCallback(props => /*#__PURE__*/_jsx(Toggle, {
+    ...props,
+    label: label,
+    selected: /*#__PURE__*/_jsx(Selected, {
+      values: values,
+      selected: selected
+    })
+  }), [label, selected, values]);
+  return /*#__PURE__*/_jsx(SurroundPortals, {
+    portalName: PORTAL_FILTER_SELECTOR,
+    portalProps: {
+      filter: {
+        id,
         label,
-        values
-      } = _this.props;
-      const {
-        selected
-      } = _this.state;
-      return /*#__PURE__*/_jsx(Toggle, {
-        ...props,
-        label: label,
-        selected: /*#__PURE__*/_jsx(Selected, {
-          values: values,
-          selected: selected
-        })
-      });
-    };
-    _this.state = {
-      selected: _props.selected || []
-    };
-    return _this;
-  }
-
-  /**
-   * @param {Object} nextProps The new incoming props.
-   */
-  _inheritsLoose(Selector, _PureComponent);
-  var _proto = Selector.prototype;
-  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps({
-    selected
-  }) {
-    if (selected !== this.state.selected) {
-      this.setState({
-        selected
-      });
-    }
-  };
-  /**
-   * @returns {JSX}
-   */
-  _proto.render = function render() {
-    const {
-      values,
-      id,
-      label,
-      multi
-    } = this.props;
-    const {
-      selected
-    } = this.state;
-    return /*#__PURE__*/_jsx(SurroundPortals, {
-      portalName: PORTAL_FILTER_SELECTOR,
-      portalProps: {
-        filter: {
-          id,
-          label,
-          values,
-          isMultiSelect: multi
-        },
-        selectedValueIds: selected,
-        onChange: this.handlePortalChange
+        values,
+        isMultiSelect: multi
       },
-      children: /*#__PURE__*/_jsx(FilterItem, {
-        children: /*#__PURE__*/_jsx(Accordion, {
-          renderLabel: this.renderLabel,
-          testId: id,
-          handleLabel: i18n.text('filter.filter_by', {
-            label
-          }),
-          className: styles.accordion,
-          children: /*#__PURE__*/_jsx("div", {
-            className: styles.content,
-            children: values.map(value => /*#__PURE__*/_jsx(ValueButton, {
-              id: value.id,
-              label: value.label,
-              isActive: selected && selected.includes(value.id),
-              onClick: this.handleClick
-            }, value.id))
-          })
+      selectedValueIds: selected,
+      onChange: handlePortalChange
+    },
+    children: /*#__PURE__*/_jsx(FilterItem, {
+      children: /*#__PURE__*/_jsx(Accordion, {
+        renderLabel: renderLabel,
+        testId: id,
+        handleLabel: i18n.text('filter.filter_by', {
+          label
+        }),
+        className: classes.accordion,
+        children: /*#__PURE__*/_jsx("div", {
+          className: classes.content,
+          children: values.map(value => /*#__PURE__*/_jsx(ValueButton, {
+            id: value.id,
+            label: value.label,
+            isActive: selected && selected.includes(value.id),
+            onClick: handleClick
+          }, value.id))
         })
       })
-    });
-  };
-  return Selector;
-}(PureComponent);
+    })
+  });
+};
 Selector.defaultProps = {
   multi: false,
   onChange() {},
   selected: null
 };
-export default Selector;
+export default /*#__PURE__*/memo(Selector);

package/filter/components/PriceSlider/components/Label/index.js

@@ -1,14 +1,69 @@
 import "core-js/modules/es.string.replace.js";
 import React, { memo, useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import appConfig from '@shopgate/pwa-common/helpers/config';
+import appConfig, { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 import { I18n } from '@shopgate/engage/components';
-import { i18n } from '@shopgate/engage/core';
-import styles from "../../style";
+import { i18n } from '@shopgate/engage/core/helpers';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   currency
 } = appConfig;
+const {
+  colors
+} = themeConfig;
+const useStyles = makeStyles()({
+  price: {
+    color: 'var(--color-secondary)',
+    display: 'inline-block',
+    fontWeight: 500,
+    textAlign: 'center'
+  },
+  editableContainer: {
+    position: 'relative'
+  },
+  editableField: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    textAlign: 'center',
+    background: 'transparent',
+    zIndex: 2,
+    textIndent: -800,
+    outline: 'none',
+    padding: 0,
+    margin: 0,
+    border: '1px solid transparent',
+    borderRadius: 3,
+    lineHeight: 1,
+    ':focus': {
+      background: colors.light,
+      textIndent: 0,
+      borderColor: colors.shade5
+    },
+    [responsiveMediaQuery('>=xs', {
+      webOnly: true
+    })]: {
+      borderColor: 'var(--color-primary)',
+      padding: '4px 0',
+      top: -4,
+      ':focus': {
+        borderColor: 'var(--color-primary)'
+      }
+    }
+  },
+  srOnly: {
+    position: 'absolute',
+    width: 1,
+    height: 1,
+    padding: 0,
+    margin: -1,
+    overflow: 'hidden',
+    clip: 'rect(0, 0, 0, 0)',
+    whiteSpace: 'nowrap',
+    border: 0
+  }
+});
 
 /**
  * The filter price range slider label component.
@@ -16,6 +71,9 @@ const {
 * @returns {JSX.Element}
  */
 function Label(props) {
+  const {
+    classes
+  } = useStyles();
   const {
     priceLength,
     priceMax,
@@ -81,9 +139,9 @@ function Label(props) {
     currency
   }).format('0').replace('0.00', '');
   return /*#__PURE__*/_jsxs("div", {
-    className: styles.editableContainer,
+    className: classes.editableContainer,
     children: [/*#__PURE__*/_jsx("span", {
-      className: styles.srOnly,
+      className: classes.srOnly,
       children: i18n.text('price.range', {
         fromPrice: i18n.price(priceMin, currency, false),
         toPrice: i18n.price(priceMax, currency, false)
@@ -94,7 +152,7 @@ function Label(props) {
       children: [/*#__PURE__*/_jsx(I18n.Placeholder, {
         forKey: "fromPrice",
         children: /*#__PURE__*/_jsx("span", {
-          className: styles.price,
+          className: classes.price,
           style: {
             minWidth: priceLength
           },
@@ -108,7 +166,7 @@ function Label(props) {
       }), /*#__PURE__*/_jsx(I18n.Placeholder, {
         forKey: "toPrice",
         children: /*#__PURE__*/_jsx("span", {
-          className: styles.price,
+          className: classes.price,
           style: {
             minWidth: priceLength
           },
@@ -138,7 +196,7 @@ function Label(props) {
         width: priceLength,
         left: minOffset
       },
-      className: styles.editableField,
+      className: classes.editableField,
       "aria-label": i18n.text('price.range_from'),
       "aria-describedby": "price-slider-currency-label"
     }), /*#__PURE__*/_jsx("input", {
@@ -154,7 +212,7 @@ function Label(props) {
         width: priceLength,
         left: maxOffset
       },
-      className: styles.editableField,
+      className: classes.editableField,
       "aria-label": i18n.text('price.range_to'),
       "aria-describedby": "price-slider-currency-label"
     })]