@shopgate/engage 7.32.0-beta.2 → 7.32.0-beta.20

package/page/widgets/README.md

@@ -0,0 +1,92 @@
+# Widgets
+
+Widgets are the building blocks of a CMS page. The core renders a flat list of containers and each
+widget renders inside one, without knowing anything about its surroundings.
+
+## Widget config
+
+A widget can tell the core a few things about itself. It does that in a `config.json` inside its
+own folder:
+
+```
+libraries/engage/page/widgets/Video/
+  config.json     <- the config of this widget
+  Video.tsx
+  hooks.ts
+  index.ts
+```
+
+Widgets that need no configuration ship no file.
+
+The file is read **at build time** and its content is passed to the app together with the widget
+mapping, so its values are known before the widget itself is loaded. A running build watches the
+config files, which means editing one is picked up without a restart. Adding a whole new widget
+still needs one, because that also changes the component mapping of the app.
+
+A config that does not match the schema, or that cannot be parsed, **fails the build** with a
+message that names the widget.
+
+### Media widget margins
+
+Merchants configure margins around media widgets in the theme settings. They arrive in the app
+settings as `widgets.mediaMargins` and are applied to the container of every widget that asks for
+them:
+
+```json
+{
+  "$schema": "../../widget.config.schema.json",
+  "layout": {
+    "applyMediaMargins": true
+  }
+}
+```
+
+`true` applies the margin on all four sides. To take part on some sides only, name them:
+
+```json
+{
+  "$schema": "../../widget.config.schema.json",
+  "layout": {
+    "applyMediaMargins": {
+      "top": true,
+      "bottom": true
+    }
+  }
+}
+```
+
+Widgets that bring their own spacing should not ask for the margins, otherwise the two add up. A
+widget that is meant to touch the screen edges leaves out `left` and `right`.
+
+Margins that a merchant configures for a single widget instance in the page builder always win over
+the media widget margins.
+
+### Editor support
+
+The optional `"$schema"` entry gives autocompletion and inline validation while editing. It is an
+editor feature only - the build never follows it, and it is stripped from the config before it
+reaches the app. What guards a config is the validation the build runs against
+[widget.config.schema.json](../widget.config.schema.json), which happens with or without the entry.
+
+Widgets in this package point at the schema with a path relative to their own folder:
+
+```json
+{
+  "$schema": "../../widget.config.schema.json",
+  "layout": {
+    "applyMediaMargins": true
+  }
+}
+```
+
+**Widgets in extensions leave the entry out.** There is no relative path that works for them: an
+extension is developed in its own repository, where this package is not present at all, and in an
+app it depends on whether the theme or the app carries `@shopgate/engage`. A wrong path is not
+dangerous - the editor just offers no help - but it is noise that never starts working. Extension
+authors who want the same support can map the schema in their editor instead, for example through
+`json.schemas` in the workspace settings of their repository.
+
+### Widgets of extensions
+
+The config of an extension widget belongs to the repository of that extension. `extensions/` is not
+part of this repository, so a file that is only added to a local checkout never ships.

package/page/widgets/Video/Video.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The VideoWidget is used to display a video.
+ */
+declare const Video: () => import("react").JSX.Element;
+export default Video;
+//# sourceMappingURL=Video.d.ts.map

package/page/widgets/Video/Video.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Video.d.ts","sourceRoot":"","sources":["../../../../page/widgets/Video/Video.tsx"],"names":[],"mappings":"AAGA;;GAEG;AACH,QAAA,MAAM,KAAK,mCAgBV,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/page/widgets/Video/Video.js

