Ft/climatemapped_data_indicators

apps/climatemappedafrica/src/components/DataIndicators/DataIndicators.js

@@ -0,0 +1,133 @@
+import {
+  ClickAwayListener,
+  Grid,
+  Dialog,
+  Slide,
+  useMediaQuery,
+} from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import clsx from "clsx";
+import PropTypes from "prop-types";
+import React, { useState } from "react";
+
+import Icon from "./Icon";
+import IndicatorPanel from "./IndicatorPanel";
+import useStyles from "./useStyles";
+
+import bg from "@/climatemappedafrica/assets/images/Mask Group 8.png";
+import Header from "@/climatemappedafrica/components/Header";
+import Image from "@/climatemappedafrica/components/Image";
+
+const Transition = React.forwardRef(function Transition(props, ref) {
+  return <Slide direction="left" timeout={300} ref={ref} {...props} />;
+});
+
+function DataIndicators({ indicators, title, ...props }) {
+  const classes = useStyles(props);
+  const theme = useTheme();
+  const isDesktop = useMediaQuery(theme.breakpoints.up("lg"));
+
+  const [checked, setChecked] = useState(false);
+  const [currentItemIndex, setCurrentItemIndex] = useState(null);
+
+  if (!indicators?.length) {
+    return null;
+  }
+  const handleIconClick = (index) => {
+    setCurrentItemIndex(index);
+    setChecked(true);
+  };
+  const resetItemClick = () => {
+    setChecked(false);
+    setCurrentItemIndex(null);
+  };
+  const currentItem = indicators[currentItemIndex];
+  const panelProps = isDesktop
+    ? {
+        in: checked,
+        mountOnEnter: true,
+        unmountOnExit: true,
+        component: Slide,
+        direction: "left",
+        timeout: 300,
+        classes: {
+          root: classes.slide,
+          content: classes.content,
+          title: classes.title,
+          description: classes.description,
+        },
+      }
+    : {
+        open: checked,
+        onClose: resetItemClick,
+        component: Dialog,
+        BackdropProps: {
+          classes: {
+            root: classes.backdrop,
+          },
+        },
+        TransitionComponent: Transition,
+        classes: {
+          root: classes.dialog,
+          paper: classes.dialogPaper,
+          content: classes.content,
+          title: classes.title,
+          description: classes.description,
+        },
+      };
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.background}>
+        <Image objectFit="cover" src={bg} layout="fill" />
+      </div>
+      <div className={classes.section}>
+        <div
+          className={clsx(classes.indicatorsContainer, {
+            [classes.slideIn]: checked,
+          })}
+        >
+          <Header className={classes.header}>{title}</Header>
+          <ClickAwayListener onClickAway={resetItemClick}>
+            <Grid container alignItems="center" justifyContent="center">
+              {indicators?.map((item, index) => (
+                <Grid
+                  item
+                  key={item.title}
+                  className={clsx(classes.iconContainer, {
+                    [classes.slideInIconContainer]: checked,
+                  })}
+                >
+                  <Icon
+                    handleIconClick={() => handleIconClick(index)}
+                    item={item}
+                    index={index}
+                    currentItemIndex={currentItemIndex}
+                    handleClickAway={() => resetItemClick()}
+                  />
+                </Grid>
+              ))}
+            </Grid>
+          </ClickAwayListener>
+        </div>
+        <IndicatorPanel
+          {...panelProps}
+          onClick={resetItemClick}
+          currentItem={currentItem}
+        />
+      </div>
+    </div>
+  );
+}
+
+DataIndicators.propTypes = {
+  title: PropTypes.string,
+  indicators: PropTypes.arrayOf(
+    PropTypes.shape({
+      title: PropTypes.string,
+      description: PropTypes.string,
+    }),
+  ),
+};
+
+export default DataIndicators;

apps/climatemappedafrica/src/components/DataIndicators/DataIndicators.snap.js

@@ -0,0 +1,72 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<RichText /> renders unchanged 1`] = `
+<div>
+  <div
+    class="makeStyles-root-1"
+  >
+    <div
+      class="makeStyles-background-3"
+    >
+      <img
+        data-nimg="fill"
+        decoding="async"
+        loading="lazy"
+        sizes="100vw"
+        src="/_next/image?url=%2Furl&w=3840&q=75"
+        srcset="/_next/image?url=%2Furl&w=640&q=75 640w, /_next/image?url=%2Furl&w=750&q=75 750w, /_next/image?url=%2Furl&w=828&q=75 828w, /_next/image?url=%2Furl&w=1080&q=75 1080w, /_next/image?url=%2Furl&w=1200&q=75 1200w, /_next/image?url=%2Furl&w=1920&q=75 1920w, /_next/image?url=%2Furl&w=2048&q=75 2048w, /_next/image?url=%2Furl&w=3840&q=75 3840w"
+        style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; right: 0px; bottom: 0px; object-fit: cover; color: transparent;"
+      />
+    </div>
+    <div
+      class="makeStyles-section-2"
+    >
+      <div
+        class="makeStyles-indicatorsContainer-4"
+      >
+        <header
+          class="makeStyles-header-6 MuiBox-root css-0"
+        >
+          <div
+            class="MuiTypography-root makeStyles-root-20 MuiTypography-h1 css-1kdpf0m-MuiTypography-root"
+          >
+            Indicators
+          </div>
+        </header>
+        <div
+          class="MuiGrid-root MuiGrid-container css-go2vvz-MuiGrid-root"
+        >
+          <div
+            class="MuiGrid-root MuiGrid-item makeStyles-iconContainer-8 css-13i4rnv-MuiGrid-root"
+          >
+            <button
+              class="MuiButtonBase-root makeStyles-iconRoot-10 css-10d1a0h-MuiButtonBase-root"
+              tabindex="0"
+              type="button"
+            >
+              <div
+                class="makeStyles-image-12"
+              >
+                <img
+                  data-nimg="fill"
+                  decoding="async"
+                  src=""
+                  style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; right: 0px; bottom: 0px; color: transparent;"
+                />
+              </div>
+              <p
+                class="MuiTypography-root MuiTypography-body1 makeStyles-text-13 css-6hq4le-MuiTypography-root"
+              >
+                Overview
+              </p>
+              <span
+                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

