Merge pull request #94 from indec-it/feat/addWrapComponent

feat: add warp component

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indec/react-commons",
-  "version": "5.3.2",
+  "version": "5.4.0",
   "description": "Common reactjs components for apps",
   "private": false,
   "main": "index.js",

src/components/Header/Header.js

@@ -21,6 +21,7 @@ const Header = ({
     redirectTo,
     onLogout,
     user,
+    attributes,
     options,
     hiddenTop,
     activePath,
@@ -117,7 +118,7 @@ const Header = ({
                                 variant="unstyled"
                                 {...userStyles}
                             />
-                            <UserMenu user={user} onLogout={handleLogout}/>
+                            <UserMenu user={user} attributes={attributes} onLogout={handleLogout}/>
                         </Menu>
                     )}
                 </HStack>
@@ -130,6 +131,10 @@ Header.propTypes = {
     redirectTo: PropTypes.func.isRequired,
     onLogout: PropTypes.func.isRequired,
     user: PropTypes.shape({}),
+    attributes: PropTypes.arrayOf(PropTypes.shape({
+        key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+    })),
     options: PropTypes.arrayOf(PropTypes.shape({})),
     activePath: PropTypes.string,
     hiddenUserMenu: PropTypes.bool,
@@ -147,6 +152,7 @@ Header.propTypes = {
 Header.defaultProps = {
     user: {},
     options: [],
+    attributes: [],
     logos: [],
     activePath: undefined,
     hiddenUserMenu: false,

src/components/Header/Header.stories.js

@@ -42,5 +42,10 @@ Basic.args = {
         roleName: 'Admin',
         stateName: 'Buenos Aires',
         documentId: 21554378
-    }
+    },
+    attributes: [
+        {key: 'documentId', label: 'Documento'},
+        {key: 'stateName', label: 'Provincia'},
+        {key: 'roleName', label: 'Rol'}
+    ]
 };

src/components/Header/UserMenu/UserMenu.js

@@ -2,16 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {FaPowerOff} from 'react-icons/fa';
 import {
-    MenuDivider,
-    MenuItem,
-    MenuList,
-    Text
+    MenuDivider, MenuItem, MenuList, Text
 } from '@chakra-ui/react';
 
-const UserMenu = ({user, onLogout}) => (
-    <MenuList alignItems="center" mr={1}>
+const UserMenu = ({user, attributes, onLogout}) => (
+    <MenuList alignItems="center" mr={1} data-testid="user-menu" isOpen>
         {(user.name && user.surname) && (
-            <MenuItem>
+            <MenuItem data-testid="attribute-name">
                 <Text
                     id="logout"
                     display="flex"
@@ -28,30 +25,14 @@ const UserMenu = ({user, onLogout}) => (
                 </Text>
             </MenuItem>
         )}
-        {user.roleName && (
-            <MenuItem>
+        {attributes.map(attribute => (
+            <MenuItem key={attribute.key} data-testid={`attribute-${attribute.key}`}>
                 <Text fontSize="14px" color="brand.neutral300">
-                    <span>Role:</span>
-                    {user.roleName}
+                    <span>{`${attribute.label}:`}</span>
+                    {user[attribute.key]}
                 </Text>
             </MenuItem>
-        )}
-        {user.stateName && (
-            <MenuItem>
-                <Text fontSize="14px" color="brand.neutral300">
-                    <span>Provincia:</span>
-                    {user.stateName}
-                </Text>
-            </MenuItem>
-        )}
-        {user.documentId && (
-            <MenuItem>
-                <Text fontSize="14px" color="brand.neutral300">
-                    <span>DNI:</span>
-                    {user.documentId}
-                </Text>
-            </MenuItem>
-        )}
+        ))}
         <MenuDivider/>
         {onLogout && (
             <MenuItem onClick={onLogout} data-testid="sign-out">
@@ -76,15 +57,17 @@ const UserMenu = ({user, onLogout}) => (
 UserMenu.propTypes = {
     user: PropTypes.shape({
         name: PropTypes.string,
-        surname: PropTypes.string,
-        roleName: PropTypes.string,
-        stateName: PropTypes.string,
-        documentId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+        surname: PropTypes.string
     }),
+    attributes: PropTypes.arrayOf(PropTypes.shape({
+        key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+    })),
     onLogout: PropTypes.func
 };
 
 UserMenu.defaultProps = {
+    attributes: [],
     user: {},
     onLogout: undefined
 };

src/components/Header/UserMenu/UserMenu.test.js

@@ -0,0 +1,99 @@
+import React from 'react';
+import {Menu} from '@chakra-ui/react';
+import {
+    fireEvent, getByTestId, getByText, queryByTestId
+} from '@testing-library/react';
+
+import UserMenu from './UserMenu';
+
+const Component = props => (
+    <Menu><UserMenu {...props}/></Menu>
+);
+
+describe('UserMenu', () => {
+    let props;
+    const getComponent = newProps => render(Component, newProps);
+    beforeEach(() => {
+        props = {};
+    });
+    afterEach(tearDown);
+
+    it('should not render name and surname if not defined', () => {
+        const {container} = getComponent(props);
+        expect(queryByTestId(container, 'attribute-name')).toBeNull();
+    });
+
+    describe('when `user.name` and `user.surname` is defined', () => {
+        beforeEach(() => {
+            props.user = {name: 'John', surname: 'Doe'};
+        });
+
+        it('should display `Nombre:`', () => {
+            const {container} = getComponent(props);
+            expect(getByText(container, 'Nombre:')).toBeInTheDocument();
+        });
+
+        it('should display `user.name`', () => {
+            const {container} = getComponent(props);
+            expect(getByText(container, 'John')).toBeInTheDocument();
+        });
+
+        it('should display `user.surname`', () => {
+            const {container} = getComponent(props);
+            expect(getByText(container, 'Doe')).toBeInTheDocument();
+        });
+    });
+
+    describe('when `props.onLogout` is defined', () => {
+        beforeEach(() => {
+            props.onLogout = jest.fn();
+        });
+
+        it('should display `Cerrar sesion`', () => {
+            const {container} = getComponent(props);
+            expect(getByText(container, 'Cerrar sesión')).toBeInTheDocument();
+        });
+
+        describe('when the button to sign out is clicked', () => {
+            beforeEach(() => {
+                const {container} = getComponent(props);
+                const button = getByTestId(container, 'sign-out');
+                fireEvent.click(button);
+            });
+
+            it('should fire `props.onLogout`', () => {
+                expect(props.onLogout).toHaveBeenCalled();
+            });
+        });
+    });
+
+    describe('when `props.onLogout` is not defined', () => {
+        beforeEach(() => {
+            props.onLogout = undefined;
+        });
+
+        it('should not render a button to sign out', () => {
+            const {container} = getComponent(props);
+            expect(queryByTestId(container, 'sign-out')).toBeNull();
+        });
+    });
+
+    describe('when `props.attributes` is defined', () => {
+        beforeEach(() => {
+            props.attributes = [
+                {key: 'username', label: 'Username'},
+                {key: 'documentId', label: 'DocumentId'},
+                {key: 'state', label: 'State'}
+            ];
+            props.user = {username: 'test', documentId: '12345678', state: 'Buenos Aires'};
+        });
+
+        it('should render the attributes list', () => {
+            const {container} = getComponent(props);
+            props.attributes.forEach(attribute => {
+                expect(getByText(container, `${attribute.label}:`)).toBeInTheDocument();
+                expect(getByText(container, props.user[attribute.key])).toBeInTheDocument();
+            });
+        });
+    });
+});

src/components/SelectInput/getStyles.js

@@ -18,6 +18,7 @@ const getStyles = (colors, variant, styles, size = 'md', isDisabled, hasError, r
     const invalidBorderColor = getThemeColor(colors, fieldStyles._invalid?.borderColor || borderColor);
 
     const newStyles = removeKeys(fieldStyles, KEYS);
+    const disabledStyles = isDisabled ? {...(fieldStyles._disabled || {}), borderColor: disabledBorderColor} : {};
 
     return {
         container: (provider, state) => {
@@ -42,17 +43,14 @@ const getStyles = (colors, variant, styles, size = 'md', isDisabled, hasError, r
                     ...hoverStyles,
                     ...hoverBackgroundStyles
                 },
-                '&:disabled': {
-                    ...(fieldStyles._disabled || {}),
-                    borderColor: disabledBorderColor
-                },
                 boxShadow: state.isFocused ? focusBoxShadowColor : fieldStyles.boxShadow,
                 backgroundColor: getThemeColor(colors, fieldStyles.bg),
                 paddingInlineEnd: 0,
                 borderRadius: getThemeSize(fieldStyles.borderRadius, true),
                 ...focusStyles,
                 ...invalidStyles,
                 ...readOnlyStyles,
+                ...disabledStyles,
                 width: '100%',
                 transitionProperty: 'background-color,border-color,color,fill,stroke,opacity,box-shadow,transform',
                 transitionDuration: '200ms',

src/components/Wrap/Wrap.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Wrap as ChakraWrap, useStyleConfig} from '@chakra-ui/react';
+
+import {childrenPropTypes} from '@/utils/propTypes';
+
+const Wrap = ({variant, children, ...rest}) => {
+    const styles = useStyleConfig('Wrap', {variant});
+    return <ChakraWrap data-testid="wrap" {...styles} {...rest}>{children}</ChakraWrap>;
+};
+
+Wrap.propTypes = {
+    variant: PropTypes.string,
+    children: childrenPropTypes
+};
+
+Wrap.defaultProps = {
+    variant: undefined,
+    children: undefined
+};
+
+export default Wrap;

src/components/Wrap/Wrap.test.js

@@ -0,0 +1,14 @@
+import {getByTestId} from '@testing-library/react';
+
+import {Wrap} from '@/components';
+
+describe('<Wrap>', () => {
+    let props;
+    const getComponent = () => render(Wrap, props);
+    afterEach(tearDown);
+
+    it('should render Wrap component', () => {
+        const {container} = getComponent();
+        expect(getByTestId(container, 'wrap')).toBeInTheDocument();
+    });
+});

src/components/Wrap/index.js

@@ -0,0 +1,3 @@
+import Wrap from './Wrap';
+
+export default Wrap;

src/components/index.js

@@ -20,3 +20,4 @@ export {default as SelectInput} from './SelectInput';
 export {default as Table} from './Table';
 export {default as Textarea} from './Textarea';
 export {default as TextInput} from './TextInput';
+export {default as Wrap} from './Wrap';

src/theme/components/index.js

@@ -11,3 +11,4 @@ export {default as Quote} from './quote';
 export {default as Table} from './table';
 export {default as Text} from './text';
 export {default as Textarea} from './textarea';
+export {default as Wrap} from './wrap';

src/theme/components/wrap.js

@@ -0,0 +1,10 @@
+const Wrap = {
+    baseStyle: {
+        overflow: 'initial',
+        align: 'center',
+        w: '100%',
+        spacing: 3
+    }
+};
+
+export default Wrap;

src/theme/index.js

@@ -12,7 +12,8 @@ import {
     colors,
     global,
     Table,
-    Textarea
+    Textarea,
+    Wrap
 } from './components';
 
 export const theme = {
@@ -34,7 +35,8 @@ export const theme = {
         FormLabel,
         Text,
         Box,
-        Table
+        Table,
+        Wrap
     }
 };