Merge pull request #92 from indec-it/fix/styles

feat: add icon style and fix number pagination
indec-it · Jul 3, 2022 · 59619c7 · 59619c7
2 parents 189b5ba + a307bad
commit 59619c7
Show file tree

Hide file tree

Showing 15 changed files with 134 additions and 104 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@indec/react-commons",
-  "version": "5.3.0",
+  "version": "5.3.1",
   "description": "Common reactjs components for apps",
   "private": false,
   "main": "index.js",

diff --git a/src/components/Checkbox/Checkbox.js b/src/components/Checkbox/Checkbox.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Checkbox, Tooltip} from '@chakra-ui/react';
+import {Checkbox} from '@chakra-ui/react';
 
 import {getError} from '@/utils';
 import {useError} from '@/hooks';
@@ -24,31 +24,29 @@ const _Checkbox = ({
     const [handleChange, error] = useError(hasError);
 
     return (
-        <Tooltip hasArrow label={error} bg="brand.danger">
-            <FormControl
-                name={field?.name || name}
-                data-testid={`form-control-${field?.name || name}`}
-                error={error || getError(form, field)}
-                isRequired={isRequired}
-                isReadOnly={isDisabled}
-                style={containerStyle}
-                width={width}
+        <FormControl
+            name={field?.name || name}
+            data-testid={`form-control-${field?.name || name}`}
+            error={error || getError(form, field)}
+            isRequired={isRequired}
+            isReadOnly={isDisabled}
+            style={containerStyle}
+            width={width}
+        >
+            <Checkbox
+                {...field}
+                id={name}
+                data-testid={`checkbox-${field?.name || name}`}
+                variant={variant}
+                isChecked={field?.value || value}
+                onChange={e => handleChange(e, onChange || field?.onChange)}
+                isDisabled={isDisabled}
+                h="100%"
+                {...props}
             >
-                <Checkbox
-                    {...field}
-                    id={name}
-                    data-testid={`checkbox-${field?.name || name}`}
-                    variant={variant}
-                    isChecked={field?.value || value}
-                    onChange={e => handleChange(e, field?.onChange || onChange)}
-                    isDisabled={isDisabled}
-                    h="100%"
-                    {...props}
-                >
-                    {label}
-                </Checkbox>
-            </FormControl>
-        </Tooltip>
+                {label}
+            </Checkbox>
+        </FormControl>
     );
 };
 

diff --git a/src/components/Checkbox/Checkbox.stories.js b/src/components/Checkbox/Checkbox.stories.js
@@ -180,21 +180,19 @@ export const Variants = args => {
 };
 
 export const Forms = args => (
-    <div style={{maxWidth: '330px'}}>
-        <Formik
-            initialValues={{example: false}}
-            onSubmit={values => window.alert(JSON.stringify(values))}
-            validationSchema={validateSchema}
-        >
-            <Form>
-                <Field
-                    name="example"
-                    label="Checkbox Input"
-                    component={Checkbox}
-                    {...args}
-                />
-                <Button type="submit" variant="rounded" mt={8}>Submit</Button>
-            </Form>
-        </Formik>
-    </div>
+    <Formik
+        initialValues={{example: false}}
+        onSubmit={values => window.alert(JSON.stringify(values))}
+        validationSchema={validateSchema}
+    >
+        <Form>
+            <Field
+                name="example"
+                label="Checkbox Input"
+                component={Checkbox}
+                {...args}
+            />
+            <Button type="submit" variant="rounded" mt={8}>Submit</Button>
+        </Form>
+    </Formik>
 );
diff --git a/src/components/DatePickerRange/DatePickerRange.js b/src/components/DatePickerRange/DatePickerRange.js
@@ -14,7 +14,8 @@ const DatePickerRange = ({
     fromDatePlaceholder,
     toDatePlaceholder,
     isDisabled,
-    isFormik
+    isFormik,
+    ...props
 }) => {
     const form = isFormik ? useFormikContext() : undefined;
     const containerStyle = {margin: '0 10px 10px 10px', maxWidth: '250px', minWidth: '250px'};
@@ -26,7 +27,7 @@ const DatePickerRange = ({
             <Stack {...containerStyle}>
                 <DatePicker
                     name={startDateName}
-                    onChange={form?.handleChange || onChange}
+                    onChange={onChange || form?.handleChange}
                     value={isFormik ? startDateNameField.value : startDate}
                     startDate={isFormik ? startDateNameField.value : startDate}
                     endDate={isFormik ? endDateNameField.value : endDate}
@@ -36,12 +37,13 @@ const DatePickerRange = ({
                     isDisabled={isDisabled}
                     form={form}
                     field={startDateNameField}
+                    {...props}
                 />
             </Stack>
             <Stack {...containerStyle}>
                 <DatePicker
                     name={endDateName}
-                    onChange={form?.handleChange || onChange}
+                    onChange={onChange || form?.handleChange}
                     value={isFormik ? endDateNameField.value : endDate}
                     startDate={isFormik ? startDateNameField.value : startDate}
                     endDate={isFormik ? endDateNameField.value : endDate}
@@ -51,6 +53,7 @@ const DatePickerRange = ({
                     isDisabled={isDisabled}
                     form={form}
                     field={endDateNameField}
+                    {...props}
                 />
             </Stack>
         </>
@@ -60,7 +63,6 @@ const DatePickerRange = ({
 DatePickerRange.propTypes = {
     isFormik: PropTypes.bool,
     onChange: PropTypes.func,
-    handleChange: PropTypes.func,
     startDateName: PropTypes.string,
     endDateName: PropTypes.string,
     fromDatePlaceholder: PropTypes.string,
@@ -76,7 +78,6 @@ DatePickerRange.propTypes = {
 
 DatePickerRange.defaultProps = {
     isFormik: true,
-    handleChange: undefined,
     onChange: undefined,
     startDate: undefined,
     values: undefined,

diff --git a/src/components/Dropdown/Dropdown.js b/src/components/Dropdown/Dropdown.js
@@ -53,16 +53,17 @@ const Dropdown = ({
                 data-testid={`option-${id}`}
                 onClick={onToggle}
                 disabled={isDisabled}
+                pl={3}
                 leftIcon={(
                     <HStack>
                         {isSubItem && <IconToggleArrow style={styles.icon} isOpen={isOpen}/>}
-                        {Icon && <Icon/>}
+                        {Icon && <Icon style={styles.icon}/>}
                     </HStack>
                 )}
                 rightIcon={(
                     <HStack>
                         {!isSubItem && <IconToggleArrow style={styles.icon} isOpen={isOpen}/>}
-                        {RightIcon && <RightIcon/>}
+                        {RightIcon && <RightIcon style={styles.icon}/>}
                     </HStack>
                 )}
                 hidden={isHidden}
@@ -103,7 +104,7 @@ const Dropdown = ({
                     data-testid="display-mobile-"
                     direction="column"
                 >
-                    <Stack data-testid={`menu-${id}`} direction="column" w="auto">
+                    <Stack data-testid={`menu-${id}`} direction="column" w="auto" p={1}>
                         <HeaderItem
                             isSubItem
                             onChange={handleChange}

diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
@@ -30,7 +30,9 @@ const Header = ({
     smallScale,
     headerStyles,
     containerStyles,
-    menuStyles
+    userStyles,
+    menuStyles,
+    hamburgerStyles
 }) => {
     const {isOpen, onClose, onToggle} = useDisclosure();
     const {isOpen: isOpenUser, onToggle: onToggleUser, onClose: onCloseUser} = useDisclosure();
@@ -95,6 +97,7 @@ const Header = ({
                                 boxShadow="none"
                                 _focus={{boxShadow: 'none'}}
                                 variant="unstyled"
+                                {...hamburgerStyles}
                             />
                         </Menu>
                     )}
@@ -112,6 +115,7 @@ const Header = ({
                                 boxShadow="none"
                                 _focus={{boxShadow: 'none'}}
                                 variant="unstyled"
+                                {...userStyles}
                             />
                             <UserMenu user={user} onLogout={handleLogout}/>
                         </Menu>
@@ -135,7 +139,9 @@ Header.propTypes = {
     smallScale: PropTypes.number,
     headerStyles: PropTypes.shape({}),
     containerStyles: PropTypes.shape({}),
-    menuStyles: PropTypes.shape({})
+    menuStyles: PropTypes.shape({}),
+    userStyles: PropTypes.shape({}),
+    hamburgerStyles: PropTypes.shape({})
 };
 
 Header.defaultProps = {
@@ -149,7 +155,9 @@ Header.defaultProps = {
     smallScale: 768,
     headerStyles: {},
     containerStyles: {},
-    menuStyles: {}
+    menuStyles: {},
+    userStyles: {},
+    hamburgerStyles: {}
 };
 
 export default Header;
diff --git a/src/components/Header/HeaderItem/HeaderItem.js b/src/components/Header/HeaderItem/HeaderItem.js
@@ -36,12 +36,13 @@ const HeaderItem = ({
         id={id ? `option-${id}-${index}}` : `option-${index}`}
         value={option.path}
         onClick={onChange}
+        pl={3}
         data-testid={id ? `option-${id}-${index}}` : `option-${index}`}
         disabled={option.isDisabled}
         color={option.path === activePath ? 'brand.primary' : 'brand.white'}
         boxShadow="none !important"
-        leftIcon={option.icon && <option.icon/>}
-        rightIcon={option.rightIcon && <option.rightIcon/>}
+        leftIcon={option.icon && <option.icon style={option.iconStyle}/>}
+        rightIcon={option.rightIcon && <option.rightIcon style={option.rightIconStyle}/>}
         hidden={isHidden || option.isHidden || (isSmallScreen && !isOpen)}
         variant="unstyled"
         _hover={{filter: 'brightness(90%)'}}

diff --git a/src/components/Header/UserMenu/UserMenu.js b/src/components/Header/UserMenu/UserMenu.js
@@ -9,7 +9,7 @@ import {
 } from '@chakra-ui/react';
 
 const UserMenu = ({user, onLogout}) => (
-    <MenuList alignItems="center" mr={1} >
+    <MenuList alignItems="center" mr={1}>
         {(user.name && user.surname) && (
             <MenuItem>
                 <Text
@@ -53,21 +53,23 @@ const UserMenu = ({user, onLogout}) => (
             </MenuItem>
         )}
         <MenuDivider/>
-        <MenuItem onClick={onLogout} data-testid="sign-out">
-            <Text
-                id="logout"
-                display="flex"
-                alignItems="center"
-                color="brand.neutral300"
-                fontSize="14px"
-                boxShadow="none !important"
-                padding="0 !important"
-            >
-                <FaPowerOff/>
-                &nbsp;
-                Cerrar sesión
-            </Text>
-        </MenuItem>
+        {onLogout && (
+            <MenuItem onClick={onLogout} data-testid="sign-out">
+                <Text
+                    id="logout"
+                    display="flex"
+                    alignItems="center"
+                    color="brand.neutral300"
+                    fontSize="14px"
+                    boxShadow="none !important"
+                    padding="0 !important"
+                >
+                    <FaPowerOff/>
+                    &nbsp;
+                    Cerrar sesión
+                </Text>
+            </MenuItem>
+        )}
     </MenuList>
 );
 
@@ -77,13 +79,14 @@ UserMenu.propTypes = {
         surname: PropTypes.string,
         roleName: PropTypes.string,
         stateName: PropTypes.string,
-        documentId: PropTypes.number
+        documentId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
     }),
-    onLogout: PropTypes.func.isRequired
+    onLogout: PropTypes.func
 };
 
 UserMenu.defaultProps = {
-    user: {}
+    user: {},
+    onLogout: undefined
 };
 
 export default UserMenu;