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

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

@@ -257,3 +257,129 @@ exports[`renders correctly 1`] = `
   </form>
 </div>
 `;
+
+exports[`renders prefilled form with initial values 1`] = `
+<div
+  className="root"
+>
+  <span
+    className="title"
+  >
+    <mock-FormattedMessage
+      defaultMessage="Sign-in to Your Account"
+      id="signIn.titleText"
+    />
+  </span>
+  <FormError
+    errors={
+      Array [
+        null,
+        null,
+      ]
+    }
+  />
+  <form
+    className="form"
+    onKeyDown={[Function]}
+    onReset={[Function]}
+    onSubmit={[Function]}
+  >
+    <div
+      className="root"
+    >
+      <label
+        className="label"
+      >
+        Email address
+      </label>
+      <span
+        className="root"
+        style={
+          Object {
+            "--iconsAfter": 0,
+            "--iconsBefore": 0,
+          }
+        }
+      >
+        <span
+          className="input"
+        >
+          <input
+            autoComplete="email"
+            className="input"
+            id="email"
+            name="email"
+            onBlur={[Function]}
+            onChange={[Function]}
+            value="test@mail.com"
+          />
+        </span>
+        <span
+          className="before"
+        />
+        <span
+          className="after"
+        />
+      </span>
+      <p
+        className="root"
+      />
+    </div>
+    <div
+      className="root"
+    >
+      <label
+        className="label"
+      >
+        Password
+      </label>
+      <span
+        className="root"
+        style={
+          Object {
+            "--iconsAfter": 1,
+            "--iconsBefore": 0,
+          }
+        }
+      >
+        <span
+          className="input"
+        >
+          <input
+            autoComplete="current-password"
+            className="input"
+            id="password"
+            name="password"
+            onBlur={[Function]}
+            onChange={[Function]}
+            type="password"
+            value=""
+          />
+        </span>
+        <span
+          className="before"
+        />
+        <span
+          className="after"
+        >
+          <i />
+        </span>
+      </span>
+      <p
+        className="root"
+      />
+    </div>
+    <div
+      className="forgotPasswordButtonContainer"
+    >
+      <i />
+    </div>
+    <div
+      className="buttonsContainer"
+    >
+      <i />
+      <i />
+    </div>
+  </form>
+</div>
+`;

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

@@ -91,6 +91,17 @@ test('renders the loading indicator when form is submitting', () => {
     });
 });
 
