@veritone-ce/design-system 1.3.0 → 1.4.0

package/dist/assets/theme.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createTheme } from '@mui/material';
+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 +84,7 @@ let theme = createTheme({
 });
 theme = createTheme(Object.assign(Object.assign({}, theme), { components: {
         MuiButton: buttonTheme(theme),
+        MuiRadio: radioButtonTheme(theme),
         MuiInputLabel: {
             styleOverrides: {
                 root: sx({

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

@@ -8,10 +8,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 import { render } from '../../../utils/tests/helpers';
 import { fireEvent, screen, act, waitFor } from '@testing-library/react';
 import * as axios from 'axios';
-// import * as uploadFile from '../useUploadFile'
 import FileUploader from '..';
 jest.mock('axios');
 const mockedAxios = axios;

package/dist/components/FileUploader/index.js

@@ -10,7 +10,6 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/* eslint-disable @typescript-eslint/ban-ts-comment */
 import { useCallback, useEffect, useState } from 'react';
 import { Box } from '@mui/system';
 import { IconButton, Typography } from '@mui/material';

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

@@ -1,5 +1,3 @@
-import '@fontsource/nunito-sans';
-import '@fontsource/dosis';
 export { default as Button } from './components/Button';
 export { default as ThemeProvider } from './components/ThemeProvider';
 export { default as theme } from './assets/theme';

package/dist/index.js

@@ -1,5 +1,3 @@
-import '@fontsource/nunito-sans';
-import '@fontsource/dosis';
 export { default as Button } from './components/Button';
 export { default as ThemeProvider } from './components/ThemeProvider';
 export { default as theme } from './assets/theme';

package/package.json

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