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

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

@@ -124,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",
+  "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",
@@ -79,8 +80,8 @@
   "peerDependencies": {
     "@apollo/client": "~3.4.0",
     "@magento/babel-preset-peregrine": "~1.2.0",
-    "@magento/peregrine": "~12.2.0",
-    "@magento/pwa-buildpack": "~11.1.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",

package/lib/components/CartPage/PriceSummary/__tests__/giftCardSummary.spec.js

@@ -1,84 +0,0 @@
-import React from 'react';
-import { createTestInstance } from '@magento/peregrine';
-
-import GiftCardSummary from '../giftCardSummary';
-
-jest.mock('../../../../classify');
-
-const defaultProps = {
-    classes: {
-        lineItemLabel: 'lineItemLabel',
-        price: 'price'
-    },
-    data: [
-        {
-            applied_balance: {
-                value: 10,
-                currency: 'USD'
-            }
-        }
-    ]
-};
-
-test('renders gift card summary line item correctly', () => {
-    const tree = createTestInstance(<GiftCardSummary {...defaultProps} />);
-
-    expect(tree.toJSON()).toMatchSnapshot();
-});
-
-test('renders accumulated gift card value', () => {
-    const props = {
-        ...defaultProps,
-        data: [
-            {
-                applied_balance: {
-                    value: 0,
-                    currency: 'USD'
-                }
-            },
-            {
-                applied_balance: {
-                    value: 1,
-                    currency: 'USD'
-                }
-            },
-            {
-                applied_balance: {
-                    value: 1,
-                    currency: 'USD'
-                }
-            }
-        ]
-    };
-
-    const tree = createTestInstance(<GiftCardSummary {...props} />);
-
-    expect(tree.toJSON()).toMatchSnapshot();
-});
-
-test('renders nothing if gift card data is empty', () => {
-    const props = {
-        ...defaultProps,
-        data: []
-    };
-    const tree = createTestInstance(<GiftCardSummary {...props} />);
-
-    expect(tree.toJSON()).toMatchSnapshot();
-});
-
-test('renders nothing if gift card value is "0"', () => {
-    const props = {
-        ...defaultProps,
-        data: [
-            {
-                applied_balance: {
-                    value: 0,
-                    currency: 'USD'
-                }
-            }
-        ]
-    };
-    const tree = createTestInstance(<GiftCardSummary {...props} />);
-
-    expect(tree.toJSON()).toMatchSnapshot();
-});