feat(Menu): Update to v1 API (#382)

* fix(Menu) Initial update

* fix(Menu) Update utils usage

* fix(Menu) More docs

* fix(Menu): rebase to master

* test(Menu): add, update, and fix tests

* docs(Menu): More docs and props

* docs(Menu): More docs and props

* fix(MenuItem): add dangling comma

* feat(Menu): Update tests

* feat(Menu): Start Case name prop as text

docs/app/Examples/collections/Menu/Content/Buttons.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Button, Menu } from 'stardust'
+
+// TODO: Update <Button> usage after its update to v1 API
+
+const Buttons = () => {
+  return (
+    <Menu>
+      <Menu.Item>
+        <Button className='primary'>Sign up</Button>
+      </Menu.Item>
+
+      <Menu.Item>
+        <Button>Log-in</Button>
+      </Menu.Item>
+    </Menu>
+  )
+}
+
+export default Buttons

docs/app/Examples/collections/Menu/Content/DropdownItem.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Dropdown, Menu } from 'stardust'
+
+const DropdownItem = () => {
+  return (
+    <Menu vertical>
+      <Dropdown as={Menu.Item} text='Categories'>
+        <Dropdown.Menu>
+          <Dropdown.Item>Electronics</Dropdown.Item>
+          <Dropdown.Item>Automotive</Dropdown.Item>
+          <Dropdown.Item>Home</Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+    </Menu>
+  )
+}
+
+export default DropdownItem

docs/app/Examples/collections/Menu/Content/Header.js

@@ -0,0 +1,21 @@
+import React, { Component } from 'react'
+import { Menu } from 'stardust'
+
+export default class Header extends Component {
+  state = {}
+
+  handleItemClick = (e, { name }) => this.setState({ activeItem: name })
+
+  render() {
+    const { activeItem } = this.state
+
+    return (
+      <Menu>
+        <Menu.Item header>Our Company</Menu.Item>
+        <Menu.Item name='aboutUs' active={activeItem === 'aboutUs'} onClick={this.handleItemClick} />
+        <Menu.Item name='jobs' active={activeItem === 'jobs'} onClick={this.handleItemClick} />
+        <Menu.Item name='locations' active={activeItem === 'locations'} onClick={this.handleItemClick} />
+      </Menu>
+    )
+  }
+}

docs/app/Examples/collections/Menu/Content/Inputs.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import { Button, Input, Menu } from 'stardust'
+
+// TODO: Update <Input> usage after update to v1 API
+
+const Inputs = () => {
+  return (
+    <Menu>
+      <Menu.Item>
+        <Input className='icon' icon='search' placeholder='Search...' />
+      </Menu.Item>
+
+      <Menu.Item position='right'>
+        <Input className='action' placeholder='Navigate to...'>
+          <Button type='submit'>Go</Button>
+        </Input>
+      </Menu.Item>
+    </Menu>
+  )
+}
+
+export default Inputs

docs/app/Examples/collections/Menu/Content/LinkItem.js

@@ -0,0 +1,22 @@
+import React, { Component } from 'react'
+import { Menu, Message } from 'stardust'
+
+export default class LinkItem extends Component {
+  handleClick = () => this.setState({ message: 'onClick handled' })
+
+  render() {
+    const { message } = this.state || {}
+
+    return (
+      <div>
+        <Menu vertical>
+          <Menu.Item href='//google.com' target='_blank'>Visit Google</Menu.Item>
+          <Menu.Item link>Link via prop</Menu.Item>
+          <Menu.Item onClick={this.handleClick}>Javascript Link</Menu.Item>
+        </Menu>
+
+        {message && <Message content={message} />}
+      </div>
+    )
+  }
+}

docs/app/Examples/collections/Menu/Content/Menus.js

@@ -0,0 +1,34 @@
+import React, { Component } from 'react'
+import { Menu } from 'stardust'
+
+export default class Menus extends Component {
+  state = {}
+
+  handleItemClick = (e, { name }) => this.setState({ activeItem: name })
+
+  render() {
+    const { activeItem } = this.state
+
+    return (
+      <Menu>
+        <Menu.Item name='browse' active={activeItem === 'browse'} onClick={this.handleItemClick}>
+          Browse
+        </Menu.Item>
+
+        <Menu.Item name='submit' active={activeItem === 'submit'} onClick={this.handleItemClick}>
+          Submit
+        </Menu.Item>
+
+       <Menu.Menu position='right'>
+         <Menu.Item name='signup' active={activeItem === 'signup'} onClick={this.handleItemClick}>
+           Sign Up
+         </Menu.Item>
+
+         <Menu.Item name='help' active={activeItem === 'help'} onClick={this.handleItemClick}>
+           Help
+         </Menu.Item>
+       </Menu.Menu>
+      </Menu>
+    )
+  }
+}

