feat(Menu): added shape prop and changed the meaning of the type prop

docs/src/examples/components/Menu/Types/MenuExampleSecondary.tsx → docs/src/examples/components/Menu/Types/MenuExamplePrimary.shorthand.tsx

@@ -7,10 +7,10 @@ const items = [
   { key: 'events', content: 'Upcoming Events' },
 ]
 
-class MenuExampleSecondary extends React.Component {
+class MenuExamplePrimaryShorthand extends React.Component {
   render() {
-    return <Menu defaultActiveIndex={0} items={items} type="secondary" />
+    return <Menu defaultActiveIndex={0} items={items} type="primary" />
   }
 }
 
-export default MenuExampleSecondary
+export default MenuExamplePrimaryShorthand

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

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

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

@@ -10,24 +10,9 @@ const Types = () => (
       examplePath="components/Menu/Types/MenuExample"
     />
     <ComponentExample
-      title="Menu with content prop"
-      description="Menu item text can be defined with the content prop."
-      examplePath="components/Menu/Types/MenuExampleContent"
-    />
-    <ComponentExample
-      title="Secondary Menu"
-      description="A menu can adjust its appearance to de-emphasize its contents."
-      examplePath="components/Menu/Types/MenuExampleSecondary"
-    />
-    <ComponentExample
-      title="Pointing"
+      title="Default Primary"
       description="A menu can point to show its relationship to nearby content."
-      examplePath="components/Menu/Types/MenuExamplePointing"
-    />
-    <ComponentExample
-      title="Pointing"
-      description="A secondary menu can point to show its relationship to nearby content."
-      examplePath="components/Menu/Types/MenuExampleSecondaryPointing"
+      examplePath="components/Menu/Types/MenuExamplePrimary"
     />
   </ExampleSection>
 )

docs/src/examples/components/Menu/Types/MenuExamplePointing.tsx → docs/src/examples/components/Menu/Variations/MenuExamplePills.shorthand.tsx

@@ -7,10 +7,10 @@ const items = [
   { key: 'events', content: 'Upcoming Events' },
 ]
 
-class MenuExamplePointing extends React.Component {
+class MenuExamplePillsShorthand extends React.Component {
   render() {
-    return <Menu defaultActiveIndex={0} items={items} pointing />
+    return <Menu defaultActiveIndex={0} items={items} shape="pills" />
   }
 }
 
-export default MenuExamplePointing
+export default MenuExamplePillsShorthand

docs/src/examples/components/Menu/Variations/MenuExamplePills.tsx

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

docs/src/examples/components/Menu/Variations/MenuExamplePillsPrimary.shorthand.tsx

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

docs/src/examples/components/Menu/Variations/MenuExamplePillsPrimary.tsx

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

docs/src/examples/components/Menu/Types/MenuExampleSecondaryPointing.tsx → docs/src/examples/components/Menu/Variations/MenuExamplePointing.shorthand.tsx

@@ -7,10 +7,10 @@ const items = [
   { key: 'events', content: 'Upcoming Events' },
 ]
 
-class MenuExampleSecondaryPointing extends React.Component {
+class MenuExamplePointingShorthand extends React.Component {
   render() {
-    return <Menu defaultActiveIndex={0} items={items} type="secondary" pointing />
+    return <Menu defaultActiveIndex={0} items={items} shape="pointing" />
   }
 }
 
-export default MenuExampleSecondaryPointing
+export default MenuExamplePointingShorthand

docs/src/examples/components/Menu/Variations/MenuExamplePointing.tsx

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

docs/src/examples/components/Menu/Variations/MenuExamplePointingPrimary.shorthand.tsx

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

docs/src/examples/components/Menu/Variations/MenuExamplePointingPrimary.tsx

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

docs/src/examples/components/Menu/Variations/MenuExampleUnderlined.shorthand.tsx

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

docs/src/examples/components/Menu/Variations/MenuExampleUnderlined.tsx

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