@@ -1,10 +1,8 @@
-import React from 'react';
 import { useVideoWidget } from "./hooks";
 import WidgetVideo from "../../components/WidgetVideo";
 
 /**
  * The VideoWidget is used to display a video.
- * @returns {JSX.Element}
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 const Video = () => {

package/page/widgets/Video/config.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../widget.config.schema.json",
+  "layout": {
+    "applyMediaMargins": true
+  }
+}

package/page/widgets/Video/hooks.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Configuration of the Video widget.
+ */
+export interface VideoWidgetConfig {
+    /**
+     * The video URL.
+     */
+    url: string;
+    /**
+     * Whether the video should be muted.
+     */
+    muted?: boolean;
+    /**
+     * Whether the video should loop.
+     */
+    loop?: boolean;
+    /**
+     * Whether the video should display controls.
+     */
+    controls?: boolean;
+    /**
+     * Whether the video should autoplay.
+     */
+    autoplay?: boolean;
+    /**
+     * The border radius option.
+     */
+    borderRadius: 'default' | 'none' | 'rounded' | 'custom';
+    /**
+     * The custom border radius value.
+     */
+    borderRadiusCustom?: number;
+    /**
+     * The link URL.
+     */
+    link?: string;
+}
+/**
+ * Resolved data returned by {@link useVideoWidget}. Reuses the field docs from
+ * {@link VideoWidgetConfig} for the pass-through fields via `Pick`.
+ */
+export interface UseVideoWidgetResult extends Pick<VideoWidgetConfig, 'url' | 'muted' | 'loop' | 'controls' | 'autoplay' | 'link'> {
+    /**
+     * The resolved border radius as a CSS length.
+     */
+    borderRadius: string;
+}
+/**
+ * Hook to access the Video widget configuration and data.
+ * @returns The resolved Video widget data.
+ */
+export declare const useVideoWidget: () => UseVideoWidgetResult;
+//# sourceMappingURL=hooks.d.ts.map

package/page/widgets/Video/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../page/widgets/Video/hooks.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,YAAY,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;IACxD;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAChD,iBAAiB,EACjB,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,CAC5D;IACC;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,QAAO,oBAoBjC,CAAC"}

package/page/widgets/Video/hooks.js

@@ -2,27 +2,19 @@ import { useWidget } from '@shopgate/engage/page/hooks';
 import { resolveBorderRadiusFromWidgetConfig } from "../../helpers";
 
 /**
- * @typedef {Object} VideoWidgetConfig
- * @property {string} url The video URL.
- * @property {boolean} [muted] Whether the video should be muted.
- * @property {boolean} [loop] Whether the video should loop.
- * @property {boolean} [controls] Whether the video should display controls.
- * @property {boolean} [autoplay] Whether the video should autoplay.
- * @property {number} [borderRadius] The border radius preset.
- * @property {string} [link] The link URL.
+ * Configuration of the Video widget.
  */
 
 /**
- * @typedef {ReturnType< typeof import('@shopgate/engage/page/hooks')
- *   .useWidget<VideoWidgetConfig> >} UseWidgetReturnType
+ * Resolved data returned by {@link useVideoWidget}. Reuses the field docs from
+ * {@link VideoWidgetConfig} for the pass-through fields via `Pick`.
  */
 
