feat: add neutral menu type, add default dropdown offset (#189)

src/components/Dropdown/Dropdown.tsx

@@ -38,7 +38,7 @@ export const Dropdown: FC<DropdownProps> = ({
     children,
     placement = 'bottom-start',
     overlay,
-    offset = 0,
+    offset = 4,
     positionStrategy = 'absolute',
     onVisibleChange,
     showDropdown,

src/components/Icon/mdi.ts

@@ -381,6 +381,7 @@ export enum IconName {
     mdiWeb = 'M16.36,14C16.44,13.34 16.5,12.68 16.5,12C16.5,11.32 16.44,10.66 16.36,10H19.74C19.9,10.64 20,11.31 20,12C20,12.69 19.9,13.36 19.74,14M14.59,19.56C15.19,18.45 15.65,17.25 15.97,16H18.92C17.96,17.65 16.43,18.93 14.59,19.56M14.34,14H9.66C9.56,13.34 9.5,12.68 9.5,12C9.5,11.32 9.56,10.65 9.66,10H14.34C14.43,10.65 14.5,11.32 14.5,12C14.5,12.68 14.43,13.34 14.34,14M12,19.96C11.17,18.76 10.5,17.43 10.09,16H13.91C13.5,17.43 12.83,18.76 12,19.96M8,8H5.08C6.03,6.34 7.57,5.06 9.4,4.44C8.8,5.55 8.35,6.75 8,8M5.08,16H8C8.35,17.25 8.8,18.45 9.4,19.56C7.57,18.93 6.03,17.65 5.08,16M4.26,14C4.1,13.36 4,12.69 4,12C4,11.31 4.1,10.64 4.26,10H7.64C7.56,10.66 7.5,11.32 7.5,12C7.5,12.68 7.56,13.34 7.64,14M12,4.03C12.83,5.23 13.5,6.57 13.91,8H10.09C10.5,6.57 11.17,5.23 12,4.03M18.92,8H15.97C15.65,6.75 15.19,5.55 14.59,4.44C16.43,5.07 17.96,6.34 18.92,8M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z',
     mdiWebBox = 'M8.95 13.4H6.58A5.5 5.5 0 0 1 6.58 10.6H8.95A11.56 11.56 0 0 0 8.85 12A11.56 11.56 0 0 0 8.95 13.4M7.16 9.2H9.2A12.06 12.06 0 0 1 10.18 6.71A5.55 5.55 0 0 0 7.16 9.2M16.84 9.2A5.59 5.59 0 0 0 13.81 6.71A10.95 10.95 0 0 1 14.78 9.2M12 17.57A9.5 9.5 0 0 0 13.34 14.8H10.66A9.5 9.5 0 0 0 12 17.57M12 6.42A9.53 9.53 0 0 0 10.66 9.2H13.34A9.53 9.53 0 0 0 12 6.42M7.16 14.8A5.61 5.61 0 0 0 10.18 17.29A12.06 12.06 0 0 1 9.2 14.8M21 5V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V5A2 2 0 0 1 5 3H19A2 2 0 0 1 21 5M19 12A7 7 0 1 0 12 19A7 7 0 0 0 19 12M15.15 12A11.56 11.56 0 0 1 15.05 13.4H17.42A5.5 5.5 0 0 0 17.42 10.6H15.05A11.56 11.56 0 0 1 15.15 12M13.81 17.29A5.62 5.62 0 0 0 16.84 14.8H14.78A10.95 10.95 0 0 1 13.81 17.29M10.36 10.6A8.81 8.81 0 0 0 10.36 13.4H13.64A10.3 10.3 0 0 0 13.75 12A10.21 10.21 0 0 0 13.64 10.6Z',
     mdiWebcam = 'M12,2A7,7 0 0,1 19,9A7,7 0 0,1 12,16A7,7 0 0,1 5,9A7,7 0 0,1 12,2M12,4A5,5 0 0,0 7,9A5,5 0 0,0 12,14A5,5 0 0,0 17,9A5,5 0 0,0 12,4M12,6A3,3 0 0,1 15,9A3,3 0 0,1 12,12A3,3 0 0,1 9,9A3,3 0 0,1 12,6M6,22A2,2 0 0,1 4,20C4,19.62 4.1,19.27 4.29,18.97L6.11,15.81C7.69,17.17 9.75,18 12,18C14.25,18 16.31,17.17 17.89,15.81L19.71,18.97C19.9,19.27 20,19.62 20,20A2,2 0 0,1 18,22H6Z',
+    mdiWhatsapp = 'M12.04 2C6.58 2 2.13 6.45 2.13 11.91C2.13 13.66 2.59 15.36 3.45 16.86L2.05 22L7.3 20.62C8.75 21.41 10.38 21.83 12.04 21.83C17.5 21.83 21.95 17.38 21.95 11.92C21.95 9.27 20.92 6.78 19.05 4.91C17.18 3.03 14.69 2 12.04 2M12.05 3.67C14.25 3.67 16.31 4.53 17.87 6.09C19.42 7.65 20.28 9.72 20.28 11.92C20.28 16.46 16.58 20.15 12.04 20.15C10.56 20.15 9.11 19.76 7.85 19L7.55 18.83L4.43 19.65L5.26 16.61L5.06 16.29C4.24 15 3.8 13.47 3.8 11.91C3.81 7.37 7.5 3.67 12.05 3.67M8.53 7.33C8.37 7.33 8.1 7.39 7.87 7.64C7.65 7.89 7 8.5 7 9.71C7 10.93 7.89 12.1 8 12.27C8.14 12.44 9.76 14.94 12.25 16C12.84 16.27 13.3 16.42 13.66 16.53C14.25 16.72 14.79 16.69 15.22 16.63C15.7 16.56 16.68 16.03 16.89 15.45C17.1 14.87 17.1 14.38 17.04 14.27C16.97 14.17 16.81 14.11 16.56 14C16.31 13.86 15.09 13.26 14.87 13.18C14.64 13.1 14.5 13.06 14.31 13.3C14.15 13.55 13.67 14.11 13.53 14.27C13.38 14.44 13.24 14.46 13 14.34C12.74 14.21 11.94 13.95 11 13.11C10.26 12.45 9.77 11.64 9.62 11.39C9.5 11.15 9.61 11 9.73 10.89C9.84 10.78 10 10.6 10.1 10.45C10.23 10.31 10.27 10.2 10.35 10.04C10.43 9.87 10.39 9.73 10.33 9.61C10.27 9.5 9.77 8.26 9.56 7.77C9.36 7.29 9.16 7.35 9 7.34C8.86 7.34 8.7 7.33 8.53 7.33Z',
     mdiWindowMaximize = 'M4,4H20V20H4V4M6,8V18H18V8H6Z',
     mdiWindowMinimize = 'M20,14H4V10H20',
     mdiWindowRestore = 'M4,8H8V4H20V16H16V20H4V8M16,8V14H18V6H10V8H16M6,12V18H14V12H6Z',

src/components/Menu/Menu.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Stories } from '@storybook/addon-docs';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { Menu } from './';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Menu, MenuType } from './';
 import { IconName } from '../Icon';
 import { Dropdown } from '../Dropdown';
 import { DefaultButton } from '../Button';
@@ -88,14 +88,17 @@ const Overlay = (args: any) => (
 
 const Menu_Story: ComponentStory<typeof Menu> = (args) => (
     <Dropdown overlay={Overlay(args)}>
-        <DefaultButton disruptive={args.disruptive} text={'Menu dropdown'} />
+        <DefaultButton
+            disruptive={args.type === MenuType.disruptive}
+            text={'Menu dropdown'}
+        />
     </Dropdown>
 );
 
 export const Menus = Menu_Story.bind({});
 
 Menus.args = {
-    disruptive: false,
+    type: MenuType.neutral,
     classNames: 'my-menu-class',
     style: {},
     itemClassNames: 'my-menu-item-class',

src/components/Menu/Menu.tsx

@@ -1,12 +1,18 @@
 import React, { FC } from 'react';
-import { MenuItem, MenuProps } from './Menu.types';
+import { MenuItem, MenuProps, MenuType } from './Menu.types';
 import { List } from '../List';
-import { ButtonTextAlign, ButtonWidth, DefaultButton } from '../Button';
+import {
+    ButtonSize,
+    ButtonTextAlign,
+    ButtonWidth,
+    DefaultButton,
+    NeutralButton,
+} from '../Button';
 
 export const Menu: FC<MenuProps> = ({
     items,
     onChange,
-    disruptive = false,
+    type = MenuType.neutral,
     classNames,
     style,
     itemClassNames,
@@ -21,16 +27,34 @@ export const Menu: FC<MenuProps> = ({
             {...item}
             alignText={ButtonTextAlign.Left}
             buttonWidth={ButtonWidth.fill}
-            disruptive={disruptive}
+            size={ButtonSize.Medium}
+            disruptive={type === MenuType.disruptive}
             onClick={() => onChange(item.value)}
         />
     );
 
+    const getNeutralButton = (item: MenuItem): JSX.Element => (
+        <NeutralButton
+            {...item}
+            alignText={ButtonTextAlign.Left}
+            buttonWidth={ButtonWidth.fill}
+            size={ButtonSize.Medium}
+            onClick={() => onChange(item.value)}
+        />
+    );
+
+    const getMenuItem = (item: MenuItem) => {
+        if (type === MenuType.neutral) {
+            return getNeutralButton(item);
+        }
+        return getDefaultButton(item);
+    };
+
     return (
         <List<MenuItem>
             {...rest}
             items={items}
-            renderItem={getDefaultButton}
+            renderItem={getMenuItem}
             classNames={classNames}
             style={style}
             itemClassNames={itemClassNames}

src/components/Menu/Menu.types.ts

@@ -9,13 +9,19 @@ export interface MenuItem
     value: any;
 }
 
+export enum MenuType {
+    disruptive = 'disruptive',
+    default = 'default',
+    neutral = 'neutral',
+}
+
 export interface MenuProps
     extends Omit<ListProps<MenuItem>, 'renderItem' | 'role' | 'itemRole'> {
     /**
      * If menu is disruptive or not
      * @default false
      */
-    disruptive?: boolean;
+    type?: MenuType;
     /**
      * On change callback when menu item is clicked
      * @param value