@evoke-platform/ui-components 1.0.0-dev.209 → 1.0.0-dev.211

package/dist/published/components/core/Alert/Alert.js

@@ -1,8 +1,56 @@
 import * as React from 'react';
 import { Alert as MUIAlert } from '@mui/material';
+import { CheckCircle, Close, ErrorRounded, InfoRounded, WarningRounded } from '@mui/icons-material';
+import Box from '../../layout/Box';
+import IconButton from '../IconButton';
+import Typography from '../Typography';
 import UIThemeProvider from '../../../theme';
+const styles = {
+    container: {
+        display: 'flex',
+        backgroundColor: 'white',
+        minHeight: '40px',
+        width: '400px',
+        padding: '7px',
+        border: '1px solid #919EAB7A',
+        borderRadius: '8px',
+        boxShadow: '0px 8px 16px 0px rgba(0, 0, 0, 0.12)',
+        alignItems: 'center',
+    },
+    icon: {
+        padding: 0,
+        width: '25px',
+    },
+};
+const colorMap = {
+    error: '#A22723',
+    success: '#229A16',
+    info: '#0C53B7',
+    warning: '#B78103',
+};
 const Alert = (props) => {
-    return (React.createElement(UIThemeProvider, null,
-        React.createElement(MUIAlert, Object.assign({}, props))));
+    const { children, action, severity, onClose, color } = props;
+    const getIcon = () => {
+        var _a;
+        const iconColor = color ? (_a = colorMap[color]) !== null && _a !== void 0 ? _a : color : severity ? colorMap[severity] : colorMap['success'];
+        switch (severity) {
+            case 'error':
+                return React.createElement(ErrorRounded, { sx: Object.assign(Object.assign({}, styles.icon), { color: iconColor }) });
+            case 'success':
+                return React.createElement(CheckCircle, { sx: Object.assign(Object.assign({}, styles.icon), { color: iconColor }) });
+            case 'info':
+                return React.createElement(InfoRounded, { sx: Object.assign(Object.assign({}, styles.icon), { color: iconColor }) });
+            case 'warning':
+                return React.createElement(WarningRounded, { sx: Object.assign(Object.assign({}, styles.icon), { color: iconColor }) });
+            default:
+                return React.createElement(CheckCircle, { sx: Object.assign(Object.assign({}, styles.icon), { color: iconColor }) });
+        }
+    };
+    return (React.createElement(UIThemeProvider, null, props.variant === 'outlined' ? (React.createElement(Box, { sx: Object.assign(Object.assign({}, styles.container), props.sx) },
+        React.createElement(Box, { margin: '5px', marginRight: '10px' }, getIcon()),
+        React.createElement(Typography, { fontSize: '14px', fontWeight: 400, sx: { marginRight: '3px' } }, children),
+        action,
+        React.createElement(IconButton, { size: "small", "aria-label": "close", color: "inherit", sx: { marginLeft: 'auto', marginRight: '15px' }, onClick: (event) => onClose && onClose(event) },
+            React.createElement(Close, { fontSize: "small" })))) : (React.createElement(MUIAlert, Object.assign({}, props)))));
 };
 export default Alert;

package/dist/published/components/core/AlertTitle/AlertTitle.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { AlertTitleProps } from '@mui/material';
+declare const AlertTitle: (props: AlertTitleProps) => JSX.Element;
+export default AlertTitle;

package/dist/published/components/core/AlertTitle/AlertTitle.js

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { AlertTitle as MUIAlertTitle } from '@mui/material';
+import UIThemeProvider from '../../../theme';
+const AlertTitle = (props) => {
+    return (React.createElement(UIThemeProvider, null,
+        React.createElement(MUIAlertTitle, Object.assign({}, props))));
+};
+export default AlertTitle;

package/dist/published/components/core/AlertTitle/index.d.ts

@@ -0,0 +1,2 @@
+import AlertTitle from './AlertTitle';
+export { AlertTitle };

package/dist/published/components/core/AlertTitle/index.js

@@ -0,0 +1,2 @@
+import AlertTitle from './AlertTitle';
+export { AlertTitle };

package/dist/published/components/core/Snackbar/Snackbar.js

@@ -1,40 +1,14 @@
 import * as React from 'react';
 import { Snackbar as MUISnackbar } from '@mui/material';
 import UIThemeProvider from '../../../theme';