-// eslint-disable-next-line valid-jsdoc
 /**
  * Hook to access the Video widget configuration and data.
+ * @returns The resolved Video widget data.
  */
 export const useVideoWidget = () => {
-  /** @type {UseWidgetReturnType}  */
   const {
     config
   } = useWidget();

package/page/widgets/Video/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Video';
+//# sourceMappingURL=index.d.ts.map

package/page/widgets/Video/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../page/widgets/Video/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC"}

package/product/components/Description/index.js

@@ -16,7 +16,6 @@ const useStyles = makeStyles()(theme => ({
     lineHeight: 1.7,
     overflow: 'hidden',
     wordBreak: ['break-all', 'break-word'],
-    color: theme.palette.text.primary,
     hyphens: 'auto',
     ' ul': {
       listStyle: 'disc'
@@ -69,7 +68,6 @@ function Description({
         variant: "h5",
         component: "div",
         className: cx(classes.title, 'theme__description_heading'),
-        color: "textPrimary",
         children: /*#__PURE__*/_jsx(I18n.Text, {
           string: "product.description_heading"
         })

package/product/components/FilterBar/components/Content/components/FilterButton/index.js

@@ -1,35 +1,28 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
-import { Grid, I18n, Ripple, FilterIcon, Typography } from '@shopgate/engage/components';
+import { i18n } from '@shopgate/engage/core/helpers';
+import { Badge, I18n, FilterIcon, Typography } from '@shopgate/engage/components';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   button: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(0.75),
     color: 'inherit',
-    fontSize: theme.components.icon.medium,
     outline: 0,
-    padding: 0,
-    minWidth: theme.components.navigator.height,
-    height: theme.components.filterBar.height,
-    position: 'relative',
-    zIndex: 1,
-    overflow: 'hidden'
-  },
-  filterButton: {
-    display: 'flex'
+    flexShrink: 0,
+    margin: theme.spacing(0, 1.5),
+    padding: theme.spacing(0.25, 1),
+    border: `1px solid ${theme.components.border.medium}`,
+    borderRadius: theme.shape.borderRadius
   },
-  filterButtonLabel: {
-    alignSelf: 'center',
-    paddingRight: theme.spacing(1)
+  buttonActive: {
+    borderColor: theme.components.badge.background
   },
-  filterButtonRipple: {
-    display: 'flex',
-    height: '100%',
-    width: '100%',
-    justifyContent: 'center',
-    alignItems: 'center',
-    margin: 0,
-    padding: '6px 10px'
+  icon: {
+    fontSize: theme.components.icon.medium,
+    display: 'flex'
   }
 }));
 
@@ -39,39 +32,38 @@ const useStyles = makeStyles()(theme => ({
  * @return {JSX}
  */
 function FilterButton({
-  openFilters
+  openFilters,
+  filterCount
 }) {
   const {
     classes,
     cx
   } = useStyles();
-  return /*#__PURE__*/_jsx("button", {
-    className: cx(classes.button, 'theme__filter-bar__filter-button'),
+  return /*#__PURE__*/_jsxs("button", {
+    className: cx(classes.button, {
+      [classes.buttonActive]: filterCount > 0
+    }, 'theme__filter-bar__filter-button'),
     onClick: openFilters,
     "data-test-id": "filterButton",
+    "aria-label": i18n.text('titles.filter'),
     type: "button",
-    children: /*#__PURE__*/_jsx(Ripple, {
-      className: classes.filterButtonRipple,
-      fill: true,
-      children: /*#__PURE__*/_jsxs(Grid, {
-        component: "div",
-        children: [/*#__PURE__*/_jsx(Grid.Item, {
-          className: classes.filterButton,
-          component: "div",
-          children: /*#__PURE__*/_jsx(Typography, {
-            variant: "subtitle2",
-            component: "span",
-            className: classes.filterButtonLabel,
-            children: /*#__PURE__*/_jsx(I18n.Text, {
-              string: "titles.filter"
-            })
-          })
-        }), /*#__PURE__*/_jsx(Grid.Item, {
-          component: "div",
-          children: /*#__PURE__*/_jsx(FilterIcon, {})
-        })]
+    children: [/*#__PURE__*/_jsx("span", {
+      className: classes.icon,
+      children: /*#__PURE__*/_jsx(FilterIcon, {})
+    }), /*#__PURE__*/_jsx(Typography, {
+      variant: "subtitle2",
+      component: "span",
+      children: /*#__PURE__*/_jsx(I18n.Text, {
+        string: "titles.filter"
       })
-    })
+    }), /*#__PURE__*/_jsx(Badge, {
+      count: filterCount,
+      max: 9,
+      "aria-hidden": true
+    })]
   });
 }
+FilterButton.defaultProps = {
+  filterCount: 0
+};
 export default FilterButton;

package/product/components/FilterBar/components/Content/components/FilterChips/components/FilterChip/index.d.ts

@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react';
+export interface FilterChipProps {
+    /**
+     * Id of the filter value. Used as the test id and passed back to `onRemove`.
+     */
+    id: string;
+    /**
+     * The chip label.
+     */
+    children: ReactNode;
+    /**
+     * Whether the chip renders a remove button (default `true`).
+     */
+    removable?: boolean;
+    /**
+     * Aria label for the label button, which opens the filter page.
+     */
+    editLabel?: string;
+    /**
+     * Aria label for the remove button.
+     */
+    removeLabel?: string;
+    /**
+     * Invoked when the chip label is clicked.
+     */
+    onClick?: () => void;
+    /**
+     * Invoked with the chip id when the remove button is clicked.
+     */
+    onRemove?: (id: string) => void;
+}
+/**
+ * A removable chip representing one active filter within the filter bar.
+ * @returns The rendered component.
+ */
+declare const FilterChip: ({ id, children, removable, editLabel, removeLabel, onClick, onRemove, }: FilterChipProps) => import("react").JSX.Element;
+export default FilterChip;
+//# sourceMappingURL=index.d.ts.map

package/product/components/FilterBar/components/Content/components/FilterChips/components/FilterChip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../../../product/components/FilterBar/components/Content/components/FilterChips/components/FilterChip/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAwDtD,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAED;;;GAGG;AACH,QAAA,MAAM,UAAU,GAAI,yEAQjB,eAAe,gCAwBjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/product/components/FilterBar/components/Content/components/FilterChips/components/FilterChip/index.js

@@ -0,0 +1,88 @@
+import { useCallback } from 'react';
+import noop from 'lodash/noop';
+import Button from '@shopgate/pwa-common/components/Button';
+import { CrossIcon } from '@shopgate/engage/components';
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()((theme, {
+  removable
+}) => ({
+  chip: {
+    display: 'flex',
+    alignItems: 'center',
+    minWidth: 0,
+    maxWidth: '72%',
+    height: 30,
+    borderRadius: theme.shape.borderRadius,
+    border: `1px solid ${theme.palette.secondary.main}`,
+    background: theme.palette.background.surface,
+    color: theme.palette.text.primary,
+    paddingLeft: removable ? theme.spacing(0.75) : theme.spacing(1.25),
+    paddingRight: theme.spacing(1.25),
+    outline: 0
+  },
+  name: {
+    ...theme.typography.body2,
+    fontWeight: theme.typography.fontWeightMedium,
+    display: 'block',
+    color: 'inherit',
+    padding: 0,
+    paddingLeft: removable ? theme.spacing(0.5) : 0,
+    maxWidth: '100%',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+  },
+  removeButton: {
+    display: 'flex',
+    flexShrink: 0,
+    padding: 0,
+    color: theme.palette.secondary.main
+  }
+}));
+
+/**
+ * `Button` is untyped JavaScript whose optional props read as required from TypeScript.
+ */
+const ChipButton = Button;
+/**
+ * A removable chip representing one active filter within the filter bar.
+ * @returns The rendered component.
+ */
+const FilterChip = ({
+  id,
+  children,
+  removable = true,
+  editLabel,
+  removeLabel,
+  onClick = noop,
+  onRemove = noop
+}) => {
+  const {
+    classes
+  } = useStyles({
+    removable
+  });
+  const handleRemove = useCallback(() => {
+    onRemove(id);
+  }, [onRemove, id]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: classes.chip,
+    "data-test-id": id,
+    children: [removable && /*#__PURE__*/_jsx(ChipButton, {
+      className: classes.removeButton,
+      onClick: handleRemove,
+      testId: "removeFilter",
+      "aria-label": removeLabel,
+      children: /*#__PURE__*/_jsx(CrossIcon, {
+        size: 16
+      })
+    }), /*#__PURE__*/_jsx(ChipButton, {
+      className: classes.name,
+      onClick: onClick,
+      "aria-label": editLabel,
+      children: children
+    })]
+  });
+};
+export default FilterChip;

package/product/components/FilterBar/components/Content/components/FilterChips/index.js

@@ -1,24 +1,41 @@
 import React, { useCallback, useMemo, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import noop from 'lodash/noop';
+import { useDispatch } from 'react-redux';
 import { router } from '@virtuous/conductor';
 import appConfig from '@shopgate/pwa-common/helpers/config';
-import { Chip, ChipLayout } from '@shopgate/engage/components';
+import { updateFilters } from '@shopgate/pwa-common-commerce/filter/action-creators';
+import { I18n } from '@shopgate/engage/components';
 import { FILTER_TYPE_RANGE, FILTER_TYPE_MULTISELECT, translateFilterLabel } from '@shopgate/engage/filter';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { makeStyles } from '@shopgate/engage/styles';
-import connect from "./connector";
-import { jsx as _jsx } from "react/jsx-runtime";
+import FilterChip from "./components/FilterChip";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   container: {
-    overflow: 'auto',
-    padding: theme.spacing(0, 1.5),
-    width: '100%'
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(1),
+    overflowX: 'auto',
+    overflowY: 'hidden',
+    padding: theme.spacing(0.5, 1.5, 1.5),
+    width: '100%',
+    scrollbarWidth: 'none',
+    '&::-webkit-scrollbar': {
+      display: 'none'
+    },
+    '& > *': {
+      flexShrink: 0
+    }
   },
-  label: {
-    // TODO: This CSS variable is re-defined inside the Chip component. So refactoring to the
-    // theme need some planning.
-    color: 'var(--color-text-high-emphasis)'
+  clearAll: {
+    ...theme.typography.body2,
+    color: theme.palette.text.primary,
+    outline: 0,
+    padding: theme.spacing(0.5, 1, 0.5, 0),
+    whiteSpace: 'nowrap',
+    textDecoration: 'underline',
+    textUnderlineOffset: 3
   }
 }));
 
@@ -29,16 +46,15 @@ const useStyles = makeStyles()(theme => ({
 const FilterChips = ({
   filters,
   routeId,
-  updateFilters,
   scrollTop,
   openFilters,
-  currentPathname,
   onChipCountUpdate
 }) => {
   const {
     classes,
     cx
   } = useStyles();
+  const dispatch = useDispatch();
   const handleRemove = useCallback((id, value) => {
     const {
       [id]: selected,
@@ -62,7 +78,7 @@ const FilterChips = ({
           router.update(routeId, {
             filters: newFilters
           });
-          updateFilters(newFilters);
+          dispatch(updateFilters(newFilters));
           scrollTop();
         }, 0);
         return;
@@ -72,9 +88,16 @@ const FilterChips = ({
     router.update(routeId, {
       filters: newFilters
     });
-    updateFilters(newFilters);
+    dispatch(updateFilters(newFilters));
+    scrollTop();
+  }, [dispatch, filters, routeId, scrollTop]);
+  const handleClearAll = useCallback(() => {
+    router.update(routeId, {
+      filters: null
+    });
+    dispatch(updateFilters(null));
     scrollTop();
-  }, [filters, routeId, scrollTop, updateFilters]);
+  }, [dispatch, routeId, scrollTop]);
   const chips = useMemo(() => {
     if (filters === null || !Object.keys(filters).length) {
       return [];
@@ -108,16 +131,13 @@ const FilterChips = ({
             const editLabel = i18n.text('filter.edit', {
               filter: labelValue
             });
-            entries.push(/*#__PURE__*/_jsx(Chip, {
+            entries.push(/*#__PURE__*/_jsx(FilterChip, {
               id: key,
               onRemove: handleRemove,
               onClick: openFilters,
               removeLabel: removeLabel,
               editLabel: editLabel,
-              children: /*#__PURE__*/_jsx("span", {
-                className: classes.label,
-                children: pricesFormatted
-              })
+              children: pricesFormatted
             }, `filter-${key}`));
             break;
           }
@@ -133,43 +153,42 @@ const FilterChips = ({
             const editLabel = i18n.text('filter.edit', {
               filter: filterFormatted
             });
-            entries.push(/*#__PURE__*/_jsx(Chip, {
+            entries.push(/*#__PURE__*/_jsx(FilterChip, {
               id: value.id,
               onRemove: () => handleRemove(filter.id, value.id),
               onClick: openFilters,
               removeLabel: removeLabel,
               editLabel: editLabel,
-              children: /*#__PURE__*/_jsx("span", {
-                className: classes.label,
-                children: filterFormatted
-              })
+              children: filterFormatted
             }, `filter-${value.id}`));
           });
           break;
       }
     });
     return entries;
-  }, [classes.label, filters, handleRemove, openFilters]);
+  }, [filters, handleRemove, openFilters]);
   useEffect(() => {
     onChipCountUpdate(chips.length);
   }, [chips.length, onChipCountUpdate]);
   if (chips.length === 0) {
     return null;
   }
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: cx(classes.container, 'theme__filter-bar__filter-chips'),
-    children: /*#__PURE__*/_jsx(ChipLayout, {
-      moreLabel: "filter.more",
-      handleMoreButton: openFilters,
-      pathname: currentPathname,
-      children: chips
-    })
+    children: [chips.length > 3 && /*#__PURE__*/_jsx("button", {
+      className: classes.clearAll,
+      onClick: handleClearAll,
+      "data-test-id": "clearAllFilters",
+      type: "button",
+      children: /*#__PURE__*/_jsx(I18n.Text, {
+        string: "filter.clear_all"
+      })
+    }), chips]
   });
 };
 FilterChips.defaultProps = {
-  currentPathname: '',
   filters: null,
   scrollTop: noop,
   onChipCountUpdate: noop
 };
-export default connect(FilterChips);
+export default FilterChips;

package/product/components/FilterBar/components/Content/components/Sort/index.js

@@ -34,7 +34,7 @@ const useStyles = makeStyles()(theme => ({
     zIndex: 2,
     top: '100%',
     left: 0,
-    background: theme.palette.background.emphasized,
+    background: theme.palette.background.surface,
     boxShadow: 'rgba(0, 0, 0, 0.16) 0 2px 2px',
     [responsiveMediaQuery('>xs', {
       webOnly: true