@shopgate/engage 7.32.0-beta.7 → 7.32.0-beta.8

package/page/widgets/ProductList/ProductList.js

@@ -1,23 +1,27 @@
 import "core-js/modules/es.regexp.flags.js";
 import React, { useCallback } from 'react';
-import { ActionButton, I18n } from '@shopgate/engage/components';
+import { I18n } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { ProductGrid } from '@shopgate/engage/product/components';
 import { useWidgetProducts } from '@shopgate/engage/page/hooks';
 import { makeStyles } from '@shopgate/engage/styles';
 import { useProductListWidget } from "./hooks";
 import WidgetHeadline from "../../components/WidgetHeadline";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   root: {
-    // Prevent that the ActionButton margin messes with the layout of the sibling widgets
     overflow: 'hidden'
   },
+  loadMore: {
+    textAlign: 'center',
+    margin: theme.spacing(1, 0)
+  },
   grid: {
     '&&': {
       marginTop: 0
     }
   }
-});
+}));
 
 /**
  * The ProductListWidget is used to display product lists.
@@ -66,16 +70,16 @@ const ProductListWidget = () => {
       scope: "widgets",
       infiniteLoad: false,
       className: classes.grid
-    }), hasNext && showLoadMore && /*#__PURE__*/_jsx(ActionButton, {
-      loading: isFetching,
-      onClick: handleFetchNext
-      // Disable click delay in preview mode to enable stopping of propagation.
-      ,
-      ...(isPreview && {
-        disableClickDelay: true
-      }),
-      children: /*#__PURE__*/_jsx(I18n.Text, {
-        string: "common.load_more"
+    }), hasNext && showLoadMore && /*#__PURE__*/_jsx("div", {
+      className: classes.loadMore,
+      children: /*#__PURE__*/_jsx(Button, {
+        variant: "text",
+        color: "secondary",
+        loading: isFetching,
+        onClick: handleFetchNext,
+        children: /*#__PURE__*/_jsx(I18n.Text, {
+          string: "common.load_more"
+        })
       })
     })]
   });

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

