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

package/lib/components/FilterSidebar/filterSidebar.js

@@ -103,7 +103,10 @@ const FilterSidebar = props => {
         >
             <div className={classes.body}>
                 <div className={classes.header}>
-                    <h2 className={classes.headerTitle}>
+                    <h2
+                        data-cy="FilterSidebar-headerTitle"
+                        className={classes.headerTitle}
+                    >
                         <FormattedMessage
                             id={'filterModal.headerTitle'}
                             defaultMessage={'Filters'}

package/lib/components/Footer/__tests__/__snapshots__/footer.spec.js.snap

@@ -205,11 +205,17 @@ exports[`footer renders copyright 1`] = `
       foo
     </p>
     <a
-      className="logo"
+      className="logoContainer"
       href="/"
       onClick={[Function]}
     >
-      <i />
+      <i
+        classes={
+          Object {
+            "logo": "logo",
+          }
+        }
+      />
     </a>
   </div>
 </footer>

package/lib/components/Footer/footer.js

@@ -10,6 +10,7 @@ import Newsletter from '../Newsletter';
 import { useStyle } from '../../classify';
 import defaultClasses from './footer.module.css';
 import { DEFAULT_LINKS, LOREM_IPSUM } from './sampleData';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
 
 const Footer = props => {
     const { links } = props;
@@ -29,11 +30,11 @@ const Footer = props => {
 
             const itemKey = `text: ${text} path:${path}`;
             const child = path ? (
-                <Link className={classes.link} to={path} data-cy="Footer-link">
+                <Link data-cy="Footer-link" className={classes.link} to={path}>
                     <FormattedMessage id={text} defaultMessage={text} />
                 </Link>
             ) : (
-                <span className={classes.label}>
+                <span data-cy="Footer-label" className={classes.label}>
                     <FormattedMessage id={text} defaultMessage={text} />
                 </span>
             );
@@ -53,17 +54,23 @@ const Footer = props => {
     });
 
     return (
-        <footer className={classes.root} data-cy="Footer-root">
+        <footer data-cy="Footer-root" className={classes.root}>
             <div className={classes.links}>
                 {linkGroups}
                 <div className={classes.callout}>
-                    <span className={classes.calloutHeading}>
+                    <span
+                        data-cy="Footer-calloutHeading"
+                        className={classes.calloutHeading}
+                    >
                         <FormattedMessage
                             id={'footer.followText'}
                             defaultMessage={'Follow Us!'}
                         />
                     </span>
-                    <p className={classes.calloutBody}>
+                    <p
+                        data-cy="Footer-calloutText"
+                        className={classes.calloutBody}
+                    >
                         <FormattedMessage
                             id={'footer.calloutText'}
                             defaultMessage={LOREM_IPSUM}
@@ -85,13 +92,13 @@ const Footer = props => {
             </div>
             <div className={classes.branding}>
                 <ul className={classes.legal}>
-                    <li className={classes.terms}>
+                    <li data-cy="Footer-terms" className={classes.terms}>
                         <FormattedMessage
                             id={'footer.termsText'}
                             defaultMessage={'Terms of Use'}
                         />
                     </li>
-                    <li className={classes.privacy}>
+                    <li data-cy="Footer-privacy" className={classes.privacy}>
                         <FormattedMessage
                             id={'footer.privacyText'}
                             defaultMessage={'Privacy Policy'}
@@ -99,8 +106,8 @@ const Footer = props => {
                     </li>
                 </ul>
                 <p className={classes.copyright}>{copyrightText || null}</p>
-                <Link className={classes.logo} to="/">
-                    <Logo />
+                <Link to={resourceUrl('/')} className={classes.logoContainer}>
+                    <Logo classes={{ logo: classes.logo }} />
                 </Link>
             </div>
         </footer>

package/lib/components/Footer/footer.module.css

@@ -129,12 +129,17 @@
     text-align: center;
 }
 
-.logo {
+.logoContainer {
     grid-area: a;
 }
 
+.logo {
+    height: var(--height);
+    width: var(--width);
+}
+
 @media (max-width: 960px) {
-    .logo {
+    .logoContainer {
         margin-top: 2.5rem;
     }
 }

package/lib/components/ForgotPassword/ForgotPasswordForm/__tests__/__snapshots__/forgotPasswordForm.spec.js.snap

@@ -1,6 +1,113 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders correctly 1`] = `
+exports[`renders when busy 1`] = `
+<form
+  className="root"
+  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=""
+        />
+      </span>
+      <span
+        className="before"
+      />
+      <span
+        className="after"
+      />
+    </span>
+    <p
+      className="root"
+    />
+  </div>
+  <div
+    className="buttonContainer"
+  >
+    <button
+      className="cancelButton"
+      disabled={true}
+      onClick={[Function]}
+      onDragStart={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
+      onTouchCancel={[Function]}
+      onTouchEnd={[Function]}
+      onTouchMove={[Function]}
+      onTouchStart={[Function]}
+      type="button"
+    >
+      <span
+        className="content"
+      >
+        <mock-FormattedMessage
+          defaultMessage="Cancel"
+          id="forgotPasswordForm.cancelButtonText"
+        />
+      </span>
+    </button>
+    <button
+      className="submitButton"
+      disabled={true}
+      onClick={[Function]}
+      onDragStart={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
+      onTouchCancel={[Function]}
+      onTouchEnd={[Function]}
+      onTouchMove={[Function]}
+      onTouchStart={[Function]}
+      type="submit"
+    >
+      <span
+        className="content"
+      >
+        <mock-FormattedMessage
+          defaultMessage="Submit"
+          id="forgotPasswordForm.submitButtonText"
+        />
+      </span>
+    </button>
+  </div>
+</form>
+`;
+
+exports[`renders when not busy 1`] = `
 <form
   className="root"
   onKeyDown={[Function]}
@@ -54,6 +161,7 @@ exports[`renders correctly 1`] = `
     <button
       className="cancelButton"
       disabled={false}
+      onClick={[Function]}
       onDragStart={[Function]}
       onKeyDown={[Function]}
       onKeyUp={[Function]}

package/lib/components/ForgotPassword/ForgotPasswordForm/__tests__/forgotPasswordForm.spec.js

@@ -6,9 +6,24 @@ import ForgotPasswordForm from '../forgotPasswordForm';
 
 jest.mock('../../../../classify');
 
-test('renders correctly', () => {
+test('renders when not busy', () => {
     const wrapper = createTestInstance(
-        <ForgotPasswordForm onSubmit={() => {}} />
+        <ForgotPasswordForm
+            isResettingPassword={false}
+            onCancel={() => {}}
+            onSubmit={() => {}}
+        />
+    );
+    expect(wrapper.toJSON()).toMatchSnapshot();
+});
+
+test('renders when busy', () => {
+    const wrapper = createTestInstance(
+        <ForgotPasswordForm
+            isResettingPassword={true}
+            onCancel={() => {}}
+            onSubmit={() => {}}
+        />
     );
     expect(wrapper.toJSON()).toMatchSnapshot();
 });
@@ -16,7 +31,11 @@ test('renders correctly', () => {
 test('calls onSubmit callback', () => {
     const onSubmit = jest.fn();
     const wrapper = createTestInstance(
-        <ForgotPasswordForm onSubmit={onSubmit} />
+        <ForgotPasswordForm
+            isResettingPassword={false}
+            onCancel={() => {}}
+            onSubmit={onSubmit}
+        />
     );
     wrapper.root.findByType(Form).props.onSubmit();
 

package/lib/components/ForgotPassword/ForgotPasswordForm/forgotPasswordForm.js

@@ -1,18 +1,25 @@
 import React from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
-import { func, shape, string } from 'prop-types';
+import { bool, func, shape, string } from 'prop-types';
 import { Form } from 'informed';
 
 import { useStyle } from '../../../classify';
 import { isRequired } from '../../../util/formValidators';
 import Button from '../../Button';
 import Field from '../../Field';
+import GoogleReCaptcha from '../../GoogleReCaptcha';
 import TextInput from '../../TextInput';
 import defaultClasses from './forgotPasswordForm.module.css';
 
 const ForgotPasswordForm = props => {
     const classes = useStyle(defaultClasses, props.classes);
-    const { initialValues, isResettingPassword, onSubmit, onCancel } = props;
+    const {
+        initialValues,
+        isResettingPassword,
+        onSubmit,
+        onCancel,
+        recaptchaWidgetProps
+    } = props;
 
     const { formatMessage } = useIntl();
 
@@ -36,6 +43,7 @@ const ForgotPasswordForm = props => {
                     data-cy="email"
                 />
             </Field>
+            <GoogleReCaptcha {...recaptchaWidgetProps} />
             <div className={classes.buttonContainer}>
                 <Button
                     className={classes.cancelButton}
@@ -74,12 +82,14 @@ ForgotPasswordForm.propTypes = {
     initialValues: shape({
         email: string
     }),
+    isResettingPassword: bool,
     onCancel: func.isRequired,
     onSubmit: func.isRequired
 };
 
 ForgotPasswordForm.defaultProps = {
-    initialValues: {}
+    initialValues: {},
+    isResettingPassword: false
 };
 
 export default ForgotPasswordForm;

package/lib/components/ForgotPassword/ForgotPasswordForm/forgotPasswordForm.module.css

@@ -1,6 +1,6 @@
 .root {
     display: grid;
-    gap: 1rem;
+    gap: 0.9375rem;
     justify-items: stretch;
 }
 

package/lib/components/ForgotPassword/__tests__/__snapshots__/forgotPassword.spec.js.snap

@@ -12,14 +12,13 @@ exports[`should render properly 1`] = `
     Please enter the email address associated with this account.
   </p>
   <mock-ForgotPasswordForm
-    initialValues={
-      Object {
-        "email": "gooseton@goosemail.com",
-      }
-    }
     isResettingPassword={false}
-    onCancel={[MockFunction]}
+    onCancel={[Function]}
     onSubmit={[MockFunction]}
+    recaptchaWidgetProps={Object {}}
+  />
+  <mock-FormError
+    errors={Array []}
   />
 </div>
 `;

package/lib/components/ForgotPassword/__tests__/forgotPassword.spec.js

@@ -1,32 +1,47 @@
 import React from 'react';
-import { createTestInstance } from '@magento/peregrine';
+import { act } from 'react-test-renderer';
 
-import { useForgotPassword } from '@magento/peregrine/lib/talons/ForgotPassword/useForgotPassword';
+import { createTestInstance } from '@magento/peregrine';
 
+import ForgotPasswordForm from '../ForgotPasswordForm';
 import ForgotPassword from '../forgotPassword';
 
-jest.mock('../FormSubmissionSuccessful', () => props => (
-    <mock-FormSubmissionSuccessful {...props} />
-));
-jest.mock('../ForgotPasswordForm', () => props => (
-    <mock-ForgotPasswordForm {...props} />
-));
+let mockHasCompleted = false;
 
 jest.mock(
     '@magento/peregrine/lib/talons/ForgotPassword/useForgotPassword',
     () => ({
-        useForgotPassword: jest.fn().mockReturnValue({
-            forgotPasswordEmail: 'gooseton@goosemail.com',
-            formErrors: [],
-            handleCancel: jest.fn(),
-            handleFormSubmit: jest.fn(),
-            hasCompleted: false,
-            isResettingPassword: false
-        })
+        useForgotPassword: jest
+            .fn()
+            .mockImplementation(({ onCancel = jest.fn() }) => ({
+                forgotPasswordEmail: 'gooseton@goosemail.com',
+                formErrors: [],
+                handleCancel: onCancel,
+                handleFormSubmit: jest.fn(),
+                hasCompleted: mockHasCompleted,
+                isResettingPassword: false,
+                recaptchaWidgetProps: {}
+            }))
     })
 );
 
+jest.mock('../../FormError', () => props => <mock-FormError {...props} />);
+jest.mock('../ForgotPasswordForm', () => props => (
+    <mock-ForgotPasswordForm {...props} />
+));
+jest.mock('../FormSubmissionSuccessful', () => props => (
+    <mock-FormSubmissionSuccessful {...props} />
+));
+
 test('should render properly', () => {
+    const tree = createTestInstance(<ForgotPassword />);
+
+    expect(tree.toJSON()).toMatchSnapshot();
+});
+
+test('should render successful view if hasCompleted is true', () => {
+    mockHasCompleted = true;
+
     const tree = createTestInstance(
         <ForgotPassword
             initialValues={{ email: 'gooseton@goosemail.com' }}
@@ -37,22 +52,20 @@ test('should render properly', () => {
     expect(tree.toJSON()).toMatchSnapshot();
 });
 
-test('should render successful view if hasCompleted is true', () => {
-    useForgotPassword.mockReturnValueOnce({
-        forgotPasswordEmail: 'gooseton@goosemail.com',
-        formErrors: [],
-        handleCancel: jest.fn(),
-        handleFormSubmit: jest.fn(),
-        hasCompleted: true,
-        isResettingPassword: false
-    });
+test('should call onCancel prop', () => {
+    mockHasCompleted = false;
+    const mockOnCancelProp = jest.fn();
 
-    const tree = createTestInstance(
+    const { root } = createTestInstance(
         <ForgotPassword
             initialValues={{ email: 'gooseton@goosemail.com' }}
-            onCancel={jest.fn()}
+            onCancel={mockOnCancelProp}
         />
     );
 
-    expect(tree.toJSON()).toMatchSnapshot();
+    act(() => {
+        root.findByType(ForgotPasswordForm).props.onCancel();
+    });
+
+    expect(mockOnCancelProp).toHaveBeenCalled();
 });

package/lib/components/ForgotPassword/forgotPassword.js

@@ -28,7 +28,8 @@ const ForgotPassword = props => {
         handleCancel,
         handleFormSubmit,
         hasCompleted,
-        isResettingPassword
+        isResettingPassword,
+        recaptchaWidgetProps
     } = talonProps;
 
     const classes = useStyle(defaultClasses, props.classes);
@@ -41,18 +42,24 @@ const ForgotPassword = props => {
         <FormSubmissionSuccessful email={forgotPasswordEmail} />
     ) : (
         <Fragment>
-            <h2 className={classes.title}>
+            <h2 data-cy="ForgotPassword-title" className={classes.title}>
                 <FormattedMessage
                     id={'forgotPassword.recoverPasswordText'}
                     defaultMessage={'Recover Password'}
                 />
             </h2>
-            <p className={classes.instructions}>{INSTRUCTIONS}</p>
+            <p
+                data-cy="ForgotPassword-instructions"
+                className={classes.instructions}
+            >
+                {INSTRUCTIONS}
+            </p>
             <ForgotPasswordForm
                 initialValues={initialValues}
                 isResettingPassword={isResettingPassword}
                 onSubmit={handleFormSubmit}
                 onCancel={handleCancel}
+                recaptchaWidgetProps={recaptchaWidgetProps}
             />
             <FormErrors errors={formErrors} />
         </Fragment>

package/lib/components/ForgotPassword/forgotPassword.module.css

@@ -1,8 +1,8 @@
 .root {
     display: grid;
-    gap: 1.5rem;
+    gap: 0.9375rem;
     justify-items: stretch;
-    padding: 1.5rem;
+    padding: 1rem 1.5rem;
 }
 
 .title {

package/lib/components/Gallery/__tests__/__snapshots__/gallery.spec.js.snap

@@ -23,6 +23,12 @@ exports[`renders if \`items\` is an array of objects 1`] = `
           height={375}
           loading="eager"
           src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+          style={
+            Object {
+              "--height": "375px",
+              "--width": "100px",
+            }
+          }
           width={100}
         />
         <img
@@ -42,6 +48,11 @@ exports[`renders if \`items\` is an array of objects 1`] = `
 /test/product/1.png 1280w,
 /test/product/1.png 1600w,
 /test/product/1.png 2560w"
+          style={
+            Object {
+              "--width": "100px",
+            }
+          }
           width={100}
         />
       </div>
@@ -108,6 +119,12 @@ exports[`renders if \`items\` is an array of objects 1`] = `
           height={375}
           loading="eager"
           src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+          style={
+            Object {
+              "--height": "375px",
+              "--width": "100px",
+            }
+          }
           width={100}
         />
         <img
@@ -127,6 +144,11 @@ exports[`renders if \`items\` is an array of objects 1`] = `
 /test/product/2.png 1280w,
 /test/product/2.png 1600w,
 /test/product/2.png 2560w"
+          style={
+            Object {
+              "--width": "100px",
+            }
+          }
           width={100}
         />
       </div>

package/lib/components/Gallery/__tests__/__snapshots__/item.spec.js.snap

@@ -18,6 +18,11 @@ exports[`renders a placeholder item while awaiting item 1`] = `
         className="image placeholder_layoutOnly"
         loading="eager"
         src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+        style={
+          Object {
+            "--width": "100px",
+          }
+        }
         width={100}
       />
       <img
