@veritone-ce/design-system 1.4.0 → 1.5.0

package/dist/assets/theme.js

@@ -1,5 +1,6 @@
 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';
@@ -84,6 +85,7 @@ let theme = createTheme({
 });
 theme = createTheme(Object.assign(Object.assign({}, theme), { components: {
         MuiButton: buttonTheme(theme),
+        MuiCheckbox: checkboxTheme(theme),
         MuiRadio: radioButtonTheme(theme),
         MuiInputLabel: {
             styleOverrides: {
@@ -95,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/package.json

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