Feature - Menu Component [Design]

[omarefg]

Checklist ✅

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

The Menu component is a component that attach to a ref and creates a menu refered to it.

It can receive anything as child, for example in the picture above is shown a Header showing the user info, but it will receive mostly MenuItems component, the Menu is inside a Paper component, it renders a ul element and the MenuItems would be the li elements inside.

It will be used like this:

import { Fragment, useRef } from 'react'
import { Menu, MenuItem } from '@platzily-ui/components'

const MyComponent = () => {
  const [anchorEl, setAnchorEl] = React.useState(null);
  const open = !!anchorEl;

  const handleClick = (open) => (event) => { setAnchorEl(open ? event.currentTarget : null); };  

  return (
    <Fragment>
      <button
        ref={ref}
        onClick={handleClick(true)}
      >
        Open Menu
      </button>
      <Menu
        anchorEl={anchorEl}
        open={open}
        onClose={handleClick(false)}
      >
        <MenuItem onClick={handleClick(false)}>option 1</MenuItem>
        <MenuItem onClick={handleClick(false)>option 2</MenuItem>
        <MenuItem onClick={handleClick(false)>option 3</MenuItem>
      </Menu>
    </Fragment>
  )
}

Requirements 🌈

The component must be tested using unit testing.

Motivation 🔦

A way to provide a one in many selection path to the user.

[felipedc09]

I think this task is not necessary because this component would be created using a button component with any icon, the paper component and adding an item list, what do you think?.