@veritone-ce/design-system 1.12.8 → 1.12.10

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/AudioSlider/AudioSlider.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, Story } from '@storybook/react';
+import { AudioSliderProps } from './';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Default: Story<AudioSliderProps>;

package/dist/components/AudioSlider/AudioSlider.stories.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import AudioSlider from './';
+import Box from '../Box';
+export default {
+    title: 'Components/AudioSlider',
+    component: AudioSlider,
+    argTypes: {
+        value: {
+            control: {
+                type: 'range',
+                min: 0,
+                max: 3,
+                step: 0.1
+            }
+        },
+        onChange: { action: 'onChange' }
+    }
+};
+const Template = (args) => (_jsx(Box, Object.assign({ display: "flex", justifyContent: "center", alignItems: "center", height: "100vh" }, { children: _jsx(AudioSlider, Object.assign({}, args)) })));
+const onChangeSlider = (event, value) => {
+    console.log('onChangeSlider', event, value);
+};
+export const Default = Template.bind({});
+Default.args = {
+    value: 1,
+    onChange: onChangeSlider,
+    max: 3,
+    step: 0.1
+};

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

@@ -0,0 +1,12 @@
+import { SliderProps as MuiSliderProps } from '@mui/material/Slider';
+export type AudioSliderProps = {
+    value: number;
+    onChange: (event: Event, value: number | number[]) => void;
+    label?: string;
+    max?: number;
+    isAvailable?: boolean;
+    step?: number;
+    typeData?: string;
+} & MuiSliderProps;
+declare const AudioSlider: ({ value, onChange, max, isAvailable, step, label, typeData, ...props }: AudioSliderProps) => JSX.Element;
+export default AudioSlider;

package/dist/components/AudioSlider/index.js

@@ -0,0 +1,61 @@
+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 } from "react/jsx-runtime";
+import Slider from '@mui/material/Slider';
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+const CustomSlider = styled(Slider)({
+    color: '#1871E8',
+    height: 6,
+    '& .MuiSlider-track': {
+        border: 'none',
+        height: '6px'
+    },
+    '& .MuiSlider-thumb': {
+        height: 18,
+        width: 14,
+        backgroundColor: '#2A323C',
+        borderRadius: 2,
+        position: 'relative',
+        '&::before': {
+            content: '""',
+            position: 'absolute',
+            width: 1,
+            height: 12,
+            backgroundColor: '#FFFFFF',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)'
+        },
+        '&:hover': {
+            outline: 'none'
+        },
+        '&:active': {
+            outline: 'none'
+        },
+        '&:focus': {
+            outline: 'none'
+        }
+    },
+    '& .MuiSlider-rail': {
+        height: '6px',
+        backgroundColor: '#9FA2A4'
+    },
+    '& .MuiSlider-thumb.Mui-focusVisible, .MuiSlider-thumb:hover': {
+        boxShadow: 'none'
+    }
+});
+const AudioSlider = (_a) => {
+    var { value, onChange, max = 3, isAvailable = true, step, label, typeData = 'audio' } = _a, props = __rest(_a, ["value", "onChange", "max", "isAvailable", "step", "label", "typeData"]);
+    return (_jsx(Box, Object.assign({ sx: { width: 320 } }, { children: _jsx(CustomSlider, { "aria-label": "audio-slider", defaultValue: value, max: max, step: step, onChange: onChange, disabled: !isAvailable }) })));
+};
+export default AudioSlider;

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/dist/index.d.ts

@@ -26,5 +26,6 @@ export { default as Step } from './components/Step';
 export { default as StepLabel } from './components/StepLabel';
 export { default as ModelGridView } from './components/ModelGridView';
 export { default as Breadcrumbs } from './components/Breadcrumbs';
+export { default as AudioSlider } from './components/AudioSlider';
 export { default as theme } from './assets/theme';
 export { useTheme } from '@mui/material';

package/dist/index.js

@@ -26,5 +26,6 @@ export { default as Step } from './components/Step';
 export { default as StepLabel } from './components/StepLabel';
 export { default as ModelGridView } from './components/ModelGridView';
 export { default as Breadcrumbs } from './components/Breadcrumbs';
+export { default as AudioSlider } from './components/AudioSlider';
 export { default as theme } from './assets/theme';
 export { useTheme } from '@mui/material';

package/package.json

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