feature/WMS-8-tile (#26)

* Recreated tile component with proper naming conventions
* Cleaned code, renamed variables, removed unnecessary code
* Added TODO note

Co-authored-by: Llewellyn Dsouza <lledsouza2209@gmail.com>

src/assets/images/ArrowRightIcon.js

@@ -0,0 +1,28 @@
+import PropTypes from 'prop-types';
+
+const ArrowRightIcon = ({ width = 50, height = 24, color = '#007AFF', ...props }) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 18 18"
+    fill="none"
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M10.8223 14.1148C10.6798 14.1148 10.5373 14.0623 10.4248 13.9498C10.2073 13.7323 10.2073 13.3723 10.4248 13.1548L14.5798 8.99984L10.4248 4.84484C10.2073 4.62734 10.2073 4.26734 10.4248 4.04984C10.6423 3.83234 11.0023 3.83234 11.2198 4.04984L15.7723 8.60234C15.9898 8.81984 15.9898 9.17984 15.7723 9.39734L11.2198 13.9498C11.1073 14.0623 10.9648 14.1148 10.8223 14.1148Z"
+      fill={color}
+    />
+    <path
+      d="M15.2475 9.5625H2.625C2.3175 9.5625 2.0625 9.3075 2.0625 9C2.0625 8.6925 2.3175 8.4375 2.625 8.4375H15.2475C15.555 8.4375 15.81 8.6925 15.81 9C15.81 9.3075 15.555 9.5625 15.2475 9.5625Z"
+      fill={color}
+    />
+  </svg>
+);
+export default ArrowRightIcon;
+
+ArrowRightIcon.propTypes = {
+  width: PropTypes.string,
+  height: PropTypes.string,
+  color: PropTypes.string
+};

src/assets/images/SetupIcon.js

@@ -0,0 +1,44 @@
+import PropTypes from 'prop-types';
+
+const SetupIcon = ({ width = 25, height = 24, color = '#292D32', ...props }) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 25 24"
+    fill="none"
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M22.75 7.25H16.75C16.34 7.25 16 6.91 16 6.5C16 6.09 16.34 5.75 16.75 5.75H22.75C23.16 5.75 23.5 6.09 23.5 6.5C23.5 6.91 23.16 7.25 22.75 7.25Z"
+      fill={color}
+    />
+    <path
+      d="M6.75 7.25H2.75C2.34 7.25 2 6.91 2 6.5C2 6.09 2.34 5.75 2.75 5.75H6.75C7.16 5.75 7.5 6.09 7.5 6.5C7.5 6.91 7.16 7.25 6.75 7.25Z"
+      fill={color}
+    />
+    <path
+      d="M10.75 10.75C8.41 10.75 6.5 8.84 6.5 6.5C6.5 4.16 8.41 2.25 10.75 2.25C13.09 2.25 15 4.16 15 6.5C15 8.84 13.09 10.75 10.75 10.75ZM10.75 3.75C9.23 3.75 8 4.98 8 6.5C8 8.02 9.23 9.25 10.75 9.25C12.27 9.25 13.5 8.02 13.5 6.5C13.5 4.98 12.27 3.75 10.75 3.75Z"
+      fill={color}
+    />
+    <path
+      d="M22.75 18.25H18.75C18.34 18.25 18 17.91 18 17.5C18 17.09 18.34 16.75 18.75 16.75H22.75C23.16 16.75 23.5 17.09 23.5 17.5C23.5 17.91 23.16 18.25 22.75 18.25Z"
+      fill={color}
+    />
+    <path
+      d="M8.75 18.25H2.75C2.34 18.25 2 17.91 2 17.5C2 17.09 2.34 16.75 2.75 16.75H8.75C9.16 16.75 9.5 17.09 9.5 17.5C9.5 17.91 9.16 18.25 8.75 18.25Z"
+      fill={color}
+    />
+    <path
+      d="M14.75 21.75C12.41 21.75 10.5 19.84 10.5 17.5C10.5 15.16 12.41 13.25 14.75 13.25C17.09 13.25 19 15.16 19 17.5C19 19.84 17.09 21.75 14.75 21.75ZM14.75 14.75C13.23 14.75 12 15.98 12 17.5C12 19.02 13.23 20.25 14.75 20.25C16.27 20.25 17.5 19.02 17.5 17.5C17.5 15.98 16.27 14.75 14.75 14.75Z"
+      fill={color}
+    />
+  </svg>
+);
+export default SetupIcon;
+
+SetupIcon.propTypes = {
+  width: PropTypes.string,
+  height: PropTypes.string,
+  color: PropTypes.string
+};

src/components/TileComponent/Tile/index.js

@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import Box from '@mui/material/Box';
+import ArrowRightIcon from 'assets/images/ArrowRightIcon';
+
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import useStyles from './styles';
+import LOGGER from 'services/Logger';
+
+export default function Tile({ data, children }) {
+  let [expand, setExpand] = useState(false);
+  const classes = useStyles();
+  return (
+    <Accordion
+      className={`${classes.root} ${expand ? null : classes.hoverChange}`}
+      onClick={() => {
+        LOGGER.log(data.path);
+      }}
+    >
+      <AccordionSummary
+        aria-controls="panel1a-content"
+        id="panel1a-header"
+        className={expand ? null : classes.fullHeight}
+        onClick={() => {
+          setExpand((expand = !expand));
+          LOGGER.log(expand);
+        }}
+      >
+        <Box
+          className={`${classes.row1} ${expand ? classes.row1Svg : null} ${
+            expand ? null : classes.column
+          }`}
+        >
+          {children}{' '}
+          <Box className={`${classes.name} ${expand ? null : classes.content}`}>{data.name}</Box>
+        </Box>
+      </AccordionSummary>
+      <AccordionDetails className={`${classes.row2} ${expand ? null : classes.remove}`}>
+        <Box className={classes.box}>
+          Update {data.name} <ArrowRightIcon />{' '}
+        </Box>
+        <Box className={`${classes.box} ${classes.boxEven}`}>
+          Add New {data.name} <ArrowRightIcon />{' '}
+        </Box>
+        <Box className={classes.box}>
+          Cycle Count <ArrowRightIcon />{' '}
+        </Box>
+        <Box className={`${classes.box} ${classes.boxEven}`}>
+          {data.name} List <ArrowRightIcon />{' '}
+        </Box>
+      </AccordionDetails>
+    </Accordion>
+  );
+}
+
+Tile.propTypes = {
+  data: PropTypes.object,
+  children: PropTypes.node
+};

