@magento/venia-ui 9.2.0-alpha.3 → 9.3.0-alpha.1

package/lib/components/GoogleReCaptcha/googleReCaptcha.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { bool, func, shape, string } from 'prop-types';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import defaultClasses from './googleReCaptcha.module.css';
+
+/**
+ * A component to display a Google ReCaptcha V3 inline widget.
+ *
+ * @typedef GoogleReCaptcha
+ * @kind functional component
+ *
+ * @param {props} props React component props
+ *
+ * @returns {React.Element} A React component that displays a container to be used by the useGoogleReCaptcha hook.
+ */
+const GoogleReCaptcha = props => {
+    const { containerElement = () => {}, shouldRender = false } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+
+    // Do not display if position is not inline
+    if (!shouldRender) {
+        return null;
+    }
+
+    return <div ref={containerElement} className={classes.root} />;
+};
+
+/**
+ * Props for {@link GoogleReCaptcha}
+ *
+ * @typedef props
+ *
+ * @property {Object} classes An object containing the class names for the
+ * GoogleReCaptcha component.
+ * @property {String} classes.root class for root container
+ * @property {Function} containerElement Element callback ref
+ * @property {Boolean} shouldRender Checks if component should be rendered
+ */
+GoogleReCaptcha.propTypes = {
+    classes: shape({
+        root: string
+    }),
+    containerElement: func.isRequired,
+    shouldRender: bool.isRequired
+};
+
+export default GoogleReCaptcha;

package/lib/components/GoogleReCaptcha/googleReCaptcha.module.css

@@ -0,0 +1,3 @@
+.root {
+    composes: mt-4 from global;
+}

package/lib/components/GoogleReCaptcha/index.js

@@ -0,0 +1 @@
+export { default } from './googleReCaptcha';

package/lib/components/Header/currencySwitcher.js

