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,7 +1,9 @@
 import hero from "./hero";
+import meetOurTeam from "./meetOurTeam";
 
 const propsifyBlockBySlug = {
   hero,
+  "meet-our-team": meetOurTeam,
 };
 
 async function blockify(blocks) {

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/lib/data/rest/index.js

@@ -37,6 +37,6 @@ export const api = {
 export async function getPageStaticProps(context) {
   const props = await getPageProps(api, context);
   return {
-    props,
+    props: props || {},
   };
 }

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

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

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

@@ -1,6 +1,7 @@
 import CustomPageHeader from "../blocks/CustomPageHeader";
 import Error from "../blocks/Error";
 import Hero from "../blocks/Hero";
+import MeetOurTeam from "../blocks/MeetOurTeam";
 import OurPartners from "../blocks/OurPartners";
 import PageHeader from "../blocks/PageHeader";
 import fullTitle from "../fields/fullTitle";
@@ -37,7 +38,14 @@ const Pages = {
       // each other e.g. while alphabecially CustomPageHeader should be with C,
       // it's functiaonally equivalent with PageHeader so we keep it next to
       // PageHeader
-      blocks: [Error, Hero, PageHeader, CustomPageHeader, OurPartners],
+      blocks: [
+        Error,
+        Hero,
+        PageHeader,
+        CustomPageHeader,
+        MeetOurTeam,
+        OurPartners,
+      ],
       admin: {
         initCollapsed: true,
       },