From e24170183d862a478ed5f962b12c43d0d5cb2a0a Mon Sep 17 00:00:00 2001 From: Clemence Kyara Date: Tue, 22 Oct 2024 16:01:42 +0300 Subject: [PATCH 1/5] Improve Legend --- .../hurumap-core/src/Location/Location.js | 32 +++---- .../src/Location/Location.snap.js | 14 +-- .../src/LocationTag/LocationTag.js | 7 +- .../src/LocationTag/LocationTag.snap.js | 6 +- packages/hurumap-next/src/Map/Legend.js | 89 ++++++++++--------- 5 files changed, 79 insertions(+), 69 deletions(-) diff --git a/packages/hurumap-core/src/Location/Location.js b/packages/hurumap-core/src/Location/Location.js index a9ecd95bb..27afbd4e9 100644 --- a/packages/hurumap-core/src/Location/Location.js +++ b/packages/hurumap-core/src/Location/Location.js @@ -1,40 +1,40 @@ -import { Box, Grid, useTheme } from "@mui/material"; +import { Box, Grid } 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 Location = React.forwardRef(function Location( - { highlights, isLoading, tags, ...props }, - ref, -) { - const theme = useTheme(); +const Location = React.forwardRef(function Location(props, ref) { + const { highlights, isLoading, tags, ...others } = props; + return ( ({ + background: alpha(theme.palette.background.default, 0.9), + // match zoom control border color + border: "1px solid #ccc", borderRadius: theme.typography.pxToRem(5), bottom: "auto", boxShadow: `0px 3px 6px ${alpha("#000000", 0.16)}`, padding: `${theme.typography.pxToRem(4.12)} ${theme.typography.pxToRem(19)} ${theme.typography.pxToRem(12)} ${theme.typography.pxToRem(21)}`, width: theme.typography.pxToRem(600), ...props.sx, - }} + })} > {tags.map((tag, index) => ( ({ "&:not(:first-of-type)": { marginLeft: theme.typography.pxToRem(10), }, - }} + })} > ({ borderTop: `1px solid ${theme.palette.grey.main}`, marginTop: 4.5, width: "100%", - }} + })} > {highlights.map((highlight) => ( ({ paddingTop: "4.5px", "&:not(:first-of-type)": { borderLeft: `1px solid ${theme.palette.grey.main}`, }, - }} + })} /> ))} diff --git a/packages/hurumap-core/src/Location/Location.snap.js b/packages/hurumap-core/src/Location/Location.snap.js index 3b5a9b795..c0848f77a 100644 --- a/packages/hurumap-core/src/Location/Location.snap.js +++ b/packages/hurumap-core/src/Location/Location.snap.js @@ -3,7 +3,7 @@ exports[`Location renders unchanged 1`] = `
Country
Kenya
@@ -31,16 +31,16 @@ exports[`Location renders unchanged 1`] = ` class="MuiGrid-root MuiGrid-item css-1dran7o-MuiGrid-root" >
County
Isiolo
diff --git a/packages/hurumap-core/src/LocationTag/LocationTag.js b/packages/hurumap-core/src/LocationTag/LocationTag.js index 248fc81a9..80fa56f31 100644 --- a/packages/hurumap-core/src/LocationTag/LocationTag.js +++ b/packages/hurumap-core/src/LocationTag/LocationTag.js @@ -6,7 +6,7 @@ const LocationTagRoot = styled(Box, { shouldForwardProp: (prop) => !["active", "highlight", "variant"].includes(prop), })(({ active, theme, variant }) => { - const { palette, typography } = theme; + const { palette, spacing, typography } = theme; let color = palette.text.primary; let backgroundColor = palette.background.default; if (variant === "highlight") { @@ -20,6 +20,7 @@ const LocationTagRoot = styled(Box, { boxShadow: "0px 3px 6px #00000029", color, height: typography.pxToRem(36), + padding: `0 ${spacing(1.25)}`, position: "relative", minWidth: typography.pxToRem(88), }; @@ -49,7 +50,7 @@ const LevelTypography = styled("h6", { borderRadius: typography.pxToRem(4), color: palette.text.secondary, fontSize: typography.pxToRem(7), - fontWeight: "bold", + fontWeight: 600, letterSpacing: "0.56px", lineHeight: 10 / 7, margin: 0, @@ -64,7 +65,7 @@ const LevelTypography = styled("h6", { const NameTypography = styled("div")(({ theme }) => { return { fontSize: theme.typography.pxToRem(9), - fontWeight: "bold", + fontWeight: 600, lineHeight: 13 / 9, margin: "auto", textTransform: "capitalize", diff --git a/packages/hurumap-core/src/LocationTag/LocationTag.snap.js b/packages/hurumap-core/src/LocationTag/LocationTag.snap.js index c943f6504..b0d8fcab9 100644 --- a/packages/hurumap-core/src/LocationTag/LocationTag.snap.js +++ b/packages/hurumap-core/src/LocationTag/LocationTag.snap.js @@ -3,15 +3,15 @@ exports[`LocationTag renders unchanged 1`] = `
region
Region
diff --git a/packages/hurumap-next/src/Map/Legend.js b/packages/hurumap-next/src/Map/Legend.js index bb967522a..58e70f308 100644 --- a/packages/hurumap-next/src/Map/Legend.js +++ b/packages/hurumap-next/src/Map/Legend.js @@ -1,58 +1,67 @@ -import { Typography, Grid } from "@mui/material"; +import { Box, Typography } from "@mui/material"; +import { alpha } from "@mui/material/styles"; export default function Legend({ legend, title = "Average Temperature", sx }) { + if (!legend?.length) { + return null; + } return ( - ({ + ({ + // match zoom control border color + border: "1px solid #ccc", + borderRadius: "5px", + boxShadow: `0px 3px 6px ${alpha(palette.common.black, 0.16)}`, position: "absolute", - zIndex: 1000, - width: "fit-content", - bottom: theme.spacing(30), - right: theme.spacing(20), - backgroundColor: theme.palette.background.paper, - padding: theme.spacing(1), - boxShadow: theme.shadows[3], + top: typography.pxToRem(52), + // match zoom control position + right: 10, + background: alpha(palette.background.default, 0.9), + pb: 1, + zIndex: zIndex.appBar - 1, ...sx, })} > ({ - color: theme.palette.text.primary, - marginBottom: theme.spacing(2), - })} + display="flex" + alignItems="center" + minHeight={52} + variant="caption" + fontWeight={600} + sx={{ + borderBottom: `1px solid #ccc`, + m: 0, + px: 1, + }} > {title} - {legend?.map(({ min, max, color }) => ( - ( + ({ - padding: theme.spacing(1), - })} + justifyContent="flex-start" + gap={1} + px={1} + key={`${min}-${max}`} > - ({ + - - ({ color: theme.palette.text.primary })} - > - {min} - {max} - - - + + {min} - {max} + + ))} - + ); } From 080a23399bf5963a30e9a0d21c404580a7d743d3 Mon Sep 17 00:00:00 2001 From: Clemence Kyara Date: Tue, 22 Oct 2024 16:02:58 +0300 Subject: [PATCH 2/5] Improve PanelButtonGroup --- .../PanelButtonGroup/PanelButtonGroup.js | 166 ++++++++++++++++++ .../PanelButtonGroup/PanelButtonGroup.snap.js | 3 + .../PanelButtonGroup/PanelButtonGroup.test.js | 18 ++ .../HURUmap/PanelButtonGroup/index.js | 65 +------ .../HURUmap/PanelButtonGroup/index.stories.js | 16 -- .../HURUmap/PanelButtonGroup/useStyles.js | 80 --------- 6 files changed, 188 insertions(+), 160 deletions(-) create mode 100644 apps/climatemappedafrica/src/components/HURUmap/PanelButtonGroup/PanelButtonGroup.js create mode 100644 apps/climatemappedafrica/src/components/HURUmap/PanelButtonGroup/PanelButtonGroup.snap.js create mode 100644 apps/climatemappedafrica/src/components/HURUmap/PanelButtonGroup/PanelButtonGroup.test.js delete mode 100644 apps/climatemappedafrica/src/components/HURUmap/PanelButtonGroup/index.stories.js delete mode 100644 apps/climatemappedafrica/src/components/HURUmap/PanelButtonGroup/useStyles.js diff --git a/apps/climatemappedafrica/src/components/HURUmap/PanelButtonGroup/PanelButtonGroup.js b/apps/climatemappedafrica/src/components/HURUmap/PanelButtonGroup/PanelButtonGroup.js new file mode 100644 index 000000000..fe01e2691 --- /dev/null +++ b/apps/climatemappedafrica/src/components/HURUmap/PanelButtonGroup/PanelButtonGroup.js @@ -0,0 +1,166 @@ +import { + Box, + ToggleButton, + ToggleButtonGroup, + Tooltip, + tooltipClasses, +} from "@mui/material"; +import { styled } from "@mui/material/styles"; +import Image from "next/image"; +import PropTypes from "prop-types"; +import React from "react"; + +const CustomTooltip = styled(({ className, ...props }) => ( + +))(({ theme }) => ({ + [`& .${tooltipClasses.arrow}`]: { + color: theme.palette.background.paper, + }, + [`& .${tooltipClasses.tooltip}`]: { + ...theme.typography.body1, + alignItems: "center", + backgroundColor: theme.palette.background.paper, + border: `1px solid ${theme.palette.grey.light}`, + borderRadius: 2, + color: theme.palette.text.primary, + display: "flex", + maxWidth: 220, + minHeight: 44, + textTransform: "capitalize", + }, +})); + +function PanelButtonGroup({ + items, + onChange, + pins = [], + sx, + value: valueProp, +}) { + const handleChange = (_, selected) => { + onChange(selected); + }; + const isPin = (current) => { + return pins.includes(current); + }; + + if (!items?.length) { + return null; + } + return ( + + + {items.map(({ icon, title, value, ...buttonProps }) => ( + + ({ + backgroundColor: palette.grey.light, + padding: 0, + // -5px is to ensure no boxShadow to the left of button + boxShadow: `0px 3px 6px -5px #00000029`, + marginBottom: typography.pxToRem(10), + borderRadius: "0px 2px 2px 0px", + borderLeft: `1px solid ${palette.grey.light}`, + "& .icon": { + filter: "brightness(0)", + }, + "&.Mui-selected": { + backgroundColor: palette.background.default, + borderLeft: `1px solid transparent`, + "& .icon": { + filter: "none", + }, + "&:hover": { + backgroundColor: palette.background.default, + borderLeft: `1px solid transparent`, + }, + }, + "&.Mui-disabled": { + backgroundColor: palette.grey.light, + "& .icon": { + opacity: 0.2, + }, + }, + "&.MuiToggleButtonGroup-groupedVertical:not(:last-child)": { + borderRadius: " 0px 2px 2px 0px", + }, + "&.MuiToggleButtonGroup-groupedVertical:not(:first-child)": { + borderRadius: " 0px 2px 2px 0px", + }, + "&:hover": { + "& .icon": { + filter: "none", + }, + backgroundColor: palette.background.default, + borderLeft: `1px solid transparent`, + }, + }), + ({ palette }) => + isPin(value) && { + backgroundColor: palette.primary.main, + "&.Mui-selected": { + backgroundColor: palette.primary.main, + "& .icon": { + filter: "brightness(0) invert()", + }, + "&:hover": { + backgroundColor: palette.primary.main, + }, + }, + "& .icon": { + filter: "brightness(0) invert()", + }, + }, + ({ palette }) => + value === "secondaryPin" && { + backgroundColor: palette.secondary.main, + "&.Mui-selected": { + backgroundColor: palette.secondary.main, + "& .icon": { + filter: "brightness(0) invert()", + }, + "&:hover": { + backgroundColor: palette.secondary.main, + }, + }, + "& .icon": { + filter: "brightness(0) invert()", + }, + }, + ]} + > + + + + ))} + + + ); +} + +PanelButtonGroup.propTypes = { + pins: PropTypes.arrayOf(PropTypes.string), + items: PropTypes.arrayOf( + PropTypes.shape({ + label: PropTypes.string, + href: PropTypes.string, + }), + ), + value: PropTypes.string, + onChange: PropTypes.func, +}; + +export default PanelButtonGroup; diff --git a/apps/climatemappedafrica/src/components/HURUmap/PanelButtonGroup/PanelButtonGroup.snap.js b/apps/climatemappedafrica/src/components/HURUmap/PanelButtonGroup/PanelButtonGroup.snap.js new file mode 100644 index 000000000..de4e73c1f --- /dev/null +++ b/apps/climatemappedafrica/src/components/HURUmap/PanelButtonGroup/PanelButtonGroup.snap.js @@ -0,0 +1,3 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders unchanged 1`] = `
`; diff --git a/apps/climatemappedafrica/src/components/HURUmap/PanelButtonGroup/PanelButtonGroup.test.js b/apps/climatemappedafrica/src/components/HURUmap/PanelButtonGroup/PanelButtonGroup.test.js new file mode 100644 index 000000000..a115263e5 --- /dev/null +++ b/apps/climatemappedafrica/src/components/HURUmap/PanelButtonGroup/PanelButtonGroup.test.js @@ -0,0 +1,18 @@ +import { createRender } from "@commons-ui/testing-library"; +import React from "react"; + +import PanelButtonGroup from "."; + +import theme from "@/climatemappedafrica/theme"; + +// eslint-disable-next-line testing-library/render-result-naming-convention +const render = createRender({ theme }); + +const defaultProps = {}; + +describe("", () => { + it("renders unchanged", () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/apps/climatemappedafrica/src/components/HURUmap/PanelButtonGroup/index.js b/apps/climatemappedafrica/src/components/HURUmap/PanelButtonGroup/index.js index a13742c4f..c33c78c30 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/PanelButtonGroup/index.js +++ b/apps/climatemappedafrica/src/components/HURUmap/PanelButtonGroup/index.js @@ -1,66 +1,3 @@ -import ToggleButton from "@mui/material/ToggleButton"; -import ToggleButtonGroup from "@mui/material/ToggleButtonGroup"; -import clsx from "clsx"; -import Image from "next/image"; -import PropTypes from "prop-types"; -import React from "react"; - -import useStyles from "./useStyles"; - -function PanelButtonGroup({ items, value, onChange, pins = [], ...props }) { - const classes = useStyles(props); - const handleChange = (_, selected) => { - onChange(selected); - }; - const isPin = (current) => { - return pins.includes(current); - }; - - if (!items?.length) { - return null; - } - return ( -
- - {items.map(({ icon, ...buttonProps }) => ( - - - - ))} - -
- ); -} - -PanelButtonGroup.propTypes = { - pins: PropTypes.arrayOf(PropTypes.string), - items: PropTypes.arrayOf( - PropTypes.shape({ - label: PropTypes.string, - href: PropTypes.string, - }), - ), - value: PropTypes.string, - onChange: PropTypes.func, -}; +import PanelButtonGroup from "./PanelButtonGroup"; export default PanelButtonGroup; diff --git a/apps/climatemappedafrica/src/components/HURUmap/PanelButtonGroup/index.stories.js b/apps/climatemappedafrica/src/components/HURUmap/PanelButtonGroup/index.stories.js deleted file mode 100644 index 28d355289..000000000 --- a/apps/climatemappedafrica/src/components/HURUmap/PanelButtonGroup/index.stories.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from "react"; - -import PanelButtonGroup from "."; - -export default { - title: "Components/HURUmap/PanelButtonGroup", - argTypes: {}, -}; - -function Template({ ...args }) { - return ; -} - -export const Default = Template.bind({}); - -Default.args = {}; diff --git a/apps/climatemappedafrica/src/components/HURUmap/PanelButtonGroup/useStyles.js b/apps/climatemappedafrica/src/components/HURUmap/PanelButtonGroup/useStyles.js deleted file mode 100644 index 945b7a072..000000000 --- a/apps/climatemappedafrica/src/components/HURUmap/PanelButtonGroup/useStyles.js +++ /dev/null @@ -1,80 +0,0 @@ -import makeStyles from "@mui/styles/makeStyles"; - -const useStyles = makeStyles(({ typography, palette }) => ({ - root: {}, - icon: { - width: typography.pxToRem(44), - height: typography.pxToRem(44), - }, - button: { - backgroundColor: palette.grey.light, - padding: 0, - boxShadow: `0px 3px 6px #00000029`, - marginBottom: typography.pxToRem(10), - borderRadius: " 0px 2px 2px 0px", - border: 0, - "& $icon": { - filter: "brightness(0)", - }, - "&.Mui-selected": { - backgroundColor: palette.background.default, - "& $icon": { - filter: "none", - }, - "&:hover": { - backgroundColor: palette.background.default, - }, - }, - "&.Mui-disabled": { - backgroundColor: palette.grey.light, - "& $icon": { - opacity: 0.2, - }, - }, - "&.MuiToggleButtonGroup-groupedVertical:not(:last-child)": { - borderRadius: " 0px 2px 2px 0px", - }, - "&.MuiToggleButtonGroup-groupedVertical:not(:first-child)": { - borderRadius: " 0px 2px 2px 0px", - }, - "&:hover": { - "& $icon": { - filter: "none", - }, - backgroundColor: palette.background.default, - }, - }, - pin: { - backgroundColor: palette.primary.main, - "&.Mui-selected": { - backgroundColor: palette.primary.main, - "& $icon": { - filter: "brightness(0) invert()", - }, - "&:hover": { - backgroundColor: palette.primary.main, - }, - }, - "& $icon": { - filter: "brightness(0) invert()", - }, - }, - secondaryPin: { - backgroundColor: palette.secondary.main, - "&.Mui-selected": { - backgroundColor: palette.secondary.main, - "& $icon": { - filter: "brightness(0) invert()", - }, - "&:hover": { - backgroundColor: palette.secondary.main, - }, - }, - "& $icon": { - filter: "brightness(0) invert()", - }, - }, - buttonGroup: {}, -})); - -export default useStyles; From 30b7a0f80ea583f8c2823a49e11d43897960fb7b Mon Sep 17 00:00:00 2001 From: Clemence Kyara Date: Tue, 22 Oct 2024 16:03:36 +0300 Subject: [PATCH 3/5] Improve Panel --- .../Panel/DesktopPanel/DesktopPanel.js | 97 ++++++++++++ .../Panel/DesktopPanel/PanelButtons.js | 72 +++++---- .../HURUmap/Panel/DesktopPanel/RichData.js | 18 ++- .../HURUmap/Panel/DesktopPanel/index.js | 50 +----- .../HURUmap/Panel/DesktopPanel/useStyles.js | 45 ------ .../HURUmap/Panel/MobilePanel/MobilePanel.js | 145 ++++++++++++++++++ .../HURUmap/Panel/MobilePanel/RichData.js | 3 - .../Panel/MobilePanel/SubcategoryList.js | 109 +++++++------ .../HURUmap/Panel/MobilePanel/index.js | 114 +------------- .../HURUmap/Panel/MobilePanel/useStyles.js | 40 +---- .../src/components/HURUmap/Panel/Panel.js | 21 +++ .../components/HURUmap/Panel/Panel.snap.js | 9 ++ .../components/HURUmap/Panel/Panel.test.js | 21 +++ .../src/components/HURUmap/Panel/Profile.js | 61 ++++---- .../components/HURUmap/Panel/ProfileItems.js | 2 +- .../src/components/HURUmap/Panel/index.js | 33 +--- .../components/HURUmap/Panel/index.stories.js | 22 --- 17 files changed, 438 insertions(+), 424 deletions(-) create mode 100644 apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/DesktopPanel.js delete mode 100644 apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/useStyles.js create mode 100644 apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/MobilePanel.js create mode 100644 apps/climatemappedafrica/src/components/HURUmap/Panel/Panel.js create mode 100644 apps/climatemappedafrica/src/components/HURUmap/Panel/Panel.snap.js create mode 100644 apps/climatemappedafrica/src/components/HURUmap/Panel/Panel.test.js delete mode 100644 apps/climatemappedafrica/src/components/HURUmap/Panel/index.stories.js diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/DesktopPanel.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/DesktopPanel.js new file mode 100644 index 000000000..94a6ab2c7 --- /dev/null +++ b/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/DesktopPanel.js @@ -0,0 +1,97 @@ +import { Box, Drawer } from "@mui/material"; +import { useTour } from "@reactour/tour"; +import PropTypes from "prop-types"; +import React, { useCallback, useState } from "react"; + +import PanelButtons from "./PanelButtons"; +import PanelItem from "./PanelItem"; + +function DesktopPanel({ sx, ...props }) { + const [value, setValue] = useState(); + const { isOpen: tutorialOpen } = useTour(); + + const closeDrawer = () => { + setValue(undefined); + }; + const handleValueChange = useCallback((newValue) => { + console.log("BOOM H: ", newValue); + // toggle value if the same + setValue((oldValue) => (oldValue !== newValue ? newValue : undefined)); + }, []); + + const open = value === "rich-data" && !tutorialOpen; + return ( + + ({ + display: "flex", + height: "100%", + minWidth: typography.pxToRem(1050), + maxWidth: "max-content", + overflowY: "visible", + position: "relative", + })} + // This needs to match panel button open/close duration + transitionDuration={200} + ModalProps={{ + sx: { + overflowY: "scroll", + overscrollBehaviorBlock: "none", + top: 104, // Toolbar height + }, + }} + PaperProps={{ + elevation: 0, + square: true, + sx: { + background: "transparent", + border: "none", + display: "flex", + flexDirection: "row", + height: "100%", + overflowY: "visible", + position: "absolute", + }, + }} + > + + + + + + + ); +} + +DesktopPanel.propTypes = { + isCompare: PropTypes.bool, + isPinning: PropTypes.bool, + onClickPin: PropTypes.func, + onClickUnpin: PropTypes.func, + panelItems: PropTypes.arrayOf( + PropTypes.shape({ + value: PropTypes.string, + children: PropTypes.node, + tree: PropTypes.shape({}), + }), + ), + primaryProfile: PropTypes.shape({ + items: PropTypes.arrayOf(PropTypes.shape({})), + }), +}; + +export default DesktopPanel; diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/PanelButtons.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/PanelButtons.js index 60404788e..697cf25ba 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/PanelButtons.js +++ b/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/PanelButtons.js @@ -1,10 +1,6 @@ -import { useTour } from "@reactour/tour"; -import clsx from "clsx"; import PropTypes from "prop-types"; import React, { useEffect, useState } from "react"; -import useStyles from "./useStyles"; - import PanelButtonGroup from "@/climatemappedafrica/components/HURUmap/PanelButtonGroup"; function PanelButtons({ @@ -12,28 +8,28 @@ function PanelButtons({ isCompare, onClickPin, onClickUnpin, + onValueChange, + open, panelItems: panelItemsProp, primaryProfile, secondaryProfile, - drawerRef, - ...props + value, }) { - const [value, setValue] = useState(); const [pins, setPins] = useState([]); const [panelItems, setPanelItems] = useState([]); - const classes = useStyles({ ...props }); - const { isOpen: tutorialOpen } = useTour(); useEffect(() => { - if (primaryProfile.items.length || secondaryProfile?.items?.length) { - const timeoutId = setTimeout(() => setValue("rich-data"), 200); + if ( + (primaryProfile.items.length || secondaryProfile?.items?.length) && + onValueChange + ) { + const timeoutId = setTimeout(() => onValueChange("rich-data"), 200); return () => { clearTimeout(timeoutId); }; } - // useEffect requires a return statement return () => {}; - }, [primaryProfile.items, secondaryProfile?.items]); + }, [onValueChange, primaryProfile.items, secondaryProfile?.items]); useEffect(() => { const pItems = @@ -86,13 +82,14 @@ function PanelButtons({ } }, [isPinning, isCompare]); + if (!panelItems?.length) { + return null; + } + const isPin = (current) => { const found = panelItems.find((item) => item.value === current); return !!found?.pin; }; - if (!panelItems?.length) { - return null; - } function addOrRemovePin(array, pin) { const newArray = [...array]; @@ -118,44 +115,44 @@ function PanelButtons({ setPins([]); } - setValue(nextValue); + if (onValueChange) { + onValueChange(nextValue); + } }; - const open = value === "rich-data" && !tutorialOpen; - /* eslint-disable no-param-reassign */ - if (open) { - drawerRef.current.style.visibility = "visible"; - } else { - drawerRef.current.style.visibility = "hidden"; - } - return ( ({ + marginTop: typography.pxToRem(52), + width: typography.pxToRem(44), + position: "fixed", + left: 0, + zIndex: zIndex.drawer + 1, + transition: transitions.create(["left"], { + duration: transitions.duration.shorter, // average-ish of entering & leaving screen + }), }), - }} + ({ widths }) => + open && { + left: `max(calc((100vw - ${widths.values.lg}px)/2 + 833px),1100px)`, + }, + ]} /> ); } PanelButtons.propTypes = { - drawerRef: PropTypes.shape({ - current: PropTypes.shape({ - style: PropTypes.shape({ - visibility: PropTypes.string, - }), - }), - }), isCompare: PropTypes.bool, isPinning: PropTypes.bool, onClickPin: PropTypes.func, onClickUnpin: PropTypes.func, + onValueChange: PropTypes.func, + open: PropTypes.bool, panelItems: PropTypes.arrayOf( PropTypes.shape({ value: PropTypes.string, @@ -169,6 +166,7 @@ PanelButtons.propTypes = { secondaryProfile: PropTypes.shape({ items: PropTypes.arrayOf(PropTypes.shape({})), }), + value: PropTypes.string, }; export default PanelButtons; diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/RichData.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/RichData.js index 15ea17c0c..5c0aff142 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/RichData.js +++ b/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/RichData.js @@ -1,3 +1,4 @@ +import { Paper } from "@mui/material"; import PropTypes from "prop-types"; import React, { useRef } from "react"; @@ -15,7 +16,17 @@ function RichData({ primaryProfile, ...props }) { }; return ( - <> + ({ + bgcolor: "background.paper", + border: `1px solid ${palette.grey.main}`, + borderLeft: "none", + borderRight: "none", + scrollMargin: "40px", + })} + > - + ); } diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/index.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/index.js index 453856583..9019fbb7f 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/index.js +++ b/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/index.js @@ -1,51 +1,3 @@ -import { Drawer } from "@mui/material"; -import PropTypes from "prop-types"; -import React, { useRef } from "react"; - -import PanelButtons from "./PanelButtons"; -import PanelItem from "./PanelItem"; -import useStyles from "./useStyles"; - -function DesktopPanel(props) { - const classes = useStyles(props); - const paperRef = useRef(); - - return ( - <> - -
- -
- - - - ); -} - -DesktopPanel.propTypes = { - isCompare: PropTypes.bool, - isPinning: PropTypes.bool, - onClickPin: PropTypes.func, - onClickUnpin: PropTypes.func, - panelItems: PropTypes.arrayOf( - PropTypes.shape({ - value: PropTypes.string, - children: PropTypes.node, - tree: PropTypes.shape({}), - }), - ), - primaryProfile: PropTypes.shape({ - items: PropTypes.arrayOf(PropTypes.shape({})), - }), -}; +import DesktopPanel from "./DesktopPanel"; export default DesktopPanel; diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/useStyles.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/useStyles.js deleted file mode 100644 index 4daf657cf..000000000 --- a/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/useStyles.js +++ /dev/null @@ -1,45 +0,0 @@ -import makeStyles from "@mui/styles/makeStyles"; - -const useStyles = makeStyles( - ({ typography, palette, transitions, widths, zIndex }) => ({ - root: { - display: "flex", - height: "100%", - minWidth: typography.pxToRem(1049), - maxWidth: "max-content", - transition: transitions.create("width", { - easing: transitions.easing.sharp, - duration: transitions.duration.enteringScreen, - }), - visibility: "hidden", - }, - paper: { - background: "transparent", - border: "none", - display: "flex", - flexDirection: "row", - position: "unset", - width: "100%", - overflowY: "visible", - }, - panelButtons: { - marginTop: typography.pxToRem(113), - width: typography.pxToRem(44), - position: "fixed", - left: 0, - zIndex: zIndex.drawer + 1, - top: typography.pxToRem(110), - }, - panelButtonsOpen: { - left: `max(calc((100vw - ${widths.values.lg}px)/2 + 833px),1054px)`, - }, - tabPanel: { - width: `calc(100% - ${typography.pxToRem(44)})`, - height: "100%", - background: palette.background.default, - display: "flex", - }, - }), -); - -export default useStyles; diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/MobilePanel.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/MobilePanel.js new file mode 100644 index 000000000..dc6587f6d --- /dev/null +++ b/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/MobilePanel.js @@ -0,0 +1,145 @@ +import { Box, Button, Typography } from "@mui/material"; +import PropTypes from "prop-types"; +import React from "react"; + +import RichData from "./RichData"; + +import PrintIcon from "@/climatemappedafrica/assets/icons/print.svg"; +import TopIcon from "@/climatemappedafrica/assets/icons/top.svg"; +import LocationHeader from "@/climatemappedafrica/components/HURUmap/LocationHeader"; +import PinAndCompare from "@/climatemappedafrica/components/HURUmap/PinAndCompare"; +import Section from "@/climatemappedafrica/components/Section"; +import Tabs from "@/climatemappedafrica/components/Tabs"; +import { hurumapArgs } from "@/climatemappedafrica/config"; + +// being last is necessary for style override to work +// eslint-disable-next-line import/order +import useStyles from "./useStyles"; + +function MobilePanel({ activeType, scrollToTopLabel, sx, ...props }) { + const classes = useStyles(props); + const { onSelectLocation, primaryProfile, dataNotAvailable } = props; + const { geography, items } = primaryProfile; + + const { pinAndCompare } = hurumapArgs; + + const activeTab = Math.max( + items?.findIndex(({ title }) => title === activeType), + 0, + ); + const formatedItems = items?.map((item) => { + return { + label: item.title, + href: `#${item.title}`, + children: , + }; + }); + const scrollToTop = () => { + /* eslint-env browser */ + window.scrollTo({ top: 0, behavior: "smooth" }); + }; + + const handleClose = (e) => { + const code = e.nativeEvent?.target?.dataset?.value; + if (code && onSelectLocation) { + onSelectLocation({ code }); + } + }; + + return ( + + {items?.length === 0 && ( +
+ + + ({ + color: "#666666", + fontWeight: "bold", + fontSize: typography.pxToRem(10), + lineHeight: 16 / 10, + letterSpacing: typography.pxToRem(0.8), + margin: `${typography.pxToRem(20)} 0`, + textTransform: "uppercase", + })} + > + {`${geography.name} ${dataNotAvailable}`} + +
+ )} + {/* key is needed to re-render the component when prop changes e.g. + via storybook controls */} + + {items?.length > 0 && ( + + )} + + ); +} + +MobilePanel.propTypes = { + activeType: PropTypes.string, + dataNotAvailable: PropTypes.string, + onSelectLocation: PropTypes.func, + primaryProfile: PropTypes.shape({ + items: PropTypes.arrayOf(PropTypes.shape({})), + geography: PropTypes.shape({ + name: PropTypes.string, + code: PropTypes.string, + }), + }), + scrollToTopLabel: PropTypes.string, +}; + +export default MobilePanel; diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/RichData.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/RichData.js index 54eb279bb..87e7b6c26 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/RichData.js +++ b/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/RichData.js @@ -16,9 +16,6 @@ function RichData({ item, geography, ...props }) { RichData.propTypes = { item: PropTypes.shape({ - icon: PropTypes.string, - title: PropTypes.string, - description: PropTypes.string, children: PropTypes.arrayOf(PropTypes.shape({})), }), geography: PropTypes.shape({ diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/SubcategoryList.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/SubcategoryList.js index 2b0c51c22..e6b671323 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/SubcategoryList.js +++ b/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/SubcategoryList.js @@ -1,6 +1,5 @@ -import { Popover, Button } from "@mui/material"; -import makeStyles from "@mui/styles/makeStyles"; -import clsx from "clsx"; +/* eslint-env browser */ +import { Box, Button, Popover } from "@mui/material"; import PropTypes from "prop-types"; import React from "react"; @@ -8,52 +7,7 @@ import Caret from "@/climatemappedafrica/assets/icons/caret.svg"; import Link from "@/climatemappedafrica/components/Link"; import slugify from "@/climatemappedafrica/utils/slugify"; -const useStyles = makeStyles(({ palette, typography, zIndex }) => ({ - root: { - position: "sticky", - top: 64 + 60, // below navbar and category list tab - zIndex: zIndex.appBar, - }, - caretContainer: { - alignItems: "center", - backgroundColor: palette.grey.light, - display: "flex", - height: typography.pxToRem(16), - justifyContent: "center", - width: "100%", - "&:active,&:hover, &:focus, &:focus-within": { - backgroundColor: palette.grey.light, - }, - "&:after": { - display: "none", - }, - }, - paper: { - width: "100%", - left: "0 !important", - right: 0, - maxWidth: "unset", - backgroundColor: "#F0F0F0", - borderRadius: 0, - boxShadow: "unset", - paddingTop: typography.pxToRem(9), - paddingBottom: typography.pxToRem(24), - }, - title: { - width: "100%", - textAlign: "center", - marginBottom: typography.pxToRem(10), - display: "block", - cursor: "pointer", - color: typography.caption.color, - }, - notSelected: { - opacity: 0.2, - }, -})); - function SubcategoryList({ items }) { - const classes = useStyles(); const [anchorEl, setAnchorEl] = React.useState(null); const [selectedIndex, setSelectedIndex] = React.useState(0); @@ -65,7 +19,6 @@ function SubcategoryList({ items }) { }; const handleSelect = (event) => { setSelectedIndex(Number(event.target.dataset.index)); - /* eslint-env browser */ document .getElementById(slugify(event.target.dataset.title)) .scrollIntoView({ behavior: "smooth" }); @@ -77,12 +30,33 @@ function SubcategoryList({ items }) { return null; } return ( -
- ({ + "& .MuiPopover-paper": { + backgroundColor: "#F0F0F0", + borderRadius: 0, + boxShadow: "unset", + left: "0", + maxWidth: "100%", + paddingTop: typography.pxToRem(9), + paddingBottom: typography.pxToRem(24), + right: 0, + }, + })} > {items.map(({ title }, index) => ( ({ + color: typography.caption.color, + cursor: "pointer", + display: "block", + marginBottom: typography.pxToRem(10), + opacity: 0.2, + textAlign: "center", + width: "100%", + }), + selectedIndex === index && { + opacity: 1.0, + }, + ]} > {title} ))} -
+ ); } SubcategoryList.propTypes = { diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/index.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/index.js index a9d101820..7ad4b56b9 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/index.js +++ b/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/index.js @@ -1,115 +1,3 @@ -import { Button, Typography } from "@mui/material"; -import PropTypes from "prop-types"; -import React from "react"; - -import RichData from "./RichData"; - -import PrintIcon from "@/climatemappedafrica/assets/icons/print.svg"; -import TopIcon from "@/climatemappedafrica/assets/icons/top.svg"; -import LocationHeader from "@/climatemappedafrica/components/HURUmap/LocationHeader"; -import PinAndCompare from "@/climatemappedafrica/components/HURUmap/PinAndCompare"; -import Section from "@/climatemappedafrica/components/Section"; -import Tabs from "@/climatemappedafrica/components/Tabs"; -import { hurumapArgs } from "@/climatemappedafrica/config"; - -// being last is necessary for style override to work -// eslint-disable-next-line import/order -import useStyles from "./useStyles"; - -function MobilePanel({ scrollToTopLabel, activeType, ...props }) { - const classes = useStyles(props); - const { onSelectLocation, primaryProfile, dataNotAvailable } = props; - const { geography, items } = primaryProfile; - - const { pinAndCompare } = hurumapArgs; - - const activeTab = Math.max( - items?.findIndex(({ title }) => title === activeType), - 0, - ); - const formatedItems = items?.map((item) => { - return { - label: item.title, - href: `#${item.title}`, - children: , - }; - }); - const scrollToTop = () => { - /* eslint-env browser */ - window.scrollTo({ top: 0, behavior: "smooth" }); - }; - - const handleClose = (e) => { - const code = e.nativeEvent?.target?.dataset?.value; - if (code && onSelectLocation) { - onSelectLocation({ code }); - } - }; - - return ( -
- {items?.length === 0 && ( -
- - - {`${geography.name} ${dataNotAvailable}`} -
- )} - {/* key is needed to re-render the component when prop changes e.g. - via storybook controls */} - - {items?.length > 0 && ( - - )} -
- ); -} - -MobilePanel.propTypes = { - activeType: PropTypes.string, - dataNotAvailable: PropTypes.string, - onSelectLocation: PropTypes.func, - primaryProfile: PropTypes.shape({ - items: PropTypes.arrayOf(PropTypes.shape({})), - geography: PropTypes.shape({ - name: PropTypes.string, - code: PropTypes.string, - }), - }), - scrollToTopLabel: PropTypes.string, -}; +import MobilePanel from "./MobilePanel"; export default MobilePanel; diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/useStyles.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/useStyles.js index 72bac44b6..de2caf049 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/useStyles.js +++ b/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/useStyles.js @@ -1,22 +1,8 @@ import makeStyles from "@mui/styles/makeStyles"; +// We can't migrate these styles to sx until components/Tabs is upgraded const useStyles = makeStyles( ({ typography, palette, zIndex, breakpoints }) => ({ - root: {}, - dataNotAvailable: { - color: "#666666", - fontWeight: "bold", - fontSize: typography.pxToRem(10), - lineHeight: 16 / 10, - letterSpacing: typography.pxToRem(0.8), - margin: `${typography.pxToRem(20)} 0`, - textTransform: "uppercase", - }, - locationRoot: { - scrollMargin: typography.pxToRem(200), - }, - divider: { display: "none" }, - indicator: { display: "none" }, tabs: { paddingTop: typography.pxToRem(16), paddingBottom: typography.pxToRem(16), @@ -56,33 +42,15 @@ const useStyles = makeStyles( marginTop: 0, }, tabSelected: { - color: palette.background.default, + "&.Mui-selected": { + color: palette.background.default, + }, backgroundColor: "#666666", "&:hover, &:focus, &$selected": { color: palette.background.default, backgroundColor: "#666666", }, }, - scrollButton: { - padding: `${typography.pxToRem(58)} ${typography.pxToRem(100)} `, - backgroundColor: palette.background.paper, - display: "flex", - alignItems: "center", - justifyContent: "center", - cursor: "pointer", - color: "#666666", - textTransform: "uppercase", - "&:after": { - display: "none", - }, - "&:hover": { - backgroundColor: palette.background.paper, - fontWeight: 600, - }, - }, - topIcon: { - marginRight: typography.pxToRem(20), - }, }), ); diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/Panel.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/Panel.js new file mode 100644 index 000000000..fb840a668 --- /dev/null +++ b/apps/climatemappedafrica/src/components/HURUmap/Panel/Panel.js @@ -0,0 +1,21 @@ +import { useMediaQuery } from "@mui/material"; +import React from "react"; + +import DesktopPanel from "./DesktopPanel"; +import MobilePanel from "./MobilePanel"; + +function Panel(props) { + // Since desktop uses a drawer (with a timer), display: "none" on DesktopPanel + // may not be enough to stop the drawer from opening in mobile & hence use of + // conditional rendering. + const isDesktop = useMediaQuery((theme) => theme.breakpoints.up("lg")); + + return ( + <> + {!isDesktop && } + {isDesktop && } + + ); +} + +export default Panel; diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/Panel.snap.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/Panel.snap.js new file mode 100644 index 000000000..572cb5bc2 --- /dev/null +++ b/apps/climatemappedafrica/src/components/HURUmap/Panel/Panel.snap.js @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders unchanged 1`] = ` +
+
+
+`; diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/Panel.test.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/Panel.test.js new file mode 100644 index 000000000..a20980e90 --- /dev/null +++ b/apps/climatemappedafrica/src/components/HURUmap/Panel/Panel.test.js @@ -0,0 +1,21 @@ +import { createRender } from "@commons-ui/testing-library"; +import React from "react"; + +import Panel from "."; + +import theme from "@/climatemappedafrica/theme"; + +// eslint-disable-next-line testing-library/render-result-naming-convention +const render = createRender({ theme }); + +const defaultProps = { + // TODO: figure out a way of setting up profile here. Currently, it's too big. + primaryProfile: {}, +}; + +describe("", () => { + it("renders unchanged", () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/Profile.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/Profile.js index 876e8542b..5d21637e8 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/Panel/Profile.js +++ b/apps/climatemappedafrica/src/components/HURUmap/Panel/Profile.js @@ -1,4 +1,4 @@ -import makeStyles from "@mui/styles/makeStyles"; +import { Box } from "@mui/material"; import PropTypes from "prop-types"; import React, { forwardRef } from "react"; @@ -10,29 +10,6 @@ import PinAndCompare from "@/climatemappedafrica/components/HURUmap/PinAndCompar import Loading from "@/climatemappedafrica/components/Loading"; import { hurumapArgs } from "@/climatemappedafrica/config"; -const useStyles = makeStyles(({ typography, breakpoints, zIndex }) => ({ - profile: { - marginLeft: typography.pxToRem(20), - marginRight: typography.pxToRem(20), - marginTop: typography.pxToRem(21), - [breakpoints.up("md")]: { - paddingLeft: typography.pxToRem(80), - marginRight: typography.pxToRem(80), - }, - [breakpoints.up("lg")]: { - marginLeft: `max(calc((100vw - 1160px)/2 + 79px), 300px)`, - marginTop: typography.pxToRem(0), - marginRight: 0, - width: typography.pxToRem(800), - minHeight: "100%", - paddingTop: typography.pxToRem(67.7), - paddingLeft: typography.pxToRem(17), - paddingRight: typography.pxToRem(17), - zIndex: zIndex.drawer, - }, - }, -})); - const Profile = forwardRef(function Profile( { categories, @@ -44,11 +21,11 @@ const Profile = forwardRef(function Profile( onSelectLocation, primaryProfile, secondaryProfile, + sx, ...props }, ref, ) { - const classes = useStyles(props); const { pinAndCompare } = hurumapArgs; const handleClickPin = (e) => { @@ -106,7 +83,37 @@ const Profile = forwardRef(function Profile( } return ( -
+ ({ + backgroundColor: palette.background.default, + marginLeft: { + xs: typography.pxToRem(20), + lg: `max(calc((100vw - 1160px)/2 + 79px), 300px)`, + }, + marginRight: { + xs: typography.pxToRem(20), + md: typography.pxToRem(80), + lg: 0, + }, + marginTop: { + xs: typography.pxToRem(21), + lg: typography.pxToRem(0), + }, + paddingLeft: { + md: typography.pxToRem(80), + lg: typography.pxToRem(17), + }, + width: { lg: typography.pxToRem(800) }, + minHeight: { lg: "100%" }, + paddingTop: { lg: typography.pxToRem(67.7) }, + paddingRight: { lg: typography.pxToRem(17) }, + zIndex: { lg: zIndex.drawer }, + }), + ...(Array.isArray(sx) ? sx : [sx]), + ]} + ref={ref} + > {isLoading && } -
+ ); }); diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/ProfileItems.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/ProfileItems.js index 043bdb54f..09342406a 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/Panel/ProfileItems.js +++ b/apps/climatemappedafrica/src/components/HURUmap/Panel/ProfileItems.js @@ -3,7 +3,7 @@ import makeStyles from "@mui/styles/makeStyles"; import clsx from "clsx"; import dynamic from "next/dynamic"; import PropTypes from "prop-types"; -import React, { memo, Fragment } from "react"; +import React, { Fragment, memo } from "react"; import CategoryHeader from "@/climatemappedafrica/components/HURUmap/CategoryHeader"; import KeyMetric from "@/climatemappedafrica/components/HURUmap/KeyMetric"; diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/index.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/index.js index bc549c344..3fb16a410 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/Panel/index.js +++ b/apps/climatemappedafrica/src/components/HURUmap/Panel/index.js @@ -1,34 +1,3 @@ -import { Box } from "@mui/material"; -import React from "react"; - -import DesktopPanel from "./DesktopPanel"; -import MobilePanel from "./MobilePanel"; - -function Panel(props) { - return ( - <> - - - - - - - - ); -} +import Panel from "./Panel"; export default Panel; diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/index.stories.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/index.stories.js deleted file mode 100644 index 83bf73dca..000000000 --- a/apps/climatemappedafrica/src/components/HURUmap/Panel/index.stories.js +++ /dev/null @@ -1,22 +0,0 @@ -import React from "react"; - -import Panel from "."; - -import { hurumapArgs } from "@/climatemappedafrica/config"; - -const { locations } = hurumapArgs; - -export default { - title: "Components/HURUmap/Panel", - argTypes: {}, -}; - -function Template({ ...args }) { - return ; -} - -export const Default = Template.bind({}); - -Default.args = { - locations, -}; From 968c4e05e7f7610568ca561d635050ee8031846d Mon Sep 17 00:00:00 2001 From: Clemence Kyara Date: Tue, 22 Oct 2024 16:04:13 +0300 Subject: [PATCH 4/5] Ensure Location is below appBar --- apps/climatemappedafrica/src/components/ExplorePage/index.js | 2 +- apps/climatemappedafrica/src/components/Navigation/index.js | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/apps/climatemappedafrica/src/components/ExplorePage/index.js b/apps/climatemappedafrica/src/components/ExplorePage/index.js index 20c977918..051dcee4b 100644 --- a/apps/climatemappedafrica/src/components/ExplorePage/index.js +++ b/apps/climatemappedafrica/src/components/ExplorePage/index.js @@ -143,7 +143,7 @@ function ExplorePage({ panelProps, profile: profileProp, apiUri, ...props }) { position: "absolute", right: 0, top: theme.typography.pxToRem(52), - zIndex: theme.zIndex.appBar, + zIndex: theme.zIndex.appBar - 1, }, }} /> diff --git a/apps/climatemappedafrica/src/components/Navigation/index.js b/apps/climatemappedafrica/src/components/Navigation/index.js index 866c319f1..fc6be07c6 100644 --- a/apps/climatemappedafrica/src/components/Navigation/index.js +++ b/apps/climatemappedafrica/src/components/Navigation/index.js @@ -45,7 +45,6 @@ function Navigation({ variant, ...props }) { > {variant?.toLowerCase() === "explore" ? ( From 556b1502f8f75010c9f998100abc1938245e8080 Mon Sep 17 00:00:00 2001 From: Clemence Kyara Date: Wed, 23 Oct 2024 11:00:38 +0300 Subject: [PATCH 5/5] Remove console.log statement Co-authored-by: KEVIN KOECH --- .../src/components/HURUmap/Panel/DesktopPanel/DesktopPanel.js | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/DesktopPanel.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/DesktopPanel.js index 94a6ab2c7..4dcb508f8 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/DesktopPanel.js +++ b/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/DesktopPanel.js @@ -14,7 +14,6 @@ function DesktopPanel({ sx, ...props }) { setValue(undefined); }; const handleValueChange = useCallback((newValue) => { - console.log("BOOM H: ", newValue); // toggle value if the same setValue((oldValue) => (oldValue !== newValue ? newValue : undefined)); }, []);