@veritone-ce/design-system 1.4.0 → 1.6.0

package/dist/assets/theme.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createTheme } from '@mui/material';
+import checkboxTheme from '../components/Checkbox/checkbox.theme';
 import radioButtonTheme from '../components/RadioButton/RadioButton.theme';
 import buttonTheme from '../components/Button/button.theme';
+import inputTheme from '../components/Input/Input.theme';
 import sx from '@mui/system/sx';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import InfoIcon from '@mui/icons-material/Info';
@@ -84,6 +86,8 @@ let theme = createTheme({
 });
 theme = createTheme(Object.assign(Object.assign({}, theme), { components: {
         MuiButton: buttonTheme(theme),
+        MuiTextField: inputTheme(theme),
+        MuiCheckbox: checkboxTheme(theme),
         MuiRadio: radioButtonTheme(theme),
         MuiInputLabel: {
             styleOverrides: {
@@ -95,6 +99,18 @@ theme = createTheme(Object.assign(Object.assign({}, theme), { components: {
                 })
             }
         },
+        MuiFormControlLabel: {
+            styleOverrides: {
+                root: sx({
+                    '& .MuiFormControlLabel-label': {
+                        color: theme.palette.text.secondary
+                    },
+                    '& .MuiFormControlLabel-label.Mui-disabled': {
+                        color: theme.palette.text.disabled
+                    }
+                })
+            }
+        },
         MuiFormHelperText: {
             styleOverrides: {
                 root: sx({
@@ -117,31 +133,6 @@ theme = createTheme(Object.assign(Object.assign({}, theme), { components: {
                 })
             }
         },
-        MuiTextField: {
-            defaultProps: {
-                size: 'small'
-            },
-            styleOverrides: {
-                root: sx({
-                    color: colors.text.primary,
-                    '& .MuiOutlinedInput-root': {
-                        // TODO: Where did this color come from?
-                        // '& fieldset': {
-                        //   borderColor: colors.light.five
-                        // },
-                        '&:hover fieldset': {
-                            borderColor: theme.palette.secondary.main
-                        },
-                        '&.Mui-focused fieldset': {
-                            border: `1px solid ${theme.palette.text.secondary}`
-                        },
-                        '&.Mui-error fieldset': {
-                            borderColor: theme.palette.error.main
-                        }
-                    }
-                })
-            }
-        },
         MuiStepIcon: {
             styleOverrides: {
                 root: {

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

@@ -0,0 +1,5 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<({ label, ...props }: import(".").CheckboxProps) => JSX.Element>;
+export default _default;
+export declare const Default: ComponentStory<({ label, ...props }: import(".").CheckboxProps) => JSX.Element>;
+export declare const WithoutLabel: ComponentStory<({ label, ...props }: import(".").CheckboxProps) => JSX.Element>;

package/dist/components/Checkbox/Checkbox.stories.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import React from 'react';
+import Checkbox from '.';
+export default {
+    title: 'Components/Checkbox',
+    component: Checkbox
+};
+const Template = (args) => (_jsx(Box, Object.assign({ sx: {
+        display: `grid`,
+        gridTemplateRows: `repeat(5, min-content)`,
+        gap: 2
+    } }, { children: _jsxs(React.Fragment, { children: [_jsx(Checkbox, Object.assign({}, args)), _jsx(Checkbox, Object.assign({}, args, { checked: true })), _jsx(Checkbox, Object.assign({}, args, { indeterminate: true })), _jsx(Checkbox, Object.assign({}, args, { disabled: true })), _jsx(Checkbox, Object.assign({}, args, { disabled: true, checked: true }))] }) })));
+export const Default = Template.bind({});
+Default.args = {
+    label: 'Label'
+};
+export const WithoutLabel = Template.bind({});
+WithoutLabel.args = {};

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

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

package/dist/components/Checkbox/__tests__/Checkbox.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 Checkbox from '..';
+describe('<Checkbox />', () => {
+    it('should render the Checkbox component', () => {
+        render(_jsx(Checkbox, { "data-testid": "checkbox" }));
+        expect(screen.getByTestId('checkbox')).toBeInTheDocument();
+    });
+});

package/dist/components/Checkbox/checkbox.theme.d.ts

@@ -0,0 +1,18 @@
+import { Theme } from '../../assets/theme';
+declare const checkboxTheme: (theme: Theme) => {
+    styleOverrides: {
+        root: () => {
+            marginRight: string;
+            '&.MuiCheckbox-root': {
+                color: string;
+            };
+            '&.Mui-checked, &.MuiCheckbox-indeterminate': {
+                color: string;
+            };
+            '&.Mui-disabled': {
+                color: string;
+            };
+        };
+    };
+};
+export default checkboxTheme;

package/dist/components/Checkbox/checkbox.theme.js

@@ -0,0 +1,17 @@
+const checkboxTheme = (theme) => ({
+    styleOverrides: {
+        root: () => ({
+            marginRight: '8px',
+            '&.MuiCheckbox-root': {
+                color: theme.palette.text.secondary
+            },
+            '&.Mui-checked, &.MuiCheckbox-indeterminate': {
+                color: theme.palette.button.main
+            },
+            '&.Mui-disabled': {
+                color: theme.palette.text.disabled
+            }
+        })
+    }
+});
+export default checkboxTheme;

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

@@ -0,0 +1,7 @@
+import { CheckboxProps as MuiCheckboxProps } from '@mui/material';
+export declare type CheckboxProps = {
+    'data-testid'?: string;
+    label?: string | undefined;
+} & MuiCheckboxProps;
+declare const Checkbox: ({ label, ...props }: CheckboxProps) => JSX.Element;
+export default Checkbox;

package/dist/components/Checkbox/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 } from "react/jsx-runtime";
+import { FormControlLabel, Checkbox as MuiCheckbox } from '@mui/material';
+const Checkbox = (_a) => {
+    var { label } = _a, props = __rest(_a, ["label"]);
+    return _jsx(FormControlLabel, { label: label, control: _jsx(MuiCheckbox, Object.assign({}, props)) });
+};
+export default Checkbox;

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

@@ -0,0 +1,11 @@
+import { ComponentStory, Story, ComponentMeta } from '@storybook/react';
+import Input from '.';
+declare const _default: ComponentMeta<({ ...TextFieldProps }: {
+    'data-testid'?: string | undefined;
+} & import("@mui/material").TextFieldProps) => JSX.Element>;
+export default _default;
+export declare const Default: ComponentStory<typeof Input> | Story;
+export declare const Disabled: ComponentStory<typeof Input> | Story;
+export declare const Error: ComponentStory<typeof Input> | Story;
+export declare const Search: ComponentStory<typeof Input> | Story;
+export declare const MultiLine: ComponentStory<typeof Input> | Story;

package/dist/components/Input/Input.stories.js

@@ -0,0 +1,53 @@
+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 SearchIcon from '@mui/icons-material/Search';
+import Input from '.';
+import { Box, InputAdornment } from '@mui/material';
+export default {
+    title: 'Components/Input',
+    component: Input,
+    argTypes: {
+        label: { control: 'text' },
+        helperText: { control: 'text' },
+        disabled: { control: 'boolean' },
+        error: { control: 'boolean' },
+        InputProps: { control: false },
+        margin: { control: false },
+        focused: { control: false },
+        ref: { control: false },
+        hiddenLabel: { control: false },
+        'data-testid': { control: false }
+    }
+};
+export const Default = (_a) => {
+    var args = __rest(_a, []);
+    return (_jsx(Box, { children: _jsx(Input, Object.assign({ value: "Input Text .paragraph1", label: "label.semibold 14/17", helperText: "Helper Text .paragraph3 (Optional)" }, args)) }));
+};
+export const Disabled = (_a) => {
+    var args = __rest(_a, []);
+    return (_jsx(Box, { children: _jsx(Input, Object.assign({ value: "Input Text .paragraph1", label: "label.semibold 14/17", disabled: true }, args)) }));
+};
+export const Error = (_a) => {
+    var args = __rest(_a, []);
+    return (_jsx(Box, { children: _jsx(Input, Object.assign({ value: "Input Text .paragraph1", label: "label.semibold 14/17", helperText: "Error Message", error: true }, args)) }));
+};
+export const Search = (_a) => {
+    var args = __rest(_a, []);
+    return (_jsx(Box, { children: _jsx(Input, Object.assign({ placeholder: "Search", label: "label.semibold 14/17", InputLabelProps: { shrink: true }, InputProps: {
+                startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(SearchIcon, {}) })))
+            } }, args)) }));
+};
+export const MultiLine = (_a) => {
+    var args = __rest(_a, []);
+    return (_jsx(Box, { children: _jsx(Input, Object.assign({ label: "label.semibold 14/17", multiline: true, rows: 4 }, args)) }));
+};

package/dist/components/Input/Input.theme.d.ts

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

package/dist/components/Input/Input.theme.js

@@ -0,0 +1,98 @@
+const inputTheme = (theme) => ({
+    defaultProps: {},
+    styleOverrides: {
+        root: () => ({
+            maxWidth: '300px',
+            display: 'flex',
+            gap: '3px',
+            '& .MuiInputLabel-root': {
+                position: 'initial',
+                transform: 'initial',
+                fontWeight: 600,
+                fontSize: '14px',
+                lineHeight: '20px',
+                color: theme.palette.neutral.main,
+                '&.Mui-focused': {
+                    color: theme.palette.neutral.main
+                }
+            },
+            '& .MuiInputLabel-root.Mui-disabled': {
+                color: theme.palette.neutral.main
+            },
+            '& .MuiInputLabel-root.Mui-error': {
+                color: theme.palette.neutral.main
+            },
+            '& .MuiInputBase-root': {
+                padding: '0px 0px 4px',
+                height: '36px',
+                '& input': {
+                    boxSizing: 'border-box',
+                    height: '100%',
+                    width: '100%',
+                    padding: '8px',
+                    fontFamily: 'Nunito Sans',
+                    fontSize: '14px',
+                    fontWeight: '400',
+                    lineHeight: '20px',
+                    color: theme.palette.text.primary,
+                    border: 'none',
+                    '&:disabled': {
+                        background: theme.palette.action.disabledBackground,
+                        borderColor: '#E0E8F0 !important'
+                    }
+                },
+                '& fieldset': {
+                    border: `1px solid ${theme.palette.neutral.main}`,
+                    borderRadius: '4px',
+                    '&:focus': {
+                        border: `2px solid ${theme.palette.secondary.main}`
+                    },
+                    '&:disabled': {
+                        background: theme.palette.action.disabledBackground,
+                        borderColor: '#E0E8F0 !important'
+                    },
+                    '& legend': {
+                        display: 'none'
+                    }
+                }
+            },
+            '& .MuiInputBase-root.MuiInputBase-multiline': {
+                height: '157px',
+                border: 'none',
+                fontWeight: 400,
+                fontSize: '14px',
+                lineHeight: '20px',
+                '& textarea': {
+                    boxSizing: 'border-box',
+                    height: '100% !important',
+                    width: '100%',
+                    padding: '8px'
+                }
+            },
+            '& .MuiFormHelperText-root': {
+                fontWeight: 400,
+                fontSize: '12px',
+                lineHeight: '18px',
+                margin: 0,
+                color: theme.palette.action.disabled
+            },
+            '& .MuiFormHelperText-root.Mui-error': {
+                color: theme.palette.error.main
+            },
+            '& .Mui-error': {
+                '& input': {
+                    border: 'none',
+                    '&:focus': {
+                        border: 'none'
+                    }
+                }
+            },
+            '& .MuiInputAdornment-root': {
+                padding: '9px 2px 9px 8px',
+                marginRight: '0px',
+                color: theme.palette.text.tertiary
+            }
+        })
+    }
+});
+export default inputTheme;

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

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

package/dist/components/Input/__tests__/Input.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 Input from '..';
+describe('<Input />', () => {
+    it('should render the Input component', () => {
+        render(_jsx(Input, {}));
+        expect(screen.getByTestId('input-component')).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,6 @@
+import { TextFieldProps } from '@mui/material';
+declare type InputComponentProps = {
+    'data-testid'?: string;
+} & TextFieldProps;
+declare const Input: ({ ...TextFieldProps }: InputComponentProps) => JSX.Element;
+export default Input;

package/dist/components/Input/index.js

@@ -0,0 +1,20 @@
+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 TextField from '@mui/material/TextField';
+const Input = (_a) => {
+    var TextFieldProps = __rest(_a, []);
+    return (_jsx(TextField, Object.assign({ InputLabelProps: {
+            shrink: false
+        }, "data-testid": "input-component" }, TextFieldProps)));
+};
+export default Input;

package/package.json

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