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/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/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/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/Footer/index.js b/apps/climatemappedafrica/src/components/Footer/index.js index eff78692f..57e721b1f 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,7 +59,15 @@ 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={{ LinkProps: { @@ -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/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) &&