@spothero/ui 15.7.0 → 15.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spothero/ui",
-  "version": "15.7.0",
+  "version": "15.8.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/Card/Card.jsx

@@ -7,7 +7,7 @@ const Card = forwardRef((props, ref) => (
         padding={4}
         bgColor="background.white"
         borderRadius="lg"
-        boxShadow="2px 2px 4px 0 rgba(0,45,91,0.1)"
+        boxShadow="md"
         {...props}
         ref={ref}
     />

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

@@ -16,6 +16,7 @@ const Select = forwardRef(
             isInvalid,
             isDisabled,
             isRequired,
+            isOptional,
             ...props
         },
         ref
@@ -28,6 +29,7 @@ const Select = forwardRef(
                 isDisabled={isDisabled}
                 isRequired={isRequired}
                 errorMessage={errorMessage}
+                isOptional={isOptional}
                 helperText={helperText}
                 label={label}
                 inputId={props.id}
@@ -54,6 +56,7 @@ Select.propTypes = {
     isInvalid: PropTypes.bool,
     isDisabled: PropTypes.bool,
     isRequired: PropTypes.bool,
+    isOptional: PropTypes.bool,
 };
 
 export default Select;

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

@@ -56,4 +56,5 @@ Select.args = {
     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,6 +7,7 @@ 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';