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

package/lib/components/MyAccount/ResetPassword/resetPassword.js

@@ -11,6 +11,7 @@ import { isRequired } from '../../../util/formValidators';
 import Button from '../../Button';
 import Field from '../../Field';
 import FormErrors from '../../FormError';
+import GoogleReCaptcha from '../../GoogleReCaptcha';
 import { StoreTitle } from '../../Head';
 import Password from '../../Password';
 import TextInput from '../../TextInput';
@@ -27,22 +28,18 @@ const ResetPassword = props => {
         loading,
         token,
         formErrors,
-        handleSubmit
+        handleSubmit,
+        recaptchaWidgetProps
     } = talonProps;
-    const PAGE_TITLE = formatMessage({
-        id: 'resetPassword.pageTitleText',
-        defaultMessage: 'Reset Password'
-    });
+
     const tokenMissing = (
-        <div className={classes.invalidTokenContainer}>
-            <div className={classes.invalidToken}>
-                <FormattedMessage
-                    id={'resetPassword.invalidTokenMessage'}
-                    defaultMessage={
-                        'Uh oh, something went wrong. Check the link or try again.'
-                    }
-                />
-            </div>
+        <div className={classes.invalidToken}>
+            <FormattedMessage
+                id={'resetPassword.invalidTokenMessage'}
+                defaultMessage={
+                    'Uh oh, something went wrong. Check the link or try again.'
+                }
+            />
         </div>
     );
 
