Merge pull request #951 from CodeForAfrica/ft/climatemapped_data_indi…

…cators Ft/climatemapped_data_indicators
CodeForAfrica · Oct 24, 2024 · ee13cbf · ee13cbf
2 parents 0d55201 + a665218
commit ee13cbf
Show file tree

Hide file tree

Showing 13 changed files with 458 additions and 2 deletions.
diff --git a/apps/climatemappedafrica/public/images/cms/blocks/data-indicators.png b/apps/climatemappedafrica/public/images/cms/blocks/data-indicators.png
diff --git a/apps/climatemappedafrica/src/assets/images/Mask Group 8.png b/apps/climatemappedafrica/src/assets/images/Mask Group 8.png
diff --git a/apps/climatemappedafrica/src/components/DataIndicators/DataIndicators.js b/apps/climatemappedafrica/src/components/DataIndicators/DataIndicators.js
@@ -0,0 +1,164 @@
+import { Box, ClickAwayListener, Grid, Slide } from "@mui/material";
+import PropTypes from "prop-types";
+import React, { useState } from "react";
+
+import Icon from "./Icon";
+import IndicatorPanel from "./IndicatorPanel";
+
+import bg from "@/climatemappedafrica/assets/images/Mask Group 8.png";
+import Image from "@/climatemappedafrica/components/Image";
+import RichHeader from "@/climatemappedafrica/components/RichHeader";
+
+function DataIndicators({ indicators, title }) {
+  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 = {
+    in: checked,
+    mountOnEnter: true,
+    unmountOnExit: true,
+    component: Slide,
+    direction: "left",
+    timeout: 300,
+    sx: ({ palette, typography }) => ({
+      position: "absolute",
+      right: 0,
+      top: { lg: 0, xs: typography.pxToRem(124) },
+      backgroundColor: palette.primary.main,
+      display: "flex",
+      justifyContent: "flex-start",
+      alignItems: "flex-start",
+      flexDirection: "column",
+      color: palette.text.secondary,
+      margin: { xs: "auto 0" },
+      width: { lg: typography.pxToRem(480), xs: typography.pxToRem(390) },
+      height: {
+        xs: typography.pxToRem(528),
+        lg: typography.pxToRem(600),
+      },
+      padding: {
+        xs: typography.pxToRem(15),
+        md: `${typography.pxToRem(50)} ${typography.pxToRem(36)}`,
+        lg: `${typography.pxToRem(76)} ${typography.pxToRem(84)}`,
+      },
+    }),
+  };
+
+  return (
+    <Box
+      sx={({ typography }) => ({
+        backgroundColor: "#F0F0F0",
+        height: { xs: typography.pxToRem(672), lg: typography.pxToRem(600) },
+        position: "relative",
+      })}
+    >
+      <Box
+        sx={{
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+        }}
+      >
+        <Image objectFit="cover" src={bg} layout="fill" />
+      </Box>
+      <Box
+        sx={{
+          display: "flex",
+          overflow: "hidden",
+          position: { lg: "relative" },
+        }}
+      >
+        <Box
+          sx={({ typography }) => ({
+            width: "100%",
+            height: {
+              xs: typography.pxToRem(672),
+              lg: typography.pxToRem(600),
+            },
+            transition: "width 0.3s ease-out",
+            ...(checked && {
+              width: { md: "calc(100% - 355px)", lg: "calc(100% - 480px)" },
+            }),
+          })}
+        >
+          <RichHeader
+            TitleProps={{
+              sx: {
+                width: "100%",
+                textAlign: "center",
+                padding: `40px 0`,
+              },
+            }}
+          >
+            {title}
+          </RichHeader>
+          <ClickAwayListener onClickAway={resetItemClick}>
+            <Grid container alignItems="center" justifyContent="center">
+              {indicators.map((item, index) => (
+                <Grid
+                  item
+                  key={item.title}
+                  sx={({ typography }) => ({
+                    marginBottom: typography.pxToRem(16),
+                    justifyContent: "center",
+                    transition: "margin-right 0.3s ease-out",
+                    display: { xs: "flex", lg: "initial" },
+                    width: { xs: "100%", lg: "auto" },
+                    mr: { lg: 7.5 },
+                    "&:last-of-type": {
+                      marginRight: 0,
+                    },
+
+                    ...(checked && {
+                      mr: { lg: 2.5 },
+                      "&:last-of-type": {
+                        marginRight: 0,
+                      },
+                    }),
+                  })}
+                >
+                  <Icon
+                    handleIconClick={() => handleIconClick(index)}
+                    item={item}
+                    index={index}
+                    currentItemIndex={currentItemIndex}
+                    handleClickAway={resetItemClick}
+                  />
+                </Grid>
+              ))}
+            </Grid>
+          </ClickAwayListener>
+        </Box>
+        <IndicatorPanel
+          {...panelProps}
+          onClick={resetItemClick}
+          currentItem={currentItem}
+        />
+      </Box>
+    </Box>
+  );
+}
+
+DataIndicators.propTypes = {
+  title: PropTypes.arrayOf(PropTypes.shape({})),
+  indicators: PropTypes.arrayOf(
+    PropTypes.shape({
+      title: PropTypes.string,
+      description: PropTypes.arrayOf(PropTypes.shape({})),
+    }),
+  ),
+};
+
+export default DataIndicators;
diff --git a/apps/climatemappedafrica/src/components/DataIndicators/DataIndicators.snap.js b/apps/climatemappedafrica/src/components/DataIndicators/DataIndicators.snap.js
@@ -0,0 +1,72 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<DataIndicators /> renders unchanged 1`] = `
+<div>
+  <div
+    class="MuiBox-root css-8h5fdo"
+  >
+    <div
+      class="MuiBox-root css-b4kcmh"
+    >
+      <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="MuiBox-root css-18h5v7w"
+    >
+      <div
+        class="MuiBox-root css-5raypf"
+      >
+        <header
+          class="MuiBox-root css-0"
+        >
+          <div
+            class="MuiBox-root css-1lz18kf"
+          >
+            Indicators
+          </div>
+        </header>
+        <div
+          class="MuiGrid-root MuiGrid-container css-go2vvz-MuiGrid-root"
+        >
+          <div
+            class="MuiGrid-root MuiGrid-item css-18bgkre-MuiGrid-root"
+          >
+            <button
+              class="MuiButtonBase-root css-72d9li-MuiButtonBase-root"
+              tabindex="0"
+              type="button"
+            >
+              <div
+                class="MuiBox-root css-g5rc5c"
+              >
+                <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 css-1eogcpa-MuiTypography-root"
+              >
+                Overview
+              </p>
+              <span
+                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/apps/climatemappedafrica/src/components/DataIndicators/DataIndicators.test.js b/apps/climatemappedafrica/src/components/DataIndicators/DataIndicators.test.js
@@ -0,0 +1,31 @@
+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: [
+    {
+      text: "Indicators",
+      children: null,
+    },
+  ],
+  indicators: [
+    {
+      title: "Overview",
+      description: null,
+    },
+  ],
+};
+
+describe("<DataIndicators />", () => {
+  it("renders unchanged", () => {
+    const { container } = render(<DataIndicators {...defaultProps} />);
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/apps/climatemappedafrica/src/components/DataIndicators/Icon.js b/apps/climatemappedafrica/src/components/DataIndicators/Icon.js
@@ -0,0 +1,53 @@
+import { Box, ButtonBase, Typography } from "@mui/material";
+import Image from "next/image";
+import PropTypes from "prop-types";
+import React from "react";
+
+function Icon({ item, handleIconClick, currentItemIndex, index }) {
+  const { title, primaryIcon, secondaryIcon } = item;
+
+  return (
+    <ButtonBase
+      onClick={handleIconClick}
+      sx={{
+        display: { xs: "flex", lg: "block" },
+      }}
+    >
+      <Box
+        sx={({ typography }) => ({
+          position: "relative",
+          height: { xs: typography.pxToRem(88.8), lg: typography.pxToRem(140) },
+          width: { xs: typography.pxToRem(88.8), lg: typography.pxToRem(140) },
+        })}
+      >
+        <Image
+          src={index === currentItemIndex ? secondaryIcon : primaryIcon}
+          layout="fill"
+        />
+      </Box>
+      <Typography
+        sx={({ typography }) => ({
+          display: "flex",
+          marginLeft: typography.pxToRem(31),
+          fontSize: typography.pxToRem(20),
+          width: { xs: typography.pxToRem(200), lg: "auto" },
+        })}
+      >
+        {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;
diff --git a/apps/climatemappedafrica/src/components/DataIndicators/IndicatorPanel.js b/apps/climatemappedafrica/src/components/DataIndicators/IndicatorPanel.js
@@ -0,0 +1,48 @@
+import { RichTypography } from "@commons-ui/core";
+import { RichText } from "@commons-ui/payload";
+import { ButtonBase, Slide } from "@mui/material";
+import PropTypes from "prop-types";
+import React from "react";
+
+function IndicatorPanel({ currentItem, onClick, component, ...props }) {
+  const Component = component || Slide;
+  return (
+    <Component {...props}>
+      <ButtonBase
+        disableRipple
+        disableTouchRipple
+        sx={({ palette }) => ({
+          display: "flex",
+          justifyContent: "flex-start",
+          alignItems: "flex-start",
+          flexDirection: "column",
+          color: palette.text.secondary,
+        })}
+        onClick={onClick}
+      >
+        {currentItem?.title && (
+          <RichTypography sx={{ color: "inherit" }} variant="h3">
+            {currentItem.title}
+          </RichTypography>
+        )}
+        {currentItem?.description && (
+          <RichText
+            sx={{ lineHeight: 30 / 16, textAlign: "initial" }}
+            elements={currentItem.description}
+          />
+        )}
+      </ButtonBase>
+    </Component>
+  );
+}
+
+IndicatorPanel.propTypes = {
+  component: PropTypes.elementType,
+  currentItem: PropTypes.shape({
+    title: PropTypes.string,
+    description: PropTypes.string,
+  }),
+  onClick: PropTypes.func,
+};
+
+export default IndicatorPanel;
diff --git a/apps/climatemappedafrica/src/components/DataIndicators/index.js b/apps/climatemappedafrica/src/components/DataIndicators/index.js
@@ -0,0 +1,3 @@
+import DataIndicators from "./DataIndicators";
+
+export default DataIndicators;
diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.snap.js b/apps/climatemappedafrica/src/components/Hero/Hero.snap.js
@@ -32,7 +32,7 @@ exports[`<Hero /> renders unchanged 1`] = `
             class="MuiBox-root css-0"
           >
             <div
-              class="MuiBox-root css-pps1ft"
+              class="MuiBox-root css-1c55nth"
             >
               <h1
                 class="MuiTypography-root MuiTypography-h1 css-qt60le-MuiTypography-root"

diff --git a/apps/climatemappedafrica/src/components/RichHeader/RichHeader.js b/apps/climatemappedafrica/src/components/RichHeader/RichHeader.js
@@ -50,8 +50,8 @@ const RichHeader = React.forwardRef(function RichHeader(props, ref) {
               position: "absolute",
               width: "100%",
             },
-            ...TitleProps?.sx,
           },
+          ...TitleProps?.sx,
         }}
       />
       <RichText