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

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

package/lib/util/formValidators.js

@@ -11,7 +11,7 @@ const SUCCESS = undefined;
 export const hasLengthAtLeast = (value, values, minimumLength) => {
     const message = {
         id: 'validation.hasLengthAtLeast',
-        defaultMessage: 'Must contain more characters',
+        defaultMessage: 'Must contain at least {value} character(s).',
         value: minimumLength
     };
     if (!value || value.length < minimumLength) {
@@ -25,7 +25,7 @@ export const hasLengthAtMost = (value, values, maximumLength) => {
     if (value && value.length > maximumLength) {
         const message = {
             id: 'validation.hasLengthAtMost',
-            defaultMessage: 'Must have less characters',
+            defaultMessage: 'Must not exceed {value} character(s).',
             value: maximumLength
         };
         return message;
@@ -38,7 +38,7 @@ export const hasLengthExactly = (value, values, length) => {
     if (value && value.length !== length) {
         const message = {
             id: 'validation.hasLengthExactly',
-            defaultMessage: 'Does not have exact number of characters',
+            defaultMessage: 'Must contain exactly {value} character(s).',
             value: length
         };
         return message;
@@ -86,7 +86,7 @@ export const validateRegionCode = (value, values, countries) => {
     if (!country) {
         const invalidCountry = {
             id: 'validation.invalidCountry',
-            defaultMessage: `Country "${countryCode}" is not an available country.`,
+            defaultMessage: 'Country "{value}" is not an available country.',
             value: countryCode
         };
         return invalidCountry;
@@ -96,7 +96,8 @@ export const validateRegionCode = (value, values, countries) => {
     if (!(Array.isArray(regions) && regions.length)) {
         const invalidRegions = {
             id: 'validation.invalidRegions',
-            defaultMessage: `Country "${countryCode}" does not contain any available regions.`,
+            defaultMessage:
+                'Country "{value}" does not contain any available regions.',
             value: countryCode
         };
         return invalidRegions;
@@ -106,7 +107,8 @@ export const validateRegionCode = (value, values, countries) => {
     if (!region) {
         const invalidAbbrev = {
             id: 'validation.invalidAbbreviation',
-            defaultMessage: 'That is not a valid state abbreviation.',
+            defaultMessage:
+                'State "{value}" is not a valid state abbreviation.',
             value: value
         };
         return invalidAbbrev;
@@ -145,7 +147,7 @@ export const validatePassword = value => {
 export const isEqualToField = (value, values, fieldKey) => {
     const message = {
         id: 'validation.isEqualToField',
-        defaultMessage: 'Fields must match',
+        defaultMessage: '{value} must match.',
         value: fieldKey
     };
     return value === values[fieldKey] ? SUCCESS : message;
@@ -154,7 +156,7 @@ export const isEqualToField = (value, values, fieldKey) => {
 export const isNotEqualToField = (value, values, fieldKey) => {
     const message = {
         id: 'validation.isNotEqualToField',
-        defaultMessage: 'Fields must be different',
+        defaultMessage: '{value} must be different',
         value: fieldKey
     };
     return value !== values[fieldKey] ? SUCCESS : message;

package/lib/util/toCamelCase.js

@@ -0,0 +1,3 @@
+export const toCamelCase = str => {
+    return str.replace(/[-_ ]([a-zA-Z])/g, str => str.substr(1).toUpperCase());
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magento/venia-ui",
-  "version": "9.0.0",
+  "version": "9.2.0-alpha.1",
   "publishConfig": {
     "access": "public"
   },
@@ -31,7 +31,7 @@
   "bugs": {
     "url": "https://github.com/magento/pwa-studio/issues"
   },
-  "homepage": "https://github.com/magento/pwa-studio/tree/master/packages/venia-ui#readme",
+  "homepage": "https://github.com/magento/pwa-studio/tree/main/packages/venia-ui#readme",
   "dependencies": {
     "informed": "~3.29.0",
     "jarallax": "~1.11.1",
@@ -50,23 +50,26 @@
     "uuid": "~8.3.2"
   },
   "devDependencies": {
+    "@apollo/client": "~3.4.0",
     "@babel/cli": "~7.2.3",
-    "@babel/core": "~7.3.4",
-    "@babel/plugin-proposal-class-properties": "~7.3.4",
-    "@babel/plugin-proposal-object-rest-spread": "~7.3.4",
-    "@babel/plugin-syntax-dynamic-import": "~7.2.0",
+    "@babel/core": "~7.15.0",
+    "@babel/plugin-proposal-class-properties": "~7.14.5",
+    "@babel/plugin-proposal-object-rest-spread": "~7.14.7",
+    "@babel/plugin-proposal-optional-chaining": "~7.16.0",
+    "@babel/plugin-syntax-dynamic-import": "~7.8.3",
     "@babel/plugin-syntax-jsx": "~7.2.0",
-    "@babel/plugin-transform-react-jsx": "~7.3.0",
+    "@babel/plugin-transform-react-jsx": "~7.14.9",
     "@babel/plugin-transform-runtime": "~7.4.4",
-    "@babel/preset-env": "~7.3.4",
+    "@babel/preset-env": "~7.16.0",
     "@pmmmwh/react-refresh-webpack-plugin": "0.4.1",
     "@storybook/react": "~6.3.7",
     "@testing-library/react-hooks": "~5.0.3",
     "babel-core": "~7.0.0-bridge.0",
     "babel-jest": "~24.1.0",
     "babel-loader": "~8.0.5",
-    "babel-plugin-dynamic-import-node": "~2.2.0",
+    "babel-plugin-dynamic-import-node": "~2.3.3",
     "babel-plugin-graphql-tag": "~2.0.0",
+    "babel-plugin-react-remove-properties": "~0.3.0",
     "identity-obj-proxy": "~3.0.0",
     "react": "~17.0.1",
     "react-intl": "~5.20.0",
@@ -74,13 +77,13 @@
     "redux": "~4.0.1"
   },
   "peerDependencies": {
-    "@apollo/client": "~3.1.2",
-    "@magento/babel-preset-peregrine": "~1.1.0",
-    "@magento/peregrine": "~12.0.0",
-    "@magento/pwa-buildpack": "~11.0.0",
+    "@apollo/client": "~3.4.0",
+    "@magento/babel-preset-peregrine": "1.2.0-alpha.1",
+    "@magento/peregrine": "12.2.0-alpha.1",
+    "@magento/pwa-buildpack": "11.1.0-alpha.1",
     "apollo-cache-persist": "~0.1.1",
     "braintree-web-drop-in": "~1.16.0",
-    "graphql": "~15.3.0",
+    "graphql": "~15.5.0",
     "react": "~17.0.1",
     "react-intl": "~5.20.0",
     "react-redux": "~7.2.2",