docs/app/Examples/collections/Menu/Content/SubMenu.js

@@ -0,0 +1,52 @@
+import React, { Component } from 'react'
+import { Dropdown, Icon, Input, Menu } from 'stardust'
+
+export default class SubMenu extends Component {
+  state = {}
+
+  handleItemClick = (e, { name }) => this.setState({ activeItem: name })
+
+  render() {
+    const { activeItem } = this.state
+
+    return (
+      <Menu vertical>
+        <Menu.Item>
+          <Input placeholder='Search...' />
+        </Menu.Item>
+
+        <Menu.Item>
+          Home
+
+          <Menu.Menu>
+            <Menu.Item name='search' active={activeItem === 'search'} onClick={this.handleItemClick}>
+              Search
+            </Menu.Item>
+            <Menu.Item name='add' active={activeItem === 'add'} onClick={this.handleItemClick}>
+              Add
+            </Menu.Item>
+            <Menu.Item name='about' active={activeItem === 'about'} onClick={this.handleItemClick}>
+              Remove
+            </Menu.Item>
+          </Menu.Menu>
+        </Menu.Item>
+
+        <Menu.Item name='browse' active={activeItem === 'browse'} onClick={this.handleItemClick}>
+          <Icon name='grid layout' />
+          Browse
+        </Menu.Item>
+        <Menu.Item name='messages' active={activeItem === 'messages'} onClick={this.handleItemClick}>
+          Messages
+        </Menu.Item>
+
+        <Dropdown as={Menu.Item} text='More'>
+          <Dropdown.Menu>
+            <Dropdown.Item icon='edit' text='Edit Profile' />
+            <Dropdown.Item icon='globe' text='Choose Language' />
+            <Dropdown.Item icon='settings' text='Account Settings' />
+          </Dropdown.Menu>
+        </Dropdown>
+      </Menu>
+    )
+  }
+}

docs/app/Examples/collections/Menu/Content/Text.js

@@ -0,0 +1,43 @@
+import React, { Component } from 'react'
+import { Header, Menu } from 'stardust'
+
+export default class Text extends Component {
+  state = {}
+
+  handleItemClick = (e, { name }) => this.setState({ activeItem: name })
+
+  render() {
+    const { activeItem } = this.state
+
+    return (
+      <Menu vertical>
+        <Menu.Item
+          name='promotions'
+          active={activeItem === 'promotions'}
+          onClick={this.handleItemClick}
+        >
+          <Header as='h4'>Promotions</Header>
+          <p>Check out our new promotions</p>
+        </Menu.Item>
+
+        <Menu.Item
+          name='coupons'
+          active={activeItem === 'coupons'}
+          onClick={this.handleItemClick}
+        >
+          <Header as='h4'>Coupons</Header>
+          <p>Check out our collection of coupons</p>
+        </Menu.Item>
+
+        <Menu.Item
+          name='rebates'
+          active={activeItem === 'rebates'}
+          onClick={this.handleItemClick}
+        >
+          <Header as='h4'>Rebates</Header>
+          <p>Visit our rebate forum for information on claiming rebates</p>
+        </Menu.Item>
+      </Menu>
+    )
+  }
+}

docs/app/Examples/collections/Menu/Content/Vertical.js

