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

package/lib/components/ProductImageCarousel/__tests__/__snapshots__/thumbnail.spec.js.snap

@@ -16,6 +16,12 @@ exports[`renders root class if not the active Thumbnail 1`] = `
       height={170}
       loading="eager"
       src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+      style={
+        Object {
+          "--height": "170px",
+          "--width": "135px",
+        }
+      }
       width={135}
     />
     <img
@@ -35,6 +41,12 @@ exports[`renders root class if not the active Thumbnail 1`] = `
 /media/catalog/product/thumbnail.png?auto=webp&format=png&width=1280&height=1600&fit=cover 1280w,
 /media/catalog/product/thumbnail.png?auto=webp&format=png&width=1600&height=2000&fit=cover 1600w,
 /media/catalog/product/thumbnail.png?auto=webp&format=png&width=2560&height=3200&fit=cover 2560w"
+      style={
+        Object {
+          "--height": "170px",
+          "--width": "135px",
+        }
+      }
       width={135}
     />
   </div>
@@ -57,6 +69,12 @@ exports[`renders the Thumbnail component correctly 1`] = `
       height={170}
       loading="eager"
       src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+      style={
+        Object {
+          "--height": "170px",
+          "--width": "135px",
+        }
+      }
       width={135}
     />
     <img
@@ -76,6 +94,12 @@ exports[`renders the Thumbnail component correctly 1`] = `
 /media/catalog/product/thumbnail.png?auto=webp&format=png&width=1280&height=1600&fit=cover 1280w,
 /media/catalog/product/thumbnail.png?auto=webp&format=png&width=1600&height=2000&fit=cover 1600w,
 /media/catalog/product/thumbnail.png?auto=webp&format=png&width=2560&height=3200&fit=cover 2560w"
+      style={
+        Object {
+          "--height": "170px",
+          "--width": "135px",
+        }
+      }
       width={135}
     />
   </div>
@@ -97,6 +121,7 @@ exports[`renders transparent placeholder when no file name is provided 1`] = `
       className="image placeholder"
       loading="eager"
       src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+      style={Object {}}
     />
     <img
       alt="placeholder-thumbnail"
@@ -105,6 +130,7 @@ exports[`renders transparent placeholder when no file name is provided 1`] = `
       onError={[Function]}
       onLoad={[Function]}
       src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+      style={Object {}}
     />
   </div>
 </span>

package/lib/components/ProductOptions/__tests__/options.spec.js

@@ -4,7 +4,7 @@ import { createTestInstance } from '@magento/peregrine';
 import Options from '../options';
 
 jest.mock('../../../classify');
