@spothero/ui 15.7.1 → 15.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spothero/ui",
-  "version": "15.7.1",
+  "version": "15.9.0",
   "description": "SpotHero's React component UI library.",
   "main": "v2/index.js",
   "repository": "https://github.com/spothero/fe-monorepo",
@@ -88,10 +88,10 @@
     "@spothero/npm-publisher": "*",
     "@spothero/prettier-config": "*",
     "@spothero/stylelint-config": "*",
-    "@storybook/addon-actions": "6.3.13",
-    "@storybook/addon-essentials": "6.3.13",
-    "@storybook/addon-links": "6.3.13",
-    "@storybook/react": "6.3.13",
+    "@storybook/addon-actions": "6.5.10",
+    "@storybook/addon-essentials": "6.5.10",
+    "@storybook/addon-links": "6.5.10",
+    "@storybook/react": "6.5.10",
     "@testing-library/jest-dom": "5.11.9",
     "@testing-library/react": "11.2.5",
     "@testing-library/user-event": "12.8.1",
@@ -132,7 +132,7 @@
     "@emotion/react": "11.1.5",
     "@emotion/styled": "11.1.5",
     "@spothero/utils": "*",
-    "@storybook/addon-a11y": "6.3.4",
+    "@storybook/addon-a11y": "6.5.10",
     "axe-core": "4.1.3",
     "chartist": "0.11.4",
     "chartist-plugin-legend": "0.6.2",

package/styles/v2/components/AutoSuggestSelect/AutoSuggestSelect.jsx