@@ -51,8 +51,9 @@ const CurrencySwitcher = props => {
     });
 
     return (
-        <div className={classes.root}>
+        <div data-cy="CurrencySwitcher-root" className={classes.root}>
             <button
+                data-cy="CurrencySwitcher-triggerButton"
                 className={classes.trigger}
                 aria-label={currentCurrencyCode}
                 onClick={handleTriggerClick}

package/lib/components/Header/header.js

@@ -51,7 +51,7 @@ const Header = props => {
     return (
         <Fragment>
             <div className={classes.switchersContainer}>
-                <div className={classes.switchers}>
+                <div className={classes.switchers} data-cy="Header-switchers">
                     <StoreSwitcher />
                     <CurrencySwitcher />
                 </div>

package/lib/components/Header/header.module.css

@@ -75,7 +75,8 @@
 }
 
 .logo {
-    composes: h-full from global;
+    height: var(--height);
+    width: var(--width);
 }
 
 .primaryActions {
@@ -90,7 +91,6 @@
 .logoContainer {
     composes: col-start-2 from global;
     composes: justify-self-center from global;
-    composes: my-4 from global;
 }
 
 /* Large screen styles */

package/lib/components/Header/searchTrigger.js

@@ -36,7 +36,9 @@ const SearchTrigger = React.forwardRef((props, ref) => {
             ref={ref}
         >
             <Icon src={SearchIcon} />
-            <span className={classes.label}>{searchText}</span>
+            <span data-cy="SearchTrigger-label" className={classes.label}>
+                {searchText}
+            </span>
         </button>
     );
 });

package/lib/components/Header/storeSwitcher.js

@@ -41,7 +41,11 @@ const StoreSwitcher = props => {
                 label = `${storeGroupName} - ${storeName}`;
             }
             stores.push(
-                <li key={code} className={classes.menuItem}>
+                <li
+                    key={code}
+                    className={classes.menuItem}
+                    data-cy="StoreSwitcher-view"
+                >
                     <SwitcherItem
                         active={isCurrent}
                         onClick={handleSwitchStore}
@@ -54,7 +58,11 @@ const StoreSwitcher = props => {
         });
 
         groups.push(
-            <ul className={classes.groupList} key={key}>
+            <ul
+                className={classes.groupList}
+                key={key}
+                data-cy="StoreSwitcher-group"
+            >
                 {stores}
             </ul>
         );
@@ -68,16 +76,22 @@ const StoreSwitcher = props => {
     }
 
     return (
-        <div className={classes.root}>
+        <div className={classes.root} data-cy="StoreSwitcher-root">
             <button
+                data-cy="StoreSwitcher-triggerButton"
                 className={classes.trigger}
                 aria-label={currentStoreName}
                 onClick={handleTriggerClick}
                 ref={storeMenuTriggerRef}
+                data-cy="StoreSwitcher-trigger"
             >
                 {triggerLabel}
             </button>
-            <div ref={storeMenuRef} className={menuClassName}>
+            <div
+                ref={storeMenuRef}
+                className={menuClassName}
+                data-cy="StoreSwitcher-menu"
+            >
                 <div className={classes.groups}>{groups}</div>
             </div>
         </div>

package/lib/components/Header/switcherItem.js

@@ -14,10 +14,13 @@ const SwitcherItem = props => {
         onClick(option);
     }, [option, onClick]);
 
-    const activeIcon = active ? <Icon size={20} src={Check} /> : null;
+    const activeIcon = active ? (
+        <Icon data-cy="SwitcherItem-activeIcon" size={20} src={Check} />
+    ) : null;
 
     return (
         <button
+            data-cy="SwitcherItem-button"
             className={classes.root}
             disabled={active}
             onClick={handleClick}

package/lib/components/HomePage/homePage.module.css

@@ -419,3 +419,15 @@
 :global(.venia-home-products .slick-slider .slick-dots .slick-active > button) {
     background-color: hsl(205 004% 048%) !important;
 }
+
+:global(.venia-home-banner-text > div) {
+    flex-direction: unset !important;
+    justify-content: normal !important;
+}
+
+@media (max-width: 960px) {
+    :global(.venia-home-banner-text > div) {
+        flex-direction: column !important;
+        justify-content: center !important;
+    }
+}

package/lib/components/Image/resourceImage.js

@@ -47,11 +47,18 @@ const ResourceImage = props => {
     });
 
     const { sizes, src, srcSet } = talonProps;
-
+    const dimensionAttributes = {};
+    if (typeof height !== 'undefined') {
+        dimensionAttributes['--height'] = height + 'px';
+    }
+    if (typeof width !== 'undefined') {
+        dimensionAttributes['--width'] = width + 'px';
+    }
     // Note: Attributes that are allowed to be overridden must appear before the spread of `rest`.
     return (
         <img
             loading="lazy"
+            style={dimensionAttributes}
             {...rest}
             alt={alt}
             className={className}

package/lib/components/Image/simpleImage.js

@@ -23,11 +23,18 @@ const SimpleImage = props => {
         width,
         ...rest
     } = props;
-
+    const dimensionAttributes = {};
+    if (typeof height !== 'undefined') {
+        dimensionAttributes['--height'] = height + 'px';
+    }
+    if (typeof width !== 'undefined') {
+        dimensionAttributes['--width'] = width + 'px';
+    }
     // Note: Attributes that are allowed to be overridden must appear before the spread of `rest`.
     return (
         <img
             loading="lazy"
+            style={dimensionAttributes}
             {...rest}
             alt={alt}
             className={className}

package/lib/components/Link/link.js

@@ -3,38 +3,40 @@ import { Link as RouterLink } from 'react-router-dom';
 import { bool } from 'prop-types';
 import useLink from '@magento/peregrine/lib/talons/Link/useLink';
 
-const removeProps = (props, exclude) => {
-    return Object.fromEntries(
-        Object.entries(props).filter(([name]) => !exclude.includes(name))
-    );
-};
-
 /**
  * @kind functional component
  *
- * @property {bool} prefetchType `true` activates prefetching the target page when the link becomes visible in the viewport.
+ * @property {bool} shouldPrefetch `true` activates prefetching the target page when the link becomes visible in the viewport.
  * @property {string} to From [react-router-dom Link](https://knowbody.github.io/react-router-docs/api/Link.html). The absolute path to the target page of the link. Uses the `to` prop from the `react-router-dom Link`.
  *
  * @example <caption>Basic usage</caption>
- * <Link prefetchType={true} to="/about/">About Us</Link>
+ * <Link shouldPrefetch={true} to="/about/">About Us</Link>
  */
 const Link = props => {
-    const talonProps = useLink(props);
+    // TODO: remove `prefetchType`
+    const { innerRef, prefetchType, shouldPrefetch, ...propsForBase } = props;
+    const talonProps = useLink({
+        ...props,
+        innerRef,
+        shouldPrefetch: shouldPrefetch || prefetchType
+    });
     const { ref } = talonProps;
-    const propsForBase = removeProps(props, ['prefetchType', 'innerRef']);
 
     return <RouterLink {...propsForBase} innerRef={ref} />;
 };
 
 Link.defaultProps = {
-    prefetchType: false
+    prefetchType: false,
+    shouldPrefetch: false
 };
 
 /**
- * @property {bool} [prefetchType=false] Determine if the link should be prefetched using `IntersectionObserver`.
+ * @property {bool} [prefetchType=false] Deprecated. Use `shouldPrefetch` instead.
+ * @property {bool} [shouldPrefetch=false] Determine if the link should be prefetched using `IntersectionObserver`.
  */
 Link.propTypes = {
-    prefetchType: bool
+    prefetchType: bool,
+    shouldPrefetch: bool
 };
 
 export default Link;

package/lib/components/LoadingIndicator/spinner.js

@@ -9,13 +9,11 @@ const Spinner = props => {
     const classes = useStyle(defaultClasses, props.classes);
 
     return (
-        <div className={classes.root}>
-            <Icon
-                src={LoaderIcon}
-                size={24}
-                classes={{ root: classes.indicator }}
-            />
-        </div>
+        <Icon
+            src={LoaderIcon}
+            size={24}
+            classes={{ root: classes.root, icon: classes.icon }}
+        />
     );
 };
 

package/lib/components/LoadingIndicator/spinner.module.css

@@ -1,24 +1,11 @@
 .root {
-    animation: spin 1920ms linear infinite;
-    grid-area: primary;
-}
-
-.indicator {
+    composes: root from '../Icon/icon.module.css';
     --stroke: rgb(var(--venia-global-color-text-hint));
 }
 
-@media (min-width: 641px) {
-    .root {
-        justify-self: start;
-        margin-left: 0.5rem;
-        grid-area: secondary;
-    }
-}
-
-@media (min-width: 1024px) {
-    .root {
-        grid-column: 2 / 3;
-    }
+.icon {
+    composes: icon from '../Icon/icon.module.css';
+    animation: spin 1920ms linear infinite;
 }
 
 @keyframes spin {

package/lib/components/MiniCart/ProductList/__tests__/__snapshots__/item.spec.js.snap

@@ -16,6 +16,11 @@ exports[`Should disable delete icon while loading 1`] = `
         className="image placeholder"
         loading="eager"
         src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+        style={
+          Object {
+            "--width": "100px",
+          }
+        }
         width={100}
       />
       <img
@@ -35,6 +40,12 @@ exports[`Should disable delete icon while loading 1`] = `
 /media/catalog/product/www.venia.com/p1?auto=webp&format=pjpg&width=1280&height=1600&fit=cover 1280w,
 /media/catalog/product/www.venia.com/p1?auto=webp&format=pjpg&width=1600&height=2000&fit=cover 1600w,
 /media/catalog/product/www.venia.com/p1?auto=webp&format=pjpg&width=2560&height=3200&fit=cover 2560w"
+        style={
+          Object {
+            "--height": "125px",
+            "--width": "100px",
+          }
+        }
         width={100}
       />
     </div>
@@ -162,6 +173,11 @@ exports[`Should render correctly 1`] = `
         className="image placeholder"
         loading="eager"
         src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+        style={
+          Object {
+            "--width": "100px",
+          }
+        }
         width={100}
       />
       <img
@@ -181,6 +197,12 @@ exports[`Should render correctly 1`] = `
 /media/catalog/product/www.venia.com/p1?auto=webp&format=pjpg&width=1280&height=1600&fit=cover 1280w,
 /media/catalog/product/www.venia.com/p1?auto=webp&format=pjpg&width=1600&height=2000&fit=cover 1600w,
 /media/catalog/product/www.venia.com/p1?auto=webp&format=pjpg&width=2560&height=3200&fit=cover 2560w"
+        style={
+          Object {
+            "--height": "125px",
+            "--width": "100px",
+          }
+        }
         width={100}
       />
     </div>
@@ -308,6 +330,11 @@ exports[`Should render correctly when configured to use variant thumbnail 1`] =
         className="image placeholder"
         loading="eager"
         src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+        style={
+          Object {
+            "--width": "100px",
+          }
+        }
         width={100}
       />
       <img
@@ -327,6 +354,12 @@ exports[`Should render correctly when configured to use variant thumbnail 1`] =
 /media/catalog/product/www.venia.com/p1-variant1?auto=webp&format=pjpg&width=1280&height=1600&fit=cover 1280w,
 /media/catalog/product/www.venia.com/p1-variant1?auto=webp&format=pjpg&width=1600&height=2000&fit=cover 1600w,
 /media/catalog/product/www.venia.com/p1-variant1?auto=webp&format=pjpg&width=2560&height=3200&fit=cover 2560w"
+        style={
+          Object {
+            "--height": "125px",
+            "--width": "100px",
+          }
+        }
         width={100}
       />
     </div>
@@ -454,6 +487,11 @@ exports[`Should render correctly with out of stock product 1`] = `
         className="image placeholder"
         loading="eager"
         src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+        style={
+          Object {
+            "--width": "100px",
+          }
+        }
         width={100}
       />
       <img
@@ -473,6 +511,12 @@ exports[`Should render correctly with out of stock product 1`] = `
 /media/catalog/product/www.venia.com/p1?auto=webp&format=pjpg&width=1280&height=1600&fit=cover 1280w,
 /media/catalog/product/www.venia.com/p1?auto=webp&format=pjpg&width=1600&height=2000&fit=cover 1600w,
 /media/catalog/product/www.venia.com/p1?auto=webp&format=pjpg&width=2560&height=3200&fit=cover 2560w"
+        style={
+          Object {
+            "--height": "125px",
+            "--width": "100px",
+          }
+        }
         width={100}
       />
     </div>

package/lib/components/MiniCart/ProductList/__tests__/__snapshots__/productList.spec.js.snap

@@ -7,12 +7,12 @@ exports[`Should render properly 1`] = `
   <Item
     closeMiniCart={[MockFunction closeMiniCart]}
     handleRemoveItem={[MockFunction handleRemoveItem]}
-    id="1"
     product={
       Object {
         "name": "Simple Product",
       }
     }
+    uid="1"
   />
 </div>
 `;

package/lib/components/MiniCart/ProductList/__tests__/item.spec.js

@@ -57,8 +57,8 @@ const props = {
         {
             option_label: 'Color',
             value_label: 'red',
-            id: 22,
-            value_id: 2
+            configurable_product_option_uid: 22,
+            configurable_product_option_value_uid: 'Y29uZmlndXJhYmxlLzIyLzI='
         }
     ],
     handleRemoveItem: () => {},

package/lib/components/MiniCart/ProductList/__tests__/productList.spec.js

@@ -15,7 +15,7 @@ const props = {
     handleRemoveItem: jest.fn().mockName('handleRemoveItem'),
     items: [
         {
-            id: '1',
+            uid: '1',
             product: {
                 name: 'Simple Product'
             }

package/lib/components/MiniCart/ProductList/item.js

@@ -72,6 +72,7 @@ const Item = props => {
                             ? configured_variant.thumbnail.url
                             : product.thumbnail.url
                     }
+                    data-cy="Item-image"
                 />
             </Link>
             <Link
@@ -88,14 +89,14 @@ const Item = props => {
                     options: classes.options
                 }}
             />
-            <span className={classes.quantity}>
+            <span data-cy="MiniCart-Item-quantity" className={classes.quantity}>
                 <FormattedMessage
                     id={'productList.quantity'}
                     defaultMessage={'Qty : {quantity}'}
                     values={{ quantity }}
                 />
             </span>
-            <span className={classes.price}>
+            <span data-cy="MiniCart-Item-price" className={classes.price}>
                 <Price
                     currencyCode={prices.price.currency}
                     value={prices.price.value}

package/lib/components/MiniCart/ProductList/productList.js

@@ -21,7 +21,7 @@ const ProductList = props => {
         if (items) {
             return items.map(item => (
                 <Item
-                    key={item.id}
+                    key={item.uid}
                     {...item}
                     closeMiniCart={closeMiniCart}
                     handleRemoveItem={handleRemoveItem}

package/lib/components/MiniCart/miniCart.js

@@ -80,15 +80,18 @@ const MiniCart = React.forwardRef((props, ref) => {
             <div className={classes.stockStatusMessageContainer}>
                 <StockStatusMessage cartItems={productList} />
             </div>
-            <span className={quantityClassName}>
+            <span
+                data-cy="MiniCart-totalQuantity"
+                className={quantityClassName}
+            >
                 <FormattedMessage
                     id={'miniCart.totalQuantity'}
                     defaultMessage={'{totalQuantity} Items'}
                     values={{ totalQuantity }}
                 />
             </span>
-            <span className={priceClassName}>
-                <span>
+            <span data-cy="MiniCart-subtotalPrice" className={priceClassName}>
+                <span data-cy="MiniCart-subtotalPriceLabel">
                     <FormattedMessage
                         id={'miniCart.subtotal'}
                         defaultMessage={'Subtotal: '}