Merge pull request #781 from CodeForAfrica/ft/hurumap-location-highlight

HURUmap Location Highlight

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],
+};

packages/hurumap-core/src/LocationHighlight/LocationHighlight.js

@@ -0,0 +1,44 @@
+import { Box, Typography } from "@mui/material";
+import React from "react";
+
+const LocationHighlight = React.forwardRef(function LocationHighlight(
+  {
+    TitleTypographyProps,
+    ValueTypographyProps,
+    title,
+    value,
+    isLoading,
+    ...props
+  },
+  ref,
+) {
+  return (
+    <Box
+      alignItems="center"
+      display="inline-flex"
+      flexDirection="column"
+      flexGrow={1}
+      ref={ref}
+      {...props}
+    >
+      <Typography
+        variant="subtitle1"
+        {...TitleTypographyProps}
+        sx={(theme) => ({
+          fontSize: theme.typography.pxToRem(10),
+          fontWeight: 300,
+          lineHeight: 24 / 10,
+          textTransform: "uppercase",
+          ...TitleTypographyProps?.sx,
+        })}
+      >
+        {title}
+      </Typography>
+      <Typography variant="body2" {...ValueTypographyProps}>
+        {isLoading ? "…" : value}
+      </Typography>
+    </Box>
+  );
+});
+
+export default LocationHighlight;

packages/hurumap-core/src/LocationHighlight/LocationHighlight.snap.js

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LocationHighlight renders unchanged 1`] = `
+<div>
+  <div
+    class="MuiBox-root css-1s0xv82"
+  >
+    <h6
+      class="MuiTypography-root MuiTypography-subtitle1 css-luofes-MuiTypography-root"
+    >
+      Population
+    </h6>
+    <p
+      class="MuiTypography-root MuiTypography-body2 css-e784if-MuiTypography-root"
+    >
+      1,000,000
+    </p>
+  </div>
+</div>
+`;