Merge pull request #72 from indec-it/refactor/formMessageAndFixHeader

refactor: form message and fix header
indec-it · Jun 22, 2022 · c92c639 · c92c639
2 parents c91d8ea + 4c651e6
commit c92c639
Show file tree

Hide file tree

Showing 17 changed files with 2,200 additions and 87 deletions.
diff --git a/docs/main.4686711f.iframe.bundle.js b/docs/main.4686711f.iframe.bundle.js
diff --git a/src/components/Autocomplete/Autocomplete.js b/src/components/Autocomplete/Autocomplete.js
@@ -1,7 +1,7 @@
 import React, {useState, useEffect, useRef} from 'react';
 import PropTypes from 'prop-types';
 import {FaSpellCheck} from 'react-icons/fa';
-import {Stack, VStack} from '@chakra-ui/react';
+import {Stack, useTheme, VStack} from '@chakra-ui/react';
 
 import {TextInput, Box} from '@/components';
 
@@ -14,13 +14,15 @@ const Autocomplete = ({
     startToShow,
     field,
     form,
+    size,
     ...props
 }) => {
     const [activeSuggestion, setActiveSuggestion] = useState(0);
     const [filteredSuggestions, setFilteredSuggestions] = useState([]);
     const [showSuggestions, setShowSuggestions] = useState(false);
     const containerRef = useRef();
     const inputRef = useRef();
+    const theme = useTheme();
 
     const handleChange = e => {
         const {value} = e.target;
@@ -108,7 +110,12 @@ const Autocomplete = ({
     }, [suggestions]);
 
     return (
-        <VStack position="relative" data-testid={`autocomplete-container-${field?.value || name}`} ref={containerRef}>
+        <VStack
+            position="relative"
+            data-testid={`autocomplete-container-${field?.value || name}`}
+            ref={containerRef}
+            display="block"
+        >
             <TextInput
                 label={label}
                 data-testid={`autocomplete-${field?.value || name}`}
@@ -122,19 +129,19 @@ const Autocomplete = ({
                 form={form}
                 field={field}
                 innerRef={inputRef}
+                size={size}
                 {...props}
             />
             {!isDisabled && filteredSuggestions.length > 0 && showSuggestions && (
                 <Stack
                     data-testid={`autocomplete-list-${field?.value || name}`}
                     position="absolute"
-                    top="60px"
                     bg="brand.white"
-                    zIndex={1}
-                    pl={5}
-                    pr={5}
+                    zIndex={3}
+                    pl={10}
+                    pr={10}
                     borderRadius={5}
-
+                    boxShadow={theme.shadows?.base}
                 >
                     {filteredSuggestions.map((suggestion, index) => (
                         <Box
@@ -144,8 +151,7 @@ const Autocomplete = ({
                             onClick={handleClick}
                             onMouseOver={handleMouseOver}
                             cursor="pointer"
-                            ml={1}
-                            pb={1}
+                            fontSize={size}
                         >
                             {suggestion}
                         </Box>
@@ -171,11 +177,13 @@ Autocomplete.propTypes = {
         value: PropTypes.string,
         onChange: PropTypes.func,
         onBlur: PropTypes.func
-    })
+    }),
+    size: PropTypes.string
 };
 
 Autocomplete.defaultProps = {
     name: undefined,
+    size: undefined,
     onChange: undefined,
     suggestions: [],
     startToShow: 3,

diff --git a/src/components/Autocomplete/Autocomplete.stories.js b/src/components/Autocomplete/Autocomplete.stories.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import {Field, Formik, Form} from 'formik';
 import * as Yup from 'yup';
-import {Button} from '@chakra-ui/react';
+import {Button, Text} from '@chakra-ui/react';
 import {useArgs} from '@storybook/client-api';
 
-import {Autocomplete} from '@/components';
+import {Autocomplete, TextInput} from '@/components';
 
 export default {
     title: 'Components/Autocomplete/Autocomplete',
@@ -32,6 +32,90 @@ Basic.args = {
     suggestions: ['Suggestion 1', 'Suggestion 2', 'Suggestion 3', 'Suggestion 4']
 };
 
+export const Variants = args => {
+    const [prevArgs, updateArgs] = useArgs();
+    const handleChange = ({target: {id, value}}) => updateArgs({...prevArgs, [id]: value});
+    return (
+        <div style={{display: 'flex', flexDirection: 'row'}}>
+            <div style={{maxWidth: '330px', width: '100%', marginRight: '30px'}}>
+                <Text>Variants: outline, unstyled, flushed, filled, reg</Text>
+                <Autocomplete
+                    {...args}
+                    name="input_1"
+                    value={args.input_1}
+                    label="Variant: default (outline)"
+                    onChange={handleChange}
+                    containerStyle={{pt: 2}}
+                />
+                <Autocomplete
+                    {...args}
+                    name="input_2"
+                    value={args.input_2}
+                    label="Variant: filled"
+                    variant="filled"
+                    onChange={handleChange}
+                    containerStyle={{pt: 2}}
+                />
+                <Autocomplete
+                    {...args}
+                    name="input_3"
+                    value={args.input_3}
+                    label="Variant: unstyled"
+                    variant="unstyled"
+                    onChange={handleChange}
+                    containerStyle={{pt: 2}}
+                />
+                <Autocomplete
+                    {...args}
+                    name="input_4"
+                    value={args.input_4}
+                    label="Variant: flushed"
+                    variant="flushed"
+                    onChange={handleChange}
+                    containerStyle={{pt: 2}}
+                />
+                <Autocomplete
+                    {...args}
+                    name="input_5"
+                    value={args.input_5}
+                    label="Variant: reg"
+                    variant="reg"
+                    onChange={handleChange}
+                    containerStyle={{pt: 2}}
+                />
+            </div>
+            <div style={{maxWidth: '330px', width: '100%'}}>
+                <Text>Variants: sm, md, lg (default: md)</Text>
+                <Autocomplete
+                    {...args}
+                    name="input_6"
+                    value={args.input_6}
+                    size="sm"
+                    label="Variant: reg size:sm"
+                    variant="reg"
+                    onChange={handleChange}
+                    containerStyle={{pt: 2}}
+                />
+                <Autocomplete
+                    {...args}
+                    name="input_7"
+                    value={args.input_7}
+                    size="lg"
+                    label="Variant: reg size:lg"
+                    variant="reg"
+                    onChange={handleChange}
+                    containerStyle={{pt: 2}}
+                />
+            </div>
+        </div>
+    );
+};
+
+Variants.args = {
+    placeholder: 'Enter "sugg" to show suggestions',
+    suggestions: ['Suggestion 1', 'Suggestion 2', 'Suggestion 3', 'Suggestion 4']
+};
+
 export const Forms = () => (
     <div style={{maxWidth: '330px'}}>
         <Formik

diff --git a/src/components/Checkbox/Checkbox.js b/src/components/Checkbox/Checkbox.js
@@ -17,6 +17,7 @@ const _Checkbox = ({
     onChange,
     field,
     form,
+    containerStyle,
     ...props
 }) => {
     const [handleChange, error] = useError(hasError);
@@ -29,6 +30,7 @@ const _Checkbox = ({
                 error={error || getError(form, field)}
                 isRequired={isRequired}
                 isReadOnly={isDisabled}
+                style={containerStyle}
             >
                 <Checkbox
                     {...field}
@@ -58,6 +60,7 @@ _Checkbox.propTypes = {
     hasError: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.array]),
     onChange: PropTypes.func,
     form: PropTypes.shape({}),
+    containerStyle: PropTypes.shape({}),
     field: PropTypes.shape({
         name: PropTypes.string,
         value: PropTypes.bool,
@@ -67,6 +70,7 @@ _Checkbox.propTypes = {
 };
 
 _Checkbox.defaultProps = {
+    containerStyle: {},
     name: undefined,
     label: undefined,
     variant: undefined,

diff --git a/src/components/Checkbox/Checkbox.stories.js b/src/components/Checkbox/Checkbox.stories.js
@@ -45,20 +45,23 @@ export const Variants = args => {
                     size="sm"
                     label="variant: normal checkbox sm"
                     onChange={handleChange}
+                    containerStyle={{pt: 2}}
                 />
                 <Checkbox
                     name="input_2"
                     value={args.input_2}
                     size="md"
                     label="variant: normal checkbox md"
                     onChange={handleChange}
+                    containerStyle={{pt: 2}}
                 />
                 <Checkbox
                     name="input_3"
                     value={args.input_3}
                     size="lg"
                     label="variant: normal checkbox lg"
                     onChange={handleChange}
+                    containerStyle={{pt: 2}}
                 />
                 <Checkbox
                     name="input_4"
@@ -68,6 +71,7 @@ export const Variants = args => {
                     label="variant: circular checkbox sm"
                     colorScheme="orange"
                     onChange={handleChange}
+                    containerStyle={{pt: 2}}
                 />
                 <Checkbox
                     name="input_5"
@@ -77,6 +81,7 @@ export const Variants = args => {
                     label="variant: circular checkbox md"
                     colorScheme="orange"
                     onChange={handleChange}
+                    containerStyle={{pt: 2}}
                 />
                 <Checkbox
                     name="input_6"
@@ -86,6 +91,7 @@ export const Variants = args => {
                     label="variant: circular checkbox lg"
                     colorScheme="orange"
                     onChange={handleChange}
+                    containerStyle={{pt: 2}}
                 />
                 <Checkbox
                     name="input_7"
@@ -94,6 +100,7 @@ export const Variants = args => {
                     variant="reg"
                     label="variant: reg checkbox sm"
                     onChange={handleChange}
+                    containerStyle={{pt: 2}}
                 />
                 <Checkbox
                     name="input_8"
@@ -102,6 +109,7 @@ export const Variants = args => {
                     variant="reg"
                     label="variant: reg checkbox md"
                     onChange={handleChange}
+                    containerStyle={{pt: 2}}
                 />
                 <Checkbox
                     name="input_9"
@@ -110,6 +118,7 @@ export const Variants = args => {
                     variant="reg"
                     label="variant: reg checkbox lg"
                     onChange={handleChange}
+                    containerStyle={{pt: 2}}
                 />
                 <Checkbox
                     name="input_10"
@@ -119,6 +128,7 @@ export const Variants = args => {
                     size="md"
                     isDisabled
                     onChange={handleChange}
+                    containerStyle={{pt: 2}}
                 />
                 <Checkbox
                     name="input_10"
@@ -128,6 +138,7 @@ export const Variants = args => {
                     size="md"
                     isDisabled
                     onChange={handleChange}
+                    containerStyle={{pt: 2}}
                 />
                 <Checkbox
                     name="input_11"
@@ -137,6 +148,7 @@ export const Variants = args => {
                     size="md"
                     isReadOnly
                     onChange={handleChange}
+                    containerStyle={{pt: 2}}
                 />
             </div>
         </div>

diff --git a/src/components/Dropdown/Dropdown.js b/src/components/Dropdown/Dropdown.js
@@ -19,7 +19,10 @@ const Dropdown = ({
     isSubItem,
     isSmallScreen,
     isHidden,
-    isDisabled
+    isDisabled,
+    styles,
+    containerStyles,
+    menuStyles
 }) => {
     const {isOpen, onClose, onToggle} = useDisclosure();
     const containerRef = useRef(null);
@@ -38,6 +41,7 @@ const Dropdown = ({
             mt="0 !important"
             hidden={isHidden}
             maxWidth="300px"
+            {...containerStyles}
         >
             <Button
                 data-testid={`option-${id}`}
@@ -55,6 +59,10 @@ const Dropdown = ({
                 variant="unstyled"
                 padding="0 5px"
                 display="flex"
+                whiteSpace="initial"
+                height="auto"
+                minHeight="40px"
+                {...styles}
             >
                 {label}
             </Button>
@@ -66,6 +74,7 @@ const Dropdown = ({
                 right={0}
                 borderRadius={5}
                 mt="0 !important"
+                {...menuStyles}
             >
                 <Collapse
                     in={isOpen}
@@ -88,7 +97,7 @@ const Dropdown = ({
 };
 
 Dropdown.propTypes = {
-    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     onChange: PropTypes.func.isRequired,
     icon: elementPropTypes,
     label: PropTypes.string.isRequired,
@@ -102,10 +111,17 @@ Dropdown.propTypes = {
             key: PropTypes.number,
             label: PropTypes.string
         })
-    )
+    ),
+    styles: PropTypes.shape({}),
+    containerStyles: PropTypes.shape({}),
+    menuStyles: PropTypes.shape({})
 };
 
 Dropdown.defaultProps = {
+    id: undefined,
+    styles: undefined,
+    containerStyles: undefined,
+    menuStyles: undefined,
     activePath: null,
     icon: null,
     options: [],

diff --git a/src/components/Dropdown/Dropdown.stories.js b/src/components/Dropdown/Dropdown.stories.js
@@ -2,7 +2,7 @@ import React from 'react';
 
 import {Dropdown} from '@/components';
 
-export default {title: 'Dropdown'};
+export default {title: 'Components/Dropdown/Dropdown'};
 
 export const Basic = args => <Dropdown {...args}/>;