@riosst100/pwa-marketplace 1.2.5 → 1.2.7

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

@@ -1,90 +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;
+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

@@ -1,12 +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;
-}
+.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

@@ -1,156 +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
-};
+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

@@ -1,31 +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;
+.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;
 }