@@ -41,9 +41,9 @@ export interface VideoWidgetConfig {
  */
 export interface UseVideoWidgetResult extends Pick<VideoWidgetConfig, 'url' | 'muted' | 'loop' | 'controls' | 'autoplay' | 'link'> {
     /**
-     * The resolved border radius value in pixels.
+     * The resolved border radius as a CSS length.
      */
-    borderRadius: number;
+    borderRadius: string;
 }
 /**
  * Hook to access the Video widget configuration and data.

package/product/components/ProductGrid/components/Item/components/ItemImage/index.js

@@ -3,27 +3,18 @@ import PropTypes from 'prop-types';
 import { SurroundPortals } from '@shopgate/engage/components';
 import { PRODUCT_ITEM_IMAGE } from '@shopgate/engage/category/constants';
 import { ProductImage } from '@shopgate/engage/product';
-import { makeStyles } from '@shopgate/engage/styles';
-import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  image: {
-    background: theme.palette.background.surface
-  }
-}));
 
 /**
  * The item image component.
  * @param {Object} props The component props.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const ItemImage = ({
   productId,
   name,
   imageUrl
 }) => {
-  const {
-    classes
-  } = useStyles();
   const portalProps = useMemo(() => ({
     productId
   }), [productId]);
@@ -31,7 +22,6 @@ const ItemImage = ({
     portalName: PRODUCT_ITEM_IMAGE,
     portalProps: portalProps,
     children: /*#__PURE__*/_jsx(ProductImage, {
-      className: classes.image,
       alt: name,
       src: imageUrl,
       context: "list",

package/product/components/ProductGrid/components/Item/index.js

@@ -18,9 +18,10 @@ const useStyles = makeStyles()((theme, {
     display: 'flex',
     flexDirection: 'column',
     height: '100%',
-    overflow: 'hidden',
     padding: theme.components.tiles.padding,
-    background: theme.components.tiles.backgroundColor
+    background: theme.components.tiles.backgroundColor,
+    border: theme.components.tiles.border,
+    borderRadius: theme.components.tiles.borderRadius
   },
   image: {
     display: 'block',

package/product/components/ProductImage/ProductImage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProductImage.d.ts","sourceRoot":"","sources":["../../../../product/components/ProductImage/ProductImage.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uCAAuC,CAAC;AAMxE,OAAO,KAAK,EACV,eAAe,EACf,mBAAmB,EACpB,MAAM,6CAA6C,CAAC;AA0BrD;;;GAGG;AACH,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,UAAU,EAAE,iBAAiB,GAAG,aAAa,CAAC;IAC5F;;;OAGG;IACH,OAAO,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACrC;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IACxB;;;OAGG;IACH,WAAW,CAAC,EAAE,eAAe,EAAE,CAAC;CACjC;AAmCD;;;;;;GAMG;AACH,QAAA,MAAM,YAAY,GAAI,OAAO,iBAAiB,gCA0E7C,CAAC;AAEF,OAAO,EAAE,YAAY,IAAI,qBAAqB,EAAE,CAAC;oEAOX,iBAAiB;AAOvD,wBAA2C"}
+{"version":3,"file":"ProductImage.d.ts","sourceRoot":"","sources":["../../../../product/components/ProductImage/ProductImage.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uCAAuC,CAAC;AAMxE,OAAO,KAAK,EACV,eAAe,EACf,mBAAmB,EACpB,MAAM,6CAA6C,CAAC;AA0BrD;;;GAGG;AACH,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,UAAU,EAAE,iBAAiB,GAAG,aAAa,CAAC;IAC5F;;;OAGG;IACH,OAAO,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACrC;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IACxB;;;OAGG;IACH,WAAW,CAAC,EAAE,eAAe,EAAE,CAAC;CACjC;AAuCD;;;;;;GAMG;AACH,QAAA,MAAM,YAAY,GAAI,OAAO,iBAAiB,gCA4E7C,CAAC;AAEF,OAAO,EAAE,YAAY,IAAI,qBAAqB,EAAE,CAAC;oEAOX,iBAAiB;AAOvD,wBAA2C"}

package/product/components/ProductImage/ProductImage.js

@@ -28,6 +28,10 @@ const DEFAULT_PRODUCT_IMAGE_CONTEXT = 'list';
  */
 
 const useStyles = makeStyles()(theme => ({
+  rounded: {
+    borderRadius: theme.components.productImage.borderRadius,
+    overflow: 'hidden'
+  },
   placeholderContent: {
     position: 'absolute',
     width: '100%',
@@ -100,6 +104,7 @@ const ProductImage = props => {
   } = useStyles();
   const theme = useTheme();
   const showInnerShadow = useProductImageShadow();
+  const isRounded = (context || DEFAULT_PRODUCT_IMAGE_CONTEXT) === 'list';
 
   // Image decides when to show this.
   const placeholder = placeholderSrc ? /*#__PURE__*/_jsx(ProductImagePlaceholder, {
@@ -122,14 +127,14 @@ const ProductImage = props => {
       ratio: resolved.ratio
     } : undefined,
     children: /*#__PURE__*/_jsx("div", {
-      className: cx(className, 'engage__product__product-image'),
+      className: cx(isRounded && classes.rounded, className, 'engage__product__product-image'),
       children: /*#__PURE__*/_jsx(Image, {
         ...props,
         resolutions: resolved.resolutions,
         ratio: resolved.ratio,
         placeholder: placeholder,
         className: showInnerShadow ? classes.innerShadow : '',
-        backgroundColor: noBackground ? 'transparent' : theme.palette.background.surface,
+        backgroundColor: noBackground ? 'transparent' : theme.palette.common.white,
         "aria-hidden": !alt
       })
     })

package/product/components/ProductImage/ProductImagePlaceholder.js

@@ -65,14 +65,14 @@ const ProductImagePlaceholder = props => {
         backgroundSize: 'contain',
         backgroundRepeat: 'no-repeat',
         backgroundPosition: 'center',
-        backgroundColor: noBackground ? 'transparent' : theme.palette.background.surface,
+        backgroundColor: noBackground ? 'transparent' : theme.palette.common.white,
         position: 'absolute'
       };
     }
     return {
-      backgroundColor: noBackground ? 'transparent' : theme.palette.background.surface
+      backgroundColor: noBackground ? 'transparent' : theme.palette.common.white
     };
-  }, [srcLoaded, noBackground, theme.palette.background.surface, src]);
+  }, [srcLoaded, noBackground, theme.palette.common.white, src]);
   const contentClasses = cx(classes.placeholderContent, {
     [classes.innerShadow]: showInnerShadow
   });

package/product/components/UnitQuantityPicker/UnitQuantityPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UnitQuantityPicker.d.ts","sourceRoot":"","sources":["../../../../product/components/UnitQuantityPicker/UnitQuantityPicker.jsx"],"names":[],"mappings":";AA0GA;;;GAGG;AACH;;;;;;;;;;;;;;;;;IAFa,GAAG,CAAC,OAAO,CAmNvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBA5TqB,YAAY"}
+{"version":3,"file":"UnitQuantityPicker.d.ts","sourceRoot":"","sources":["../../../../product/components/UnitQuantityPicker/UnitQuantityPicker.jsx"],"names":[],"mappings":";AA6FA;;;GAGG;AACH;;;;;;;;;;;;;;;;;IAFa,GAAG,CAAC,OAAO,CAqMvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAjSqB,YAAY"}

package/product/components/UnitQuantityPicker/UnitQuantityPicker.js

@@ -4,7 +4,8 @@ import { i18n, hasNewServices } from '@shopgate/engage/core/helpers';
 import { UIEvents } from '@shopgate/engage/core';
 import { useWidgetSettings } from '@shopgate/engage/core/hooks';
 import { makeStyles, useTheme } from '@shopgate/engage/styles';
-import { RippleButton, QuantityInput } from '@shopgate/engage/components';
+import { QuantityInput } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { broadcastLiveMessage } from '@shopgate/engage/a11y/helpers';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const useStyles = makeStyles()((theme, {
@@ -76,10 +77,8 @@ const useStyles = makeStyles()((theme, {
     },
     button: {
       width: sizeValue,
-      ' &&': {
-        minWidth: sizeValue,
-        padding: 0
-      },
+      minWidth: sizeValue,
+      padding: 0,
       height: sizeValue,
       fontSize: `${Math.floor(sizeValue / 28 * 100)}%`,
       '&:not(:disabled)': {
@@ -91,25 +90,13 @@ const useStyles = makeStyles()((theme, {
         })
       }
     },
-    buttonRipple: {
-      padding: 0
-    },
     buttonNoRadiusLeft: {
-      ' &&': {
-        borderTopLeftRadius: 0,
-        borderBottomLeftRadius: 0
-      }
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0
     },
     buttonNoRadiusRight: {
-      ' &&': {
-        borderTopRightRadius: 0,
-        borderBottomRightRadius: 0
-      }
-    },
-    disabled: {
-      ' > div': {
-        padding: 0
-      }
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0
     }
   };
 });
@@ -251,13 +238,10 @@ const UnitQuantityPicker = ({
       className: classes.backdrop
     }), /*#__PURE__*/_jsxs("div", {
       className: cx(classes.root, className),
-      children: [/*#__PURE__*/_jsx(RippleButton, {
-        type: "secondary",
+      children: [/*#__PURE__*/_jsx(Button, {
+        color: "primary",
         disabled: !allowDecrement || disabled,
-        rippleClassName: classes.buttonRipple,
-        className: cx(classes.button, classes.buttonNoRadiusRight, {
-          [classes.disabled]: !allowDecrement || disabled
-        }),
+        className: cx(classes.button, classes.buttonNoRadiusRight),
         onClick: handleDecrement,
         "aria-label": i18n.text('product.decrease_quantity'),
         children: "-"
@@ -282,13 +266,10 @@ const UnitQuantityPicker = ({
           onKeyDown: handleKeyDown,
           ref: inputRef
         })]
-      }), /*#__PURE__*/_jsx(RippleButton, {
-        type: "secondary",
+      }), /*#__PURE__*/_jsx(Button, {
+        color: "primary",
         disabled: !allowIncrement || disabled,
-        rippleClassName: classes.buttonRipple,
-        className: cx(classes.button, classes.buttonNoRadiusLeft, {
-          [classes.disabled]: !allowIncrement || disabled
-        }),
+        className: cx(classes.button, classes.buttonNoRadiusLeft),
         onClick: handleIncrement,
         "aria-label": i18n.text('product.increase_quantity'),
         children: "+"

package/push-opt-in/components/PushOptInModal/index.js

@@ -2,7 +2,8 @@ import React, { useMemo, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import throttle from 'lodash/throttle';
 import { makeStyles } from '@shopgate/engage/styles';
-import { Grid, I18n, Button, Modal, Typography } from '@shopgate/engage/components';
+import { Grid, I18n, Modal, Typography } from '@shopgate/engage/components';
+import { Button, ButtonBase } from '@shopgate/engage/components/v2';
 import { appConfig } from '@shopgate/engage';
 import pushImage from "./push-opt-in.svg";
 import connect from "./connector";
@@ -127,14 +128,13 @@ const PushOptInModal = ({
           id: "pushOptInDialogMessage"
         }), /*#__PURE__*/_jsx(Button, {
           onClick: handleAllowPushOptIn,
-          type: "primary",
+          color: "secondary",
           className: cx(classes.button, 'push-opt-in-modal__button-allow'),
           children: /*#__PURE__*/_jsx(I18n.Text, {
             string: modalButtonAllow || 'pushOptInModal.buttonAllow'
           })
-        }), /*#__PURE__*/_jsx(Button, {
+        }), /*#__PURE__*/_jsx(ButtonBase, {
           onClick: handleDenyPushOptIn,
-          type: "plain",
           className: cx(classes.button, 'push-opt-in-modal__button-deny'),
           children: /*#__PURE__*/_jsx(I18n.Text, {
             string: modalButtonDeny || 'pushOptInModal.buttonDeny',

package/registration/components/Registration/RegistrationFormActions.js

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { i18n, isIOSTheme } from '@shopgate/engage/core';
 import { makeStyles } from '@shopgate/engage/styles';
-import { RippleButton } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { useRegistration } from "../../hooks";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
@@ -15,7 +15,6 @@ const useStyles = makeStyles()(theme => ({
     } : null)
   },
   submitButton: {
-    width: '100%',
     marginTop: 8
   }
 }));
@@ -48,8 +47,9 @@ const RegisterFormActions = ({
   }, [guestRegistrationEditMode, isGuest, orderNeedsPayment]);
   return /*#__PURE__*/_jsx("div", {
     className: classes.submitButtonContainer,
-    children: /*#__PURE__*/_jsx(RippleButton, {
-      type: "secondary",
+    children: /*#__PURE__*/_jsx(Button, {
+      color: "primary",
+      fullWidth: true,
       onClick: handleSubmit,
       disabled: isLocked,
       className: classes.submitButton,

package/reviews/components/Reviews/components/AllReviewsLink/index.js

@@ -4,17 +4,15 @@ import { bin2hex } from '@shopgate/pwa-common/helpers/data';
 import { I18n } from '@shopgate/engage/components';
 import { ITEM_PATH } from '@shopgate/pwa-common-commerce/product/constants/index';
 import { REVIEW_PREVIEW_COUNT } from '@shopgate/pwa-common-commerce/reviews/constants';
-import ButtonLink from '@shopgate/pwa-ui-shared/ButtonLink';
+import { Button } from '@shopgate/engage/components/v2';
 import { makeStyles } from '@shopgate/engage/styles';
 import connect from "./connector";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
+const useStyles = makeStyles()(() => ({
   container: {
     display: 'flex',
     justifyContent: 'flex-end',
-    textAlign: 'right',
-    marginTop: theme.spacing(-1),
-    marginBottom: theme.spacing(-2)
+    textAlign: 'right'
   }
 }));
 
@@ -33,7 +31,9 @@ const AllReviewsLink = props => {
   return /*#__PURE__*/_jsx("div", {
     className: cx(classes.container, 'engage__reviews__all-reviews-link'),
     "data-test-id": "showAllReviewsButton",
-    children: /*#__PURE__*/_jsx(ButtonLink, {
+    children: /*#__PURE__*/_jsx(Button, {
+      variant: "text",
+      color: "primary",
       href: `${ITEM_PATH}/${bin2hex(props.productId)}/reviews`,
       children: /*#__PURE__*/_jsx(I18n.Text, {
         string: "reviews.button_all",

package/reviews/components/Reviews/components/Header/components/WriteReviewLink/index.js

@@ -4,7 +4,7 @@ import { I18n } from '@shopgate/engage/components';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { ITEM_PATH } from '@shopgate/pwa-common-commerce/product/constants';
 import { bin2hex } from '@shopgate/pwa-common/helpers/data';
-import ButtonLink from '@shopgate/pwa-ui-shared/ButtonLink';
+import { Button } from '@shopgate/engage/components/v2';
 
 /**
  * Link to add a review.
@@ -16,9 +16,10 @@ const WriteReviewLink = ({
 }) => /*#__PURE__*/_jsx("div", {
   "data-test-id": "writeReview",
   className: "engage__reviews__write-review-link",
-  children: /*#__PURE__*/_jsx(ButtonLink, {
+  children: /*#__PURE__*/_jsx(Button, {
+    variant: "text",
+    color: "primary",
     href: `${ITEM_PATH}/${bin2hex(productId)}/write_review`,
-    noGap: true,
     "aria-label": i18n.text('reviews.button_add'),
     children: /*#__PURE__*/_jsx(I18n.Text, {
       string: "reviews.button_add"

package/reviews/components/Reviews/components/Header/components/WriteReviewLink/spec.js

@@ -1,9 +1,17 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import WriteReviewLink from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
+const mockPush = jest.fn();
+jest.mock('@shopgate/engage/core/hooks/useNavigation', () => ({
+  useNavigation: () => ({
+    push: mockPush,
+    replace: jest.fn()
+  })
+}));
 
 /* eslint-disable react/prop-types */
-import { jsx as _jsx } from "react/jsx-runtime";
+
 jest.mock('@shopgate/engage/components', () => ({
   I18n: {
     Text: ({
@@ -13,23 +21,6 @@ jest.mock('@shopgate/engage/components', () => ({
     })
   }
 }));
-jest.mock('@shopgate/pwa-ui-shared/ButtonLink', () => {
-  function ButtonLink(props) {
-    const {
-      children,
-      href,
-      noGap,
-      ...rest
-    } = props;
-    return /*#__PURE__*/_jsx("a", {
-      href: href,
-      ...rest,
-      "data-no-gap": String(noGap),
-      children: children
-    });
-  }
-  return ButtonLink;
-});
 
 /**
  * Creates component.
@@ -39,13 +30,28 @@ const createComponent = () => render(/*#__PURE__*/_jsx(WriteReviewLink, {
   productId: "foo"
 }));
 describe('<WriteReviewLink>', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    jest.useFakeTimers();
+  });
+  afterEach(() => {
+    jest.useRealTimers();
+  });
   it('should render when current product is set', () => {
     createComponent();
-    const link = screen.getByRole('link', {
+    expect(screen.getByText('reviews.button_add')).toBeTruthy();
+  });
+
+  // The button renders as an anchor on web builds only, so the navigation itself is the contract.
+  it('should navigate to the write review route when pressed', () => {
+    createComponent();
+    fireEvent.click(screen.getByRole('button', {
       name: 'reviews.button_add'
+    }));
+    jest.runAllTimers();
+    expect(mockPush).toHaveBeenCalledWith({
+      pathname: '/item/666f6f/write_review'
     });
-    expect(link).toHaveAttribute('href', '/item/666f6f/write_review');
-    expect(screen.getByText('reviews.button_add')).toBeTruthy();
   });
 });
 

package/reviews/components/Reviews/spec.js

@@ -40,7 +40,6 @@ jest.mock('@shopgate/engage/components', () => ({
     })
   }
 }));
-jest.mock('@shopgate/pwa-ui-shared/ButtonLink', () => 'a');
 
 // Mock the getter of the hasReviews key inside the app config, so that we can turn it off later
 jest.resetModules();
@@ -66,7 +65,7 @@ describe('<Reviews />', () => {
     expect(screen.getByTestId('reviews-header')).toBeTruthy();
     expect(screen.getByTestId('reviews-list')).toBeTruthy();
     expect(screen.getByTestId('reviews-info')).toBeTruthy();
-    expect(screen.queryByRole('link', {
+    expect(screen.queryByRole('button', {
       name: 'reviews.button_all'
     })).toBeNull();
   });
@@ -74,15 +73,15 @@ describe('<Reviews />', () => {
     createComponent(mockedStateWithAll);
     expect(screen.getByTestId('reviews-header')).toBeTruthy();
     expect(screen.getByTestId('reviews-list')).toBeTruthy();
-    expect(screen.getByRole('link', {
+    expect(screen.getByRole('button', {
       name: 'reviews.button_all'
-    })).toHaveAttribute('href', '/item/666f6f/reviews');
+    })).toBeTruthy();
   });
   it('should render reviews, header, but no all reviews link', () => {
     createComponent(mockedStateWithTwoReviews);
     expect(screen.getByTestId('reviews-header')).toBeTruthy();
     expect(screen.getByTestId('reviews-list')).toBeTruthy();
-    expect(screen.queryByRole('link', {
+    expect(screen.queryByRole('button', {
       name: 'reviews.button_all'
     })).toBeNull();
   });
@@ -94,7 +93,7 @@ describe('<Reviews />', () => {
     expect(container.firstChild).toBeNull();
     expect(screen.queryByTestId('reviews-header')).toBeNull();
     expect(screen.queryByTestId('reviews-list')).toBeNull();
-    expect(screen.queryByRole('link', {
+    expect(screen.queryByRole('button', {
       name: 'reviews.button_all'
     })).toBeNull();
   });

package/settings/reducers/appSettings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"appSettings.d.ts","sourceRoot":"","sources":["../../../settings/reducers/appSettings.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAa/E,KAAK,iBAAiB,GAAG,wBAAwB,GAAG,aAAa,CAAC;AAQlE;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,gBAyDlC,CAAC;AAEF;;;;;GAKG;AACH,QAAA,MAAM,WAAW,EAAE,OAAO,CAAC,gBAAgB,EAAE,iBAAiB,CA+B7D,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"appSettings.d.ts","sourceRoot":"","sources":["../../../settings/reducers/appSettings.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAa/E,KAAK,iBAAiB,GAAG,wBAAwB,GAAG,aAAa,CAAC;AAQlE;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,gBA4DlC,CAAC;AAEF;;;;;GAKG;AACH,QAAA,MAAM,WAAW,EAAE,OAAO,CAAC,gBAAgB,EAAE,iBAAiB,CAmC7D,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/settings/reducers/appSettings.js

@@ -61,6 +61,9 @@ export const DEFAULT_APP_SETTINGS = {
       size: 'medium'
     }
   },
+  typography: {
+    variants: {}
+  },
   images: {
     quality: DEFAULT_IMAGE_QUALITY,
     // Already in the image service's format, so the unhydrated path needs no conversion.
@@ -87,7 +90,8 @@ const appSettings = (state, action = {
 }) => {
   if (isReceiveAppSettingsAction(action)) {
     const {
-      images
+      images,
+      typography
     } = action.settings ?? {};
 
     // Merged over the defaults rather than over the current state, so a field an incoming payload
@@ -101,6 +105,10 @@ const appSettings = (state, action = {
       images: images === null ? undefined : {
         ...images,
         product: images?.product ?? undefined
+      },
+      typography: typography === null ? undefined : {
+        ...typography,
+        variants: typography?.variants ?? undefined
       }
     }, {
       isHydrated: true

package/settings/selectors/appSettings.d.ts

@@ -119,4 +119,20 @@ export declare const getCardShadowSize: ((state: AppSettingsState) => import("..
 }> & {
     clearCache: () => void;
 };
+/**
+ * Selects the typography settings.
+ */
+export declare const getTypographySettings: ((state: AppSettingsState) => import("../types/appSettings").TypographySettings) & import("reselect").OutputSelectorFields<(args_0: AppSettingsSlice) => import("../types/appSettings").TypographySettings, {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};
+/**
+ * Selects the font stylesheets to load, global file first and without duplicates.
+ */
+export declare const getTypographyFontCssUrls: ((state: AppSettingsState) => string[]) & import("reselect").OutputSelectorFields<(args_0: import("../types/appSettings").TypographySettings) => string[], {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};
 //# sourceMappingURL=appSettings.d.ts.map

package/settings/selectors/appSettings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"appSettings.d.ts","sourceRoot":"","sources":["../../../settings/selectors/appSettings.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAG/E;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,GAAI,OAAO,gBAAgB,KAAG,gBACR,CAAC;AAEvD;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB;;;;CAGrC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;CAG7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB;;;;CAGjC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,6BAA6B;;;;CAGzC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB;;;;CAGnC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB;;;;CAGnC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB;;;;CAG5B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,0BAA0B;;;;CAGtC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,0BAA0B;;;;CAGtC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe;;;;CAG3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;CAG7B,CAAC"}
+{"version":3,"file":"appSettings.d.ts","sourceRoot":"","sources":["../../../settings/selectors/appSettings.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAG/E;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,GAAI,OAAO,gBAAgB,KAAG,gBACR,CAAC;AAEvD;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB;;;;CAGrC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;CAG7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB;;;;CAGjC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,6BAA6B;;;;CAGzC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB;;;;CAGnC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB;;;;CAGnC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB;;;;CAG5B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,0BAA0B;;;;CAGtC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,0BAA0B;;;;CAGtC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe;;;;CAG3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;CAG7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB;;;;CAGjC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,wBAAwB;;;;CAMpC,CAAC"}

package/settings/selectors/appSettings.js

@@ -65,4 +65,14 @@ export const getCardSettings = createSelector(getAppSettingsState, appSettings =
 /**
  * Selects the effective card shadow size. `none` unless the shadow style is selected.
  */
-export const getCardShadowSize = createSelector(getCardSettings, cards => cards.style === 'shadow' ? cards.shadow.size : 'none');
+export const getCardShadowSize = createSelector(getCardSettings, cards => cards.style === 'shadow' ? cards.shadow.size : 'none');
+
+/**
+ * Selects the typography settings.
+ */
+export const getTypographySettings = createSelector(getAppSettingsState, appSettings => appSettings.typography);
+
+/**
+ * Selects the font stylesheets to load, global file first and without duplicates.
+ */
+export const getTypographyFontCssUrls = createSelector(getTypographySettings, typography => Array.from(new Set([typography.fontCssUrl].concat(Object.values(typography.variants).map(variant => variant?.fontCssUrl)).filter(url => typeof url === 'string' && url.length > 0))));

package/settings/types/appSettings.d.ts

@@ -1,5 +1,5 @@
-import type { ShadowSize } from '@shopgate/engage/styles/theme';
-export type { ShadowSize };
+import type { ShadowSize, TypographyVariant } from '@shopgate/engage/styles/theme';
+export type { ShadowSize, TypographyVariant };
 /**
  * Recursively optional variant of `T`. The settings sources send only what a merchant configured,
  * and the admin preview additionally prunes the fields its visibility conditions hide.
@@ -214,6 +214,27 @@ export interface AppSettings {
      */
     images: ImageSettings;
     cards: CardSettings;
+    typography: TypographySettings;
+}
+/**
+ * A font stylesheet to load. The file carries the `@font-face` rules and points its target at the
+ * new family itself, e.g. `:root { --sg-typography-h1-fontFamily: 'Recoleta'; }`.
+ */
+export interface FontCssSettings {
+    /**
+     * Absolute url of the stylesheet.
+     */
+    fontCssUrl?: string;
+}
+/**
+ * Typography settings. The top level file applies to everything, a variant entry only to that
+ * variant. Variant files are loaded after the global one, so they win at equal specificity.
+ */
+export interface TypographySettings extends FontCssSettings {
+    /**
+     * Per variant font stylesheets, keyed by typography variant.
+     */
+    variants: Partial<Record<TypographyVariant, FontCssSettings>>;
 }
 /**
  * What a settings source actually sends. Every field is optional, so the reducer fills the gaps

package/settings/types/appSettings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"appSettings.d.ts","sourceRoot":"","sources":["../../../settings/types/appSettings.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"appSettings.d.ts","sourceRoot":"","sources":["../../../settings/types/appSettings.ts"],"names":[],"mappings":"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"}