fix: CORUI-6264: One component per file Menu

src/ComboboxInput/ComboboxInput.test.js

@@ -1,8 +1,10 @@
 import { ComboboxInput } from './ComboboxInput';
+import Menu from '../Menu/Menu';
+import MenuItem from '../Menu/MenuItem';
+import MenuList from '../Menu/MenuList';
 import { mount } from 'enzyme';
 import React from 'react';
 import renderer from 'react-test-renderer';
-import { Menu, MenuItem, MenuList } from '../Menu/Menu';
 
 describe('<ComboboxInput />', () => {
     const defaultMenu = (

src/Dropdown/Dropdown.test.js

@@ -1,10 +1,12 @@
 import { Button } from '../';
 import { Dropdown } from './Dropdown';
+import Menu from '../Menu/Menu';
+import MenuItem from '../Menu/MenuItem';
+import MenuList from '../Menu/MenuList';
 import { mount } from 'enzyme';
 import { Popover } from '../Popover/Popover';
 import React from 'react';
 import renderer from 'react-test-renderer';
-import { Menu, MenuItem, MenuList } from '../Menu/Menu';
 
 describe('<Dropdown />', () => {
     const defaultMenu = (

src/Menu/Menu.js

@@ -2,8 +2,7 @@ import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-// ------------------------------------------- Menu ------------------------------------------
-export const Menu = ({ addonBefore, children, className, ...props }) => {
+const Menu = ({ addonBefore, children, className, ...props }) => {
     const menuClasses = classnames(
         'fd-menu',
         {
@@ -18,6 +17,7 @@ export const Menu = ({ addonBefore, children, className, ...props }) => {
         </nav>
     );
 };
+
 Menu.displayName = 'Menu';
 
 Menu.propTypes = {
@@ -29,110 +29,4 @@ Menu.propDescriptions = {
     addonBefore: 'Set to **true** enables menu items with add-on before.'
 };
 
-// ---------------------------------------- Menu List ----------------------------------------
-export const MenuList = ({ children, className, ...props }) => {
-    const menuListClasses = classnames(
-        'fd-menu__list',
-        className
-    );
-
-    return <ul {...props} className={menuListClasses}>{children}</ul>;
-};
-MenuList.displayName = 'MenuList';
-
-MenuList.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string
-};
-
-// ---------------------------------------- Menu Item ----------------------------------------
-export const MenuItem = ({ url, isLink, separator, addon, children, onclick, className, addonProps, urlProps, ...props }) => {
-    const menuItemLinkClasses = classnames(
-        'fd-menu__item',
-        {
-            'fd-menu__link': isLink
-        }
-    );
-
-    const renderLink = () => {
-        if (url) {
-            return (
-                <a {...urlProps}
-                    className={menuItemLinkClasses}
-                    href={url}
-                    onClick={onclick}>
-                    {children}
-                </a>
-            );
-        } else if (children && React.isValidElement(children)) {
-            const childrenClassnames = classnames(
-                menuItemLinkClasses,
-                children.props.className
-            );
-
-            return React.cloneElement(children, {
-                'className': childrenClassnames,
-                ...urlProps
-            });
-        } else if (children) {
-            return (<a {...urlProps}
-                className='fd-menu__item'
-                onClick={onclick}>{children}</a>);
-        }
-    };
-
-    return (
-        <React.Fragment>
-            <li {...props} className={className}>
-                {addon &&
-                    <div {...addonProps} className='fd-menu__addon-before'>{<span className={'sap-icon--' + addon} />}</div>
-                }
-                {renderLink()}
-            </li>
-            {separator && <hr />}
-        </React.Fragment>
-    );
-};
-MenuItem.displayName = 'MenuItem';
-
-MenuItem.propTypes = {
-    addon: PropTypes.string,
-    addonProps: PropTypes.object,
-    className: PropTypes.string,
-    isLink: PropTypes.bool,
-    separator: PropTypes.bool,
-    url: PropTypes.string,
-    urlProps: PropTypes.object
-};
-
-MenuItem.propDescriptions = {
-    addon: 'Name of the SAP icon to be applied as an add-on before.',
-    addonProps: 'Additional props to be spread to the add-on section.',
-    children: 'component - can be used to pass React Router <Link> or any other component which emits an <a>.',
-    isLink: 'Set to **true** to style as a link.',
-    separator: 'Set to **true** to add a horizontal line (separator).',
-    url: 'Enables use of `<a>` element. Value to be applied to the anchor\'s `href` attribute. Should use either `link` or `url`, but not both.',
-    urlProps: 'Additional props to be spread to the Menu Item links (when using `url`).'
-};
-
-// ---------------------------------------- Menu Group ----------------------------------------
-export const MenuGroup = ({ title, children, className, titleProps, ...props }) => {
-    const menuGroupClasses = classnames(
-        'fd-menu__group',
-        className
-    );
-
-    return (
-        <div {...props} className={menuGroupClasses}>
-            <h1 {...titleProps} className='fd-menu__title'>{title}</h1>
-            {children}
-        </div>
-    );
-};
-MenuGroup.displayName = 'MenuGroup';
-
-MenuGroup.propTypes = {
-    title: PropTypes.string.isRequired,
-    className: PropTypes.string,
-    titleProps: PropTypes.object
-};
+export default Menu;

src/Menu/Menu.test.js

@@ -1,8 +1,11 @@
+import Menu from './Menu';
+import MenuGroup from './MenuGroup';
+import MenuItem from './MenuItem';
+import MenuList from './MenuList';
 import { mount } from 'enzyme';
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { Link, MemoryRouter } from 'react-router-dom';
-import { Menu, MenuGroup, MenuItem, MenuList } from './Menu';
 
 describe('<Menu />', () => {
     const basicMenuCode = (

src/Menu/MenuGroup.js

@@ -0,0 +1,27 @@
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const MenuGroup = ({ title, children, className, titleProps, ...props }) => {
+    const menuGroupClasses = classnames(
+        'fd-menu__group',
+        className
+    );
+
+    return (
+        <div {...props} className={menuGroupClasses}>
+            <h1 {...titleProps} className='fd-menu__title'>{title}</h1>
+            {children}
+        </div>
+    );
+};
+
+MenuGroup.displayName = 'MenuGroup';
+
+MenuGroup.propTypes = {
+    title: PropTypes.string.isRequired,
+    className: PropTypes.string,
+    titleProps: PropTypes.object
+};
+
+export default MenuGroup;

src/Menu/MenuItem.js

@@ -0,0 +1,75 @@
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const MenuItem = ({ url, isLink, separator, addon, children, onclick, className, addonProps, urlProps, ...props }) => {
+    const menuItemLinkClasses = classnames(
+        'fd-menu__item',
+        {
+            'fd-menu__link': isLink
+        }
+    );
+
+    const renderLink = () => {
+        if (url) {
+            return (
+                <a {...urlProps}
+                    className={menuItemLinkClasses}
+                    href={url}
+                    onClick={onclick}>
+                    {children}
+                </a>
+            );
+        } else if (children && React.isValidElement(children)) {
+            const childrenClassnames = classnames(
+                menuItemLinkClasses,
+                children.props.className
+            );
+
+            return React.cloneElement(children, {
+                'className': childrenClassnames,
+                ...urlProps
+            });
+        } else if (children) {
+            return (<a {...urlProps}
+                className='fd-menu__item'
+                onClick={onclick}>{children}</a>);
+        }
+    };
+
+    return (
+        <React.Fragment>
+            <li {...props} className={className}>
+                {addon &&
+                    <div {...addonProps} className='fd-menu__addon-before'>{<span className={'sap-icon--' + addon} />}</div>
+                }
+                {renderLink()}
+            </li>
+            {separator && <hr />}
+        </React.Fragment>
+    );
+};
+
+MenuItem.displayName = 'MenuItem';
+
+MenuItem.propTypes = {
+    addon: PropTypes.string,
+    addonProps: PropTypes.object,
+    className: PropTypes.string,
+    isLink: PropTypes.bool,
+    separator: PropTypes.bool,
+    url: PropTypes.string,
+    urlProps: PropTypes.object
+};
+
+MenuItem.propDescriptions = {
+    addon: 'Name of the SAP icon to be applied as an add-on before.',
+    addonProps: 'Additional props to be spread to the add-on section.',
+    children: 'component - can be used to pass React Router <Link> or any other component which emits an <a>.',
+    isLink: 'Set to **true** to style as a link.',
+    separator: 'Set to **true** to add a horizontal line (separator).',
+    url: 'Enables use of `<a>` element. Value to be applied to the anchor\'s `href` attribute. Should use either `link` or `url`, but not both.',
+    urlProps: 'Additional props to be spread to the Menu Item links (when using `url`).'
+};
+
+export default MenuItem;

src/Menu/MenuList.js

@@ -0,0 +1,21 @@
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const MenuList = ({ children, className, ...props }) => {
+    const menuListClasses = classnames(
+        'fd-menu__list',
+        className
+    );
+
+    return <ul {...props} className={menuListClasses}>{children}</ul>;
+};
+
+MenuList.displayName = 'MenuList';
+
+MenuList.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string
+};
+
+export default MenuList;

src/Popover/Popover.test.js

@@ -1,9 +1,11 @@
 import { Icon } from '../Icon/Icon';
+import Menu from '../Menu/Menu';
+import MenuItem from '../Menu/MenuItem';
+import MenuList from '../Menu/MenuList';
 import { mount } from 'enzyme';
 import { Popover } from './Popover';
 import React from 'react';
 import renderer from 'react-test-renderer';
-import { Menu, MenuItem, MenuList } from '../Menu/Menu';
 
 describe('<Popover />', () => {
     const popOver = (

src/Shellbar/Shellbar.js

@@ -2,10 +2,12 @@ import classnames from 'classnames';
 import { Counter } from '../Badge/Badge';
 import { Icon } from '../Icon/Icon';
 import { Identifier } from '../Identifier/Identifier';
+import Menu from '../Menu/Menu';
+import MenuItem from '../Menu/MenuItem';
+import MenuList from '../Menu/MenuList';
 import { Popover } from '../Popover/Popover';
 import PropTypes from 'prop-types';
 import { SearchInput } from '../SearchInput/SearchInput';
-import { Menu, MenuItem, MenuList } from '../Menu/Menu';
 import React, { Component } from 'react';
 
 export class Shellbar extends Component {

src/Shellbar/Shellbar.test.js

@@ -1,8 +1,10 @@
+import Menu from '../Menu/Menu';
+import MenuItem from '../Menu/MenuItem';
+import MenuList from '../Menu/MenuList';
 import { mount } from 'enzyme';
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { Shellbar } from './Shellbar';
-import { Menu, MenuItem, MenuList } from '../Menu/Menu';
 
 describe('<Shellbar />', () => {
     const profile1 = {

src/Tile/Tile.test.js

@@ -1,10 +1,12 @@
 import { Button } from '../';
 import { Identifier } from '../Identifier/Identifier';
+import Menu from '../Menu/Menu';
+import MenuItem from '../Menu/MenuItem';
+import MenuList from '../Menu/MenuList';
 import { mount } from 'enzyme';
 import { Popover } from '../Popover/Popover';
 import React from 'react';
 import renderer from 'react-test-renderer';
-import { Menu, MenuItem, MenuList } from '../Menu/Menu';
 import { ProductTile, ProductTileContent, ProductTileMedia, Tile, TileActions, TileContent, TileGrid, TileMedia } from './Tile';
 
 describe('<Tile />', () => {

src/index.js

@@ -31,7 +31,10 @@ export { default as InputGroup } from './InputGroup/InputGroup';
 export { default as FormGroup } from './InputGroup/FormGroup';
 export { ListGroup, ListGroupItem, ListGroupItemActions, ListGroupItemCheckbox } from './ListGroup/ListGroup';
 export { LocalizationEditor } from './LocalizationEditor/LocalizationEditor';
-export { Menu, MenuList, MenuItem, MenuGroup } from './Menu/Menu';
+export { default as Menu } from './Menu/Menu';
+export { default as MenuList } from './Menu/MenuList';
+export { default as MenuItem } from './Menu/MenuItem';
+export { default as MenuGroup } from './Menu/MenuGroup';
 export { Modal } from './Modal/Modal';
 export { MultiInput } from './MultiInput/MultiInput';
 export { Pagination } from './Pagination/Pagination';