@veritone-ce/design-system 1.10.0 → 1.11.1

package/dist/assets/theme.js

@@ -7,6 +7,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 modalTheme from '../components/Modal/modal.theme';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import InfoIcon from '@mui/icons-material/Info';
 import WarningIcon from '@mui/icons-material/Error';
@@ -91,6 +92,7 @@ theme = createTheme(theme, {
         MuiButton: buttonTheme(theme),
         MuiSelect: selectTheme(theme),
         MuiTextField: inputTheme(theme),
+        MuiDialog: modalTheme(theme),
         MuiCheckbox: checkboxTheme(theme),
         MuiRadio: radioButtonTheme(theme),
         MuiTabs: tabsTheme(theme),

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { ComponentStory, Story, ComponentMeta } from '@storybook/react';
+import Modal from '.';
+declare const _default: ComponentMeta<({ handleClose, isOpen, title, children, ...props }: {
+    'data-testid'?: string | undefined;
+    handleClose?: (() => void) | undefined;
+    isOpen: boolean;
+    title?: string | undefined;
+    height?: string | undefined;
+    children?: import("react").ReactNode;
+}) => JSX.Element>;
+export default _default;
+export declare const Primary: ComponentStory<typeof Modal> | Story;
+export declare const Destructive: ComponentStory<typeof Modal> | Story;
+export declare const Disabled: ComponentStory<typeof Modal> | Story;

package/dist/components/Modal/Modal.stories.js

@@ -0,0 +1,100 @@
+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 Modal from '.';
+import Button from '../Button';
+import Input from '../Input';
+import { DialogActions, DialogContent, DialogContentText, useTheme } from '@mui/material';
+export default {
+    title: 'Components/Modal',
+    component: Modal,
+    argTypes: {
+        isOpen: { control: 'boolean', defaultValue: true },
+        title: { control: 'text', defaultValue: 'Modal Title' }
+    }
+};
+export const Primary = (_a) => {
+    var args = __rest(_a, []);
+    const { palette } = useTheme();
+    return (_jsxs(Modal, Object.assign({ isOpen: true, title: "Modal Title" }, args, { children: [_jsx(DialogContent, Object.assign({ sx: {
+                    paddingBottom: '20px'
+                } }, { children: _jsx(DialogContentText, Object.assign({ id: "alert-dialog-description", sx: {
+                        fontSize: '14px',
+                        fontWeight: '400',
+                        lineHeight: '20px',
+                        color: palette.text.primary
+                    } }, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse consequat id tortor et feugiat. Nulla facilisi. Quisque a dui sit amet tellus scelerisque laoreet." })) })), _jsxs(DialogActions, Object.assign({ sx: {
+                    padding: '30px'
+                } }, { children: [_jsx(Button, Object.assign({ variant: "tertiary" }, { children: "Cancel" })), _jsx(Button, { children: "Action" })] }))] })));
+};
+export const Destructive = (_a) => {
+    var args = __rest(_a, []);
+    const { palette } = useTheme();
+    return (_jsxs(Modal, Object.assign({ isOpen: true, title: "Modal Title" }, args, { children: [_jsxs(DialogContent, Object.assign({ sx: {
+                    paddingBottom: '5px'
+                } }, { children: [_jsx(DialogContentText, Object.assign({ id: "alert-dialog-description", sx: {
+                            fontSize: '14px',
+                            fontWeight: '400',
+                            lineHeight: '20px',
+                            color: palette.text.primary
+                        } }, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse consequat id tortor et feugiat.." })), _jsxs(DialogContentText, Object.assign({ id: "alert-dialog-description", sx: {
+                            fontSize: '14px',
+                            fontWeight: '400',
+                            lineHeight: '20px',
+                            color: palette.text.primary,
+                            marginTop: '15px'
+                        } }, { children: ["To continue, type ", _jsx("b", { children: "DELETE" }), " in the box to confirm."] })), _jsx(Input, { value: "DELETE", sx: {
+                            '& .MuiOutlinedInput-root': {
+                                width: '157px',
+                                marginTop: '10px'
+                            },
+                            '& .MuiInputBase-root input': {
+                                fontSize: '14px',
+                                fontWeight: 700,
+                                lineHeight: '20px',
+                                color: '#5C6269'
+                            }
+                        } })] })), _jsxs(DialogActions, Object.assign({ sx: {
+                    padding: '14px 30px 20px'
+                } }, { children: [_jsx(Button, Object.assign({ variant: "tertiary" }, { children: "Cancel" })), _jsx(Button, Object.assign({ color: "error" }, { children: "Delete" }))] }))] })));
+};
+export const Disabled = (_a) => {
+    var args = __rest(_a, []);
+    const { palette } = useTheme();
+    return (_jsxs(Modal, Object.assign({ isOpen: true, title: "Modal Title" }, args, { children: [_jsxs(DialogContent, Object.assign({ sx: {
+                    paddingBottom: '5px'
+                } }, { children: [_jsx(DialogContentText, Object.assign({ id: "alert-dialog-description", sx: {
+                            fontSize: '14px',
+                            fontWeight: '400',
+                            lineHeight: '20px',
+                            color: palette.text.primary
+                        } }, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse consequat id tortor et feugiat.." })), _jsxs(DialogContentText, Object.assign({ id: "alert-dialog-description", sx: {
+                            fontSize: '14px',
+                            fontWeight: '400',
+                            lineHeight: '20px',
+                            color: palette.text.primary,
+                            marginTop: '15px'
+                        } }, { children: ["To continue, type ", _jsx("b", { children: "DELETE" }), " in the box to confirm."] })), _jsx(Input, { sx: {
+                            '& .MuiOutlinedInput-root': {
+                                width: '157px',
+                                marginTop: '10px'
+                            },
+                            '& .MuiInputBase-root input': {
+                                fontSize: '14px',
+                                fontWeight: 700,
+                                lineHeight: '20px',
+                                color: palette.neutral.main
+                            }
+                        } })] })), _jsxs(DialogActions, Object.assign({ sx: {
+                    padding: '14px 30px 20px'
+                } }, { children: [_jsx(Button, Object.assign({ variant: "tertiary" }, { children: "Cancel" })), _jsx(Button, Object.assign({ color: "error", disabled: true }, { children: "Delete" }))] }))] })));
+};

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

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

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '../../../utils/tests/helpers';
+import { screen } from '@testing-library/react';
+import Modal from '..';
+describe('<Modal />', () => {
+    it('should render the Modal component', () => {
+        render(_jsx(Modal, { "data-testid": "modal", isOpen: true }));
+        expect(screen.getByTestId('modal')).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,11 @@
+import React from 'react';
+type ModalProps = {
+    'data-testid'?: string;
+    handleClose?: () => void;
+    isOpen: boolean;
+    title?: string;
+    height?: string;
+    children?: React.ReactNode;
+};
+declare const Modal: ({ handleClose, isOpen, title, children, ...props }: ModalProps) => JSX.Element;
+export default Modal;

package/dist/components/Modal/index.js

@@ -0,0 +1,18 @@
+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 { Dialog, DialogTitle } from '@mui/material';
+const Modal = (_a) => {
+    var { handleClose, isOpen, title, children } = _a, props = __rest(_a, ["handleClose", "isOpen", "title", "children"]);
+    return (_jsxs(Dialog, Object.assign({}, props, { open: isOpen, onClose: handleClose, "aria-labelledby": "alert-dialog-title", "aria-describedby": "alert-dialog-description" }, { children: [_jsx(DialogTitle, Object.assign({ id: "alert-dialog-title" }, { children: title })), children] })));
+};
+export default Modal;

package/dist/components/Modal/modal.theme.d.ts

@@ -0,0 +1,3 @@
+import { Components, Theme } from '@mui/material';
+declare const modalTheme: (theme: Theme) => Components['MuiDialog'];
+export default modalTheme;

package/dist/components/Modal/modal.theme.js

@@ -0,0 +1,26 @@
+const modalTheme = (theme) => ({
+    defaultProps: {},
+    styleOverrides: {
+        root: () => ({
+            borderRadius: '4px',
+            '& .MuiBackdrop-root': {
+                backgroundColor: theme.palette.neutral.main
+            },
+            margin: 'auto',
+            '& .MuiPaper-root': {
+                margin: '0px',
+                boxShadow: `
+        0px 4px 34px
+        ${theme.palette.text.primary}`,
+                width: '410px'
+            },
+            '& .MuiDialogTitle-root': {
+                fontSize: '18px',
+                fontWeight: '600',
+                lineHeight: '24px',
+                color: theme.palette.text.primary
+            }
+        })
+    }
+});
+export default modalTheme;

package/package.json

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