From 2da826efd68cf7779028e385ae384be21019c69b Mon Sep 17 00:00:00 2001 From: CJ Skillingstad Date: Fri, 22 Feb 2019 13:35:47 -0800 Subject: [PATCH 01/12] Rename file --- src/Menu/{Menu.js => MenuList.js} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/Menu/{Menu.js => MenuList.js} (100%) diff --git a/src/Menu/Menu.js b/src/Menu/MenuList.js similarity index 100% rename from src/Menu/Menu.js rename to src/Menu/MenuList.js From 645d8d05c18a6df654dfd56bcef50f68f8fca4ac Mon Sep 17 00:00:00 2001 From: CJ Skillingstad Date: Fri, 22 Feb 2019 13:36:10 -0800 Subject: [PATCH 02/12] Rename temp --- src/Menu/{Menu.js => Menu.js.temp} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/Menu/{Menu.js => Menu.js.temp} (100%) diff --git a/src/Menu/Menu.js b/src/Menu/Menu.js.temp similarity index 100% rename from src/Menu/Menu.js rename to src/Menu/Menu.js.temp From 1c4b5468a2abddc2381644f68dbef49fe58c733c Mon Sep 17 00:00:00 2001 From: CJ Skillingstad Date: Fri, 22 Feb 2019 14:01:07 -0800 Subject: [PATCH 03/12] Restore original --- src/Menu/{Menu.js.temp => Menu.js} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/Menu/{Menu.js.temp => Menu.js} (100%) diff --git a/src/Menu/Menu.js.temp b/src/Menu/Menu.js similarity index 100% rename from src/Menu/Menu.js.temp rename to src/Menu/Menu.js From b1e1c19bc15a3ca6df9986a904540e9fb21f1528 Mon Sep 17 00:00:00 2001 From: CJ Skillingstad Date: Fri, 22 Feb 2019 14:01:53 -0800 Subject: [PATCH 04/12] Rename file --- src/Menu/{Menu.js => MenuItem.js} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/Menu/{Menu.js => MenuItem.js} (100%) diff --git a/src/Menu/Menu.js b/src/Menu/MenuItem.js similarity index 100% rename from src/Menu/Menu.js rename to src/Menu/MenuItem.js From 837ddc66483b0fa3bb0a64f0e27b2c5af09015c2 Mon Sep 17 00:00:00 2001 From: CJ Skillingstad Date: Fri, 22 Feb 2019 14:02:05 -0800 Subject: [PATCH 05/12] Rename temp --- src/Menu/{Menu.js => Menu.js.temp} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/Menu/{Menu.js => Menu.js.temp} (100%) diff --git a/src/Menu/Menu.js b/src/Menu/Menu.js.temp similarity index 100% rename from src/Menu/Menu.js rename to src/Menu/Menu.js.temp From 624f5e983d5ed96c5aa8044b5499d5568ca18f42 Mon Sep 17 00:00:00 2001 From: CJ Skillingstad Date: Fri, 22 Feb 2019 14:03:47 -0800 Subject: [PATCH 06/12] Restore original --- src/Menu/{Menu.js.temp => Menu.js} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/Menu/{Menu.js.temp => Menu.js} (100%) diff --git a/src/Menu/Menu.js.temp b/src/Menu/Menu.js similarity index 100% rename from src/Menu/Menu.js.temp rename to src/Menu/Menu.js From 5cf9a27a4f34f44bb26224a089e10c8654c6d5ed Mon Sep 17 00:00:00 2001 From: CJ Skillingstad Date: Fri, 22 Feb 2019 14:04:14 -0800 Subject: [PATCH 07/12] Rename file --- src/Menu/{Menu.js => MenuGroup.js} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/Menu/{Menu.js => MenuGroup.js} (100%) diff --git a/src/Menu/Menu.js b/src/Menu/MenuGroup.js similarity index 100% rename from src/Menu/Menu.js rename to src/Menu/MenuGroup.js From 114c1feb28e23cb59ab8e259d2cf26dc4bc74ce8 Mon Sep 17 00:00:00 2001 From: CJ Skillingstad Date: Fri, 22 Feb 2019 14:04:29 -0800 Subject: [PATCH 08/12] Rename temp --- src/Menu/{Menu.js => Menu.js.temp} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/Menu/{Menu.js => Menu.js.temp} (100%) diff --git a/src/Menu/Menu.js b/src/Menu/Menu.js.temp similarity index 100% rename from src/Menu/Menu.js rename to src/Menu/Menu.js.temp From f5d1880467b475ed73ca4a0e324c31d42ed2c779 Mon Sep 17 00:00:00 2001 From: CJ Skillingstad Date: Fri, 22 Feb 2019 14:05:01 -0800 Subject: [PATCH 09/12] Restore original --- src/Menu/{Menu.js.temp => Menu.js} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/Menu/{Menu.js.temp => Menu.js} (100%) diff --git a/src/Menu/Menu.js.temp b/src/Menu/Menu.js similarity index 100% rename from src/Menu/Menu.js.temp rename to src/Menu/Menu.js From ca213e8b476d4cfb6fd4e850d044560576e5a7a0 Mon Sep 17 00:00:00 2001 From: CJ Skillingstad Date: Fri, 22 Feb 2019 14:48:42 -0800 Subject: [PATCH 10/12] Separate components --- src/ComboboxInput/ComboboxInput.test.js | 4 +- src/Dropdown/Dropdown.test.js | 4 +- src/Menu/Menu.js | 112 +-------------------- src/Menu/Menu.test.js | 5 +- src/Menu/MenuGroup.js | 119 +---------------------- src/Menu/MenuItem.js | 69 +------------ src/Menu/MenuList.js | 123 +----------------------- src/Popover/Popover.test.js | 4 +- src/Shellbar/Shellbar.js | 4 +- src/Shellbar/Shellbar.test.js | 4 +- src/Tile/Tile.test.js | 4 +- src/index.js | 5 +- 12 files changed, 39 insertions(+), 418 deletions(-) diff --git a/src/ComboboxInput/ComboboxInput.test.js b/src/ComboboxInput/ComboboxInput.test.js index ec964f7ec..5abbaae20 100644 --- a/src/ComboboxInput/ComboboxInput.test.js +++ b/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('', () => { const defaultMenu = ( diff --git a/src/Dropdown/Dropdown.test.js b/src/Dropdown/Dropdown.test.js index fd58ea1cc..5fe81e195 100644 --- a/src/Dropdown/Dropdown.test.js +++ b/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('', () => { const defaultMenu = ( diff --git a/src/Menu/Menu.js b/src/Menu/Menu.js index f0a79498b..a0d6c5f1a 100644 --- a/src/Menu/Menu.js +++ b/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 }) => { ); }; + 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
    {children}
; -}; -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 ( - - {children} - - ); - } else if (children && React.isValidElement(children)) { - const childrenClassnames = classnames( - menuItemLinkClasses, - children.props.className - ); - - return React.cloneElement(children, { - 'className': childrenClassnames, - ...urlProps - }); - } else if (children) { - return ({children}); - } - }; - - return ( - -
  • - {addon && -
    {}
    - } - {renderLink()} -
    • - {separator &&
    } -     - ); -}; -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 or any other component which emits an .', - isLink: 'Set to **true** to style as a link.', - separator: 'Set to **true** to add a horizontal line (separator).', - url: 'Enables use of `` 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 ( -
    -

    {title}

    - {children} -
    - ); -}; -MenuGroup.displayName = 'MenuGroup'; - -MenuGroup.propTypes = { - title: PropTypes.string.isRequired, - className: PropTypes.string, - titleProps: PropTypes.object -}; +export default Menu; diff --git a/src/Menu/Menu.test.js b/src/Menu/Menu.test.js index 73494c62d..7506d3121 100644 --- a/src/Menu/Menu.test.js +++ b/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('    ', () => { const basicMenuCode = ( diff --git a/src/Menu/MenuGroup.js b/src/Menu/MenuGroup.js index f0a79498b..bb478f6b1 100644 --- a/src/Menu/MenuGroup.js +++ b/src/Menu/MenuGroup.js @@ -2,121 +2,7 @@ import classnames from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; -// ------------------------------------------- Menu ------------------------------------------ -export const Menu = ({ addonBefore, children, className, ...props }) => { - const menuClasses = classnames( - 'fd-menu', - { - 'fd-menu--addon-before': addonBefore - }, - className - ); - - return ( - - ); -}; -Menu.displayName = 'Menu'; - -Menu.propTypes = { - addonBefore: PropTypes.bool, - className: PropTypes.string -}; - -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
      {children}
    ; -}; -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 ( -     - {children} - - ); - } else if (children && React.isValidElement(children)) { - const childrenClassnames = classnames( - menuItemLinkClasses, - children.props.className - ); - - return React.cloneElement(children, { - 'className': childrenClassnames, - ...urlProps - }); - } else if (children) { - return ({children}); - } - }; - - return ( - -
  • - {addon && -
    {}
    - } - {renderLink()} -
    • - {separator &&
    } -     - ); -}; -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 or any other component which emits an .', - isLink: 'Set to **true** to style as a link.', - separator: 'Set to **true** to add a horizontal line (separator).', - url: 'Enables use of `` 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 MenuGroup = ({ title, children, className, titleProps, ...props }) => { const menuGroupClasses = classnames( 'fd-menu__group', className @@ -129,6 +15,7 @@ export const MenuGroup = ({ title, children, className, titleProps, ...props }) ); }; + MenuGroup.displayName = 'MenuGroup'; MenuGroup.propTypes = { @@ -136,3 +23,5 @@ MenuGroup.propTypes = { className: PropTypes.string, titleProps: PropTypes.object }; + +export default MenuGroup; diff --git a/src/Menu/MenuItem.js b/src/Menu/MenuItem.js index f0a79498b..659d4b2ef 100644 --- a/src/Menu/MenuItem.js +++ b/src/Menu/MenuItem.js @@ -2,51 +2,7 @@ import classnames from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; -// ------------------------------------------- Menu ------------------------------------------ -export const Menu = ({ addonBefore, children, className, ...props }) => { - const menuClasses = classnames( - 'fd-menu', - { - 'fd-menu--addon-before': addonBefore - }, - className - ); - - return ( - - ); -}; -Menu.displayName = 'Menu'; - -Menu.propTypes = { - addonBefore: PropTypes.bool, - className: PropTypes.string -}; - -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
      {children}
    ; -}; -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 MenuItem = ({ url, isLink, separator, addon, children, onclick, className, addonProps, urlProps, ...props }) => { const menuItemLinkClasses = classnames( 'fd-menu__item', { @@ -93,6 +49,7 @@ export const MenuItem = ({ url, isLink, separator, addon, children, onclick, cla ); }; + MenuItem.displayName = 'MenuItem'; MenuItem.propTypes = { @@ -115,24 +72,4 @@ MenuItem.propDescriptions = { 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 ( -
    -

    {title}

    - {children} -
    - ); -}; -MenuGroup.displayName = 'MenuGroup'; - -MenuGroup.propTypes = { - title: PropTypes.string.isRequired, - className: PropTypes.string, - titleProps: PropTypes.object -}; +export default MenuItem; diff --git a/src/Menu/MenuList.js b/src/Menu/MenuList.js index f0a79498b..eb460745d 100644 --- a/src/Menu/MenuList.js +++ b/src/Menu/MenuList.js @@ -2,35 +2,7 @@ import classnames from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; -// ------------------------------------------- Menu ------------------------------------------ -export const Menu = ({ addonBefore, children, className, ...props }) => { - const menuClasses = classnames( - 'fd-menu', - { - 'fd-menu--addon-before': addonBefore - }, - className - ); - - return ( - - ); -}; -Menu.displayName = 'Menu'; - -Menu.propTypes = { - addonBefore: PropTypes.bool, - className: PropTypes.string -}; - -Menu.propDescriptions = { - addonBefore: 'Set to **true** enables menu items with add-on before.' -}; - -// ---------------------------------------- Menu List ---------------------------------------- -export const MenuList = ({ children, className, ...props }) => { +const MenuList = ({ children, className, ...props }) => { const menuListClasses = classnames( 'fd-menu__list', className @@ -38,6 +10,7 @@ export const MenuList = ({ children, className, ...props }) => { return
      {children}
    ; }; + MenuList.displayName = 'MenuList'; MenuList.propTypes = { @@ -45,94 +18,4 @@ MenuList.propTypes = { 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 ( -     - {children} - - ); - } else if (children && React.isValidElement(children)) { - const childrenClassnames = classnames( - menuItemLinkClasses, - children.props.className - ); - - return React.cloneElement(children, { - 'className': childrenClassnames, - ...urlProps - }); - } else if (children) { - return ({children}); - } - }; - - return ( - -
  • - {addon && -
    {}
    - } - {renderLink()} -
    • - {separator &&
    } -     - ); -}; -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 or any other component which emits an .', - isLink: 'Set to **true** to style as a link.', - separator: 'Set to **true** to add a horizontal line (separator).', - url: 'Enables use of `` 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 ( -
    -

    {title}

    - {children} -
    - ); -}; -MenuGroup.displayName = 'MenuGroup'; - -MenuGroup.propTypes = { - title: PropTypes.string.isRequired, - className: PropTypes.string, - titleProps: PropTypes.object -}; +export default MenuList; diff --git a/src/Popover/Popover.test.js b/src/Popover/Popover.test.js index 1f4eeb209..a3a545e56 100644 --- a/src/Popover/Popover.test.js +++ b/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('', () => { const popOver = ( diff --git a/src/Shellbar/Shellbar.js b/src/Shellbar/Shellbar.js index 3cce98be9..475a742c2 100644 --- a/src/Shellbar/Shellbar.js +++ b/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 { diff --git a/src/Shellbar/Shellbar.test.js b/src/Shellbar/Shellbar.test.js index f3b05a386..0f37312be 100644 --- a/src/Shellbar/Shellbar.test.js +++ b/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('', () => { const profile1 = { diff --git a/src/Tile/Tile.test.js b/src/Tile/Tile.test.js index 8ce414fd8..aa4428f57 100644 --- a/src/Tile/Tile.test.js +++ b/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('', () => { diff --git a/src/index.js b/src/index.js index 20992cacc..753c862ca 100644 --- a/src/index.js +++ b/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'; From 8127fcc11ebada60a0dc37ea25e2bdba84e2ed8c Mon Sep 17 00:00:00 2001 From: CJ Skillingstad Date: Tue, 26 Feb 2019 11:40:59 -0800 Subject: [PATCH 11/12] Move Menu subcomponents --- src/ActionBar/ActionBar.Component.js | 74 ++++---- src/ComboboxInput/ComboboxInput.Component.js | 58 +++--- src/ComboboxInput/ComboboxInput.test.js | 16 +- .../ContextualMenu.Component.js | 74 ++++---- src/Dropdown/Dropdown.Component.js | 170 ++++++++--------- src/Dropdown/Dropdown.test.js | 14 +- src/Menu/Menu.Component.js | 178 +++++++++--------- src/Menu/Menu.js | 7 + src/Menu/Menu.test.js | 157 ++++++++------- src/Menu/{MenuGroup.js => _MenuGroup.js} | 0 src/Menu/{MenuItem.js => _MenuItem.js} | 0 src/Menu/{MenuList.js => _MenuList.js} | 0 src/Panel/Panel.Component.js | 50 ++--- src/Popover/Popover.Component.js | 98 +++++----- src/Popover/Popover.test.js | 50 +++-- src/Shellbar/Shellbar.Component.js | 54 +++--- src/Shellbar/Shellbar.js | 48 +++-- src/Shellbar/Shellbar.test.js | 44 +++-- src/Table/Table.Component.js | 98 +++++----- src/Tile/Tile.Component.js | 26 +-- src/Tile/Tile.test.js | 26 ++- src/index.js | 3 - 22 files changed, 617 insertions(+), 628 deletions(-) rename src/Menu/{MenuGroup.js => _MenuGroup.js} (100%) rename src/Menu/{MenuItem.js => _MenuItem.js} (100%) rename src/Menu/{MenuList.js => _MenuList.js} (100%) diff --git a/src/ActionBar/ActionBar.Component.js b/src/ActionBar/ActionBar.Component.js index 42e9d0baf..a15b4e3c6 100644 --- a/src/ActionBar/ActionBar.Component.js +++ b/src/ActionBar/ActionBar.Component.js @@ -1,6 +1,6 @@ import path from 'path'; import React from 'react'; -import { ActionBar, Button, Menu, MenuItem, MenuList, Popover } from '../'; +import { ActionBar, Button, Menu, Popover } from '../'; import { Description, DocsText, DocsTile, Header, Import, Properties, Separator } from '../_playground'; export const ActionBarComponent = () => { @@ -32,12 +32,12 @@ const clickBackBtn = () => { control={     } control={} @@ -100,12 +100,12 @@ This component is completely composed from other components CSS and doesn’t ha - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + } control={} diff --git a/src/Dropdown/Dropdown.Component.js b/src/Dropdown/Dropdown.Component.js index ffc6705a3..3e695435a 100644 --- a/src/Dropdown/Dropdown.Component.js +++ b/src/Dropdown/Dropdown.Component.js @@ -1,6 +1,6 @@ import path from 'path'; import React from 'react'; -import { Button, Dropdown, Menu, MenuItem, MenuList, Popover } from '../'; +import { Button, Dropdown, Menu, Popover } from '../'; import { Description, DocsText, DocsTile, Header, Import, Properties, Separator } from '../_playground'; export const DropdownComponent = () => { @@ -11,12 +11,12 @@ export const DropdownComponent = () => { noArrow body={ - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + } /> @@ -33,12 +33,12 @@ export const DropdownComponent = () => { noArrow body={ - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + } /> @@ -55,12 +55,12 @@ export const DropdownComponent = () => { noArrow body={ - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + } /> @@ -77,12 +77,12 @@ export const DropdownComponent = () => { noArrow body={ - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + } /> @@ -99,12 +99,12 @@ export const DropdownComponent = () => { noArrow body={ - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + } /> @@ -121,12 +121,12 @@ export const DropdownComponent = () => { noArrow body={ - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + } /> @@ -144,12 +144,12 @@ export const DropdownComponent = () => { noArrow body={ - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + } /> @@ -177,12 +177,12 @@ export const DropdownComponent = () => { - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + } control={} @@ -194,12 +194,12 @@ export const DropdownComponent = () => { - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + } control={ @@ -224,12 +224,12 @@ export const DropdownComponent = () => { - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + } control={ @@ -245,12 +245,12 @@ export const DropdownComponent = () => { - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + } control={ @@ -275,12 +275,12 @@ export const DropdownComponent = () => { - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + } control={ @@ -296,12 +296,12 @@ export const DropdownComponent = () => { - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + } control={ @@ -326,12 +326,12 @@ export const DropdownComponent = () => { - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + } control={ diff --git a/src/Dropdown/Dropdown.test.js b/src/Dropdown/Dropdown.test.js index 5fe81e195..a463725ee 100644 --- a/src/Dropdown/Dropdown.test.js +++ b/src/Dropdown/Dropdown.test.js @@ -1,8 +1,6 @@ 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'; @@ -11,12 +9,12 @@ import renderer from 'react-test-renderer'; describe('', () => { const defaultMenu = ( - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + ); diff --git a/src/Menu/Menu.Component.js b/src/Menu/Menu.Component.js index 457de4203..8e009c60b 100644 --- a/src/Menu/Menu.Component.js +++ b/src/Menu/Menu.Component.js @@ -1,78 +1,78 @@ import { Link } from 'react-router-dom'; +import { Menu } from '../'; import path from 'path'; import React from 'react'; import { Description, DocsText, DocsTile, Header, Import, Properties, Separator } from '../_playground'; -import { Menu, MenuGroup, MenuItem, MenuList } from '../'; export const MenuComponent = () => { const menuCode = ` - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + `; const menuGroupCode = ` - - + + Option 1 - - + + Option 2 - - + + Option 3 - - - - - + + + + + Option 4 - - + + Option 5 - - + + Option 6 - - - + + + `; const menuSeparatorCode = ` - - + + Option 1 - - + + Option 2 - - + + Option 3 - - + + Option 4 - - + + `; const menuAddonBeforeCode = ` - - + + Option 1 - - + + Option 2 - - + + Option 3 - - + + Option 4 - - + + `; return ( @@ -95,12 +95,12 @@ export const MenuComponent = () => {

    The basic stucture of a menu.

    - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + {menuCode} @@ -110,30 +110,30 @@ export const MenuComponent = () => {

    Menu with grouped sub-menus and group headers.

    - - + + Option 1 - - + + Option 2 - - + + Option 3 - - - - - + + + + + Option 4 - - + + Option 5 - - + + Option 6 - - - + + + {menuGroupCode} @@ -143,20 +143,20 @@ export const MenuComponent = () => {

    Menu items with horizontal line as separator.

    - - + + Option 1 - - + + Option 2 - - + + Option 3 - - + + Option 4 - - + + {menuSeparatorCode} @@ -166,20 +166,20 @@ export const MenuComponent = () => {

    Menu items with an add-on before.

    - - + + Option 1 - - + + Option 2 - - + + Option 3 - - + + Option 4 - - + + {menuAddonBeforeCode} diff --git a/src/Menu/Menu.js b/src/Menu/Menu.js index a0d6c5f1a..85f2573c4 100644 --- a/src/Menu/Menu.js +++ b/src/Menu/Menu.js @@ -1,4 +1,7 @@ import classnames from 'classnames'; +import MenuGroup from './_MenuGroup'; +import MenuItem from './_MenuItem'; +import MenuList from './_MenuList'; import PropTypes from 'prop-types'; import React from 'react'; @@ -29,4 +32,8 @@ Menu.propDescriptions = { addonBefore: 'Set to **true** enables menu items with add-on before.' }; +Menu.Group = MenuGroup; +Menu.Item = MenuItem; +Menu.List = MenuList; + export default Menu; diff --git a/src/Menu/Menu.test.js b/src/Menu/Menu.test.js index 7506d3121..c87253031 100644 --- a/src/Menu/Menu.test.js +++ b/src/Menu/Menu.test.js @@ -1,7 +1,4 @@ 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'; @@ -10,60 +7,60 @@ import { Link, MemoryRouter } from 'react-router-dom'; describe('', () => { const basicMenuCode = ( - - Option 1 - + + Option 1 + Option 2 - - Option 3 - Option 4 - Option 5 - + + Option 3 + Option 4 + Option 5 + ); const menuGroupCode = ( - - + + Option 1 - - + + Option 2 - - + + Option 3 - - - - - + + + + + Option 4 - - + + Option 5 - - + + Option 6 - - - - - - + + + + + + Option 7 - - + + Option 8 - - + + Option 9 - - - + + + ); @@ -71,20 +68,20 @@ describe('', () => { const menuSeparatorCode = ( - - + + Option 1 - - + + Option 2 - - + + Option 3 - - + + Option 4 - - + + ); @@ -92,20 +89,20 @@ describe('', () => { const menuAddonBeforeCode = ( - - + + Option 1 - - + + Option 2 - - + + Option 3 - - + + Option 4 - - + + ); @@ -144,7 +141,7 @@ describe('', () => { }); test('should allow props to be spread to the MenuList component', () => { - const element = mount(); + const element = mount(); expect( element.getDOMNode().attributes['data-sample'].value @@ -152,7 +149,7 @@ describe('', () => { }); test('should allow props to be spread to the MenuItem component', () => { - const element = mount(); + const element = mount(); expect( element.getDOMNode().attributes['data-sample'].value @@ -163,20 +160,20 @@ describe('', () => { const element = mount( - - + + Option 1 - - + + Option 2 - - + + Option 3 - - + + Option 4 - - + + ); @@ -189,11 +186,11 @@ describe('', () => { const element = mount( - - + + - - + + ); @@ -205,9 +202,9 @@ describe('', () => { test('should allow props to be spread to the MenuItem component\'s a element', () => { const element = mount( - - - + + + ); @@ -217,7 +214,7 @@ describe('', () => { }); test('should allow props to be spread to the MenuGroup component', () => { - const element = mount(); + const element = mount(); expect( element.getDOMNode().attributes['data-sample'].value @@ -225,7 +222,7 @@ describe('', () => { }); test('should allow props to be spread to the MenuGroup h1 component', () => { - const element = mount(); + const element = mount(); expect( element.find('h1').getDOMNode().attributes['data-sample'].value diff --git a/src/Menu/MenuGroup.js b/src/Menu/_MenuGroup.js similarity index 100% rename from src/Menu/MenuGroup.js rename to src/Menu/_MenuGroup.js diff --git a/src/Menu/MenuItem.js b/src/Menu/_MenuItem.js similarity index 100% rename from src/Menu/MenuItem.js rename to src/Menu/_MenuItem.js diff --git a/src/Menu/MenuList.js b/src/Menu/_MenuList.js similarity index 100% rename from src/Menu/MenuList.js rename to src/Menu/_MenuList.js diff --git a/src/Panel/Panel.Component.js b/src/Panel/Panel.Component.js index 2be139c50..a79026e73 100644 --- a/src/Panel/Panel.Component.js +++ b/src/Panel/Panel.Component.js @@ -1,6 +1,6 @@ import path from 'path'; import React from 'react'; -import { Button, Image, Menu, MenuItem, MenuList, Panel, PanelActions, PanelBody, PanelFilters, PanelFooter, PanelGrid, PanelHead, PanelHeader, Popover, Tile, TileContent, TileMedia, Token } from '../'; +import { Button, Image, Menu, Panel, PanelActions, PanelBody, PanelFilters, PanelFooter, PanelGrid, PanelHead, PanelHeader, Popover, Tile, TileContent, TileMedia, Token } from '../'; import { DocsText, DocsTile, Header, Import, Properties, Separator } from '../_playground'; export const PanelComponent = () => { @@ -20,12 +20,12 @@ export const PanelComponent = () => { control={} body={ - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + } noArrow @@ -34,12 +34,12 @@ export const PanelComponent = () => { control={} body={ - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + } noArrow @@ -223,12 +223,12 @@ export const PanelComponent = () => { - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + } control={} @@ -236,12 +236,12 @@ export const PanelComponent = () => { - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + } control={} diff --git a/src/Popover/Popover.Component.js b/src/Popover/Popover.Component.js index 63455fcd1..718e4c9d4 100644 --- a/src/Popover/Popover.Component.js +++ b/src/Popover/Popover.Component.js @@ -1,7 +1,7 @@ import path from 'path'; import React from 'react'; import { Description, DocsText, DocsTile, Header, Import, Properties, Separator } from '../_playground'; -import { Icon, Identifier, Image, Menu, MenuItem, MenuList, Popover } from '../'; +import { Icon, Identifier, Image, Menu, Popover } from '../'; export const PopoverComponent = () => { const popoverCode = ` { control={} body={ - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + } /> @@ -25,12 +25,12 @@ export const PopoverComponent = () => { control={} body={ - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + } /> @@ -41,12 +41,12 @@ export const PopoverComponent = () => { noArrow body={ - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + } /> @@ -58,12 +58,12 @@ export const PopoverComponent = () => { noArrow body={ - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + } />`; @@ -93,12 +93,12 @@ export const PopoverComponent = () => { - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + } control={} @@ -108,12 +108,12 @@ export const PopoverComponent = () => { alignment='right' body={ - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + } control={ { - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + } control={ { alignment='right' body={ - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + } control={} diff --git a/src/Popover/Popover.test.js b/src/Popover/Popover.test.js index a3a545e56..cc255e835 100644 --- a/src/Popover/Popover.test.js +++ b/src/Popover/Popover.test.js @@ -1,7 +1,5 @@ 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'; @@ -12,12 +10,12 @@ describe('', () => { - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + } control={} /> @@ -27,12 +25,12 @@ describe('', () => { - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + } className='blue' @@ -45,12 +43,12 @@ describe('', () => { alignment='right' body={ - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + } control={} /> @@ -60,12 +58,12 @@ describe('', () => { - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + } control={} diff --git a/src/Shellbar/Shellbar.Component.js b/src/Shellbar/Shellbar.Component.js index cd7f0655e..1ee1fe3f1 100644 --- a/src/Shellbar/Shellbar.Component.js +++ b/src/Shellbar/Shellbar.Component.js @@ -1,7 +1,7 @@ +import { Menu } from '../'; import path from 'path'; import { Shellbar } from '..'; import { Description, DocsText, DocsTile, Header, Import, Properties, Separator } from '../_playground'; -import { Menu, MenuItem, MenuList } from '../'; import React, { Component } from 'react'; var images = require.context('../../assets', true); @@ -135,11 +135,11 @@ actions = [ callback: () => alert('Settings selected!'), menu: ( - - Option 1 - Option 2 - Option 3 - + + Option 1 + Option 2 + Option 3 + ) } @@ -150,18 +150,18 @@ notifications2 = { label: 'Notifications', notificationsBody: ( - - Notification 1 - Notification 2 - Notification 3 - + + Notification 1 + Notification 2 + Notification 3 + ), noNotificationsBody: ( - - There are no notifications - + + There are no notifications + ), callback: () => alert('Notification selected!') @@ -250,11 +250,11 @@ productSwitcher = { callback: () => alert('Settings selected!'), menu: ( - - Option 1 - Option 2 - Option 3 - + + Option 1 + Option 2 + Option 3 + ) } @@ -265,18 +265,18 @@ productSwitcher = { label: 'Notifications', notificationsBody: ( - - Notification 1 - Notification 2 - Notification 3 - + + Notification 1 + Notification 2 + Notification 3 + ), noNotificationsBody: ( - - There are no notifications - + + There are no notifications + ), callback: () => alert('Notification selected!') diff --git a/src/Shellbar/Shellbar.js b/src/Shellbar/Shellbar.js index 475a742c2..ce24946a4 100644 --- a/src/Shellbar/Shellbar.js +++ b/src/Shellbar/Shellbar.js @@ -3,8 +3,6 @@ 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'; @@ -127,13 +125,13 @@ export class Shellbar extends Component { body={ productMenu && ( - + {productMenu.map((item, index) => { return ( - {item.glyph && ( @@ -142,10 +140,10 @@ export class Shellbar extends Component { )} {item.name} - + ); })} - + ) } @@ -256,40 +254,40 @@ export class Shellbar extends Component { body={ {!this.state.showCollapsedProductSwitcherMenu ? ( - + {this.state.collapsedActions.map((item, index) => { return ( - {item.notificationCount > 0 && {item.notificationCount}} {item.label} - + ); })} - + ) : ( - - + + - + {productSwitcherList.map((item, index) => { return ( - {item.title} - + ); })} - + )} } @@ -313,14 +311,14 @@ export class Shellbar extends Component { body={ profileMenu && ( - - {profile.userName} + + {profile.userName} {profileMenu.map((item, index) => { return ( - {item.glyph && ( @@ -329,10 +327,10 @@ export class Shellbar extends Component { )} {item.name} - + ); })} - + ) } diff --git a/src/Shellbar/Shellbar.test.js b/src/Shellbar/Shellbar.test.js index 0f37312be..3d8e8c06b 100644 --- a/src/Shellbar/Shellbar.test.js +++ b/src/Shellbar/Shellbar.test.js @@ -1,6 +1,4 @@ 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'; @@ -70,11 +68,11 @@ describe('', () => { callback: () => alert('Settings selected!'), menu: ( - - Option 1 - Option 2 - Option 3 - + + Option 1 + Option 2 + Option 3 + ) } @@ -94,18 +92,18 @@ describe('', () => { label: 'Notifications', notificationsBody: ( - - Notification 1 - Notification 2 - Notification 3 - + + Notification 1 + Notification 2 + Notification 3 + ), noNotificationsBody: ( - - There are no notifications - + + There are no notifications + ), callback: () => alert('Notification selected!') @@ -116,18 +114,18 @@ describe('', () => { label: 'Notifications', notificationsBody: ( - - Notification 1 - Notification 2 - Notification 3 - + + Notification 1 + Notification 2 + Notification 3 + ), noNotificationsBody: ( - - There are no notifications - + + There are no notifications + ), callback: () => alert('Notification selected!') diff --git a/src/Table/Table.Component.js b/src/Table/Table.Component.js index e85937454..8816d9fe8 100644 --- a/src/Table/Table.Component.js +++ b/src/Table/Table.Component.js @@ -1,7 +1,7 @@ /* eslint-disable jsx-a11y/anchor-is-valid */ import path from 'path'; import React from 'react'; -import { Button, Image, Menu, MenuItem, MenuList, Popover, Table } from '../'; +import { Button, Image, Menu, Popover, Table } from '../'; import { Description, DocsText, DocsTile, Header, Import, Properties, Separator } from '../_playground'; export const TableComponent = () => { @@ -34,12 +34,12 @@ export const TableComponent = () => { control={ } control={ } control={ } control={