@spothero/ui 15.9.6 → 15.10.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spothero/ui",
-  "version": "15.9.6",
+  "version": "15.10.6",
   "description": "SpotHero's React component UI library.",
   "main": "v2/index.js",
   "repository": "https://github.com/spothero/fe-monorepo",
@@ -164,4 +164,4 @@
     "react-redux": ">=7.0.0",
     "redux": ">=4.0.0"
   }
-}
+}

package/styles/v2/components/Alert/Alert.jsx

@@ -0,0 +1,120 @@
+import {
+    Alert as ChakraAlert,
+    AlertTitle,
+    AlertDescription,
+    VStack,
+    Flex,
+    useStyleConfig,
+} from '@chakra-ui/react';
+import PropTypes from 'prop-types';
+import IconX from '@spothero/icons/times';
+import IconInfo from '@spothero/icons/filled-info-circle';
+import IconExclamation from '@spothero/icons/filled-exclamation-circle';
+import IconCheck from '@spothero/icons/filled-check-circle';
+import Button from 'v2/components/Button/Button';
+import Icon from 'v2/components/Icon/Icon';
+
+export const STATUSES = {
+    NEUTRAL: 'neutral',
+    ERROR: 'error',
+    WARNING: 'warning',
+    SUCCESS: 'success',
+};
+
+const statusIconMapping = {
+    [STATUSES.WARNING]: IconExclamation,
+    [STATUSES.SUCCESS]: IconCheck,
+    [STATUSES.ERROR]: IconExclamation,
+    [STATUSES.NEUTRAL]: IconInfo,
+};
+
+const Alert = ({
+    status,
+    title,
+    buttonProps,
+    buttonText,
+    buttonOnBottom,
+    showDismiss,
+    onDismissClick,
+    showIcon,
+    description,
+    ...props
+}) => {
+    const style = useStyleConfig('Alert', {'data-status': status});
+    const IconVariant = statusIconMapping[status];
+
+    return (
+        <ChakraAlert data-status={status} {...props}>
+            {showIcon ? <Icon sx={style.icon} as={IconVariant} /> : null}
+            <VStack spacing={0} alignItems="flex-start">
+                {title ? <AlertTitle>{title}</AlertTitle> : null}
+                {description ? (
+                    <AlertDescription>{description}</AlertDescription>
+                ) : null}
+                {buttonOnBottom && buttonText && buttonProps ? (
+                    <Button
+                        sx={style.actionButton}
+                        variant="tertiary"
+                        {...buttonProps}
+                    >
+                        {buttonText}
+                    </Button>
+                ) : null}
+            </VStack>
+            <Flex alignItems="center" marginLeft="auto">
+                {!buttonOnBottom && buttonText && buttonProps ? (
+                    <Button
+                        sx={style.actionButton}
+                        variant="tertiary"
+                        {...buttonProps}
+                    >
+                        {buttonText}
+                    </Button>
+                ) : null}
+                {showDismiss ? (
+                    <Button sx={style.dismissButton} onClick={onDismissClick}>
+                        <Icon width={3} height="auto" as={IconX} />
+                    </Button>
+                ) : null}
+            </Flex>
+        </ChakraAlert>
+    );
+};
+
+Alert.propTypes = {
+    /** Status. One of: success, neutral, warning, or error */
+    status: PropTypes.oneOf(['neutral', 'success', 'warning', 'error']),
+    /** Title Text. Will not display title if empty */
+    title: PropTypes.string,
+    /** Props to pass to button (like onClick). Will not display button if this or buttonText empty */
+    buttonProps: PropTypes.object,
+    /** Text of button. Will not display button if this or buttonProps empty */
+    buttonText: PropTypes.string,
+    /** Whether action button should be under description (as opposed to on right) */
+    buttonOnBottom: PropTypes.bool,
+    /** Whether or not to show X dismiss button */
+    showDismiss: PropTypes.bool,
+    /** Callback when X clicked */
+    onDismissClick: PropTypes.func,
+    /** Whether or not to show the icon */
+    showIcon: PropTypes.bool,
+    /** Description text. Will not display description if empty */
+    description: PropTypes.string,
+    /** Size of the text */
+    size: PropTypes.oneOf(['sm', 'md', 'lg']),
+};
+
+Alert.defaultProps = {
+    status: 'neutral',
+    title: null,
+    buttonProps: null,
+    buttonText: null,
+    buttonOnBottom: false,
+    showDismiss: false,
+    onDismissClick: null,
+    showIcon: true,
+    description: null,
+    size: 'md',
+};
+
+export default Alert;

