Merge branch 'fix/menu' of https://github.com/TechnologyAdvice/stardust…

… into fix/menu

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/Header.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Menu } from 'stardust'
+
+const Header = () => {
+ return (
+ <Menu>
+ <Menu.Item header>Our Company</Menu.Item>
+
+ <Menu.Item>About Us</Menu.Item>
+ <Menu.Item>Jobs</Menu.Item>
+ <Menu.Item>Locations</Menu.Item>
+ </Menu>
+ )
+}
+
+export default Header

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

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Button, Menu } from 'stardust'
+
+const handleClick = () => console.log(1)
+
+const LinkItem = () => {
+ return (
+ <Menu>
+ <Menu.Item href="http://www.google.com">Visit Google</Menu.Item>
+ <Menu.Item link>Link via prop</Menu.Item>
+ <Menu.Item onClick={handleClick}>Javascript Link</Menu.Item>
+ </Menu>
+ )
+}
+
+export default LinkItem

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

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Button, Menu } from 'stardust'
+
+const Menus = () => {
+ return (
+ <Menu>
+ <Menu.Item href="http://www.google.com">Visit Google</Menu.Item>
+ <Menu.Item link>Link via prop</Menu.Item>
+ <Menu.Item onClick={}>Javascript Link</Menu.Item>
+ </Menu>
+ )
+}
+
+export default Menus

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

@@ -0,0 +1,43 @@
+import React from 'react'
+import { Button, Icon, Input, Menu } from 'stardust'
+
+const {Item} = Menu
+
+const SubMenu = () => {
+ return (
+ <Menu vertical>
+ <Item>
+ <Input placeholder="Search..." />
+ </Item>
+
+ <Item>
+ Home
+
+ <Menu>
+ <Item active>Search</Item>
+ <Item>Add</Item>
+ <Item>Remove</Item>
+ </Menu>
+ </Item>
+
+ <Item>
+ <Icon name="grid layout" /> Browse
+ </Item>
+ <Item icon='grid layout'>Browse</Item>
+ <Item>Messages</Item>
+
+ <div className="ui dropdown item">
+ More
+
+ <i className="dropdown icon"></i>
+ <div className="menu">
+ <a className="item"><i className="edit icon"></i> Edit Profile</a>
+ <a className="item"><i className="globe icon"></i> Choose Language</a>
+ <a className="item"><i className="settings icon"></i> Account Settings</a>
+ </div>
+ </div>
+ </Menu>
+ )
+}
+
+export default SubMenu

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

@@ -0,0 +1,25 @@
+import React from 'react'
+import { Header, Menu } from 'stardust'
+
+const Text = () => {
+ return (
+ <Menu vertical>
+ <Menu.Item>
+ <Header.H4>Promotions</Header.H4>
+ <p>Check out our new promotions</p>
+ </Menu.Item>
+
+ <Menu.Item>
+ <Header.H4>Coupons</Header.H4>
+ <p>Check out our collection of coupons</p>
+ </Menu.Item>
+
+ <Menu.Item>
+ <Header.H4>Rebates</Header.H4>
+ <p>Visit our rebate forum for information on claiming rebates</p>
+ </Menu.Item>
+ </Menu>
+ )
+}
+
+export default Text

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

@@ -0,0 +1,47 @@
+import React from 'react'
+import { Menu } from 'stardust'
+
+const Vertical = () => {
+ return (
+ <Menu vertical>
+ <Menu.Item>
+ <Menu.Header>Products</Menu.Header>
+
+ <Menu>
+ <Menu.Item>Enterprise</Menu.Item>
+ <Menu.Item>Consumer</Menu.Item>
+ </Menu>
+ </Menu.Item>
+
+ <Menu.Item>
+ <Menu.Header>CMS Solutions</Menu.Header>
+
+ <Menu>
+ <Menu.Item>Rails</Menu.Item>
+ <Menu.Item>Python</Menu.Item>
+ <Menu.Item>PHP</Menu.Item>
+ </Menu>
+ </Menu.Item>
+
+ <Menu.Item>
+ <Menu.Header>Hosting</Menu.Header>
+
+ <Menu>
+ <Menu.Item>Shared</Menu.Item>
+ <Menu.Item>Dedicated</Menu.Item>
+ </Menu>
+ </Menu.Item>
+
+ <Menu.Item>
+ <Menu.Header>Support</Menu.Header>
+
+ <Menu>
+ <Menu.Item>E-mail Support</Menu.Item>
+ <Menu.Item>FAQs</Menu.Item>
+ </Menu>
+ </Menu.Item>
+ </Menu>
+ )
+}
+
+export default Vertical

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/Input'*/}
+ {/*/>*/}
+
+ {/*<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/LinkItem'*/}
+ {/*/>*/}
+
+ {/*<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/Types/Width.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import { Menu } from 'stardust'
+
+const Width = () => {
+ return (
+ <div>
+ <Menu widths={3}>
+ <Menu.Item active link>Editorials</Menu.Item>
+ <Menu.Item link>Reviews</Menu.Item>
+ <Menu.Item link>Upcoming Events</Menu.Item>
+ </Menu>
+
+ <Menu widths='three'>
+ <Menu.Item link>Editorials</Menu.Item>
+ <Menu.Item active link>Reviews</Menu.Item>
+ <Menu.Item link>Upcoming Events</Menu.Item>
+ </Menu>
+ </div>
+ )
+}
+
+export default Width

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

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+
+const Types = () => {
+ return (
+ <ExampleSection title='Types'>
+ <ComponentExample
+ title='Menu'
+ description='A menu'
+ examplePath='collections/Menu/Types/Width'
+ />
+ </ExampleSection>
+ )
+}
+
+export default Types

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

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import Content from './Content'
+import Types from './Types'
+
+const MenuExamples = () => {
+ return (
+ <div>
+ <Types />
+ <Content />
+ </div>
+ )
+}
+
+export default MenuExamples