@veritone-ce/design-system 0.9.16 → 0.9.17

package/dist/assets/theme.d.ts

@@ -3,7 +3,9 @@ import '@fontsource/nunito-sans';
 import '@fontsource/dosis';
 declare module '@mui/material/Button' {
     interface ButtonPropsVariantOverrides {
+        primary: true;
         secondary: true;
+        tertiary: true;
     }
 }
 declare module '@mui/material/styles/createPalette' {

package/dist/assets/theme.js

@@ -53,7 +53,7 @@ var theme = createTheme({
             main: '#FFBB0A'
         },
         error: {
-            main: '#D43060'
+            main: '#FF0000'
         },
         divider: '#214167'
     },
@@ -70,27 +70,37 @@ theme = createTheme(theme, {
                 // @ts-ignore
                 root: function (_a) {
                     var ownerState = _a.ownerState;
-                    return (__assign(__assign({ textTransform: 'none', '&.Mui-disabled': {
+                    return (__assign(__assign(__assign({ textTransform: 'none', fontWeight: '600', '&.Mui-disabled': {
                             borderColor: "#E0E8F0"
-                        }, '&.Mui-disabled .MuiButton-startIcon': {
+                        }, '&.Mui-disabled .MuiButton-startIcon .MuiButton-endIcon': {
                             opacity: 0.3
                         } }, (ownerState.variant === "contained" &&
                         {
-                            fontWeight: '600',
-                            backgroundColor: theme.palette.button.main,
+                            //@ts-ignore
+                            backgroundColor: ownerState.color === "primary" ? theme.palette.button.main : theme.palette[ownerState.color].main,
                             ':hover': {
-                                backgroundColor: theme.palette.button.hover
+                                //@ts-ignore
+                                backgroundColor: ownerState.color === "primary" ? theme.palette.button.hover : theme.palette[ownerState.color]
+                            }
+                        })), (ownerState.variant === "outlined" &&
+                        {
+                            //@ts-ignore
+                            color: ownerState.color === "primary" ? theme.palette.neutral.main : theme.palette[ownerState.color].main,
+                            //@ts-ignore
+                            borderColor: ownerState.color === "primary" ? theme.palette.neutral.main : theme.palette[ownerState.color].main,
+                            ':hover': {
+                                //@ts-ignore
+                                color: ownerState.color === "primary" ? theme.palette.secondary.main : theme.palette[ownerState.color],
+                                //@ts-ignore
+                                borderColor: ownerState.color === "primary" ? theme.palette.secondary.main : theme.palette[ownerState.color]
                             }
                         })), (ownerState.variant === "text" &&
                         {
-                            fontWeight: '600',
-                            color: theme.palette.button.main,
+                            //@ts-ignore
+                            color: ownerState.color === "primary" ? theme.palette.neutral.main : theme.palette[ownerState.color].main,
                             ':hover': {
-                                color: theme.palette.button.hover
-                            },
-                            '.MuiButton-startIcon': {
-                                color: "#555F7C",
-                                marginRight: theme.spacing(2)
+                                //@ts-ignore
+                                color: ownerState.color === "primary" ? theme.palette.secondary.main : theme.palette[ownerState.color]
                             }
                         })));
                 }

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const Indicator: () => JSX.Element;
+export default Indicator;

package/dist/components/Button/Indicator.js

@@ -0,0 +1,26 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CircularProgress, Box } from '@mui/material';
+var Indicator = function () {
+    return (_jsx(Box, __assign({ sx: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            display: "grid",
+            justifyItems: "center",
+            alignItems: "center"
+        } }, { children: _jsx(CircularProgress, { size: 20 }) })));
+};
+export default Indicator;

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

@@ -9,5 +9,5 @@ export declare type ButtonProps = {
 /**
 - Use a button for common user click actions. Several variations available.
 **/
-declare const Button: ({ children, isProcessing, ...props }: ButtonProps) => JSX.Element;
+declare const Button: ({ children, ...props }: ButtonProps) => JSX.Element;
 export default Button;

package/dist/components/Button/index.js

@@ -21,26 +21,18 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button as MuiButton, CircularProgress, Box } from '@mui/material';
+import { Button as MuiButton, Box } from '@mui/material';
+import Indicator from './Indicator';
+import useButtonProps from './useButtonProps';
 /**
 - Use a button for common user click actions. Several variations available.
 **/
 var Button = function (_a) {
-    var children = _a.children, _b = _a.isProcessing, isProcessing = _b === void 0 ? false : _b, props = __rest(_a, ["children", "isProcessing"]);
-    var processingIndicator = (_jsx(Box, __assign({ sx: {
-            position: "absolute",
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            display: "grid",
-            justifyItems: "center",
-            alignItems: "center"
-        } }, { children: _jsx(CircularProgress, { size: 20 }) })));
-    var indicator = isProcessing ? processingIndicator : null;
+    var children = _a.children, props = __rest(_a, ["children"]);
+    var _b = useButtonProps(props), isProcessing = _b.isProcessing, muiButtonProps = __rest(_b, ["isProcessing"]);
     return (_jsxs(Box, __assign({ sx: {
             display: "inline-flex",
             position: "relative"
-        } }, { children: [_jsx(MuiButton, __assign({}, props, { disabled: isProcessing || props.disabled }, { children: children })), indicator] })));
+        } }, { children: [_jsx(MuiButton, __assign({}, muiButtonProps, { children: children })), isProcessing ? _jsx(Indicator, {}) : null] })));
 };
 export default Button;

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

@@ -0,0 +1,3 @@
+import { ButtonProps } from '.';
+declare const useButtonProps: ({ isProcessing, ...props }: ButtonProps) => ButtonProps;
+export default useButtonProps;

package/dist/components/Button/useButtonProps.js

@@ -0,0 +1,27 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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;
+};
+var useButtonProps = function (_a) {
+    var _b = _a.isProcessing, isProcessing = _b === void 0 ? false : _b, props = __rest(_a, ["isProcessing"]);
+    return __assign({ disabled: isProcessing || props.disabled, isProcessing: isProcessing }, props);
+};
+export default useButtonProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritone-ce/design-system",
-  "version": "0.9.16",
+  "version": "0.9.17",
   "private": false,
   "dependencies": {
     "@emotion/react": "^11.10.4",