Merge pull request #18 from stoplightio/SL-652/menu-component

SL-652/menu component

README.md

@@ -35,6 +35,7 @@ TODO
     - Heading
     - List
     - Portal
+    - Menu
     - Text
     - Table
 
@@ -71,6 +72,7 @@ yarn storybook
 ```
 
 ### Linking to another package
+
 ```bash
 # install dependencies
 yarn setup

src/ContextMenu.tsx

@@ -11,6 +11,10 @@ import { ITextProps, Text } from './Text';
 import { styled } from './utils';
 
 // TODO: expose SubMenu component
+// TODO: allow custom renderMenu
+// TODO: allow custom renderMenuItem?
+// TODO: add icon support to menu items
+// TODO: Context Menu should probably leverage/use MENU
 
 /**
  * CONTEXT MENU
@@ -56,14 +60,14 @@ interface IMenuProps extends IBoxProps {
   onShow?: (event: any) => void;
 }
 
-export const Menu = styled<IMenuProps, 'div'>(Box as any).attrs({
+const Menu = styled<IMenuProps, 'div'>(Box as any).attrs({
   as: () => (props: IMenuProps) => {
     const { menuItems = [], ...rest } = props;
 
     return (
       <ReactContextMenu {...rest}>
         {menuItems.map((item: IMenuItemProps) => {
-          return <MenuItem {...item} {...item.attributes} />;
+          return <ContextMenuItem {...item} {...item.attributes} />;
         })}
       </ReactContextMenu>
     );
@@ -100,7 +104,7 @@ interface IMenuItemProps extends ITextProps {
   attributes?: ITextProps;
 }
 
-export const MenuItem = styled<IMenuItemProps, 'div'>(Text as any).attrs({
+export const ContextMenuItem = styled<IMenuItemProps, 'div'>(Text as any).attrs({
   as: () => (props: IMenuItemProps) => {
     const { className, title, divider, disabled, onClick, preventClose } = props;
 

src/Menu.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+
+import { Box, IBoxProps } from './Box';
+import { Flex } from './Flex';
+import { Icon, IIcon } from './Icon';
+
+// TODO allow dividers in the menu
+// TODO allow custom renderMenu
+// TODO allow custom renderMenuItem
+// TODO allow custom renderTrigger to make this a popup type component
+
+/**
+ * MENU
+ */
+export interface IMenuProps {
+  menuItems: IMenuItemProps[];
+
+  attributes?: IBoxProps;
+}
+
+export const Menu = (props: IMenuProps) => {
+  const { menuItems = [], attributes = {} } = props;
+
+  return (
+    <Box
+      fg="menu.fg"
+      bg="menu.bg"
+      borderColor="menu.border"
+      border="xs"
+      radius="md"
+      display="inline-block"
+      {...attributes}
+    >
+      {menuItems.map((item: IMenuItemProps, index: number) => (
+        <MenuItem key={index} {...item} />
+      ))}
+    </Box>
+  );
+};
+
+/**
+ * MENU ITEM
+ */
+
+export interface IMenuItemProps {
+  className?: string;
+  children?: any;
+
+  title?: any;
+  subtitle?: any;
+  icon?: IIcon;
+  disabled?: boolean;
+
+  onClick?: (event: React.MouseEvent) => any;
+  attributes?: IBoxProps;
+}
+
+export const MenuItem = (props: IMenuItemProps) => {
+  const { icon, title, subtitle, disabled, onClick, attributes = {} } = props;
+
+  return (
+    <Flex
+      items="center"
+      px="lg"
+      py="md"
+      text="md"
+      cursor={disabled ? 'not-allowed' : onClick ? 'pointer' : 'default'}
+      opacity={disabled && 0.6}
+      onClick={onClick}
+      {...attributes}
+    >
+      {icon && <Icon icon={icon} pr={(title || subtitle) && 'xl'} />}
+
+      {(title || subtitle) && (
+        <span>
+          {title && <Box>{title}</Box>}
+          {subtitle && <Box text="sm">{subtitle}</Box>}
+        </span>
+      )}
+    </Flex>
+  );
+};

src/__tests__/Menu.spec.tsx

