@riosst100/pwa-marketplace 1.2.4 → 1.2.5

package/src/overwrites/venia-ui/lib/components/MegaMenu/__tests__/__snapshots__/MegaMenu.spec.js.snap

@@ -0,0 +1,114 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`#MegaMenu renders empty div if not in viewport 1`] = `
+<nav
+  className="megaMenu"
+  role="navigation"
+/>
+`;
+
+exports[`#MegaMenu renders menu if in viewport 1`] = `
+<nav
+  className="megaMenu"
+  role="navigation"
+>
+  <div
+    className="megaMenuItem"
+    onFocus={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onTouchStart={[Function]}
+  >
+    <a
+      aria-label="Category: Women. 1 sub-categories"
+      className="megaMenuLink"
+      href="/women.html"
+      onClick={[Function]}
+      onKeyDown={[Function]}
+    >
+      Women
+      <span
+        className="arrowDown"
+      >
+        <svg
+          className="icon"
+          fill="none"
+          height={16}
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width={16}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <polyline
+            points="6 9 12 15 18 9"
+          />
+        </svg>
+      </span>
+    </a>
+    <div
+      className="submenu_inactive"
+    >
+      <div
+        className="submenuItems"
+        style={
+          Object {
+            "minWidth": 20,
+          }
+        }
+      >
+        <div
+          className="submenuColumn"
+        >
+          <a
+            className="link"
+            href="/bottoms.html"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+          >
+            <span
+              className="heading"
+            >
+              Bottoms
+            </span>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className="megaMenuItem"
+    onFocus={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onTouchStart={[Function]}
+  >
+    <a
+      className="megaMenuLink"
+      href="/men.html"
+      onClick={[Function]}
+      onKeyDown={[Function]}
+    >
+      Men
+    </a>
+  </div>
+  <div
+    className="megaMenuItem"
+    onFocus={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onTouchStart={[Function]}
+  >
+    <a
+      className="megaMenuLink"
+      href="/gear.html"
+      onClick={[Function]}
+      onKeyDown={[Function]}
+    >
+      Gear
+    </a>
+  </div>
+</nav>
+`;

package/src/overwrites/venia-ui/lib/components/MegaMenu/__tests__/__snapshots__/MegaMenuItem.spec.js.snap