apps/climatemappedafrica/src/components/DataIndicators/DataIndicators.test.js

@@ -0,0 +1,26 @@
+import { createRender } from "@commons-ui/testing-library";
+import React from "react";
+
+import DataIndicators from "./DataIndicators";
+
+import theme from "@/climatemappedafrica/theme";
+
+// eslint-disable-next-line testing-library/render-result-naming-convention
+const render = createRender({ theme });
+
+const defaultProps = {
+  title: "Indicators",
+  indicators: [
+    {
+      title: "Overview",
+      description: null,
+    },
+  ],
+};
+
+describe("<RichText />", () => {
+  it("renders unchanged", () => {
+    const { container } = render(<DataIndicators {...defaultProps} />);
+    expect(container).toMatchSnapshot();
+  });
+});

apps/climatemappedafrica/src/components/DataIndicators/Icon.js

@@ -0,0 +1,36 @@
+import { ButtonBase, Typography } from "@mui/material";
+import Image from "next/image";
+import PropTypes from "prop-types";
+import React from "react";
+
+import useStyles from "./useStyles";
+
+function Icon({ item, handleIconClick, currentItemIndex, index, ...props }) {
+  const classes = useStyles(props);
+  const { title, primaryIcon, secondaryIcon } = item;
+
+  return (
+    <ButtonBase onClick={handleIconClick} className={classes.iconRoot}>
+      <div className={classes.image}>
+        <Image
+          src={index === currentItemIndex ? secondaryIcon : primaryIcon}
+          layout="fill"
+        />
+      </div>
+      <Typography className={classes.text}>{title}</Typography>
+    </ButtonBase>
+  );
+}
+
+Icon.propTypes = {
+  handleIconClick: PropTypes.func,
+  currentItemIndex: PropTypes.number,
+  index: PropTypes.number,
+  item: PropTypes.shape({
+    image: PropTypes.string,
+    title: PropTypes.string,
+    hover: PropTypes.string,
+  }),
+};
+
+export default Icon;

apps/climatemappedafrica/src/components/DataIndicators/IndicatorPanel.js

@@ -0,0 +1,60 @@
+import { RichTypography } from "@commons-ui/core";
+import { RichText } from "@commons-ui/payload";
+import { ButtonBase, Slide } from "@mui/material";
+import makeStyles from "@mui/styles/makeStyles";
+import PropTypes from "prop-types";
+import React from "react";
+
+const useStyles = makeStyles(() => ({
+  root: {},
+  paper: {},
+  content: {},
+  title: {},
+  description: {},
+}));
+
+function IndicatorPanel({ currentItem, onClick, component, ...props }) {
+  const Component = component || Slide;
+  const classes = useStyles(props);
+  const { content, description, title, ...otherClasses } = classes;
+
+  return (
+    <Component {...props} classes={otherClasses}>
+      <ButtonBase
+        disableRipple
+        disableTouchRipple
+        onClick={onClick}
+        className={classes.content}
+      >
+        {currentItem?.title && (
+          <RichTypography variant="h3" className={classes.title}>
+            {currentItem.title}
+          </RichTypography>
+        )}
+        {currentItem?.description && (
+          <RichText
+            className={classes.description}
+            elements={currentItem.description}
+          />
+        )}
+      </ButtonBase>
+    </Component>
+  );
+}
+
+IndicatorPanel.propTypes = {
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    content: PropTypes.string,
+    title: PropTypes.string,
+    description: PropTypes.string,
+  }),
+  component: PropTypes.elementType,
+  currentItem: PropTypes.shape({
+    title: PropTypes.string,
+    description: PropTypes.string,
+  }),
+  onClick: PropTypes.func,
+};
+
+export default IndicatorPanel;

apps/climatemappedafrica/src/components/DataIndicators/index.js

@@ -0,0 +1,3 @@
+import DataIndicators from "./DataIndicators";
+
+export default DataIndicators;