package/styles/v2/components/Alert/Alert.stories.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import {VStack, Text} from '@chakra-ui/react';
+import {createSelectControl} from 'storybook/utils/create-control';
+import disableArgs from 'storybook/utils/disable-args';
+
+import Component from './Alert';
+
+export default {
+    title: 'v2/Alert',
+    component: Component,
+    parameters: {
+        removeBaseHtmlClass: true,
+    },
+};
+
+const AlertTemplate = props => (
+    <VStack alignItems="flex-start">
+        <Text>Status: Success</Text>
+        <Component status="success" {...props} />
+        <Text>Status: Error</Text>
+        <Component status="error" {...props} />
+        <Text>Status: Warning</Text>
+        <Component status="warning" {...props} />
+        <Text>Status: Neutral</Text>
+        <Component status="neutral" {...props} />
+    </VStack>
+);
+
+AlertTemplate.propTypes = {};
+
+export const Alert = AlertTemplate.bind({});
+
+Alert.argTypes = {
+    ...createSelectControl('size', ['sm', 'md', 'lg']),
+    ...disableArgs(['buttonProps', 'onDismissClick', 'status']),
+};
+
+Alert.args = {
+    title: 'Hello',
+    buttonOnBottom: false,
+    buttonText: 'Action',
+    description: 'This is an alert.',
+    buttonProps: {
+        onClick: () => console.log('Action clicked'),
+    },
+    showDismiss: true,
+    onDismissClick: () => console.log('dismissed'),
+    showIcon: true,
+    size: 'md',
+};

package/styles/v2/components/Alert/index.js

@@ -0,0 +1 @@
+export {default} from './Alert';

package/styles/v2/components/Alert/styles/index.js

@@ -0,0 +1,166 @@
+import merge from 'lodash/merge';
+import chakraDefaultTheme from '@chakra-ui/theme';
+import {STATUSES} from '../Alert';
+
+const baseStyle = {
+    container: {
+        paddingY: 2,
+        borderRadius: 'base',
+    },
+    actionButton: {
+        fontSize: 'sm',
+        height: 'fit-content',
+        lineHeight: '1.4',
+        color: 'primary.600',
+        _hover: {
+            color: 'primary.700',
+        },
+    },
+    dismissButton: {
+        color: 'gray.600',
+        borderColor: 'transparent',
+        borderWidth: '2px',
+        padding: 0,
+        width: 10,
+        height: 10,
+        backgroundColor: 'transparent',
+        borderRadius: 'base',
+        marginLeft: 2,
+        _hover: {
+            color: 'gray.700',
+        },
+        _focus: {
+            color: 'gray.700',
+            borderColor: 'white',
+            boxShadow: 'outline',
+        },
+    },
+    icon: {
+        width: 6,
+        marginRight: 2,
+        height: 'auto',
+    },
+    description: {
+        lineHeight: 1.4,
+    },
+    title: {
+        lineHeight: 1.4,
+    },
+};
+
+const statusStyles = status => {
+    switch (status) {
+        case STATUSES.NEUTRAL:
+            return {
+                container: {
+                    background: 'gray.light',
+                },
+                icon: {
+                    color: 'gray.dark',
+                },
+                dismissButton: {
+                    _hover: {
+                        background: 'gray.200',
+                    },
+                    _focus: {
+                        background: 'gray.200',
+                    },
+                },
+            };
+        case STATUSES.WARNING:
+            return {
+                container: {
+                    background: 'yellow.100',
+                },
+                icon: {
+                    color: 'yellow.500',
+                },
+                dismissButton: {
+                    _hover: {
+                        background: 'yellow.200',
+                    },
+                    _focus: {
+                        background: 'yellow.200',
+                    },
+                },
+            };
+        case STATUSES.ERROR:
+            return {
+                container: {
+                    background: 'red.100',
+                },
+                icon: {
+                    color: 'red.700',
+                },
+                dismissButton: {
+                    _hover: {
+                        background: 'red.200',
+                    },
+                    _focus: {
+                        background: 'red.200',
+                    },
+                },
+            };
+        case STATUSES.SUCCESS:
+            return {
+                container: {
+                    background: 'green.100',
+                },
+                icon: {
+                    color: 'green.700',
+                },
+                dismissButton: {
+                    _hover: {
+                        background: 'green.200',
+                    },
+                    _focus: {
+                        background: 'green.200',
+                    },
+                },
+            };
+
+        default:
+            return {};
+    }
+};
+
+const overrides = {
+    baseStyle: props => {
+        return merge(
+            {
+                ...chakraDefaultTheme.components.Alert.baseStyle,
+            },
+            baseStyle,
+            statusStyles(props['data-status'])
+        );
+    },
+    variants: {},
+    sizes: {
+        sm: {
+            title: {
+                fontSize: 'xs',
+            },
+            description: {
+                fontSize: 'xs',
+            },
+        },
+        md: {
+            title: {
+                fontSize: 'sm',
+            },
+            description: {
+                fontSize: 'sm',
+            },
+        },
+        lg: {
+            title: {
+                fontSize: 'base',
+            },
+            description: {
+                fontSize: 'base',
+            },
+        },
+    },
+};
+
+export default {...chakraDefaultTheme.components.Alert, ...overrides};

