feat(menu): Vertical menu (#21)

* feat(menu): Vertical menu - initial impl

* feat(menu): Vertical menu - fixed width

* refactor(menu): add typings

Author: miroslavstastny

CHANGELOG.md

@@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### Features
+- Add Menu `vertical` prop @miroslavstastny ([#21](https://github.com/stardust-ui/react/pull/21))
+
 ### Documentation
 - Improve UX for "knobs" form on component examples @levithomason ([#20](https://github.com/stardust-ui/react/pull/20))
 

docs/src/examples/components/Menu/Types/MenuExampleVertical.shorthand.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Menu } from '@stardust-ui/react'
+
+const items = [
+  { key: 'editorials', content: 'Editorials' },
+  { key: 'review', content: 'Reviews' },
+  { key: 'events', content: 'Upcoming Events' },
+]
+
+class MenuExampleVerticalShorthand extends React.Component {
+  render() {
+    return <Menu defaultActiveIndex={0} items={items} vertical />
+  }
+}
+
+export default MenuExampleVerticalShorthand

docs/src/examples/components/Menu/Types/MenuExampleVertical.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import _ from 'lodash'
+import { Menu, MenuItem } from '@stardust-ui/react'
+
+const items = [
+  { key: 'editorials', content: 'Editorials' },
+  { key: 'review', content: 'Reviews' },
+  { key: 'events', content: 'Upcoming Events' },
+]
+
+class MenuExampleVertical extends React.Component {
+  state = { activeIndex: 0 }
+
+  handleItemClick = activeIndex => () => {
+    this.setState({ activeIndex })
+  }
+
+  render() {
+    const { activeIndex } = this.state
+
+    return (
+      <Menu vertical>
+        {_.times(3, i => {
+          return (
+            <MenuItem
+              key={items[i].key}
+              onClick={this.handleItemClick(i)}
+              content={items[i].content}
+              vertical
+              active={activeIndex === i}
+            />
+          )
+        })}
+      </Menu>
+    )
+  }
+}
+
+export default MenuExampleVertical

docs/src/examples/components/Menu/Types/index.tsx

@@ -14,6 +14,11 @@ const Types = () => (
       description="A menu can point to show its relationship to nearby content."
       examplePath="components/Menu/Types/MenuExamplePrimary"
     />
+    <ComponentExample
+      title="Vertical Menu"
+      description="A vertical menu displays elements vertically."
+      examplePath="components/Menu/Types/MenuExampleVertical"
+    />
   </ExampleSection>
 )
 

src/components/Menu/Menu.tsx

@@ -1,13 +1,28 @@
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { ReactNode } from 'react'
 
 import { AutoControlledComponent, childrenExist, customPropTypes } from '../../lib'
 import MenuItem from './MenuItem'
 import menuRules from './menuRules'
 import menuVariables from './menuVariables'
 
-class Menu extends AutoControlledComponent<any, any> {
+export type MenuType = 'primary' | 'secondary'
+export type MenuShape = 'pills' | 'pointing' | 'underlined'
+
+export interface IMenuProps {
+  as?: string
+  activeIndex?: number | string
+  children?: ReactNode
+  className?: string
+  defaultActiveIndex?: number | string
+  items?: any
+  shape?: MenuShape
+  type?: MenuType
+  vertical?: boolean
+}
+
+class Menu extends AutoControlledComponent<IMenuProps, any> {
   static displayName = 'Menu'
 
   static className = 'ui-menu'
@@ -35,10 +50,13 @@ class Menu extends AutoControlledComponent<any, any> {
     /** Shorthand array of props for Menu. */
     items: customPropTypes.collectionShorthand,
 
+    shape: PropTypes.oneOf(['pills', 'pointing', 'underlined']),
+
     /** The menu can have primary or secondary type */
     type: PropTypes.oneOf(['primary', 'secondary']),
 
-    shape: PropTypes.oneOf(['pills', 'pointing', 'underlined']),
+    /** A vertical menu displays elements vertically. */
+    vertical: PropTypes.bool,
   }
 
   static defaultProps = {
@@ -54,6 +72,7 @@ class Menu extends AutoControlledComponent<any, any> {
     'items',
     'shape',
     'type',
+    'vertical',
   ]
 
   static autoControlledProps = ['activeIndex']
@@ -73,14 +92,15 @@ class Menu extends AutoControlledComponent<any, any> {
   })
 
   renderItems = () => {
-    const { items, type, shape } = this.props
+    const { items, type, shape, vertical } = this.props
     const { activeIndex } = this.state
 
     return _.map(items, (item, index) =>
       MenuItem.create(item, {
         defaultProps: {
           type,
           shape,
+          vertical,
           index,
           active: parseInt(activeIndex, 10) === index,
         },

src/components/Menu/MenuItem.tsx

@@ -1,14 +1,29 @@
 import _ from 'lodash'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { ReactNode } from 'react'
 
 import { childrenExist, createShorthandFactory, customPropTypes, UIComponent } from '../../lib'
 
+import { MenuType, MenuShape } from './Menu'
+
 import menuItemRules from './menuItemRules'
 import menuVariables from './menuVariables'
 
-class MenuItem extends UIComponent<any, any> {
+export interface IMenuItemProps {
+  active?: boolean
+  as?: string
+  children?: ReactNode
+  className?: string
+  content?: ReactNode
+  index?: number
+  onClick?: (any, IMenuItemProps) => void
+  shape?: MenuShape
+  type?: MenuType
+  vertical?: boolean
+}
+
+class MenuItem extends UIComponent<IMenuItemProps, any> {
   static displayName = 'MenuItem'
 
   static className = 'ui-menu__item'
@@ -47,13 +62,13 @@ class MenuItem extends UIComponent<any, any> {
      */
     onClick: PropTypes.func,
 
-    /** A menu can point to show its relationship to nearby content. */
-    pointing: PropTypes.bool,
+    shape: PropTypes.oneOf(['pills', 'pointing', 'underlined']),
 
     /** The menu can have primary or secondary type */
     type: PropTypes.oneOf(['primary', 'secondary']),
 
-    shape: PropTypes.oneOf(['pills', 'pointing', 'underlined']),
+    /** A vertical menu displays elements vertically. */
+    vertical: PropTypes.bool,
   }
 
   static defaultProps = {
@@ -68,9 +83,9 @@ class MenuItem extends UIComponent<any, any> {
     'content',
     'index',
     'onClick',
-    'pointing',
     'shape',
     'type',
+    'vertical',
   ]
 
   handleClick = e => {

src/components/Menu/menuItemRules.ts

@@ -1,12 +1,37 @@
 import { pxToRem } from '../../lib'
+import { IMenuItemProps } from './MenuItem'
 
 const underlinedItem = (color: string) => ({
   borderBottom: `solid 5px ${color}`,
   transition: 'color .1s ease',
 })
 
+const itemSeparator = ({ props, variables }: { props: IMenuItemProps; variables: any }) => {
+  const { active, shape, type, vertical } = props
+  return {
+    ...((!shape || shape === 'pointing') && {
+      ':before': {
+        position: 'absolute',
+        content: '""',
+        top: 0,
+        right: 0,
+        ...(vertical ? { width: '100%', height: '1px' } : { width: '1px', height: '100%' }),
+        background: variables.defaultBorderColor,
+        ...(type === 'primary' && {
+          background: variables.typePrimaryBorderColor,
+        }),
+      },
+      ...(vertical && {
+        ':first-child:before': {
+          display: 'none',
+        },
+      }),
+    }),
+  }
+}
+
 export default {
-  root: ({ props, variables }) => {
+  root: ({ props, variables }: { props: IMenuItemProps; variables: any }) => {
     const { active, shape, type } = props
     return {
       color: variables.defaultColor,
@@ -26,20 +51,7 @@ export default {
         boxShadow: 'none',
         color: variables.defaultColor,
       }),
-      ...((!shape || shape === 'pointing') && {
-        ':before': {
-          position: 'absolute',
-          content: '""',
-          top: 0,
-          right: 0,
-          height: '100%',
-          width: '1px',
-          background: variables.defaultBorderColor,
-          ...(type === 'primary' && {
-            background: variables.typePrimaryBorderColor,
-          }),
-        },
-      }),
+      ...itemSeparator({ props, variables }),
 
       ':hover': {
         color: variables.defaultActiveColor,

src/components/Menu/menuRules.ts

@@ -1,14 +1,19 @@
 import { pxToRem } from '../../lib'
+import { IMenuProps } from './Menu'
 
 const solidBorder = (color: string) => ({
   border: `1px solid ${color}`,
 })
 
 export default {
-  root: ({ props, variables }) => {
-    const { type, shape } = props
+  root: ({ props, variables }: { props: IMenuProps; variables: any }) => {
+    const { type, shape, vertical } = props
     return {
       display: 'flex',
+      ...(vertical && {
+        flexDirection: 'column',
+        width: pxToRem(200),
+      }),
       ...(shape !== 'pills' &&
         shape !== 'underlined' && {
           ...solidBorder(variables.defaultBorderColor),