@spothero/ui 15.8.0 → 15.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spothero/ui",
-  "version": "15.8.0",
+  "version": "15.9.1",
   "description": "SpotHero's React component UI library.",
   "main": "v2/index.js",
   "repository": "https://github.com/spothero/fe-monorepo",

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/Checkbox/styles/index.js

@@ -10,13 +10,20 @@ const baseStyle = {
         borderColor: 'gray.200',
         _hover: {borderColor: 'gray.300'},
         _readOnly: {boxShadow: 'none !important', userSelect: 'all'},
-        _disabled: {opacity: 0.4, cursor: 'not-allowed'},
+        _disabled: {
+            opacity: 0.4,
+            cursor: 'not-allowed',
+            _hover: {borderColor: 'gray.200'},
+        },
         _focus: {
             zIndex: 1,
             borderColor: 'primary.400',
             boxShadow: t => `0 0 0 1px ${t.colors.primary['400']}`,
         },
     },
+    label: {
+        _disabled: {opacity: 0.4, cursor: 'not-allowed'},
+    },
 };
 
 export default merge(chakraDefaultTheme.components.Checkbox, {

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';
@@ -17,12 +18,127 @@ const Select = forwardRef(
             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}
@@ -33,12 +149,19 @@ const Select = forwardRef(
                 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}
@@ -50,8 +173,11 @@ 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,

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,33 +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/styles.js

@@ -9,7 +9,6 @@ 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';