package/styles/v2/components/Button/Button.styles.js

@@ -5,6 +5,7 @@ const baseStyle = {
     px: 8,
     py: 3,
     fontSize: 'base',
+    fontFamily: 'body',
     lineHeight: 0.875,
     fontWeight: 'semibold',
     borderWidth: '1px',

package/styles/v2/components/Divider/Divider.jsx

@@ -1,18 +1,20 @@
 import React, {forwardRef} from 'react';
 import PropTypes from 'prop-types';
 import {Divider as ChakraDivider} from '@chakra-ui/react';
-import {baseStyles, colorScheme} from './Divider.styles';
+import {colorScheme} from './Divider.styles';
 
-const Divider = forwardRef(({variant, colorScheme: borderColor, ...props}, ref) => {
-    return (
-    <ChakraDivider
-        {...baseStyles}
-        {...colorScheme[borderColor]}
-        variant={variant}
-        {...props}
-        ref={ref}
-    />
-)});
+const Divider = forwardRef(
+    ({variant, colorScheme: borderColor, ...props}, ref) => {
+        return (
+            <ChakraDivider
+                {...colorScheme[borderColor]}
+                variant={variant}
+                {...props}
+                ref={ref}
+            />
+        );
+    }
+);
 
 Divider.propTypes = {
     /** Color scheme used */

package/styles/v2/components/Divider/Divider.stories.js

@@ -25,11 +25,10 @@ export default {
     },
 };
 
-
 const Template = props => (
     <Box>
         <Text>Over HowdyHowdyHowdy</Text>
-        <Component {...props}/>
+        <Component {...props} />
         <Text>Under HowdyHowdyHowdy</Text>
     </Box>
 );

package/styles/v2/components/Divider/Divider.styles.js

@@ -3,10 +3,10 @@ import chakraDefaultTheme from '@chakra-ui/theme';
 
 export const colorScheme = {
     low: {
-        borderColor: 'gray.100'
+        borderColor: 'gray.100',
     },
     medium: {
-        borderColor: 'gray.200'
+        borderColor: 'gray.200',
     },
 };
 

package/styles/v2/components/index.js

@@ -5,6 +5,7 @@ export {
     AccordionButton,
     default as Accordion,
 } from './Accordion';
+export {default as Alert} from './Alert';
 export * from './Button';
 export * from './Table';
 export * from './Skeleton';

package/styles/v2/components/styles.js

@@ -11,6 +11,7 @@ export {default as Divider} from './Divider/Divider.styles';
 export {default as Tabs} from './Tabs/styles';
 export {default as Select} from './Select/styles';
 export {default as Checkbox} from './Checkbox/styles';
+export {default as Alert} from './Alert/styles';
 export {default as Switch} from './Switch/styles';
 export {default as Popover} from './Popover/styles';
 export {default as Input} from './Input/styles';