@magento/venia-ui 8.0.0-alpha.6 → 9.0.0-alpha.3

package/lib/components/MegaMenu/megaMenu.js

@@ -1,18 +1,34 @@
-import React, { useRef, useState, useEffect } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+
+import { useIsInViewport } from '@magento/peregrine/lib/hooks/useIsInViewport';
 import { useMegaMenu } from '@magento/peregrine/lib/talons/MegaMenu/useMegaMenu';
-import { useStyle } from '../../classify';
-import defaultClasses from './megaMenu.css';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
 import MegaMenuItem from './megaMenuItem';
+import defaultClasses from './megaMenu.module.css';
 
 /**
  * The MegaMenu component displays menu with categories on desktop devices
  */
 const MegaMenu = props => {
-    const { megaMenuData, activeCategoryId } = useMegaMenu();
+    const mainNavRef = useRef(null);
+
+    const {
+        megaMenuData,
+        activeCategoryId,
+        subMenuState,
+        disableFocus,
+        handleSubMenuFocus,
+        categoryUrlSuffix,
+        handleNavigate
+    } = useMegaMenu({ mainNavRef });
+
     const classes = useStyle(defaultClasses, props.classes);
 
-    const mainNavRef = useRef(null);
     const [mainNavWidth, setMainNavWidth] = useState(0);
+    const shouldRenderItems = useIsInViewport({
+        elementRef: mainNavRef
+    });
 
     useEffect(() => {
         const handleResize = () => {
@@ -38,16 +54,25 @@ const MegaMenu = props => {
                   <MegaMenuItem
                       category={category}
                       activeCategoryId={activeCategoryId}
+                      categoryUrlSuffix={categoryUrlSuffix}
                       mainNavWidth={mainNavWidth}
+                      onNavigate={handleNavigate}
                       key={category.id}
+                      subMenuState={subMenuState}
+                      disableFocus={disableFocus}
                   />
               );
           })
         : null;
 
     return (
-        <nav ref={mainNavRef} className={classes.megaMenu} role="navigation">
-            {items}
+        <nav
+            ref={mainNavRef}
+            className={classes.megaMenu}
+            role="navigation"
+            onFocus={handleSubMenuFocus}
+        >
+            {shouldRenderItems ? items : null}
         </nav>
     );
 };

package/lib/components/MegaMenu/megaMenuItem.js

@@ -1,10 +1,15 @@
-import React from 'react';
+import React, { useMemo } from 'react';
+import { ChevronDown as ArrowDown } from 'react-feather';
 import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+
 import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+import { useMegaMenuItem } from '@magento/peregrine/lib/talons/MegaMenu/useMegaMenuItem';
+
 import { useStyle } from '../../classify';
-import defaultClasses from './megaMenuItem.css';
+import defaultClasses from './megaMenuItem.module.css';
 import Submenu from './submenu';
-import PropTypes from 'prop-types';
+import Icon from '../Icon';
 
 /**
  * The MegaMenuItem component displays mega menu item
@@ -12,28 +17,90 @@ import PropTypes from 'prop-types';
  * @param {MegaMenuCategory} props.category
  * @param {int} props.activeCategoryId - id 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
  */
 const MegaMenuItem = props => {
-    const { activeCategoryId, category, mainNavWidth } = props;
+    const {
+        activeCategoryId,
+        category,
+        mainNavWidth,
+        categoryUrlSuffix,
+        subMenuState,
+        disableFocus,
+        onNavigate
+    } = props;
+
     const classes = useStyle(defaultClasses, props.classes);
     const categoryUrl = resourceUrl(
-        `/${category.url_path}${category.url_suffix || ''}`
+        `/${category.url_path}${categoryUrlSuffix || ''}`
     );
 
-    const children = category.children.length ? (
-        <Submenu items={category.children} mainNavWidth={mainNavWidth} />
+    const talonProps = useMegaMenuItem({
+        category,
+        activeCategoryId,
+        subMenuState,
+        disableFocus
+    });
+
+    const {
+        isFocused,
+        isActive,
+        handleCloseSubMenu,
+        isMenuActive,
+        handleKeyDown
+    } = talonProps;
+
+    const megaMenuItemClassname = isMenuActive
+        ? classes.megaMenuItem_active
+        : classes.megaMenuItem;
+
+    const children = useMemo(() => {
+        return category.children.length ? (
+            <Submenu
+                isFocused={isFocused}
+                subMenuState={subMenuState}
+                items={category.children}
+                mainNavWidth={mainNavWidth}
+                handleCloseSubMenu={handleCloseSubMenu}
+                categoryUrlSuffix={categoryUrlSuffix}
+                onNavigate={onNavigate}
+            />
+        ) : null;
+    }, [
+        category,
+        isFocused,
+        mainNavWidth,
+        subMenuState,
+        handleCloseSubMenu,
+        categoryUrlSuffix,
+        onNavigate
+    ]);
+
+    const maybeDownArrowIcon = category.children.length ? (
+        <Icon className={classes.arrowDown} src={ArrowDown} size={16} />
     ) : null;
-    const isActive = category.id === activeCategoryId;
+
+    const linkAttributes = category.children.length
+        ? {
+              'aria-label': `Category: ${category.name}. ${
+                  category.children.length
+              } sub-categories`
+          }
+        : {};
 
     return (
-        <div className={classes.megaMenuItem}>
+        <div className={megaMenuItemClassname}>
             <Link
+                {...linkAttributes}
+                onKeyDown={handleKeyDown}
                 className={
                     isActive ? classes.megaMenuLinkActive : classes.megaMenuLink
                 }
                 to={categoryUrl}
+                onClick={onNavigate}
             >
                 {category.name}
+                {maybeDownArrowIcon}
             </Link>
             {children}
         </div>
@@ -51,9 +118,10 @@ MegaMenuItem.propTypes = {
         name: PropTypes.string.isRequired,
         path: PropTypes.array.isRequired,
         position: PropTypes.number.isRequired,
-        url_path: PropTypes.string.isRequired,
-        url_suffix: PropTypes.string
+        url_path: PropTypes.string.isRequired
     }).isRequired,
     activeCategoryId: PropTypes.number,
-    mainNavWidth: PropTypes.number.isRequired
+    mainNavWidth: PropTypes.number.isRequired,
+    categoryUrlSuffix: PropTypes.string,
+    onNavigate: PropTypes.func.isRequired
 };

package/lib/components/MegaMenu/{megaMenuItem.css → megaMenuItem.module.css}

@@ -18,6 +18,16 @@
     display: flex;
 }
 
+.megaMenuItem_active {
+    composes: megaMenuItem;
+    display: flex;
+}
+
+.arrowDown {
+    padding-left: 0.5rem;
+    line-height: 0;
+}
+
 .megaMenuItem:hover .megaMenuLink,
 .megaMenuItem:focus .megaMenuLink {
     text-decoration: underline;

package/lib/components/MegaMenu/submenu.js

@@ -1,26 +1,61 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+
+import { useSubMenu } from '@magento/peregrine/lib/talons/MegaMenu/useSubMenu';
+
 import { useStyle } from '../../classify';
-import defaultClasses from './submenu.css';
+import defaultClasses from './submenu.module.css';
 import SubmenuColumn from './submenuColumn';
-import PropTypes from 'prop-types';
 
 /**
  * The Submenu component displays submenu in mega menu
  *
  * @param {array} props.items - categories to display
  * @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
  */
 const Submenu = props => {
-    const { items, mainNavWidth } = props;
+    const {
+        items,
+        mainNavWidth,
+        isFocused,
+        subMenuState,
+        handleCloseSubMenu,
+        categoryUrlSuffix,
+        onNavigate
+    } = props;
     const PADDING_OFFSET = 20;
     const classes = useStyle(defaultClasses, props.classes);
 
-    const subMenus = items.map(category => {
-        return <SubmenuColumn category={category} key={category.id} />;
+    const talonProps = useSubMenu({
+        isFocused,
+        subMenuState,
+        handleCloseSubMenu
+    });
+
+    const { isSubMenuActive } = talonProps;
+
+    const subMenuClassname = isSubMenuActive
+        ? classes.submenu_active
+        : classes.submenu;
+
+    const subMenus = items.map((category, index) => {
+        const keyboardProps =
+            index === items.length - 1 ? talonProps.keyboardProps : {};
+        return (
+            <SubmenuColumn
+                index={index}
+                keyboardProps={keyboardProps}
+                key={category.id}
+                category={category}
+                categoryUrlSuffix={categoryUrlSuffix}
+                onNavigate={onNavigate}
+            />
+        );
     });
 
     return (
-        <div className={classes.submenu}>
+        <div className={subMenuClassname}>
             <div
                 className={classes.submenuItems}
                 style={{ minWidth: mainNavWidth + PADDING_OFFSET }}
@@ -43,9 +78,10 @@ Submenu.propTypes = {
             name: PropTypes.string.isRequired,
             path: PropTypes.array.isRequired,
             position: PropTypes.number.isRequired,
-            url_path: PropTypes.string.isRequired,
-            url_suffix: PropTypes.string
+            url_path: PropTypes.string.isRequired
         })
     ).isRequired,
-    mainNavWidth: PropTypes.number.isRequired
+    mainNavWidth: PropTypes.number.isRequired,
+    categoryUrlSuffix: PropTypes.string,
+    onNavigate: PropTypes.func.isRequired
 };

package/lib/components/MegaMenu/{submenu.css → submenu.module.css}

@@ -22,6 +22,11 @@
     top: 0;
 }
 
+.submenu_active {
+    composes: submenu;
+    display: flex;
+}
+
 .submenuItems {
     display: flex;
     flex-wrap: wrap;

package/lib/components/MegaMenu/submenuColumn.js

@@ -1,34 +1,47 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+
 import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+
 import { useStyle } from '../../classify';
-import defaultClasses from './submenuColumn.css';
+import defaultClasses from './submenuColumn.module.css';
 import PropTypes from 'prop-types';
 
 /**
  * The SubmenuColumn component displays columns with categories in submenu
  *
  * @param {MegaMenuCategory} props.category
+ * @param {function} props.onNavigate - function called when clicking on Link
  */
 const SubmenuColumn = props => {
-    const { category } = props;
+    const { category, categoryUrlSuffix, onNavigate } = props;
     const classes = useStyle(defaultClasses, props.classes);
 
     const categoryUrl = resourceUrl(
-        `/${category.url_path}${category.url_suffix || ''}`
+        `/${category.url_path}${categoryUrlSuffix || ''}`
     );
     let children = null;
 
     if (category.children.length) {
-        const childrenItems = category.children.map((category, index) => {
-            const { url_path, url_suffix, isActive, name } = category;
-            const categoryUrl = resourceUrl(`/${url_path}${url_suffix || ''}`);
+        const childrenItems = category.children.map((subCategory, index) => {
+            const { url_path, isActive, name } = subCategory;
+            const categoryUrl = resourceUrl(
+                `/${url_path}${categoryUrlSuffix || ''}`
+            );
+
+            // setting keyboardProps if it is last child of that category
+            const keyboardProps =
+                index === category.children.length - 1
+                    ? props.keyboardProps
+                    : {};
 
             return (
                 <li key={index} className={classes.submenuChildItem}>
                     <Link
+                        {...keyboardProps}
                         className={isActive ? classes.linkActive : classes.link}
                         to={categoryUrl}
+                        onClick={onNavigate}
                     >
                         {name}
                     </Link>
@@ -39,10 +52,18 @@ const SubmenuColumn = props => {
         children = <ul className={classes.submenuChild}>{childrenItems}</ul>;
     }
 
+    // setting keyboardProps if category does not have any sub-category
+    const keyboardProps = category.children.length ? {} : props.keyboardProps;
+
     return (
         <div className={classes.submenuColumn}>
-            <Link className={classes.link} to={categoryUrl}>
-                <h3 className={classes.heading}>{category.name}</h3>
+            <Link
+                {...keyboardProps}
+                className={classes.link}
+                to={categoryUrl}
+                onClick={onNavigate}
+            >
+                <span className={classes.heading}>{category.name}</span>
             </Link>
             {children}
         </div>
@@ -60,7 +81,8 @@ SubmenuColumn.propTypes = {
         name: PropTypes.string.isRequired,
         path: PropTypes.array.isRequired,
         position: PropTypes.number.isRequired,
-        url_path: PropTypes.string.isRequired,
-        url_suffix: PropTypes.string
-    }).isRequired
+        url_path: PropTypes.string.isRequired
+    }).isRequired,
+    categoryUrlSuffix: PropTypes.string,
+    onNavigate: PropTypes.func.isRequired
 };

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

@@ -6,7 +6,7 @@ exports[`Should disable delete icon while loading 1`] = `
 >
   <div
     className="thumbnailContainer"
-    to="/product.html"
+    to="/product"
   >
     <div
       className="root container"
@@ -15,7 +15,7 @@ exports[`Should disable delete icon while loading 1`] = `
         alt="P1"
         className="image placeholder"
         loading="eager"
-        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAFCAQAAADIpIVQAAAADklEQVR42mNkgAJGIhgAALQABsHyMOcAAAAASUVORK5CYII="
+        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
         width={100}
       />
       <img
@@ -41,7 +41,7 @@ exports[`Should disable delete icon while loading 1`] = `
   </div>
   <div
     className="name"
-    to="/product.html"
+    to="/product"
   >
     P1
   </div>
@@ -152,7 +152,7 @@ exports[`Should render correctly 1`] = `
 >
   <div
     className="thumbnailContainer"
-    to="/product.html"
+    to="/product"
   >
     <div
       className="root container"
@@ -161,7 +161,7 @@ exports[`Should render correctly 1`] = `
         alt="P1"
         className="image placeholder"
         loading="eager"
-        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAFCAQAAADIpIVQAAAADklEQVR42mNkgAJGIhgAALQABsHyMOcAAAAASUVORK5CYII="
+        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
         width={100}
       />
       <img
@@ -187,7 +187,7 @@ exports[`Should render correctly 1`] = `
   </div>
   <div
     className="name"
-    to="/product.html"
+    to="/product"
   >
     P1
   </div>
@@ -298,7 +298,7 @@ exports[`Should render correctly when configured to use variant thumbnail 1`] =
 >
   <div
     className="thumbnailContainer"
-    to="/product.html"
+    to="/product"
   >
     <div
       className="root container"
@@ -307,7 +307,7 @@ exports[`Should render correctly when configured to use variant thumbnail 1`] =
         alt="P1"
         className="image placeholder"
         loading="eager"
-        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAFCAQAAADIpIVQAAAADklEQVR42mNkgAJGIhgAALQABsHyMOcAAAAASUVORK5CYII="
+        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
         width={100}
       />
       <img
@@ -333,7 +333,7 @@ exports[`Should render correctly when configured to use variant thumbnail 1`] =
   </div>
   <div
     className="name"
-    to="/product.html"
+    to="/product"
   >
     P1
   </div>
@@ -444,7 +444,7 @@ exports[`Should render correctly with out of stock product 1`] = `
 >
   <div
     className="thumbnailContainer"
-    to="/product.html"
+    to="/product"
   >
     <div
       className="root container"
@@ -453,7 +453,7 @@ exports[`Should render correctly with out of stock product 1`] = `
         alt="P1"
         className="image placeholder"
         loading="eager"
-        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAFCAQAAADIpIVQAAAADklEQVR42mNkgAJGIhgAALQABsHyMOcAAAAASUVORK5CYII="
+        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
         width={100}
       />
       <img
@@ -479,7 +479,7 @@ exports[`Should render correctly with out of stock product 1`] = `
   </div>
   <div
     className="name"
-    to="/product.html"
+    to="/product"
   >
     P1
   </div>

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

@@ -14,7 +14,7 @@ import Icon from '../../Icon';
 import { useStyle } from '../../../classify';
 import configuredVariant from '@magento/peregrine/lib/util/configuredVariant';
 
-import defaultClasses from './item.css';
+import defaultClasses from './item.module.css';
 
 const Item = props => {
     const {
@@ -26,14 +26,15 @@ const Item = props => {
         handleRemoveItem,
         prices,
         closeMiniCart,
-        configurableThumbnailSource
+        configurableThumbnailSource,
+        storeUrlSuffix
     } = props;
 
     const { formatMessage } = useIntl();
     const classes = useStyle(defaultClasses, propClasses);
     const itemLink = useMemo(
-        () => resourceUrl(`/${product.url_key}${product.url_suffix || ''}`),
-        [product.url_key, product.url_suffix]
+        () => resourceUrl(`/${product.url_key}${storeUrlSuffix || ''}`),
+        [product.url_key, storeUrlSuffix]
     );
     const stockStatusText =
         product.stock_status === 'OUT_OF_STOCK'

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

@@ -4,7 +4,7 @@ import { string, func, arrayOf, shape, number, oneOf } from 'prop-types';
 import Item from './item';
 import { useStyle } from '../../../classify';
 
-import defaultClasses from './productList.css';
+import defaultClasses from './productList.module.css';
 
 const ProductList = props => {
     const {
@@ -12,7 +12,8 @@ const ProductList = props => {
         handleRemoveItem,
         classes: propClasses,
         closeMiniCart,
-        configurableThumbnailSource
+        configurableThumbnailSource,
+        storeUrlSuffix
     } = props;
     const classes = useStyle(defaultClasses, propClasses);
 
@@ -25,10 +26,17 @@ const ProductList = props => {
                     closeMiniCart={closeMiniCart}
                     handleRemoveItem={handleRemoveItem}
                     configurableThumbnailSource={configurableThumbnailSource}
+                    storeUrlSuffix={storeUrlSuffix}
                 />
             ));
         }
-    }, [items, handleRemoveItem, closeMiniCart, configurableThumbnailSource]);
+    }, [
+        items,
+        handleRemoveItem,
+        closeMiniCart,
+        configurableThumbnailSource,
+        storeUrlSuffix
+    ]);
 
     return <div className={classes.root}>{cartItems}</div>;
 };

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

@@ -80,6 +80,17 @@ exports[`it renders correctly 1`] = `
       <button
         className="checkoutButton"
         disabled={false}
+        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
@@ -122,6 +133,17 @@ exports[`it renders correctly 1`] = `
       <button
         className="editCartButton"
         disabled={false}
+        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

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

@@ -1,6 +1,6 @@
 import { gql } from '@apollo/client';
 import { MiniCartFragment } from '@magento/peregrine/lib/talons/MiniCart/miniCartFragments.gql';
-import { CartPageFragment } from '../CartPage/cartPageFragments.gql';
+import { CartPageFragment } from '@magento/peregrine/lib/talons/CartPage/cartPageFragments.gql.js';
 
 /**
  * @deprecated - Moved to @magento/peregrine/lib/talons/MiniCart/miniCartFragments.gql

package/lib/components/MiniCart/miniCart.js

@@ -14,7 +14,7 @@ import Button from '../Button';
 import Icon from '../Icon';
 import StockStatusMessage from '../StockStatusMessage';
 import ProductList from './ProductList';
-import defaultClasses from './miniCart.css';
+import defaultClasses from './miniCart.module.css';
 import operations from './miniCart.gql';
 
 const errorIcon = <Icon src={AlertCircleIcon} size={20} />;
@@ -47,7 +47,8 @@ const MiniCart = React.forwardRef((props, ref) => {
         productList,
         subTotal,
         totalQuantity,
-        configurableThumbnailSource
+        configurableThumbnailSource,
+        storeUrlSuffix
     } = talonProps;
 
     const classes = useStyle(defaultClasses, props.classes);
@@ -120,6 +121,7 @@ const MiniCart = React.forwardRef((props, ref) => {
                     handleRemoveItem={handleRemoveItem}
                     closeMiniCart={closeMiniCart}
                     configurableThumbnailSource={configurableThumbnailSource}
+                    storeUrlSuffix={storeUrlSuffix}
                 />
             </div>
             <div className={classes.footer}>

package/lib/components/MiniCart/{miniCart.css → miniCart.module.css}

@@ -126,7 +126,7 @@
 }
 
 .checkoutButton {
-    composes: root_highPriority from '../Button/button.css';
+    composes: root_highPriority from '../Button/button.module.css';
     grid-column: 1 / span 1;
     width: 10rem;
     margin: auto;