fix(Menu): fixes menu's layout

src/atoms/atoms.js

@@ -17,7 +17,6 @@ export { Input } from './dataEntry/Input';
 export { InputField } from './dataEntry/InputField';
 export { Label } from './typography/Label';
 export { Link } from './typography/Link';
-export { Menu } from './Menu';
 export { Modal } from './Modal';
 export { Navigation } from './Navigation';
 export { Paper } from './Paper';

src/atoms/theme.js

@@ -16,7 +16,6 @@ import { theme as inputFieldTheme } from './dataEntry/InputField';
 import { theme as inputTheme } from './dataEntry/Input';
 import { theme as labelTheme } from './typography/Label';
 import { theme as linkTheme } from './typography/Link';
-import { theme as menuTheme } from './Menu';
 import { theme as modalTheme } from './Modal';
 import { theme as navigationTheme } from './Navigation';
 import { theme as paperTheme } from './Paper';
@@ -50,7 +49,6 @@ export const theme = {
   ...inputTheme,
   ...labelTheme,
   ...linkTheme,
-  ...menuTheme,
   ...modalTheme,
   ...navigationTheme,
   ...paperTheme,

src/molecules/Menu/Menu.stories.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+export default (asStory) => {
+  asStory('MOLECULES/Menu', module, (story, { Menu }) => {
+    story
+      .add('with some items', () => (
+        <Menu.Plate>
+          <Menu.Item>Tramman</Menu.Item>
+          <Menu.Item>Gripman</Menu.Item>
+          <Menu.Item>Proalliance</Menu.Item>
+        </Menu.Plate>
+      ));
+  });
+};

src/atoms/Menu/MenuItem.js → src/molecules/Menu/MenuItem.js

@@ -2,45 +2,29 @@ import React from 'react';
 
 import { createStyledTag, createTheme } from '../../utils';
 import { GREY_COLORS } from '../../theme/dsmColors';
-import { SizeContext } from './SizeContext';
 
 type MenuItemProps = {|
   children?: React$Node,
 |};
 
 const NAME = 'menuItem';
 
-const theme = createTheme(NAME, {
-  modifiers: {
-    size: {
-      s: {
-        height: '3.2rem',
-        lineHeight: '3.2rem',
-        paddingRight: '1.6rem',
-        paddingLeft: '1.6rem',
-      },
-      m: {
-        height: '4rem',
-        lineHeight: '2.3rem',
-        paddingRight: '1.9rem',
-        paddingLeft: '1.9rem',
-      },
-    },
-  },
-  defaults: {
-    size: 's',
-  },
-});
+const theme = createTheme(NAME, {});
 
 const StyledTag = createStyledTag(NAME, () => ({
   color: GREY_COLORS.DARK_GREY_2,
   fontFamily: 'Poppins',
   fontSize: '14px',
   fontWeight: 400,
+  lineHeight: '2.3rem',
+
   display: 'flex',
   alignItems: 'center',
   cursor: 'pointer',
   whiteSpace: 'nowrap',
+  height: '4rem',
+  paddingRight: '1.9rem',
+  paddingLeft: '1.9rem',
 
   '&:hover': {
     backgroundColor: GREY_COLORS.LIGHT_GREY_3,
@@ -49,13 +33,9 @@ const StyledTag = createStyledTag(NAME, () => ({
 }));
 
 const MenuItem = ({ children, ...rest }: MenuItemProps) => (
-  <SizeContext.Consumer>
-    { size => (
-      <StyledTag tagName="div" size={ size } { ...rest } >
-        { children }
-      </StyledTag>
-    ) }
-  </SizeContext.Consumer>
+  <StyledTag tagName="div" { ...rest } >
+    { children }
+  </StyledTag>
 );
 
 MenuItem.displayName = 'Menu.Item';

src/molecules/Menu/MenuPlate.js

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import { createStyledTag, createTheme } from '../../utils';
+import { Paper } from '../../atoms/';
+
+type MenuPlateProps = {|
+  children?: React$Node,
+|};
+
+const NAME = 'menuPlate';
+
+const theme = createTheme(NAME, {});
+
+const StyledTag = createStyledTag(NAME, () => ({
+  display: 'flex',
+  flexDirection: 'column',
+  boxSizing: 'border-box',
+  paddingTop: '.8rem',
+  paddingBottom: '.8rem',
+  overflow: 'hidden',
+}));
+
+const MenuPlate = ({ children, ...rest }: MenuPlateProps) => (
+  <Paper padding="none" borderRadius="all">
+    <StyledTag tagName="div" { ...rest } >
+      { children }
+    </StyledTag>
+  </Paper>
+);
+
+MenuPlate.displayName = 'Menu.Plate';
+
+export { MenuPlate, theme };

src/molecules/molecules.js

@@ -2,3 +2,4 @@
 
 export { Rating } from './Rating';
 export { ButtonGroup } from './ButtonGroup';
+export { Menu } from './Menu';

src/molecules/theme.js

@@ -1,7 +1,9 @@
 // @flow
 
 import { theme as buttonGroupTheme } from './ButtonGroup';
+import { theme as menuTheme } from './Menu';
 
 export const theme = {
   ...buttonGroupTheme,
+  ...menuTheme,
 };