diff --git a/apps/climatemappedafrica/eslint.webpack.config.js b/apps/climatemappedafrica/eslint.webpack.config.js index 4242830fc..7e30d0408 100644 --- a/apps/climatemappedafrica/eslint.webpack.config.js +++ b/apps/climatemappedafrica/eslint.webpack.config.js @@ -19,7 +19,6 @@ module.exports = { resolve: { alias: { "@/climatemappedafrica": path.resolve(__dirname, "src/"), - content: path.resolve(__dirname, "content/"), }, extensions: [".js"], }, diff --git a/apps/climatemappedafrica/jest.config.js b/apps/climatemappedafrica/jest.config.js index 69bb7f133..70265641e 100644 --- a/apps/climatemappedafrica/jest.config.js +++ b/apps/climatemappedafrica/jest.config.js @@ -11,6 +11,8 @@ module.exports = { "/../../packages/commons-ui-core/src/$1", "^@/commons-ui/next/(.*)$": "/../../packages/commons-ui-next/src/$1", + "^@/commons-ui/payload/(.*)$": + "/../../packages/commons-ui-payload/src/$1", }, transformIgnorePatterns: ["/node_modules/(?!camelcase-keys)"], }; diff --git a/apps/climatemappedafrica/jsconfig.json b/apps/climatemappedafrica/jsconfig.json index d997fd29f..c2777f419 100644 --- a/apps/climatemappedafrica/jsconfig.json +++ b/apps/climatemappedafrica/jsconfig.json @@ -5,6 +5,7 @@ "@/climatemappedafrica/*": ["./src/*"], "@/commons-ui/core/*": ["../../packages/commons-ui-core/src/*"], "@/commons-ui/next/*": ["../../packages/commons-ui-next/src/*"], + "@/commons-ui/payload/*": ["../../packages/commons-ui-payload/src/*"], "@/hurumap/core/*": ["../../packages/hurumap-core/src/*"], "@/hurumap/next/*": ["../../packages/hurumap-next/src/*"] } diff --git a/apps/climatemappedafrica/next.config.js b/apps/climatemappedafrica/next.config.js index ed809bcc4..9bab1d826 100644 --- a/apps/climatemappedafrica/next.config.js +++ b/apps/climatemappedafrica/next.config.js @@ -28,6 +28,7 @@ module.exports = { transpilePackages: [ "@commons-ui/core", "@commons-ui/next", + "@commons-ui/payload", "@hurumap/core", "@hurumap/next", ], diff --git a/apps/climatemappedafrica/package.json b/apps/climatemappedafrica/package.json index 50032687c..fe349f0d4 100644 --- a/apps/climatemappedafrica/package.json +++ b/apps/climatemappedafrica/package.json @@ -41,10 +41,10 @@ "@emotion/styled": "catalog:", "@hurumap/core": "workspace:*", "@hurumap/next": "workspace:*", - "@mui/lab": "catalog:mui-styles", "@mui/material": "catalog:mui-styles", "@mui/styles": "catalog:mui-styles", "@mui/utils": "catalog:mui-styles", + "@mui/x-tree-view": "catalog:", "@next/env": "catalog:", "@payloadcms/bundler-webpack": "catalog:", "@payloadcms/db-mongodb": "catalog:", @@ -78,6 +78,7 @@ "react-vega": "catalog:", "sharp": "catalog:", "simplebar-react": "catalog:", + "slate": "catalog:", "swr": "catalog:", "vega": "catalog:", "vega-embed": "catalog:", diff --git a/apps/climatemappedafrica/payload.config.ts b/apps/climatemappedafrica/payload.config.ts index 6d65eb688..70ac036cd 100644 --- a/apps/climatemappedafrica/payload.config.ts +++ b/apps/climatemappedafrica/payload.config.ts @@ -16,6 +16,7 @@ import Members from "./src/payload/collections/Members"; import Pages from "./src/payload/collections/Pages"; import Users from "./src/payload/collections/Users"; +import HURUMap from "./src/payload/globals/HURUMap"; import Site from "./src/payload/globals/site"; const projectDir = process.cwd(); @@ -65,7 +66,7 @@ export default buildConfig({ // Settings Users, ] as CollectionConfig[], - globals: [Site] as GlobalConfig[], + globals: [HURUMap, Site] as GlobalConfig[], ...(locales?.length ? { localization: { diff --git a/apps/climatemappedafrica/public/images/cms/blocks/data-indicators.png b/apps/climatemappedafrica/public/images/cms/blocks/data-indicators.png new file mode 100644 index 000000000..83dce991a Binary files /dev/null and b/apps/climatemappedafrica/public/images/cms/blocks/data-indicators.png differ diff --git a/apps/climatemappedafrica/public/images/cms/blocks/data-visualisation-guide.png b/apps/climatemappedafrica/public/images/cms/blocks/data-visualisation-guide.png new file mode 100644 index 000000000..45cfe06a6 Binary files /dev/null and b/apps/climatemappedafrica/public/images/cms/blocks/data-visualisation-guide.png differ diff --git a/apps/climatemappedafrica/public/images/cms/blocks/hero.png b/apps/climatemappedafrica/public/images/cms/blocks/hero.png new file mode 100644 index 000000000..8cc7eccb5 Binary files /dev/null and b/apps/climatemappedafrica/public/images/cms/blocks/hero.png differ diff --git a/apps/climatemappedafrica/public/images/cms/blocks/how-it-works.png b/apps/climatemappedafrica/public/images/cms/blocks/how-it-works.png new file mode 100644 index 000000000..c1922e11b Binary files /dev/null and b/apps/climatemappedafrica/public/images/cms/blocks/how-it-works.png differ diff --git a/apps/climatemappedafrica/public/images/payload/blocks/page-hero.jpg b/apps/climatemappedafrica/public/images/payload/blocks/page-hero.jpg new file mode 100644 index 000000000..d68e89bb5 Binary files /dev/null and b/apps/climatemappedafrica/public/images/payload/blocks/page-hero.jpg differ diff --git a/apps/climatemappedafrica/public/images/payload/blocks/summary.jpg b/apps/climatemappedafrica/public/images/payload/blocks/summary.jpg new file mode 100644 index 000000000..cb72293a1 Binary files /dev/null and b/apps/climatemappedafrica/public/images/payload/blocks/summary.jpg differ diff --git a/apps/climatemappedafrica/public/images/payload/blocks/team.jpg b/apps/climatemappedafrica/public/images/payload/blocks/team.jpg new file mode 100644 index 000000000..4af575caf Binary files /dev/null and b/apps/climatemappedafrica/public/images/payload/blocks/team.jpg differ diff --git a/apps/climatemappedafrica/src/assets/icons/search-open.svg b/apps/climatemappedafrica/src/assets/icons/search-open.svg new file mode 100644 index 000000000..d2f039c1a --- /dev/null +++ b/apps/climatemappedafrica/src/assets/icons/search-open.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/climatemappedafrica/src/assets/images/Mask Group 8.png b/apps/climatemappedafrica/src/assets/images/Mask Group 8.png new file mode 100644 index 000000000..1c6bd32f1 Binary files /dev/null and b/apps/climatemappedafrica/src/assets/images/Mask Group 8.png differ diff --git a/apps/climatemappedafrica/src/assets/images/bg-map-white.jpg b/apps/climatemappedafrica/src/assets/images/bg-map-white.jpg new file mode 100644 index 000000000..5873d7630 Binary files /dev/null and b/apps/climatemappedafrica/src/assets/images/bg-map-white.jpg differ diff --git a/apps/climatemappedafrica/src/assets/menu_close.svg b/apps/climatemappedafrica/src/assets/menu_close.svg new file mode 100644 index 000000000..779b651b3 --- /dev/null +++ b/apps/climatemappedafrica/src/assets/menu_close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/climatemappedafrica/src/assets/menu_open.svg b/apps/climatemappedafrica/src/assets/menu_open.svg new file mode 100644 index 000000000..103535fbb --- /dev/null +++ b/apps/climatemappedafrica/src/assets/menu_open.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.js b/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.js index cfbb83f7e..f5167ad09 100644 --- a/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.js +++ b/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.js @@ -76,7 +76,7 @@ function AboutTeam({ title, members: membersProp, ...props }) { key={uniqueId("team-chunk-")} > {membersChunks.map((member) => ( - + ))} diff --git a/apps/climatemappedafrica/src/components/Card/ActionArea.js b/apps/climatemappedafrica/src/components/Card/ActionArea.js index d6f547012..0e8c2d68f 100644 --- a/apps/climatemappedafrica/src/components/Card/ActionArea.js +++ b/apps/climatemappedafrica/src/components/Card/ActionArea.js @@ -43,10 +43,4 @@ ActionArea.propTypes = { onClick: PropTypes.func, }; -ActionArea.defaultProps = { - children: undefined, - href: undefined, - onClick: undefined, -}; - export default ActionArea; diff --git a/apps/climatemappedafrica/src/components/Card/Card.js b/apps/climatemappedafrica/src/components/Card/Card.js index 70ac97701..455d17b43 100644 --- a/apps/climatemappedafrica/src/components/Card/Card.js +++ b/apps/climatemappedafrica/src/components/Card/Card.js @@ -1,6 +1,5 @@ import { Link } from "@commons-ui/next"; import { Card as MuiCard } from "@mui/material"; -import clsx from "clsx"; import PropTypes from "prop-types"; import React from "react"; @@ -28,6 +27,7 @@ function Card({ title, titleProps, variant, + sx, ...props }) { const squareMedia = mediaProps?.square; @@ -43,7 +43,29 @@ function Card({ }; return ( - + ({ + backgroundColor: "inherit", + boxShadow: "none", + borderRadius: 0, + padding: { + xs: squareMedia ? `0 ${theme.typography.pxToRem(36)}` : 0, + md: 0, + }, + minWidth: { + xs: theme.typography.pxToRem(350), + md: "unset", + }, + width: { + xs: "100%", + md: theme.typography.pxToRem(squareMedia ? 278 : 296), + lg: theme.typography.pxToRem(squareMedia ? 278 : 376), + }, + ...sx, + })} + > renders unchanged 1`] = `
`; diff --git a/apps/climatemappedafrica/src/components/Card/Content.js b/apps/climatemappedafrica/src/components/Card/Content.js index 82ba9751e..ebcbfccaf 100644 --- a/apps/climatemappedafrica/src/components/Card/Content.js +++ b/apps/climatemappedafrica/src/components/Card/Content.js @@ -1,4 +1,5 @@ import { RichTypography } from "@commons-ui/core"; +import { RichText } from "@commons-ui/payload"; import { CardContent } from "@mui/material"; import makeStyles from "@mui/styles/makeStyles"; import clsx from "clsx"; @@ -44,13 +45,22 @@ function Content({ {title} - - {description} - + {/* Support for rich text while keeping backwards compatibility */} + {Array.isArray(description) ? ( + + ) : ( + + {description} + + )} ); } diff --git a/apps/climatemappedafrica/src/components/DataIndicators/DataIndicators.js b/apps/climatemappedafrica/src/components/DataIndicators/DataIndicators.js new file mode 100644 index 000000000..5aa516408 --- /dev/null +++ b/apps/climatemappedafrica/src/components/DataIndicators/DataIndicators.js @@ -0,0 +1,164 @@ +import { Box, ClickAwayListener, Grid, Slide } from "@mui/material"; +import PropTypes from "prop-types"; +import React, { useState } from "react"; + +import Icon from "./Icon"; +import IndicatorPanel from "./IndicatorPanel"; + +import bg from "@/climatemappedafrica/assets/images/Mask Group 8.png"; +import Image from "@/climatemappedafrica/components/Image"; +import RichHeader from "@/climatemappedafrica/components/RichHeader"; + +function DataIndicators({ indicators, title }) { + const [checked, setChecked] = useState(false); + const [currentItemIndex, setCurrentItemIndex] = useState(null); + + if (!indicators?.length) { + return null; + } + const handleIconClick = (index) => { + setCurrentItemIndex(index); + setChecked(true); + }; + const resetItemClick = () => { + setChecked(false); + setCurrentItemIndex(null); + }; + const currentItem = indicators[currentItemIndex]; + const panelProps = { + in: checked, + mountOnEnter: true, + unmountOnExit: true, + component: Slide, + direction: "left", + timeout: 300, + sx: ({ palette, typography }) => ({ + position: "absolute", + right: 0, + top: { lg: 0, xs: typography.pxToRem(124) }, + backgroundColor: palette.primary.main, + display: "flex", + justifyContent: "flex-start", + alignItems: "flex-start", + flexDirection: "column", + color: palette.text.secondary, + margin: { xs: "auto 0" }, + width: { lg: typography.pxToRem(480), xs: typography.pxToRem(390) }, + height: { + xs: typography.pxToRem(528), + lg: typography.pxToRem(600), + }, + padding: { + xs: typography.pxToRem(15), + md: `${typography.pxToRem(50)} ${typography.pxToRem(36)}`, + lg: `${typography.pxToRem(76)} ${typography.pxToRem(84)}`, + }, + }), + }; + + return ( + ({ + backgroundColor: "#F0F0F0", + height: { xs: typography.pxToRem(672), lg: typography.pxToRem(600) }, + position: "relative", + })} + > + + + + + ({ + width: "100%", + height: { + xs: typography.pxToRem(672), + lg: typography.pxToRem(600), + }, + transition: "width 0.3s ease-out", + ...(checked && { + width: { md: "calc(100% - 355px)", lg: "calc(100% - 480px)" }, + }), + })} + > + + {title} + + + + {indicators.map((item, index) => ( + ({ + marginBottom: typography.pxToRem(16), + justifyContent: "center", + transition: "margin-right 0.3s ease-out", + display: { xs: "flex", lg: "initial" }, + width: { xs: "100%", lg: "auto" }, + mr: { lg: 7.5 }, + "&:last-of-type": { + marginRight: 0, + }, + + ...(checked && { + mr: { lg: 2.5 }, + "&:last-of-type": { + marginRight: 0, + }, + }), + })} + > + handleIconClick(index)} + item={item} + index={index} + currentItemIndex={currentItemIndex} + handleClickAway={resetItemClick} + /> + + ))} + + + + + + + ); +} + +DataIndicators.propTypes = { + title: PropTypes.arrayOf(PropTypes.shape({})), + indicators: PropTypes.arrayOf( + PropTypes.shape({ + title: PropTypes.string, + description: PropTypes.arrayOf(PropTypes.shape({})), + }), + ), +}; + +export default DataIndicators; diff --git a/apps/climatemappedafrica/src/components/DataIndicators/DataIndicators.snap.js b/apps/climatemappedafrica/src/components/DataIndicators/DataIndicators.snap.js new file mode 100644 index 000000000..630de530f --- /dev/null +++ b/apps/climatemappedafrica/src/components/DataIndicators/DataIndicators.snap.js @@ -0,0 +1,72 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders unchanged 1`] = ` +
+
+
+ +
+
+
+
+
+ Indicators +
+
+
+
+ +
+
+
+
+
+
+`; diff --git a/apps/climatemappedafrica/src/components/DataIndicators/DataIndicators.test.js b/apps/climatemappedafrica/src/components/DataIndicators/DataIndicators.test.js new file mode 100644 index 000000000..7af4abdd6 --- /dev/null +++ b/apps/climatemappedafrica/src/components/DataIndicators/DataIndicators.test.js @@ -0,0 +1,31 @@ +import { createRender } from "@commons-ui/testing-library"; +import React from "react"; + +import DataIndicators from "./DataIndicators"; + +import theme from "@/climatemappedafrica/theme"; + +// eslint-disable-next-line testing-library/render-result-naming-convention +const render = createRender({ theme }); + +const defaultProps = { + title: [ + { + text: "Indicators", + children: null, + }, + ], + indicators: [ + { + title: "Overview", + description: null, + }, + ], +}; + +describe("", () => { + it("renders unchanged", () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/apps/climatemappedafrica/src/components/DataIndicators/Icon.js b/apps/climatemappedafrica/src/components/DataIndicators/Icon.js new file mode 100644 index 000000000..964ede49a --- /dev/null +++ b/apps/climatemappedafrica/src/components/DataIndicators/Icon.js @@ -0,0 +1,53 @@ +import { Box, ButtonBase, Typography } from "@mui/material"; +import Image from "next/image"; +import PropTypes from "prop-types"; +import React from "react"; + +function Icon({ item, handleIconClick, currentItemIndex, index }) { + const { title, primaryIcon, secondaryIcon } = item; + + return ( + + ({ + position: "relative", + height: { xs: typography.pxToRem(88.8), lg: typography.pxToRem(140) }, + width: { xs: typography.pxToRem(88.8), lg: typography.pxToRem(140) }, + })} + > + + + ({ + display: "flex", + marginLeft: typography.pxToRem(31), + fontSize: typography.pxToRem(20), + width: { xs: typography.pxToRem(200), lg: "auto" }, + })} + > + {title} + + + ); +} + +Icon.propTypes = { + handleIconClick: PropTypes.func, + currentItemIndex: PropTypes.number, + index: PropTypes.number, + item: PropTypes.shape({ + image: PropTypes.string, + title: PropTypes.string, + hover: PropTypes.string, + }), +}; + +export default Icon; diff --git a/apps/climatemappedafrica/src/components/DataIndicators/IndicatorPanel.js b/apps/climatemappedafrica/src/components/DataIndicators/IndicatorPanel.js new file mode 100644 index 000000000..40849baa4 --- /dev/null +++ b/apps/climatemappedafrica/src/components/DataIndicators/IndicatorPanel.js @@ -0,0 +1,48 @@ +import { RichTypography } from "@commons-ui/core"; +import { RichText } from "@commons-ui/payload"; +import { ButtonBase, Slide } from "@mui/material"; +import PropTypes from "prop-types"; +import React from "react"; + +function IndicatorPanel({ currentItem, onClick, component, ...props }) { + const Component = component || Slide; + return ( + + ({ + display: "flex", + justifyContent: "flex-start", + alignItems: "flex-start", + flexDirection: "column", + color: palette.text.secondary, + })} + onClick={onClick} + > + {currentItem?.title && ( + + {currentItem.title} + + )} + {currentItem?.description && ( + + )} + + + ); +} + +IndicatorPanel.propTypes = { + component: PropTypes.elementType, + currentItem: PropTypes.shape({ + title: PropTypes.string, + description: PropTypes.string, + }), + onClick: PropTypes.func, +}; + +export default IndicatorPanel; diff --git a/apps/climatemappedafrica/src/components/DataIndicators/index.js b/apps/climatemappedafrica/src/components/DataIndicators/index.js new file mode 100644 index 000000000..89e312cc6 --- /dev/null +++ b/apps/climatemappedafrica/src/components/DataIndicators/index.js @@ -0,0 +1,3 @@ +import DataIndicators from "./DataIndicators"; + +export default DataIndicators; diff --git a/apps/climatemappedafrica/src/components/DataVisualisationGuide/index.js b/apps/climatemappedafrica/src/components/DataVisualisationGuide/index.js new file mode 100644 index 000000000..55b86a7fd --- /dev/null +++ b/apps/climatemappedafrica/src/components/DataVisualisationGuide/index.js @@ -0,0 +1,92 @@ +import { RichTypography } from "@commons-ui/core"; +import { useMediaQuery, Box, Grid } from "@mui/material"; +import PropTypes from "prop-types"; +import React from "react"; + +import Card from "@/climatemappedafrica/components/Card"; +import Carousel from "@/climatemappedafrica/components/Carousel"; +import Section from "@/climatemappedafrica/components/Section"; + +function DataVisualisationGuide({ title, items }) { + const isDesktop = useMediaQuery((theme) => theme.breakpoints.up("lg")); + + if (!items?.length) { + return null; + } + return ( + ({ + padding: `${theme.typography.pxToRem(40)} 0`, + })} + > +
+ + {title} + + + + {items.map((item) => ( + + ))} + + + + + {items.map((item) => ( + + ({ + marginTop: theme.typography.pxToRem(40), + "& .bold": { + fontWeight: "bold", + }, + })} + /> + + ))} + + +
+ + ); +} + +DataVisualisationGuide.propTypes = { + title: PropTypes.string, + items: PropTypes.arrayOf( + PropTypes.shape({ + description: PropTypes.string || PropTypes.array, + image: PropTypes.string, + }), + ), +}; + +export default DataVisualisationGuide; diff --git a/apps/climatemappedafrica/src/components/DropdownSearch/index.js b/apps/climatemappedafrica/src/components/DropdownSearch/index.js index 24b03aa1a..dfb33c3f3 100644 --- a/apps/climatemappedafrica/src/components/DropdownSearch/index.js +++ b/apps/climatemappedafrica/src/components/DropdownSearch/index.js @@ -4,9 +4,9 @@ import { Typography, List, ListItem, + SvgIcon, } from "@mui/material"; import makeStyles from "@mui/styles/makeStyles"; -import Image from "next/image"; import { useRouter } from "next/router"; import PropTypes from "prop-types"; import React, { useEffect, useState } from "react"; @@ -66,7 +66,7 @@ function DropdownSearch({ label = "Search for a location", locations, onClick, - icon: iconProp = SearchIcon, + icon: IconProp = SearchIcon, placeholder, variant, ...props @@ -112,8 +112,15 @@ function DropdownSearch({ } }; - const icon = - !suggestions?.length || variant === "explore" ? iconProp : SearchIcon; + let iconComponent = SearchIcon; + let iconBorder; + if (variant === "explore") { + iconComponent = IconProp; + iconBorder = { + borderRadius: "50%", + border: "2px solid #fff", + }; + } const searchIconButton = ( - search + ); @@ -171,7 +186,7 @@ DropdownSearch.propTypes = { label: PropTypes.string, href: PropTypes.string, onClick: PropTypes.func, - icon: PropTypes.string, + icon: PropTypes.elementType, locations: PropTypes.arrayOf(PropTypes.shape({})), variant: PropTypes.string, placeholder: PropTypes.string, 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/Footer/index.js b/apps/climatemappedafrica/src/components/Footer/index.js index eff78692f..aa58eba96 100644 --- a/apps/climatemappedafrica/src/components/Footer/index.js +++ b/apps/climatemappedafrica/src/components/Footer/index.js @@ -1,32 +1,57 @@ -import { QuickLinks, LogoButton, Copyright } from "@commons-ui/core"; +import { QuickLinks, Copyright } from "@commons-ui/core"; import { Link, StayInTouch } from "@commons-ui/next"; import { RichText } from "@commons-ui/payload"; -import { Grid } from "@mui/material"; +import { Box, Grid } from "@mui/material"; import React from "react"; import useStyles from "./useStyles"; +import NextImageButton from "@/climatemappedafrica/components/NextImageButton"; import Section from "@/climatemappedafrica/components/Section"; function Footer(props) { - const { title, connect, description, logo: logoProps, links } = props; + const { + title, + connect, + description, + logo: logoProps, + links, + variant, + } = props; const classes = useStyles(props); + return ( -
-
+ ({ + display: { + xs: "block", + lg: variant !== "explore" ? "block" : "none", + }, + background: theme.palette.grey.dark, + height: "auto", + padding: `${theme.typography.pxToRem(80)} 0`, + [theme.breakpoints.up("md")]: { + paddingTop: `${theme.typography.pxToRem(58)}`, + paddingBottom: `${theme.typography.pxToRem(82)}`, + }, + })} + > +
{logoProps && ( - ({ + margin: "0 auto", + padding: 0, + [theme.breakpoints.up("lg")]: { + margin: 0, + }, + })} /> )} @@ -34,9 +59,17 @@ function Footer(props) { {description && ( ({ + color: theme.palette.text.secondary, + padding: `${theme.typography.pxToRem(32)} 0`, + fontSize: theme.typography.subtitle1.fontSize, + textAlign: "center", + [theme.breakpoints.up("lg")]: { + textAlign: "left", + }, + })} elements={description} - typographyProps={{ + TypographyProps={{ LinkProps: { color: "text.secondary", sx: { @@ -58,9 +91,12 @@ function Footer(props) { ({ + margin: "0 auto", + flexDirection: "row", + justifyContent: "center", + marginTop: theme.typography.pxToRem(44.19), + })} > {links && ( @@ -95,7 +131,7 @@ function Footer(props) {
-
+ ); } diff --git a/apps/climatemappedafrica/src/components/Footer/useStyles.js b/apps/climatemappedafrica/src/components/Footer/useStyles.js index 603fb2cc9..3eb03a86b 100644 --- a/apps/climatemappedafrica/src/components/Footer/useStyles.js +++ b/apps/climatemappedafrica/src/components/Footer/useStyles.js @@ -1,68 +1,6 @@ import makeStyles from "@mui/styles/makeStyles"; const useStyles = makeStyles(({ breakpoints, palette, typography }) => ({ - root: { - background: palette.grey.dark, - height: "auto", - padding: `${typography.pxToRem(80)} 0`, - [breakpoints.up("md")]: { - paddingTop: `${typography.pxToRem(58)}`, - paddingBottom: `${typography.pxToRem(82)}`, - }, - }, - section: {}, - logoButton: { - margin: "0 auto", - padding: 0, - [breakpoints.up("lg")]: { - margin: 0, - }, - }, - allLinks: { - margin: "0 auto", - flexDirection: "row", - justifyContent: "center", - marginTop: typography.pxToRem(44.19), - }, - stayInTouch: { - display: "flex", - flexDirection: "column", - alignItems: "center", - letterspacing: typography.pxToRem(0.7), - [breakpoints.up("lg")]: { - alignItems: "flex-start", - }, - }, - stayInTouchIcon: { - height: "auto", - objectFit: "none", - display: "flex", - width: "auto", - }, - stayInTouchText: { - color: palette.text.secondary, - fontSize: typography.subtitle2.fontSize, - fontWeight: "bold", - padding: `${typography.pxToRem(10)} ${typography.pxToRem(8)}`, - [breakpoints.up("lg")]: { - padding: 0, - }, - }, - stayInTouchLink: { - padding: 0, - }, - stayInTouchLinks: { - justifyContent: "center", - marginLeft: typography.pxToRem(-14), // (48 - 20) / 2 - marginTop: typography.pxToRem(24), - "& > a": { - height: typography.pxToRem(48), - width: typography.pxToRem(48), - borderRight: "none", - display: "flex", - justifyContent: "center", - }, - }, quickLinkRoot: { textAlign: "center", padding: `${typography.pxToRem(32)} 0 `, @@ -93,15 +31,6 @@ const useStyles = makeStyles(({ breakpoints, palette, typography }) => ({ fontSize: typography.subtitle2.fontSize, fontWeight: "bold", }, - description: { - color: palette.text.secondary, - padding: `${typography.pxToRem(32)} 0`, - fontSize: typography.subtitle1.fontSize, - textAlign: "center", - [breakpoints.up("lg")]: { - textAlign: "left", - }, - }, copyright: { margin: 0, display: "flex", 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..4dcb508f8 --- /dev/null +++ b/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/DesktopPanel.js @@ -0,0 +1,96 @@ +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) => { + // 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 df3330c20..5c0aff142 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/RichData.js +++ b/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/RichData.js @@ -1,13 +1,11 @@ +import { Paper } from "@mui/material"; import PropTypes from "prop-types"; import React, { useRef } from "react"; -import useStyles from "./useStyles"; - import Profile from "@/climatemappedafrica/components/HURUmap/Panel/Profile"; import TreeView from "@/climatemappedafrica/components/HURUmap/TreeView"; function RichData({ primaryProfile, ...props }) { - const classes = useStyles(props); const profileRef = useRef(); const handleLabelClick = (id) => { @@ -18,19 +16,39 @@ function RichData({ primaryProfile, ...props }) { }; return ( - <> + ({ + bgcolor: "background.paper", + border: `1px solid ${palette.grey.main}`, + borderLeft: "none", + borderRight: "none", + scrollMargin: "40px", + })} + > ({ + width: `calc((100vw - ${theme.widths.values.lg}px)/2 + 79px)`, + minWidth: theme.typography.pxToRem(300), + paddingTop: theme.typography.pxToRem(76), + flexShrink: 0, + top: theme.typography.pxToRem(104), + bottom: 0, + position: "fixed", + left: 0, + })} /> - + ); } 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 414f0c169..000000000 --- a/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/useStyles.js +++ /dev/null @@ -1,55 +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", - }, - treeView: { - width: `calc((100vw - ${widths.values.lg}px)/2 + 79px)`, - minWidth: typography.pxToRem(300), - paddingTop: typography.pxToRem(76), - flexShrink: 0, - top: typography.pxToRem(110), - bottom: 0, - position: "fixed", - left: 0, - }, - }), -); - -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, -}; 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; diff --git a/apps/climatemappedafrica/src/components/HURUmap/TreeView/TreeView.js b/apps/climatemappedafrica/src/components/HURUmap/TreeView/TreeView.js new file mode 100644 index 000000000..78e4e47d0 --- /dev/null +++ b/apps/climatemappedafrica/src/components/HURUmap/TreeView/TreeView.js @@ -0,0 +1,210 @@ +import { Box, SvgIcon } from "@mui/material"; +import { alpha, styled } from "@mui/material/styles"; +import { SimpleTreeView } from "@mui/x-tree-view/SimpleTreeView"; +import { + TreeItem2Checkbox, + TreeItem2Content, + TreeItem2GroupTransition, + TreeItem2IconContainer, + TreeItem2Label, + TreeItem2Root, +} from "@mui/x-tree-view/TreeItem2"; +import { TreeItem2Icon } from "@mui/x-tree-view/TreeItem2Icon"; +import { TreeItem2Provider } from "@mui/x-tree-view/TreeItem2Provider"; +import { useTreeItem2 } from "@mui/x-tree-view/useTreeItem2"; +import clsx from "clsx"; +import PropTypes from "prop-types"; +import React from "react"; + +import CheckIcon from "@/climatemappedafrica/assets/icons/checked.svg"; +import slugify from "@/climatemappedafrica/utils/slugify"; + +const CustomTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({ + background: "inherit", + borderRadius: 0, + borderBottom: `1px solid transparent`, + borderRight: `2px solid transparent`, + padding: 0, + paddingRight: theme.spacing(2.5), + "&:hover": { + background: "inherit", + }, + "&.expanded": { + backgroundColor: theme.palette.background.default, + borderRight: `2px solid ${theme.palette.primary.main}`, + borderBottom: `1px solid ${theme.palette.grey.main}`, + }, +})); + +const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) { + const { id, itemId, label, disabled, children, ...other } = props; + + const { + getRootProps, + getContentProps, + getIconContainerProps, + getCheckboxProps, + getLabelProps, + getGroupTransitionProps, + status, + } = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref }); + + return ( + + + ({ + ...(!children && { + pr: 0, + "&: hover": { + background: alpha(theme.palette.common.black, 0.04), + }, + }), + }), + })} + > + + ({ + ...theme.typography.caption, + height: 38, + display: "flex", + alignItems: "center", + justifyContent: "flex-end", + fontWeight: 500, + letterSpacing: 0.6, + ...(!children && { + fontWeight: 300, + paddingRight: 2.5, + }), + }), + })} + /> + + + + + {children && ( + + )} + + + ); +}); + +function CollapseIcon({ sx, ...props }) { + return ( + + ); +} + +function ExpandIcon({ sx, ...props }) { + return ( + ({ + fill: theme.palette.grey.main, + }), + ...(Array.isArray(sx) ? sx : [sx]), + ]} + /> + ); +} + +const TreeView = React.forwardRef(function TreeView(props, ref) { + const { items, onLabelClick, sx, ...others } = props; + + const handleItemClick = (e, itemId) => { + e.preventDefault(); + + if (onLabelClick) { + onLabelClick(itemId); + } + }; + if (!items?.length) { + return null; + } + return ( + ({ + textAlign: "right", + background: palette.background.paper, + }), + ...(Array.isArray(sx) ? sx : [sx]), + ]} + ref={ref} + > + + {items.map((item) => { + const itemId = slugify(item.title); + + return ( + + {item.children.map((child) => { + const childId = slugify(`${itemId}-${child.title}`); + + return ( + + ); + })} + + ); + })} + + + ); +}); + +TreeView.propTypes = { + items: PropTypes.arrayOf( + PropTypes.shape({ + title: PropTypes.string, + children: PropTypes.arrayOf( + PropTypes.shape({ + title: PropTypes.string, + }), + ), + }), + ), + onLabelClick: PropTypes.func, +}; + +export default TreeView; diff --git a/apps/climatemappedafrica/src/components/HURUmap/TreeView/TreeView.snap.js b/apps/climatemappedafrica/src/components/HURUmap/TreeView/TreeView.snap.js new file mode 100644 index 000000000..dee356bbe --- /dev/null +++ b/apps/climatemappedafrica/src/components/HURUmap/TreeView/TreeView.snap.js @@ -0,0 +1,70 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders unchanged 1`] = ` +
+
+
    + + +
+
+
+`; diff --git a/apps/climatemappedafrica/src/components/HURUmap/TreeView/TreeView.test.js b/apps/climatemappedafrica/src/components/HURUmap/TreeView/TreeView.test.js new file mode 100644 index 000000000..0a73dab2a --- /dev/null +++ b/apps/climatemappedafrica/src/components/HURUmap/TreeView/TreeView.test.js @@ -0,0 +1,37 @@ +import { createRender } from "@commons-ui/testing-library"; +import React from "react"; + +import TreeView from "."; + +import theme from "@/climatemappedafrica/theme"; + +// eslint-disable-next-line testing-library/render-result-naming-convention +const render = createRender({ theme }); + +const defaultProps = { + items: [ + { + title: "Annual Temperature", + children: [ + { + title: "Annual Temperature", + }, + ], + }, + { + title: "Temperature Variation", + children: [ + { + title: "Decadal Temperature Variation", + }, + ], + }, + ], +}; + +describe("", () => { + it("renders unchanged", () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/apps/climatemappedafrica/src/components/HURUmap/TreeView/index.js b/apps/climatemappedafrica/src/components/HURUmap/TreeView/index.js index 503066580..3abcc494d 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/TreeView/index.js +++ b/apps/climatemappedafrica/src/components/HURUmap/TreeView/index.js @@ -1,92 +1,3 @@ -import TreeItem from "@mui/lab/TreeItem"; -import MuiTreeView from "@mui/lab/TreeView"; -import { Typography } from "@mui/material"; -import clsx from "clsx"; -import PropTypes from "prop-types"; -import React, { useState } from "react"; - -import useStyles from "./useStyles"; - -import CheckIcon from "@/climatemappedafrica/assets/icons/checked.svg"; -import slugify from "@/climatemappedafrica/utils/slugify"; - -function TreeView({ items, onLabelClick, ...props }) { - const classes = useStyles(props); - const [expanded, setExpanded] = useState(); - - const handleLabelClick = (e) => { - e.preventDefault(); - const { id, expand } = e.target.dataset; - if (expand) { - setExpanded(id); - } - if (onLabelClick) { - onLabelClick(id); - } - }; - - if (!items?.length) { - return null; - } - return ( -
- - {items.map((item) => { - const itemId = slugify(item.title); - - return ( - - - {item.title} - - - - } - onLabelClick={handleLabelClick} - classes={{ - root: classes.tree, - expanded: classes.expanded, - label: classes.label, - }} - > - {item.children.map((child) => { - const childId = slugify(`${itemId}-${child.title}`); - - return ( - - {child.title} - - } - onLabelClick={handleLabelClick} - classes={{ - label: clsx(classes.label, classes.childLabel), - }} - /> - ); - })} - - ); - })} - -
- ); -} - -TreeView.propTypes = { - items: PropTypes.arrayOf( - PropTypes.shape({ - children: PropTypes.arrayOf(PropTypes.shape({})), - }), - ), - onLabelClick: PropTypes.func, -}; +import TreeView from "./TreeView"; export default TreeView; diff --git a/apps/climatemappedafrica/src/components/HURUmap/TreeView/index.stories.js b/apps/climatemappedafrica/src/components/HURUmap/TreeView/index.stories.js deleted file mode 100644 index 95b1232c9..000000000 --- a/apps/climatemappedafrica/src/components/HURUmap/TreeView/index.stories.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from "react"; - -import TreeView from "@/climatemappedafrica/components/HURUmap/TreeView"; - -export default { - title: "Components/HURUmap/TreeView", - argTypes: {}, -}; - -function Template({ ...args }) { - return ; -} - -export const Default = Template.bind({}); - -Default.args = {}; diff --git a/apps/climatemappedafrica/src/components/HURUmap/TreeView/useStyles.js b/apps/climatemappedafrica/src/components/HURUmap/TreeView/useStyles.js deleted file mode 100644 index 358158f13..000000000 --- a/apps/climatemappedafrica/src/components/HURUmap/TreeView/useStyles.js +++ /dev/null @@ -1,51 +0,0 @@ -import makeStyles from "@mui/styles/makeStyles"; - -const useStyles = makeStyles(({ typography, palette }) => ({ - root: { - textAlign: "right", - background: palette.background.paper, - "& .MuiTreeItem-root.Mui-selected > .MuiTreeItem-content .MuiTreeItem-label": - { - backgroundColor: "unset", - }, - "& .MuiTreeItem-iconContainer": { - width: 0, - }, - }, - label: { - marginRight: typography.pxToRem(20), - height: typography.pxToRem(38), - display: "flex", - alignItems: "center", - justifyContent: "flex-end", - fontWeight: 500, - letterSpacing: 0.6, - }, - childLabel: { - fontWeight: 300, - }, - icon: { - marginLeft: typography.pxToRem(20), - fill: palette.grey.main, - width: typography.pxToRem(19), - }, - tree: {}, - expanded: { - "& .MuiCollapse-root": { - marginLeft: 0, - borderTop: `1px solid ${palette.grey.main}`, - borderBottom: `1px solid ${palette.grey.main}`, - }, - "&> .MuiTreeItem-content": { - borderRightColor: palette.primary.main, - borderRightWidth: typography.pxToRem(2), - borderRightStyle: "Solid", - backgroundColor: palette.background.default, - }, - "& $icon": { - fill: "#666666", - }, - }, -})); - -export default useStyles; diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.js b/apps/climatemappedafrica/src/components/Hero/Hero.js new file mode 100644 index 000000000..7f375673c --- /dev/null +++ b/apps/climatemappedafrica/src/components/Hero/Hero.js @@ -0,0 +1,163 @@ +import { RichTypography } from "@commons-ui/core"; +import { Box, Grid, useMediaQuery } from "@mui/material"; +import dynamic from "next/dynamic"; +import PropTypes from "prop-types"; +import React, { useState } from "react"; + +import heroBg from "@/climatemappedafrica/assets/images/bg-map-white.jpg"; +import DropdownSearch from "@/climatemappedafrica/components/DropdownSearch"; +import Image from "@/climatemappedafrica/components/Image"; +import RichHeader from "@/climatemappedafrica/components/RichHeader"; +import Section from "@/climatemappedafrica/components/Section"; + +const Map = dynamic(() => import("./Map"), { ssr: false }); + +function Hero({ + comment, + title, + subtitle, + searchLabel, + featuredLocations, + searchPlaceholder, + properties, + location: { center }, + level, + ...props +}) { + const isUpLg = useMediaQuery((theme) => theme.breakpoints.up("lg")); + const [hoverGeo, setHoverGeo] = useState(null); + const continentLevelZoom = isUpLg ? 2.4 : 2.1; + const countryLevelZoom = isUpLg ? 6 : 5.25; + const zoom = level === "continent" ? continentLevelZoom : countryLevelZoom; + + return ( + + + + +
+ + + + + {title} + + + + {comment} + + + {/* Since map is dynamic-ally loaded, no need for implementation="css" */} + + + {center ? ( + + ) : null} + + + {hoverGeo} + + + + + +
+ + ); +} + +Hero.propTypes = { + comment: PropTypes.string, + subtitle: PropTypes.arrayOf(PropTypes.shape({})), + searchLabel: PropTypes.string, + title: PropTypes.string, + featuredLocations: PropTypes.arrayOf(PropTypes.shape({})), + properties: PropTypes.shape({}), + level: PropTypes.string, +}; + +export default Hero; diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.snap.js b/apps/climatemappedafrica/src/components/Hero/Hero.snap.js new file mode 100644 index 000000000..ec7dfe4c5 --- /dev/null +++ b/apps/climatemappedafrica/src/components/Hero/Hero.snap.js @@ -0,0 +1,114 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders unchanged 1`] = ` +
+
+
+ +
+
+
+
+
+
+
+

+ Data to hold your government accountable +

+
+
+
+ PesaYetu helps journalists, researchers and activists transform their work with in-depth county-specific information. Get started now with datasets from Kenya. + +
+
+
+ +
+
+
+
+
+
+
+
+
+`; diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.test.js b/apps/climatemappedafrica/src/components/Hero/Hero.test.js new file mode 100644 index 000000000..566723acb --- /dev/null +++ b/apps/climatemappedafrica/src/components/Hero/Hero.test.js @@ -0,0 +1,58 @@ +import { createRender } from "@commons-ui/testing-library"; +import React from "react"; + +import Hero from "./Hero"; + +import theme from "@/climatemappedafrica/theme"; + +// eslint-disable-next-line testing-library/render-result-naming-convention +const render = createRender({ theme }); + +const defaultProps = { + title: [ + { + children: [ + { text: "Data to hold your government accountable", children: null }, + ], + }, + ], + subtitle: [ + { + children: [ + { + text: "PesaYetu helps journalists, researchers and activists transform their work with in-depth county-specific information. Get started now with datasets from Kenya.\n", + children: null, + }, + ], + }, + ], + searchLabel: "Search for a location", + featuredLocations: [], + searchPlaceholder: "Search for a location", + properties: { + code: "KE", + name: "Kenya", + area: 586002.515, + parent: "AF", + level: "country", + version: "Climate", + }, + location: {}, + level: "country", + id: "670e3996766697e7feb349d5", + blockType: "hero", + slug: "hero", + boundary: { + type: "FeatureCollection", + features: [], + }, + variant: "explore", + icon: null, +}; + +describe("", () => { + it("renders unchanged", () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/apps/climatemappedafrica/src/components/Hero/Map.js b/apps/climatemappedafrica/src/components/Hero/Map.js new file mode 100644 index 000000000..8b34ab9f2 --- /dev/null +++ b/apps/climatemappedafrica/src/components/Hero/Map.js @@ -0,0 +1,119 @@ +import { Box } from "@mui/material"; +import { useRouter } from "next/router"; +import PropTypes from "prop-types"; +import React from "react"; +import { MapContainer, GeoJSON } from "react-leaflet"; + +import "leaflet/dist/leaflet.css"; +import theme from "@/climatemappedafrica/theme"; + +function Map({ + center, + zoom, + boundary, + styles = { + height: "100%", + width: "100%", + }, + geoJSONStyles = { + color: "#2A2A2C", + weight: 1, + opacity: 1, + fillColor: "#fff", + dashArray: "2", + }, + onLayerMouseOver, + featuredLocations, +}) { + const router = useRouter(); + + const countyCodes = featuredLocations?.map(({ code }) => code); + + const onEachFeature = (feature, layer) => { + layer.setStyle({ + fillColor: theme.palette.background.default, + fillOpacity: 1, + }); + + if (countyCodes.includes(feature.properties.code?.toLowerCase())) { + layer.setStyle({ + weight: 1.5, + dashArray: 0, + }); + layer.on("mouseover", () => { + onLayerMouseOver(feature.properties.name.toLowerCase()); + layer.setStyle({ + fillColor: theme.palette.primary.main, + fillOpacity: 0.5, + }); + }); + layer.on("mouseout", () => { + onLayerMouseOver(null); + layer.setStyle({ + fillOpacity: 1, + fillColor: theme.palette.background.default, + }); + }); + layer.on("click", () => { + router.push(`/explore/${feature.properties.code.toLowerCase()}`); + }); + } + }; + + return ( + ({ + position: "relative", + height: { sm: "299px", lg: "471px" }, + width: { sm: "236px", lg: "371px" }, + marginTop: { sm: "55px", lg: "42px" }, + "& .leaflet-container": { + background: "transparent", + }, + })} + > + + + + + ); +} + +Map.propTypes = { + center: (props, propName, componentName) => { + const { [propName]: prop } = props; + if (!Array.isArray(prop) || prop.length !== 2 || prop.some(Number.isNaN)) { + return new Error( + `Invalid prop \`${propName}\` supplied to` + + ` \`${componentName}\`. Validation failed.`, + ); + } + return null; + }, + zoom: PropTypes.number, + styles: PropTypes.shape({}), + boundary: PropTypes.shape({}), + geoJSONStyles: PropTypes.shape({}), + onLayerMouseOver: PropTypes.func, + featuredLocations: PropTypes.arrayOf( + PropTypes.shape({ code: PropTypes.string }), + ), +}; + +export default Map; diff --git a/apps/climatemappedafrica/src/components/Hero/index.js b/apps/climatemappedafrica/src/components/Hero/index.js new file mode 100644 index 000000000..4ca8fd8ad --- /dev/null +++ b/apps/climatemappedafrica/src/components/Hero/index.js @@ -0,0 +1,3 @@ +import Hero from "./Hero"; + +export default Hero; diff --git a/apps/climatemappedafrica/src/components/HowItWorks/Player.js b/apps/climatemappedafrica/src/components/HowItWorks/Player.js new file mode 100644 index 000000000..e893f04f4 --- /dev/null +++ b/apps/climatemappedafrica/src/components/HowItWorks/Player.js @@ -0,0 +1,48 @@ +/* eslint-disable jsx-a11y/media-has-caption */ +import PropTypes from "prop-types"; +import React, { useEffect } from "react"; +import videojs from "video.js"; +import "videojs-youtube"; +import "video.js/dist/video-js.css"; + +function Player({ url, type }) { + const videoRef = React.useRef(null); + const playerRef = React.useRef(null); + + useEffect(() => { + if (videoRef.current && !playerRef.current) { + const options = { + autoplay: false, + controls: true, + preload: "auto", + sources: [{ src: url, type }], + techOrder: ["youtube"], + youtube: { ytControls: 2 }, + }; + playerRef.current = videojs(videoRef.current, options); + } + }, [url, type]); + + // Dispose the Video.js player when the functional component unmounts + useEffect(() => { + return () => { + if (playerRef.current) { + playerRef.current.dispose(); + playerRef.current = null; + } + }; + }, []); + + return ( +
+
+ ); +} + +Player.propTypes = { + url: PropTypes.string, + type: PropTypes.string, +}; + +export default Player; diff --git a/apps/climatemappedafrica/src/components/HowItWorks/index.js b/apps/climatemappedafrica/src/components/HowItWorks/index.js new file mode 100644 index 000000000..0133a6093 --- /dev/null +++ b/apps/climatemappedafrica/src/components/HowItWorks/index.js @@ -0,0 +1,195 @@ +import { Link } from "@commons-ui/next"; +import { RichText } from "@commons-ui/payload"; +import { Box, Grid, Typography } from "@mui/material"; +import PropTypes from "prop-types"; +import React from "react"; + +import Player from "@/climatemappedafrica/components/HowItWorks/Player"; +import useStyles from "@/climatemappedafrica/components/HowItWorks/useStyles"; +import Section from "@/climatemappedafrica/components/Section"; + +function HowItWorks({ + title, + description, + link, + video, + backgroundImage, + image: foregroundImage, + ...props +}) { + const classes = useStyles(props); + + return ( + + + ({ + display: { + xs: "none", + md: "block", + lg: "none", + }, + position: "absolute", + left: 0, + top: theme.typography.pxToRem(42), + width: "100%", + background: `linear-gradient(to right, #ffffffE6 0%, #ffffffE6 56%, transparent 56%, transparent 100%)`, + height: theme.typography.pxToRem(524), + })} + /> +
+ + ({ + position: { + md: "relative", + }, + top: { + md: 0, + }, + backgroundColor: { + lg: theme.palette.background.default, + }, + opacity: { + md: 0.9, + }, + height: { + md: theme.typography.pxToRem(524), + lg: theme.typography.pxToRem(600), + }, + padding: { + md: `${theme.typography.pxToRem(66)} ${theme.typography.pxToRem( + 77, + )} ${theme.typography.pxToRem(69)} 0`, + lg: `${theme.typography.pxToRem(81)} ${theme.typography.pxToRem(98)}`, + }, + })} + > + ({ + position: "relative", + "& .video-js": { + width: "100%", + height: "100%", + }, + "& .vjs-poster": { + backgroundColor: "#ffffffE6", + backgroundSize: { + xs: "120%", + md: "auto", + }, + }, + "& .video-js .vjs-big-play-button": { + display: "none", + }, + height: { + xs: theme.typography.pxToRem(227), + md: theme.typography.pxToRem(194), + lg: theme.typography.pxToRem(244), + }, + width: { + xs: "100%", + md: theme.typography.pxToRem(299), + lg: theme.typography.pxToRem(376), + }, + })} + > + + + ({ + marginTop: theme.typography.pxToRem(18), + })} + variant="h4" + > + {title} + + ({ + fontFamily: theme.typography.body1.fontFamily, + margin: `${theme.typography.pxToRem(16.5)} 0`, + color: theme.palette.grey.dark, + width: { + md: theme.typography.pxToRem(278), + }, + })} + /> + + {link.label} + + + + + ({ + position: "relative", + height: { + xs: theme.typography.pxToRem(265), + md: theme.typography.pxToRem(211), + lg: theme.typography.pxToRem(441.6), + }, + width: { + xs: theme.typography.pxToRem(253.6), + md: theme.typography.pxToRem(202), + lg: theme.typography.pxToRem(422.5), + }, + backgroundImage: `url(${foregroundImage.src})`, + backgroundSize: "contain", + backgroundRepeat: "no-repeat", + marginBottom: theme.typography.pxToRem(23), + })} + /> + + +
+ + ); +} + +HowItWorks.propTypes = { + ctaText: PropTypes.string, + description: PropTypes.string, + href: PropTypes.string, + title: PropTypes.string, +}; + +export default HowItWorks; diff --git a/apps/climatemappedafrica/src/components/HowItWorks/useStyles.js b/apps/climatemappedafrica/src/components/HowItWorks/useStyles.js new file mode 100644 index 000000000..494337cfb --- /dev/null +++ b/apps/climatemappedafrica/src/components/HowItWorks/useStyles.js @@ -0,0 +1,17 @@ +import makeStyles from "@mui/styles/makeStyles"; + +const useStyles = makeStyles(({ breakpoints, typography }) => ({ + section: { + zIndex: 1, + position: "relative", + paddingTop: typography.pxToRem(62), + [breakpoints.up("md")]: { + padding: `${typography.pxToRem(42)} 0`, + }, + [breakpoints.up("lg")]: { + padding: `${typography.pxToRem(64)} 0`, + }, + }, +})); + +export default useStyles; diff --git a/apps/climatemappedafrica/src/components/LineClampedRichTypography/LineClampedRichTypography.js b/apps/climatemappedafrica/src/components/LineClampedRichTypography/LineClampedRichTypography.js new file mode 100644 index 000000000..134af62dd --- /dev/null +++ b/apps/climatemappedafrica/src/components/LineClampedRichTypography/LineClampedRichTypography.js @@ -0,0 +1,54 @@ +import { RichTypography } from "@commons-ui/next"; +import { styled } from "@mui/material/styles"; +import PropTypes from "prop-types"; +import React from "react"; + +const LineClampedRichTypographyRoot = styled(RichTypography, { + shouldForwardProp: (prop) => !["lineClamp"].includes(prop), +})(({ lineClamp, theme }) => ({ + ...(lineClamp && { + display: "-webkit-box", + overflow: "hidden", + textOverflow: "ellipsis", + WebkitBoxOrient: "vertical", + ...Object.keys(theme.breakpoints.values).reduce((acc, cur) => { + let accBreakpoint = acc; + if (theme.breakpoints.values[cur]) { + accBreakpoint = {}; + acc[theme.breakpoints.up(cur)] = accBreakpoint; + } + let lineClampValue; + if (typeof lineClamp !== "object") { + lineClampValue = lineClamp?.toString(); + } else if (typeof lineClamp?.[cur] !== "object") { + lineClampValue = lineClamp[cur]?.toString(); + } + if (lineClampValue) { + accBreakpoint.WebkitLineClamp = lineClampValue; + accBreakpoint.lineClamp = lineClampValue; + } + + return acc; + }, {}), + }), +})); + +const LineClampedRichTypography = React.forwardRef( + function LineClampedRichTypography(props, ref) { + return ; + }, +); + +LineClampedRichTypography.propTypes = { + lineClamp: PropTypes.oneOfType([ + PropTypes.shape({}), + PropTypes.number, + PropTypes.string, + ]), +}; + +LineClampedRichTypography.defaultProps = { + lineClamp: undefined, +}; + +export default LineClampedRichTypography; diff --git a/apps/climatemappedafrica/src/components/LineClampedRichTypography/index.js b/apps/climatemappedafrica/src/components/LineClampedRichTypography/index.js new file mode 100644 index 000000000..71636634f --- /dev/null +++ b/apps/climatemappedafrica/src/components/LineClampedRichTypography/index.js @@ -0,0 +1,3 @@ +import LineClampedRichTypography from "./LineClampedRichTypography"; + +export default LineClampedRichTypography; diff --git a/apps/climatemappedafrica/src/components/Menu/index.js b/apps/climatemappedafrica/src/components/Menu/index.js index 003842c48..31ec0c843 100644 --- a/apps/climatemappedafrica/src/components/Menu/index.js +++ b/apps/climatemappedafrica/src/components/Menu/index.js @@ -1,10 +1,10 @@ +import { StayInTouch } from "@commons-ui/next"; import { Grid, Button, Typography } from "@mui/material"; import makeStyles from "@mui/styles/makeStyles"; import PropTypes from "prop-types"; import React from "react"; import Link from "@/climatemappedafrica/components/Link"; -import SocialMediaIcons from "@/climatemappedafrica/components/SocialMediaIcons"; const useStyles = makeStyles(({ typography, breakpoints, palette }) => ({ root: { @@ -57,6 +57,7 @@ const useStyles = makeStyles(({ typography, breakpoints, palette }) => ({ [breakpoints.up("lg")]: { fontSize: typography.pxToRem(16), }, + textTransform: "uppercase", }, menu: { margin: 0, @@ -125,10 +126,14 @@ function Menu({ links, children, socialLinks, ...props }) { root: index !== 0 ? classes.menuLinks : classes.links, text: classes.text, }} - sx={{ + sx={(theme) => ({ borderRadius: 20, border: index !== 0 ? 0 : "3px solid", - }} + color: { + xs: theme.palette.text.secondary, + lg: theme.palette.primary.main, + }, + })} > {item.label} @@ -137,7 +142,24 @@ function Menu({ links, children, socialLinks, ...props }) { ))} {children} - + ); } diff --git a/apps/climatemappedafrica/src/components/Navigation/DesktopNavigation/index.js b/apps/climatemappedafrica/src/components/Navigation/DesktopNavigation/index.js index b331ac243..478b0ea60 100644 --- a/apps/climatemappedafrica/src/components/Navigation/DesktopNavigation/index.js +++ b/apps/climatemappedafrica/src/components/Navigation/DesktopNavigation/index.js @@ -1,43 +1,24 @@ -import LogoButton from "@commons-ui/core/LogoButton"; import { Grid } from "@mui/material"; -import makeStyles from "@mui/styles/makeStyles"; import PropTypes from "prop-types"; import React from "react"; -import Image from "@/climatemappedafrica/components/Image"; -import Link from "@/climatemappedafrica/components/Link"; import Menu from "@/climatemappedafrica/components/Menu"; +import NextImageButton from "@/climatemappedafrica/components/NextImageButton"; import Section from "@/climatemappedafrica/components/Section"; -const useStyles = makeStyles(() => ({ - root: {}, - logoButton: { - paddingLeft: 0, - }, - section: {}, -})); - -function DesktopNavigation({ - logoProps, - menuProps, - desktopLogoProps, - socialLinks, - ...props -}) { - const classes = useStyles(props); - +function DesktopNavigation({ logo, menus, socialLinks }) { return ( -
-
+
+
- - - + {...logo} + width={200} + height={100} + priority + /> - + @@ -57,16 +38,9 @@ function DesktopNavigation({ } DesktopNavigation.propTypes = { - logoProps: PropTypes.shape({}), - menuProps: PropTypes.arrayOf(PropTypes.shape({})), + logo: PropTypes.shape({}), + menus: PropTypes.arrayOf(PropTypes.shape({})), socialLinks: PropTypes.arrayOf(PropTypes.shape({})), - desktopLogoProps: PropTypes.shape({ - alt: PropTypes.string, - href: PropTypes.string, - src: PropTypes.oneOfType([PropTypes.shape({}), PropTypes.string]), - width: PropTypes.number, - height: PropTypes.number, - }), }; export default DesktopNavigation; diff --git a/apps/climatemappedafrica/src/components/Navigation/ExploreNavigation/index.js b/apps/climatemappedafrica/src/components/Navigation/ExploreNavigation/index.js index 82420055c..f74bde844 100644 --- a/apps/climatemappedafrica/src/components/Navigation/ExploreNavigation/index.js +++ b/apps/climatemappedafrica/src/components/Navigation/ExploreNavigation/index.js @@ -1,6 +1,4 @@ -import LogoButton from "@commons-ui/core/LogoButton"; -import { Grid, Typography, useMediaQuery } from "@mui/material"; -import { useTheme } from "@mui/material/styles"; +import { Grid, Typography } from "@mui/material"; import makeStyles from "@mui/styles/makeStyles"; import { useTour } from "@reactour/tour"; import PropTypes from "prop-types"; @@ -8,26 +6,10 @@ import React from "react"; import SearchIcon from "@/climatemappedafrica/assets/icons/search-explore.svg"; import DropdownSearch from "@/climatemappedafrica/components/DropdownSearch"; -import Image from "@/climatemappedafrica/components/Image"; -import Link from "@/climatemappedafrica/components/Link"; +import NextImageButton from "@/climatemappedafrica/components/NextImageButton"; import Section from "@/climatemappedafrica/components/Section"; const useStyles = makeStyles(({ palette, typography }) => ({ - root: {}, - section: {}, - logoButton: { - padding: 0, - }, - help: { - color: "#666666", - textAlign: "center", - backgroundColor: "#EBEBEB", - borderRadius: typography.pxToRem(60), - marginLeft: typography.pxToRem(20), - width: typography.pxToRem(48), - height: typography.pxToRem(48), - cursor: "pointer", - }, searchLabel: { display: "none", }, @@ -59,36 +41,25 @@ const useStyles = makeStyles(({ palette, typography }) => ({ }, })); -function ExploreNavigation({ - logoProps, - menuProps, - onOpenHelp, - socialLinks, - desktopLogoProps, - mobileLogoProps, - ...props -}) { - const classes = useStyles(props); - const theme = useTheme(); - const isDesktop = useMediaQuery(theme.breakpoints.up("lg")); - const logoArgs = isDesktop ? desktopLogoProps : mobileLogoProps; +function ExploreNavigation({ logo, variant }) { + const classes = useStyles(); const { setIsOpen } = useTour(); const openTooltip = () => { setIsOpen(true); }; return ( -
-
+
+
- - - + {...logo} + width={200} + height={100} + priority + /> ({ + color: "#666666", + textAlign: "center", + backgroundColor: "#EBEBEB", + borderRadius: theme.typography.pxToRem(60), + marginLeft: theme.typography.pxToRem(20), + width: theme.typography.pxToRem(48), + height: theme.typography.pxToRem(48), + cursor: "pointer", + })} > ? @@ -128,22 +108,8 @@ function ExploreNavigation({ } ExploreNavigation.propTypes = { - logoProps: PropTypes.shape({}), - menuProps: PropTypes.arrayOf(PropTypes.shape({})), - onOpenHelp: PropTypes.func, - socialLinks: PropTypes.arrayOf(PropTypes.shape({})), - desktopLogoProps: PropTypes.shape({ - alt: PropTypes.string, - href: PropTypes.string, - src: PropTypes.oneOfType([PropTypes.shape({}), PropTypes.string]), - width: PropTypes.number, - height: PropTypes.number, - }), - mobileLogoProps: PropTypes.shape({ - alt: PropTypes.string, - href: PropTypes.string, - src: PropTypes.oneOfType([PropTypes.shape({}), PropTypes.string]), - }), + logo: PropTypes.shape({}), + variant: PropTypes.string, }; export default ExploreNavigation; diff --git a/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js b/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js index 45892583e..1628a8dc3 100644 --- a/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js +++ b/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js @@ -1,19 +1,26 @@ -import LogoButton from "@commons-ui/core/LogoButton"; -import { Grid } from "@mui/material"; +import { + Grid, + Slide, + Dialog, + DialogActions, + IconButton, + DialogContent, + SvgIcon, +} from "@mui/material"; import makeStyles from "@mui/styles/makeStyles"; -import Image from "next/image"; +import { useRouter } from "next/router"; import PropTypes from "prop-types"; -import React from "react"; +import React, { useState } from "react"; -import Link from "@/climatemappedafrica/components/Link"; +import SearchIcon from "@/climatemappedafrica/assets/icons/search-open.svg"; +import MenuCloseIcon from "@/climatemappedafrica/assets/menu_close.svg"; +import MenuOpenIcon from "@/climatemappedafrica/assets/menu_open.svg"; +import DropdownSearch from "@/climatemappedafrica/components/DropdownSearch"; +import Menu from "@/climatemappedafrica/components/Menu"; +import NextImageButton from "@/climatemappedafrica/components/NextImageButton"; import Section from "@/climatemappedafrica/components/Section"; const useStyles = makeStyles(({ breakpoints, typography, palette }) => ({ - root: {}, - logoButton: { - padding: 0, - }, - section: {}, dialog: { padding: 0, }, @@ -140,29 +147,148 @@ const useStyles = makeStyles(({ breakpoints, typography, palette }) => ({ }, })); -function MobileNavigation({ - logoProps, - menuProps, - mobileLogoProps, - drawerLogoProps, - socialLinks, - ...props -}) { +const Transition = React.forwardRef(function Transition(props, ref) { + return ; +}); + +function MobileNavigation({ drawerLogo, logo, menus, socialLinks, ...props }) { const classes = useStyles(props); + const [open, setOpen] = useState(false); + const router = useRouter(); + + const handleClickOpen = (e) => { + e?.preventDefault(); + setOpen(true); + }; + const handleClose = (e) => { + e?.preventDefault(); + setOpen(false); + }; + + const handleClickSearch = (code) => { + setOpen(false); + if (code) { + router.push(`explore/${code}`); + } + }; return ( -
-
+
+
- - + + + + ({ + color: theme.palette.grey.dark, + background: "#F0F0F0", + borderRadius: theme.typography.pxToRem(50), + height: theme.typography.pxToRem(34), + padding: 0, + width: theme.typography.pxToRem(34), + "&:hover": { + background: "#F0F0F0", + borderRadius: theme.typography.pxToRem(50), + }, + })} > - - + + + + +
+ + + + + + + + + + +
+ + +
+ + + +
+ +
@@ -170,15 +296,9 @@ function MobileNavigation({ } MobileNavigation.propTypes = { - logoProps: PropTypes.shape({}), - menuProps: PropTypes.arrayOf(PropTypes.shape({})), - mobileLogoProps: PropTypes.shape({ - alt: PropTypes.string, - href: PropTypes.string, - src: PropTypes.oneOfType([PropTypes.shape({}), PropTypes.string]), - width: PropTypes.number, - height: PropTypes.number, - }), + drawerLogo: PropTypes.shape({}), + logo: PropTypes.shape({}), + menus: PropTypes.arrayOf(PropTypes.shape({})), socialLinks: PropTypes.arrayOf(PropTypes.shape({})), }; diff --git a/apps/climatemappedafrica/src/components/Navigation/index.js b/apps/climatemappedafrica/src/components/Navigation/index.js index 866c319f1..78cd4a134 100644 --- a/apps/climatemappedafrica/src/components/Navigation/index.js +++ b/apps/climatemappedafrica/src/components/Navigation/index.js @@ -45,7 +45,7 @@ function Navigation({ variant, ...props }) { > {variant?.toLowerCase() === "explore" ? ( diff --git a/apps/climatemappedafrica/src/components/Navigation/index.stories.js b/apps/climatemappedafrica/src/components/Navigation/index.stories.js deleted file mode 100644 index 18b1fa64e..000000000 --- a/apps/climatemappedafrica/src/components/Navigation/index.stories.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from "react"; - -import Navigation from "."; - -import { navigationArgs } from "@/climatemappedafrica/config"; - -export default { - title: "Sections/Navigation", - argTypes: {}, -}; - -function Template({ ...args }) { - return ; -} -export const Default = Template.bind({}); - -Default.args = { - ...navigationArgs, -}; diff --git a/apps/climatemappedafrica/src/components/NextImageButton/index.js b/apps/climatemappedafrica/src/components/NextImageButton/index.js new file mode 100644 index 000000000..5995199be --- /dev/null +++ b/apps/climatemappedafrica/src/components/NextImageButton/index.js @@ -0,0 +1,23 @@ +import { ImageButton, Link } from "@commons-ui/next"; +import Image from "next/image"; + +function NextImageButton(props) { + const { alt, height, href, priority, src, width, ...other } = props; + + if (!src) { + return null; + } + return ( + + {alt} + + ); +} + +export default NextImageButton; diff --git a/apps/climatemappedafrica/src/components/Page/Base.js b/apps/climatemappedafrica/src/components/Page/Base.js deleted file mode 100644 index 45cf7010e..000000000 --- a/apps/climatemappedafrica/src/components/Page/Base.js +++ /dev/null @@ -1,78 +0,0 @@ -import { useMediaQuery } from "@mui/material"; -import { useTheme } from "@mui/material/styles"; -import { NextSeo } from "next-seo"; -import PropTypes from "prop-types"; -import React from "react"; - -import Footer from "@/climatemappedafrica/components/Footer"; -import Navigation from "@/climatemappedafrica/components/Navigation"; -import { navigationArgs } from "@/climatemappedafrica/config"; -import getNavigationMenu from "@/climatemappedafrica/functions/menus/getNavigationMenu"; - -/** - * Base page that can be used to build all other pages. - */ -function BasePage({ children, menus, variant, footer: footerProps, ...props }) { - const seo = {}; - const navigation = getNavigationMenu(menus?.primaryMenu || []); - const { menuProps, socialLinks } = navigation; - const { desktopLogoProps, mobileLogoProps, drawerLogoProps } = navigationArgs; - const theme = useTheme(); - - const isDesktop = useMediaQuery(theme.breakpoints.up("lg")); - const navigationProps = { - ...props, - ...menus, - menuProps, - socialLinks, - desktopLogoProps, - mobileLogoProps, - drawerLogoProps, - }; - - const pageSeo = {}; - pageSeo.title = seo?.title || undefined; - pageSeo.description = seo?.metaDesc || undefined; - pageSeo.canonical = seo?.canonical || undefined; - if (seo?.opengraphType || seo?.opengraphImage) { - pageSeo.openGraph = {}; - if (seo.opengraphImage) { - pageSeo.openGraph.images = [ - { - url: seo.opengraphImage, - alt: seo.title || undefined, - }, - ]; - } - if (seo.opengraphType) { - pageSeo.openGraph.type = seo.opengraphType; - } - } - - return ( - <> - - - {children} - {!(variant === "explore" && isDesktop) &&