src/components/TileComponent/Tile/styles.js

@@ -0,0 +1,88 @@
+import { makeStyles } from '@mui/styles';
+
+const useStyles = makeStyles({
+  root: {
+    backgroundColor: 'white',
+    borderRadius: '8px',
+    boxShadow: '0px 4px 24px #0000000d'
+  },
+  hoverChange: {
+    '&:hover': {
+      backgroundColor: '#007aff',
+      color: 'white',
+      '& svg': {
+        '& path': {
+          fill: '#fff'
+        }
+      }
+    }
+  },
+  row1: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: '8px',
+    textAlign: 'center',
+    margin: '0 auto',
+    '& svg': {
+      marginBottom: '12px'
+    }
+  },
+  column: {
+    flexDirection: 'column'
+  },
+  row2: {
+    display: 'grid',
+    opacity: '1',
+    gridTemplateColumns: ' repeat(2, 1fr)',
+    gridTemplateRows: ' repeat(2, 1fr)',
+    fontSize: '14px'
+  },
+  box: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: '13px 0 13px 10px',
+    borderTop: '1px solid lightgray',
+    '& svg': {
+      opacity: '0'
+    },
+    '&:hover': {
+      color: '#007aff',
+      cursor: 'pointer',
+      '& svg': {
+        opacity: '1'
+      }
+    }
+  },
+  boxEven: {
+    borderLeft: ' 1px solid lightgray'
+  },
+  content: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    fontSize: '25px'
+  },
+  name: {
+    marginLeft: '5px',
+    fontSize: '20px'
+  },
+  row1Svg: {
+    alignItems: 'unset',
+    position: 'relative',
+    top: '15px',
+    '& svg': {
+      width: '30px',
+      height: '30px'
+    }
+  },
+  fullHeight: {
+    height: '230px'
+  },
+  remove: {
+    display: 'none'
+  }
+});
+
+export default useStyles;

src/components/TileComponent/TileGrid.js

@@ -0,0 +1,78 @@
+import React, { useEffect, useRef } from 'react';
+import Box from '@mui/material/Box';
+import { makeStyles } from '@mui/styles';
+
+import SetupIcon from 'assets/images/SetupIcon';
+import Tile from './Tile';
+
+const useStyles = makeStyles({
+  menu: {
+    display: 'grid',
+    gap: '1.75rem',
+    backgroundColor: '#f9f9f9',
+    padding: '24px 48px',
+    '@media (max-width: 900px)': {
+      gridTemplateColumns: 'repeat(2, minmax(250px, auto)) !important'
+    },
+    '@media (max-width: 690px)': {
+      gridTemplateColumns: 'repeat(1, minmax(250px, auto)) !important'
+    }
+  }
+});
+
+
+// TODO: When using this component, please use props here instead.
+// The below code was left as a sample for testing.
+// Please also remove this comment when the above are complete
+export default function TileGrid() {
+  const classes = useStyles();
+  // to make the grid adjust its elemnts:
+  const myContainer = useRef(null);
+  let gridColumns = 2;
+  useEffect(() => {
+    const grid = myContainer.current;
+    const gridChild = grid.childElementCount;
+    gridColumns = Math.floor(Math.sqrt(gridChild));
+    grid.style.gridTemplateColumns = `repeat(${gridColumns}, minmax(250px, auto))`;
+  });
+  return (
+    <Box className={classes.menu} ref={myContainer}>
+      <Tile data={{ name: 'Setup', path: '/' }}>
+        {' '}
+        <SetupIcon color="#007aff" width="50px" height="50px" />
+      </Tile>
+      <Tile data={{ name: 'Setup', path: '/' }}>
+        {' '}
+        <SetupIcon color="#007aff" width="50px" height="50px" />
+      </Tile>
+      <Tile data={{ name: 'Setup', path: '/' }}>
+        {' '}
+        <SetupIcon color="#007aff" width="50px" height="50px" />
+      </Tile>
+      <Tile data={{ name: 'Setup', path: '/' }}>
+        {' '}
+        <SetupIcon color="#007aff" width="50px" height="50px" />
+      </Tile>
+      <Tile data={{ name: 'Setup', path: '/' }}>
+        {' '}
+        <SetupIcon color="#007aff" width="50px" height="50px" />
+      </Tile>
+      <Tile data={{ name: 'Setup', path: '/' }}>
+        {' '}
+        <SetupIcon color="#007aff" width="50px" height="50px" />
+      </Tile>
+      <Tile data={{ name: 'Setup', path: '/' }}>
+        {' '}
+        <SetupIcon color="#007aff" width="50px" height="50px" />
+      </Tile>
+      <Tile data={{ name: 'Setup', path: '/' }}>
+        {' '}
+        <SetupIcon color="#007aff" width="50px" height="50px" />
+      </Tile>
+      <Tile data={{ name: 'Setup', path: '/' }}>
+        {' '}
+        <SetupIcon color="#007aff" width="40px" height="40px" />
+      </Tile>
+    </Box>
+  );
+}