@spothero/ui 14.5.0 → 14.5.2-beta.0

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+# 14.5.2-beta.0 - 05/09/2022
+
+## Miscellaneous Updates
+* [[4e10f87](https://github.com/spothero/fe-ui/commit/4e10f87)] - `fix:` Link new Input and Label using htmlFor (Mick Johnson)
+
+# 14.5.1 - 05/05/2022
+## Miscellaneous Updates
+* [[87e838a](https://github.com/spothero/fe-ui/commit/87e838a)] - `feature:` FED 321 secondary button updates, add tertiary and destructive buttons ([#284](https://github.com/spothero/fe-ui/pull/284)) (Mick Johnson)
+
 # 14.5.0 - 05/03/2022
 
 ## New Features

package/CHANGELOG.tmp

@@ -1,23 +1,5 @@
-# 14.5.0 - 05/03/2022
+# 14.5.2-beta.0 - 05/09/2022
 
-## New Features
-* [[173526f](https://github.com/spothero/fe-ui/commit/173526f)] - FED-354 feat: adds Input component ([#283](https://github.com/spothero/fe-ui/pull/283)) (annaliarosed)
-	* `feat:` Set up TextInput component
-	* `refactor:` Rename component and set up styles
-	* `feat:` Unlabeled, placeholder styles added
-	* `feat:` Unlabeled, value styles added
-	* `feat:` Unlabeled, focus styles added
-	* `feat:` Unlabeled, error and disabled styles added
-	* `feat:` Add label prop and styles
-	* `feat:` Add helperText prop and styles
-	* `feat:` Add errorMessage prop and styles
-	* `feat:` Add isReadOnly prop to stories
-	* `fix:` Clean up
-	* `fix:` Change value color when isInvalid
-	* `fix:` Add missing ref
-	* `refactor:` Extract FormControl
-	* `fix:` Remove imported interfaces
-	* `fix:` Pass only isInvalid prop to FormControl
-	* `fix:` Pass only isDisabled and isRequired prop to FormControl
-	* `fix:` Pass forgotten propsCo-authored-by: Annalia Destefano <annalia.destefano@spothero.com>
+## Miscellaneous Updates
+* [[4e10f87](https://github.com/spothero/fe-ui/commit/4e10f87)] - `fix:` Link new Input and Label using htmlFor (Mick Johnson)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spothero/ui",
-  "version": "14.5.0",
+  "version": "14.5.2-beta.0",
   "description": "SpotHero's React component UI library.",
   "main": "v2/index-bundled.cjs.js",
   "module": "v2/index.js",

package/styles/v2/components/Button/Button.jsx

@@ -15,6 +15,7 @@ const anchorProps = (isExternal = false) => ({
 const Button = forwardRef(({asAnchor, isExternal, ...props}, ref) => (
     <ChakraButton
         iconSpacing={2}
+        sx={{'text-underline-offset': '1px'}}
         {...props}
         {...((asAnchor || props.as === 'a') && anchorProps(isExternal))}
         ref={ref}

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

@@ -32,6 +32,17 @@ const disabledButtonHoverStyle = {
     },
 };
 
+const destructiveButtonStyles = {
+    bg: 'white',
+    borderColor: 'red.default',
+    color: 'red.default',
+    _hover: {
+        borderColor: 'red.800',
+        color: 'red.800',
+        ...disabledButtonHoverStyle,
+    },
+};
+
 export const variants = {
     primary: {
         bg: 'primary.default',
@@ -63,7 +74,7 @@ export const variants = {
         borderColor: 'gray.medium',
         color: 'primary.default',
         _hover: {
-            borderColor: 'primary.default',
+            borderColor: 'primary.600',
             color: 'primary.600',
             ...disabledButtonHoverStyle,
         },
@@ -125,6 +136,57 @@ export const variants = {
             },
         },
     },
+    tertiary: {
+        bg: 'none',
+        borderWidth: 'none',
+        borderRadius: 'unset',
+        color: 'primary.default',
+        textDecoration: 'underline',
+        h: 'unset',
+        m: 'unset',
+        minW: 'unset',
+        p: 'unset',
+        lineHeight: 1,
+        _disabled: {
+            bg: 'none',
+            color: 'gray.dark',
+        },
+        _hover: {
+            color: 'primary.600',
+            _disabled: {
+                color: 'gray.dark',
+            },
+        },
+    },
+    tertiaryOnDark: {
+        bg: 'none',
+        borderRadius: 'unset',
+        borderWidth: 'none',
+        color: 'white',
+        textDecoration: 'underline',
+        h: 'unset',
+        m: 'unset',
+        minW: 'unset',
+        p: 'unset',
+        _disabled: {
+            bg: 'none',
+            color: 'white',
+            opacity: '.7',
+        },
+        _hover: {
+            color: 'white',
+            opacity: '.8',
+            _disabled: {
+                opacity: '.7',
+            },
+        },
+    },
+    destructive: {
+        ...destructiveButtonStyles,
+    },
+    destructiveOnDark: {
+        ...destructiveButtonStyles,
+    },
 };
 
 const defaultProps = {

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

@@ -58,8 +58,23 @@ Tertiary.argTypes = {
     onClick: {action: 'clicked'},
 };
 Tertiary.args = {
-    children: 'textButton',
-    variant: 'textButton',
+    children: 'tertiary',
+    variant: 'tertiary',
+    isDisabled: false,
+    isLoading: false,
+    loadingText: 'Loading',
+    isFullWidth: false,
+};
+
+export const Destructive = ButtonTemplate.bind({});
+Destructive.argTypes = {
+    ...createSelectControl('type', ['button', 'reset', 'submit']),
+    ...disableArgs('variant'),
+    onClick: {action: 'clicked'},
+};
+Destructive.args = {
+    children: 'destructive',
+    variant: 'destructive',
     isDisabled: false,
     isLoading: false,
     loadingText: 'Loading',

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

@@ -8,21 +8,26 @@ import {
 } from '@chakra-ui/react';
 
 const FormControl = forwardRef(
-    ({children, label, helperText, errorMessage, ...props}, ref) => (
+    ({children, label, inputId, helperText, errorMessage, ...props}, ref) => (
         <ChakraFormControl {...props} ref={ref}>
             {label && (
                 <FormLabel
-                    color="gray.600"
+                    color={props.isInvalid ? 'error' : 'gray.600'}
                     fontWeight="semibold"
                     mb={2}
                     fontSize="sm"
+                    htmlFor={inputId}
                 >
                     {label}
                 </FormLabel>
             )}
             {children}
             {helperText && (
-                <FormHelperText color="gray.600" mt={1} fontSize="xs">
+                <FormHelperText
+                    color={props.isInvalid ? 'error' : 'gray.600'}
+                    mt={1}
+                    fontSize="xs"
+                >
                     {helperText}
                 </FormHelperText>
             )}
@@ -35,6 +40,8 @@ const FormControl = forwardRef(
 
 FormControl.propTypes = {
     label: PropTypes.string,
+    isInvalid: PropTypes.bool,
+    inputId: PropTypes.string,
     helperText: PropTypes.string,
     errorMessage: PropTypes.string,
     children: PropTypes.node,

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

@@ -23,6 +23,7 @@ const Input = forwardRef(
             errorMessage={errorMessage}
             helperText={helperText}
             label={label}
+            inputId={props.id}
         >
             <ChakraInput ref={ref} {...props} />
         </FormControl>
@@ -30,6 +31,7 @@ const Input = forwardRef(
 );
 
 Input.propTypes = {
+    id: PropTypes.string.isRequired,
     label: PropTypes.string,
     helperText: PropTypes.string,
     errorMessage: PropTypes.string,