Merge pull request #941 from CodeForAfrica/ft/climatemapped_hero

@/Climatemappedafrica Hero Section
CodeForAfrica · Oct 22, 2024 · 571178b · 571178b
2 parents 946c931 + 8957bd4
commit 571178b
Show file tree

Hide file tree

Showing 18 changed files with 699 additions and 2 deletions.
diff --git a/apps/climatemappedafrica/package.json b/apps/climatemappedafrica/package.json
@@ -78,6 +78,7 @@
     "react-vega": "catalog:",
     "sharp": "catalog:",
     "simplebar-react": "catalog:",
+    "slate": "catalog:",
     "swr": "catalog:",
     "vega": "catalog:",
     "vega-embed": "catalog:",

diff --git a/apps/climatemappedafrica/public/images/cms/blocks/hero.png b/apps/climatemappedafrica/public/images/cms/blocks/hero.png
diff --git a/apps/climatemappedafrica/src/assets/images/bg-map-white.jpg b/apps/climatemappedafrica/src/assets/images/bg-map-white.jpg
diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.js b/apps/climatemappedafrica/src/components/Hero/Hero.js
@@ -0,0 +1,163 @@
+import { RichTypography } from "@commons-ui/core";
+import { Box, Grid, useMediaQuery } from "@mui/material";
+import dynamic from "next/dynamic";
+import PropTypes from "prop-types";
+import React, { useState } from "react";
+
+import heroBg from "@/climatemappedafrica/assets/images/bg-map-white.jpg";
+import DropdownSearch from "@/climatemappedafrica/components/DropdownSearch";
+import Image from "@/climatemappedafrica/components/Image";
+import RichHeader from "@/climatemappedafrica/components/RichHeader";
+import Section from "@/climatemappedafrica/components/Section";
+
+const Map = dynamic(() => import("./Map"), { ssr: false });
+
+function Hero({
+  comment,
+  title,
+  subtitle,
+  searchLabel,
+  featuredLocations,
+  searchPlaceholder,
+  properties,
+  location: { center },
+  level,
+  ...props
+}) {
+  const isUpLg = useMediaQuery((theme) => theme.breakpoints.up("lg"));
+  const [hoverGeo, setHoverGeo] = useState(null);
+  const continentLevelZoom = isUpLg ? 2.4 : 2.1;
+  const countryLevelZoom = isUpLg ? 6 : 5.25;
+  const zoom = level === "continent" ? continentLevelZoom : countryLevelZoom;
+
+  return (
+    <Box
+      sx={{
+        position: "relative",
+      }}
+    >
+      <Box
+        sx={{
+          position: "absolute",
+          zIndex: -1,
+          width: "100%",
+          height: { xs: "468px", md: "456px", lg: "600px" },
+        }}
+      >
+        <Image src={heroBg} layout="fill" unoptimized />
+      </Box>
+      <Section
+        sx={{
+          paddingBottom: { xs: "40px", md: "22px", lg: "22px" },
+        }}
+      >
+        <Grid container>
+          <Grid
+            sx={{
+              display: {
+                xs: "none",
+                md: "block",
+              },
+            }}
+            item
+            lg={1}
+          />
+          <Grid item xs={12} md={7} lg={6}>
+            <RichHeader
+              subtitle={subtitle}
+              TitleProps={{
+                sx: {
+                  marginTop: { xs: "40px", md: "46px", lg: "65px" },
+                },
+              }}
+              SubtitleProps={{
+                sx: {
+                  margin: {
+                    xs: `20px 0`,
+                    lg: `40px 0`,
+                  },
+                  maxWidth: {
+                    md: "335px",
+                    lg: "474px",
+                  },
+                },
+              }}
+            >
+              {title}
+            </RichHeader>
+            <DropdownSearch
+              label={searchLabel}
+              locations={featuredLocations}
+              placeholder={searchPlaceholder}
+              {...props}
+            />
+            <RichTypography
+              variant="subtitle1"
+              sx={{
+                fontSize: "11px",
+                color: "#707070",
+                marginTop: {
+                  sm: "20px",
+                  xs: "40px",
+                },
+              }}
+            >
+              {comment}
+            </RichTypography>
+          </Grid>
+          {/* Since map is dynamic-ally loaded, no need for implementation="css" */}
+          <Box
+            sx={{
+              display: {
+                xs: "none",
+                md: "block",
+              },
+            }}
+          >
+            <Grid item md={5}>
+              {center ? (
+                <Map
+                  center={center.reverse?.()}
+                  zoom={zoom}
+                  tileLayer={{
+                    url: "https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png",
+                  }}
+                  onLayerMouseOver={setHoverGeo}
+                  featuredLocations={featuredLocations}
+                  {...props}
+                />
+              ) : null}
+              <Box sx={{ height: 80 }}>
+                <RichTypography
+                  variant="h6"
+                  sx={{
+                    lineHeight: 23 / 18,
+                    lineSpacing: "0.9px",
+                    fontWeight: "normal",
+                    textTransform: "capitalize",
+                    display: "flex",
+                    justifyContent: "flex-end",
+                  }}
+                >
+                  {hoverGeo}
+                </RichTypography>
+              </Box>
+            </Grid>
+          </Box>
+        </Grid>
+      </Section>
+    </Box>
+  );
+}
+
+Hero.propTypes = {
+  comment: PropTypes.string,
+  subtitle: PropTypes.arrayOf(PropTypes.shape({})),
+  searchLabel: PropTypes.string,
+  title: PropTypes.string,
+  featuredLocations: PropTypes.arrayOf(PropTypes.shape({})),
+  properties: PropTypes.shape({}),
+  level: PropTypes.string,
+};
+
+export default Hero;
diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.snap.js b/apps/climatemappedafrica/src/components/Hero/Hero.snap.js
@@ -0,0 +1,113 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Hero /> renders unchanged 1`] = `
+<div>
+  <div
+    class="MuiBox-root css-79elbk"
+  >
+    <div
+      class="MuiBox-root css-141q424"
+    >
+      <img
+        data-nimg="fill"
+        decoding="async"
+        loading="lazy"
+        src="/url"
+        style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; right: 0px; bottom: 0px; color: transparent;"
+      />
+    </div>
+    <div
+      class="makeStyles-root-5 makeStyles-root-3 makeStyles-root-1 makeStyles-fixed-2 MuiBox-root css-ihladk"
+    >
+      <div
+        class="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
+      >
+        <div
+          class="MuiGrid-root MuiGrid-item MuiGrid-grid-lg-1 css-1jqjbj5-MuiGrid-root"
+        />
+        <div
+          class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-7 MuiGrid-grid-lg-6 css-1totwg2-MuiGrid-root"
+        >
+          <header
+            class="MuiBox-root css-0"
+          >
+            <div
+              class="MuiBox-root css-pps1ft"
+            >
+              <h1
+                class="MuiTypography-root MuiTypography-h1 css-qt60le-MuiTypography-root"
+              >
+                Data to hold your government accountable
+              </h1>
+            </div>
+            <div
+              class="MuiBox-root css-1733xbc"
+            >
+              <h6
+                class="MuiTypography-root MuiTypography-subtitle1 css-1d1ipbv-MuiTypography-root"
+              >
+                PesaYetu helps journalists, researchers and activists transform their work with in-depth county-specific information. Get started now with datasets from Kenya.
+
+              </h6>
+            </div>
+          </header>
+          <div
+            class="makeStyles-root-7"
+            id="location-search"
+          >
+            <p
+              class="MuiTypography-root MuiTypography-body1 makeStyles-label-10 css-6hq4le-MuiTypography-root"
+            >
+              Search for a location
+            </p>
+            <div
+              blocktype="hero"
+              boundary="[object Object]"
+              class="MuiInputBase-root makeStyles-inputRoot-8 MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-1illudf-MuiInputBase-root"
+              slug="hero"
+            >
+              <input
+                aria-label="search"
+                class="MuiInputBase-input makeStyles-input-12 MuiInputBase-inputAdornedEnd css-yz9k0d-MuiInputBase-input"
+                id="670e3996766697e7feb349d5"
+                placeholder="Search for a location"
+                type="text"
+                value=""
+              />
+              <button
+                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeSmall makeStyles-button-11 css-13dk0vd-MuiButtonBase-root-MuiIconButton-root"
+                tabindex="0"
+                type="button"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kzlhbf-MuiSvgIcon-root"
+                  focusable="false"
+                  viewBox="0 0 48 48"
+                />
+                <span
+                  class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                />
+              </button>
+            </div>
+            <div
+              class="makeStyles-suggestions-13"
+            />
+          </div>
+        </div>
+        <div
+          class="MuiBox-root css-h9r63z"
+        >
+          <div
+            class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-5 css-1f9gci5-MuiGrid-root"
+          >
+            <div
+              class="MuiBox-root css-4tnojn"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.test.js b/apps/climatemappedafrica/src/components/Hero/Hero.test.js
@@ -0,0 +1,58 @@
+import { createRender } from "@commons-ui/testing-library";
+import React from "react";
+
+import Hero from "./Hero";
+
+import theme from "@/climatemappedafrica/theme";
+
+// eslint-disable-next-line testing-library/render-result-naming-convention
+const render = createRender({ theme });
+
+const defaultProps = {
+  title: [
+    {
+      children: [
+        { text: "Data to hold your government accountable", children: null },
+      ],
+    },
+  ],
+  subtitle: [
+    {
+      children: [
+        {
+          text: "PesaYetu helps journalists, researchers and activists transform their work with in-depth county-specific information. Get started now with datasets from Kenya.\n",
+          children: null,
+        },
+      ],
+    },
+  ],
+  searchLabel: "Search for a location",
+  featuredLocations: [],
+  searchPlaceholder: "Search for a location",
+  properties: {
+    code: "KE",
+    name: "Kenya",
+    area: 586002.515,
+    parent: "AF",
+    level: "country",
+    version: "Climate",
+  },
+  location: {},
+  level: "country",
+  id: "670e3996766697e7feb349d5",
+  blockType: "hero",
+  slug: "hero",
+  boundary: {
+    type: "FeatureCollection",
+    features: [],
+  },
+  variant: "explore",
+  icon: null,
+};
+
+describe("<Hero />", () => {
+  it("renders unchanged", () => {
+    const { container } = render(<Hero {...defaultProps} />);
+    expect(container).toMatchSnapshot();
+  });
+});