@spothero/ui 14.5.2 → 14.6.0

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+# 14.6.0 - 05/10/2022
+
+## New Features
+* [[119cc85](https://github.com/spothero/fe-ui/commit/119cc85)] - Wrap Select component in FormControl component ([#285](https://github.com/spothero/fe-ui/pull/285)) (annaliarosed)
+	* `feat:` Wrap Select in FormControl and update stories for Select
+	* `feat:` Update styles to match design
+	* `chore:` Remove FormControl stories for now
+	* `fix:` Connect label and input
+	* `fix:` Connect label and inputCo-authored-by: Annalia Destefano <annalia.destefano@spothero.com>
+
 # 14.5.2 - 05/10/2022
 
 ## Miscellaneous Updates

package/CHANGELOG.tmp

@@ -1,5 +1,10 @@
-# 14.5.2 - 05/10/2022
+# 14.6.0 - 05/10/2022
 
-## Miscellaneous Updates
-* [[d59e284](https://github.com/spothero/fe-ui/commit/d59e284)] - `fix:` Link new Input and Label using htmlFor ([#286](https://github.com/spothero/fe-ui/pull/286)) (Mick Johnson)
+## New Features
+* [[119cc85](https://github.com/spothero/fe-ui/commit/119cc85)] - Wrap Select component in FormControl component ([#285](https://github.com/spothero/fe-ui/pull/285)) (annaliarosed)
+	* `feat:` Wrap Select in FormControl and update stories for Select
+	* `feat:` Update styles to match design
+	* `chore:` Remove FormControl stories for now
+	* `fix:` Connect label and input
+	* `fix:` Connect label and inputCo-authored-by: Annalia Destefano <annalia.destefano@spothero.com>
 

package/package.json

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

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

@@ -39,7 +39,7 @@ FormControl.propTypes = {
     label: PropTypes.string,
     helperText: PropTypes.string,
     errorMessage: PropTypes.string,
-    children: PropTypes.node,
+    children: PropTypes.element,
 };
 
 export default FormControl;

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

@@ -50,4 +50,5 @@ Input.args = {
     isInvalid: false,
     isDisabled: false,
     isReadOnly: false,
+    isRequired: false,
 };

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

@@ -1 +1,48 @@
-export {Select as default} from '@chakra-ui/react';
+import React, {forwardRef} from 'react';
+import PropTypes from 'prop-types';
+import {Select as ChakraSelect} from '@chakra-ui/react';
+import FormControl from '../FormControl/FormControl';
+
+const Select = forwardRef(
+    (
+        {
+            label,
+            helperText,
+            errorMessage,
+            isInvalid,
+            isDisabled,
+            isRequired,
+            ...props
+        },
+        ref
+    ) => (
+        <FormControl
+            isInvalid={isInvalid}
+            isDisabled={isDisabled}
+            isRequired={isRequired}
+            errorMessage={errorMessage}
+            helperText={helperText}
+            label={label}
+            inputId={props.id}
+        >
+            <ChakraSelect
+                fontWeight="regular"
+                fontSize="sm"
+                ref={ref}
+                {...props}
+            />
+        </FormControl>
+    )
+);
+
+Select.propTypes = {
+    id: PropTypes.string.isRequired,
+    label: PropTypes.string,
+    helperText: PropTypes.string,
+    errorMessage: PropTypes.string,
+    isInvalid: PropTypes.bool,
+    isDisabled: PropTypes.bool,
+    isRequired: PropTypes.bool,
+};
+
+export default Select;

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

@@ -1,33 +1,59 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import Component from './Select';
 
 export default {
     title: 'v2/Select',
+    component: Component,
     parameters: {
         removeBaseHtmlClass: true,
     },
 };
 
-const SelectTemplate = () => {
-    return (
-        <Component
-            variant="outline"
-            value="three"
-            onChange={e => {
-                // eslint-disable-next-line no-console
-                console.log('Selected value', e.target.value);
-            }}
-            maxWidth="300px"
-        >
-            <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 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>
+);
 
-SelectTemplate.propTypes = {};
+SelectTemplate.propTypes = {
+    placeholder: PropTypes.string,
+    label: PropTypes.string,
+    helperText: PropTypes.string,
+    errorMessage: PropTypes.string,
+    isInvalid: PropTypes.bool,
+    isDisabled: PropTypes.bool,
+    isReadOnly: PropTypes.bool,
+};
 
 export const Select = SelectTemplate.bind({});
+
+Select.argTypes = {
+    placeholder: {
+        control: {type: 'text'},
+    },
+    label: {
+        control: {type: 'text'},
+    },
+    helperText: {
+        control: {type: 'text'},
+    },
+    errorMessage: {
+        control: {type: 'text'},
+    },
+};
+
+Select.args = {
+    placeholder: 'Placeholder text',
+    label: 'Label',
+    helperText: 'Helper text',
+    errorMessage: 'Error message',
+    isInvalid: false,
+    isDisabled: false,
+    isReadOnly: false,
+    isRequired: false,
+};