From 893412a735c32651dd4f8391b679a7aa9a1589fa Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Tue, 16 Jul 2024 15:09:44 +0300 Subject: [PATCH 01/10] Basic Location Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> --- .../src/components/ExplorePage/index.js | 73 ++++++++++++++++++- 1 file changed, 69 insertions(+), 4 deletions(-) diff --git a/apps/pesayetu/src/components/ExplorePage/index.js b/apps/pesayetu/src/components/ExplorePage/index.js index 528b3140d..a2fdc4404 100644 --- a/apps/pesayetu/src/components/ExplorePage/index.js +++ b/apps/pesayetu/src/components/ExplorePage/index.js @@ -1,4 +1,6 @@ +import { LocationTag, LocationHighlight } from "@hurumap/core"; import { Box } from "@mui/material"; +import { alpha } from "@mui/material/styles"; import dynamic from "next/dynamic"; import { useRouter } from "next/router"; import PropTypes from "prop-types"; @@ -8,7 +10,6 @@ import useExplore from "./useExplore"; import useProfileGeography from "./useProfileGeography"; import useStyles from "./useStyles"; -import Location from "@/pesayetu/components/HURUmap/Location"; import Panel from "@/pesayetu/components/HURUmap/Panel"; const Map = dynamic(() => import("@/pesayetu/components/HURUmap/Map"), { @@ -134,12 +135,76 @@ function ExplorePage({ panelProps, profile: profileProp, ...props }) { {...props} className={classes.map} /> - + sx={(theme) => ({ + display: "none", + [theme.breakpoints.up("md")]: { + display: "flex", + flexDirection: "column", + alignItems: "center", + }, + left: 0, + margin: "0 auto", + position: "absolute", + right: 0, + top: theme.typography.pxToRem(52), + zIndex: theme.zIndex.appBar, + background: alpha("#FFFFFF", 0.9), // #FFFFFFE6 + borderRadius: theme.typography.pxToRem(5), + bottom: "auto", + boxShadow: `0px 3px 6px ${alpha("#000000", 0.16)}`, // #00000029 + padding: `${theme.typography.pxToRem(4.12)} ${theme.typography.pxToRem( + 19, + )} ${theme.typography.pxToRem(12)} ${theme.typography.pxToRem(21)}`, + width: theme.typography.pxToRem(600), + })} + > + + {tags.map((tag, index) => ( + ({ + "&:not(:first-of-type)": { + marginLeft: theme.typography.pxToRem(10), + }, + })} + /> + ))} + + {highlights?.length > 0 ? ( + ({ + borderTop: `1px solid ${theme.palette.grey.main}`, + marginTop: "4.5px", + width: "100%", + })} + > + {highlights.map((highlight) => ( + ({ + paddingTop: "4.5px", + "&:not(:first-of-type)": { + borderLeft: `1px solid ${theme.palette.grey.main}`, + }, + })} + /> + ))} + + ) : null} + Date: Tue, 16 Jul 2024 17:18:55 +0300 Subject: [PATCH 02/10] Remove Unused files --- .../src/components/ExplorePage/index.js | 76 +++++++++++-- .../src/components/ExplorePage/useStyles.js | 100 ++++++++---------- .../src/components/HURUmap/Location/index.js | 92 ---------------- .../HURUmap/Location/index.stories.js | 19 ---- .../components/HURUmap/Location/useStyles.js | 22 ---- .../src/components/ExplorePage/index.js | 3 - .../src/components/ExplorePage/useStyles.js | 100 ++++++++---------- .../src/components/HURUmap/Location/index.js | 92 ---------------- .../HURUmap/Location/index.stories.js | 19 ---- .../components/HURUmap/Location/useStyles.js | 22 ---- 10 files changed, 155 insertions(+), 390 deletions(-) delete mode 100644 apps/climatemappedafrica/src/components/HURUmap/Location/index.js delete mode 100644 apps/climatemappedafrica/src/components/HURUmap/Location/index.stories.js delete mode 100644 apps/climatemappedafrica/src/components/HURUmap/Location/useStyles.js delete mode 100644 apps/pesayetu/src/components/HURUmap/Location/index.js delete mode 100644 apps/pesayetu/src/components/HURUmap/Location/index.stories.js delete mode 100644 apps/pesayetu/src/components/HURUmap/Location/useStyles.js diff --git a/apps/climatemappedafrica/src/components/ExplorePage/index.js b/apps/climatemappedafrica/src/components/ExplorePage/index.js index 75dfaf025..a6f37308b 100644 --- a/apps/climatemappedafrica/src/components/ExplorePage/index.js +++ b/apps/climatemappedafrica/src/components/ExplorePage/index.js @@ -1,4 +1,6 @@ +import { LocationTag, LocationHighlight } from "@hurumap/core"; import { Box } from "@mui/material"; +import { alpha } from "@mui/material/styles"; import dynamic from "next/dynamic"; import { useRouter } from "next/router"; import PropTypes from "prop-types"; @@ -9,7 +11,6 @@ import { primaryGeoStyles, secondaryGeoStyles } from "./useLayerStyles"; import useProfileGeography from "./useProfileGeography"; import useStyles from "./useStyles"; -import Location from "@/climatemappedafrica/components/HURUmap/Location"; import Panel from "@/climatemappedafrica/components/HURUmap/Panel"; const Map = dynamic( @@ -140,12 +141,73 @@ function ExplorePage({ panelProps, profile: profileProp, ...props }) { {...props} className={classes.map} /> - + ({ + display: "none", + [theme.breakpoints.up("md")]: { + display: "flex", + flexDirection: "column", + alignItems: "center", + }, + left: 0, + margin: "0 auto", + position: "absolute", + right: 0, + top: theme.typography.pxToRem(52), + zIndex: theme.zIndex.appBar, + background: alpha("#FFFFFF", 0.9), // #FFFFFFE6 + borderRadius: theme.typography.pxToRem(5), + bottom: "auto", + boxShadow: `0px 3px 6px ${alpha("#000000", 0.16)}`, // #00000029 + padding: `${theme.typography.pxToRem(4.12)} ${theme.typography.pxToRem( + 19, + )} ${theme.typography.pxToRem(12)} ${theme.typography.pxToRem(21)}`, + width: theme.typography.pxToRem(600), + })} + > + + {tags.map((tag, index) => ( + ({ + "&:not(:first-of-type)": { + marginLeft: theme.typography.pxToRem(10), + }, + })} + /> + ))} + + {highlights?.length > 0 ? ( + ({ + borderTop: `1px solid ${theme.palette.grey.main}`, + marginTop: "4.5px", + width: "100%", + })} + > + {highlights.map((highlight) => ( + ({ + paddingTop: "4.5px", + "&:not(:first-of-type)": { + borderLeft: `1px solid ${theme.palette.grey.main}`, + }, + })} + /> + ))} + + ) : null} + ({ - root: { - position: "relative", - height: "calc(100vh - 88px)", - [breakpoints.up("lg")]: { - height: "calc(100vh - 110px)", - position: "fixed", - left: 0, - right: 0, - }, - "& .tooltipPop": { - background: palette.background.default, - boxShadow: "0px 3px 6px #00000029", - height: typography.pxToRem(36), - width: typography.pxToRem(88), - "& .level": { - background: palette.primary.main, - borderRadius: typography.pxToRem(4), - color: palette.text.secondary, - display: "flex", - fontSize: typography.pxToRem(7), - fontWeight: "bold", - height: typography.pxToRem(17), - justifyContent: "center", - lineHeight: 10 / 7, - margin: "0 auto", - marginTop: typography.pxToRem(-15), - paddingTop: typography.pxToRem(2), - textTransform: "uppercase", - width: typography.pxToRem(62), - }, - "& .name": { - textAlign: "center", - fontSize: typography.pxToRem(9), - fontWeight: "bold", - lineHeight: 13 / 9, - marginTop: typography.pxToRem(5), - textTransform: "capitalize", - }, - }, - }, - map: { - display: "none", - [breakpoints.up("md")]: { - display: "block", - }, +const useStyles = makeStyles(({ breakpoints, palette, typography }) => ({ + root: { + position: "relative", + height: "calc(100vh - 88px)", + [breakpoints.up("lg")]: { + height: "calc(100vh - 110px)", + position: "fixed", + left: 0, + right: 0, }, - location: { - display: "none", - [breakpoints.up("md")]: { + "& .tooltipPop": { + background: palette.background.default, + boxShadow: "0px 3px 6px #00000029", + height: typography.pxToRem(36), + width: typography.pxToRem(88), + "& .level": { + background: palette.primary.main, + borderRadius: typography.pxToRem(4), + color: palette.text.secondary, display: "flex", - left: 0, + fontSize: typography.pxToRem(7), + fontWeight: "bold", + height: typography.pxToRem(17), + justifyContent: "center", + lineHeight: 10 / 7, margin: "0 auto", - position: "absolute", - right: 0, - top: typography.pxToRem(52), - zIndex: zIndex.appBar, + marginTop: typography.pxToRem(-15), + paddingTop: typography.pxToRem(2), + textTransform: "uppercase", + width: typography.pxToRem(62), + }, + "& .name": { + textAlign: "center", + fontSize: typography.pxToRem(9), + fontWeight: "bold", + lineHeight: 13 / 9, + marginTop: typography.pxToRem(5), + textTransform: "capitalize", }, }, - }), -); + }, + map: { + display: "none", + [breakpoints.up("md")]: { + display: "block", + }, + }, +})); export default useStyles; diff --git a/apps/climatemappedafrica/src/components/HURUmap/Location/index.js b/apps/climatemappedafrica/src/components/HURUmap/Location/index.js deleted file mode 100644 index ba9a2fb0c..000000000 --- a/apps/climatemappedafrica/src/components/HURUmap/Location/index.js +++ /dev/null @@ -1,92 +0,0 @@ -import { LocationTag, LocationHighlight } from "@hurumap/core"; -import { Box } from "@mui/material"; -import clsx from "clsx"; -import PropTypes from "prop-types"; - -import useStyles from "./useStyles"; - -function Location({ className, highlights, isLoading, tags, ...props }) { - const classes = useStyles(props); - - if (!tags?.length) { - return null; - } - return ( - - - {tags.map((tag, index) => ( - ({ - "&:not(:first-of-type)": { - marginLeft: theme.typography.pxToRem(10), - }, - })} - /> - ))} - - {highlights?.length > 0 ? ( - - {highlights.map((highlight) => ( - ({ - paddingTop: "4.5px", - "&:not(:first-of-type)": { - borderLeft: `1px solid ${theme.palette.grey.main}`, - }, - })} - /> - ))} - - ) : null} - - ); -} - -Location.propTypes = { - className: PropTypes.string, - highlights: PropTypes.arrayOf( - PropTypes.shape({ - label: PropTypes.string, - number: PropTypes.number, - }), - ), - isLoading: PropTypes.bool, - tags: PropTypes.arrayOf( - PropTypes.shape({ - level: PropTypes.string, - name: PropTypes.string, - }), - ), -}; - -Location.defaultProps = { - className: undefined, - highlights: undefined, - isLoading: undefined, - tags: undefined, -}; - -export default Location; diff --git a/apps/climatemappedafrica/src/components/HURUmap/Location/index.stories.js b/apps/climatemappedafrica/src/components/HURUmap/Location/index.stories.js deleted file mode 100644 index 07603640b..000000000 --- a/apps/climatemappedafrica/src/components/HURUmap/Location/index.stories.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from "react"; - -import Location from "."; - -import { hurumapArgs } from "@/climatemappedafrica/config"; - -const { location } = hurumapArgs; - -export default { - title: "Components/HURUmap/Location", -}; - -function Template(args) { - return ; -} - -export const Default = Template.bind({}); - -Default.args = location; diff --git a/apps/climatemappedafrica/src/components/HURUmap/Location/useStyles.js b/apps/climatemappedafrica/src/components/HURUmap/Location/useStyles.js deleted file mode 100644 index e659b2925..000000000 --- a/apps/climatemappedafrica/src/components/HURUmap/Location/useStyles.js +++ /dev/null @@ -1,22 +0,0 @@ -import { alpha } from "@mui/material/styles"; -import makeStyles from "@mui/styles/makeStyles"; - -const useStyles = makeStyles(({ palette, typography }) => ({ - root: { - background: alpha("#FFFFFF", 0.9), // #FFFFFFE6 - borderRadius: typography.pxToRem(5), - bottom: "auto", - boxShadow: `0px 3px 6px ${alpha("#000000", 0.16)}`, // #00000029 - padding: `${typography.pxToRem(4.12)} ${typography.pxToRem( - 19, - )} ${typography.pxToRem(12)} ${typography.pxToRem(21)}`, - width: typography.pxToRem(600), - }, - highlights: { - borderTop: `1px solid ${palette.grey.main}`, - marginTop: 4.5, - width: "100%", - }, -})); - -export default useStyles; diff --git a/apps/pesayetu/src/components/ExplorePage/index.js b/apps/pesayetu/src/components/ExplorePage/index.js index a2fdc4404..51917897b 100644 --- a/apps/pesayetu/src/components/ExplorePage/index.js +++ b/apps/pesayetu/src/components/ExplorePage/index.js @@ -136,9 +136,6 @@ function ExplorePage({ panelProps, profile: profileProp, ...props }) { className={classes.map} /> ({ display: "none", [theme.breakpoints.up("md")]: { diff --git a/apps/pesayetu/src/components/ExplorePage/useStyles.js b/apps/pesayetu/src/components/ExplorePage/useStyles.js index 78b4f7e67..1f1febd38 100644 --- a/apps/pesayetu/src/components/ExplorePage/useStyles.js +++ b/apps/pesayetu/src/components/ExplorePage/useStyles.js @@ -1,66 +1,52 @@ import makeStyles from "@mui/styles/makeStyles"; -const useStyles = makeStyles( - ({ breakpoints, palette, typography, zIndex }) => ({ - root: { - position: "relative", - height: "calc(100vh - 88px)", - [breakpoints.up("lg")]: { - height: "calc(100vh - 110px)", - position: "fixed", - left: 0, - right: 0, - }, - "& .tooltipPop": { - background: palette.background.default, - boxShadow: "0px 3px 6px #00000029", - height: typography.pxToRem(36), - width: typography.pxToRem(88), - "& .level": { - background: palette.primary.main, - borderRadius: typography.pxToRem(4), - color: palette.text.secondary, - display: "flex", - fontSize: typography.pxToRem(7), - fontWeight: "bold", - height: typography.pxToRem(17), - justifyContent: "center", - lineHeight: 10 / 7, - margin: "0 auto", - marginTop: typography.pxToRem(-15), - paddingTop: typography.pxToRem(2), - textTransform: "uppercase", - width: typography.pxToRem(62), - }, - "& .name": { - textAlign: "center", - fontSize: typography.pxToRem(9), - fontWeight: "bold", - lineHeight: 13 / 9, - marginTop: typography.pxToRem(5), - textTransform: "capitalize", - }, - }, - }, - map: { - display: "none", - [breakpoints.up("md")]: { - display: "block", - }, +const useStyles = makeStyles(({ breakpoints, palette, typography }) => ({ + root: { + position: "relative", + height: "calc(100vh - 88px)", + [breakpoints.up("lg")]: { + height: "calc(100vh - 110px)", + position: "fixed", + left: 0, + right: 0, }, - location: { - display: "none", - [breakpoints.up("md")]: { + "& .tooltipPop": { + background: palette.background.default, + boxShadow: "0px 3px 6px #00000029", + height: typography.pxToRem(36), + width: typography.pxToRem(88), + "& .level": { + background: palette.primary.main, + borderRadius: typography.pxToRem(4), + color: palette.text.secondary, display: "flex", - left: 0, + fontSize: typography.pxToRem(7), + fontWeight: "bold", + height: typography.pxToRem(17), + justifyContent: "center", + lineHeight: 10 / 7, margin: "0 auto", - position: "absolute", - right: 0, - top: typography.pxToRem(52), - zIndex: zIndex.appBar, + marginTop: typography.pxToRem(-15), + paddingTop: typography.pxToRem(2), + textTransform: "uppercase", + width: typography.pxToRem(62), + }, + "& .name": { + textAlign: "center", + fontSize: typography.pxToRem(9), + fontWeight: "bold", + lineHeight: 13 / 9, + marginTop: typography.pxToRem(5), + textTransform: "capitalize", }, }, - }), -); + }, + map: { + display: "none", + [breakpoints.up("md")]: { + display: "block", + }, + }, +})); export default useStyles; diff --git a/apps/pesayetu/src/components/HURUmap/Location/index.js b/apps/pesayetu/src/components/HURUmap/Location/index.js deleted file mode 100644 index 4b181ea1b..000000000 --- a/apps/pesayetu/src/components/HURUmap/Location/index.js +++ /dev/null @@ -1,92 +0,0 @@ -import { LocationTag, LocationHighlight } from "@hurumap/core"; -import { Box } from "@mui/material"; -import clsx from "clsx"; -import PropTypes from "prop-types"; - -import useStyles from "./useStyles"; - -function Location({ className, highlights, isLoading, tags, ...props }) { - const classes = useStyles(props); - - if (!tags?.length) { - return null; - } - return ( - - - {tags.map((tag, index) => ( - ({ - "&:not(:first-of-type)": { - marginLeft: theme.typography.pxToRem(10), - }, - })} - /> - ))} - - {highlights?.length > 0 ? ( - - {highlights.map((highlight) => ( - ({ - paddingTop: "4.5px", - "&:not(:first-of-type)": { - borderLeft: `1px solid ${theme.palette.grey.main}`, - }, - })} - /> - ))} - - ) : null} - - ); -} - -Location.propTypes = { - className: PropTypes.string, - highlights: PropTypes.arrayOf( - PropTypes.shape({ - label: PropTypes.string, - number: PropTypes.number, - }), - ), - isLoading: PropTypes.bool, - tags: PropTypes.arrayOf( - PropTypes.shape({ - level: PropTypes.string, - name: PropTypes.string, - }), - ), -}; - -Location.defaultProps = { - className: undefined, - highlights: undefined, - isLoading: undefined, - tags: undefined, -}; - -export default Location; diff --git a/apps/pesayetu/src/components/HURUmap/Location/index.stories.js b/apps/pesayetu/src/components/HURUmap/Location/index.stories.js deleted file mode 100644 index ee0808c45..000000000 --- a/apps/pesayetu/src/components/HURUmap/Location/index.stories.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from "react"; - -import Location from "."; - -import { hurumapArgs } from "@/pesayetu/config"; - -const { location } = hurumapArgs; - -export default { - title: "HURUmap/Components/Location", -}; - -function Template(args) { - return ; -} - -export const Default = Template.bind({}); - -Default.args = location; diff --git a/apps/pesayetu/src/components/HURUmap/Location/useStyles.js b/apps/pesayetu/src/components/HURUmap/Location/useStyles.js deleted file mode 100644 index e659b2925..000000000 --- a/apps/pesayetu/src/components/HURUmap/Location/useStyles.js +++ /dev/null @@ -1,22 +0,0 @@ -import { alpha } from "@mui/material/styles"; -import makeStyles from "@mui/styles/makeStyles"; - -const useStyles = makeStyles(({ palette, typography }) => ({ - root: { - background: alpha("#FFFFFF", 0.9), // #FFFFFFE6 - borderRadius: typography.pxToRem(5), - bottom: "auto", - boxShadow: `0px 3px 6px ${alpha("#000000", 0.16)}`, // #00000029 - padding: `${typography.pxToRem(4.12)} ${typography.pxToRem( - 19, - )} ${typography.pxToRem(12)} ${typography.pxToRem(21)}`, - width: typography.pxToRem(600), - }, - highlights: { - borderTop: `1px solid ${palette.grey.main}`, - marginTop: 4.5, - width: "100%", - }, -})); - -export default useStyles; From 31e5aea881183b3fe2b5bc94711cf1a8149b00b3 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Thu, 18 Jul 2024 11:18:33 +0300 Subject: [PATCH 03/10] Revert Back to main Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> --- .../src/components/ExplorePage/index.js | 76 ++----------- .../src/components/ExplorePage/useStyles.js | 100 ++++++++++-------- .../src/components/HURUmap/Location/index.js | 92 ++++++++++++++++ .../HURUmap/Location/index.stories.js | 19 ++++ .../components/HURUmap/Location/useStyles.js | 22 ++++ .../src/components/ExplorePage/index.js | 76 ++----------- .../src/components/ExplorePage/useStyles.js | 100 ++++++++++-------- .../src/components/HURUmap/Location/index.js | 92 ++++++++++++++++ .../HURUmap/Location/index.stories.js | 19 ++++ .../components/HURUmap/Location/useStyles.js | 22 ++++ 10 files changed, 394 insertions(+), 224 deletions(-) create mode 100644 apps/climatemappedafrica/src/components/HURUmap/Location/index.js create mode 100644 apps/climatemappedafrica/src/components/HURUmap/Location/index.stories.js create mode 100644 apps/climatemappedafrica/src/components/HURUmap/Location/useStyles.js create mode 100644 apps/pesayetu/src/components/HURUmap/Location/index.js create mode 100644 apps/pesayetu/src/components/HURUmap/Location/index.stories.js create mode 100644 apps/pesayetu/src/components/HURUmap/Location/useStyles.js diff --git a/apps/climatemappedafrica/src/components/ExplorePage/index.js b/apps/climatemappedafrica/src/components/ExplorePage/index.js index a6f37308b..75dfaf025 100644 --- a/apps/climatemappedafrica/src/components/ExplorePage/index.js +++ b/apps/climatemappedafrica/src/components/ExplorePage/index.js @@ -1,6 +1,4 @@ -import { LocationTag, LocationHighlight } from "@hurumap/core"; import { Box } from "@mui/material"; -import { alpha } from "@mui/material/styles"; import dynamic from "next/dynamic"; import { useRouter } from "next/router"; import PropTypes from "prop-types"; @@ -11,6 +9,7 @@ import { primaryGeoStyles, secondaryGeoStyles } from "./useLayerStyles"; import useProfileGeography from "./useProfileGeography"; import useStyles from "./useStyles"; +import Location from "@/climatemappedafrica/components/HURUmap/Location"; import Panel from "@/climatemappedafrica/components/HURUmap/Panel"; const Map = dynamic( @@ -141,73 +140,12 @@ function ExplorePage({ panelProps, profile: profileProp, ...props }) { {...props} className={classes.map} /> - ({ - display: "none", - [theme.breakpoints.up("md")]: { - display: "flex", - flexDirection: "column", - alignItems: "center", - }, - left: 0, - margin: "0 auto", - position: "absolute", - right: 0, - top: theme.typography.pxToRem(52), - zIndex: theme.zIndex.appBar, - background: alpha("#FFFFFF", 0.9), // #FFFFFFE6 - borderRadius: theme.typography.pxToRem(5), - bottom: "auto", - boxShadow: `0px 3px 6px ${alpha("#000000", 0.16)}`, // #00000029 - padding: `${theme.typography.pxToRem(4.12)} ${theme.typography.pxToRem( - 19, - )} ${theme.typography.pxToRem(12)} ${theme.typography.pxToRem(21)}`, - width: theme.typography.pxToRem(600), - })} - > - - {tags.map((tag, index) => ( - ({ - "&:not(:first-of-type)": { - marginLeft: theme.typography.pxToRem(10), - }, - })} - /> - ))} - - {highlights?.length > 0 ? ( - ({ - borderTop: `1px solid ${theme.palette.grey.main}`, - marginTop: "4.5px", - width: "100%", - })} - > - {highlights.map((highlight) => ( - ({ - paddingTop: "4.5px", - "&:not(:first-of-type)": { - borderLeft: `1px solid ${theme.palette.grey.main}`, - }, - })} - /> - ))} - - ) : null} - + ({ - root: { - position: "relative", - height: "calc(100vh - 88px)", - [breakpoints.up("lg")]: { - height: "calc(100vh - 110px)", - position: "fixed", - left: 0, - right: 0, +const useStyles = makeStyles( + ({ breakpoints, palette, typography, zIndex }) => ({ + root: { + position: "relative", + height: "calc(100vh - 88px)", + [breakpoints.up("lg")]: { + height: "calc(100vh - 110px)", + position: "fixed", + left: 0, + right: 0, + }, + "& .tooltipPop": { + background: palette.background.default, + boxShadow: "0px 3px 6px #00000029", + height: typography.pxToRem(36), + width: typography.pxToRem(88), + "& .level": { + background: palette.primary.main, + borderRadius: typography.pxToRem(4), + color: palette.text.secondary, + display: "flex", + fontSize: typography.pxToRem(7), + fontWeight: "bold", + height: typography.pxToRem(17), + justifyContent: "center", + lineHeight: 10 / 7, + margin: "0 auto", + marginTop: typography.pxToRem(-15), + paddingTop: typography.pxToRem(2), + textTransform: "uppercase", + width: typography.pxToRem(62), + }, + "& .name": { + textAlign: "center", + fontSize: typography.pxToRem(9), + fontWeight: "bold", + lineHeight: 13 / 9, + marginTop: typography.pxToRem(5), + textTransform: "capitalize", + }, + }, + }, + map: { + display: "none", + [breakpoints.up("md")]: { + display: "block", + }, }, - "& .tooltipPop": { - background: palette.background.default, - boxShadow: "0px 3px 6px #00000029", - height: typography.pxToRem(36), - width: typography.pxToRem(88), - "& .level": { - background: palette.primary.main, - borderRadius: typography.pxToRem(4), - color: palette.text.secondary, + location: { + display: "none", + [breakpoints.up("md")]: { display: "flex", - fontSize: typography.pxToRem(7), - fontWeight: "bold", - height: typography.pxToRem(17), - justifyContent: "center", - lineHeight: 10 / 7, + left: 0, margin: "0 auto", - marginTop: typography.pxToRem(-15), - paddingTop: typography.pxToRem(2), - textTransform: "uppercase", - width: typography.pxToRem(62), - }, - "& .name": { - textAlign: "center", - fontSize: typography.pxToRem(9), - fontWeight: "bold", - lineHeight: 13 / 9, - marginTop: typography.pxToRem(5), - textTransform: "capitalize", + position: "absolute", + right: 0, + top: typography.pxToRem(52), + zIndex: zIndex.appBar, }, }, - }, - map: { - display: "none", - [breakpoints.up("md")]: { - display: "block", - }, - }, -})); + }), +); export default useStyles; diff --git a/apps/climatemappedafrica/src/components/HURUmap/Location/index.js b/apps/climatemappedafrica/src/components/HURUmap/Location/index.js new file mode 100644 index 000000000..ba9a2fb0c --- /dev/null +++ b/apps/climatemappedafrica/src/components/HURUmap/Location/index.js @@ -0,0 +1,92 @@ +import { LocationTag, LocationHighlight } from "@hurumap/core"; +import { Box } from "@mui/material"; +import clsx from "clsx"; +import PropTypes from "prop-types"; + +import useStyles from "./useStyles"; + +function Location({ className, highlights, isLoading, tags, ...props }) { + const classes = useStyles(props); + + if (!tags?.length) { + return null; + } + return ( + + + {tags.map((tag, index) => ( + ({ + "&:not(:first-of-type)": { + marginLeft: theme.typography.pxToRem(10), + }, + })} + /> + ))} + + {highlights?.length > 0 ? ( + + {highlights.map((highlight) => ( + ({ + paddingTop: "4.5px", + "&:not(:first-of-type)": { + borderLeft: `1px solid ${theme.palette.grey.main}`, + }, + })} + /> + ))} + + ) : null} + + ); +} + +Location.propTypes = { + className: PropTypes.string, + highlights: PropTypes.arrayOf( + PropTypes.shape({ + label: PropTypes.string, + number: PropTypes.number, + }), + ), + isLoading: PropTypes.bool, + tags: PropTypes.arrayOf( + PropTypes.shape({ + level: PropTypes.string, + name: PropTypes.string, + }), + ), +}; + +Location.defaultProps = { + className: undefined, + highlights: undefined, + isLoading: undefined, + tags: undefined, +}; + +export default Location; diff --git a/apps/climatemappedafrica/src/components/HURUmap/Location/index.stories.js b/apps/climatemappedafrica/src/components/HURUmap/Location/index.stories.js new file mode 100644 index 000000000..07603640b --- /dev/null +++ b/apps/climatemappedafrica/src/components/HURUmap/Location/index.stories.js @@ -0,0 +1,19 @@ +import React from "react"; + +import Location from "."; + +import { hurumapArgs } from "@/climatemappedafrica/config"; + +const { location } = hurumapArgs; + +export default { + title: "Components/HURUmap/Location", +}; + +function Template(args) { + return ; +} + +export const Default = Template.bind({}); + +Default.args = location; diff --git a/apps/climatemappedafrica/src/components/HURUmap/Location/useStyles.js b/apps/climatemappedafrica/src/components/HURUmap/Location/useStyles.js new file mode 100644 index 000000000..e659b2925 --- /dev/null +++ b/apps/climatemappedafrica/src/components/HURUmap/Location/useStyles.js @@ -0,0 +1,22 @@ +import { alpha } from "@mui/material/styles"; +import makeStyles from "@mui/styles/makeStyles"; + +const useStyles = makeStyles(({ palette, typography }) => ({ + root: { + background: alpha("#FFFFFF", 0.9), // #FFFFFFE6 + borderRadius: typography.pxToRem(5), + bottom: "auto", + boxShadow: `0px 3px 6px ${alpha("#000000", 0.16)}`, // #00000029 + padding: `${typography.pxToRem(4.12)} ${typography.pxToRem( + 19, + )} ${typography.pxToRem(12)} ${typography.pxToRem(21)}`, + width: typography.pxToRem(600), + }, + highlights: { + borderTop: `1px solid ${palette.grey.main}`, + marginTop: 4.5, + width: "100%", + }, +})); + +export default useStyles; diff --git a/apps/pesayetu/src/components/ExplorePage/index.js b/apps/pesayetu/src/components/ExplorePage/index.js index 51917897b..528b3140d 100644 --- a/apps/pesayetu/src/components/ExplorePage/index.js +++ b/apps/pesayetu/src/components/ExplorePage/index.js @@ -1,6 +1,4 @@ -import { LocationTag, LocationHighlight } from "@hurumap/core"; import { Box } from "@mui/material"; -import { alpha } from "@mui/material/styles"; import dynamic from "next/dynamic"; import { useRouter } from "next/router"; import PropTypes from "prop-types"; @@ -10,6 +8,7 @@ import useExplore from "./useExplore"; import useProfileGeography from "./useProfileGeography"; import useStyles from "./useStyles"; +import Location from "@/pesayetu/components/HURUmap/Location"; import Panel from "@/pesayetu/components/HURUmap/Panel"; const Map = dynamic(() => import("@/pesayetu/components/HURUmap/Map"), { @@ -135,73 +134,12 @@ function ExplorePage({ panelProps, profile: profileProp, ...props }) { {...props} className={classes.map} /> - ({ - display: "none", - [theme.breakpoints.up("md")]: { - display: "flex", - flexDirection: "column", - alignItems: "center", - }, - left: 0, - margin: "0 auto", - position: "absolute", - right: 0, - top: theme.typography.pxToRem(52), - zIndex: theme.zIndex.appBar, - background: alpha("#FFFFFF", 0.9), // #FFFFFFE6 - borderRadius: theme.typography.pxToRem(5), - bottom: "auto", - boxShadow: `0px 3px 6px ${alpha("#000000", 0.16)}`, // #00000029 - padding: `${theme.typography.pxToRem(4.12)} ${theme.typography.pxToRem( - 19, - )} ${theme.typography.pxToRem(12)} ${theme.typography.pxToRem(21)}`, - width: theme.typography.pxToRem(600), - })} - > - - {tags.map((tag, index) => ( - ({ - "&:not(:first-of-type)": { - marginLeft: theme.typography.pxToRem(10), - }, - })} - /> - ))} - - {highlights?.length > 0 ? ( - ({ - borderTop: `1px solid ${theme.palette.grey.main}`, - marginTop: "4.5px", - width: "100%", - })} - > - {highlights.map((highlight) => ( - ({ - paddingTop: "4.5px", - "&:not(:first-of-type)": { - borderLeft: `1px solid ${theme.palette.grey.main}`, - }, - })} - /> - ))} - - ) : null} - + ({ - root: { - position: "relative", - height: "calc(100vh - 88px)", - [breakpoints.up("lg")]: { - height: "calc(100vh - 110px)", - position: "fixed", - left: 0, - right: 0, +const useStyles = makeStyles( + ({ breakpoints, palette, typography, zIndex }) => ({ + root: { + position: "relative", + height: "calc(100vh - 88px)", + [breakpoints.up("lg")]: { + height: "calc(100vh - 110px)", + position: "fixed", + left: 0, + right: 0, + }, + "& .tooltipPop": { + background: palette.background.default, + boxShadow: "0px 3px 6px #00000029", + height: typography.pxToRem(36), + width: typography.pxToRem(88), + "& .level": { + background: palette.primary.main, + borderRadius: typography.pxToRem(4), + color: palette.text.secondary, + display: "flex", + fontSize: typography.pxToRem(7), + fontWeight: "bold", + height: typography.pxToRem(17), + justifyContent: "center", + lineHeight: 10 / 7, + margin: "0 auto", + marginTop: typography.pxToRem(-15), + paddingTop: typography.pxToRem(2), + textTransform: "uppercase", + width: typography.pxToRem(62), + }, + "& .name": { + textAlign: "center", + fontSize: typography.pxToRem(9), + fontWeight: "bold", + lineHeight: 13 / 9, + marginTop: typography.pxToRem(5), + textTransform: "capitalize", + }, + }, + }, + map: { + display: "none", + [breakpoints.up("md")]: { + display: "block", + }, }, - "& .tooltipPop": { - background: palette.background.default, - boxShadow: "0px 3px 6px #00000029", - height: typography.pxToRem(36), - width: typography.pxToRem(88), - "& .level": { - background: palette.primary.main, - borderRadius: typography.pxToRem(4), - color: palette.text.secondary, + location: { + display: "none", + [breakpoints.up("md")]: { display: "flex", - fontSize: typography.pxToRem(7), - fontWeight: "bold", - height: typography.pxToRem(17), - justifyContent: "center", - lineHeight: 10 / 7, + left: 0, margin: "0 auto", - marginTop: typography.pxToRem(-15), - paddingTop: typography.pxToRem(2), - textTransform: "uppercase", - width: typography.pxToRem(62), - }, - "& .name": { - textAlign: "center", - fontSize: typography.pxToRem(9), - fontWeight: "bold", - lineHeight: 13 / 9, - marginTop: typography.pxToRem(5), - textTransform: "capitalize", + position: "absolute", + right: 0, + top: typography.pxToRem(52), + zIndex: zIndex.appBar, }, }, - }, - map: { - display: "none", - [breakpoints.up("md")]: { - display: "block", - }, - }, -})); + }), +); export default useStyles; diff --git a/apps/pesayetu/src/components/HURUmap/Location/index.js b/apps/pesayetu/src/components/HURUmap/Location/index.js new file mode 100644 index 000000000..4b181ea1b --- /dev/null +++ b/apps/pesayetu/src/components/HURUmap/Location/index.js @@ -0,0 +1,92 @@ +import { LocationTag, LocationHighlight } from "@hurumap/core"; +import { Box } from "@mui/material"; +import clsx from "clsx"; +import PropTypes from "prop-types"; + +import useStyles from "./useStyles"; + +function Location({ className, highlights, isLoading, tags, ...props }) { + const classes = useStyles(props); + + if (!tags?.length) { + return null; + } + return ( + + + {tags.map((tag, index) => ( + ({ + "&:not(:first-of-type)": { + marginLeft: theme.typography.pxToRem(10), + }, + })} + /> + ))} + + {highlights?.length > 0 ? ( + + {highlights.map((highlight) => ( + ({ + paddingTop: "4.5px", + "&:not(:first-of-type)": { + borderLeft: `1px solid ${theme.palette.grey.main}`, + }, + })} + /> + ))} + + ) : null} + + ); +} + +Location.propTypes = { + className: PropTypes.string, + highlights: PropTypes.arrayOf( + PropTypes.shape({ + label: PropTypes.string, + number: PropTypes.number, + }), + ), + isLoading: PropTypes.bool, + tags: PropTypes.arrayOf( + PropTypes.shape({ + level: PropTypes.string, + name: PropTypes.string, + }), + ), +}; + +Location.defaultProps = { + className: undefined, + highlights: undefined, + isLoading: undefined, + tags: undefined, +}; + +export default Location; diff --git a/apps/pesayetu/src/components/HURUmap/Location/index.stories.js b/apps/pesayetu/src/components/HURUmap/Location/index.stories.js new file mode 100644 index 000000000..ee0808c45 --- /dev/null +++ b/apps/pesayetu/src/components/HURUmap/Location/index.stories.js @@ -0,0 +1,19 @@ +import React from "react"; + +import Location from "."; + +import { hurumapArgs } from "@/pesayetu/config"; + +const { location } = hurumapArgs; + +export default { + title: "HURUmap/Components/Location", +}; + +function Template(args) { + return ; +} + +export const Default = Template.bind({}); + +Default.args = location; diff --git a/apps/pesayetu/src/components/HURUmap/Location/useStyles.js b/apps/pesayetu/src/components/HURUmap/Location/useStyles.js new file mode 100644 index 000000000..e659b2925 --- /dev/null +++ b/apps/pesayetu/src/components/HURUmap/Location/useStyles.js @@ -0,0 +1,22 @@ +import { alpha } from "@mui/material/styles"; +import makeStyles from "@mui/styles/makeStyles"; + +const useStyles = makeStyles(({ palette, typography }) => ({ + root: { + background: alpha("#FFFFFF", 0.9), // #FFFFFFE6 + borderRadius: typography.pxToRem(5), + bottom: "auto", + boxShadow: `0px 3px 6px ${alpha("#000000", 0.16)}`, // #00000029 + padding: `${typography.pxToRem(4.12)} ${typography.pxToRem( + 19, + )} ${typography.pxToRem(12)} ${typography.pxToRem(21)}`, + width: typography.pxToRem(600), + }, + highlights: { + borderTop: `1px solid ${palette.grey.main}`, + marginTop: 4.5, + width: "100%", + }, +})); + +export default useStyles; From 3f3528b84d638b25453c325e0bcab78152e1571c Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Thu, 18 Jul 2024 12:10:37 +0300 Subject: [PATCH 04/10] Working Location --- .../src/components/ExplorePage/index.js | 31 +++++- .../src/components/ExplorePage/useStyles.js | 100 ++++++++---------- .../src/components/ExplorePage/index.js | 31 +++++- .../src/components/ExplorePage/useStyles.js | 100 ++++++++---------- .../hurumap-core/src/Location/Location.js | 88 +++++++++++++++ packages/hurumap-core/src/Location/index.js | 3 + packages/hurumap-core/src/index.js | 1 + 7 files changed, 236 insertions(+), 118 deletions(-) create mode 100644 packages/hurumap-core/src/Location/Location.js create mode 100644 packages/hurumap-core/src/Location/index.js diff --git a/apps/climatemappedafrica/src/components/ExplorePage/index.js b/apps/climatemappedafrica/src/components/ExplorePage/index.js index 75dfaf025..9c8d69579 100644 --- a/apps/climatemappedafrica/src/components/ExplorePage/index.js +++ b/apps/climatemappedafrica/src/components/ExplorePage/index.js @@ -1,3 +1,4 @@ +import { Location } from "@hurumap/core"; import { Box } from "@mui/material"; import dynamic from "next/dynamic"; import { useRouter } from "next/router"; @@ -9,8 +10,8 @@ import { primaryGeoStyles, secondaryGeoStyles } from "./useLayerStyles"; import useProfileGeography from "./useProfileGeography"; import useStyles from "./useStyles"; -import Location from "@/climatemappedafrica/components/HURUmap/Location"; import Panel from "@/climatemappedafrica/components/HURUmap/Panel"; +import theme from "@/climatemappedafrica/theme"; const Map = dynamic( () => import("@/climatemappedafrica/components/HURUmap/Map"), @@ -144,7 +145,33 @@ function ExplorePage({ panelProps, profile: profileProp, ...props }) { highlights={highlights} isLoading={isLoading} tags={tags} - className={classes.location} + LocationTagProps={{ + sx: { + "&:not(:first-of-type)": { + marginLeft: theme.typography.pxToRem(10), + }, + }, + }} + LocationHighlightProps={{ + sx: { + paddingTop: "4.5px", + "&:not(:first-of-type)": { + borderLeft: `1px solid ${theme.palette.grey.main}`, + }, + }, + }} + sx={{ + display: "none", + [theme.breakpoints.up("md")]: { + display: "flex", + left: 0, + margin: "0 auto", + position: "absolute", + right: 0, + top: theme.typography.pxToRem(52), + zIndex: theme.zIndex.appBar, + }, + }} /> diff --git a/apps/climatemappedafrica/src/components/ExplorePage/useStyles.js b/apps/climatemappedafrica/src/components/ExplorePage/useStyles.js index 78b4f7e67..1f1febd38 100644 --- a/apps/climatemappedafrica/src/components/ExplorePage/useStyles.js +++ b/apps/climatemappedafrica/src/components/ExplorePage/useStyles.js @@ -1,66 +1,52 @@ import makeStyles from "@mui/styles/makeStyles"; -const useStyles = makeStyles( - ({ breakpoints, palette, typography, zIndex }) => ({ - root: { - position: "relative", - height: "calc(100vh - 88px)", - [breakpoints.up("lg")]: { - height: "calc(100vh - 110px)", - position: "fixed", - left: 0, - right: 0, - }, - "& .tooltipPop": { - background: palette.background.default, - boxShadow: "0px 3px 6px #00000029", - height: typography.pxToRem(36), - width: typography.pxToRem(88), - "& .level": { - background: palette.primary.main, - borderRadius: typography.pxToRem(4), - color: palette.text.secondary, - display: "flex", - fontSize: typography.pxToRem(7), - fontWeight: "bold", - height: typography.pxToRem(17), - justifyContent: "center", - lineHeight: 10 / 7, - margin: "0 auto", - marginTop: typography.pxToRem(-15), - paddingTop: typography.pxToRem(2), - textTransform: "uppercase", - width: typography.pxToRem(62), - }, - "& .name": { - textAlign: "center", - fontSize: typography.pxToRem(9), - fontWeight: "bold", - lineHeight: 13 / 9, - marginTop: typography.pxToRem(5), - textTransform: "capitalize", - }, - }, - }, - map: { - display: "none", - [breakpoints.up("md")]: { - display: "block", - }, +const useStyles = makeStyles(({ breakpoints, palette, typography }) => ({ + root: { + position: "relative", + height: "calc(100vh - 88px)", + [breakpoints.up("lg")]: { + height: "calc(100vh - 110px)", + position: "fixed", + left: 0, + right: 0, }, - location: { - display: "none", - [breakpoints.up("md")]: { + "& .tooltipPop": { + background: palette.background.default, + boxShadow: "0px 3px 6px #00000029", + height: typography.pxToRem(36), + width: typography.pxToRem(88), + "& .level": { + background: palette.primary.main, + borderRadius: typography.pxToRem(4), + color: palette.text.secondary, display: "flex", - left: 0, + fontSize: typography.pxToRem(7), + fontWeight: "bold", + height: typography.pxToRem(17), + justifyContent: "center", + lineHeight: 10 / 7, margin: "0 auto", - position: "absolute", - right: 0, - top: typography.pxToRem(52), - zIndex: zIndex.appBar, + marginTop: typography.pxToRem(-15), + paddingTop: typography.pxToRem(2), + textTransform: "uppercase", + width: typography.pxToRem(62), + }, + "& .name": { + textAlign: "center", + fontSize: typography.pxToRem(9), + fontWeight: "bold", + lineHeight: 13 / 9, + marginTop: typography.pxToRem(5), + textTransform: "capitalize", }, }, - }), -); + }, + map: { + display: "none", + [breakpoints.up("md")]: { + display: "block", + }, + }, +})); export default useStyles; diff --git a/apps/pesayetu/src/components/ExplorePage/index.js b/apps/pesayetu/src/components/ExplorePage/index.js index 528b3140d..001cd4acf 100644 --- a/apps/pesayetu/src/components/ExplorePage/index.js +++ b/apps/pesayetu/src/components/ExplorePage/index.js @@ -1,3 +1,4 @@ +import { Location } from "@hurumap/core"; import { Box } from "@mui/material"; import dynamic from "next/dynamic"; import { useRouter } from "next/router"; @@ -8,8 +9,8 @@ import useExplore from "./useExplore"; import useProfileGeography from "./useProfileGeography"; import useStyles from "./useStyles"; -import Location from "@/pesayetu/components/HURUmap/Location"; import Panel from "@/pesayetu/components/HURUmap/Panel"; +import theme from "@/pesayetu/theme"; const Map = dynamic(() => import("@/pesayetu/components/HURUmap/Map"), { ssr: false, @@ -138,7 +139,33 @@ function ExplorePage({ panelProps, profile: profileProp, ...props }) { highlights={highlights} isLoading={isLoading} tags={tags} - className={classes.location} + LocationTagProps={{ + sx: { + "&:not(:first-of-type)": { + marginLeft: theme.typography.pxToRem(10), + }, + }, + }} + LocationHighlightProps={{ + sx: { + paddingTop: "4.5px", + "&:not(:first-of-type)": { + borderLeft: `1px solid ${theme.palette.grey.main}`, + }, + }, + }} + sx={{ + display: "none", + [theme.breakpoints.up("md")]: { + display: "flex", + left: 0, + margin: "0 auto", + position: "absolute", + right: 0, + top: theme.typography.pxToRem(52), + zIndex: theme.zIndex.appBar, + }, + }} /> diff --git a/apps/pesayetu/src/components/ExplorePage/useStyles.js b/apps/pesayetu/src/components/ExplorePage/useStyles.js index 78b4f7e67..1f1febd38 100644 --- a/apps/pesayetu/src/components/ExplorePage/useStyles.js +++ b/apps/pesayetu/src/components/ExplorePage/useStyles.js @@ -1,66 +1,52 @@ import makeStyles from "@mui/styles/makeStyles"; -const useStyles = makeStyles( - ({ breakpoints, palette, typography, zIndex }) => ({ - root: { - position: "relative", - height: "calc(100vh - 88px)", - [breakpoints.up("lg")]: { - height: "calc(100vh - 110px)", - position: "fixed", - left: 0, - right: 0, - }, - "& .tooltipPop": { - background: palette.background.default, - boxShadow: "0px 3px 6px #00000029", - height: typography.pxToRem(36), - width: typography.pxToRem(88), - "& .level": { - background: palette.primary.main, - borderRadius: typography.pxToRem(4), - color: palette.text.secondary, - display: "flex", - fontSize: typography.pxToRem(7), - fontWeight: "bold", - height: typography.pxToRem(17), - justifyContent: "center", - lineHeight: 10 / 7, - margin: "0 auto", - marginTop: typography.pxToRem(-15), - paddingTop: typography.pxToRem(2), - textTransform: "uppercase", - width: typography.pxToRem(62), - }, - "& .name": { - textAlign: "center", - fontSize: typography.pxToRem(9), - fontWeight: "bold", - lineHeight: 13 / 9, - marginTop: typography.pxToRem(5), - textTransform: "capitalize", - }, - }, - }, - map: { - display: "none", - [breakpoints.up("md")]: { - display: "block", - }, +const useStyles = makeStyles(({ breakpoints, palette, typography }) => ({ + root: { + position: "relative", + height: "calc(100vh - 88px)", + [breakpoints.up("lg")]: { + height: "calc(100vh - 110px)", + position: "fixed", + left: 0, + right: 0, }, - location: { - display: "none", - [breakpoints.up("md")]: { + "& .tooltipPop": { + background: palette.background.default, + boxShadow: "0px 3px 6px #00000029", + height: typography.pxToRem(36), + width: typography.pxToRem(88), + "& .level": { + background: palette.primary.main, + borderRadius: typography.pxToRem(4), + color: palette.text.secondary, display: "flex", - left: 0, + fontSize: typography.pxToRem(7), + fontWeight: "bold", + height: typography.pxToRem(17), + justifyContent: "center", + lineHeight: 10 / 7, margin: "0 auto", - position: "absolute", - right: 0, - top: typography.pxToRem(52), - zIndex: zIndex.appBar, + marginTop: typography.pxToRem(-15), + paddingTop: typography.pxToRem(2), + textTransform: "uppercase", + width: typography.pxToRem(62), + }, + "& .name": { + textAlign: "center", + fontSize: typography.pxToRem(9), + fontWeight: "bold", + lineHeight: 13 / 9, + marginTop: typography.pxToRem(5), + textTransform: "capitalize", }, }, - }), -); + }, + map: { + display: "none", + [breakpoints.up("md")]: { + display: "block", + }, + }, +})); export default useStyles; diff --git a/packages/hurumap-core/src/Location/Location.js b/packages/hurumap-core/src/Location/Location.js new file mode 100644 index 000000000..d5d9cc00a --- /dev/null +++ b/packages/hurumap-core/src/Location/Location.js @@ -0,0 +1,88 @@ +import { Box, styled } from "@mui/material"; +import { alpha } from "@mui/material/styles"; +import React from "react"; + +import LocationHighlight from "../LocationHighlight"; +import LocationTag from "../LocationTag"; + +const LocationRoot = styled(Box)(({ theme }) => { + const { typography } = theme; + + return { + background: alpha("#FFFFFF", 0.9), + borderRadius: typography.pxToRem(5), + bottom: "auto", + boxShadow: `0px 3px 6px ${alpha("#000000", 0.16)}`, + padding: `${typography.pxToRem(4.12)} ${typography.pxToRem(19)} ${typography.pxToRem(12)} ${typography.pxToRem(21)}`, + width: typography.pxToRem(600), + }; +}); + +const HighlightRoot = styled(Box)(({ theme }) => { + return { + borderTop: `1px solid ${theme.palette.grey.main}`, + marginTop: 4.5, + width: "100%", + }; +}); + +const Location = React.forwardRef(function Location( + { + HighlightRootProps, + LocationHighlightProps, + LocationTagProps, + LocationTagRootProps, + highlights, + isLoading, + tags, + ...props + }, + ref, +) { + return ( + + + {tags.map((tag, index) => ( + + ))} + + {highlights?.length > 0 ? ( + + {highlights.map((highlight) => ( + + ))} + + ) : null} + + ); +}); + +export default Location; diff --git a/packages/hurumap-core/src/Location/index.js b/packages/hurumap-core/src/Location/index.js new file mode 100644 index 000000000..946f173c3 --- /dev/null +++ b/packages/hurumap-core/src/Location/index.js @@ -0,0 +1,3 @@ +import Location from "./Location"; + +export default Location; diff --git a/packages/hurumap-core/src/index.js b/packages/hurumap-core/src/index.js index 881ae0422..3149c42c1 100644 --- a/packages/hurumap-core/src/index.js +++ b/packages/hurumap-core/src/index.js @@ -1,3 +1,4 @@ /* eslint-disable import/prefer-default-export */ export { default as LocationTag } from "./LocationTag"; export { default as LocationHighlight } from "./LocationHighlight"; +export { default as Location } from "./Location"; From b5d13e41da22661b660747162875f418ebbaf7a7 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Thu, 18 Jul 2024 12:36:53 +0300 Subject: [PATCH 05/10] Add test and storybook Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> --- .../stories/HURUmap/core/Location.stories.js | 50 ++++++++++++ .../src/Location/Location.snap.js | 76 +++++++++++++++++++ .../src/Location/Location.test.js | 37 +++++++++ 3 files changed, 163 insertions(+) create mode 100644 apps/uibook/stories/HURUmap/core/Location.stories.js create mode 100644 packages/hurumap-core/src/Location/Location.snap.js create mode 100644 packages/hurumap-core/src/Location/Location.test.js diff --git a/apps/uibook/stories/HURUmap/core/Location.stories.js b/apps/uibook/stories/HURUmap/core/Location.stories.js new file mode 100644 index 000000000..11c6d96ae --- /dev/null +++ b/apps/uibook/stories/HURUmap/core/Location.stories.js @@ -0,0 +1,50 @@ +import { Location } from "@hurumap/core"; +import React from "react"; + +export default { + title: "@hurumap/core/Location", + argTypes: { + highlights: { + control: { + type: "array", + }, + }, + tags: { + control: { + type: "array", + }, + }, + }, +}; + +function Template({ ...args }) { + return ; +} + +export const Default = Template.bind({}); + +Default.args = { + isLoading: false, + highlights: [ + { + title: "Population", + value: "10,000,000", + }, + { + title: "GDP", + value: "10,000,000", + }, + ], + tags: [ + { + href: "/explore", + level: "Country", + name: "Kenya", + }, + { + href: "/explore/county-11", + level: "County", + name: "Isiolo", + }, + ], +}; diff --git a/packages/hurumap-core/src/Location/Location.snap.js b/packages/hurumap-core/src/Location/Location.snap.js new file mode 100644 index 000000000..560c3cc3e --- /dev/null +++ b/packages/hurumap-core/src/Location/Location.snap.js @@ -0,0 +1,76 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Location renders unchanged 1`] = ` +
+
+
+
+
+ Country +
+ + Kenya + +
+
+
+ County +
+ + Isiolo + +
+
+
+
+
+ Population +
+

+ 10,000,000 +

+
+
+
+ GDP +
+

+ 10,000,000 +

+
+
+
+
+`; diff --git a/packages/hurumap-core/src/Location/Location.test.js b/packages/hurumap-core/src/Location/Location.test.js new file mode 100644 index 000000000..98bf79748 --- /dev/null +++ b/packages/hurumap-core/src/Location/Location.test.js @@ -0,0 +1,37 @@ +import { render } from "@commons-ui/testing-library"; +import React from "react"; + +import Location from "./Location"; + +const defaultProps = { + isLoading: false, + highlights: [ + { + title: "Population", + value: "10,000,000", + }, + { + title: "GDP", + value: "10,000,000", + }, + ], + tags: [ + { + href: "/explore", + level: "Country", + name: "Kenya", + }, + { + href: "/explore/county-11", + level: "County", + name: "Isiolo", + }, + ], +}; + +describe("Location", () => { + it("renders unchanged", () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); +}); From e76317e75ad31fab3c8145bd1d511e28f6c167f3 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Thu, 18 Jul 2024 12:38:07 +0300 Subject: [PATCH 06/10] Delete unused components --- .../src/components/HURUmap/Location/index.js | 92 ------------------- .../HURUmap/Location/index.stories.js | 19 ---- .../components/HURUmap/Location/useStyles.js | 22 ----- .../src/components/HURUmap/Location/index.js | 92 ------------------- .../HURUmap/Location/index.stories.js | 19 ---- .../components/HURUmap/Location/useStyles.js | 22 ----- 6 files changed, 266 deletions(-) delete mode 100644 apps/climatemappedafrica/src/components/HURUmap/Location/index.js delete mode 100644 apps/climatemappedafrica/src/components/HURUmap/Location/index.stories.js delete mode 100644 apps/climatemappedafrica/src/components/HURUmap/Location/useStyles.js delete mode 100644 apps/pesayetu/src/components/HURUmap/Location/index.js delete mode 100644 apps/pesayetu/src/components/HURUmap/Location/index.stories.js delete mode 100644 apps/pesayetu/src/components/HURUmap/Location/useStyles.js diff --git a/apps/climatemappedafrica/src/components/HURUmap/Location/index.js b/apps/climatemappedafrica/src/components/HURUmap/Location/index.js deleted file mode 100644 index ba9a2fb0c..000000000 --- a/apps/climatemappedafrica/src/components/HURUmap/Location/index.js +++ /dev/null @@ -1,92 +0,0 @@ -import { LocationTag, LocationHighlight } from "@hurumap/core"; -import { Box } from "@mui/material"; -import clsx from "clsx"; -import PropTypes from "prop-types"; - -import useStyles from "./useStyles"; - -function Location({ className, highlights, isLoading, tags, ...props }) { - const classes = useStyles(props); - - if (!tags?.length) { - return null; - } - return ( - - - {tags.map((tag, index) => ( - ({ - "&:not(:first-of-type)": { - marginLeft: theme.typography.pxToRem(10), - }, - })} - /> - ))} - - {highlights?.length > 0 ? ( - - {highlights.map((highlight) => ( - ({ - paddingTop: "4.5px", - "&:not(:first-of-type)": { - borderLeft: `1px solid ${theme.palette.grey.main}`, - }, - })} - /> - ))} - - ) : null} - - ); -} - -Location.propTypes = { - className: PropTypes.string, - highlights: PropTypes.arrayOf( - PropTypes.shape({ - label: PropTypes.string, - number: PropTypes.number, - }), - ), - isLoading: PropTypes.bool, - tags: PropTypes.arrayOf( - PropTypes.shape({ - level: PropTypes.string, - name: PropTypes.string, - }), - ), -}; - -Location.defaultProps = { - className: undefined, - highlights: undefined, - isLoading: undefined, - tags: undefined, -}; - -export default Location; diff --git a/apps/climatemappedafrica/src/components/HURUmap/Location/index.stories.js b/apps/climatemappedafrica/src/components/HURUmap/Location/index.stories.js deleted file mode 100644 index 07603640b..000000000 --- a/apps/climatemappedafrica/src/components/HURUmap/Location/index.stories.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from "react"; - -import Location from "."; - -import { hurumapArgs } from "@/climatemappedafrica/config"; - -const { location } = hurumapArgs; - -export default { - title: "Components/HURUmap/Location", -}; - -function Template(args) { - return ; -} - -export const Default = Template.bind({}); - -Default.args = location; diff --git a/apps/climatemappedafrica/src/components/HURUmap/Location/useStyles.js b/apps/climatemappedafrica/src/components/HURUmap/Location/useStyles.js deleted file mode 100644 index e659b2925..000000000 --- a/apps/climatemappedafrica/src/components/HURUmap/Location/useStyles.js +++ /dev/null @@ -1,22 +0,0 @@ -import { alpha } from "@mui/material/styles"; -import makeStyles from "@mui/styles/makeStyles"; - -const useStyles = makeStyles(({ palette, typography }) => ({ - root: { - background: alpha("#FFFFFF", 0.9), // #FFFFFFE6 - borderRadius: typography.pxToRem(5), - bottom: "auto", - boxShadow: `0px 3px 6px ${alpha("#000000", 0.16)}`, // #00000029 - padding: `${typography.pxToRem(4.12)} ${typography.pxToRem( - 19, - )} ${typography.pxToRem(12)} ${typography.pxToRem(21)}`, - width: typography.pxToRem(600), - }, - highlights: { - borderTop: `1px solid ${palette.grey.main}`, - marginTop: 4.5, - width: "100%", - }, -})); - -export default useStyles; diff --git a/apps/pesayetu/src/components/HURUmap/Location/index.js b/apps/pesayetu/src/components/HURUmap/Location/index.js deleted file mode 100644 index 4b181ea1b..000000000 --- a/apps/pesayetu/src/components/HURUmap/Location/index.js +++ /dev/null @@ -1,92 +0,0 @@ -import { LocationTag, LocationHighlight } from "@hurumap/core"; -import { Box } from "@mui/material"; -import clsx from "clsx"; -import PropTypes from "prop-types"; - -import useStyles from "./useStyles"; - -function Location({ className, highlights, isLoading, tags, ...props }) { - const classes = useStyles(props); - - if (!tags?.length) { - return null; - } - return ( - - - {tags.map((tag, index) => ( - ({ - "&:not(:first-of-type)": { - marginLeft: theme.typography.pxToRem(10), - }, - })} - /> - ))} - - {highlights?.length > 0 ? ( - - {highlights.map((highlight) => ( - ({ - paddingTop: "4.5px", - "&:not(:first-of-type)": { - borderLeft: `1px solid ${theme.palette.grey.main}`, - }, - })} - /> - ))} - - ) : null} - - ); -} - -Location.propTypes = { - className: PropTypes.string, - highlights: PropTypes.arrayOf( - PropTypes.shape({ - label: PropTypes.string, - number: PropTypes.number, - }), - ), - isLoading: PropTypes.bool, - tags: PropTypes.arrayOf( - PropTypes.shape({ - level: PropTypes.string, - name: PropTypes.string, - }), - ), -}; - -Location.defaultProps = { - className: undefined, - highlights: undefined, - isLoading: undefined, - tags: undefined, -}; - -export default Location; diff --git a/apps/pesayetu/src/components/HURUmap/Location/index.stories.js b/apps/pesayetu/src/components/HURUmap/Location/index.stories.js deleted file mode 100644 index ee0808c45..000000000 --- a/apps/pesayetu/src/components/HURUmap/Location/index.stories.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from "react"; - -import Location from "."; - -import { hurumapArgs } from "@/pesayetu/config"; - -const { location } = hurumapArgs; - -export default { - title: "HURUmap/Components/Location", -}; - -function Template(args) { - return ; -} - -export const Default = Template.bind({}); - -Default.args = location; diff --git a/apps/pesayetu/src/components/HURUmap/Location/useStyles.js b/apps/pesayetu/src/components/HURUmap/Location/useStyles.js deleted file mode 100644 index e659b2925..000000000 --- a/apps/pesayetu/src/components/HURUmap/Location/useStyles.js +++ /dev/null @@ -1,22 +0,0 @@ -import { alpha } from "@mui/material/styles"; -import makeStyles from "@mui/styles/makeStyles"; - -const useStyles = makeStyles(({ palette, typography }) => ({ - root: { - background: alpha("#FFFFFF", 0.9), // #FFFFFFE6 - borderRadius: typography.pxToRem(5), - bottom: "auto", - boxShadow: `0px 3px 6px ${alpha("#000000", 0.16)}`, // #00000029 - padding: `${typography.pxToRem(4.12)} ${typography.pxToRem( - 19, - )} ${typography.pxToRem(12)} ${typography.pxToRem(21)}`, - width: typography.pxToRem(600), - }, - highlights: { - borderTop: `1px solid ${palette.grey.main}`, - marginTop: 4.5, - width: "100%", - }, -})); - -export default useStyles; From d8b8ca6a1fa2962bdb59a8ad1ee72cbf841f9ea8 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Mon, 22 Jul 2024 15:15:51 +0300 Subject: [PATCH 07/10] PR fixes --- apps/climatemappedafrica/jsconfig.json | 6 ++++-- .../climatemappedafrica/src/components/ExplorePage/index.js | 4 ++-- apps/pesayetu/jsconfig.json | 2 ++ apps/pesayetu/src/components/ExplorePage/index.js | 4 ++-- packages/hurumap-core/jsconfig.json | 2 +- packages/hurumap-core/src/Location/Location.js | 4 ++-- 6 files changed, 13 insertions(+), 9 deletions(-) diff --git a/apps/climatemappedafrica/jsconfig.json b/apps/climatemappedafrica/jsconfig.json index 8db4bfdc8..aa87131a0 100644 --- a/apps/climatemappedafrica/jsconfig.json +++ b/apps/climatemappedafrica/jsconfig.json @@ -2,9 +2,11 @@ "compilerOptions": { "baseUrl": ".", "paths": { - "@/climatemappedafrica/*": ["./src/*"], "@/commons-ui/core/*": ["../../packages/commons-ui-core/src/*"], - "@/commons-ui/next/*": ["../../packages/commons-ui-next/src/*"] + "@/commons-ui/next/*": ["../../packages/commons-ui-next/src/*"], + "@/hurumap/core/*": ["../../packages/hurumap-core/src/*"], + "@/hurumap/next/*": ["../../packages/hurumap-next/src/*"], + "@/climatemappedafrica/*": ["./src/*"] } }, "exclude": ["node_modules"] diff --git a/apps/climatemappedafrica/src/components/ExplorePage/index.js b/apps/climatemappedafrica/src/components/ExplorePage/index.js index 9c8d69579..c867db80a 100644 --- a/apps/climatemappedafrica/src/components/ExplorePage/index.js +++ b/apps/climatemappedafrica/src/components/ExplorePage/index.js @@ -1,5 +1,5 @@ import { Location } from "@hurumap/core"; -import { Box } from "@mui/material"; +import { Box, useTheme } from "@mui/material"; import dynamic from "next/dynamic"; import { useRouter } from "next/router"; import PropTypes from "prop-types"; @@ -11,7 +11,6 @@ import useProfileGeography from "./useProfileGeography"; import useStyles from "./useStyles"; import Panel from "@/climatemappedafrica/components/HURUmap/Panel"; -import theme from "@/climatemappedafrica/theme"; const Map = dynamic( () => import("@/climatemappedafrica/components/HURUmap/Map"), @@ -31,6 +30,7 @@ function initialState(profiles, onClick) { } function ExplorePage({ panelProps, profile: profileProp, ...props }) { + const theme = useTheme(); const classes = useStyles(props); // NOTE: This setState and the corresponding useEffect are "hacks" since at // this point, useReducer hasn't been called yet so we can't use diff --git a/apps/pesayetu/jsconfig.json b/apps/pesayetu/jsconfig.json index a301d3100..479e1deda 100644 --- a/apps/pesayetu/jsconfig.json +++ b/apps/pesayetu/jsconfig.json @@ -4,6 +4,8 @@ "paths": { "@/commons-ui/core/*": ["../../packages/commons-ui-core/src/*"], "@/commons-ui/next/*": ["../../packages/commons-ui-next/src/*"], + "@/hurumap/core/*": ["../../packages/hurumap-core/src/*"], + "@/hurumap/next/*": ["../../packages/hurumap-next/src/*"], "@/pesayetu/*": ["./src/*"] } }, diff --git a/apps/pesayetu/src/components/ExplorePage/index.js b/apps/pesayetu/src/components/ExplorePage/index.js index 001cd4acf..a50183fba 100644 --- a/apps/pesayetu/src/components/ExplorePage/index.js +++ b/apps/pesayetu/src/components/ExplorePage/index.js @@ -1,5 +1,5 @@ import { Location } from "@hurumap/core"; -import { Box } from "@mui/material"; +import { Box, useTheme } from "@mui/material"; import dynamic from "next/dynamic"; import { useRouter } from "next/router"; import PropTypes from "prop-types"; @@ -10,7 +10,6 @@ import useProfileGeography from "./useProfileGeography"; import useStyles from "./useStyles"; import Panel from "@/pesayetu/components/HURUmap/Panel"; -import theme from "@/pesayetu/theme"; const Map = dynamic(() => import("@/pesayetu/components/HURUmap/Map"), { ssr: false, @@ -27,6 +26,7 @@ function initialState(profiles, onClick) { } function ExplorePage({ panelProps, profile: profileProp, ...props }) { + const theme = useTheme(); const classes = useStyles(props); // NOTE: This setState and the corresponding useEffect are "hacks" since at // this point, useReducer hasn't been called yet so we can't use diff --git a/packages/hurumap-core/jsconfig.json b/packages/hurumap-core/jsconfig.json index b3ec9724b..ca68d630c 100644 --- a/packages/hurumap-core/jsconfig.json +++ b/packages/hurumap-core/jsconfig.json @@ -2,7 +2,7 @@ "compilerOptions": { "baseUrl": ".", "paths": { - "@/hurumap/core/*": ["src/*"] + "@/hurumap/core/*": ["./src/*"] } }, "exclude": ["node_modules"] diff --git a/packages/hurumap-core/src/Location/Location.js b/packages/hurumap-core/src/Location/Location.js index d5d9cc00a..9f383ea55 100644 --- a/packages/hurumap-core/src/Location/Location.js +++ b/packages/hurumap-core/src/Location/Location.js @@ -2,8 +2,8 @@ import { Box, styled } from "@mui/material"; import { alpha } from "@mui/material/styles"; import React from "react"; -import LocationHighlight from "../LocationHighlight"; -import LocationTag from "../LocationTag"; +import LocationHighlight from "@/hurumap/core/LocationHighlight"; +import LocationTag from "@/hurumap/core/LocationTag"; const LocationRoot = styled(Box)(({ theme }) => { const { typography } = theme; From 7fa72ebf7f8d606fde9ea162cc2d67774614cc74 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Mon, 22 Jul 2024 15:47:23 +0300 Subject: [PATCH 08/10] Use Grid --- .../src/components/ExplorePage/index.js | 15 --- .../src/components/ExplorePage/index.js | 15 --- .../hurumap-core/src/Location/Location.js | 101 +++++++++--------- 3 files changed, 49 insertions(+), 82 deletions(-) diff --git a/apps/climatemappedafrica/src/components/ExplorePage/index.js b/apps/climatemappedafrica/src/components/ExplorePage/index.js index c867db80a..a1ea83bc7 100644 --- a/apps/climatemappedafrica/src/components/ExplorePage/index.js +++ b/apps/climatemappedafrica/src/components/ExplorePage/index.js @@ -145,21 +145,6 @@ function ExplorePage({ panelProps, profile: profileProp, ...props }) { highlights={highlights} isLoading={isLoading} tags={tags} - LocationTagProps={{ - sx: { - "&:not(:first-of-type)": { - marginLeft: theme.typography.pxToRem(10), - }, - }, - }} - LocationHighlightProps={{ - sx: { - paddingTop: "4.5px", - "&:not(:first-of-type)": { - borderLeft: `1px solid ${theme.palette.grey.main}`, - }, - }, - }} sx={{ display: "none", [theme.breakpoints.up("md")]: { diff --git a/apps/pesayetu/src/components/ExplorePage/index.js b/apps/pesayetu/src/components/ExplorePage/index.js index a50183fba..aa063f098 100644 --- a/apps/pesayetu/src/components/ExplorePage/index.js +++ b/apps/pesayetu/src/components/ExplorePage/index.js @@ -139,21 +139,6 @@ function ExplorePage({ panelProps, profile: profileProp, ...props }) { highlights={highlights} isLoading={isLoading} tags={tags} - LocationTagProps={{ - sx: { - "&:not(:first-of-type)": { - marginLeft: theme.typography.pxToRem(10), - }, - }, - }} - LocationHighlightProps={{ - sx: { - paddingTop: "4.5px", - "&:not(:first-of-type)": { - borderLeft: `1px solid ${theme.palette.grey.main}`, - }, - }, - }} sx={{ display: "none", [theme.breakpoints.up("md")]: { diff --git a/packages/hurumap-core/src/Location/Location.js b/packages/hurumap-core/src/Location/Location.js index 9f383ea55..1444c9013 100644 --- a/packages/hurumap-core/src/Location/Location.js +++ b/packages/hurumap-core/src/Location/Location.js @@ -1,11 +1,11 @@ -import { Box, styled } from "@mui/material"; +import { Box, Grid, styled, useTheme } from "@mui/material"; import { alpha } from "@mui/material/styles"; import React from "react"; import LocationHighlight from "@/hurumap/core/LocationHighlight"; import LocationTag from "@/hurumap/core/LocationTag"; -const LocationRoot = styled(Box)(({ theme }) => { +const LocationRoot = styled(Grid)(({ theme }) => { const { typography } = theme; return { @@ -27,60 +27,57 @@ const HighlightRoot = styled(Box)(({ theme }) => { }); const Location = React.forwardRef(function Location( - { - HighlightRootProps, - LocationHighlightProps, - LocationTagProps, - LocationTagRootProps, - highlights, - isLoading, - tags, - ...props - }, + { highlights, isLoading, tags, ...props }, ref, ) { + const theme = useTheme(); return ( - - - {tags.map((tag, index) => ( - - ))} - - {highlights?.length > 0 ? ( - - {highlights.map((highlight) => ( - + + + + {tags.map((tag, index) => ( + + + ))} - - ) : null} + + + + {highlights?.length > 0 ? ( + + {highlights.map((highlight) => ( + + ))} + + ) : null} + ); }); From 5eb757160ef8184c9678dcc6ca29a0ddf4faf127 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Mon, 22 Jul 2024 15:57:05 +0300 Subject: [PATCH 09/10] Update tests --- .../src/Location/Location.snap.js | 118 ++++++++++-------- 1 file changed, 67 insertions(+), 51 deletions(-) diff --git a/packages/hurumap-core/src/Location/Location.snap.js b/packages/hurumap-core/src/Location/Location.snap.js index 560c3cc3e..6a948febc 100644 --- a/packages/hurumap-core/src/Location/Location.snap.js +++ b/packages/hurumap-core/src/Location/Location.snap.js @@ -3,72 +3,88 @@ exports[`Location renders unchanged 1`] = `
-
- Country -
- +
+ Country +
+ + Kenya + +
+
+
- Kenya - -
-
-
- County -
- - Isiolo - +
+
+ County +
+ + Isiolo + +
+
-
- Population -
-

- 10,000,000 -

-
-
-
- GDP -
-

+ Population + +

+ 10,000,000 +

+
+
- 10,000,000 -

+
+ GDP +
+

+ 10,000,000 +

+
From e7a12a5c0521534029e66c5664494bd023aabdf8 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Mon, 22 Jul 2024 16:29:51 +0300 Subject: [PATCH 10/10] review fix Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> --- apps/climatemappedafrica/jsconfig.json | 4 +- packages/hurumap-core/jsconfig.json | 2 +- .../hurumap-core/src/Location/Location.js | 89 +++++++++---------- .../src/Location/Location.snap.js | 64 +++++++------ 4 files changed, 75 insertions(+), 84 deletions(-) diff --git a/apps/climatemappedafrica/jsconfig.json b/apps/climatemappedafrica/jsconfig.json index aa87131a0..d997fd29f 100644 --- a/apps/climatemappedafrica/jsconfig.json +++ b/apps/climatemappedafrica/jsconfig.json @@ -2,11 +2,11 @@ "compilerOptions": { "baseUrl": ".", "paths": { + "@/climatemappedafrica/*": ["./src/*"], "@/commons-ui/core/*": ["../../packages/commons-ui-core/src/*"], "@/commons-ui/next/*": ["../../packages/commons-ui-next/src/*"], "@/hurumap/core/*": ["../../packages/hurumap-core/src/*"], - "@/hurumap/next/*": ["../../packages/hurumap-next/src/*"], - "@/climatemappedafrica/*": ["./src/*"] + "@/hurumap/next/*": ["../../packages/hurumap-next/src/*"] } }, "exclude": ["node_modules"] diff --git a/packages/hurumap-core/jsconfig.json b/packages/hurumap-core/jsconfig.json index ca68d630c..b3ec9724b 100644 --- a/packages/hurumap-core/jsconfig.json +++ b/packages/hurumap-core/jsconfig.json @@ -2,7 +2,7 @@ "compilerOptions": { "baseUrl": ".", "paths": { - "@/hurumap/core/*": ["./src/*"] + "@/hurumap/core/*": ["src/*"] } }, "exclude": ["node_modules"] diff --git a/packages/hurumap-core/src/Location/Location.js b/packages/hurumap-core/src/Location/Location.js index 1444c9013..a9ecd95bb 100644 --- a/packages/hurumap-core/src/Location/Location.js +++ b/packages/hurumap-core/src/Location/Location.js @@ -1,66 +1,61 @@ -import { Box, Grid, styled, useTheme } from "@mui/material"; +import { Box, Grid, useTheme } from "@mui/material"; import { alpha } from "@mui/material/styles"; import React from "react"; import LocationHighlight from "@/hurumap/core/LocationHighlight"; import LocationTag from "@/hurumap/core/LocationTag"; -const LocationRoot = styled(Grid)(({ theme }) => { - const { typography } = theme; - - return { - background: alpha("#FFFFFF", 0.9), - borderRadius: typography.pxToRem(5), - bottom: "auto", - boxShadow: `0px 3px 6px ${alpha("#000000", 0.16)}`, - padding: `${typography.pxToRem(4.12)} ${typography.pxToRem(19)} ${typography.pxToRem(12)} ${typography.pxToRem(21)}`, - width: typography.pxToRem(600), - }; -}); - -const HighlightRoot = styled(Box)(({ theme }) => { - return { - borderTop: `1px solid ${theme.palette.grey.main}`, - marginTop: 4.5, - width: "100%", - }; -}); - const Location = React.forwardRef(function Location( { highlights, isLoading, tags, ...props }, ref, ) { const theme = useTheme(); return ( - - - - {tags.map((tag, index) => ( - - - - ))} - + + + {tags.map((tag, index) => ( + + + + ))} {highlights?.length > 0 ? ( - {highlights.map((highlight) => ( ))} - + ) : null} - + ); }); diff --git a/packages/hurumap-core/src/Location/Location.snap.js b/packages/hurumap-core/src/Location/Location.snap.js index 6a948febc..a31669970 100644 --- a/packages/hurumap-core/src/Location/Location.snap.js +++ b/packages/hurumap-core/src/Location/Location.snap.js @@ -3,51 +3,47 @@ exports[`Location renders unchanged 1`] = `
-
-
- Country -
- - Kenya - -
+ Country + + + Kenya +
+
+
-
+ County + + -
- County -
- - Isiolo - -
+ Isiolo +
@@ -55,7 +51,7 @@ exports[`Location renders unchanged 1`] = ` class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-1idn90j-MuiGrid-root" >