@@ -61,18 +58,16 @@ const ResetPassword = props => {
         }
     }, [addToast, formatMessage, hasCompleted]);
     const recoverPassword = hasCompleted ? (
-        <div className={classes.successMessageContainer}>
-            <div className={classes.successMessage}>
-                <FormattedMessage
-                    id={'resetPassword.successMessage'}
-                    defaultMessage={
-                        'Your new password has been saved. Please use this password to sign into your Account.'
-                    }
-                />
-            </div>
+        <div className={classes.successMessage}>
+            <FormattedMessage
+                id={'resetPassword.successMessage'}
+                defaultMessage={
+                    'Your new password has been saved. Please use this password to sign into your Account.'
+                }
+            />
         </div>
     ) : (
-        <Form className={classes.container} onSubmit={handleSubmit}>
+        <Form className={classes.form} onSubmit={handleSubmit}>
             <div className={classes.description}>
                 <FormattedMessage
                     id={'resetPassword.descriptionText'}
@@ -85,9 +80,6 @@ const ResetPassword = props => {
                 <TextInput field={'email'} validate={isRequired} />
             </Field>
             <Password
-                classes={{
-                    root: classes.password
-                }}
                 label={formatMessage({
                     id: 'resetPassword.newPasswordText',
                     defaultMessage: 'New Password'
@@ -95,31 +87,41 @@ const ResetPassword = props => {
                 fieldName={'newPassword'}
                 isToggleButtonHidden={false}
             />
-            <Button
-                className={classes.submitButton}
-                type="submit"
-                priority="high"
-                disabled={loading}
-            >
-                <FormattedMessage
-                    id="resetPassword.savePassword"
-                    defaultMessage="Save Password"
-                />
-            </Button>
-            <FormErrors
-                classes={{
-                    root: classes.errorMessage
-                }}
-                errors={formErrors}
-            />
+            <GoogleReCaptcha {...recaptchaWidgetProps} />
+            <div className={classes.buttonContainer}>
+                <Button
+                    className={classes.submitButton}
+                    type="submit"
+                    priority="high"
+                    disabled={loading}
+                >
+                    <FormattedMessage
+                        id="resetPassword.savePassword"
+                        defaultMessage="Save Password"
+                    />
+                </Button>
+            </div>
+            <FormErrors errors={formErrors} />
         </Form>
     );
 
     return (
         <div className={classes.root}>
-            <StoreTitle>{PAGE_TITLE}</StoreTitle>
-            <h1 className={classes.heading}>{PAGE_TITLE}</h1>
-            {token ? recoverPassword : tokenMissing}
+            <StoreTitle>
+                {formatMessage({
+                    id: 'resetPassword.title',
+                    defaultMessage: 'Reset Password'
+                })}
+            </StoreTitle>
+            <h1 className={classes.header}>
+                <FormattedMessage
+                    id="resetPassword.header"
+                    defaultMessage="Reset Password"
+                />
+            </h1>
+            <div className={classes.contentContainer}>
+                {token ? recoverPassword : tokenMissing}
+            </div>
         </div>
     );
 };
@@ -128,16 +130,14 @@ export default ResetPassword;
 
 ResetPassword.propTypes = {
     classes: shape({
-        container: string,
+        root: string,
+        header: string,
+        contentContainer: string,
+        form: string,
         description: string,
-        errorMessage: string,
-        heading: string,
         invalidToken: string,
-        invalidTokenContainer: string,
-        password: string,
-        root: string,
+        buttonContainer: string,
         submitButton: string,
-        successMessage: string,
-        successMessageContainer: string
+        successMessage: string
     })
 };

package/lib/components/MyAccount/ResetPassword/resetPassword.module.css

@@ -1,30 +1,30 @@
 .root {
-    padding: 2.5rem 3rem;
-    max-width: var(--venia-global-maxWidth);
-    margin: 0 auto;
+    display: grid;
+    justify-content: center;
+    padding: 2.5rem 0;
+    text-align: center;
+    grid-template-columns: minmax(auto, 512px);
+    row-gap: 2rem;
 }
 
-.heading {
+.header {
     font-family: var(--venia-global-fontFamily-serif);
-    line-height: 1.25em;
-    margin-bottom: 2.5rem;
-    text-align: center;
-    text-transform: capitalize;
 }
 
-.container {
+.form {
     display: grid;
-    gap: 1.5rem;
-    margin: 2rem 7rem;
-    padding: 3rem;
-    border: 2px solid rgb(var(--venia-global-color-gray-400));
-    border-radius: 0.375rem;
+    gap: 0.9375rem;
+    justify-items: stretch;
+    padding: 1rem 1.5rem;
 }
 
 .description {
-    font-size: var(--venia-global-typography-heading-M-fontSize);
-    line-height: var(--venia-global-typography-heading-lineHeight);
-    padding-bottom: 0.5rem;
+    font-weight: 300;
+    line-height: 1.25rem;
+}
+
+.buttonContainer {
+    margin-top: 1rem;
 }
 
 .submitButton {
@@ -32,75 +32,23 @@
     justify-self: center;
 }
 
-.invalidTokenContainer {
-    border: 2px solid rgb(var(--venia-global-color-gray-400));
-    border-radius: 0.375rem;
-    margin: auto;
-    padding: 3rem 5rem;
-    padding-left: 3rem;
-    width: fit-content;
-}
-
-.invalidToken {
-    padding: 0.5rem 1rem;
-    border-left: 4px solid rgb(var(--venia-global-color-error));
-    color: rgb(var(--venia-global-color-error));
-}
-
-.successMessageContainer {
-    border: 2px solid rgb(var(--venia-global-color-gray-400));
-    border-radius: 0.375rem;
-    margin: auto;
-    padding: 3rem 5rem;
-    padding-left: 3rem;
-    width: fit-content;
-}
-
+.invalidToken,
 .successMessage {
-    padding: 0.5rem 1rem;
+    padding: 1.5rem;
     text-align: center;
 }
 
-.errorMessage {
-    padding-top: 1rem;
+.invalidToken {
+    color: rgb(var(--venia-global-color-error));
 }
 
-/*
- * Mobile-specific styles.
- */
-
-@media (max-width: 960px) {
-    .root {
-        padding-left: 1.5rem;
-        padding-right: 1.5rem;
-        margin: 0 auto;
-    }
-
-    .container {
-        border: none;
-        margin: 0;
-        padding: 0;
-    }
-
-    .password {
-        min-height: 5rem;
-    }
-
-    .invalidTokenContainer {
-        border: none;
-        margin: auto;
-        padding: 0;
-    }
-
-    .invalidToken {
-        border-left: 4px solid rgb(var(--venia-global-color-error));
-        padding: 0.5rem;
-        text-align: left;
+@media (min-width: 961px) {
+    .contentContainer {
+        border: 2px solid rgb(var(--venia-global-color-border));
+        border-radius: 0.375rem;
     }
 
-    .successMessageContainer {
-        border: none;
-        margin: auto;
-        padding: 0;
+    .form {
+        margin-bottom: 2rem;
     }
 }

package/lib/components/Newsletter/newsletter.js

@@ -68,14 +68,17 @@ const Newsletter = props => {
     return (
         <div className={classes.root} data-cy={'Newsletter-root'}>
             {maybeLoadingIndicator}
-            <span className={classes.title}>
+            <span data-cy="Newsletter-title" className={classes.title}>
                 <FormattedMessage
                     id={'newsletter.titleText'}
                     defaultMessage={'Subscribe to Venia'}
                 />
             </span>
 
-            <p className={classes.newsletter_text}>
+            <p
+                data-cy="Newsletter-infoText"
+                className={classes.newsletter_text}
+            >
                 <FormattedMessage
                     id={'newsletter.infoText'}
                     defaultMessage={
@@ -107,6 +110,7 @@ const Newsletter = props => {
                     />
                 </Field>
                 <LinkButton
+                    data-cy="Newsletter-submitButton"
                     className={classes.subscribe_link}
                     type="submit"
                     disabled={isBusy}

package/lib/components/OrderHistoryPage/OrderDetails/__tests__/__snapshots__/item.spec.js.snap

@@ -14,6 +14,11 @@ exports[`should render properly 1`] = `
         className="undefined undefined"
         loading="eager"
         src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+        style={
+          Object {
+            "--width": "50px",
+          }
+        }
         width={50}
       />
       <img
@@ -33,6 +38,12 @@ https://www.venia.com/product1-thumbnail.jpg?auto=webp&format=pjpg&width=960&hei
 https://www.venia.com/product1-thumbnail.jpg?auto=webp&format=pjpg&width=1280&height=1600&fit=cover 1280w,
 https://www.venia.com/product1-thumbnail.jpg?auto=webp&format=pjpg&width=1600&height=2000&fit=cover 1600w,
 https://www.venia.com/product1-thumbnail.jpg?auto=webp&format=pjpg&width=2560&height=3200&fit=cover 2560w"
+        style={
+          Object {
+            "--height": "62.5px",
+            "--width": "50px",
+          }
+        }
         width={50}
       />
     </div>

package/lib/components/ProductFullDetail/CustomAttributes/__tests__/__snapshots__/customAttributes.spec.js.snap

@@ -11,8 +11,10 @@ exports[`#CustomAttributes renders with custom attributes visible on front only
         data={
           Object {
             "attribute_metadata": Object {
-              "is_visible_on_front": true,
               "uid": "uid-1",
+              "used_in_components": Array [
+                "PRODUCT_DETAILS_PAGE",
+              ],
             },
           }
         }
@@ -23,8 +25,10 @@ exports[`#CustomAttributes renders with custom attributes visible on front only
         data={
           Object {
             "attribute_metadata": Object {
-              "is_visible_on_front": true,
               "uid": "uid-2",
+              "used_in_components": Array [
+                "PRODUCT_DETAILS_PAGE",
+              ],
             },
           }
         }
@@ -35,8 +39,10 @@ exports[`#CustomAttributes renders with custom attributes visible on front only
         data={
           Object {
             "attribute_metadata": Object {
-              "is_visible_on_front": true,
               "uid": "uid-4",
+              "used_in_components": Array [
+                "PRODUCT_DETAILS_PAGE",
+              ],
             },
           }
         }

package/lib/components/ProductFullDetail/CustomAttributes/__tests__/customAttributes.spec.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { createTestInstance } from '@magento/peregrine';
 
-import CustomAttributes from '../customAttributes';
+import CustomAttributes, { IS_VISIBLE_ON_FRONT } from '../customAttributes';
 
 jest.mock('react-intl', () => ({
     FormattedMessage: ({ defaultMessage }) => defaultMessage
@@ -40,31 +40,30 @@ describe('#CustomAttributes', () => {
             customAttributes: [
                 {
                     attribute_metadata: {
-                        is_visible_on_front: true,
+                        used_in_components: [IS_VISIBLE_ON_FRONT],
                         uid: 'uid-1'
                     }
                 },
                 {
                     attribute_metadata: {
-                        is_visible_on_front: true,
+                        used_in_components: [IS_VISIBLE_ON_FRONT],
                         uid: 'uid-2'
                     }
                 },
                 {
                     attribute_metadata: {
-                        is_visible_on_front: false,
+                        used_in_components: [],
                         uid: 'uid-3'
                     }
                 },
                 {
                     attribute_metadata: {
-                        is_visible_on_front: true,
+                        used_in_components: [IS_VISIBLE_ON_FRONT],
                         uid: 'uid-4'
                     }
                 },
                 {
                     attribute_metadata: {
-                        is_visible_on_front: false,
                         uid: 'uid-5'
                     }
                 }

package/lib/components/ProductFullDetail/CustomAttributes/customAttributes.js

@@ -7,6 +7,8 @@ import { useStyle } from '@magento/venia-ui/lib/classify';
 import AttributeType from './AttributeType';
 import defaultClasses from './customAttributes.module.css';
 
+export const IS_VISIBLE_ON_FRONT = 'PRODUCT_DETAILS_PAGE';
+
 const CustomAttributes = props => {
     const { customAttributes } = props;
     const classes = useStyle(defaultClasses, props.classes);
@@ -14,11 +16,11 @@ const CustomAttributes = props => {
     const list = useMemo(
         () =>
             customAttributes.reduce((previousAttribute, currentAttribute) => {
+                const usedInComponents =
+                    currentAttribute.attribute_metadata?.used_in_components ||
+                    [];
                 // Visible on front attributes only
-                if (
-                    currentAttribute.attribute_metadata.is_visible_on_front ===
-                    true
-                ) {
+                if (usedInComponents.includes(IS_VISIBLE_ON_FRONT)) {
                     const attributeContent = (
                         <li
                             key={currentAttribute.attribute_metadata.uid}

package/lib/components/ProductFullDetail/productFullDetail.js

@@ -178,7 +178,10 @@ const ProductFullDetail = props => {
                     >
                         {productDetails.name}
                     </h1>
-                    <p className={classes.productPrice}>
+                    <p
+                        data-cy="ProductFullDetail-productPrice"
+                        className={classes.productPrice}
+                    >
                         <Price
                             currencyCode={productDetails.price.currency}
                             value={productDetails.price.value}
@@ -196,7 +199,10 @@ const ProductFullDetail = props => {
                 />
                 <section className={classes.options}>{options}</section>
                 <section className={classes.quantity}>
-                    <span className={classes.quantityTitle}>
+                    <span
+                        data-cy="ProductFullDetail-quantityTitle"
+                        className={classes.quantityTitle}
+                    >
                         <FormattedMessage
                             id={'global.quantity'}
                             defaultMessage={'Quantity'}
@@ -215,7 +221,10 @@ const ProductFullDetail = props => {
                     </Suspense>
                 </section>
                 <section className={classes.description}>
-                    <span className={classes.descriptionTitle}>
+                    <span
+                        data-cy="ProductFullDetail-descriptionTitle"
+                        className={classes.descriptionTitle}
+                    >
                         <FormattedMessage
                             id={'productFullDetail.productDescription'}
                             defaultMessage={'Product Description'}

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

@@ -53,6 +53,7 @@ exports[`renders a transparent main image if no file name is provided 1`] = `
         className="image placeholder"
         loading="eager"
         src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+        style={Object {}}
       />
       <img
         alt="image-product"
@@ -61,6 +62,7 @@ exports[`renders a transparent main image if no file name is provided 1`] = `
         onError={[Function]}
         onLoad={[Function]}
         src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+        style={Object {}}
       />
     </div>
     <button
@@ -161,6 +163,11 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
         className="image placeholder"
         loading="eager"
         src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+        style={
+          Object {
+            "--width": "640px",
+          }
+        }
         width={640}
       />
       <img
@@ -180,6 +187,12 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
 /media/catalog/product/thumbnail1.png?auto=webp&format=png&width=1280&height=1600&fit=cover 1280w,
 /media/catalog/product/thumbnail1.png?auto=webp&format=png&width=1600&height=2000&fit=cover 1600w,
 /media/catalog/product/thumbnail1.png?auto=webp&format=png&width=2560&height=3200&fit=cover 2560w"
+        style={
+          Object {
+            "--height": "800px",
+            "--width": "640px",
+          }
+        }
         width={640}
       />
     </div>
@@ -240,6 +253,12 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
           height={170}
           loading="eager"
           src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+          style={
+            Object {
+              "--height": "170px",
+              "--width": "135px",
+            }
+          }
           width={135}
         />
         <img
@@ -259,6 +278,12 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
 /media/catalog/product/thumbnail1.png?auto=webp&format=png&width=1280&height=1600&fit=cover 1280w,
 /media/catalog/product/thumbnail1.png?auto=webp&format=png&width=1600&height=2000&fit=cover 1600w,
 /media/catalog/product/thumbnail1.png?auto=webp&format=png&width=2560&height=3200&fit=cover 2560w"
+          style={
+            Object {
+              "--height": "170px",
+              "--width": "135px",
+            }
+          }
           width={135}
         />
       </div>
@@ -278,6 +303,12 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
           height={170}
           loading="eager"
           src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+          style={
+            Object {
+              "--height": "170px",
+              "--width": "135px",
+            }
+          }
           width={135}
         />
         <img
@@ -297,6 +328,12 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
 /media/catalog/product/thumbnail2.png?auto=webp&format=png&width=1280&height=1600&fit=cover 1280w,
 /media/catalog/product/thumbnail2.png?auto=webp&format=png&width=1600&height=2000&fit=cover 1600w,
 /media/catalog/product/thumbnail2.png?auto=webp&format=png&width=2560&height=3200&fit=cover 2560w"
+          style={
+            Object {
+              "--height": "170px",
+              "--width": "135px",
+            }
+          }
           width={135}
         />
       </div>
@@ -316,6 +353,12 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
           height={170}
           loading="eager"
           src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+          style={
+            Object {
+              "--height": "170px",
+              "--width": "135px",
+            }
+          }
           width={135}
         />
         <img
@@ -335,6 +378,12 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
 /media/catalog/product/thumbnail3.png?auto=webp&format=png&width=1280&height=1600&fit=cover 1280w,
 /media/catalog/product/thumbnail3.png?auto=webp&format=png&width=1600&height=2000&fit=cover 1600w,
 /media/catalog/product/thumbnail3.png?auto=webp&format=png&width=2560&height=3200&fit=cover 2560w"
+          style={
+            Object {
+              "--height": "170px",
+              "--width": "135px",
+            }
+          }
           width={135}
         />
       </div>
@@ -354,6 +403,12 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
           height={170}
           loading="eager"
           src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+          style={
+            Object {
+              "--height": "170px",
+              "--width": "135px",
+            }
+          }
           width={135}
         />
         <img
@@ -373,6 +428,12 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
 /media/catalog/product/thumbnail4.png?auto=webp&format=png&width=1280&height=1600&fit=cover 1280w,
 /media/catalog/product/thumbnail4.png?auto=webp&format=png&width=1600&height=2000&fit=cover 1600w,
 /media/catalog/product/thumbnail4.png?auto=webp&format=png&width=2560&height=3200&fit=cover 2560w"
+          style={
+            Object {
+              "--height": "170px",
+              "--width": "135px",
+            }
+          }
           width={135}
         />
       </div>