feat(DropdownMenu): added dropdown menu component, created bento menu…

… and update user-profile

packages/react/src/components/avatar/avatar.tsx

@@ -8,7 +8,7 @@ import { Icon } from '../icon/icon';
 
 export type AvatarSize = 'xsmall' | 'small' | 'medium' | 'large'
 
-interface AvatarProps {
+export interface AvatarProps {
     className?: string;
     username?: string;
     bgColor?: string;

packages/react/src/components/bento-menu-button/bento-menu-button.test.tsx

@@ -0,0 +1,81 @@
+import React, { ReactElement } from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { getByTestId } from '../../test-utils/enzyme-selectors';
+import { mountWithTheme, mountWithProviders, renderWithTheme } from '../../test-utils/renderer';
+import { BentoMenuButton } from './bento-menu-button';
+import { ExternalItemProps, NavItemProps } from '../dropdown-menu/list-items';
+
+jest.mock('../../utils/uuid');
+
+function setup(children: ReactElement): ReactElement {
+    return (
+        <Router>
+            {children}
+        </Router>
+    );
+}
+
+const products = [
+    {
+        id: 'optiona',
+        label: 'Option A',
+        value: 'optionA',
+        to: '/testa',
+    },
+    {
+        id: 'optionB',
+        label: 'Option B',
+        value: 'optionB',
+        to: '/testb',
+    },
+    {
+        id: 'optionC',
+        label: 'Option C',
+        value: 'optionC',
+        to: '/testc',
+    },
+    {
+        id: 'optionD',
+        label: 'Option D',
+        value: 'optionD',
+        to: '/testd',
+    },
+] as NavItemProps[];
+
+const externals = [
+    {
+        id: 'optionA',
+        label: 'Option A',
+        href: '/testa',
+    },
+] as ExternalItemProps[];
+
+describe('BentoMenuButton', () => {
+    test('Opens bento-menu when menu-button is clicked', () => {
+        const wrapper = mountWithProviders(
+            <BentoMenuButton productLinks={products} externalLinks={externals} />,
+        );
+
+        getByTestId(wrapper, 'menu-button').simulate('click');
+
+        expect(getByTestId(wrapper, 'menu-dropdownMenu').prop('hidden')).toBe(false);
+    });
+
+    test('Should close bento-menu when escape key is pressed in nav-menu', () => {
+        const wrapper = mountWithTheme(setup(
+            <BentoMenuButton productLinks={products} externalLinks={externals} />,
+        ));
+
+        getByTestId(wrapper, 'listitem-optionA').simulate('keydown', { key: 'Escape' });
+
+        expect(getByTestId(wrapper, 'menu-dropdownMenu').prop('hidden')).toBe(true);
+    });
+
+    test('Matches Snapshot', () => {
+        const tree = renderWithTheme(setup(
+            <BentoMenuButton productLinks={products} externalLinks={externals} />,
+        ));
+
+        expect(tree).toMatchSnapshot();
+    });
+});