@veritone-ce/design-system 1.11.2 → 1.12.1

package/dist/assets/theme.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createTheme } from '@mui/material';
+import stepperTheme from '../components/Stepper/stepper.theme';
 import checkboxTheme from '../components/Checkbox/checkbox.theme';
 import radioButtonTheme from '../components/RadioButton/RadioButton.theme';
 import buttonTheme from '../components/Button/button.theme';
@@ -88,16 +89,7 @@ let theme = createTheme({
     spacing: 10
 });
 theme = createTheme(theme, {
-    components: {
-        MuiButton: buttonTheme(theme),
-        MuiSelect: selectTheme(theme),
-        MuiTextField: inputTheme(theme),
-        MuiDialog: modalTheme(theme),
-        MuiCheckbox: checkboxTheme(theme),
-        MuiRadio: radioButtonTheme(theme),
-        MuiTabs: tabsTheme(theme),
-        MuiChip: statusChipTheme(theme),
-        MuiInputLabel: {
+    components: Object.assign(Object.assign({ MuiButton: buttonTheme(theme) }, stepperTheme(theme)), { MuiSelect: selectTheme(theme), MuiTextField: inputTheme(theme), MuiDialog: modalTheme(theme), MuiCheckbox: checkboxTheme(theme), MuiRadio: radioButtonTheme(theme), MuiTabs: tabsTheme(theme), MuiChip: statusChipTheme(theme), MuiInputLabel: {
             styleOverrides: {
                 root: {
                     color: theme.palette.text.secondary,
@@ -106,8 +98,7 @@ theme = createTheme(theme, {
                     fontWeight: `600`
                 }
             }
-        },
-        MuiFormControlLabel: {
+        }, MuiFormControlLabel: {
             styleOverrides: {
                 root: {
                     '& .MuiFormControlLabel-label': {
@@ -118,8 +109,7 @@ theme = createTheme(theme, {
                     }
                 }
             }
-        },
-        MuiFormHelperText: {
+        }, MuiFormHelperText: {
             styleOverrides: {
                 root: {
                     position: 'relative',
@@ -140,27 +130,7 @@ theme = createTheme(theme, {
                     }
                 }
             }
-        },
-        MuiStepIcon: {
-            styleOverrides: {
-                root: {
-                    borderRadius: `100%`,
-                    outline: `1px solid ${theme.palette.text.tertiary}`,
-                    color: `white`,
-                    text: {
-                        fill: theme.palette.text.tertiary
-                    },
-                    '&.Mui-active': {
-                        outline: `none`,
-                        color: theme.palette.button.main,
-                        text: {
-                            fill: `white`
-                        }
-                    }
-                }
-            }
-        },
-        MuiDialogTitle: {
+        }, MuiDialogTitle: {
             styleOverrides: {
                 root: {
                     fontSize: `24px`,
@@ -171,8 +141,7 @@ theme = createTheme(theme, {
                     paddingBottom: theme.spacing(1)
                 }
             }
-        },
-        MuiDialogContent: {
+        }, MuiDialogContent: {
             styleOverrides: {
                 root: {
                     paddingTop: 0,
@@ -181,21 +150,18 @@ theme = createTheme(theme, {
                     paddingBottom: theme.spacing(1)
                 }
             }
-        },
-        MuiDialogActions: {
+        }, MuiDialogActions: {
             styleOverrides: {
                 root: {
                     padding: theme.spacing(3)
                 }
             }
-        },
-        MuiLink: {
+        }, MuiLink: {
             defaultProps: {
                 underline: `none`,
                 color: theme.palette.primary.main
             }
-        },
-        MuiSnackbar: {
+        }, MuiSnackbar: {
             defaultProps: {
                 autoHideDuration: 6000,
                 anchorOrigin: {
@@ -210,8 +176,7 @@ theme = createTheme(theme, {
                     position: `absolute`
                 }
             }
-        },
-        MuiAlert: {
+        }, MuiAlert: {
             defaultProps: {
                 variant: `outlined`,
                 iconMapping: {
@@ -258,23 +223,20 @@ theme = createTheme(theme, {
                     }
                 }
             }
-        },
-        MuiCircularProgress: {
+        }, MuiCircularProgress: {
             styleOverrides: {
                 root: {
                     color: theme.palette.button.main
                 }
             }
-        },
-        MuiCardContent: {
+        }, MuiCardContent: {
             styleOverrides: {
                 root: {
                     padding: theme.spacing(2),
                     paddingTop: theme.spacing(1)
                 }
             }
-        },
-        MuiDataGrid: {
+        }, MuiDataGrid: {
             styleOverrides: {
                 root: {
                     '& .MuiDataGrid-columnHeader:focus': {
@@ -285,8 +247,7 @@ theme = createTheme(theme, {
                     }
                 }
             }
-        },
-        MuiPaper: {
+        }, MuiPaper: {
             styleOverrides: {
                 root: {
                     '&.MuiMenu-paper': {
@@ -295,7 +256,6 @@ theme = createTheme(theme, {
                     }
                 }
             }
-        }
-    }
+        } })
 });
 export default theme;

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

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { ComponentStory, Story, ComponentMeta } from '@storybook/react';
+import Stepper from '.';
+declare const _default: ComponentMeta<(props: {
+    'data-testid'?: string | undefined;
+} & {
+    component?: import("react").ElementType<any> | undefined;
+} & Pick<import("@mui/material").PaperProps<"div", {}>, "variant" | "square" | "elevation"> & {
+    activeStep?: number | undefined;
+    alternativeLabel?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").StepperClasses> | undefined;
+    connector?: import("react").ReactElement<any, any> | null | undefined;
+    nonLinear?: boolean | undefined;
+    orientation?: import("@mui/material").Orientation | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "square" | "elevation" | "orientation" | "component" | "activeStep" | "alternativeLabel" | "connector" | "nonLinear">) => JSX.Element>;
+export default _default;
+export declare const Default: ComponentStory<typeof Stepper> | Story;

package/dist/components/Stepper/Stepper.stories.js

@@ -0,0 +1,22 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import { Step, StepLabel } from '@mui/material';
+import Stepper from '.';
+export default {
+    title: 'Components/Stepper',
+    component: Stepper
+};
+export const Default = (_a) => {
+    var args = __rest(_a, []);
+    return (_jsxs(Stepper, Object.assign({}, args, { children: [_jsx(Step, { children: _jsx(StepLabel, { children: "This is a label" }) }), _jsx(Step, { children: _jsx(StepLabel, { children: "This is another label" }) }), _jsx(Step, { children: _jsx(StepLabel, { children: "This is a third label" }) }), _jsx(Step, { children: _jsx(StepLabel, { children: "This is a fourth label" }) })] })));
+};

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

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

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

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { StepperProps as MuiStepperProps } from '@mui/material';
+type StepperProps = {
+    'data-testid'?: string;
+} & MuiStepperProps;
+/**
+  The Stepper is used for highlighting where a user is in a progression of steps.
+  For additional information see:
+    https://mui.com/material-ui/react-stepper/ ,
+    https://mui.com/material-ui/api/step/ ,
+    https://mui.com/material-ui/api/step-label/ .
+**/
+declare const Stepper: (props: StepperProps) => JSX.Element;
+export default Stepper;

package/dist/components/Stepper/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Stepper as MuiStepper } from '@mui/material';
+/**
+  The Stepper is used for highlighting where a user is in a progression of steps.
+  For additional information see:
+    https://mui.com/material-ui/react-stepper/ ,
+    https://mui.com/material-ui/api/step/ ,
+    https://mui.com/material-ui/api/step-label/ .
+**/
+const Stepper = (props) => {
+    return _jsx(MuiStepper, Object.assign({}, props));
+};
+export default Stepper;

package/dist/components/Stepper/stepper.theme.d.ts

@@ -0,0 +1,50 @@
+import { Theme } from '../../assets/theme';
+declare const stepperTheme: (theme: Theme) => {
+    MuiStepConnector: {
+        styleOverrides: {
+            line: {
+                borderColor: string;
+            };
+        };
+    };
+    MuiStep: {
+        defaultProps: {
+            completed: boolean;
+        };
+    };
+    MuiStepIcon: {
+        styleOverrides: {
+            root: {
+                borderRadius: string;
+                height: string;
+                width: string;
+                outline: string;
+                color: string;
+                text: {
+                    fill: string;
+                };
+                '&.Mui-active': {
+                    outline: string;
+                    color: string;
+                    text: {
+                        fill: string;
+                    };
+                };
+            };
+        };
+    };
+    MuiStepLabel: {
+        styleOverrides: {
+            label: {
+                fontWeight: string;
+                '&.Mui-active': {
+                    fontWeight: string;
+                };
+            };
+            iconContainer: {
+                padding: string;
+            };
+        };
+    };
+};
+export default stepperTheme;

package/dist/components/Stepper/stepper.theme.js

@@ -0,0 +1,49 @@
+const stepperTheme = (theme) => ({
+    MuiStepConnector: {
+        styleOverrides: {
+            line: {
+                borderColor: `#E0E8F0`
+            }
+        }
+    },
+    MuiStep: {
+        defaultProps: {
+            completed: false
+        }
+    },
+    MuiStepIcon: {
+        styleOverrides: {
+            root: {
+                borderRadius: `100%`,
+                height: `35px`,
+                width: `35px`,
+                outline: `1px solid ${theme.palette.text.tertiary}`,
+                color: `white`,
+                text: {
+                    fill: theme.palette.text.tertiary
+                },
+                '&.Mui-active': {
+                    outline: `none`,
+                    color: theme.palette.text.tertiary,
+                    text: {
+                        fill: `white`
+                    }
+                }
+            }
+        }
+    },
+    MuiStepLabel: {
+        styleOverrides: {
+            label: {
+                fontWeight: `600`,
+                '&.Mui-active': {
+                    fontWeight: `600`
+                }
+            },
+            iconContainer: {
+                padding: `0 10px 0 0`
+            }
+        }
+    }
+});
+export default stepperTheme;

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export { default as ProgressIndicator } from './components/ProgressIndicator';
 export { default as RadioButton } from './components/RadioButton';
 export { default as Select } from './components/Select';
 export { default as Tabs } from './components/Tabs';
+export { default as Stepper } from './components/Stepper';
 export { default as ThemeProvider } from './components/ThemeProvider';
 export { default as theme } from './assets/theme';
 export { useTheme } from '@mui/material';

package/dist/index.js

@@ -7,6 +7,7 @@ export { default as ProgressIndicator } from './components/ProgressIndicator';
 export { default as RadioButton } from './components/RadioButton';
 export { default as Select } from './components/Select';
 export { default as Tabs } from './components/Tabs';
+export { default as Stepper } from './components/Stepper';
 export { default as ThemeProvider } from './components/ThemeProvider';
 export { default as theme } from './assets/theme';
 export { useTheme } from '@mui/material';

package/package.json

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