@veritone-ce/design-system 1.3.1 → 1.5.0

package/dist/assets/theme.js

@@ -1,5 +1,7 @@
 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 sx from '@mui/system/sx';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
@@ -83,6 +85,8 @@ let theme = createTheme({
 });
 theme = createTheme(Object.assign(Object.assign({}, theme), { components: {
         MuiButton: buttonTheme(theme),
+        MuiCheckbox: checkboxTheme(theme),
+        MuiRadio: radioButtonTheme(theme),
         MuiInputLabel: {
             styleOverrides: {
                 root: sx({
@@ -93,6 +97,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({

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

@@ -0,0 +1,10 @@
+import { ComponentStory, Story, ComponentMeta } from '@storybook/react';
+import RadioButton from '.';
+declare const _default: ComponentMeta<({ label, ...props }: {
+    'data-testid'?: string | undefined;
+    label?: string | undefined;
+} & import("@mui/material").RadioProps) => JSX.Element>;
+export default _default;
+export declare const Default: ComponentStory<typeof RadioButton> | Story;
+export declare const Checked: ComponentStory<typeof RadioButton> | Story;
+export declare const Disabled: ComponentStory<typeof RadioButton> | Story;

package/dist/components/RadioButton/RadioButton.stories.js

@@ -0,0 +1,29 @@
+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 RadioButton from '.';
+export default {
+    title: 'Components/RadioButton',
+    component: RadioButton
+};
+export const Default = (_a) => {
+    var args = __rest(_a, []);
+    return _jsx(RadioButton, Object.assign({ label: "Label" }, args));
+};
+export const Checked = (_a) => {
+    var args = __rest(_a, []);
+    return _jsx(RadioButton, Object.assign({ label: "Label", checked: true }, args));
+};
+export const Disabled = (_a) => {
+    var args = __rest(_a, []);
+    return _jsx(RadioButton, Object.assign({ label: "Label", disabled: true }, args));
+};

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

@@ -0,0 +1,4 @@
+import { Components } from '@mui/material';
+import { Theme } from '../../assets/theme';
+declare const radioButtonTheme: (theme: Theme) => Components['MuiRadio'];
+export default radioButtonTheme;

package/dist/components/RadioButton/RadioButton.theme.js

@@ -0,0 +1,53 @@
+const radioButtonTheme = (theme) => ({
+    defaultProps: {
+        disableFocusRipple: true,
+        disableTouchRipple: true,
+        disableRipple: true
+    },
+    styleOverrides: {
+        root: () => ({
+            display: 'flex',
+            width: 'fit-content',
+            height: 'fit-content',
+            padding: '8px',
+            '&:hover': {
+                backgroundColor: 'transparent'
+            },
+            '& .MuiSvgIcon-root': {
+                boxSizing: 'border-box',
+                borderRadius: '50%'
+            },
+            '&.Mui-checked': {
+                '& .MuiSvgIcon-root:nth-of-type(1)': {
+                    border: `1px solid ${theme.palette.button.main}`
+                }
+            },
+            '& .MuiSvgIcon-root:nth-of-type(1)': {
+                boxSizing: 'border-box',
+                fontSize: 18,
+                color: 'transparent',
+                border: `1px solid ${theme.palette.text.secondary}`,
+                transition: 'border-color 0.2s'
+            },
+            '& .MuiSvgIcon-root:nth-of-type(2)': {
+                boxSizing: 'border-box',
+                width: 'auto',
+                height: 'auto',
+                color: 'transparent',
+                background: theme.palette.button.main,
+                margin: '3.37px 3.38px',
+                transition: 'background 0.2s'
+            },
+            '&.Mui-disabled': {
+                '& .MuiSvgIcon-root:nth-of-type(1)': {
+                    border: `1px solid ${theme.palette.text.disabled}`
+                },
+                '& .MuiSvgIcon-root:nth-of-type(2)': {
+                    transform: 'scale(1)',
+                    background: theme.palette.text.disabled
+                }
+            }
+        })
+    }
+});
+export default radioButtonTheme;

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

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

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

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

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

package/dist/components/RadioButton/index.js

@@ -0,0 +1,30 @@
+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, Radio } from '@mui/material';
+const RadioButton = (_a) => {
+    var { label } = _a, props = __rest(_a, ["label"]);
+    return (_jsx(FormControlLabel, { label: label, sx: {
+            margin: 0,
+            height: '36px',
+            color: (theme) => theme.palette.text.secondary,
+            '& .MuiTypography-root': {
+                lineHeight: '24px'
+            },
+            '&.Mui-disabled': {
+                '& .MuiTypography-root': {
+                    color: (theme) => theme.palette.text.disabled
+                }
+            }
+        }, control: _jsx(Radio, Object.assign({ "data-testid": "radio-button" }, props)) }));
+};
+export default RadioButton;

package/package.json

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