@veritone-ce/design-system 1.12.8 → 1.12.9

package/dist/assets/theme.js

@@ -8,6 +8,7 @@ import statusChipTheme from '../components/StatusChip/statusChip.theme';
 import selectTheme from '../components/Select/select.theme';
 import tabsTheme from '../components/Tabs/tabs.theme';
 import inputTheme from '../components/Input/input.theme';
+import { menuFlyoutTheme, menuItemTheme } from '../components/MenuFlyout/menuFlyout.theme';
 import modalTheme from '../components/Modal/modal.theme';
 import linearProgress from '../components/LinearProgress/linearProgress.theme';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
@@ -93,7 +94,7 @@ let theme = createTheme({
     spacing: 10
 });
 theme = createTheme(theme, {
-    components: Object.assign(Object.assign({ MuiButton: buttonTheme(theme) }, stepperTheme(theme)), { MuiSelect: selectTheme(theme), MuiTextField: inputTheme(theme), MuiDialog: modalTheme(theme), MuiCheckbox: checkboxTheme(theme), MuiRadio: radioButtonTheme(theme), MuiTabs: tabsTheme(theme), MuiChip: statusChipTheme(theme), MuiLinearProgress: linearProgress(theme), MuiInputLabel: {
+    components: Object.assign(Object.assign({ MuiButton: buttonTheme(theme) }, stepperTheme(theme)), { MuiSelect: selectTheme(theme), MuiTextField: inputTheme(theme), MuiDialog: modalTheme(theme), MuiCheckbox: checkboxTheme(theme), MuiRadio: radioButtonTheme(theme), MuiTabs: tabsTheme(theme), MuiChip: statusChipTheme(theme), MuiMenu: menuFlyoutTheme(theme), MuiMenuItem: menuItemTheme(theme), MuiLinearProgress: linearProgress(theme), MuiInputLabel: {
             styleOverrides: {
                 root: {
                     color: theme.palette.text.secondary,
@@ -259,18 +260,8 @@ theme = createTheme(theme, {
             styleOverrides: {
                 root: {
                     '&.MuiMenu-paper': {
-                        border: '1px solid ' + theme.palette.text.disabled,
-                        boxShadow: 'none'
-                    }
-                }
-            }
-        }, MuiMenuItem: {
-            styleOverrides: {
-                root: {
-                    color: theme.palette.text.primary,
-                    padding: '10px 20px',
-                    ':hover, :focus': {
-                        backgroundColor: theme.palette.misc.altBackground
+                    // border: '1px solid ' + theme.palette.text.disabled,
+                    // boxShadow: 'none'
                     }
                 }
             }

package/dist/components/MenuFlyout/MenuFlyout.stories.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<({ menuOptions, open, ...props }: {
+    'data-testid'?: string | undefined;
+    menuOptions: {
+        label: string;
+        icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    }[];
+} & import("@mui/material").MenuProps) => JSX.Element>;
+export default _default;
+export declare const Default: ComponentStory<({ menuOptions, open, ...props }: {
+    'data-testid'?: string | undefined;
+    menuOptions: {
+        label: string;
+        icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    }[];
+} & import("@mui/material").MenuProps) => JSX.Element>;
+export declare const WithIcons: ComponentStory<({ menuOptions, open, ...props }: {
+    'data-testid'?: string | undefined;
+    menuOptions: {
+        label: string;
+        icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    }[];
+} & import("@mui/material").MenuProps) => JSX.Element>;
+export declare const WithoutIcons: ComponentStory<({ menuOptions, open, ...props }: {
+    'data-testid'?: string | undefined;
+    menuOptions: {
+        label: string;
+        icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    }[];
+} & import("@mui/material").MenuProps) => JSX.Element>;

package/dist/components/MenuFlyout/MenuFlyout.stories.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
+import PersonAddAltOutlinedIcon from '@mui/icons-material/PersonAddAltOutlined';
+import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
+import { editLabel, shareWithLabel, deleteLabel } from './constants';
+import MenuFlyout from '.';
+export default {
+    title: 'Components/MenuFlyout',
+    component: MenuFlyout
+};
+const Template = (args) => (_jsx(MenuFlyout, Object.assign({}, args)));
+export const Default = Template.bind({});
+Default.args = {
+    menuOptions: [
+        {
+            label: 'This is an example of a 2 line item',
+            icon: _jsx(EditOutlinedIcon, {})
+        },
+        { label: '1 Line Item', icon: _jsx(EditOutlinedIcon, {}) },
+        { label: '2 Line Item', icon: _jsx(EditOutlinedIcon, {}) }
+    ]
+};
+export const WithIcons = Template.bind({});
+WithIcons.args = {
+    menuOptions: [
+        { label: editLabel, icon: _jsx(EditOutlinedIcon, {}) },
+        { label: shareWithLabel, icon: _jsx(PersonAddAltOutlinedIcon, {}) },
+        { label: deleteLabel, icon: _jsx(DeleteOutlinedIcon, {}) }
+    ]
+};
+export const WithoutIcons = Template.bind({});
+WithoutIcons.args = {
+    menuOptions: [
+        { label: editLabel },
+        { label: shareWithLabel },
+        { label: deleteLabel }
+    ]
+};

package/dist/components/MenuFlyout/__tests__/MenuFlyout.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/MenuFlyout/__tests__/MenuFlyout.test.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '../../../utils/tests/helpers';
+import { screen } from '@testing-library/react';
+import { editLabel, shareWithLabel } from '../constants';
+import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
+import MenuFlyout from '..';
+describe('<MenuFlyout />', () => {
+    const mockMenuOptions = [{ label: editLabel }, { label: shareWithLabel }];
+    const mockMenuIconOptions = [{ label: editLabel, icon: _jsx(EditOutlinedIcon, {}) }];
+    it('should render the MenuFlyout component, multi item list without icons', () => {
+        render(_jsx(MenuFlyout, { "data-testid": "menu-flyout", open: true, menuOptions: mockMenuOptions }));
+        expect(screen.getByTestId('menu-flyout')).toBeInTheDocument();
+        expect(screen.getByText(editLabel)).toBeInTheDocument();
+        expect(screen.getByText(shareWithLabel)).toBeInTheDocument();
+        expect(screen.getByRole('menu').children).toHaveLength(2);
+    });
+    it('should render MenuFlyout component, single item list with icon', () => {
+        render(_jsx(MenuFlyout, { "data-testid": "menu-flyout", open: true, menuOptions: mockMenuIconOptions }));
+        expect(screen.getByTestId('menu-flyout')).toBeInTheDocument();
+        expect(screen.getByText(editLabel)).toBeInTheDocument();
+        expect(screen.getByTestId('EditOutlinedIcon')).toBeVisible();
+        expect(screen.getByRole('menu').children).toHaveLength(1);
+    });
+});

package/dist/components/MenuFlyout/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const editLabel = "Edit Project";
+export declare const shareWithLabel = "Share with...";
+export declare const deleteLabel = "Delete Project";

package/dist/components/MenuFlyout/constants.js

@@ -0,0 +1,3 @@
+export const editLabel = 'Edit Project';
+export const shareWithLabel = 'Share with...';
+export const deleteLabel = 'Delete Project';

package/dist/components/MenuFlyout/index.d.ts

@@ -0,0 +1,15 @@
+import { MenuProps } from '@mui/material';
+import React from 'react';
+type MenuOption = {
+    label: string;
+    icon?: React.ReactElement;
+};
+type MenuFlyoutProps = {
+    'data-testid'?: string;
+    /**
+     An array of objects of type `MenuOption[]`. Each object in this array **requires** a label property of type `string` and an **optional** icon property of type `React.ReactElement`. Each object represents a list item on the menu flyout component.
+    **/
+    menuOptions: MenuOption[];
+} & MenuProps;
+declare const MenuFlyout: ({ menuOptions, open, ...props }: MenuFlyoutProps) => JSX.Element;
+export default MenuFlyout;

package/dist/components/MenuFlyout/index.js

@@ -0,0 +1,27 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Menu, MenuItem, ListItemIcon, Box, Typography } from '@mui/material';
+const MenuFlyout = (_a) => {
+    var { menuOptions, open } = _a, props = __rest(_a, ["menuOptions", "open"]);
+    return (_jsx(Menu, Object.assign({ "data-testid": true, open: true }, props, { children: menuOptions.map((menuItem, index) => {
+            return (_jsx(MenuItem, { children: _jsxs(Box, Object.assign({ sx: {
+                        display: 'flex',
+                        alignItems: 'center'
+                    } }, { children: [_jsx(Box, Object.assign({ sx: {
+                                mr: '10px'
+                            } }, { children: menuItem.icon && _jsx(ListItemIcon, { children: menuItem.icon }) })), _jsx(Box, { children: _jsx(Typography, Object.assign({ sx: {
+                                    fontSize: '14px'
+                                } }, { children: menuItem.label })) })] })) }, index));
+        }) })));
+};
+export default MenuFlyout;

package/dist/components/MenuFlyout/menuFlyout.theme.d.ts

@@ -0,0 +1,41 @@
+import { Theme } from '../../assets/theme';
+export declare const menuFlyoutTheme: (theme: Theme) => {
+    styleOverrides: {
+        root: () => {
+            height: string;
+            fontSize: string;
+            borderRadius: string;
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: number;
+            textTransform: string;
+            backgroundColor: string;
+            ':hover, :focus': {
+                backgroundColor: string;
+            };
+            '& .MuiList-root, &.MuiMenu-list': {
+                minWidth: number;
+                maxWidth: number;
+                padding: number;
+            };
+            '& .MuiPaper-root': {
+                background: string;
+                border: string;
+                borderRadius: string;
+                padding: string;
+                gap: string;
+                boxShadow: string;
+            };
+        };
+    };
+};
+export declare const menuItemTheme: (theme: Theme) => {
+    styleOverrides: {
+        root: () => {
+            whiteSpace: string;
+            minWidth: number;
+            maxWidth: number;
+            padding: string;
+        };
+    };
+};

package/dist/components/MenuFlyout/menuFlyout.theme.js

@@ -0,0 +1,40 @@
+export const menuFlyoutTheme = (theme) => ({
+    styleOverrides: {
+        root: () => ({
+            height: 'auto',
+            fontSize: '14px',
+            borderRadius: '2px',
+            fontFamily: 'Nunito',
+            fontStyle: 'normal',
+            fontWeight: 400,
+            textTransform: 'capitalize',
+            backgroundColor: theme.palette.common.white,
+            ':hover, :focus': {
+                backgroundColor: theme.palette.misc.altBackground
+            },
+            '& .MuiList-root, &.MuiMenu-list': {
+                minWidth: 168,
+                maxWidth: 200,
+                padding: 0
+            },
+            '& .MuiPaper-root': {
+                background: '#FFFFFF',
+                border: '1px solid #7C848D',
+                borderRadius: '0px 0px 4px 4px',
+                padding: '10px',
+                gap: '20px',
+                boxShadow: '3px 3px 5px rgba(0, 0, 0, 0.2)'
+            }
+        })
+    }
+});
+export const menuItemTheme = (theme) => ({
+    styleOverrides: {
+        root: () => ({
+            whiteSpace: 'normal',
+            minWidth: 168,
+            maxWidth: 200,
+            padding: '5px'
+        })
+    }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritone-ce/design-system",
-  "version": "1.12.8",
+  "version": "1.12.9",
   "private": false,
   "scripts": {
     "start": "yarn storybook",