feat(Menu): adding kind prop for the items and MenuDivider component

[mnajdova]

This PR adds the kind prop in the items prop in the Menu, for creating different components inside the menu (MenuItem, MenuDivider- component added as part of this PR). The PR is introduced in order to fix #667

For future work, we may leverage this kind property for extracting the MenuItem with submenus as different component, a MenuHeader component etc.

Example:
Vertical pointing menu:

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',
  },
]

const MenuExampleVerticalPointing = () => (
  <Menu defaultActiveIndex={0} items={items} vertical pointing />
)

export default MenuExampleVerticalPointing

With separator between the last two elements:

import React from 'react'
import { Menu } from '@stardust-ui/react'
const items = [
  {
    key: 'editorials',
    content: 'Editorials',
  },
  {
    key: 'review',
    content: 'Reviews',
  },
  {
    key: 'separator',
    kind: 'MenuSeparator',
  },
  {
    key: 'events',
    content: 'Upcoming Events',
  },
]

const MenuExampleKind = () => (
  <Menu defaultActiveIndex={0} items={items} vertical pointing="start" />
)

export default MenuExampleKind

[miroslavstastny]

I am not sure that we want to remove separators in Teams theme menu

[mnajdova]

I had the same doubt, but wasn't sure how can I show the separator. Will add example with some other menu type that does not have separator by default then... Thanks for the suggestion.

[mnajdova]

Addressed the comment, added example for some other variants, take a look in the description of the PR.

[layershifter]

As I remember we decided to use lowercase without prefixes in the kind prop, i.e. separator.
And technically, it's a divider

[layershifter]

const borderColor = p.primary ? v.primaryBorderColor : v.borderColor
const borderType = p.vertical ? 'borderTop' : 'borderLeft'

return {
  [borderType]: `1px solid ${borderColor}`
}

We can change naming, but this looks to me more readable and compact :)

[mnajdova]

I've added some typings for the kind prop, some custom propTypes, and in the factories the kind prop is removed from the props when creating the component (thanks @layershifter for the suggestions). Please take a look again!

[layershifter]

Suggested change

	export type MenuItemKindOptions = 'divider' | 'item'
	export type MenuItemKinds = 'divider' | 'item'

MenuItemKinds may be? Or even MenuShorthandKinds because they are related to shorthand items, not to MenuItem

[mnajdova]

MenuShorthandKinds it is :)

[layershifter]

Suggested change

	export default MenuExampleKind
	export default MenuExampleDivider

As I understand this example should show us the usage of MenuDivider, SUI uses Content section of docs to show elements usage: https://semantic-ui.com/collections/menu.html#header