Merge pull request #952 from CodeForAfrica/feat/climatemappedafrica_p…

…age_hero

@/climatemappedafrica Page Hero

apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.js

@@ -76,7 +76,7 @@ function AboutTeam({ title, members: membersProp, ...props }) {
               key={uniqueId("team-chunk-")}
             >
               {membersChunks.map((member) => (
-                <Grid item key={title}>
+                <Grid item key={member.title}>
                   <Card {...member} mediaProps={{ square: true }} />
                 </Grid>
               ))}

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;

apps/climatemappedafrica/src/components/PageHero/PageHero.js

@@ -0,0 +1,79 @@
+import { Box, Grid } from "@mui/material";
+import PropTypes from "prop-types";
+import React from "react";
+
+import useStyles from "./useStyles";
+
+import RichHeader from "@/climatemappedafrica/components/RichHeader";
+import Section from "@/climatemappedafrica/components/Section";
+
+function PageHero({ background, overline, subtitle, title, ...props }) {
+  const classes = useStyles(props);
+  let backgroundSx;
+  if (background?.src?.length) {
+    backgroundSx = {
+      background: `url('${background.src}')`,
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+    };
+  }
+
+  return (
+    <Box
+      sx={{
+        ...backgroundSx,
+        margin: 0,
+        position: "relative",
+        "&:after": {
+          content: "''",
+          background: {
+            xs: `linear-gradient(to right, #ffffffE6 0%, #ffffffE6 87.5%, transparent 87.5%, transparent 100%)`,
+            md: `linear-gradient(to right, #ffffffE6 0%, #ffffffE6 62.5%, transparent 62.5%, transparent 100%)`,
+            lg: `linear-gradient(to right, #ffffffE6 0%, #ffffffE6 56%, transparent 56%, transparent 100%)`,
+          },
+          position: "absolute",
+          left: 0,
+          top: { xs: "70px", lg: "100px" },
+          bottom: { xs: "70px", lg: "100px" },
+          width: "100%",
+        },
+      }}
+    >
+      <Section classes={{ root: classes.section }}>
+        <Grid container>
+          <Grid
+            item
+            xs={9}
+            lg={6}
+            sx={{
+              height: "100%",
+              py: { xs: "43px", md: "74px" },
+            }}
+          >
+            <RichHeader
+              SubtitleProps={{
+                sx: {
+                  mr: 0,
+                  maxWidth: 376,
+                },
+              }}
+              overline={overline}
+              subtitle={subtitle}
+            >
+              {title}
+            </RichHeader>
+          </Grid>
+        </Grid>
+      </Section>
+    </Box>
+  );
+}
+
+PageHero.propTypes = {
+  background: PropTypes.shape({}),
+  overline: PropTypes.string,
+  subtitle: PropTypes.arrayOf(PropTypes.shape({})),
+  title: PropTypes.arrayOf(PropTypes.shape({})),
+};
+
+export default PageHero;

apps/climatemappedafrica/src/components/PageHero/PageHero.snap.js

@@ -0,0 +1,68 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<PageHero /> renders unchanged 1`] = `
+<div>
+  <div
+    class="MuiBox-root css-u361uw"
+  >
+    <div
+      class="makeStyles-root-6 makeStyles-root-4 makeStyles-root-2 makeStyles-section-1 makeStyles-fixed-3 MuiBox-root css-0"
+    >
+      <div
+        class="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
+      >
+        <div
+          class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-9 MuiGrid-grid-lg-6 css-a17ihx-MuiGrid-root"
+        >
+          <header
+            class="MuiBox-root css-0"
+          >
+            <div
+              class="MuiTypography-root makeStyles-root-7 MuiTypography-overline css-uwhb1p-MuiTypography-root"
+            >
+              About
+            </div>
+            <div
+              class="MuiBox-root css-1ki7zn5"
+            >
+              <h1
+                class="MuiTypography-root MuiTypography-h1 css-qt60le-MuiTypography-root"
+              >
+                Project  
+                <strong>
+                  background
+                </strong>
+                 and team
+              </h1>
+            </div>
+            <div
+              class="MuiBox-root css-1yyblq"
+            >
+              <h6
+                class="MuiTypography-root MuiTypography-subtitle1 css-1d1ipbv-MuiTypography-root"
+              >
+                Learn more about 
+                <strong>
+                  the team
+                </strong>
+                 behind the project,
+                <em>
+                   the development stages
+                </em>
+                 and how you can help improve 
+                <a
+                  class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-subtitle1 active css-c4fo0t-MuiTypography-root-MuiLink-root-MuiTypography-root"
+                  href="/"
+                >
+                  ClimateMap
+                </a>
+                .
+              </h6>
+            </div>
+          </header>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

apps/climatemappedafrica/src/components/PageHero/PageHero.test.js

@@ -0,0 +1,87 @@
+import { createRender } from "@commons-ui/testing-library";
+import React from "react";
+
+import PageHero from ".";
+
+import theme from "@/climatemappedafrica/theme";
+
+// eslint-disable-next-line testing-library/render-result-naming-convention
+const render = createRender({ theme });
+
+const defaultProps = {
+  overline: "About",
+  title: [
+    {
+      children: [
+        {
+          text: "Project  ",
+          children: null,
+        },
+        {
+          text: "background",
+          bold: true,
+          children: null,
+        },
+        {
+          text: " and team",
+          children: null,
+        },
+      ],
+    },
+  ],
+  subtitle: [
+    {
+      children: [
+        {
+          text: "Learn more about ",
+          children: null,
+        },
+        {
+          text: "the team",
+          bold: true,
+          children: null,
+        },
+        {
+          text: " behind the project,",
+          children: null,
+        },
+        {
+          text: " the development stages",
+          italic: true,
+          children: null,
+        },
+        {
+          text: " and how you can help improve ",
+          children: null,
+        },
+        {
+          children: [
+            {
+              text: "ClimateMap",
+              children: null,
+            },
+          ],
+          linkType: "custom",
+          type: "link",
+          url: "/",
+          href: "/",
+        },
+        {
+          text: ".",
+          children: null,
+        },
+      ],
+    },
+  ],
+  background: {
+    alt: "Mt. Kenya",
+    src: "/media/[email protected]",
+  },
+};
+
+describe("<PageHero />", () => {
+  it("renders unchanged", () => {
+    const { container } = render(<PageHero {...defaultProps} />);
+    expect(container).toMatchSnapshot();
+  });
+});

apps/climatemappedafrica/src/components/PageHero/index.js

@@ -0,0 +1,3 @@
+import PageHero from "./PageHero";
+
+export default PageHero;

apps/climatemappedafrica/src/components/PageHero/useStyles.js

@@ -0,0 +1,16 @@
+import makeStyles from "@mui/styles/makeStyles";
+
+const useStyles = makeStyles(({ breakpoints, typography }) => ({
+  section: {
+    zIndex: 1,
+    position: "relative",
+    paddingBottom: `${typography.pxToRem(70)} !important`,
+    paddingTop: `${typography.pxToRem(70)} !important`,
+    [breakpoints.up("lg")]: {
+      paddingBottom: `${typography.pxToRem(100)} !important`,
+      paddingTop: `${typography.pxToRem(100)} !important`,
+    },
+  },
+}));
+
+export default useStyles;

apps/climatemappedafrica/src/components/RichHeader/RichHeader.js

@@ -0,0 +1,88 @@
+import { RichTypography } from "@commons-ui/core";
+import { RichText } from "@commons-ui/payload";
+import { Box } from "@mui/material";
+import PropTypes from "prop-types";
+import React from "react";
+
+const RichHeader = React.forwardRef(function RichHeader(props, ref) {
+  const {
+    OverlineProps,
+    SubtitleProps,
+    TitleProps,
+    children,
+    overline,
+    subtitle,
+    sx,
+    ...others
+  } = props;
+
+  return (
+    <Box component="header" {...others} sx={sx} ref={ref}>
+      <RichTypography
+        variant="overline"
+        {...OverlineProps}
+        sx={{
+          mb: 1.5,
+          ...OverlineProps?.sx,
+        }}
+      >
+        {overline}
+      </RichTypography>
+      <RichText
+        {...TitleProps}
+        typographyProps={{
+          variant: "h1",
+          ...TitleProps?.typographyProps,
+        }}
+        elements={children}
+        sx={{
+          "& strong": {
+            display: "inline-block",
+            font: "inherit",
+            position: "relative",
+            "&:after": {
+              borderBottom: "30px solid",
+              borderColor: "primary.main",
+              bottom: 0,
+              content: '""',
+              left: 0,
+              opacity: 0.1,
+              position: "absolute",
+              width: "100%",
+            },
+            ...TitleProps?.sx,
+          },
+        }}
+      />
+      <RichText
+        {...SubtitleProps}
+        typographyProps={{
+          variant: "subtitle1",
+          sx: (theme) => ({
+            textDecorationColor: theme.palette.text.primary,
+          }),
+          LinkProps: {
+            color: "text.primary",
+            sx: {
+              textDecoration: "underline",
+            },
+          },
+          ...SubtitleProps?.typographyProps,
+        }}
+        elements={subtitle}
+        sx={{
+          mt: 2.5,
+          ...SubtitleProps?.sx,
+        }}
+      />
+    </Box>
+  );
+});
+
+RichHeader.propTypes = {
+  className: PropTypes.string,
+  overline: PropTypes.string,
+  subtitle: PropTypes.arrayOf(PropTypes.shape({})),
+};
+
+export default RichHeader;