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

package/lib/components/MegaMenu/__tests__/__snapshots__/Submenu.spec.js.snap

@@ -30,6 +30,7 @@ exports[`Submenu renders correctly it renders correctly 1`] = `
         }
       }
       categoryUrlSuffix=".html"
+      handleCloseSubMenu={[MockFunction handleCloseSubMenu]}
       index={0}
       keyboardProps={Object {}}
     />
@@ -44,6 +45,7 @@ exports[`Submenu renders correctly it renders correctly 1`] = `
         }
       }
       categoryUrlSuffix=".html"
+      handleCloseSubMenu={[MockFunction handleCloseSubMenu]}
       index={1}
       keyboardProps={
         Object {

package/lib/components/MegaMenu/megaMenu.js

@@ -20,7 +20,8 @@ const MegaMenu = props => {
         disableFocus,
         handleSubMenuFocus,
         categoryUrlSuffix,
-        handleNavigate
+        handleNavigate,
+        handleClickOutside
     } = useMegaMenu({ mainNavRef });
 
     const classes = useStyle(defaultClasses, props.classes);
@@ -57,9 +58,11 @@ const MegaMenu = props => {
                       categoryUrlSuffix={categoryUrlSuffix}
                       mainNavWidth={mainNavWidth}
                       onNavigate={handleNavigate}
-                      key={category.id}
+                      key={category.uid}
                       subMenuState={subMenuState}
                       disableFocus={disableFocus}
+                      handleSubMenuFocus={handleSubMenuFocus}
+                      handleClickOutside={handleClickOutside}
                   />
               );
           })