@@ -0,0 +1,71 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Mega menu item renders correctly it does not render submenu when item does not have children 1`] = `
+<div
+  className="megaMenuItem"
+  onFocus={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onTouchStart={[Function]}
+>
+  <mock-Submenu
+    categoryUrlSuffix=".html"
+    handleCloseSubMenu={[MockFunction]}
+    isFocused={false}
+    items={
+      Array [
+        Object {
+          "children": Array [],
+          "id": 2,
+          "name": "Bottoms",
+          "url_path": "bottoms",
+        },
+        Object {
+          "children": Array [],
+          "id": 3,
+          "isActive": false,
+          "name": "Tops",
+          "url_path": "tops",
+        },
+      ]
+    }
+    mainNavWidth={200}
+    subMenuState="test"
+  />
+</div>
+`;
+
+exports[`Mega menu item renders correctly it renders correctly 1`] = `
+<div
+  className="megaMenuItem"
+  onFocus={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onTouchStart={[Function]}
+>
+  <mock-Submenu
+    categoryUrlSuffix=".html"
+    handleCloseSubMenu={[MockFunction]}
+    isFocused={false}
+    items={
+      Array [
+        Object {
+          "children": Array [],
+          "id": 2,
+          "name": "Bottoms",
+          "url_path": "bottoms",
+        },
+        Object {
+          "children": Array [],
+          "id": 3,
+          "isActive": false,
+          "name": "Tops",
+          "url_path": "tops",
+        },
+      ]
+    }
+    mainNavWidth={200}
+    subMenuState="test"
+  />
+</div>
+`;

package/src/overwrites/venia-ui/lib/components/MegaMenu/__tests__/__snapshots__/Submenu.spec.js.snap

@@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Submenu renders correctly it renders correctly 1`] = `
+<div
+  className="submenu_inactive"
+>
+  <div
+    className="submenuItems"
+    style={
+      Object {
+        "minWidth": NaN,
+      }
+    }
+  >
+    <mock-SubmenuColumn
+      category={
+        Object {
+          "children": Array [
+            Object {
+              "children": Array [],
+              "id": 3,
+              "isActive": false,
+              "name": "Pants",
+              "url_path": "pants",
+            },
+          ],
+          "id": 1,
+          "name": "Bottoms",
+          "url_path": "bottoms",
+        }
+      }
+      categoryUrlSuffix=".html"
+      handleCloseSubMenu={[MockFunction handleCloseSubMenu]}
+      index={0}
+      keyboardProps={Object {}}
+    />
+    <mock-SubmenuColumn
+      category={
+        Object {
+          "children": Array [],
+          "id": 2,
+          "isActive": false,
+          "name": "Tops",
+          "url_path": "tops",
+        }
+      }
+      categoryUrlSuffix=".html"
+      handleCloseSubMenu={[MockFunction handleCloseSubMenu]}
+      index={1}
+      keyboardProps={
+        Object {
+          "onKeyDown": [Function],
+          "onKeyUp": undefined,
+        }
+      }
+    />
+  </div>
+</div>
+`;

package/src/overwrites/venia-ui/lib/components/MegaMenu/__tests__/__snapshots__/SubmenuColumn.spec.js.snap

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Submenu column renders correctly it renders correctly 1`] = `
+<div
+  className="submenuColumn"
+>
+  <a
+    className="link"
+    href="/pants.html"
+    onClick={[Function]}
+  >
+    <span
+      className="heading"
+    >
+      Pants
+    </span>
+  </a>
+  <ul
+    className="submenuChild"
+  >
+    <li
+      className="submenuChildItem"
+    >
+      <a
+        className="linkActive"
+        href="/jeans.html"
+        onClick={[Function]}
+      >
+        Jeans
+      </a>
+    </li>
+  </ul>
+</div>
+`;

package/src/overwrites/venia-ui/lib/components/MegaMenu/index.js

@@ -0,0 +1 @@
+export { default } from './megaMenu';

package/src/overwrites/venia-ui/lib/components/MegaMenu/megaMenu.js

@@ -0,0 +1,90 @@
+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 '@magento/venia-ui/lib/classify';
+
+import MegaMenuItem from './megaMenuItem';
+import defaultClasses from './megaMenu.module.css';
+import cn from 'classnames';
+
+/**
+ * The MegaMenu component displays menu with categories on desktop devices
+ */
+const MegaMenu = (props) => {
+    const { rootClassName, megaMenuItemClassname, titleClassName } = props
+    const mainNavRef = useRef(null);
+
+    const classes = useStyle(defaultClasses, props.classes);
+    // const rootClass = cn(classes.megaMenu, rootClassName);
+    const rootClass = cn('xs_hidden xl_flex flex-grow justify-self-center', rootClassName);
+
+    const {
+        megaMenuData,
+        activeCategoryId,
+        subMenuState,
+        disableFocus,
+        handleSubMenuFocus,
+        categoryUrlSuffix,
+        handleNavigate,
+        handleClickOutside
+    } = useMegaMenu({ mainNavRef });
+
+    const [mainNavWidth, setMainNavWidth] = useState(0);
+    const shouldRenderItems = useIsInViewport({
+        elementRef: mainNavRef
+    });
+
+    useEffect(() => {
+        const handleResize = () => {
+            const navWidth = mainNavRef.current
+                ? mainNavRef.current.offsetWidth
+                : null;
+
+            setMainNavWidth(navWidth);
+        };
+
+        window.addEventListener('resize', handleResize);
+
+        handleResize();
+
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    });
+
+    const items = megaMenuData.children
+        ? megaMenuData.children.map(category => {
+            return (
+                <MegaMenuItem
+                    category={category}
+                    activeCategoryId={activeCategoryId}
+                    categoryUrlSuffix={categoryUrlSuffix}
+                    mainNavWidth={mainNavWidth}
+                    onNavigate={handleNavigate}
+                    key={category.uid}
+                    subMenuState={subMenuState}
+                    disableFocus={disableFocus}
+                    handleSubMenuFocus={handleSubMenuFocus}
+                    handleClickOutside={handleClickOutside}
+                    megaMenuItemClassname={megaMenuItemClassname}
+                    titleClassName={titleClassName}
+                />
+            );
+        })
+        : null;
+
+    return (
+        <nav
+            ref={mainNavRef}
+            className={rootClass}
+            data-cy="MegaMenu-megaMenu"
+            role="navigation"
+            onFocus={handleSubMenuFocus}
+        >
+            {shouldRenderItems ? items : null}
+        </nav>
+    );
+};
+
+export default MegaMenu;

package/src/overwrites/venia-ui/lib/components/MegaMenu/megaMenu.module.css

@@ -0,0 +1,12 @@
+.megaMenu {
+    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;
+}
+
+/* Large screen styles */
+.megaMenu {
+    composes: lg_flex from global;
+}

package/src/overwrites/venia-ui/lib/components/MegaMenu/megaMenuItem.js

@@ -0,0 +1,156 @@
+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 '@magento/venia-ui/lib/classify';
+import defaultClasses from './megaMenuItem.module.css';
+import Submenu from './submenu';
+import { ArrowDown2 } from 'iconsax-react';
+import { textPrimary } from '@riosst100/pwa-marketplace/src/theme/vars';
+import cn from 'classnames';
+
+/**
+ * The MegaMenuItem component displays mega menu item
+ *
+ * @param {MegaMenuCategory} props.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
+ */
+const MegaMenuItem = props => {
+    const {
+        activeCategoryId,
+        category,
+        mainNavWidth,
+        categoryUrlSuffix,
+        subMenuState,
+        disableFocus,
+        onNavigate,
+        handleSubMenuFocus,
+        handleClickOutside,
+        megaMenuItemClassname,
+        titleClassName,
+    } = props;
+
+    const classes = useStyle(defaultClasses, props.classes);
+    const categoryUrl = resourceUrl(
+        `/${category.url_path}${categoryUrlSuffix || ''}`
+    );
+
+    const talonProps = useMegaMenuItem({
+        category,
+        activeCategoryId,
+        subMenuState,
+        disableFocus
+    });
+
+    const {
+        isFocused,
+        isActive,
+        handleMenuItemFocus,
+        handleCloseSubMenu,
+        isMenuActive,
+        handleKeyDown
+    } = talonProps;
+
+    const itemClassName = 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 ? (
+        <ArrowDown2 className='ml-2' size="16" color={textPrimary} variant="Outline" />
+    ) : null;
+
+    const linkAttributes = category.children.length
+        ? {
+            'aria-label': `Category: ${category.name}. ${category.children.length
+                } sub-categories`
+        }
+        : {};
+
+    return (
+        <div
+            className={cn(itemClassName, megaMenuItemClassname)}
+            data-cy="MegaMenu-MegaMenuItem-megaMenuItem"
+            onMouseEnter={() => {
+                handleSubMenuFocus();
+                handleMenuItemFocus();
+            }}
+            onFocus={() => {
+                handleSubMenuFocus();
+                handleMenuItemFocus();
+            }}
+            onTouchStart={() => {
+                handleSubMenuFocus();
+                handleMenuItemFocus();
+            }}
+            onMouseLeave={e => {
+                handleClickOutside(e);
+                handleCloseSubMenu();
+            }}
+        >
+            <Link
+                {...linkAttributes}
+                onKeyDown={handleKeyDown}
+                className={cn(
+                    isActive ? classes.megaMenuLinkActive : classes.megaMenuLink,
+                    titleClassName
+                )}
+                data-cy="MegaMenu-MegaMenuItem-link"
+                to={categoryUrl}
+                onClick={onNavigate}
+            >
+                {category.name}
+                {maybeDownArrowIcon}
+            </Link>
+            {children}
+        </div>
+    );
+};
+
+export default MegaMenuItem;
+
+MegaMenuItem.propTypes = {
+    category: PropTypes.shape({
+        children: PropTypes.array,
+        uid: PropTypes.string.isRequired,
+        include_in_menu: PropTypes.number,
+        isActive: PropTypes.bool.isRequired,
+        name: PropTypes.string.isRequired,
+        path: PropTypes.array.isRequired,
+        position: PropTypes.number.isRequired,
+        url_path: PropTypes.string.isRequired
+    }).isRequired,
+    activeCategoryId: PropTypes.string,
+    mainNavWidth: PropTypes.number.isRequired,
+    categoryUrlSuffix: PropTypes.string,
+    onNavigate: PropTypes.func.isRequired,
+    handleSubMenuFocus: PropTypes.func.isRequired,
+    handleClickOutside: PropTypes.func.isRequired
+};

package/src/overwrites/venia-ui/lib/components/MegaMenu/megaMenuItem.module.css

@@ -0,0 +1,31 @@
+.megaMenuItem {
+    /* composes: px-3 from global;
+    composes: py-0 from global; */
+}
+
+.megaMenuLink {
+    composes: items-center from global;
+    composes: inline-flex from global;
+    /* min-height: 5rem; */
+}
+
+.megaMenuLinkActive {
+    composes: megaMenuLink;
+    composes: underline from global;
+}
+
+.megaMenuItem_active {
+    composes: megaMenuItem;
+    composes: flex from global;
+}
+
+.arrowDown {
+    composes: leading-[0] from global;
+    composes: pl-2xs from global;
+}
+
+/* TODO @TW: cannot compose */
+.megaMenuItem:hover .megaMenuLink,
+.megaMenuItem:focus .megaMenuLink {
+    text-decoration: underline;
+}

package/src/overwrites/venia-ui/lib/components/MegaMenu/submenu.js

@@ -0,0 +1,89 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { useSubMenu } from '@magento/peregrine/lib/talons/MegaMenu/useSubMenu';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './submenu.module.css';
+import SubmenuColumn from './submenuColumn';
+
+/**
+ * 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,
+        isFocused,
+        subMenuState,
+        handleCloseSubMenu,
+        categoryUrlSuffix,
+        onNavigate
+    } = props;
+    const PADDING_OFFSET = 20;
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const talonProps = useSubMenu({
+        isFocused,
+        subMenuState,
+        handleCloseSubMenu
+    });
+
+    const { isSubMenuActive } = talonProps;
+
+    const subMenuClassname = isSubMenuActive
+        ? classes.submenu_active
+        : classes.submenu_inactive;
+
+    const subMenus = items.map((category, index) => {
+        const keyboardProps =
+            index === items.length - 1 ? talonProps.keyboardProps : {};
+        return (
+            <SubmenuColumn
+                index={index}
+                keyboardProps={keyboardProps}
+                key={category.uid}
+                category={category}
+                categoryUrlSuffix={categoryUrlSuffix}
+                onNavigate={onNavigate}
+                handleCloseSubMenu={handleCloseSubMenu}
+            />
+        );
+    });
+
+    return (
+        <div className={subMenuClassname}>
+            <div
+                className={classes.submenuItems}
+                style={{ minWidth: mainNavWidth + PADDING_OFFSET }}
+            >
+                {subMenus}
+            </div>
+        </div>
+    );
+};
+
+export default Submenu;
+
+Submenu.propTypes = {
+    items: PropTypes.arrayOf(
+        PropTypes.shape({
+            children: PropTypes.array.isRequired,
+            uid: PropTypes.string.isRequired,
+            include_in_menu: PropTypes.number.isRequired,
+            isActive: PropTypes.bool.isRequired,
+            name: PropTypes.string.isRequired,
+            path: PropTypes.array.isRequired,
+            position: PropTypes.number.isRequired,
+            url_path: PropTypes.string.isRequired
+        })
+    ).isRequired,
+    mainNavWidth: PropTypes.number.isRequired,
+    categoryUrlSuffix: PropTypes.string,
+    onNavigate: PropTypes.func.isRequired,
+    handleCloseSubMenu: PropTypes.func.isRequired
+};

package/src/overwrites/venia-ui/lib/components/MegaMenu/submenu.module.css

@@ -0,0 +1,43 @@
+.submenu {
+    composes: absolute from global;
+    composes: bg-white from global;
+    composes: flex-wrap from global;
+    composes: justify-between from global;
+    composes: left-0 from global;
+    composes: px-3 from global;
+    composes: py-5 from global;
+    composes: right-0 from global;
+    top: 139px;
+    box-shadow: 0 3px rgb(var(--venia-global-color-gray-100));
+}
+
+/* TODO @TW: cannot compose */
+.submenu::before {
+    box-shadow: inset 0 2px rgb(var(--venia-global-color-gray-100));
+    content: '';
+    height: 1px;
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+
+.submenu_inactive {
+    composes: submenu;
+    composes: hidden from global;
+}
+
+.submenu_active {
+    composes: submenu;
+    composes: flex from global;
+}
+
+.submenuItems {
+    composes: flex from global;
+    composes: flex-wrap from global;
+    composes: justify-between from global;
+    composes: max-w-site from global;
+    composes: ml-auto from global;
+    composes: mr-auto from global;
+}