-jest.mock('uuid/v4', () => () => '00000000-0000-0000-0000-000000000000');
+jest.mock('uuid', () => () => '00000000-0000-0000-0000-000000000000');
 
 const defaultProps = {
     options: [

package/lib/components/ProductOptions/__tests__/swatch.spec.js

@@ -5,7 +5,7 @@ import Swatch from '../swatch';
 import Icon from '../../Icon';
 
 jest.mock('../../../classify');
-jest.mock('uuid/v4', () => () => '00000000-0000-0000-0000-000000000000');
+jest.mock('uuid', () => () => '00000000-0000-0000-0000-000000000000');
 
 const defaultProps = {
     item: {

package/lib/components/ProductOptions/__tests__/swatchList.spec.js

@@ -4,7 +4,7 @@ import testRenderer from 'react-test-renderer';
 import SwatchList from '../swatchList';
 
 jest.mock('../../../classify');
-jest.mock('uuid/v4', () => () => '00000000-0000-0000-0000-000000000000');
+jest.mock('uuid', () => () => '00000000-0000-0000-0000-000000000000');
 
 const defaultProps = {
     items: [

package/lib/components/ProductOptions/__tests__/tile.spec.js

@@ -4,7 +4,7 @@ import testRenderer from 'react-test-renderer';
 import Tile from '../tile';
 
 jest.mock('../../../classify');
-jest.mock('uuid/v4', () => () => '00000000-0000-0000-0000-000000000000');
+jest.mock('uuid', () => () => '00000000-0000-0000-0000-000000000000');
 
 const defaultProps = {
     item: {

package/lib/components/ProductOptions/__tests__/tileList.spec.js

@@ -4,7 +4,7 @@ import testRenderer from 'react-test-renderer';
 import TileList from '../tileList';
 
 jest.mock('../../../classify');
-jest.mock('uuid/v4', () => () => '00000000-0000-0000-0000-000000000000');
+jest.mock('uuid', () => () => '00000000-0000-0000-0000-000000000000');
 
 const defaultProps = {
     items: [

package/lib/components/ProductOptions/option.js

@@ -68,7 +68,10 @@ const Option = props => {
                 onSelectionChange={handleSelectionChange}
             />
             <dl className={classes.selection}>
-                <dt className={classes.selectionLabel}>
+                <dt
+                    data-cy="ProductOptions-Option-selectedLabel"
+                    className={classes.selectionLabel}
+                >
                     <FormattedMessage
                         id="productOptions.selectedLabel"
                         defaultMessage="Selected {label}:"

package/lib/components/ProductSort/productSort.js

@@ -47,11 +47,14 @@ const ProductSort = props => {
     // click event for menu items
     const handleItemClick = useCallback(
         sortAttribute => {
-            setSort({
-                sortText: sortAttribute.text,
-                sortId: sortAttribute.id,
-                sortAttribute: sortAttribute.attribute,
-                sortDirection: sortAttribute.sortDirection
+            setSort(prevSort => {
+                return {
+                    sortText: sortAttribute.text,
+                    sortId: sortAttribute.id,
+                    sortAttribute: sortAttribute.attribute,
+                    sortDirection: sortAttribute.sortDirection,
+                    sortFromSearch: prevSort.sortFromSearch
+                };
             });
             setExpanded(false);
         },
@@ -74,15 +77,6 @@ const ProductSort = props => {
                 attribute: 'relevance',
                 sortDirection: 'DESC'
             },
-            {
-                id: 'sortItem.position',
-                text: formatMessage({
-                    id: 'sortItem.position',
-                    defaultMessage: 'Position'
-                }),
-                attribute: 'position',
-                sortDirection: 'ASC'
-            },
             {
                 id: 'sortItem.priceDesc',
                 text: formatMessage({
@@ -103,6 +97,19 @@ const ProductSort = props => {
             }
         ];
 
+        // Do not display Position in Search
+        if (!currentSort.sortFromSearch) {
+            defaultSortMethods.push({
+                id: 'sortItem.position',
+                text: formatMessage({
+                    id: 'sortItem.position',
+                    defaultMessage: 'Position'
+                }),
+                attribute: 'position',
+                sortDirection: 'ASC'
+            });
+        }
+
         const allSortingMethods = sortMethodsFromConfig
             ? orderSortingList(
                   [sortMethodsFromConfig, defaultSortMethods].flat()
@@ -137,6 +144,7 @@ const ProductSort = props => {
         classes.menuItem,
         currentSort.sortAttribute,
         currentSort.sortDirection,
+        currentSort.sortFromSearch,
         expanded,
         formatMessage,
         handleItemClick,

package/lib/components/Rating/rating.js

@@ -11,7 +11,7 @@ const Rating = props => {
     const classes = useStyle(defaultClasses, props.classes);
 
     return (
-        <div className={classes.ratingAverage}>
+        <div className={classes.ratingAverage} data-cy="ratingSummary">
             <span className={classes.ratingValue}>
                 {((rating * 5) / 100).toFixed(1)}
             </span>{' '}

package/lib/components/SearchBar/__tests__/__snapshots__/suggestedProduct.spec.js.snap

@@ -10,6 +10,11 @@ Array [
       className="image placeholder"
       loading="eager"
       src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+      style={
+        Object {
+          "--width": "60px",
+        }
+      }
       width={60}
     />
     <img
@@ -29,6 +34,12 @@ Array [
 /media/catalog/category/minimalist.jpg 1280w,
 /media/catalog/category/minimalist.jpg 1600w,
 /media/catalog/category/minimalist.jpg 2560w"
+      style={
+        Object {
+          "--height": "75px",
+          "--width": "60px",
+        }
+      }
       width={60}
     />
   </div>,

package/lib/components/SearchBar/autocomplete.js

@@ -20,6 +20,7 @@ const GET_AUTOCOMPLETE_RESULTS = gql`
                     label
                     value
                 }
+                position
             }
             # eslint-disable-next-line @graphql-eslint/require-id-when-available
             items {
@@ -123,8 +124,10 @@ const Autocomplete = props => {
             : messageTpl;
 
     return (
-        <div className={rootClassName}>
-            <div className={classes.message}>{message}</div>
+        <div data-cy="Autocomplete-root" className={rootClassName}>
+            <div data-cy="Autocomplete-message" className={classes.message}>
+                {message}
+            </div>
             <div className={classes.suggestions}>
                 <Suggestions
                     displayResult={displayResult}

package/lib/components/SearchBar/suggestedProduct.js

@@ -39,7 +39,7 @@ const SuggestedProduct = props => {
                 width={IMAGE_WIDTH}
             />
             <span className={classes.name}>{name}</span>
-            <span className={classes.price}>
+            <span data-cy="SuggestedProduct-price" className={classes.price}>
                 <Price
                     currencyCode={price.regularPrice.amount.currency}
                     value={price.regularPrice.amount.value}

package/lib/components/SearchBar/suggestions.js

@@ -41,7 +41,7 @@ const Suggestions = props => {
                 onNavigate={onNavigate}
                 value={searchValue}
             />
-            <h2 className={classes.heading}>
+            <h2 data-cy="Suggestions-heading" className={classes.heading}>
                 <span>
                     <FormattedMessage
                         id={'searchBar.heading'}

package/lib/components/SignIn/__tests__/signIn.spec.js

@@ -4,7 +4,6 @@ import { Form } from 'informed';
 import { createTestInstance } from '@magento/peregrine';
 
 import Button from '../../Button';
-import LoadingIndicator from '../../LoadingIndicator';
 import SignIn from '../signIn';
 import { useUserContext } from '@magento/peregrine/lib/context/user';
 import { useMutation } from '@apollo/client';
@@ -17,7 +16,12 @@ jest.mock('@apollo/client', () => ({
         {
             error: null
         }
-    ])
+    ]),
+    useQuery: jest.fn().mockImplementation(() => ({
+        data: {},
+        error: null,
+        loading: false
+    }))
 }));
 jest.mock('../../../classify');
 jest.mock('../../Button', () => () => <i />);
@@ -65,7 +69,11 @@ const props = {
     showForgotPassword: jest.fn(),
     signIn: jest.fn(),
     hasError: false,
-    isSigningIn: false
+    isSigningIn: false,
+    recaptchaWidgetProps: {
+        containerElement: jest.fn(),
+        shouldRender: false
+    }
 };
 
 test('renders correctly', () => {
@@ -74,23 +82,6 @@ test('renders correctly', () => {
     expect(component.toJSON()).toMatchSnapshot();
 });
 
-test('renders the loading indicator when form is submitting', () => {
-    const [userState, userApi] = useUserContext();
-    useUserContext.mockReturnValueOnce([
-        { ...userState, isGettingDetails: true },
-        userApi
-    ]);
-
-    const testProps = {
-        ...props
-    };
-    const { root } = createTestInstance(<SignIn {...testProps} />);
-
-    act(() => {
-        expect(root.findByType(LoadingIndicator)).toBeTruthy();
-    });
-});
-
 test('renders prefilled form with initial values', () => {
     const testProps = {
         ...props,

package/lib/components/SignIn/signIn.js

@@ -8,13 +8,13 @@ import { useStyle } from '../../classify';
 import { isRequired } from '../../util/formValidators';
 import Button from '../Button';
 import Field from '../Field';
-import LoadingIndicator from '../LoadingIndicator';
 import TextInput from '../TextInput';
 import defaultClasses from './signIn.module.css';
 import { GET_CART_DETAILS_QUERY } from './signIn.gql';
 import LinkButton from '../LinkButton';
 import Password from '../Password';
 import FormError from '../FormError/formError';
+import GoogleRecaptcha from '../GoogleReCaptcha';
 
 const SignIn = props => {
     const classes = useStyle(defaultClasses, props.classes);
@@ -39,29 +39,17 @@ const SignIn = props => {
         handleForgotPassword,
         handleSubmit,
         isBusy,
-        setFormApi
+        setFormApi,
+        recaptchaWidgetProps
     } = talonProps;
 
-    if (isBusy) {
-        return (
-            <div className={classes.modal_active}>
-                <LoadingIndicator>
-                    <FormattedMessage
-                        id={'signIn.loadingText'}
-                        defaultMessage={'Signing In'}
-                    />
-                </LoadingIndicator>
-            </div>
-        );
-    }
-
     const forgotPasswordClasses = {
         root: classes.forgotPasswordButton
     };
 
     return (
         <div data-cy="SignIn-root" className={classes.root}>
-            <span className={classes.title}>
+            <span data-cy="SignIn-title" className={classes.title}>
                 <FormattedMessage
                     id={'signIn.titleText'}
                     defaultMessage={'Sign-in to Your Account'}
@@ -114,11 +102,13 @@ const SignIn = props => {
                         />
                     </LinkButton>
                 </div>
+                <GoogleRecaptcha {...recaptchaWidgetProps} />
                 <div className={classes.buttonsContainer}>
                     <Button
                         priority="high"
                         type="submit"
                         data-cy="SignInButton-root_highPriority"
+                        disabled={isBusy}
                     >
                         <FormattedMessage
                             id={'signIn.signInText'}

package/lib/components/TextInput/textInput.module.css

@@ -2,10 +2,6 @@
     composes: input from '../Field/field.module.css';
 }
 
-.input:disabled {
-    color: rgb(var(--venia-global-color-gray-darker));
-}
-
 .input_error {
     composes: input from '../Field/field.module.css';
     border-color: rgb(var(--venia-global-color-red-400));

package/lib/components/Wishlist/WishlistDialog/WishlistLineItem/__tests__/__snapshots__/wishlistLineItem.spec.js.snap

@@ -6,5 +6,9 @@ exports[`renders the correct tree 1`] = `
   disabled={false}
   onClick={[Function]}
   type="button"
-/>
+>
+  <h2
+    className="lineItemName"
+  />
+</button>
 `;

package/lib/components/Wishlist/WishlistDialog/WishlistLineItem/wishlistLineItem.js

@@ -20,7 +20,13 @@ const WishlistLineItem = props => {
             onClick={handleClick}
             data-cy="WishlistLineItem-button"
         >
-            {props.children}
+            <h2
+                className={classes.lineItemName}
+                data-cy="WishlistLineItem-name"
+                title={props.children}
+            >
+                {props.children}
+            </h2>
         </button>
     );
 };

package/lib/components/Wishlist/WishlistDialog/WishlistLineItem/wishlistLineItem.module.css

@@ -6,3 +6,10 @@
     font-weight: var(--venia-global-fontWeight-semibold);
     height: 3.5rem;
 }
+
+.lineItemName {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: 600px;
+}

package/lib/components/Wishlist/WishlistDialog/__tests__/__snapshots__/wishlistDialog.spec.js.snap

@@ -41,7 +41,12 @@ exports[`renders existing wishlists 1`] = `
           onClick={[Function]}
           type="button"
         >
-          "Scott's Wishlist"
+          <h2
+            className="lineItemName"
+            title="\\"Scott's Wishlist\\""
+          >
+            "Scott's Wishlist"
+          </h2>
         </button>
       </li>
     </ul>

package/lib/components/WishlistPage/__tests__/__snapshots__/wishlist.spec.js.snap

@@ -12,6 +12,7 @@ exports[`hides visibility toggle 1`] = `
     >
       <h2
         className="name"
+        title="Favorites List"
       >
         Favorites List
       </h2>
@@ -79,6 +80,7 @@ exports[`render closed with items 1`] = `
     >
       <h2
         className="name"
+        title="Favorites List"
       >
         Favorites List
       </h2>
@@ -146,6 +148,7 @@ exports[`render loading state 1`] = `
     >
       <h2
         className="name"
+        title="Favorites List"
       >
         Favorites List
       </h2>
@@ -289,6 +292,7 @@ exports[`render open with no items 1`] = `
     >
       <h2
         className="name"
+        title="Favorites List"
       >
         Favorites List
       </h2>

package/lib/components/WishlistPage/__tests__/__snapshots__/wishlistItem.spec.js.snap

@@ -20,6 +20,11 @@ exports[`it renders a configurable wishlist item 1`] = `
       className="image placeholder"
       loading="eager"
       src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+      style={
+        Object {
+          "--width": "400px",
+        }
+      }
       width={400}
     />
     <img
@@ -30,6 +35,12 @@ exports[`it renders a configurable wishlist item 1`] = `
       onError={[Function]}
       onLoad={[Function]}
       src="https://magento.test/shoggoth-shirt.jpg"
+      style={
+        Object {
+          "--height": "500px",
+          "--width": "400px",
+        }
+      }
       width={400}
     />
   </div>
@@ -125,6 +136,11 @@ exports[`it renders a simple wishlist item 1`] = `
       className="image placeholder"
       loading="eager"
       src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+      style={
+        Object {
+          "--width": "400px",
+        }
+      }
       width={400}
     />
     <img
@@ -135,6 +151,12 @@ exports[`it renders a simple wishlist item 1`] = `
       onError={[Function]}
       onLoad={[Function]}
       src="https://magento.test/shoggoth-shirt.jpg"
+      style={
+        Object {
+          "--height": "500px",
+          "--width": "400px",
+        }
+      }
       width={400}
     />
   </div>

package/lib/components/WishlistPage/__tests__/__snapshots__/wishlistPage.spec.js.snap

@@ -18,7 +18,9 @@ exports[`empty single wishlist 1`] = `
     />
   </h1>
   <Wishlist />
-  <CreateWishlist />
+  <CreateWishlist
+    numberOfWishlists={0}
+  />
 </div>
 `;
 
@@ -48,7 +50,9 @@ exports[`renders a single wishlist without visibility toggle 1`] = `
     }
     isCollapsed={false}
   />
-  <CreateWishlist />
+  <CreateWishlist
+    numberOfWishlists={1}
+  />
 </div>
 `;
 
@@ -229,6 +233,8 @@ exports[`renders wishlist data 1`] = `
     }
     isCollapsed={true}
   />
-  <CreateWishlist />
+  <CreateWishlist
+    numberOfWishlists={2}
+  />
 </div>
 `;

package/lib/components/WishlistPage/createWishlist.ee.js

@@ -17,9 +17,11 @@ import FormError from '../FormError/formError';
 import defaultClasses from './createWishlist.module.css';
 
 const CreateWishlist = props => {
+    const { numberOfWishlists } = props;
+
     const classes = useStyle(defaultClasses, props.classes);
 
-    const talonProps = useCreateWishlist();
+    const talonProps = useCreateWishlist({ numberOfWishlists });
     const {
         handleCreateList,
         handleHideModal,

package/lib/components/WishlistPage/wishlist.js

@@ -91,7 +91,7 @@ const Wishlist = props => {
 
     const wishlistName = name ? (
         <div className={classes.nameContainer}>
-            <h2 className={classes.name} data-cy="Wishlist-name">
+            <h2 className={classes.name} data-cy="Wishlist-name" title={name}>
                 {name}
             </h2>
         </div>

package/lib/components/WishlistPage/wishlist.module.css

@@ -27,6 +27,9 @@
 
 .name {
     font-weight: var(--venia-global-fontWeight-semibold);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
 
 .buttonsContainer {

package/lib/components/WishlistPage/wishlistPage.js

@@ -74,7 +74,7 @@ const WishlistPage = props => {
         content = (
             <Fragment>
                 {wishlistElements}
-                <CreateWishlist />
+                <CreateWishlist numberOfWishlists={wishlists.length} />
             </Fragment>
         );
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magento/venia-ui",
-  "version": "9.2.0-alpha.3",
+  "version": "9.3.0-alpha.1",
   "publishConfig": {
     "access": "public"
   },
@@ -41,6 +41,7 @@
     "lodash.throttle": "~4.1.1",
     "memoize-one": "~5.0.0",
     "prop-types": "~15.7.2",
+    "react-animate-height": "^2.0.23",
     "react-aria": "~3.4.0",
     "react-feather": "~2.0.3",
     "react-helmet-async": "^1.0.2",
@@ -78,9 +79,9 @@
   },
   "peerDependencies": {
     "@apollo/client": "~3.4.0",
-    "@magento/babel-preset-peregrine": "1.2.0-alpha.3",
-    "@magento/peregrine": "12.2.0-alpha.3",
-    "@magento/pwa-buildpack": "11.1.0-alpha.3",
+    "@magento/babel-preset-peregrine": "~1.2.0",
+    "@magento/peregrine": "12.3.0-alpha.1",
+    "@magento/pwa-buildpack": "11.2.0-alpha.1",
     "apollo-cache-persist": "~0.1.1",
     "braintree-web-drop-in": "~1.16.0",
     "graphql": "~15.5.0",