Merge pull request #980 from CodeForAfrica/ft/panel_items

Ft/panel_items
CodeForAfrica · Oct 31, 2024 · e65b4d1 · e65b4d1
2 parents 5fc2372 + 1cf7e6a
commit e65b4d1
Show file tree

Hide file tree

Showing 8 changed files with 96 additions and 64 deletions.
diff --git a/apps/climatemappedafrica/src/components/DropdownSearch/DownloadSearch.js b/apps/climatemappedafrica/src/components/DropdownSearch/DownloadSearch.js
@@ -111,7 +111,6 @@ function DropdownSearch({
         onChange={handleChange}
         placeholder={placeholder}
         value={query}
-        {...props}
         sx={({ typography, palette }) => ({
           borderRadius: typography.pxToRem(10),
           color: palette.primary.main,

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"
             >
               <input
                 aria-label="search"
                 class="MuiInputBase-input MuiInputBase-inputAdornedEnd css-yz9k0d-MuiInputBase-input"
-                id="670e3996766697e7feb349d5"
                 placeholder="Search for a location"
                 type="text"
                 value=""

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/lib/data/blockify/explore-page.js b/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js
@@ -6,6 +6,8 @@ import {
 async function explorePage({ block: { slugs }, hurumap }) {
   const {
     rootGeography,
+    labels: { dataNotAvailable, scrollToTop: scrollToTopLabel },
+    items: panelItems,
     page: { value },
   } = hurumap;
   const { code: name } = rootGeography;
@@ -33,48 +35,10 @@ async function explorePage({ block: { slugs }, hurumap }) {
     profile.push(secondaryProfile);
   }
 
-  // TODO: Move this to a PayloadCMS
   const panel = {
-    panelItems: [
-      {
-        value: "rich-data",
-        icon: "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2021/11/Group-4505.svg",
-        iconProps: {
-          src: "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2021/11/Group-4505.svg",
-          width: 44,
-          height: 44,
-          type: "svg",
-          blurDataURL:
-            "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGElEQVR4nGNgQAP/T///f/o/jHMWiQMHACIVCyeABSwfAAAAAElFTkSuQmCC",
-          placeholder: "blur",
-        },
-      },
-      {
-        value: "pin",
-        icon: "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2022/01/Path-210-1-1.svg",
-        pin: true,
-        iconProps: {
-          src: "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2022/01/Path-210-1-1.svg",
-          width: 44,
-          height: 44,
-          type: "svg",
-          blurDataURL:
-            "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAH0lEQVR4nGNgQAP/L/z/f/r//4P/wZzT//+fBbOQAQBvnQ3r6iVM4QAAAABJRU5ErkJggg==",
-          placeholder: "blur",
-        },
-      },
-    ],
-    scrollToTopLabel: "Back To Top",
-    dataNotAvailable: "— DATA NOT AVAILABLE",
-    lazyblock: {
-      slug: "lazyblock/panel",
-    },
-    align: "",
-    anchor: "",
-    blockId: "20amuc",
-    blockUniqueClass: "lazyblock-panel-20amuc",
-    ghostkitSpacings: "",
-    ghostkitSR: "",
+    panelItems,
+    scrollToTopLabel,
+    dataNotAvailable,
   };
   const res = {
     id: "explore-page",

diff --git a/apps/climatemappedafrica/src/lib/data/blockify/hero.js b/apps/climatemappedafrica/src/lib/data/blockify/hero.js
@@ -6,6 +6,9 @@ import {
 export default async function hero({ block, hurumap }) {
   const {
     rootGeography: { center, code, rootGeographyHasData: pinRootGeography },
+    page: {
+      value: { slug: explorePageSlug },
+    },
   } = hurumap;
   const { geometries } = await fetchProfileGeography(code.toLowerCase());
   const { level } = geometries.boundary?.properties ?? {};
@@ -32,5 +35,6 @@ export default async function hero({ block, hurumap }) {
     level,
     properties: geometries.boundary?.properties,
     pinRootGeography,
+    explorePageSlug,
   };
 }
diff --git a/apps/climatemappedafrica/src/payload/globals/HURUMap/PanelOptions.js b/apps/climatemappedafrica/src/payload/globals/HURUMap/PanelOptions.js
@@ -0,0 +1,64 @@
+import image from "../../fields/image";
+
+const PanelOptions = {
+  label: "Panel Options",
+  fields: [
+    {
+      name: "items",
+      type: "array",
+      label: "Panel Items",
+      fields: [
+        {
+          type: "select",
+          name: "value",
+          label: "Value",
+          options: [
+            { value: "rich-data", label: "Rich Data" },
+            { value: "pin", label: "Pin" },
+          ],
+          localized: true,
+        },
+        image({
+          overrides: {
+            name: "icon",
+            required: true,
+          },
+        }),
+      ],
+    },
+    {
+      type: "group",
+      label: "Labels",
+      name: "labels",
+      fields: [
+        {
+          type: "row",
+          fields: [
+            {
+              name: "scrollToTop",
+              type: "text",
+              label: "Scroll To Top",
+              defaultValue: "Scroll To Top",
+              admin: {
+                width: "50%",
+              },
+              localized: true,
+            },
+            {
+              name: "dataNotAvailable",
+              type: "text",
+              label: "Data Not Available",
+              defaultValue: "DATA NOT AVAILABLE",
+              admin: {
+                width: "50%",
+              },
+              localized: true,
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+
+export default PanelOptions;
diff --git a/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js b/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js
@@ -1,3 +1,4 @@
+import PanelOptions from "./PanelOptions";
 import Profile from "./Profile";
 import RootGeography from "./RootGeography";
 import Tutorial from "./Tutorial";
@@ -22,7 +23,7 @@ const HURUMap = {
     },
     {
       type: "tabs",
-      tabs: [Profile, RootGeography, Tutorial],
+      tabs: [Profile, RootGeography, Tutorial, PanelOptions],
       admin: {
         condition: (_, siblingData) => !!siblingData?.enableHURUMap,
       },