@@ -69,6 +72,7 @@ const MegaMenu = props => {
         <nav
             ref={mainNavRef}
             className={classes.megaMenu}
+            data-cy="MegaMenu-megaMenu"
             role="navigation"
             onFocus={handleSubMenuFocus}
         >

package/lib/components/MegaMenu/megaMenu.module.css

@@ -1,15 +1,12 @@
 .megaMenu {
-    align-items: center;
-    align-self: center;
-    display: none;
-    grid-column: 3 / 4;
-    grid-row: 1 / 1;
-    justify-content: center;
-    margin: 0 auto;
+    composes: col-end-10 from global;
+    composes: col-start-3 from global;
+    composes: flex-grow from global;
+    composes: hidden from global;
+    composes: justify-self-center from global;
 }
 
-@media (min-width: 1024px) {
-    .megaMenu {
-        display: flex;
-    }
+/* Large screen styles */
+.megaMenu {
+    composes: lg_flex from global;
 }

package/lib/components/MegaMenu/megaMenuItem.js

@@ -15,7 +15,7 @@ import Icon from '../Icon';
  * The MegaMenuItem component displays mega menu item
  *
  * @param {MegaMenuCategory} props.category
- * @param {int} props.activeCategoryId - id of active category
+ * @param {String} props.activeCategoryId - uid of active category
  * @param {int} props.mainNavWidth - width of the main nav. It's used for setting min-width of the submenu
  * @param {function} props.onNavigate - function called when clicking on Link
  */
@@ -27,7 +27,9 @@ const MegaMenuItem = props => {
         categoryUrlSuffix,
         subMenuState,
         disableFocus,
-        onNavigate
+        onNavigate,
+        handleSubMenuFocus,
+        handleClickOutside
     } = props;
 
     const classes = useStyle(defaultClasses, props.classes);
@@ -45,6 +47,7 @@ const MegaMenuItem = props => {
     const {
         isFocused,
         isActive,
+        handleMenuItemFocus,
         handleCloseSubMenu,
         isMenuActive,
         handleKeyDown
@@ -89,13 +92,29 @@ const MegaMenuItem = props => {
         : {};
 
     return (
-        <div className={megaMenuItemClassname}>
+        <div
+            className={megaMenuItemClassname}
+            data-cy="MegaMenu-MegaMenuItem-megaMenuItem"
+            onMouseEnter={() => {
+                handleSubMenuFocus();
+                handleMenuItemFocus();
+            }}
+            onTouchStart={() => {
+                handleSubMenuFocus();
+                handleMenuItemFocus();
+            }}
+            onMouseLeave={e => {
+                handleClickOutside(e);
+                handleCloseSubMenu();
+            }}
+        >
             <Link
                 {...linkAttributes}
                 onKeyDown={handleKeyDown}
                 className={
                     isActive ? classes.megaMenuLinkActive : classes.megaMenuLink
                 }
+                data-cy="MegaMenu-MegaMenuItem-link"
                 to={categoryUrl}
                 onClick={onNavigate}
             >
@@ -112,7 +131,7 @@ export default MegaMenuItem;
 MegaMenuItem.propTypes = {
     category: PropTypes.shape({
         children: PropTypes.array,
-        id: PropTypes.number.isRequired,
+        uid: PropTypes.string.isRequired,
         include_in_menu: PropTypes.number,
         isActive: PropTypes.bool.isRequired,
         name: PropTypes.string.isRequired,
@@ -120,8 +139,10 @@ MegaMenuItem.propTypes = {
         position: PropTypes.number.isRequired,
         url_path: PropTypes.string.isRequired
     }).isRequired,
-    activeCategoryId: PropTypes.number,
+    activeCategoryId: PropTypes.string,
     mainNavWidth: PropTypes.number.isRequired,
     categoryUrlSuffix: PropTypes.string,
-    onNavigate: PropTypes.func.isRequired
+    onNavigate: PropTypes.func.isRequired,
+    handleSubMenuFocus: PropTypes.func.isRequired,
+    handleClickOutside: PropTypes.func.isRequired
 };

package/lib/components/MegaMenu/megaMenuItem.module.css

@@ -13,11 +13,6 @@
     text-decoration: underline;
 }
 
-.megaMenuItem:hover > div,
-.megaMenuItem:focus > div {
-    display: flex;
-}
-
 .megaMenuItem_active {
     composes: megaMenuItem;
     display: flex;

package/lib/components/MegaMenu/submenu.js

@@ -46,10 +46,11 @@ const Submenu = props => {
             <SubmenuColumn
                 index={index}
                 keyboardProps={keyboardProps}
-                key={category.id}
+                key={category.uid}
                 category={category}
                 categoryUrlSuffix={categoryUrlSuffix}
                 onNavigate={onNavigate}
+                handleCloseSubMenu={handleCloseSubMenu}
             />
         );
     });
@@ -72,7 +73,7 @@ Submenu.propTypes = {
     items: PropTypes.arrayOf(
         PropTypes.shape({
             children: PropTypes.array.isRequired,
-            id: PropTypes.number.isRequired,
+            uid: PropTypes.string.isRequired,
             include_in_menu: PropTypes.number.isRequired,
             isActive: PropTypes.bool.isRequired,
             name: PropTypes.string.isRequired,
@@ -83,5 +84,6 @@ Submenu.propTypes = {
     ).isRequired,
     mainNavWidth: PropTypes.number.isRequired,
     categoryUrlSuffix: PropTypes.string,
-    onNavigate: PropTypes.func.isRequired
+    onNavigate: PropTypes.func.isRequired,
+    handleCloseSubMenu: PropTypes.func.isRequired
 };

package/lib/components/MegaMenu/submenuColumn.js

@@ -14,7 +14,12 @@ import PropTypes from 'prop-types';
  * @param {function} props.onNavigate - function called when clicking on Link
  */
 const SubmenuColumn = props => {
-    const { category, categoryUrlSuffix, onNavigate } = props;
+    const {
+        category,
+        categoryUrlSuffix,
+        onNavigate,
+        handleCloseSubMenu
+    } = props;
     const classes = useStyle(defaultClasses, props.classes);
 
     const categoryUrl = resourceUrl(
@@ -40,6 +45,7 @@ const SubmenuColumn = props => {
                     <Link
                         {...keyboardProps}
                         className={isActive ? classes.linkActive : classes.link}
+                        data-cy="MegaMenu-SubmenuColumn-link"
                         to={categoryUrl}
                         onClick={onNavigate}
                     >
@@ -60,8 +66,12 @@ const SubmenuColumn = props => {
             <Link
                 {...keyboardProps}
                 className={classes.link}
+                data-cy="MegaMenu-SubmenuColumn-link"
                 to={categoryUrl}
-                onClick={onNavigate}
+                onClick={() => {
+                    handleCloseSubMenu();
+                    onNavigate();
+                }}
             >
                 <span className={classes.heading}>{category.name}</span>
             </Link>
@@ -75,7 +85,7 @@ export default SubmenuColumn;
 SubmenuColumn.propTypes = {
     category: PropTypes.shape({
         children: PropTypes.array,
-        id: PropTypes.number.isRequired,
+        uid: PropTypes.string.isRequired,
         include_in_menu: PropTypes.number,
         isActive: PropTypes.bool.isRequired,
         name: PropTypes.string.isRequired,
@@ -84,5 +94,6 @@ SubmenuColumn.propTypes = {
         url_path: PropTypes.string.isRequired
     }).isRequired,
     categoryUrlSuffix: PropTypes.string,
-    onNavigate: PropTypes.func.isRequired
+    onNavigate: PropTypes.func.isRequired,
+    handleCloseSubMenu: PropTypes.func.isRequired
 };

package/lib/components/MiniCart/ProductList/__tests__/__snapshots__/item.spec.js.snap

@@ -67,7 +67,7 @@ exports[`Should disable delete icon while loading 1`] = `
     className="quantity"
   >
     <mock-FormattedMessage
-      defaultMessage="Qty :"
+      defaultMessage="Qty : {quantity}"
       id="productList.quantity"
       values={
         Object {
@@ -213,7 +213,7 @@ exports[`Should render correctly 1`] = `
     className="quantity"
   >
     <mock-FormattedMessage
-      defaultMessage="Qty :"
+      defaultMessage="Qty : {quantity}"
       id="productList.quantity"
       values={
         Object {
@@ -359,7 +359,7 @@ exports[`Should render correctly when configured to use variant thumbnail 1`] =
     className="quantity"
   >
     <mock-FormattedMessage
-      defaultMessage="Qty :"
+      defaultMessage="Qty : {quantity}"
       id="productList.quantity"
       values={
         Object {
@@ -505,7 +505,7 @@ exports[`Should render correctly with out of stock product 1`] = `
     className="quantity"
   >
     <mock-FormattedMessage
-      defaultMessage="Qty :"
+      defaultMessage="Qty : {quantity}"
       id="productList.quantity"
       values={
         Object {

package/lib/components/MiniCart/ProductList/item.js

@@ -20,7 +20,7 @@ const Item = props => {
     const {
         classes: propClasses,
         product,
-        id,
+        uid,
         quantity,
         configurable_options,
         handleRemoveItem,
@@ -45,7 +45,7 @@ const Item = props => {
             : '';
 
     const { isDeleting, removeItem } = useItem({
-        id,
+        uid,
         handleRemoveItem
     });
 
@@ -53,11 +53,12 @@ const Item = props => {
     const configured_variant = configuredVariant(configurable_options, product);
 
     return (
-        <div className={rootClass}>
+        <div className={rootClass} data-cy="MiniCart-Item-root">
             <Link
                 className={classes.thumbnailContainer}
                 to={itemLink}
                 onClick={closeMiniCart}
+                data-cy="item-thumbnailContainer"
             >
                 <Image
                     alt={product.name}
@@ -77,6 +78,7 @@ const Item = props => {
                 className={classes.name}
                 to={itemLink}
                 onClick={closeMiniCart}
+                data-cy="item-name"
             >
                 {product.name}
             </Link>
@@ -89,7 +91,7 @@ const Item = props => {
             <span className={classes.quantity}>
                 <FormattedMessage
                     id={'productList.quantity'}
-                    defaultMessage={'Qty :'}
+                    defaultMessage={'Qty : {quantity}'}
                     values={{ quantity }}
                 />
             </span>
@@ -109,6 +111,7 @@ const Item = props => {
                 type="button"
                 className={classes.deleteButton}
                 disabled={isDeleting}
+                data-cy="MiniCart-Item-deleteButton"
             >
                 <Icon
                     size={16}

package/lib/components/MiniCart/ProductList/productList.js

@@ -38,7 +38,11 @@ const ProductList = props => {
         storeUrlSuffix
     ]);
 
-    return <div className={classes.root}>{cartItems}</div>;
+    return (
+        <div className={classes.root} data-cy="MiniCart-ProductList-root">
+            {cartItems}
+        </div>
+    );
 };
 
 export default ProductList;

package/lib/components/MiniCart/__tests__/__snapshots__/miniCart.spec.js.snap

@@ -46,7 +46,7 @@ exports[`it renders correctly 1`] = `
         className="quantity"
       >
         <mock-FormattedMessage
-          defaultMessage="Items"
+          defaultMessage="{totalQuantity} Items"
           id="miniCart.totalQuantity"
           values={
             Object {

package/lib/components/MiniCart/miniCart.gql.js

@@ -18,9 +18,10 @@ export const MINI_CART_QUERY = gql`
 `;
 
 export const REMOVE_ITEM_MUTATION = gql`
-    mutation RemoveItemForMiniCart($cartId: String!, $itemId: Int!) {
-        removeItemFromCart(input: { cart_id: $cartId, cart_item_id: $itemId })
-            @connection(key: "removeItemFromCart") {
+    mutation RemoveItemForMiniCart($cartId: String!, $itemId: ID!) {
+        removeItemFromCart(
+            input: { cart_id: $cartId, cart_item_uid: $itemId }
+        ) {
             cart {
                 id
                 ...MiniCartFragment

package/lib/components/MiniCart/miniCart.js

@@ -83,7 +83,7 @@ const MiniCart = React.forwardRef((props, ref) => {
             <span className={quantityClassName}>
                 <FormattedMessage
                     id={'miniCart.totalQuantity'}
-                    defaultMessage={'Items'}
+                    defaultMessage={'{totalQuantity} Items'}
                     values={{ totalQuantity }}
                 />
             </span>
@@ -104,7 +104,10 @@ const MiniCart = React.forwardRef((props, ref) => {
 
     const contents = isCartEmpty ? (
         <div className={classes.emptyCart}>
-            <div className={classes.emptyMessage}>
+            <div
+                className={classes.emptyMessage}
+                data-cy="MiniCart-emptyMessage"
+            >
                 <FormattedMessage
                     id={'miniCart.emptyMessage'}
                     defaultMessage={'There are no items in your cart.'}
@@ -114,7 +117,7 @@ const MiniCart = React.forwardRef((props, ref) => {
     ) : (
         <Fragment>
             <div className={classes.header}>{header}</div>
-            <div className={classes.body}>
+            <div className={classes.body} data-cy="MiniCart-body">
                 <ProductList
                     items={productList}
                     loading={loading}
@@ -130,6 +133,7 @@ const MiniCart = React.forwardRef((props, ref) => {
                     priority="high"
                     className={classes.checkoutButton}
                     disabled={loading || isCartEmpty}
+                    data-cy="Minicart-checkoutButton"
                 >
                     <Icon
                         size={16}
@@ -148,6 +152,7 @@ const MiniCart = React.forwardRef((props, ref) => {
                     priority="high"
                     className={classes.editCartButton}
                     disabled={loading || isCartEmpty}
+                    data-cy="Minicart-editCartButton"
                 >
                     <FormattedMessage
                         id={'miniCart.editCartButton'}
@@ -159,7 +164,7 @@ const MiniCart = React.forwardRef((props, ref) => {
     );
 
     return (
-        <aside className={rootClass}>
+        <aside className={rootClass} data-cy="MiniCart-root">
             <div ref={ref} className={contentsClass}>
                 {contents}
             </div>

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

@@ -10,7 +10,7 @@ export const RESET_PASSWORD_MUTATION = gql`
             email: $email
             resetPasswordToken: $token
             newPassword: $newPassword
-        ) @connection(key: "resetPassword")
+        )
     }
 `;
 

package/lib/components/Newsletter/__tests__/__snapshots__/newsletter.shimmer.spec.js.snap

@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="root"
+>
+  <div
+    className="root_rectangle"
+    style={Object {}}
+  />
+  <div
+    className="root_rectangle"
+    style={Object {}}
+  />
+  <div
+    className="root_rectangle"
+    style={
+      Object {
+        "width": "50%",
+      }
+    }
+  />
+  <div
+    className="form"
+  >
+    <div
+      className="root_textInput"
+      style={Object {}}
+    />
+    <div
+      className="buttonsContainer"
+    >
+      <div
+        className="root_button"
+        style={Object {}}
+      />
+    </div>
+  </div>
+</div>
+`;

package/lib/components/Newsletter/__tests__/__snapshots__/newsletter.spec.js.snap

@@ -0,0 +1,173 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`#Newsletter display it does not display when disabled 1`] = `null`;
+
+exports[`#Newsletter display it renders shimmer while loading config 1`] = `<NewsletterShimmer />`;
+
+exports[`#Newsletter display renders correctly 1`] = `
+<div
+  className="root"
+>
+  <span
+    className="title"
+  >
+    <mock-FormattedMessage
+      defaultMessage="Subscribe to Venia"
+      id="newsletter.titleText"
+    />
+  </span>
+  <p
+    className="newsletter_text"
+  >
+    <mock-FormattedMessage
+      defaultMessage="Recieve the latest news, update and special offers right to your inbox."
+      id="newsletter.infoText"
+    />
+  </p>
+  <FormError
+    allowErrorMessages={true}
+    errors={Array []}
+  />
+  <form
+    className="form"
+    onKeyDown={[Function]}
+    onReset={[Function]}
+    onSubmit={[Function]}
+  >
+    <div
+      className="root"
+    >
+      <label
+        className="label"
+        htmlFor="email"
+      >
+        Email
+      </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>
+    <i />
+    <div
+      className="buttonsContainer"
+    >
+      <i />
+    </div>
+  </form>
+</div>
+`;
+
+exports[`#Newsletter submit displays an error message if the email already subscribed 1`] = `
+<div
+  className="root"
+>
+  <span
+    className="title"
+  >
+    <mock-FormattedMessage
+      defaultMessage="Subscribe to Venia"
+      id="newsletter.titleText"
+    />
+  </span>
+  <p
+    className="newsletter_text"
+  >
+    <mock-FormattedMessage
+      defaultMessage="Recieve the latest news, update and special offers right to your inbox."
+      id="newsletter.infoText"
+    />
+  </p>
+  <FormError
+    allowErrorMessages={true}
+    errors={
+      Array [
+        "This email address is already subscribed.",
+      ]
+    }
+  />
+  <form
+    className="form"
+    onKeyDown={[Function]}
+    onReset={[Function]}
+    onSubmit={[Function]}
+  >
+    <div
+      className="root"
+    >
+      <label
+        className="label"
+        htmlFor="email"
+      >
+        Email
+      </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>
+    <i />
+    <div
+      className="buttonsContainer"
+    >
+      <i />
+    </div>
+  </form>
+</div>
+`;

package/lib/components/Newsletter/__tests__/newsletter.shimmer.spec.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { createTestInstance } from '@magento/peregrine';
+import NewsletterShimmer from '../newsletter.shimmer';
+
+jest.mock('../../../classify');
+
+test('renders correctly', () => {
+    const component = createTestInstance(<NewsletterShimmer />);
+    expect(component.toJSON()).toMatchSnapshot();
+});