US25-VisualizacaoTotaisMobile (#247)

* #237 - Adjusting total data in audiences and adding carousel cards * #245 - Creating TotalsGrid component * #245 - Adjusting spacing in audiencies page * #245- Adjusting padding top in TotalsGrid component * #237 - Adjusting total data in wikilegis and adding carousel cards * #245 - Adjusting min-width on mobile visualization on audiencies page * #245 - Adding margin top in Totals Grid component * #245 - Adjusting spacing in wikilegis page * #245 - Adjusting spacing tooltip in section header component * #245 - Adjusting spacing in title on totals grid * #245 - Adjusting spacing bottom in Totals Grid component * #245 - Adjusting tablet TotalFrame visualization * #245 - Creating TotalsGrid component tests * #246 - Adjusting mobile menu
labhackercd · Dec 30, 2021 · eb58dd5 · eb58dd5
1 parent 3b3379c
commit eb58dd5
Show file tree

Hide file tree

Showing 15 changed files with 446 additions and 148 deletions.
diff --git a/src/components/ChartDataFrame/style.js b/src/components/ChartDataFrame/style.js
@@ -5,7 +5,7 @@ export const useStyles = makeStyles((theme) => ({
   root: {
     display: 'flex',
     width: '100%',
-    padding: '0px 16px 0px 0px',
+    padding: '0px 16px 0px 16px',
 
     [theme.breakpoints.up('sm')]: {
       padding: '0px 35px 0px 0px',

diff --git a/src/components/Headers/SectionHeader/index.js b/src/components/Headers/SectionHeader/index.js
@@ -18,14 +18,14 @@ export default function SectionHeader(props) {
   const handleClose = () => setOpen(false);
 
   return (
-    <Box display="flex" flexFlow="wrap" justifyContent="space-between" alignItems="center">
+    <Box className={classes.sectionHeader} display="flex" flexFlow="wrap" justifyContent="space-between" alignItems="center">
       <Box display="flex">
         <Typography className={`${classes.typographyHeaderSection} ${classes.typography}`} component="div" variant="h2">
           <Box fontWeight="fontWeightBold">
             {title}
           </Box>
         </Typography>
-        <Box onClick={handleOpen} alignSelf="center" marginLeft={1}>
+        <Box onClick={handleOpen} alignSelf="center" marginLeft={1} marginRight="10px">
           {(toolTipText !== null && toolTipText !== undefined)
             && <Tooltip toolTipText={toolTipText} toolTipColor={toolTipColor} />}
         </Box>

diff --git a/src/components/Headers/SubSectionHeader/index.js b/src/components/Headers/SubSectionHeader/index.js
@@ -9,7 +9,7 @@ export default function SubSectionHeader(props) {
   const { title, style } = props;
 
   return (
-    <Typography component="div" variant="h3">
+    <Typography className={classes.subSectionHeader} component="div" variant="h3">
       <Box style={style} className={classes.typography}>
         {title}
       </Box>

diff --git a/src/components/Headers/SubSectionHeader/style.js b/src/components/Headers/SubSectionHeader/style.js
@@ -2,6 +2,13 @@
 import { makeStyles } from '@material-ui/core';
 
 export const useStyles = makeStyles((theme) => ({
+  subSectionHeader: {
+    padding: '0px 0px 0px 16px',
+
+    [theme.breakpoints.up('sm')]: {
+      padding: '0px',
+    },
+  },
   typography: {
     fontWeight: 'bold',
     fontSize: '16px',

diff --git a/src/components/TotalsGrid/__test__/__snapshots__/index.test.js.snap b/src/components/TotalsGrid/__test__/__snapshots__/index.test.js.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render Totals Grid ToolTip With Data 1`] = `ReactWrapper {}`;
+
+exports[`Render Totals Grid With Data 1`] = `ReactWrapper {}`;
+
+exports[`snapshot should not have changes 1`] = `ShallowWrapper {}`;
+
+exports[`snapshot should not have changes 2`] = `ShallowWrapper {}`;
diff --git a/src/components/TotalsGrid/__test__/index.test.js b/src/components/TotalsGrid/__test__/index.test.js
@@ -0,0 +1,65 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import TotalsGrid, { ToolTip } from '../index';
+import MockTheme from '../../../mocks/theme/mockTheme';
+import * as TEXTCONSTANTS from '../../../settings/texts/AudienciasPage';
+
+const mockData = [
+  {
+    isLoaded: true,
+    info: '5000',
+    title: TEXTCONSTANTS.audiencesTotalsTexts.subSectionParticipantsTotals.title,
+    toolTipText: TEXTCONSTANTS.audiencesTotalsTexts.subSectionParticipantsTotals.toolTip,
+    toolTipAriaLabel:
+      TEXTCONSTANTS.audiencesTotalsTexts.subSectionParticipantsTotals.toolTipAriaLabel,
+    toolTipColor: '#DA7F0B',
+  },
+  {
+    isLoaded: true,
+    info: '5000',
+    title: TEXTCONSTANTS.audiencesTotalsTexts.subSectionAudiencesTotals.title,
+    toolTipText: TEXTCONSTANTS.audiencesTotalsTexts.subSectionAudiencesTotals.toolTip,
+    toolTipAriaLabel: TEXTCONSTANTS.audiencesTotalsTexts.subSectionAudiencesTotals.toolTipAriaLabel,
+    toolTipColor: '#DA7F0B',
+    subInformation: '200 realizadas',
+  },
+  {
+    isLoaded: true,
+    info: '5000',
+    title: TEXTCONSTANTS.audiencesTotalsTexts.subSectionMessagesTotals.title,
+    toolTipText: TEXTCONSTANTS.audiencesTotalsTexts.subSectionMessagesTotals.toolTip,
+    toolTipAriaLabel: TEXTCONSTANTS.audiencesTotalsTexts.subSectionMessagesTotals.toolTipAriaLabel,
+    toolTipColor: '#DA7F0B',
+  },
+  {
+    isLoaded: true,
+    info: '5000',
+    title: TEXTCONSTANTS.audiencesTotalsTexts.subSectionQuestionsTotals.title,
+    toolTipText: TEXTCONSTANTS.audiencesTotalsTexts.subSectionQuestionsTotals.toolTip,
+    toolTipAriaLabel: TEXTCONSTANTS.audiencesTotalsTexts.subSectionQuestionsTotals.toolTipAriaLabel,
+  },
+];
+
+it('snapshot should not have changes', () => {
+  const component = shallow(<MockTheme><TotalsGrid itens={[]} /></MockTheme>);
+  expect(component.exists()).toEqual(true);
+  expect(component).toMatchSnapshot();
+});
+
+it('Render Totals Grid With Data', () => {
+  const component = mount(<MockTheme><TotalsGrid itens={mockData} /></MockTheme>);
+  expect(component.exists()).toEqual(true);
+  expect(component).toMatchSnapshot();
+});
+
+it('snapshot should not have changes', () => {
+  const component = shallow(<MockTheme><ToolTip itens={[]} /></MockTheme>);
+  expect(component.exists()).toEqual(true);
+  expect(component).toMatchSnapshot();
+});
+
+it('Render Totals Grid ToolTip With Data', () => {
+  const component = mount(<MockTheme><ToolTip itens={mockData} /></MockTheme>);
+  expect(component.exists()).toEqual(true);
+  expect(component).toMatchSnapshot();
+});
diff --git a/src/components/TotalsGrid/index.js b/src/components/TotalsGrid/index.js
@@ -0,0 +1,119 @@
+/* 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 {
+  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';
+
+export function ToolTip(props) {
+  const {
+    // eslint-disable-next-line react/prop-types
+    itens, index,
+  } = props;
+  const [open, setOpen] = useState(false);
+  const { mobileView, tabletView } = useMobile();
+  const handleOpen = () => (mobileView || tabletView) && setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  return (
+    <>
+      {(itens[index] && itens[index].toolTipText !== null && itens[index].toolTipText !== undefined)
+      && (
+        <>
+          <Box onClick={handleOpen} flexGrow={1} display="flex" alignItems="center" style={{ margin: 0 }}>
+            <Tooltips
+              toolTipText={itens[index].toolTipText}
+              toolTipColor={itens[index].toolTipColor}
+              toolTipAriaLabel={itens[index].toolTipAriaLabel}
+            />
+          </Box>
+          <InfoModal
+            open={open}
+            handleClose={handleClose}
+            title={itens[index].title}
+            toolTipText={itens[index].toolTipText}
+            toolTipColor={itens[index].toolTipColor}
+          />
+        </>
+      )}
+    </>
+  );
+}
+
+export default function TotalsGrid(props) {
+  const classes = useStyles();
+  const {
+    itens, className,
+  } = props;
+
+  return (
+    <Box className={`${classes.root} ${className}`}>
+      {itens.map((item, index) => (
+        <>
+          {item.isLoaded ? (
+            <>
+              <Box key={item.title} display="flex" flexDirection="column" flex={1} flexBasis="45%">
+                <Box display="flex" paddingTop="16px">
+                  <Typography variant="h5" className={classes.text}>
+                    <Box display="flex">
+                      {item.title}
+                    </Box>
+                  </Typography>
+                  <ToolTip itens={itens} index={index} />
+                </Box>
+                <Box paddingBottom={(index === 2 || index === 3) ? '16px' : '8px'}>
+                  <Typography
+                    className={classes.info}
+                    noWrap
+                  >
+                    {item.info}
+                  </Typography>
+                  {item.subInformation && item.subInformation.length !== 0 && (
+                    <Box width="100%" display="flex" alignItems="center" paddingLeft="16px" paddingTop="8px">
+                      <Box marginRight="10px">
+                        <CheckCircleIcon fontSize="small" style={{ color: item.toolTipColor }} />
+                      </Box>
+                      <Box display="flex" alignItems="center" marginBottom="4px">
+                        <Typography style={{ color: '#FFF', fontSize: '13px' }} noWrap>
+                          {item.subInformation}
+                        </Typography>
+                      </Box>
+                    </Box>
+                  )}
+                </Box>
+              </Box>
+              { index % 2 === 0 && (
+                <hr flexBasis="10%" flexShrink={0} color="#363636" />
+              )}
+              { index === 1 && (
+                <hr flexBasis="100%" flexShrink={0} color="#363636" width="100%" height="1px" />
+              )}
+            </>
+          ) : (
+            <Box display="flex" alignItems="center" justifyContent="center" width="100%" height="100%">
+              <CircularProgress />
+            </Box>
+          )}
+        </>
+      ))}
+    </Box>
+  );
+}
+
+TotalsGrid.propTypes = {
+  itens: PropTypes.array,
+  className: PropTypes.object,
+};
+
+TotalsGrid.defaultProps = {
+  itens: [],
+  className: {},
+};
diff --git a/src/components/TotalsGrid/style.js b/src/components/TotalsGrid/style.js
@@ -0,0 +1,27 @@
+/* eslint-disable import/prefer-default-export */
+import { makeStyles } from '@material-ui/core/styles';
+
+export const useStyles = makeStyles((theme) => ({
+  root: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    flex: 1,
+    flexDirection: 'row',
+    backgroundColor: '#000000',
+    justifyContent: 'space-between',
+    overflow: 'hidden',
+    left: 0,
+  },
+  text: {
+    color: theme.palette.white.main,
+    alignItems: 'center',
+    padding: '4px 8px 0px 16px',
+  },
+  info: {
+    color: '#FFF',
+    alignSelf: 'center',
+    fontWeight: 'bold',
+    fontSize: '20px',
+    paddingLeft: '16px',
+  },
+}));