feat(dropdowns.next): add refactored menu component (#1623)

Author: geotrev

packages/dropdowns.next/.size-snapshot.json

@@ -1,20 +1,20 @@
 {
   "index.cjs.js": {
-    "bundled": 56744,
-    "minified": 40969,
-    "gzipped": 9399
+    "bundled": 72908,
+    "minified": 51748,
+    "gzipped": 11329
   },
   "index.esm.js": {
-    "bundled": 52071,
-    "minified": 36540,
-    "gzipped": 8815,
+    "bundled": 66868,
+    "minified": 45956,
+    "gzipped": 10695,
     "treeshaked": {
       "rollup": {
-        "code": 28825,
-        "import_statements": 1064
+        "code": 36151,
+        "import_statements": 1174
       },
       "webpack": {
-        "code": 31754
+        "code": 39814
       }
     }
   }

packages/dropdowns.next/demo/menu.stories

@@ -0,0 +1,70 @@
+import { Meta, ArgsTable, Canvas, Story, Markdown } from '@storybook/addon-docs';
+import { useArgs } from '@storybook/client-api';
+import { Menu, Item, ItemGroup, Separator } from '@zendeskgarden/react-dropdowns.next';
+import { MenuStory } from './stories/MenuStory';
+import README from '../README.md';
+import { ITEMS } from './stories/data';
+
+<Meta
+  title="Packages/Dropdowns.Next/Menu"
+  component={Menu}
+  subcomponents={{ Item, 'Item.Meta': Item.Meta, Separator, ItemGroup }}
+  argTypes={{
+    appendToNode: { control: false }
+  }}
+  args={{
+    button: 'Menu',
+    items: ITEMS,
+    placement: Menu.defaultProps.placement,
+    maxHeight: Menu.defaultProps.maxHeight,
+    zIndex: Menu.defaultProps.zIndex
+  }}
+/>
+
+# API
+
+<ArgsTable />
+
+# Uncontrolled
+
+<Canvas>
+  <Story
+    name="Uncontrolled"
+    argTypes={{
+      isExpanded: { control: false },
+      focusedValue: { control: false },
+      selectedItems: { control: false }
+    }}
+  >
+    {args => <MenuStory {...args} />}
+  </Story>
+</Canvas>
+
+# Controlled
+
+<Canvas>
+  <Story
+    name="Controlled"
+    argTypes={{
+      defaultExpanded: { control: false },
+      defaultFocusedValue: { control: false },
+      focusedValue: { control: { type: 'text' } }
+    }}
+    args={{
+      isExpanded: false,
+      focusedValue: null,
+      selectedItems: [{ value: 'aster', type: 'checkbox' }]
+    }}
+  >
+    {args => {
+      const updateArgs = useArgs()[1];
+      const handleChange = changes => {
+        const { type, ...rest } = changes;
+        updateArgs(rest);
+      };
+      return <MenuStory {...args} onChange={handleChange} />;
+    }}
+  </Story>
+</Canvas>
+
+<Markdown>{README}</Markdown>

packages/dropdowns.next/demo/menu.stories.mdx

@@ -0,0 +1,65 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import React from 'react';
+import { StoryFn } from '@storybook/react';
+import LeafIcon from '@zendeskgarden/svg-icons/src/16/leaf-stroke.svg';
+import CartIcon from '@zendeskgarden/svg-icons/src/16/shopping-cart-stroke.svg';
+import { Col, Grid, Row } from '@zendeskgarden/react-grid';
+import { IMenuProps, Item, ItemGroup, Separator, Menu } from '@zendeskgarden/react-dropdowns.next';
+import { IItem, Items } from './types';
+
+const MenuItem = ({ icon, meta, ...item }: IItem) => {
+  return (
+    <Item {...item} icon={icon ? <LeafIcon /> : undefined}>
+      {item.label}
+      {meta && <Item.Meta>{meta}</Item.Meta>}
+    </Item>
+  );
+};
+
+interface IArgs extends IMenuProps {
+  items: Items;
+}
+
+export const MenuStory: StoryFn<IArgs> = ({ items, ...args }) => {
+  return (
+    <Grid>
+      <Row justifyContent="center" style={{ height: 800 }}>
+        <Col alignSelf="center" textAlign="center">
+          <div style={{ display: 'inline-block', position: 'relative', width: 200 }}>
+            <Menu {...args}>
+              {items.map(item => {
+                if ('items' in item) {
+                  return (
+                    <ItemGroup
+                      legend={item.legend}
+                      aria-label={item['aria-label']}
+                      key={item.legend || item['aria-label']}
+                      type={item.type}
+                      icon={item.icon ? <CartIcon /> : undefined}
+                    >
+                      {item.items.map(groupItem => (
+                        <MenuItem key={groupItem.value} {...groupItem} />
+                      ))}
+                    </ItemGroup>
+                  );
+                }
+
+                if ('isSeparator' in item) {
+                  return <Separator key={item.value} />;
+                }
+
+                return <MenuItem key={item.value} {...item} />;
+              })}
+            </Menu>
+          </div>
+        </Col>
+      </Row>
+    </Grid>
+  );
+};

packages/dropdowns.next/demo/stories/MenuStory

@@ -5,7 +5,71 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import { Options } from './types';
+import { Items, Options } from './types';
+
+export const ITEMS: Items = [
+  {
+    value: 'item',
+    label: 'Item'
+  },
+  {
+    value: 'item-icon',
+    label: 'Item with icon',
+    icon: true
+  },
+  {
+    value: 'separator',
+    isSeparator: true
+  },
+  {
+    value: 'item-meta',
+    label: 'Item',
+    meta: 'With meta'
+  },
+  {
+    legend: 'Choose flowers',
+    type: 'checkbox',
+    icon: true,
+    items: [
+      {
+        value: 'aster',
+        label: 'Aster',
+        isSelected: true
+      },
+      {
+        value: 'daisy',
+        label: 'Daisy',
+        isDisabled: true
+      },
+      {
+        value: 'ivy',
+        label: 'Ivy'
+      }
+    ]
+  },
+  {
+    'aria-label': 'Select a fruit',
+    type: 'radio',
+    icon: true,
+    items: [
+      {
+        value: 'apple',
+        label: 'Apple',
+        name: 'fruits'
+      },
+      {
+        value: 'cherry',
+        label: 'Cherry',
+        name: 'fruits'
+      },
+      {
+        value: 'clementine',
+        label: 'Clementine',
+        name: 'fruits'
+      }
+    ]
+  }
+];
 
 export const OPTIONS: Options = [
   {

packages/dropdowns.next/demo/stories/MenuStory.tsx

@@ -5,7 +5,12 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import { IOptGroupProps, IOptionProps } from '@zendeskgarden/react-dropdowns.next';
+import {
+  IItemProps,
+  IItemGroupProps,
+  IOptGroupProps,
+  IOptionProps
+} from '@zendeskgarden/react-dropdowns.next';
 
 export interface IOption extends Omit<IOptionProps, 'icon'> {
   icon?: boolean;
@@ -17,4 +22,17 @@ export interface IOptGroup extends Omit<IOptGroupProps, 'icon'> {
   options: IOption[];
 }
 
+export interface IItem extends Omit<IItemProps, 'icon'> {
+  icon?: boolean;
+  meta?: string;
+  isSeparator?: boolean;
+}
+
+export interface IItemGroup extends Omit<IItemGroupProps, 'icon'> {
+  icon?: boolean;
+  items: IItem[];
+}
+
 export type Options = (IOption | IOptGroup)[];
+
+export type Items = (IItem | IItemGroup)[];