@@ -15,6 +15,7 @@ const AutoSuggestSelect = forwardRef(
             isInvalid,
             isDisabled,
             isRequired,
+            isOptional,
             getOptions,
             onChange,
             iconSrc,
@@ -135,6 +136,7 @@ const AutoSuggestSelect = forwardRef(
             <FormControl
                 errorMessage={errorMessage}
                 isRequired={isRequired}
+                isOptional={isOptional}
                 helperText={helperText}
                 label={label}
                 inputId={id}
@@ -171,7 +173,7 @@ AutoSuggestSelect.propTypes = {
     placeholder: PropTypes.string,
     /** Optional helper text displayed below the select */
     helperText: PropTypes.string,
-    /** Error message that would dispplay under the select */
+    /** Error message that would display under the select */
     errorMessage: PropTypes.string,
     /** Boolean that sets whether the select is valid */
     isInvalid: PropTypes.bool,
@@ -179,6 +181,8 @@ AutoSuggestSelect.propTypes = {
     isDisabled: PropTypes.bool,
     /** Boolean that sets whether the select is required */
     isRequired: PropTypes.bool,
+    /** Boolean that sets whether the select is optional */
+    isOptional: PropTypes.bool,
     /** Function that is called with the value typed into the input that returns a list of options for the select */
     getOptions: PropTypes.func.isRequired,
     /** Function that is called when an option is selected, it returns the label and value of the selection */

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

@@ -0,0 +1,29 @@
+import React, {forwardRef} from 'react';
+import PropTypes from 'prop-types';
+import {Divider as ChakraDivider} from '@chakra-ui/react';
+import {baseStyles, colorScheme} from './Divider.styles';
+
+const Divider = forwardRef(({variant, colorScheme: borderColor, ...props}, ref) => {
+    return (
+    <ChakraDivider
+        {...baseStyles}
+        {...colorScheme[borderColor]}
+        variant={variant}
+        {...props}
+        ref={ref}
+    />
+)});
+
+Divider.propTypes = {
+    /** Color scheme used */
+    colorScheme: PropTypes.oneOf(['low', 'medium']),
+    /** The styling that will be applied to the HR tag */
+    variant: PropTypes.oneOf(['solid', 'dashed']),
+};
+
+Divider.defaultProps = {
+    variant: 'solid',
+    colorScheme: 'medium',
+};
+
+export default Divider;

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

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import {colorScheme} from './Divider.styles';
+
+import Component from './Divider';
+
+import {Box, Text} from '@chakra-ui/react';
+
+export default {
+    title: 'v2/Divider',
+    component: Component,
+    argTypes: {
+        colorScheme: {
+            control: {
+                type: 'select',
+                options: Object.keys(colorScheme),
+            },
+        },
+        variant: {
+            control: {
+                type: 'select',
+                options: ['solid', 'dashed'],
+            },
+        },
+    },
+};
+
+
+const Template = props => (
+    <Box>
+        <Text>Over HowdyHowdyHowdy</Text>
+        <Component {...props}/>
+        <Text>Under HowdyHowdyHowdy</Text>
+    </Box>
+);
+
+export const Divider = Template.bind({});
+
+Divider.args = {
+    variant: 'solid',
+    colorScheme: 'medium',
+};

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

@@ -0,0 +1,15 @@
+import merge from 'lodash/merge';
+import chakraDefaultTheme from '@chakra-ui/theme';
+
+export const colorScheme = {
+    low: {
+        borderColor: 'gray.100'
+    },
+    medium: {
+        borderColor: 'gray.200'
+    },
+};
+
+export default merge(chakraDefaultTheme.components.Divider, {
+    colorScheme,
+});

package/styles/v2/components/FormControl/FormControl.jsx

@@ -5,6 +5,7 @@ import {
     FormHelperText,
     FormLabel,
     FormErrorMessage,
+    Text,
 } from '@chakra-ui/react';
 
 const FormControl = forwardRef(
@@ -30,21 +31,34 @@ const FormControl = forwardRef(
                 <FormLabel
                     color="gray.600"
                     fontWeight="semibold"
-                    mb={2}
+                    marginBottom={helperText ? 0 : 1}
                     fontSize="sm"
                     htmlFor={inputId}
                     as={isFieldset ? 'legend' : 'label'}
+                    requiredIndicator=""
+                    optionalIndicator={
+                        props?.isOptional && !props?.isRequired ? (
+                            <Text
+                                marginLeft={1}
+                                as="span"
+                                variant="caption"
+                                color="text.secondary.light"
+                            >
+                                Optional
+                            </Text>
+                        ) : null
+                    }
                 >
                     {label}
                 </FormLabel>
             )}
-            {children}
             {helperText && (
-                <FormHelperText color="gray.600" mt={1} fontSize="xs">
+                <FormHelperText color="gray.600" marginBottom={1} fontSize="xs">
                     {helperText}
                 </FormHelperText>
             )}
-            <FormErrorMessage color="error" mt={1} fontSize="sm">
+            {children}
+            <FormErrorMessage color="error" mt={1} fontSize="xs">
                 {errorMessage}
             </FormErrorMessage>
         </ChakraFormControl>

package/styles/v2/components/Input/Input.jsx

@@ -13,6 +13,7 @@ const Input = forwardRef(
             isInvalid,
             isDisabled,
             isRequired,
+            isOptional,
             ...props
         },
         ref
@@ -24,6 +25,7 @@ const Input = forwardRef(
                 isInvalid={isInvalid}
                 isDisabled={isDisabled}
                 isRequired={isRequired}
+                isOptional={isOptional}
                 errorMessage={errorMessage}
                 helperText={helperText}
                 label={label}
@@ -43,6 +45,7 @@ Input.propTypes = {
     isInvalid: PropTypes.bool,
     isDisabled: PropTypes.bool,
     isRequired: PropTypes.bool,
+    isOptional: PropTypes.bool,
 };
 
 export default Input;

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

@@ -2,12 +2,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import Component from './Input';
+import {useTheme} from '@chakra-ui/react';
 
 export default {
     title: 'v2/Input',
     component: Component,
     parameters: {
+        importBy: 'Input',
         removeBaseHtmlClass: true,
+        chakraLink: 'https://chakra-ui.com/docs/components/input',
     },
 };
 
@@ -23,6 +26,7 @@ InputTemplate.propTypes = {
     isInvalid: PropTypes.bool,
     isDisabled: PropTypes.bool,
     isReadOnly: PropTypes.bool,
+    isOptional: PropTypes.bool,
 };
 
 export const Input = InputTemplate.bind({});
@@ -43,6 +47,7 @@ Input.argTypes = {
 };
 
 Input.args = {
+    id: 'input_id',
     placeholder: 'Placeholder text',
     label: 'Label',
     helperText: 'Helper text',
@@ -51,4 +56,5 @@ Input.args = {
     isDisabled: false,
     isReadOnly: false,
     isRequired: false,
+    isOptional: false,
 };

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

@@ -1,6 +1,16 @@
 import merge from 'lodash/merge';
 import chakraDefaultTheme from '@chakra-ui/theme';
 
+const baseStyle = {
+    field: {
+        _placeholder: {
+            color: 'text.secondary.light',
+            fontWeight: 'normal',
+            _disabled: {color: 'text.secondary.light', opacity: 1},
+        },
+    },
+};
+
 const variants = {
     outline: {
         field: {
@@ -12,7 +22,7 @@ const variants = {
             bg: 'inherit',
             fontWeight: 'normal',
             boxShadow: 'none !important',
-            _placeholder: {color: 'gray.600', fontWeight: 'normal'},
+            _placeholder: {color: 'text.secondary.light', fontWeight: 'normal'},
             _focus: {
                 borderColor: 'brandBlue',
             },
@@ -20,7 +30,7 @@ const variants = {
             _readOnly: {boxShadow: 'none !important', userSelect: 'all'},
             _disabled: {
                 backgroundColor: 'gray.50',
-                opacity: 0.4,
+                opacity: 1,
                 cursor: 'not-allowed',
             },
             _invalid: {
@@ -34,5 +44,6 @@ const variants = {
 };
 
 export default merge(chakraDefaultTheme.components.Input, {
+    baseStyle,
     variants,
 });

package/styles/v2/components/Select/Select.jsx

@@ -1,7 +1,8 @@
+import React, {forwardRef} from 'react';
 import cn from 'classnames';
 import PropTypes from 'prop-types';
-import React, {forwardRef} from 'react';
-import {Select as ChakraSelect} from '@chakra-ui/react';
+import ReactSelect from 'react-select';
+
 import IconChevronDown from '@spothero/icons/chevron-down';
 
 import Icon from '../Icon/Icon';
@@ -16,27 +17,151 @@ const Select = forwardRef(
             isInvalid,
             isDisabled,
             isRequired,
+            isOptional,
+            options,
             ...props
         },
         ref
     ) => {
         const classes = cn({'FormElement-contains-error': isInvalid});
 
+        const baseText = {
+            fontSize: 'var(--chakra-fontSizes-base)',
+            color: 'var(--chakra-colors-text-primary-light)',
+        };
+
+        /** React Select doesn't use Chakra but it does use Emotion so it's not too difficult to use values from our Chakra theme. Here is the documentation for React Select styling: https://react-select.com/styles  */
+        const customStyles = {
+            select: (provided, state) => ({
+                ...provided,
+
+                '&:hover': {
+                    cursor: state.isDisabled ? 'not-allowed' : 'auto',
+                },
+            }),
+            menu: provided => ({
+                ...provided,
+                ...baseText,
+                borderColor: 'var(--chakra-colors-gray-200)',
+                borderWidth: '1px',
+                boxShadow: 'none',
+            }),
+            control: (provided, state) => ({
+                ...provided,
+                borderColor: isInvalid
+                    ? 'var(--chakra-colors-error)'
+                    : state.isFocused
+                    ? 'var(--chakra-colors-primary-default)'
+                    : 'var(--chakra-colors-gray-200)',
+                borderWidth: '1px',
+                borderRadius: '4px',
+                backgroundColor: state.isDisabled
+                    ? 'var(--chakra-colors-gray-50)'
+                    : 'transparent',
+                boxShadow: 'none',
+                height: 'var(--chakra-sizes-10)',
+                minWidth: 'var(--chakra-sizes-48)',
+                width: props.width && props.width,
+
+                '&:hover': {
+                    borderColor: isInvalid
+                        ? 'var(--chakra-colors-error)'
+                        : state.isFocused
+                        ? 'var(--chakra-colors-primary-default)'
+                        : 'var(--chakra-colors-gray-200)',
+                },
+            }),
+            input: (provided, state) => ({
+                ...provided,
+                ...baseText,
+                borderRadius: '4px',
+                color: state.isDisabled
+                    ? 'var(--chakra-colors-text-secondary-light)'
+                    : 'var(--chakra-colors-text-primary-light)',
+                backgroundColor: state.isDisabled
+                    ? 'var(--chakra-colors-gray-50)'
+                    : 'transparent',
+            }),
+            placeholder: provided => ({
+                ...provided,
+                fontSize: 'var(--chakra-fontSizes-base)',
+                color: 'var(--chakra-colors-gray-600)',
+            }),
+            singleValue: (provided, state) => ({
+                ...provided,
+                ...baseText,
+                color: state.isDisabled
+                    ? 'var(--chakra-colors-text-secondary-light)'
+                    : 'var(--chakra-colors-text-primary-light)',
+
+                '&:hover': {
+                    cursor: state.isDisabled ? 'not-allowed' : 'auto',
+                },
+            }),
+            option: (provided, state) => ({
+                ...provided,
+                backgroundColor: state.isSelected
+                    ? 'var(--chakra-colors-gray-200)'
+                    : state.isFocused
+                    ? 'var(--chakra-colors-gray-50)'
+                    : 'transparent',
+                color: 'var(--chakra-colors-text-primary-light)',
+                fontWeight: state.isSelected
+                    ? 'var(--chakra-fontWeights-semibold)'
+                    : 'var(--chakra-fontWeights-normal)',
+
+                ':active': {
+                    fontWeight: 'var(--chakra-fontWeights-semibold)',
+                    color: 'var(--chakra-colors-text-primary-light)',
+                    backgroundColor:
+                        !state.isDisabled && 'var(--chakra-colors-gray-200)',
+                },
+            }),
+        };
+
+        const dropdownIndicatorStyles = {
+            width: 18,
+            display: 'flex',
+            marginRight: 'var(--chakra-space-4)',
+            marginLeft: 'var(--chakra-space-7)',
+            color: 'var(--chakra-colors-gray-600)',
+            '&:hover': {
+                color: 'var(--chakra-colors-gray-600)',
+            },
+        };
+
+        const DropdownIndicator = ({innerRef, innerProps}) => (
+            <Icon
+                as={IconChevronDown}
+                style={dropdownIndicatorStyles}
+                ref={innerRef}
+                {...innerProps}
+            />
+        );
+
         return (
             <FormControl
                 isInvalid={isInvalid}
                 isDisabled={isDisabled}
                 isRequired={isRequired}
                 errorMessage={errorMessage}
+                isOptional={isOptional}
                 helperText={helperText}
                 label={label}
                 inputId={props.id}
+                minWidth={48}
+                width={props.width && props.width}
             >
-                <ChakraSelect
-                    icon={<Icon as={IconChevronDown} />}
-                    iconSize={12}
-                    fontWeight="regular"
-                    fontSize="sm"
+                <ReactSelect
+                    options={options?.length && options}
+                    isSearchable={false}
+                    isDisabled={isDisabled}
+                    components={{
+                        DropdownIndicator,
+                        IndicatorSeparator: () => null,
+                    }}
+                    maxMenuHeight={280}
+                    styles={customStyles}
                     ref={ref}
                     className={classes}
                     {...props}
@@ -48,12 +173,16 @@ const Select = forwardRef(
 
 Select.propTypes = {
     id: PropTypes.string.isRequired,
+    options: PropTypes.array,
     label: PropTypes.string,
+    isRequired: PropTypes.bool,
     helperText: PropTypes.string,
+    placeholder: PropTypes.string,
     errorMessage: PropTypes.string,
     isInvalid: PropTypes.bool,
     isDisabled: PropTypes.bool,
     isRequired: PropTypes.bool,
+    isOptional: PropTypes.bool,
 };
 
 export default Select;

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

@@ -11,14 +11,7 @@ export default {
     },
 };
 
-const SelectTemplate = props => (
-    <Component variant="outline" maxWidth="200px" {...props}>
-        <option value="one">One</option>
-        <option value="two">Two</option>
-        <option value="three">Three</option>
-        <option value="four">Four</option>
-    </Component>
-);
+const SelectTemplate = props => <Component options {...props} />;
 
 SelectTemplate.propTypes = {
     placeholder: PropTypes.string,
@@ -28,32 +21,54 @@ SelectTemplate.propTypes = {
     isInvalid: PropTypes.bool,
     isDisabled: PropTypes.bool,
     isReadOnly: PropTypes.bool,
+    isOptional: PropTypes.bool,
 };
 
 export const Select = SelectTemplate.bind({});
 
 Select.argTypes = {
-    placeholder: {
-        control: {type: 'text'},
+    id: {control: {type: 'text'}},
+    options: {
+        control: {type: 'object'},
     },
     label: {
         control: {type: 'text'},
     },
+    isRequired: {control: {type: 'boolean'}},
     helperText: {
         control: {type: 'text'},
     },
+    placeholder: {
+        control: {type: 'text'},
+    },
     errorMessage: {
         control: {type: 'text'},
     },
+    isInvalid: {control: {type: 'boolean'}},
+    isDisabled: {control: {type: 'boolean'}},
 };
 
 Select.args = {
-    placeholder: 'Placeholder text',
+    id: 'input_id',
+    options: [
+        {value: 'One', label: 'Option One'},
+        {value: 'Two', label: 'Option Two'},
+        {value: 'Three', label: 'Option Three'},
+        {value: 'Four', label: 'Option Four'},
+        {value: 'Five', label: 'Option Five'},
+        {value: 'Six', label: 'Option Six'},
+        {value: 'Seven', label: 'Option Seven'},
+        {value: 'Eight', label: 'Option Eight'},
+        {value: 'Nine', label: 'Option Nine'},
+        {value: 'Ten', label: 'Option Ten'},
+    ],
     label: 'Label',
+    isRequired: false,
     helperText: 'Helper text',
+    placeholder: 'Select One...',
     errorMessage: 'Error message',
     isInvalid: false,
     isDisabled: false,
     isReadOnly: false,
-    isRequired: false,
+    isOptional: false,
 };

package/styles/v2/components/index.js

@@ -24,6 +24,7 @@ export {default as Image} from './Image/Image';
 export {default as Loader} from './Loader/Loader';
 export {default as Checkbox} from './Checkbox';
 export {default as Input} from './Input';
+export {default as Divider} from './Divider/Divider';
 export {
     Popover,
     PopoverAnchor,

package/styles/v2/components/styles.js

@@ -7,8 +7,8 @@ export {default as Button} from './Button/Button.styles';
 export {default as GridItem} from './Grid/GridItem.styles';
 export {default as Spinner} from './Spinner/Spinner.styles';
 export {default as Heading} from './Heading/Heading.styles';
+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 Switch} from './Switch/styles';
 export {default as Popover} from './Popover/styles';