@@ -27,6 +32,7 @@ exports[`renders a placeholder item while awaiting item 1`] = `
         onError={[MockFunction]}
         onLoad={[MockFunction]}
         src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+        style={Object {}}
       />
     </div>
   </div>
@@ -73,6 +79,12 @@ exports[`renders correctly with valid item data 1`] = `
         height={375}
         loading="eager"
         src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+        style={
+          Object {
+            "--height": "375px",
+            "--width": "100px",
+          }
+        }
         width={100}
       />
       <img
@@ -92,6 +104,11 @@ exports[`renders correctly with valid item data 1`] = `
 /media/catalog/product/foo/bar/pic.png?auto=webp&format=png&width=1280&height=1600&fit=cover 1280w,
 /media/catalog/product/foo/bar/pic.png?auto=webp&format=png&width=1600&height=2000&fit=cover 1600w,
 /media/catalog/product/foo/bar/pic.png?auto=webp&format=png&width=2560&height=3200&fit=cover 2560w"
+        style={
+          Object {
+            "--width": "100px",
+          }
+        }
         width={100}
       />
     </div>

package/lib/components/Gallery/addToCartButton.js

@@ -37,6 +37,7 @@ const AddToCartButton = props => {
 
     const buttonInStock = (
         <Button
+            data-cy="AddToCartButton-buttonInStock"
             aria-label={formatMessage({
                 id: 'addToCartButton.addItemToCartAriaLabel',
                 defaultMessage: 'Add to Cart'
@@ -59,6 +60,7 @@ const AddToCartButton = props => {
 
     const buttonOutOfStock = (
         <Button
+            data-cy="AddtoCartButton-buttonOutOfStock"
             aria-label={formatMessage({
                 id: 'addToCartButton.itemOutOfStockAriaLabel',
                 defaultMessage: 'Out of Stock'

package/lib/components/Gallery/gallery.js

@@ -37,7 +37,12 @@ const Gallery = props => {
     );
 
     return (
-        <div className={classes.root} aria-live="polite" aria-busy="false">
+        <div
+            data-cy="Gallery-root"
+            className={classes.root}
+            aria-live="polite"
+            aria-busy="false"
+        >
             <div className={classes.items}>{galleryItems}</div>
         </div>
     );

package/lib/components/Gallery/item.js

@@ -77,7 +77,12 @@ const GalleryItem = props => {
     // ) : null;
 
     return (
-        <div className={classes.root} aria-live="polite" aria-busy="false">
+        <div
+            data-cy="GalleryItem-root"
+            className={classes.root}
+            aria-live="polite"
+            aria-busy="false"
+        >
             <Link
                 onClick={handleLinkClick}
                 to={productLink}
@@ -105,7 +110,7 @@ const GalleryItem = props => {
             >
                 <span>{name}</span>
             </Link>
-            <div className={classes.price}>
+            <div data-cy="GalleryItem-price" className={classes.price}>
                 <Price
                     value={price_range.maximum_price.regular_price.value}
                     currencyCode={