Merge pull request #586 from CodeForAfrica/ft/codefroafrica-team-info…

…graphic

Ft/codefroafrica meet our team

apps/codeforafrica/src/components/MeetOurTeam/MeetOurTeam.js

@@ -4,8 +4,15 @@ import { Box, Button, Grid } from "@mui/material";
 import PropTypes from "prop-types";
 import React from "react";
 
+import RichText from "@/codeforafrica/components/RichText";
+
 const MeetOurTeam = React.forwardRef(function MeetOurTeam(props, ref) {
-  const { title, description, href, logo } = props;
+  const {
+    title,
+    description,
+    action: { href, label },
+    image,
+  } = props;
 
   if (!title || !description) {
     return null;
@@ -26,16 +33,14 @@ const MeetOurTeam = React.forwardRef(function MeetOurTeam(props, ref) {
             >
               {title}
             </RichTypography>
-            <RichTypography variant="body3" sx={{ pt: 5 }}>
-              {description}
-            </RichTypography>
+            <RichText sx={{ pt: 5 }} variant="body3" elements={description} />
             <Button
               component={href ? Link : undefined}
               href={href}
               sx={{ width: { xs: "100%", sm: "auto" }, margin: "2.5rem 0" }}
               variant="contained-reverse"
             >
-              Meet our Team
+              {label}
             </Button>
           </Grid>
 
@@ -48,8 +53,7 @@ const MeetOurTeam = React.forwardRef(function MeetOurTeam(props, ref) {
           >
             <Figure
               ImageProps={{
-                src: logo,
-                alt: "Our offices across africa",
+                ...image,
               }}
               sx={{
                 height: { xs: "21.93rem", sm: "26rem", lg: "32.37rem" },
@@ -65,14 +69,17 @@ const MeetOurTeam = React.forwardRef(function MeetOurTeam(props, ref) {
 
 MeetOurTeam.propTypes = {
   title: PropTypes.string,
-  description: PropTypes.string,
-  logo: PropTypes.string,
+  description: PropTypes.arrayOf(PropTypes.shape({})),
+  image: PropTypes.shape({
+    src: PropTypes.string,
+    alt: PropTypes.string,
+  }),
 };
 
 MeetOurTeam.defaultProps = {
   title: undefined,
   description: undefined,
-  logo: undefined,
+  image: undefined,
 };
 
 export default MeetOurTeam;

apps/codeforafrica/src/components/MeetOurTeam/MeetOurTeam.snap.js

@@ -19,17 +19,12 @@ exports[`<MeetOurTeam /> renders unchanged 1`] = `
           >
             title
           </div>
-          <div
-            class="MuiTypography-root MuiTypography-body3 css-scexb3-MuiTypography-root"
-          >
-            description
-          </div>
           <a
             class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeMedium MuiButton-contained-reverseSizeMedium MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeMedium MuiButton-contained-reverseSizeMedium css-16j572f-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
             href="/about#our-team"
             tabindex="0"
           >
-            Meet our Team
+            Meet our team
           </a>
         </div>
         <div

apps/codeforafrica/src/components/MeetOurTeam/MeetOurTeam.test.js

@@ -11,9 +11,27 @@ const render = createRender({ theme });
 const defaultProps = {
   slug: "our-team",
   title: "title",
-  description: "description",
-  logo: "/images/Africa@2400x 1",
-  href: "/about#our-team",
+  description: {
+    children: [
+      {
+        text: "Africa's",
+        bold: true,
+        children: null,
+      },
+      {
+        text: "largest network of civic tech and open data labs",
+        children: null,
+      },
+    ],
+  },
+  image: {
+    alt: "Our offices across africa",
+    src: "/images/Africa@2400x 1",
+  },
+  action: {
+    href: "/about#our-team",
+    label: "Meet our team",
+  },
 };
 
 describe("<MeetOurTeam />", () => {

apps/codeforafrica/src/lib/data/blockify/index.js

@@ -1,9 +1,11 @@
 import getInvolved from "./get-involved";
 import hero from "./hero";
+import meetOurTeam from "./meetOurTeam";
 import ourImpact from "./our-impact";
 
 const propsifyBlockBySlug = {
   hero,
+  "meet-our-team": meetOurTeam,
   "our-impact": ourImpact,
   "get-involved": getInvolved,
 };

apps/codeforafrica/src/lib/data/blockify/meetOurTeam.js

@@ -0,0 +1,15 @@
+import { imageFromMedia } from "@/codeforafrica/lib/data/utils";
+
+function meetOurTeam(block) {
+  const { image: media, actionButton, title, ...other } = block;
+  const image = imageFromMedia({ alt: title, ...media });
+
+  return {
+    ...other,
+    image,
+    slug: "meet-our-team",
+    title,
+  };
+}
+
+export default meetOurTeam;

apps/codeforafrica/src/payload/blocks/MeetOurTeam.js

@@ -0,0 +1,30 @@
+import image from "../fields/image";
+import linkGroup from "../fields/links/linkGroup";
+import richText from "../fields/richText";
+
+const MeetOurTeam = {
+  slug: "meet-our-team",
+  imageURL: "/images/cms/blocks/meet_our_team.jpg",
+  imageAltText: "Display Team Call to Action",
+  fields: [
+    {
+      name: "title",
+      label: "Title",
+      required: true,
+      type: "text",
+    },
+    richText({
+      name: "description",
+      label: "Description",
+      required: true,
+    }),
+    linkGroup({ overrides: { name: "action", label: "Action" } }),
+    image({
+      overrides: {
+        required: true,
+      },
+    }),
+  ],
+};
+
+export default MeetOurTeam;

apps/codeforafrica/src/payload/collections/Pages.js

@@ -5,6 +5,7 @@ import GetInTouch from "../blocks/GetInTouch";
 import GetInvolved from "../blocks/GetInvolved";
 import Hero from "../blocks/Hero";
 import JoinOurSlack from "../blocks/JoinOurSlack";
+import MeetOurTeam from "../blocks/MeetOurTeam";
 import OurImpact from "../blocks/OurImpact";
 import OurPartners from "../blocks/OurPartners";
 import PageHeader from "../blocks/PageHeader";
@@ -49,6 +50,7 @@ const Pages = {
         GetInvolved,
         Hero,
         JoinOurSlack,
+        MeetOurTeam,
         PageHeader,
         CustomPageHeader,
         OurImpact,