@@ -0,0 +1,56 @@
+import React, { Component } from 'react'
+import { Menu } from 'stardust'
+
+export default class Vertical extends Component {
+  handleItemClick = (name) => this.setState({ activeItem: name })
+
+  render() {
+    const { activeItem } = this.state || {}
+
+    return (
+      <Menu vertical>
+        <Menu.Item>
+          <Menu.Header>Products</Menu.Header>
+
+          <Menu.Menu>
+            <Menu.Item name='enterprise' active={activeItem === 'enterprise'} onClick={this.handleItemClick} />
+            <Menu.Item name='consumer' active={activeItem === 'consumer'} onClick={this.handleItemClick} />
+          </Menu.Menu>
+        </Menu.Item>
+
+        <Menu.Item>
+          <Menu.Header>CMS Solutions</Menu.Header>
+
+          <Menu.Menu>
+            <Menu.Item name='rails' active={activeItem === 'rails'} onClick={this.handleItemClick} />
+            <Menu.Item name='python' active={activeItem === 'python'} onClick={this.handleItemClick} />
+            <Menu.Item name='php' active={activeItem === 'php'} onClick={this.handleItemClick} />
+          </Menu.Menu>
+        </Menu.Item>
+
+        <Menu.Item>
+          <Menu.Header>Hosting</Menu.Header>
+
+          <Menu.Menu>
+            <Menu.Item name='shared' active={activeItem === 'shared'} onClick={this.handleItemClick} />
+            <Menu.Item name='dedicated' active={activeItem === 'dedicated'} onClick={this.handleItemClick} />
+          </Menu.Menu>
+        </Menu.Item>
+
+        <Menu.Item>
+          <Menu.Header>Support</Menu.Header>
+
+          <Menu.Menu>
+            <Menu.Item name='email' active={activeItem === 'email'} onClick={this.handleItemClick}>
+              E-mail Support
+            </Menu.Item>
+
+            <Menu.Item name='faq' active={activeItem === 'faq'} onClick={this.handleItemClick}>
+              FAQs
+            </Menu.Item>
+          </Menu.Menu>
+        </Menu.Item>
+      </Menu>
+    )
+  }
+}

docs/app/Examples/collections/Menu/Content/index.js

@@ -0,0 +1,76 @@
+import React from 'react'
+
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+
+// TODO: Add example with <Popup> after it will be added
+// TODO: Add example with <Search> after it will be added
+
+const Content = () => {
+  return (
+    <ExampleSection title='Content'>
+      <ComponentExample
+        title='Header'
+        description='A menu item may include a header or may itself be a header'
+        examplePath='collections/Menu/Content/Header'
+      />
+      <ComponentExample examplePath='collections/Menu/Content/Vertical' />
+
+      <ComponentExample
+        title='Text'
+        description='A vertical menu item can include any type of text content'
+        examplePath='collections/Menu/Content/Text'
+      />
+
+      <ComponentExample
+        title='Input'
+        description='A menu item can contain an input inside of it'
+        examplePath='collections/Menu/Content/Inputs'
+      />
+
+      <ComponentExample
+        title='Button'
+        description='A menu item can contain a button inside of it'
+        examplePath='collections/Menu/Content/Buttons'
+      />
+
+      <ComponentExample
+        title='Link Item'
+        description='A menu may contain a link item, or an item formatted as if it is a link'
+        examplePath='collections/Menu/Content/LinkItem'
+      />
+
+       <ComponentExample
+         title='Dropdown Item'
+         description='An item may contain a nested menu in a dropdown'
+         examplePath='collections/Menu/Content/DropdownItem'
+       />
+
+      {/* <ComponentExample*/}
+        {/* title='Popup Menu'*/}
+        {/* description='A menu item may show a large menu, or additional content using a popup'*/}
+        {/* examplePath='collections/Menu/Content/Popups'*/}
+      {/* />*/}
+
+      {/* <ComponentExample*/}
+        {/* title='Search'*/}
+        {/* description='A menu can contain a search input'*/}
+        {/* examplePath='collections/Menu/Content/Search'*/}
+      {/* />*/}
+
+       <ComponentExample
+         title='Menu'
+         description='A menu may contain another menu group in the same level as menu items'
+         examplePath='collections/Menu/Content/Menus'
+       />
+
+      <ComponentExample
+        title='Sub Menu'
+        description='A menu item may contain another menu nested inside that acts as a grouped sub-menu'
+        examplePath='collections/Menu/Content/SubMenu'
+      />
+    </ExampleSection>
+  )
+}
+
+export default Content

docs/app/Examples/collections/Menu/States/Active.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Menu } from 'stardust'
+
+const Active = () => {
+  return (
+    <Menu compact>
+      <Menu.Item active>
+        Link
+      </Menu.Item>
+    </Menu>
+  )
+}
+
+export default Active