feat(menu): Submenu

CHANGELOG.md

@@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### BREAKING CHANGES
+- renamed Teams theme menu variables the contains props names as prefixes @mnajdova ([#539](https://github.com/stardust-ui/react/pull/539))
+
 ### Fixes
 - Ensure `Popup` properly flips values of `offset` prop in RTL @kuzhelov ([#612](https://github.com/stardust-ui/react/pull/612))
 - Fix `List` - items should be selectable @sophieH29 ([#566](https://github.com/stardust-ui/react/pull/566))
@@ -25,6 +28,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add `color` prop to `Text` component @Bugaa92 ([#597](https://github.com/stardust-ui/react/pull/597))
 - Add `color` prop to `Header` and `HeaderDescription` components @Bugaa92 ([#628](https://github.com/stardust-ui/react/pull/628))
 - Add and export compose icons in Teams theme @joheredi ([#639](https://github.com/stardust-ui/react/pull/639))
+- Add `menu` prop to `MenuItem` @mnajdova ([#539](https://github.com/stardust-ui/react/pull/539))
 
 <!--------------------------------[ v0.15.0 ]------------------------------- -->
 ## [v0.15.0](https://github.com/stardust-ui/react/tree/v0.15.0) (2018-12-17)

docs/src/components/CodeSnippet.tsx

@@ -1,4 +1,3 @@
-import * as _ from 'lodash'
 import * as React from 'react'
 
 import formatCode from '../utils/formatCode'

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

@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { Menu } from '@stardust-ui/react'
+
+const items = [
+  {
+    key: 'editorials',
+    content: 'Editorials',
+    menu: {
+      items: [
+        { key: '1', content: 'item1' },
+        {
+          key: '2',
+          content: 'item2',
+          menu: { items: [{ key: '1', content: 'item1' }, { key: '2', content: 'item2' }] },
+        },
+      ],
+    },
+  },
+  { key: 'review', content: 'Reviews' },
+  { key: 'events', content: 'Upcoming Events' },
+]
+
+const MenuExampleVerticalWithSubmenu = () => <Menu defaultActiveIndex={0} vertical items={items} />
+
+export default MenuExampleVerticalWithSubmenu

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

@@ -0,0 +1,43 @@
+import * as React from 'react'
+import { Menu } from '@stardust-ui/react'
+
+const items = [
+  {
+    key: 'editorials',
+    content: 'Editorials',
+    menu: {
+      items: [
+        { key: '1', content: 'item1' },
+        {
+          key: '2',
+          content: 'item2',
+          menu: { items: [{ key: '1', content: 'item2.1' }, { key: '2', content: 'item2.2' }] },
+        },
+        {
+          key: '3',
+          content: 'item3',
+          menu: { items: [{ key: '1', content: 'item3.1' }, { key: '2', content: 'item3.2' }] },
+        },
+      ],
+    },
+  },
+  {
+    key: 'review',
+    content: 'Reviews',
+    menu: {
+      items: [
+        { key: '1', content: 'item1' },
+        {
+          key: '2',
+          content: 'item2',
+          menu: { items: [{ key: '1', content: 'item2.1' }, { key: '2', content: 'item2.2' }] },
+        },
+      ],
+    },
+  },
+  { key: 'events', content: 'Upcoming Events' },
+]
+
+const MenuExampleWithSubMenu = () => <Menu defaultActiveIndex={0} items={items} />
+
+export default MenuExampleWithSubMenu

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

@@ -19,6 +19,12 @@ const Types = () => (
       description="A vertical menu displays elements vertically."
       examplePath="components/Menu/Types/MenuExampleVertical"
     />
+    <ComponentExample
+      title="Menu with submenus"
+      description="A menu can have submenus."
+      examplePath="components/Menu/Types/MenuExampleWithSubmenu"
+    />
+    <ComponentExample examplePath="components/Menu/Types/MenuExampleVerticalWithSubmenu" />
   </ExampleSection>
 )
 

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

@@ -14,9 +14,9 @@ const MenuExampleIconOnlyPrimaryInverted = () => (
     items={items}
     primary
     variables={siteVars => ({
-      defaultColor: siteVars.gray06,
-      defaultBackgroundColor: siteVars.brand,
-      typePrimaryActiveBorderColor: siteVars.white,
+      color: siteVars.gray06,
+      backgroundColor: siteVars.brand,
+      primaryActiveBorderColor: siteVars.white,
     })}
   />
 )

src/components/Menu/Menu.tsx

@@ -5,6 +5,7 @@ import * as React from 'react'
 import {
   AutoControlledComponent,
   childrenExist,
+  createShorthandFactory,
   customPropTypes,
   UIComponentProps,
   ChildrenComponentProps,
@@ -60,12 +61,19 @@ export interface MenuProps extends UIComponentProps, ChildrenComponentProps {
 
   /** A vertical menu displays elements vertically. */
   vertical?: boolean
+
+  /** Indicates whether the menu is submenu. */
+  submenu?: boolean
+}
+
+export interface MenuState {
+  activeIndex?: number | string
 }
 
 /**
  * A menu displays grouped navigation actions.
  */
-class Menu extends AutoControlledComponent<Extendable<MenuProps>, any> {
+class Menu extends AutoControlledComponent<Extendable<MenuProps>, MenuState> {
   static displayName = 'Menu'
 
   static className = 'ui-menu'
@@ -88,6 +96,7 @@ class Menu extends AutoControlledComponent<Extendable<MenuProps>, any> {
     secondary: customPropTypes.every([customPropTypes.disallow(['primary']), PropTypes.bool]),
     underlined: PropTypes.bool,
     vertical: PropTypes.bool,
+    submenu: PropTypes.bool,
   }
 
   static defaultProps = {
@@ -107,6 +116,15 @@ class Menu extends AutoControlledComponent<Extendable<MenuProps>, any> {
 
       _.invoke(predefinedProps, 'onClick', e, itemProps)
     },
+    onActiveChanged: (e, props) => {
+      const { index, active } = props
+      if (active) {
+        this.trySetState({ activeIndex: index })
+      } else if (this.state.activeIndex === index) {
+        this.trySetState({ activeIndex: null })
+      }
+      _.invoke(predefinedProps, 'onActiveChanged', e, props)
+    },
   })
 
   renderItems = (variables: ComponentVariablesObject) => {
@@ -119,11 +137,14 @@ class Menu extends AutoControlledComponent<Extendable<MenuProps>, any> {
       secondary,
       underlined,
       vertical,
+      submenu,
     } = this.props
     const { activeIndex } = this.state
 
-    return _.map(items, (item, index) =>
-      MenuItem.create(item, {
+    return _.map(items, (item, index) => {
+      const active =
+        (typeof activeIndex === 'string' ? parseInt(activeIndex, 10) : activeIndex) === index
+      return MenuItem.create(item, {
         defaultProps: {
           iconOnly,
           pills,
@@ -134,11 +155,12 @@ class Menu extends AutoControlledComponent<Extendable<MenuProps>, any> {
           variables,
           vertical,
           index,
-          active: parseInt(activeIndex, 10) === index,
+          active,
+          inSubmenu: submenu,
         },
         overrideProps: this.handleItemOverrides,
-      }),
-    )
+      })
+    })
   }
 
   renderComponent({ ElementType, classes, accessibility, variables, rest }) {
@@ -151,4 +173,6 @@ class Menu extends AutoControlledComponent<Extendable<MenuProps>, any> {
   }
 }
 
+Menu.create = createShorthandFactory(Menu, 'items')
+
 export default Menu