@riosst100/pwa-marketplace 1.2.6 → 1.2.7

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

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

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

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

@@ -1,99 +1,99 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-
-import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-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,
-        categoryUrlSuffix,
-        onNavigate,
-        handleCloseSubMenu
-    } = props;
-    const classes = useStyle(defaultClasses, props.classes);
-
-    const categoryUrl = resourceUrl(
-        `/${category.url_path}${categoryUrlSuffix || ''}`
-    );
-    let children = null;
-
-    if (category.children.length) {
-        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}
-                        data-cy="MegaMenu-SubmenuColumn-link"
-                        to={categoryUrl}
-                        onClick={onNavigate}
-                    >
-                        {name}
-                    </Link>
-                </li>
-            );
-        });
-
-        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
-                {...keyboardProps}
-                className={classes.link}
-                data-cy="MegaMenu-SubmenuColumn-link"
-                to={categoryUrl}
-                onClick={() => {
-                    handleCloseSubMenu();
-                    onNavigate();
-                }}
-            >
-                <span className={classes.heading}>{category.name}</span>
-            </Link>
-            {children}
-        </div>
-    );
-};
-
-export default SubmenuColumn;
-
-SubmenuColumn.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,
-    categoryUrlSuffix: PropTypes.string,
-    onNavigate: PropTypes.func.isRequired,
-    handleCloseSubMenu: PropTypes.func.isRequired
-};
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+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,
+        categoryUrlSuffix,
+        onNavigate,
+        handleCloseSubMenu
+    } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const categoryUrl = resourceUrl(
+        `/${category.url_path}${categoryUrlSuffix || ''}`
+    );
+    let children = null;
+
+    if (category.children.length) {
+        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}
+                        data-cy="MegaMenu-SubmenuColumn-link"
+                        to={categoryUrl}
+                        onClick={onNavigate}
+                    >
+                        {name}
+                    </Link>
+                </li>
+            );
+        });
+
+        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
+                {...keyboardProps}
+                className={classes.link}
+                data-cy="MegaMenu-SubmenuColumn-link"
+                to={categoryUrl}
+                onClick={() => {
+                    handleCloseSubMenu();
+                    onNavigate();
+                }}
+            >
+                <span className={classes.heading}>{category.name}</span>
+            </Link>
+            {children}
+        </div>
+    );
+};
+
+export default SubmenuColumn;
+
+SubmenuColumn.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,
+    categoryUrlSuffix: PropTypes.string,
+    onNavigate: PropTypes.func.isRequired,
+    handleCloseSubMenu: PropTypes.func.isRequired
+};

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

@@ -1,28 +1,28 @@
-.submenuColumn {
-    composes: max-w-[235px] from global;
-    composes: p-5 from global;
-}
-
-.heading {
-    composes: font-semibold from global;
-}
-
-.link {
-    composes: whitespace-nowrap from global;
-
-    composes: focus_underline from global;
-
-    composes: hover_underline from global;
-}
-
-.linkActive {
-    composes: underline from global;
-}
-
-.submenuChild {
-    composes: mt-5 from global;
-}
-
-.submenuChildItem {
-    composes: mb-3 from global;
-}
+.submenuColumn {
+    composes: max-w-[235px] from global;
+    composes: p-5 from global;
+}
+
+.heading {
+    composes: font-semibold from global;
+}
+
+.link {
+    composes: whitespace-nowrap from global;
+
+    composes: focus_underline from global;
+
+    composes: hover_underline from global;
+}
+
+.linkActive {
+    composes: underline from global;
+}
+
+.submenuChild {
+    composes: mt-5 from global;
+}
+
+.submenuChildItem {
+    composes: mb-3 from global;
+}

package/src/overwrites/venia-ui/lib/components/SearchBar/__stories__/searchBar.js

@@ -1,11 +1,11 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-
-import SearchBar from '../searchBar';
-import defaultClasses from '../searchBar.module.css';
-
-const stories = storiesOf('Components/SearchBar', module);
-
-stories.add('Search Bar', () => (
-    <SearchBar classes={defaultClasses} isOpen={true} />
-));
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import SearchBar from '../searchBar';
+import defaultClasses from '../searchBar.module.css';
+
+const stories = storiesOf('Components/SearchBar', module);
+
+stories.add('Search Bar', () => (
+    <SearchBar classes={defaultClasses} isOpen={true} />
+));