Merge branch 'main' into fix/roboshield-errors

apps/charterafrica/contrib/dokku/Dockerfile

@@ -1 +1 @@
-FROM codeforafrica/charterafrica-ui:0.1.29
+FROM codeforafrica/charterafrica-ui:0.1.30

apps/charterafrica/package.json

@@ -1,6 +1,6 @@
 {
   "name": "charterafrica",
-  "version": "0.1.29",
+  "version": "0.1.30",
   "private": true,
   "author": "Code for Africa <[email protected]>",
   "description": "This is the official code for https://charter.africa site",

apps/charterafrica/src/components/Spotlight/Spotlight.js

@@ -73,7 +73,7 @@ const Spotlight = React.forwardRef(function Spotlight(props, ref) {
                     <CardMedia
                       alt={item.title}
                       component="img"
-                      src={item.image.src}
+                      src={item.image.url}
                       sx={{
                         height: {
                           xs: "auto",

apps/charterafrica/src/lib/data/common/processPageIndex.js

@@ -47,11 +47,12 @@ const processSpotlight = (page, api, context) => {
       const { item: itemData, ...rest } = item;
       return {
         ...rest,
+        category: rest?.category || null,
         item: {
           ...itemData,
           image: {
-            src: itemData.image.url,
             alt: itemData.image.alt,
+            url: itemData.image.url,
           },
           date: new Date(itemData.date).toLocaleDateString(locale, {
             year: "numeric",

apps/charterafrica/src/payload/collections/Media.js

@@ -19,6 +19,14 @@ const Media = {
       required: true,
     },
   ],
+  hooks: {
+    afterRead: [
+      ({ doc }) => ({
+        ...doc,
+        alt: doc.alt ?? null,
+      }),
+    ],
+  },
 };
 
 export default Media;

apps/climatemappedafrica/src/components/HURUmap/Location/index.js

@@ -1,12 +1,10 @@
-import { LocationTag } from "@hurumap/core";
+import { LocationTag, LocationHighlight } from "@hurumap/core";
 import { Box } from "@mui/material";
 import clsx from "clsx";
 import PropTypes from "prop-types";
 
 import useStyles from "./useStyles";
 
-import LocationHighlight from "@/climatemappedafrica/components/HURUmap/LocationHighlight";
-
 function Location({ className, highlights, isLoading, tags, ...props }) {
   const classes = useStyles(props);
 
@@ -53,11 +51,12 @@ function Location({ className, highlights, isLoading, tags, ...props }) {
               key={highlight.title}
               isLoading={isLoading}
               {...highlight}
-              classes={{
-                root: classes.highlight,
-                title: classes.highlightTitle,
-                value: classes.highlightValue,
-              }}
+              sx={(theme) => ({
+                paddingTop: "4.5px",
+                "&:not(:first-of-type)": {
+                  borderLeft: `1px solid ${theme.palette.grey.main}`,
+                },
+              })}
             />
           ))}
         </Box>

apps/climatemappedafrica/src/components/HURUmap/Location/useStyles.js

@@ -17,14 +17,6 @@ const useStyles = makeStyles(({ palette, typography }) => ({
     marginTop: 4.5,
     width: "100%",
   },
-  highlight: {
-    paddingTop: 4.5,
-    "&:not(:first-of-type)": {
-      borderLeft: `1px solid ${palette.grey.main}`,
-    },
-  },
-  highlightTitle: {},
-  highlightValue: {},
 }));
 
 export default useStyles;

apps/pesayetu/src/components/HURUmap/Location/index.js

@@ -1,12 +1,10 @@
-import { LocationTag } from "@hurumap/core";
+import { LocationTag, LocationHighlight } from "@hurumap/core";
 import { Box } from "@mui/material";
 import clsx from "clsx";
 import PropTypes from "prop-types";
 
 import useStyles from "./useStyles";
 
-import LocationHighlight from "@/pesayetu/components/HURUmap/LocationHighlight";
-
 function Location({ className, highlights, isLoading, tags, ...props }) {
   const classes = useStyles(props);
 
@@ -53,11 +51,12 @@ function Location({ className, highlights, isLoading, tags, ...props }) {
               key={highlight.title}
               isLoading={isLoading}
               {...highlight}
-              classes={{
-                root: classes.highlight,
-                title: classes.highlightTitle,
-                value: classes.highlightValue,
-              }}
+              sx={(theme) => ({
+                paddingTop: "4.5px",
+                "&:not(:first-of-type)": {
+                  borderLeft: `1px solid ${theme.palette.grey.main}`,
+                },
+              })}
             />
           ))}
         </Box>

apps/pesayetu/src/components/HURUmap/Location/useStyles.js

@@ -17,14 +17,6 @@ const useStyles = makeStyles(({ palette, typography }) => ({
     marginTop: 4.5,
     width: "100%",
   },
-  highlight: {
-    paddingTop: 4.5,
-    "&:not(:first-of-type)": {
-      borderLeft: `1px solid ${palette.grey.main}`,
-    },
-  },
-  highlightTitle: {},
-  highlightValue: {},
 }));
 
 export default useStyles;

apps/uibook/stories/HURUmap/core/LocationHighlight.stories.js

@@ -0,0 +1,39 @@
+import { LocationHighlight } from "@hurumap/core";
+import React from "react";
+
+const highlights = [
+  {
+    title: "Population",
+    value: "1,000,000",
+  },
+  {
+    title: "GDP",
+    value: "1,000,000",
+  },
+  {
+    title: "Area",
+    value: "1,000,000",
+  },
+];
+
+export default {
+  title: "@hurumap/core/LocationHighlight",
+  argTypes: {
+    isLoading: {
+      control: {
+        type: "boolean",
+      },
+    },
+  },
+};
+
+function Template({ ...args }) {
+  return <LocationHighlight {...args} />;
+}
+
+export const Default = Template.bind({});
+
+Default.args = {
+  isLoading: false,
+  ...highlights[0],
+};