Merge branch 'main' into chore/climatemappedafrica_static_build

CodeForAfrica · Nov 4, 2024 · 927ee44 · 927ee44
2 parents 8d5cc62 + 1e2af03
commit 927ee44
Show file tree

Hide file tree

Showing 14 changed files with 164 additions and 106 deletions.
diff --git a/apps/climatemappedafrica/src/components/DropdownSearch/DownloadSearch.js b/apps/climatemappedafrica/src/components/DropdownSearch/DownloadSearch.js
@@ -16,7 +16,7 @@ import Link from "@/climatemappedafrica/components/Link";
 
 function DropdownSearch({
   href: hrefProp = "/explore",
-  label = "Search for a location",
+  label,
   locations,
   onClick,
   icon: IconProp = SearchIcon,
@@ -87,8 +87,8 @@ function DropdownSearch({
         component={iconComponent}
         viewBox="0 0 48 48"
         sx={{
-          width: 48,
-          height: 48,
+          width: 40,
+          height: 40,
           ...iconBorder,
         }}
       />
@@ -97,34 +97,35 @@ function DropdownSearch({
 
   return (
     <Box id="location-search">
-      <Typography
-        variant="body1"
-        sx={({ palette, typography }) => ({
-          color: palette.text.primary,
-          marginBottom: typography.pxToRem(10),
-        })}
-      >
-        {label}
-      </Typography>
+      {label && (
+        <Typography
+          variant="body1"
+          sx={({ palette, typography }) => ({
+            color: palette.text.primary,
+            marginBottom: typography.pxToRem(10),
+          })}
+        >
+          {label}
+        </Typography>
+      )}
       <InputBase
         inputProps={{ "aria-label": "search" }}
         onChange={handleChange}
         placeholder={placeholder}
         value={query}
-        {...props}
         sx={({ typography, palette }) => ({
           borderRadius: typography.pxToRem(10),
           color: palette.primary.main,
           border: `2px solid ${palette.text.hint}`,
           width: typography.pxToRem(278),
           backgroundColor: "inherit",
           height: typography.pxToRem(48),
-          padding: `0 ${typography.pxToRem(20)}`,
+          padding: 0,
           "&.MuiInputBase-input": {
             backgroundColor: "inherit",
             height: typography.pxToRem(48),
             borderRadius: typography.pxToRem(10),
-            padding: `0 ${typography.pxToRem(20)}`,
+            padding: 0,
             textTransform: "capitalize",
           },
           "&.Mui-focused": {

diff --git a/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js b/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js
@@ -12,7 +12,7 @@ exports[`<DropdownSearch /> renders unchanged 1`] = `
       Search for a location
     </p>
     <div
-      class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-78q71b-MuiInputBase-root"
+      class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-1f7prdq-MuiInputBase-root"
     >
       <input
         aria-label="search"
@@ -29,7 +29,7 @@ exports[`<DropdownSearch /> renders unchanged 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kzlhbf-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1ny0eu4-MuiSvgIcon-root"
           focusable="false"
           viewBox="0 0 48 48"
         />

diff --git a/apps/climatemappedafrica/src/components/ExplorePage/index.js b/apps/climatemappedafrica/src/components/ExplorePage/index.js
@@ -80,7 +80,10 @@ function ExplorePage({
   ]);
   useEffect(() => {
     if (geoCode) {
-      dispatch({ type: "fetch", payload: { code: geoCode } });
+      dispatch({
+        type: "fetch",
+        payload: { code: geoCode, onClick: handleClickTag },
+      });
     }
   }, [dispatch, geoCode]);
 
@@ -94,7 +97,7 @@ function ExplorePage({
     if (data) {
       dispatch({
         type: "show",
-        payload: { profile: data, options: { onClick: handleClickTag } },
+        payload: { profile: data, onClick: handleClickTag },
       });
     }
   }, [dispatch, data]);

diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.js b/apps/climatemappedafrica/src/components/Hero/Hero.js
@@ -22,18 +22,19 @@ function Hero({
   searchPlaceholder,
   properties,
   level,
+  explorePageSlug,
   ...props
 }) {
   const isUpLg = useMediaQuery((theme) => theme.breakpoints.up("lg"));
   const [hoverGeo, setHoverGeo] = useState(null);
-  const continentLevelZoom = isUpLg ? 2.4 : 2.1;
+  const continentLevelZoom = isUpLg ? 3 : 2.1; // We have to reduce the zoom level for continent so that all countries(Including islands) are visible within the designs
   const countryLevelZoom = isUpLg ? 6 : 5.25;
   const zoom = level === "continent" ? continentLevelZoom : countryLevelZoom;
-
   return (
     <Box
       sx={{
         position: "relative",
+        pb: 5,
       }}
     >
       <Box
@@ -53,7 +54,7 @@ function Hero({
         }}
       >
         <Grid container>
-          <Grid item xs={12} md={7} lg={6}>
+          <Grid item xs={12} md={6}>
             <RichHeader
               subtitle={subtitle}
               TitleProps={{
@@ -84,9 +85,9 @@ function Hero({
               {...props}
             />
             <RichTypography
-              variant="subtitle1"
+              variant="caption"
               sx={{
-                fontSize: "11px",
+                fontSize: { xs: "11px" },
                 color: "#707070",
                 marginTop: {
                   sm: "20px",
@@ -109,13 +110,14 @@ function Hero({
             <Grid item md={5}>
               {center ? (
                 <Map
-                  center={center.reverse?.()}
+                  center={[center[1], center[0]]}
                   zoom={zoom}
                   tileLayer={{
                     url: "https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png",
                   }}
                   onLayerMouseOver={setHoverGeo}
                   featuredLocations={featuredLocations}
+                  explorePageSlug={explorePageSlug}
                   {...props}
                 />
               ) : null}

diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.snap.js b/apps/climatemappedafrica/src/components/Hero/Hero.snap.js
@@ -3,7 +3,7 @@
 exports[`<Hero /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiBox-root css-79elbk"
+    class="MuiBox-root css-n1k24p"
   >
     <div
       class="MuiBox-root css-141q424"
@@ -23,7 +23,7 @@ exports[`<Hero /> renders unchanged 1`] = `
         class="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
       >
         <div
-          class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-7 MuiGrid-grid-lg-6 css-1totwg2-MuiGrid-root"
+          class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-18w5b2b-MuiGrid-root"
         >
           <header
             class="MuiBox-root css-0"
@@ -58,16 +58,11 @@ exports[`<Hero /> renders unchanged 1`] = `
               Search for a location
             </p>
             <div
-              blocktype="hero"
-              boundary="[object Object]"
-              class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-78q71b-MuiInputBase-root"
-              location="[object Object]"
-              slug="hero"
+              class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-1f7prdq-MuiInputBase-root"
             >
               <input
                 aria-label="search"
                 class="MuiInputBase-input MuiInputBase-inputAdornedEnd css-yz9k0d-MuiInputBase-input"
-                id="670e3996766697e7feb349d5"
                 placeholder="Search for a location"
                 type="text"
                 value=""
@@ -80,7 +75,7 @@ exports[`<Hero /> renders unchanged 1`] = `
               >
                 <svg
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kzlhbf-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1ny0eu4-MuiSvgIcon-root"
                   focusable="false"
                   viewBox="0 0 48 48"
                 />

diff --git a/apps/climatemappedafrica/src/components/Hero/Map.js b/apps/climatemappedafrica/src/components/Hero/Map.js
@@ -1,11 +1,10 @@
-import { Box } from "@mui/material";
+import { Box, useTheme } from "@mui/material";
 import { useRouter } from "next/router";
 import PropTypes from "prop-types";
 import React from "react";
 import { MapContainer, GeoJSON } from "react-leaflet";
 
 import "leaflet/dist/leaflet.css";
-import theme from "@/climatemappedafrica/theme";
 
 function Map({
   center,
@@ -19,16 +18,17 @@ function Map({
     color: "#2A2A2C",
     weight: 1,
     opacity: 1,
-    fillColor: "#fff",
     dashArray: "2",
   },
   onLayerMouseOver,
   featuredLocations,
+  explorePageSlug,
 }) {
   const router = useRouter();
 
   const countyCodes = featuredLocations?.map(({ code }) => code);
 
+  const theme = useTheme();
   const onEachFeature = (feature, layer) => {
     layer.setStyle({
       fillColor: theme.palette.background.default,
@@ -55,22 +55,24 @@ function Map({
         });
       });
       layer.on("click", () => {
-        router.push(`/explore/${feature.properties.code.toLowerCase()}`);
+        router.push(
+          `/${explorePageSlug}/${feature.properties.code.toLowerCase()}`,
+        );
       });
     }
   };
 
   return (
     <Box
-      sx={() => ({
+      sx={{
         position: "relative",
-        height: { sm: "299px", lg: "471px" },
-        width: { sm: "236px", lg: "371px" },
+        height: { sm: "350px", lg: "471px" },
+        width: { sm: "300px", lg: "500px" },
         marginTop: { sm: "55px", lg: "42px" },
         "& .leaflet-container": {
           background: "transparent",
         },
-      })}
+      }}
     >
       <MapContainer
         center={center}
@@ -114,6 +116,7 @@ Map.propTypes = {
   featuredLocations: PropTypes.arrayOf(
     PropTypes.shape({ code: PropTypes.string }),
   ),
+  explorePageSlug: PropTypes.string,
 };
 
 export default Map;
diff --git a/apps/climatemappedafrica/src/components/HowItWorks/index.js b/apps/climatemappedafrica/src/components/HowItWorks/index.js
@@ -56,7 +56,15 @@ function HowItWorks({
         })}
       />
       <Section classes={{ root: classes.section }}>
-        <Grid container direction={{ xs: "column-reverse", lg: "row" }}>
+        <Grid
+          container
+          direction={{
+            xs: "column-reverse",
+            md: "row",
+          }}
+          wrap="nowrap"
+          alignItems="center"
+        >
           <Grid
             item
             xs={12}
@@ -148,15 +156,14 @@ function HowItWorks({
           </Grid>
           <Grid item lg={1} />
           <Grid
+            container
             item
             xs={12}
             md={5}
-            sx={{
-              alignItems: "center",
-              justifyContent: {
-                xs: "center",
-                md: "flex-end",
-              },
+            alignItems="center"
+            justifyContent={{
+              xs: "center",
+              md: "flex-end",
             }}
           >
             <Box

diff --git a/apps/climatemappedafrica/src/components/Navigation/ExploreNavigation/index.js b/apps/climatemappedafrica/src/components/Navigation/ExploreNavigation/index.js
@@ -41,7 +41,7 @@ const useStyles = makeStyles(({ palette, typography }) => ({
   },
 }));
 
-function ExploreNavigation({ explorePagePath, logo, variant }) {
+function ExploreNavigation({ explorePagePath, locations, logo, variant }) {
   const classes = useStyles();
   const { setIsOpen } = useTour();
 
@@ -72,8 +72,9 @@ function ExploreNavigation({ explorePagePath, logo, variant }) {
             <DropdownSearch
               icon={SearchIcon}
               href={explorePagePath}
-              placeholder="Search for a Location" // TODO: Read from cms
+              placeholder="Search for a Location"
               variant={variant}
+              locations={locations}
               classes={{
                 inputRoot: classes.searchInputRoot,
                 input: classes.searchInput,