@@ -0,0 +1,75 @@
+/**
+ * @jest-environment jsdom
+ */
+import { mount, shallow } from 'enzyme';
+import 'jest-enzyme';
+import * as React from 'react';
+
+import * as _solidIcons from '@fortawesome/free-solid-svg-icons';
+
+import { Icon, IconLibrary, IThemeInterface, Menu, MenuItem } from '../index';
+import { ThemeProvider } from '../utils';
+
+describe('Menu', () => {
+  it('renders items', () => {
+    const children = <span>test</span>;
+
+    const wrapper = shallow(<Menu menuItems={[{ title: children }, { title: 'second elem' }]} />);
+
+    expect(wrapper.children().length).toBe(2);
+  });
+});
+
+describe('MenuItem', () => {
+  // TODO fixme fails because we need to register the icons
+  it('renders proper Icon', () => {
+    const theme = { base: {} } as IThemeInterface;
+    const { fas } = _solidIcons;
+
+    IconLibrary.add(fas);
+
+    const wrapper = mount(
+      <ThemeProvider theme={theme}>
+        <MenuItem icon="globe" />
+      </ThemeProvider>
+    );
+
+    expect(wrapper.find(Icon)).toExist();
+    expect(wrapper.find(Icon)).toHaveProp('icon', 'globe');
+    wrapper.unmount();
+  });
+
+  it('propagates onClick event', () => {
+    const onClick = jest.fn();
+    const event = { type: 'click' };
+    const wrapper = shallow(<MenuItem onClick={onClick} />);
+
+    wrapper.simulate('click', event);
+
+    expect(onClick).toHaveBeenCalledWith(event);
+  });
+
+  it('renders proper title', () => {
+    const text = <h4>menu entry</h4>;
+    const wrapper = mount(<MenuItem title={text} />);
+
+    expect(wrapper).toContainReact(text);
+    wrapper.unmount();
+  });
+
+  it('renders subTitle', () => {
+    const subText = <h4>sub text</h4>;
+    const wrapper = mount(<MenuItem title="text" subtitle={subText} />);
+
+    expect(wrapper).toContainReact(subText);
+    wrapper.unmount();
+  });
+
+  it('does render subTitle only if title is missing', () => {
+    const subText = <h4>test</h4>;
+    const wrapper = mount(<MenuItem subtitle={subText} />);
+
+    expect(wrapper).toContainReact(subText);
+    wrapper.unmount();
+  });
+});

src/index.tsx

@@ -11,6 +11,7 @@ export * from './Flex';
 export * from './Heading';
 export * from './Icon';
 export * from './List';
+export * from './Menu';
 export * from './Table';
 export * from './Text';
 export * from './ThemeSection';

src/utils/rules.ts

@@ -244,7 +244,7 @@ const getSpaceValue = scale => propVal => {
     }
 
     // check the theme config for a value, or just use the prop
-    val = scale[val] || val;
+    val = scale !== undefined ? scale[val] : val;
   }
 
   // if was negative string/add the '-' back

stories/Menu.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+
+import { withKnobs } from '@storybook/addon-knobs';
+import { storiesOf } from '@storybook/react';
+
+import { action } from '@storybook/addon-actions';
+import { Menu } from '../src/';
+
+storiesOf('Menu', module)
+  .addDecorator(withKnobs)
+  .add('with defaults', () => (
+    <Menu
+      menuItems={[
+        { onClick: action('onClick'), title: <span>Has onClick</span> },
+        { title: 'No onClick' },
+        { title: 'Disabled Item', disabled: true },
+      ]}
+    />
+  ))
+
+  .add('with icons', () => (
+    <Menu
+      menuItems={[
+        { onClick: action('onClick'), title: <span>Has onClick</span>, icon: 'marker' },
+        { title: 'No onClick', icon: 'image' },
+        { title: 'Disabled Item', disabled: true, icon: 'times-circle' },
+      ]}
+    />
+  ))
+  .add('with icons only', () => (
+    <Menu
+      menuItems={[
+        { onClick: action('onClick'), icon: 'marker' },
+        { icon: 'image' },
+        { disabled: true, icon: 'times-circle' },
+      ]}
+    />
+  ))
+  .add('with subtext', () => (
+    <Menu
+      menuItems={[
+        { onClick: action('onClick'), title: <span>Has onClick</span>, subtitle: 'has subtitle', icon: 'marker' },
+        { title: 'No onClick', icon: 'image' },
+        { title: 'Disabled Item', disabled: true, icon: 'times-circle' },
+      ]}
+    />
+  ));

stories/index.ts

@@ -10,6 +10,7 @@ import './Image';
 import './Input';
 import './KitchenSink';
 import './List';
+import './Menu';
 import './Table';
 import './Text';
 import './Textarea';