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

package/lib/components/Header/cartTrigger.js

@@ -44,7 +44,9 @@ const CartTrigger = props => {
         : classes.triggerContainer;
 
     const maybeItemCounter = itemCount ? (
-        <span className={classes.counter}>{itemCountDisplay}</span>
+        <span className={classes.counter} data-cy="CartTrigger-counter">
+            {itemCountDisplay}
+        </span>
     ) : null;
 
     const cartTrigger = hideCartTrigger ? null : (
@@ -57,6 +59,7 @@ const CartTrigger = props => {
                     aria-label={buttonAriaLabel}
                     className={classes.trigger}
                     onClick={handleTriggerClick}
+                    data-cy="CartTrigger-trigger"
                 >
                     <Icon src={ShoppingCartIcon} />
                     {maybeItemCounter}

package/lib/components/Header/header.js

@@ -56,7 +56,7 @@ const Header = props => {
                     <CurrencySwitcher />
                 </div>
             </div>
-            <header className={rootClass}>
+            <header className={rootClass} data-cy="Header-root">
                 <div className={classes.toolbar}>
                     <div className={classes.primaryActions}>
                         <NavTrigger />

package/lib/components/Header/navTrigger.js

@@ -19,6 +19,7 @@ const NavigationTrigger = props => {
     return (
         <button
             className={classes.root}
+            data-cy="Header-NavigationTrigger-root"
             aria-label={formatMessage({
                 id: 'navigationTrigger.ariaLabel',
                 defaultMessage: 'Toggle navigation panel'

package/lib/components/Header/searchTrigger.js

@@ -30,6 +30,7 @@ const SearchTrigger = React.forwardRef((props, ref) => {
     return (
         <button
             className={searchClass}
+            data-cy="SearchTrigger-button"
             aria-label={searchText}
             onClick={handleClick}
             ref={ref}

package/lib/components/LegacyMiniCart/cartOptions.gql.js

@@ -3,8 +3,9 @@ import { CartPageFragment } from '@magento/peregrine/lib/talons/CartPage/cartPag
 
 export const REMOVE_ITEM_MUTATION = gql`
     mutation RemoveItemForOptions($cartId: String!, $itemId: ID!) {
-        removeItemFromCart(input: { cart_id: $cartId, cart_item_uid: $itemId })
-            @connection(key: "removeItemFromCart") {
+        removeItemFromCart(
+            input: { cart_id: $cartId, cart_item_uid: $itemId }
+        ) {
             cart {
                 id
                 # If this mutation causes "free" to become available we need to know.
@@ -30,7 +31,7 @@ export const UPDATE_ITEM_MUTATION = gql`
                 cart_id: $cartId
                 cart_items: [{ cart_item_uid: $itemId, quantity: $quantity }]
             }
-        ) @connection(key: "updateCartItems") {
+        ) {
             cart {
                 id
                 # If this mutation causes "free" to become available we need to know.

package/lib/components/LegacyMiniCart/editFormFragment.gql.js

@@ -1,17 +1,20 @@
 import { gql } from '@apollo/client';
 
 export const EditFormFragment = gql`
+    # eslint-disable-next-line @graphql-eslint/require-id-when-available
     fragment EditFormFragment on ProductInterface {
-        id
+        uid
         name
         sku
         url_key
         __typename
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         ... on ConfigurableProduct {
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
             configurable_options {
                 attribute_code
                 attribute_id
-                id
+                uid
                 label
                 values {
                     default_label
@@ -32,8 +35,9 @@ export const EditFormFragment = gql`
                     code
                     value_index
                 }
+                # eslint-disable-next-line @graphql-eslint/require-id-when-available
                 product {
-                    id
+                    uid
                     media_gallery_entries {
                         id
                         disabled

package/lib/components/LegacyMiniCart/kebab.js

@@ -18,6 +18,7 @@ const Kebab = props => {
         <div className={classes.root}>
             <button
                 className={classes.kebab}
+                data-cy="Kebab-button"
                 onClick={handleKebabClick}
                 ref={kebabRef}
             >

package/lib/components/LegacyMiniCart/productOptions.js

@@ -19,7 +19,12 @@ const ProductOptions = props => {
                         <dt className={classes.optionName}>
                             {optionLabelString}
                         </dt>
-                        <dd className={classes.optionValue}>{value_label}</dd>
+                        <dd
+                            className={classes.optionValue}
+                            data-cy="ProductOptions-optionValue"
+                        >
+                            {value_label}
+                        </dd>
                     </div>
                 );
             }),

package/lib/components/LegacyMiniCart/section.js

@@ -17,9 +17,16 @@ const icons = new Map()
     .set('Trash', TrashIcon);
 
 const Section = props => {
-    const { icon, isFilled, onClick, text } = props;
-
-    const classes = useStyle(defaultClasses, props.classes);
+    const {
+        icon,
+        isFilled,
+        onClick,
+        text,
+        classes: propClasses,
+        ...restProps
+    } = props;
+
+    const classes = useStyle(defaultClasses, propClasses);
     const iconClasses = { root: classes.icon };
     const iconSrc = icons.get(icon);
 
@@ -28,8 +35,11 @@ const Section = props => {
     }
 
     return (
-        <li className={classes.menuItem}>
-            <button onMouseDown={onClick}>
+        <li className={classes.menuItem} {...restProps}>
+            <button
+                onMouseDown={onClick}
+                data-cy="LegacyMiniCart-Section-button"
+            >
                 <Icon classes={iconClasses} size={16} src={iconSrc} />
                 <span className={classes.text}>{text}</span>
             </button>

package/lib/components/Link/link.js

@@ -10,11 +10,13 @@ const removeProps = (props, exclude) => {
 };
 
 /**
- * Use for links to pages within your app.
- *
  * @kind functional component
- * @param {props} props React component props
- * @returns {RouterLink} the `Link` component from `react-router-dom`. We add a `ref` to prefetch pages when the link enters the viewport.
+ *
+ * @property {bool} prefetchType `true` activates prefetching the target page when the link becomes visible in the viewport.
+ * @property {string} to From [react-router-dom Link](https://knowbody.github.io/react-router-docs/api/Link.html). The absolute path to the target page of the link. Uses the `to` prop from the `react-router-dom Link`.
+ *
+ * @example <caption>Basic usage</caption>
+ * <Link prefetchType={true} to="/about/">About Us</Link>
  */
 const Link = props => {
     const talonProps = useLink(props);

package/lib/components/Mask/mask.js

@@ -13,11 +13,11 @@ import defaultClasses from './mask.module.css';
  *
  */
 const Mask = props => {
-    const { dismiss, isActive } = props;
-    const classes = useStyle(defaultClasses, props.classes);
+    const { dismiss, isActive, classes: propClasses, ...restProps } = props;
+    const classes = useStyle(defaultClasses, propClasses);
     const className = isActive ? classes.root_active : classes.root;
 
-    return <button className={className} onClick={dismiss} />;
+    return <button className={className} onClick={dismiss} {...restProps} />;
 };
 
 export default Mask;

package/lib/components/MegaMenu/__tests__/MegaMenuItem.spec.js

@@ -29,6 +29,7 @@ jest.mock('@magento/peregrine/lib/talons/MegaMenu/useMegaMenuItem', () => ({
         return {
             isFocused: false,
             isActive: false,
+            handleMenuItemFocus: jest.fn(),
             handleCloseSubMenu: jest.fn(),
             isMenuActive: false,
             handleKeyDown: mockHandleKeyDown

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

@@ -14,6 +14,9 @@ exports[`#MegaMenu renders menu if in viewport 1`] = `
 >
   <div
     className="megaMenuItem"
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onTouchStart={[Function]}
   >
     <a
       aria-label="Category: Women. 1 sub-categories"
@@ -76,6 +79,9 @@ exports[`#MegaMenu renders menu if in viewport 1`] = `
   </div>
   <div
     className="megaMenuItem"
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onTouchStart={[Function]}
   >
     <a
       className="megaMenuLink"
@@ -88,6 +94,9 @@ exports[`#MegaMenu renders menu if in viewport 1`] = `
   </div>
   <div
     className="megaMenuItem"
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onTouchStart={[Function]}
   >
     <a
       className="megaMenuLink"

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

@@ -3,6 +3,9 @@
 exports[`Mega menu item renders correctly it does not render submenu when item does not have children 1`] = `
 <div
   className="megaMenuItem"
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onTouchStart={[Function]}
 >
   <mock-Submenu
     categoryUrlSuffix=".html"
@@ -34,6 +37,9 @@ exports[`Mega menu item renders correctly it does not render submenu when item d
 exports[`Mega menu item renders correctly it renders correctly 1`] = `
 <div
   className="megaMenuItem"
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onTouchStart={[Function]}
 >
   <mock-Submenu
     categoryUrlSuffix=".html"

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/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/__tests__/__snapshots__/productList.spec.js.snap

@@ -7,12 +7,12 @@ exports[`Should render properly 1`] = `
   <Item
     closeMiniCart={[MockFunction closeMiniCart]}
     handleRemoveItem={[MockFunction handleRemoveItem]}
-    id="1"
     product={
       Object {
         "name": "Simple Product",
       }
     }
+    uid="1"
   />
 </div>
 `;

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

@@ -15,7 +15,7 @@ const props = {
     handleRemoveItem: jest.fn().mockName('handleRemoveItem'),
     items: [
         {
-            id: '1',
+            uid: '1',
             product: {
                 name: 'Simple Product'
             }

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

@@ -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

@@ -21,7 +21,7 @@ const ProductList = props => {
         if (items) {
             return items.map(item => (
                 <Item
-                    key={item.id}
+                    key={item.uid}
                     {...item}
                     closeMiniCart={closeMiniCart}
                     handleRemoveItem={handleRemoveItem}
@@ -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

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