US22-ToolTipMobile

.eslintrc.js

@@ -18,6 +18,7 @@ module.exports = {
     'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
     'react/jsx-props-no-spreading': 'off',
     'react/forbid-prop-types': 'off',
+    'jsx-a11y/click-events-have-key-events': 'off', 
     'import/no-extraneous-dependencies': ["error", {"devDependencies": ["**/*.js","**/*.test.js", "**/*.spec.js"]}]
   },
 };

package.json

@@ -18,6 +18,7 @@
     "@material-ui/pickers": "^3.2.10",
     "@material-ui/system": "^4.12.1",
     "@svgr/webpack": "^5.5.0",
+    "@testing-library/dom": "^8.11.1",
     "axios": "^0.21.1",
     "babel-plugin-styled-components": "^1.12.0",
     "date-fns": "^2.21.2",

src/components/Carousel/index.js

@@ -1,4 +1,6 @@
 /* eslint-disable react/prop-types */
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+
 import React from 'react';
 import { isDesktop, isTablet } from 'react-device-detect';
 import Carousel from 'react-multi-carousel';
@@ -16,15 +18,16 @@ const CustomDot = ({ onClick, active }) => {
       className={`${classes.dot} ${
         active ? classes.dotActive : classes.dotInactive
       }`}
-      onClick={() => onClick()}
-    ></li>
+      onClick={onClick}
+    />
   );
 };
 
 const CustomLeft = ({ onClick }) => {
   const classes = useStyles();
   return (
     <button
+      type="button"
       className={`${classes.arrow} ${classes.arrowLeft}`}
       onClick={onClick}
     >
@@ -51,6 +54,7 @@ const CustomRight = ({ onClick }) => {
   const classes = useStyles();
   return (
     <button
+      type="button"
       className={`${classes.arrow} ${classes.arrowRight}`}
       onClick={onClick}
     >

src/components/ChartAndReport/index.js

@@ -89,7 +89,7 @@ export default function ChartAndReport(props) {
           <>
             <Box display="flex" flexDirection="row-reverse">
               <FormControlRadioOptions
-                handleChange={handleWayOfVisualizeDataChange}
+                handleChange={() => handleWayOfVisualizeDataChange()}
                 value={wayOfVisualizeData}
               />
             </Box>

src/components/ChartTotalRoomsWithFilter/index.js

@@ -138,7 +138,7 @@ export default function ChartTotalRoomsWithFilter(props) {
           <>
             <Box display="flex" flexDirection="row-reverse">
               <FormControlRadioOptions
-                handleChange={handleWayOfVisualizeDataChange}
+                handleChange={() => handleWayOfVisualizeDataChange()}
                 value={wayOfVisualizeData}
               />
             </Box>
@@ -163,15 +163,15 @@ export default function ChartTotalRoomsWithFilter(props) {
                   </Box>
                   <Box width="100%" display="flex" justifyContent="center">
                     <FormControlLabel
-                      control={<WhiteCheckbox checked={!(columnsToNotShow).includes('Canceladas')} onChange={handleShowColumsChange} name="Canceladas" />}
+                      control={<WhiteCheckbox checked={!(columnsToNotShow).includes('Canceladas')} onChange={() => handleShowColumsChange()} name="Canceladas" />}
                       label="Canceladas"
                     />
                     <FormControlLabel
-                      control={<WhiteCheckbox checked={!(columnsToNotShow).includes('Realizadas')} onChange={handleShowColumsChange} name="Realizadas" />}
+                      control={<WhiteCheckbox checked={!(columnsToNotShow).includes('Realizadas')} onChange={() => handleShowColumsChange()} name="Realizadas" />}
                       label="Realizadas"
                     />
                     <FormControlLabel
-                      control={<WhiteCheckbox checked={!(columnsToNotShow).includes('Total')} onChange={handleShowColumsChange} name="Total" />}
+                      control={<WhiteCheckbox checked={!(columnsToNotShow).includes('Total')} onChange={() => handleShowColumsChange} name="Total" />}
                       label="Total"
                     />
                   </Box>

src/components/Frames/TotalFrame/index.js

@@ -1,23 +1,32 @@
-import React from 'react';
+/* eslint-disable react/prop-types */
+/* eslint-disable no-confusing-arrow */
+
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import {
   Grid, Box, Typography,
 } from '@material-ui/core';
 import CheckCircleIcon from '@material-ui/icons/CheckCircle';
 import Tooltips from '../../ToolTip/index';
+import InfoModal from '../../InfoModal';
 import { useStyles } from './style';
+import useMobile from '../../../hooks/useMobile';
 
 function TotalsDataFrame(props) {
   const classes = useStyles();
+  const [open, setOpen] = useState(false);
+  const { mobileView } = useMobile();
+  const handleOpen = () => mobileView && setOpen(true);
+  const handleClose = () => setOpen(false);
 
   const {
     // eslint-disable-next-line react/prop-types
     height, children, title, toolTipText, toolTipColor, toolTipAriaLabel, className,
   } = props;
 
   return (
-    <Grid container className={`${classes.root} ${className}`}>
+    <Grid container className={`${classes.root} ${className}`} style={{ height: 'auto', minHeight: '130px' }}>
       <Box className={classes.box}>
         <Box className={classes.header}>
           <Box marginLeft={2}>
@@ -27,7 +36,7 @@ function TotalsDataFrame(props) {
               </Box>
             </Typography>
           </Box>
-          <Box flexGrow={1} display="flex" alignItems="center" marginTop={1}>
+          <Box onClick={handleOpen} flexGrow={1} display="flex" alignItems="center" style={{ margin: 0 }}>
             {(toolTipText !== null && toolTipText !== undefined)
               && (
               <Tooltips
@@ -37,6 +46,13 @@ function TotalsDataFrame(props) {
               />
               )}
           </Box>
+          <InfoModal
+            open={open}
+            handleClose={handleClose}
+            title={title}
+            toolTipText={toolTipText}
+            toolTipColor={toolTipColor}
+          />
         </Box>
       </Box>
       <div className={classes.container} style={{ height: 'auto', minHeight: height }}>

src/components/Frames/TotalFrame/style.js

@@ -15,7 +15,7 @@ export const useStyles = makeStyles((theme) => ({
     },
   },
   box: {
-    height: '4vh',
+    height: 'auto',
     borderRadius: '15px 15px 0 0',
     width: '100%',
     backgroundColor: theme.palette.black.secondary,
@@ -27,10 +27,12 @@ export const useStyles = makeStyles((theme) => ({
   },
   text: {
     color: theme.palette.white.main,
-    marginTop: '1vh',
+    alignItems: 'center',
+    padding: '9px',
   },
   header: {
-    height: '3vh',
+    alignItems: 'center',
+    flexDirection: 'row',
     display: 'flex',
     width: '100%',
   },

src/components/Headers/SectionHeader/index.js

@@ -1,14 +1,21 @@
-import React from 'react';
+/* eslint-disable no-confusing-arrow */
+
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Typography } from '@material-ui/core';
 import Box from '@material-ui/core/Box';
 import Tooltip from '../../ToolTip/index';
+import InfoModal from '../../InfoModal';
+import useMobile from '../../../hooks/useMobile';
 
 export default function SectionHeader(props) {
-  // const classes = useStyles();
   const {
     title, toolTipText, classes, toolTipColor,
   } = props;
+  const [open, setOpen] = useState(false);
+  const { mobileView } = useMobile();
+  const handleOpen = () => mobileView && setOpen(true);
+  const handleClose = () => setOpen(false);
 
   return (
     <Box display="flex" flexFlow="wrap" justifyContent="space-between" alignItems="center">
@@ -18,10 +25,17 @@ export default function SectionHeader(props) {
             {title}
           </Box>
         </Typography>
-        <Box alignSelf="center">
+        <Box onClick={handleOpen} alignSelf="center" marginLeft={1}>
           {(toolTipText !== null && toolTipText !== undefined)
             && <Tooltip toolTipText={toolTipText} toolTipColor={toolTipColor} />}
         </Box>
+        <InfoModal
+          open={open}
+          handleClose={handleClose}
+          title={title}
+          toolTipText={toolTipText}
+          toolTipColor={toolTipColor}
+        />
       </Box>
       <Box>
         <hr className={classes.divider} />

src/components/InfoModal/__test__/index.test.js

@@ -0,0 +1,51 @@
+/* eslint-disable no-unused-expressions */
+
+import React from 'react';
+import '@testing-library/jest-dom';
+import { fireEvent } from '@testing-library/dom';
+import { screen, render } from '@testing-library/react';
+import InfoModal from '../index';
+import customTheme from '../../../styles/theme';
+import MockTheme from '../../../mocks/theme/mockTheme';
+
+describe('Info Modal Component', () => {
+  test('should render text', () => {
+    const onClose = jest.fn();
+    const text = 'Sample Text';
+    render(
+      <MockTheme>
+        <InfoModal
+          title={text}
+          handleClose={onClose}
+          open
+          toolTipColor={customTheme.palette.audiencias.seabuckthorn}
+          toolTipText={text}
+        />
+      </MockTheme>,
+    );
+
+    expect(screen.getAllByText(text)).toBeVisible;
+  });
+
+  test('should click close button', () => {
+    const onClose = jest.fn();
+    const text = 'Sample Text';
+    render(
+      <MockTheme>
+        <InfoModal
+          title={text}
+          handleClose={onClose}
+          open
+          toolTipColor={customTheme.palette.audiencias.seabuckthorn}
+          toolTipText={text}
+        />
+      </MockTheme>,
+    );
+
+    const closeButton = screen.getByTestId('close-icon');
+
+    fireEvent.click(closeButton);
+
+    expect(onClose).toHaveBeenCalled;
+  });
+});

src/components/InfoModal/index.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Box, Typography, IconButton,
+} from '@material-ui/core';
+import Modal from '@material-ui/core/Modal';
+import CloseIcon from '@material-ui/icons/Close';
+import InfoIcon from '@material-ui/icons/Info';
+import { useStyles } from './style';
+
+export default function InfoModal(props) {
+  const classes = useStyles();
+
+  const {
+    open, handleClose, title, toolTipText, toolTipColor,
+  } = props;
+
+  return (
+    <Modal
+      open={open}
+      onClose={handleClose}
+      aria-labelledby="modal-modal-title"
+      aria-describedby="modal-modal-description"
+    >
+      <Box className={classes.container}>
+        <Box className={classes.modal}>
+          <IconButton
+            data-testid="close-icon"
+            onClick={handleClose}
+            className={classes.close}
+          >
+            <CloseIcon className={classes.iconClose} />
+          </IconButton>
+          <IconButton className={classes.info} style={{ padding: 0 }}>
+            <InfoIcon className={classes.iconInfo} style={{ color: toolTipColor }} />
+          </IconButton>
+          <Typography variant="h4" className={classes.titleModal}>
+            <Box fontWeight="fontWeightBold" display="flex">
+              {title}
+            </Box>
+          </Typography>
+          <Typography id="modal-modal-description" className={classes.descriptionModal}>
+            {toolTipText}
+          </Typography>
+        </Box>
+      </Box>
+    </Modal>
+  );
+}
+
+InfoModal.propTypes = {
+  open: PropTypes.bool,
+  handleClose: PropTypes.func,
+  title: PropTypes.string,
+  toolTipText: PropTypes.string,
+  toolTipColor: PropTypes.string,
+};
+
+InfoModal.defaultProps = {
+  open: false,
+  handleClose: () => {},
+  title: '',
+  toolTipText: '',
+  toolTipColor: '',
+};