Upwards Menu (#213)

* add direction prop to menu component

* make downwards menu list absolute

src/components/menu/Menu.stories.mdx

@@ -1,7 +1,7 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
 import { Theme } from '../../../.storybook/components'
-import { Menu } from './Menu'
+import { Menu, MenuDirection } from './Menu'
 import { MenuItem } from './MenuItem'
 
 <Meta title="Components/Menu/Menu" component={Menu} />
@@ -32,6 +32,7 @@ export const Template = ({ menuLabel, className, ...args }) => {
     args={{
       menuLabel: 'Menu',
       menuButtonContent: 'Menu',
+      direction: MenuDirection.down,
     }}
   >
     {Template.bind({})}

src/components/menu/Menu.tsx

@@ -5,6 +5,11 @@ import { ReactNode } from 'react'
 import { useTheme } from '../../framework'
 import { ClassNameProps } from '../types'
 
+export enum MenuDirection {
+  up = 'up',
+  down = 'down',
+}
+
 export type MenuProps = ClassNameProps & {
   /**
    * Defines the accessibility label for the menu.
@@ -19,6 +24,7 @@ export type MenuProps = ClassNameProps & {
    **/
   menuButtonId?: string
   children?: ReactNode
+  direction: MenuDirection
 }
 
 export function Menu({
@@ -27,13 +33,25 @@ export function Menu({
   menuButtonContent,
   children,
   menuButtonId,
+  direction,
 }: MenuProps) {
   const { menu } = useTheme()
 
+  const items = (
+    <HeadlessMenu.Items
+      className={classNames(
+        menu.menuList.base,
+        menu.menuList.direction[direction]
+      )}
+    >
+      {children}
+    </HeadlessMenu.Items>
+  )
   return (
     <HeadlessMenu>
       {({ open }) => (
-        <>
+        <div className="relative">
+          {direction === MenuDirection.up && items}
           <HeadlessMenu.Button
             id={menuButtonId}
             aria-label={menuLabel}
@@ -49,10 +67,8 @@ export function Menu({
               />
             </span>
           </HeadlessMenu.Button>
-          <HeadlessMenu.Items className={menu.menuList.base}>
-            {children}
-          </HeadlessMenu.Items>
-        </>
+          {direction === MenuDirection.down && items}
+        </div>
       )}
     </HeadlessMenu>
   )

src/components/menu/theme.ts

@@ -10,6 +10,10 @@ export default {
     active: 'bg-primary-100',
   },
   menuList: {
-    base: 'py-2 mb-1 w-32 shadow focus:outline-none bg-white',
+    base: 'py-2 mb-2 w-32 shadow focus:outline-none bg-white absolute',
+    direction: {
+      up: '-mt-2 -translate-y-full',
+      down: '',
+    },
   },
 }