-import IconButton from '../IconButton';
-import { CheckCircle, Close, InfoRounded } from '@mui/icons-material';
-import Box from '../../layout/Box';
-import Typography from '../Typography';
-const styles = {
-    container: {
-        display: 'flex',
-        backgroundColor: 'white',
-        minHeight: '40px',
-        width: '400px',
-        padding: '7px',
-        border: '1px solid #919EAB7A',
-        borderRadius: '8px',
-        boxShadow: '0px 8px 16px 0px rgba(0, 0, 0, 0.12)',
-        alignItems: 'center',
-    },
-    icon: {
-        padding: 0,
-        width: '25px',
-    },
-};
+import { Alert } from '../Alert';
 export const Snackbar = (props) => {
-    const { handleClose, error, message, autoHideDuration, action } = props;
-    return (React.createElement(UIThemeProvider, null,
-        React.createElement(MUISnackbar, Object.assign({ autoHideDuration: autoHideDuration !== null && autoHideDuration !== void 0 ? autoHideDuration : 6000, onClose: () => handleClose(), anchorOrigin: {
-                vertical: 'bottom',
-                horizontal: 'center',
-            } }, props),
-            React.createElement("div", null,
-                React.createElement(Box, { sx: styles.container },
-                    React.createElement(Box, { margin: '5px', marginRight: '10px' }, error ? (React.createElement(InfoRounded, { sx: Object.assign(Object.assign({}, styles.icon), { color: '#A22723' }) })) : (React.createElement(CheckCircle, { sx: Object.assign(Object.assign({}, styles.icon), { color: '#229A16' }) }))),
-                    React.createElement(Typography, { fontSize: '14px', fontWeight: 400, sx: { marginRight: '3px' } }, message !== null && message !== void 0 ? message : ''),
-                    action,
-                    React.createElement(IconButton, { size: "small", "aria-label": "close", color: "inherit", sx: { marginLeft: 'auto', marginRight: '15px' }, onClick: () => handleClose() },
-                        React.createElement(Close, { fontSize: "small" })))))));
+    const { handleClose, error, message, autoHideDuration, action, children } = props;
+    return (React.createElement(UIThemeProvider, null, children ? (React.createElement(MUISnackbar, Object.assign({}, props))) : (React.createElement(MUISnackbar, Object.assign({ autoHideDuration: autoHideDuration !== null && autoHideDuration !== void 0 ? autoHideDuration : 6000, onClose: () => handleClose(), anchorOrigin: {
+            vertical: 'bottom',
+            horizontal: 'center',
+        } }, props),
+        React.createElement("div", null,
+            React.createElement(Alert, { variant: "outlined", severity: error ? 'error' : 'success', onClose: () => handleClose(), action: action }, message))))));
 };
 export default Snackbar;

package/dist/published/components/core/index.d.ts

@@ -1,6 +1,7 @@
 export { Accordion, AccordionDetails, AccordionActions, AccordionSummary } from './Accordion';
 export { AppBar } from './AppBar';
 export { Alert } from './Alert';
+export { AlertTitle } from './AlertTitle';
 export { Autocomplete } from './Autocomplete';
 export { Avatar } from './Avatar';
 export { Backdrop } from './Backdrop';

package/dist/published/components/core/index.js

@@ -1,6 +1,7 @@
 export { Accordion, AccordionDetails, AccordionActions, AccordionSummary } from './Accordion';
 export { AppBar } from './AppBar';
 export { Alert } from './Alert';
+export { AlertTitle } from './AlertTitle';
 export { Autocomplete } from './Autocomplete';
 export { Avatar } from './Avatar';
 export { Backdrop } from './Backdrop';

package/dist/published/components/custom/DataGrid/DataGrid.d.ts

@@ -15,5 +15,6 @@ export declare type DataGridProps<T extends GridValidRowModel> = MuiDataGridProp
         mode: 'client' | 'server';
         maxRows?: number;
     };
+    hideSearchbar?: boolean;
 };
 export default function <T extends GridValidRowModel>(props: DataGridProps<T>): JSX.Element;

package/dist/published/components/custom/DataGrid/DataGrid.js

