@veritone-ce/design-system 1.2.2 → 1.3.0

package/dist/assets/theme.d.ts

@@ -1,4 +1,4 @@
-import { ThemeOptions as MuiThemeOptions } from '@mui/material';
+import { PaletteColorOptions, SimplePaletteColorOptions } from '@mui/material';
 declare module '@mui/material/Button' {
     interface ButtonPropsVariantOverrides {
         primary: true;
@@ -7,38 +7,53 @@ declare module '@mui/material/Button' {
     }
 }
 declare module '@mui/material/styles' {
-    interface TypeText {
-        tertiary: string;
+    type Colors = typeof colors;
+    type ButtonPaletteColorOptions = SimplePaletteColorOptions & {
+        hover: string;
+    };
+    type MiscPaletteColorOptions = Colors['misc'];
+    type TextPaletteColorOptions = Colors['text'];
+    interface TypeText extends TextPaletteColorOptions {
+    }
+    interface Palette {
+        neutral: Pick<Palette['primary'], 'main'>;
+        button: ButtonPaletteColorOptions;
+        misc: MiscPaletteColorOptions;
+    }
+    interface PaletteOptions {
+        neutral: PaletteColorOptions;
+        button: ButtonPaletteColorOptions;
+        misc: MiscPaletteColorOptions;
     }
 }
-declare module '@mui/material/styles/createPalette' {
-    type ButtonPaletteColorOptions = SimplePaletteColorOptions & {
+declare const colors: {
+    brand: {
+        pink: string;
+        blueOne: string;
+        blueTwo: string;
+        warning: string;
+        success: string;
+        error: string;
+        white: string;
+    };
+    text: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        disabled: string;
+    };
+    button: {
+        primary: string;
         hover: string;
     };
-    type MiscPalleteColorOptions = {
+    misc: {
         background: string;
         altBackground: string;
         rowHoverGreyOne: string;
         rowOn: string;
         rowOnHoverGreyTwo: string;
     };
-    interface Palette {
-        button: ButtonPaletteColorOptions;
-        neutral: Palette['primary'];
-        misc: MiscPalleteColorOptions;
-    }
-    interface PaletteOptions {
-        button?: ButtonPaletteColorOptions;
-        neutral?: PaletteColorOptions;
-        misc?: MiscPalleteColorOptions;
-    }
-    interface ThemeOptions extends MuiThemeOptions {
-        pallete?: {
-            button?: ButtonPaletteColorOptions;
-            neutral?: PaletteColorOptions;
-            misc?: MiscPalleteColorOptions;
-        };
-    }
-}
+};
+export declare type Theme = typeof theme;
 declare let theme: import("@mui/material").Theme;
 export default theme;

package/dist/assets/theme.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/* eslint-disable @typescript-eslint/ban-ts-comment */
 import { createTheme } from '@mui/material';
-import buttonTheme from 'components/Button/button.theme';
+import buttonTheme from '../components/Button/button.theme';
 import sx from '@mui/system/sx';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import InfoIcon from '@mui/icons-material/Info';
@@ -82,8 +81,7 @@ let theme = createTheme({
     },
     spacing: 10
 });
-theme = createTheme(theme, {
-    components: {
+theme = createTheme(Object.assign(Object.assign({}, theme), { components: {
         MuiButton: buttonTheme(theme),
         MuiInputLabel: {
             styleOverrides: {
@@ -274,19 +272,6 @@ theme = createTheme(theme, {
                     paddingTop: theme.spacing(1)
                 }
             }
-        },
-        MuiDataGrid: {
-            styleOverrides: {
-                root: {
-                    '& .MuiDataGrid-columnHeader:focus': {
-                        outline: 0
-                    },
-                    '& .MuiDataGrid-cell:focus': {
-                        outline: 0
-                    }
-                }
-            }
         }
-    }
-});
+    } }));
 export default theme;

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

@@ -0,0 +1,7 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { ButtonProps } from './';
+declare const _default: ComponentMeta<({ children, ...props }: ButtonProps) => JSX.Element>;
+export default _default;
+export declare const Contained: ComponentStory<({ children, ...props }: ButtonProps) => JSX.Element>;
+export declare const Outlined: ComponentStory<({ children, ...props }: ButtonProps) => JSX.Element>;
+export declare const Text: ComponentStory<({ children, ...props }: ButtonProps) => JSX.Element>;

package/dist/components/Button/Button.stories.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import Button from './';
+import CalendarIcon from '@mui/icons-material/CalendarTodayOutlined';
+import { Fragment } from 'react';
+// import { userEvent, within } from '@storybook/testing-library'
+// import { expect } from '@storybook/jest'
+export default {
+    title: 'Components/Button',
+    component: Button,
+    // argType: {
+    //   variant: `contained`,
+    // },
+    parameters: {
+        componentSubtitle: 'Clickable Button with many variations',
+        controls: {
+            exclude: ['variant', 'classes']
+        }
+    }
+};
+const previewProps = [
+    {},
+    {
+        startIcon: _jsx(CalendarIcon, {})
+    },
+    {
+        endIcon: _jsx(CalendarIcon, {})
+    }
+];
+const Template = (args) => (_jsx(Box, Object.assign({ sx: {
+        display: `grid`,
+        gridTemplateColumns: `repeat(4, min-content)`,
+        justifyItems: `flex-start`,
+        gap: 2
+    } }, { children: previewProps.map((props, index) => (_jsxs(Fragment, { children: [_jsx(Button, Object.assign({}, props, args, { children: "Button" })), _jsx(Button, Object.assign({}, props, { color: `error` }, args, { children: "Button" })), _jsx(Button, Object.assign({}, props, { disabled: true }, args, { children: "Button" })), _jsx(Button, Object.assign({}, props, { isLoading: true }, args, { children: "Button" }))] }, index))) })));
+export const Contained = Template.bind({});
+Contained.args = {
+    variant: 'contained'
+};
+export const Outlined = Template.bind({});
+Outlined.args = {
+    variant: 'outlined'
+};
+export const Text = Template.bind({});
+Text.args = {
+    variant: `text`
+};

package/dist/components/Button/Indicator.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CircularProgress, Box } from '@mui/material';
-import theme from 'assets/theme';
+import theme from '../../assets/theme';
 const Indicator = () => {
     return (_jsx(Box, Object.assign({ className: "button-loader", "data-testid": "loading-indicator", sx: {
             position: `absolute`,

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

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

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '../../../utils/tests/helpers';
+import { screen } from '@testing-library/react';
+import Button from '..';
+describe('<Button />', () => {
+    it('should render the Button component', () => {
+        render(_jsx(Button, { children: "Button" }));
+        expect(screen.getByText('Button')).toBeInTheDocument();
+    });
+    it('should show circular progress', () => {
+        render(_jsx(Button, Object.assign({ isLoading: true }, { children: "Button" })));
+        expect(screen.getByTestId('loading-indicator')).toBeInTheDocument();
+    });
+});