+test('renders prefilled form with initial values', () => {
+    const testProps = {
+        ...props,
+        initialValues: {
+            email: 'test@mail.com'
+        }
+    };
+    const component = createTestInstance(<SignIn {...testProps} />);
+    expect(component.toJSON()).toMatchSnapshot();
+});
+
 test('displays an error message if there is a sign in error', () => {
     useMutation.mockReturnValueOnce([
         jest.fn(),

package/lib/components/SignIn/signIn.gql.js

@@ -5,10 +5,12 @@ export const GET_CART_DETAILS_QUERY = gql`
     query GetCartDetailsAfterSignIn($cartId: String!) {
         cart(cart_id: $cartId) {
             id
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
             items {
-                id
+                uid
+                # eslint-disable-next-line @graphql-eslint/require-id-when-available
                 product {
-                    id
+                    uid
                     name
                     sku
                     small_image {
@@ -24,11 +26,13 @@ export const GET_CART_DETAILS_QUERY = gql`
                     }
                 }
                 quantity
+                # eslint-disable-next-line @graphql-eslint/require-id-when-available
                 ... on ConfigurableCartItem {
+                    # eslint-disable-next-line @graphql-eslint/require-id-when-available
                     configurable_options {
-                        id
+                        configurable_product_option_uid
                         option_label
-                        value_id
+                        configurable_product_option_value_uid
                         value_label
                     }
                 }

package/lib/components/SignIn/signIn.js

@@ -18,7 +18,12 @@ import FormError from '../FormError/formError';
 
 const SignIn = props => {
     const classes = useStyle(defaultClasses, props.classes);
-    const { setDefaultUsername, showCreateAccount, showForgotPassword } = props;
+    const {
+        setDefaultUsername,
+        showCreateAccount,
+        showForgotPassword,
+        initialValues
+    } = props;
 
     const { formatMessage } = useIntl();
     const talonProps = useSignIn({
@@ -55,7 +60,7 @@ const SignIn = props => {
     };
 
     return (
-        <div className={classes.root}>
+        <div data-cy="SignIn-root" className={classes.root}>
             <span className={classes.title}>
                 <FormattedMessage
                     id={'signIn.titleText'}
@@ -67,6 +72,8 @@ const SignIn = props => {
                 getApi={setFormApi}
                 className={classes.form}
                 onSubmit={handleSubmit}
+                data-cy="SignIn-form"
+                initialValues={initialValues && initialValues}
             >
                 <Field
                     label={formatMessage({
@@ -75,12 +82,15 @@ const SignIn = props => {
                     })}
                 >
                     <TextInput
+                        data-cy="SignIn-email"
                         autoComplete="email"
                         field="email"
                         validate={isRequired}
+                        data-cy="email"
                     />
                 </Field>
                 <Password
+                    data-cy="SignIn-password"
                     fieldName="password"
                     label={formatMessage({
                         id: 'signIn.passwordText',
@@ -89,12 +99,14 @@ const SignIn = props => {
                     validate={isRequired}
                     autoComplete="current-password"
                     isToggleButtonHidden={false}
+                    data-cy="password"
                 />
                 <div className={classes.forgotPasswordButtonContainer}>
                     <LinkButton
                         classes={forgotPasswordClasses}
                         type="button"
                         onClick={handleForgotPassword}
+                        data-cy="SignIn-forgotPasswordButton"
                     >
                         <FormattedMessage
                             id={'signIn.forgotPasswordText'}
@@ -103,7 +115,11 @@ const SignIn = props => {
                     </LinkButton>
                 </div>
                 <div className={classes.buttonsContainer}>
-                    <Button priority="high" type="submit">
+                    <Button
+                        priority="high"
+                        type="submit"
+                        data-cy="SignInButton-root_highPriority"
+                    >
                         <FormattedMessage
                             id={'signIn.signInText'}
                             defaultMessage={'Sign In'}
@@ -113,6 +129,7 @@ const SignIn = props => {
                         priority="normal"
                         type="button"
                         onClick={handleCreateAccount}
+                        data-cy="CreateAccount-initiateButton"
                     >
                         <FormattedMessage
                             id={'signIn.createAccountText'}
@@ -137,7 +154,10 @@ SignIn.propTypes = {
     }),
     setDefaultUsername: func,
     showCreateAccount: func,
-    showForgotPassword: func
+    showForgotPassword: func,
+    initialValues: shape({
+        email: string.isRequired
+    })
 };
 SignIn.defaultProps = {
     setDefaultUsername: () => {},

package/lib/components/TextArea/textArea.module.css

@@ -5,3 +5,12 @@
     min-width: 100%;
     padding: 12px 15px;
 }
+
+.input_shimmer {
+    composes: input_base from '../Field/field.module.css';
+    height: auto;
+    min-height: 6.75rem;
+    max-width: 100%;
+    min-width: 100%;
+    padding: 12px 15px;
+}

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

@@ -10,3 +10,7 @@
     composes: input from '../Field/field.module.css';
     border-color: rgb(var(--venia-global-color-red-400));
 }
+
+.input_shimmer {
+    composes: input_base from '../Field/field.module.css';
+}

package/lib/components/ToastContainer/toast.js

@@ -10,6 +10,8 @@ const Toast = props => {
     const {
         actionText,
         dismissable,
+        hasDismissAction,
+        dismissActionText,
         icon,
         message,
         onAction,
@@ -30,18 +32,36 @@ const Toast = props => {
             </button>
         ) : null;
 
+    const dismissActionButton =
+        hasDismissAction && (onDismiss || dismissable) ? (
+            <button
+                data-cy="Toast-dismissActionButton"
+                className={classes.actionButton}
+                onClick={handleDismiss}
+            >
+                {dismissActionText}
+            </button>
+        ) : null;
+
     const actions = onAction ? (
         <div className={classes.actions}>
-            <button className={classes.actionButton} onClick={handleAction}>
+            {dismissActionButton}
+            <button
+                data-cy="Toast-actionButton"
+                className={classes.actionButton}
+                onClick={handleAction}
+            >
                 {actionText}
             </button>
         </div>
     ) : null;
 
     return (
-        <div className={classes[`${type}Toast`]}>
+        <div className={classes[`${type}Toast`]} data-cy="Toast-root">
             <span className={classes.icon}>{iconElement}</span>
-            <div className={classes.message}>{message}</div>
+            <div className={classes.message} data-cy="Toast-message">
+                {message}
+            </div>
             <div className={classes.controls}>{controls}</div>
             {actions}
         </div>

package/lib/components/ToastContainer/toast.module.css

@@ -98,6 +98,9 @@
 }
 
 .actions {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1.25rem;
     grid-column: 2 / span 1;
     grid-row: 2 / span 1;
 }

package/lib/components/Trigger/trigger.js

@@ -15,9 +15,15 @@ import defaultClasses from './trigger.module.css';
  * @returns {React.Element} A React component that when triggered invokes the action.
  */
 const Trigger = props => {
-    const { action, children, ariaLabel } = props;
+    const {
+        action,
+        children,
+        ariaLabel,
+        classes: propClasses,
+        ...restProps
+    } = props;
 
-    const classes = useStyle(defaultClasses, props.classes);
+    const classes = useStyle(defaultClasses, propClasses);
 
     return (
         <button
@@ -25,6 +31,7 @@ const Trigger = props => {
             type="button"
             onClick={action}
             aria-label={ariaLabel}
+            {...restProps}
         >
             {children}
         </button>

package/lib/components/Wishlist/AddToListButton/addToListButton.ee.js

@@ -41,6 +41,7 @@ const AddToListButton = props => {
                 ref={buttonRef}
                 className={buttonClass}
                 {...buttonAriaProps}
+                data-cy="addToListButton-root"
             >
                 {props.icon} {buttonText}
             </button>

package/lib/components/Wishlist/WishlistDialog/CreateWishlistForm/createWishlistForm.js

@@ -48,6 +48,7 @@ const CreateWishlistForm = props => {
                         id={classes.listname}
                         field="listname"
                         validate={isRequired}
+                        data-cy="createWishlistForm-listname"
                     />
                 </Field>
             </div>
@@ -61,6 +62,7 @@ const CreateWishlistForm = props => {
                     onClick={handleSave}
                     priority="high"
                     type="button"
+                    data-cy="createWishListForm-saveButton"
                 >
                     {saveButtonText}
                 </Button>

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

@@ -18,6 +18,7 @@ const WishlistLineItem = props => {
             disabled={isDisabled}
             type="button"
             onClick={handleClick}
+            data-cy="WishlistLineItem-button"
         >
             {props.children}
         </button>

package/lib/components/Wishlist/WishlistDialog/wishlistDialog.js

@@ -79,6 +79,7 @@ const WishlistDialog = props => {
                 className={classes.createListButton}
                 onClick={handleNewListClick}
                 type="button"
+                data-cy="WishlistDialog-createButton"
             >
                 {createButtonText}
             </button>

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

@@ -8,7 +8,7 @@ exports[`empty single wishlist 1`] = `
     className="heading"
   >
     <mock-FormattedMessage
-      defaultMessage="Favorites Lists"
+      defaultMessage="{count, plural, one {Favorites List} other {Favorites Lists}}"
       id="wishlistPage.headingText"
       values={
         Object {
@@ -30,7 +30,7 @@ exports[`renders a single wishlist without visibility toggle 1`] = `
     className="heading"
   >
     <mock-FormattedMessage
-      defaultMessage="Favorites Lists"
+      defaultMessage="{count, plural, one {Favorites List} other {Favorites Lists}}"
       id="wishlistPage.headingText"
       values={
         Object {
@@ -60,7 +60,7 @@ exports[`renders disabled feature error 1`] = `
     className="heading"
   >
     <mock-FormattedMessage
-      defaultMessage="Favorites Lists"
+      defaultMessage="{count, plural, one {Favorites List} other {Favorites Lists}}"
       id="wishlistPage.headingText"
       values={
         Object {
@@ -90,7 +90,7 @@ exports[`renders general fetch error 1`] = `
     className="heading"
   >
     <mock-FormattedMessage
-      defaultMessage="Favorites Lists"
+      defaultMessage="{count, plural, one {Favorites List} other {Favorites Lists}}"
       id="wishlistPage.headingText"
       values={
         Object {
@@ -202,7 +202,7 @@ exports[`renders wishlist data 1`] = `
     className="heading"
   >
     <mock-FormattedMessage
-      defaultMessage="Favorites Lists"
+      defaultMessage="{count, plural, one {Favorites List} other {Favorites Lists}}"
       id="wishlistPage.headingText"
       values={
         Object {

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

@@ -47,6 +47,7 @@ const CreateWishlist = props => {
                 className={classes.createButton}
                 onClick={handleShowModal}
                 type="button"
+                data-cy="createWishlist-createButton"
             >
                 <div className={classes.labelContainer}>
                     {createIcon}
@@ -99,6 +100,7 @@ const CreateWishlist = props => {
                             field="name"
                             validate={isRequired}
                             validateOnBlur
+                            data-cy="createWishlist-name"
                         />
                     </Field>
                 </div>

package/lib/components/WishlistPage/wishlist.js

@@ -91,7 +91,9 @@ const Wishlist = props => {
 
     const wishlistName = name ? (
         <div className={classes.nameContainer}>
-            <h2 className={classes.name}>{name}</h2>
+            <h2 className={classes.name} data-cy="Wishlist-name">
+                {name}
+            </h2>
         </div>
     ) : (
         <div className={classes.nameContainer}>
@@ -127,7 +129,10 @@ const Wishlist = props => {
         : classes.visibilityToggle_hidden;
 
     const buttonsContainer = id ? (
-        <div className={classes.buttonsContainer}>
+        <div
+            className={classes.buttonsContainer}
+            data-cy="wishlist-buttonsContainer"
+        >
             <ActionMenu id={id} name={name} visibility={visibility} />
             <button
                 className={visibilityToggleClass}
@@ -140,7 +145,7 @@ const Wishlist = props => {
     ) : null;
 
     return (
-        <div className={classes.root}>
+        <div className={classes.root} data-cy="Wishlist-root">
             <div className={classes.header}>
                 {wishlistName}
                 <div className={classes.itemsCountContainer}>

package/lib/components/WishlistPage/wishlistItem.js

@@ -91,7 +91,11 @@ const WishlistItem = props => {
         : classes.root;
 
     const addToCart = isSupportedProductType ? (
-        <button className={classes.addToCart} {...addToCartButtonProps}>
+        <button
+            className={classes.addToCart}
+            {...addToCartButtonProps}
+            data-cy="wishlistItem-addToCart"
+        >
             {formatMessage({
                 id: 'wishlistItem.addToCart',
                 defaultMessage: 'Add to Cart'
@@ -100,20 +104,29 @@ const WishlistItem = props => {
     ) : null;
 
     return (
-        <div className={rootClass}>
+        <div className={rootClass} data-cy="wishlistItem-root">
             <Image {...imageProps} />
 
             <div className={classes.actionWrap}>
-                <span className={classes.name}>{name}</span>{' '}
+                <span
+                    className={classes.name}
+                    data-cy="wishlistItem-productName"
+                >
+                    {name}
+                </span>{' '}
                 <button
                     className={classes.deleteItem}
                     onClick={handleRemoveProductFromWishlist}
                     aria-label={removeProductAriaLabel}
+                    data-cy="wishlistItem-deleteItem"
                 >
                     <Icon size={16} src={Trash2} />
                 </button>
             </div>
-            <div className={classes.priceContainer}>
+            <div
+                className={classes.priceContainer}
+                data-cy="wishlistItem-priceContainer"
+            >
                 <Price currencyCode={currency} value={unitPrice} />
             </div>
             {optionElements}

package/lib/components/WishlistPage/wishlistPage.js

@@ -80,12 +80,14 @@ const WishlistPage = props => {
     }
 
     return (
-        <div className={classes.root}>
-            <h1 className={classes.heading}>
+        <div className={classes.root} data-cy="Wishlist-root">
+            <h1 className={classes.heading} data-cy="WishlistPage-heading">
                 <FormattedMessage
                     values={{ count: wishlists.length }}
                     id={'wishlistPage.headingText'}
-                    defaultMessage={'Favorites Lists'}
+                    defaultMessage={
+                        '{count, plural, one {Favorites List} other {Favorites Lists}}'
+                    }
                 />
             </h1>
             {content}

package/lib/defaultRoutes.json

@@ -35,6 +35,12 @@
         "authed": true,
         "redirectTo": "/sign-in"
     },
+    {
+        "name": "ContactPage",
+        "pattern": "/contact-us",
+        "exact": true,
+        "path": "../ContactPage"
+    },
     {
         "name": "CreateAccountPage",
         "pattern": "/create-account",

package/lib/targets/__tests__/venia-ui-targets.spec.js

@@ -85,6 +85,7 @@ test('uses routes to inject client-routed pages', async () => {
             '../CartPage/index.js': mockDefault('Cart'),
             '../CreateAccountPage/index.js': mockDefault('CreateAccount'),
             '../CheckoutPage/index.js': mockDefault('Checkout'),
+            '../ContactPage/index.js': mockDefault('ContactPage'),
             '../MagentoRoute/index.js': mockDefault('MagentoRoute')
         },
         optimization: {
@@ -97,6 +98,7 @@ test('uses routes to inject client-routed pages', async () => {
     expect(built.bundle).toContain('DynamicCart');
     expect(built.bundle).toContain('DynamicCreateAccount');
     expect(built.bundle).toContain('DynamicCheckout');
+    expect(built.bundle).toContain('DynamicContactPage');
 });
 
 test('declares checkoutPagePaymentTypes target', async () => {

package/lib/util/__tests__/shrinkGETQuery.spec.js

@@ -82,7 +82,7 @@ test('Shrunken category query URL is smaller than the original', () => {
               configurable_options {
                 attribute_code
                 attribute_id
-                id
+                uid
                 label
                 values {
                   default_label

package/lib/util/apolloCache.js

@@ -50,9 +50,9 @@ export const cacheKeyFromType = object => {
                 : defaultDataIdFromObject(object);
         // ID field is not based on selected values and is not unique; use unique value ID instead.
         case MagentoGraphQLTypes.SelectedConfigurableOption:
-            return object.value_id
+            return object.configurable_product_option_value_uid
                 ? `${MagentoGraphQLTypes.SelectedConfigurableOption}:${
-                      object.value_id
+                      object.configurable_product_option_value_uid
                   }`
                 : null;
         // Only maintain a single cart entry