@@ -16,7 +16,7 @@ import UIThemeProvider from '../../../theme';
 import { Box, Typography } from '@mui/material';
 export default function (props) {
     var _a;
-    const { onRefresh, loading, theme, title, bulkAction, filterSettings, columns, rows } = props, rest = __rest(props, ["onRefresh", "loading", "theme", "title", "bulkAction", "filterSettings", "columns", "rows"]);
+    const { onRefresh, loading, theme, title, bulkAction, filterSettings, columns, rows, hideSearchbar } = props, rest = __rest(props, ["onRefresh", "loading", "theme", "title", "bulkAction", "filterSettings", "columns", "rows", "hideSearchbar"]);
     const [anchorEl, setAnchorEl] = useState();
     const addColumnFilterOperators = (columns) => {
         return (filterSettings === null || filterSettings === void 0 ? void 0 : filterSettings.mode) === 'server'
@@ -70,6 +70,7 @@ export default function (props) {
                     theme,
                     title,
                     bulkAction,
+                    hideSearchbar,
                 },
                 panel: {
                     anchorEl: anchorEl,

package/dist/published/components/custom/DataGrid/Toolbar.d.ts

@@ -9,6 +9,7 @@ export declare type GridToolbarProps = MuiGridToolbarProps & {
     theme?: Theme;
     title?: string;
     bulkAction?: BulkAction;
+    hideSearchbar?: boolean;
 };
 declare function Toolbar(props: GridToolbarProps): JSX.Element;
 export default Toolbar;

package/dist/published/components/custom/DataGrid/Toolbar.js

@@ -7,7 +7,7 @@ import UIThemeProvider from '../../../theme';
 import { Typography } from '@mui/material';
 function Toolbar(props) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    const { onRefresh, setAnchorEl, loading, theme, title, bulkAction } = props;
+    const { onRefresh, setAnchorEl, loading, theme, title, bulkAction, hideSearchbar } = props;
     const styles = {
         container: { display: 'flex', justifyContent: 'space-between', margin: '0 0 15px 0' },
         iconButton: {
@@ -48,8 +48,7 @@ function Toolbar(props) {
             React.createElement(Grid, { container: true, sx: styles.container },
                 title && (React.createElement(Grid, { xs: 12, sx: { marginBottom: '15px' } },
                     React.createElement(Typography, { sx: { fontSize: '20px', fontWeight: 700 } }, title))),
-                React.createElement(Grid, { item: true, xs: 6 },
-                    React.createElement(GridToolbarQuickFilter, { variant: "outlined", size: "small", sx: styles.quickFilter })),
+                React.createElement(Grid, { item: true, xs: 6 }, !hideSearchbar && (React.createElement(GridToolbarQuickFilter, { variant: "outlined", size: "small", sx: styles.quickFilter }))),
                 !bulkAction ? (React.createElement(Grid, { item: true },
                     React.createElement(Grid, { container: true, spacing: 1, sx: styles.icon },
                         React.createElement(Grid, { item: true, sx: { paddingRight: '15px' } },

package/dist/published/stories/Alert.stories.js

@@ -3,6 +3,17 @@ import { Alert as CustomAlert } from '../index';
 export default {
     title: 'Data Display/Alert',
     component: CustomAlert,
+    argTypes: {
+        severity: {
+            control: {
+                type: 'radio',
+                options: ['error', 'success', 'info', 'warning'],
+            },
+        },
+    },
 };
-const AlertTemplate = (args) => (React.createElement(CustomAlert, Object.assign({ severity: "error" }, args), "This is an error alert \u2014 check it out!"));
+const AlertTemplate = (args) => (React.createElement(CustomAlert, Object.assign({}, args), "This is an alert \u2014 check it out!"));
 export const Alert = AlertTemplate.bind({});
+Alert.args = {
+    severity: 'error',
+};

package/dist/published/stories/AlertTitle.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { AlertTitleProps } from '@mui/material';
+declare const _default: ComponentMeta<(props: AlertTitleProps) => JSX.Element>;
+export default _default;
+export declare const AlertTitle: ComponentStory<(props: AlertTitleProps) => JSX.Element>;

package/dist/published/stories/AlertTitle.stories.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Alert, AlertTitle as CustomAlertTitle } from '../index';
+export default {
+    title: 'Data Display/Alert Title',
+    component: CustomAlertTitle,
+};
+const AlertTitleTemplate = (args) => (React.createElement(Alert, { severity: "error" },
+    React.createElement(CustomAlertTitle, Object.assign({}, args), "Success"),
+    "Your data was successfully submitted."));
+export const AlertTitle = AlertTitleTemplate.bind({});

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.0.0-dev.209",
+    "version": "1.0.0-dev.211",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",