Merge branch 'develop' into ft/codeforafrica-posts-cms

apps/codeforafrica/src/components/ConnectBar/ConnectBar.js

@@ -6,18 +6,14 @@ import SocialMediaButton from "@/codeforafrica/components/SocialMediaButton";
 const ConnectBar = React.forwardRef(function ConnectBar(props, ref) {
   const { sx, title, links } = props;
 
-  if (!links || !Object.entries(links)?.length) {
+  if (!links?.length) {
     return null;
   }
 
-  const socialConnections = [
-    "twitter",
-    "slack",
-    "linkedin",
-    "facebook",
-    "instagram",
-    "github",
-  ].flatMap((name) => (links[name] ? [{ name, url: links[name] }] : []));
+  const socialConnections = links.map(({ platform, url }) => ({
+    name: platform?.toLowerCase(),
+    url,
+  }));
 
   return (
     <SocialMediaBar

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

@@ -1,29 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<ConnectBar /> renders unchanged 1`] = `
-<div>
-  <div
-    class="MuiStack-root css-150zc89-MuiStack-root"
-  >
-    <div
-      class="MuiStack-root css-1mbd5au-MuiStack-root"
-    >
-      <a
-        aria-label="facebook"
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiBox-root active css-tmo8yp-MuiTypography-root-MuiLink-root"
-        data-mui-internal-clone-element="true"
-        href="https://www.facebook.com/"
-        rel="noreferrer noopener"
-        target="_blank"
-      >
-        <div
-          aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
-          focusable="false"
-          viewbox="0 0 24 24"
-        />
-      </a>
-    </div>
-  </div>
-</div>
-`;
+exports[`<ConnectBar /> renders unchanged 1`] = `<div />`;

apps/codeforafrica/src/components/GetInvolved/GetInvolved.js

@@ -7,7 +7,7 @@ import React from "react";
 import ImpactCardList from "@/codeforafrica/components/ImpactCardList";
 
 const GetInvolved = React.forwardRef(function GetInvolved(props, ref) {
-  const { list, action, sx } = props;
+  const { impacts, action, sx } = props;
 
   if (!action?.href?.length) {
     return null;
@@ -26,7 +26,7 @@ const GetInvolved = React.forwardRef(function GetInvolved(props, ref) {
           py: { xs: 5, sm: 10, md: 4, lg: 12.5 },
         }}
       >
-        <ImpactCardList list={list} />
+        <ImpactCardList list={impacts} />
         <Button
           variant="contained"
           component={Link}
@@ -39,20 +39,20 @@ const GetInvolved = React.forwardRef(function GetInvolved(props, ref) {
             width: { xs: "100%", sm: "fit-content" },
           }}
         >
-          {action.content || action.href}
+          {action.label}
         </Button>
       </Section>
     </Box>
   );
 });
 
 GetInvolved.propTypes = {
-  list: PropTypes.arrayOf(PropTypes.shape({})),
+  impacts: PropTypes.arrayOf(PropTypes.shape({})),
   action: PropTypes.shape({}),
 };
 
 GetInvolved.defaultProps = {
-  list: undefined,
+  impacts: undefined,
   action: undefined,
 };
 

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

@@ -47,6 +47,15 @@ exports[`<GetInvolved /> renders unchanged 1`] = `
               >
                 15000
               </div>
+              <div
+                class="MuiBox-root css-2ligbh"
+              >
+                <span
+                  class="MuiTypography-root MuiTypography-body3 css-s9m4rs-MuiTypography-root"
+                >
+                  Our team makes an impact in more than 20 countries where members are present.
+                </span>
+              </div>
             </div>
           </div>
         </div>

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

@@ -9,19 +9,27 @@ import theme from "@/codeforafrica/theme";
 const render = createRender({ theme });
 
 const defaultProps = {
-  list: [
+  impacts: [
     {
       title: "Beneficiaries trained",
       value: 15000,
       image: {
         src: "/images/Type=layout,%20Size=32,%20Color=1020E1.svg",
       },
-      content:
-        "In 10 years, 15 000 trainees have learned new skills and knowledge within the civic tech and media space.",
+      description: [
+        {
+          children: [
+            {
+              text: "Our team makes an impact in more than 20 countries where members are present.",
+              children: null,
+            },
+          ],
+        },
+      ],
     },
   ],
   action: {
-    content: "Get Involved",
+    label: "Get Involved",
     href: "/contact",
   },
 };

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

@@ -41,6 +41,15 @@ exports[`<ImpactCardList /> renders unchanged 1`] = `
           >
             15000
           </div>
+          <div
+            class="MuiBox-root css-2ligbh"
+          >
+            <span
+              class="MuiTypography-root MuiTypography-body3 css-s9m4rs-MuiTypography-root"
+            >
+              Our team makes an impact in more than 20 countries where members are present.
+            </span>
+          </div>
         </div>
       </div>
     </div>

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

@@ -16,8 +16,16 @@ const defaultProps = {
       image: {
         src: "/images/Type=layout,%20Size=32,%20Color=1020E1.svg",
       },
-      content:
-        "In 10 years, 15 000 trainees have learned new skills and knowledge within the civic tech and media space.",
+      description: [
+        {
+          children: [
+            {
+              text: "Our team makes an impact in more than 20 countries where members are present.",
+              children: null,
+            },
+          ],
+        },
+      ],
     },
   ],
 };

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/components/Partner/Partner.js

@@ -0,0 +1,89 @@
+import { Section } from "@commons-ui/core";
+import { Box } from "@mui/material";
+import React from "react";
+
+import AboutChildPageHeader from "@/codeforafrica/components/AboutChildPageHeader";
+import ConnectBar from "@/codeforafrica/components/ConnectBar";
+import RelatedProjects from "@/codeforafrica/components/RelatedProjects";
+import RichText from "@/codeforafrica/components/RichText";
+import SectionDivider from "@/codeforafrica/components/SectionDivider";
+
+const Partner = React.forwardRef(function Partner(
+  { description, connect, relatedProjects, relatedProjectsTitle, name, logo },
+  ref,
+) {
+  return (
+    <Box ref={ref} sx={{ pb: { xs: 10, md: 7 } }}>
+      <AboutChildPageHeader
+        name={name}
+        image={logo}
+        FigureProps={{
+          sx: {
+            backgroundPositionY: "center",
+            backgroundRepeat: "no-repeat",
+            backgroundSize: "contain",
+            bgcolor: "background.default",
+            borderRadius: 0,
+            filter: "drop-shadow(0px 8.7px 17.4px rgba(0, 0, 0, 0.1))",
+            height: { xs: 116 },
+            width: { xs: 247 },
+          },
+        }}
+      />
+      <Section
+        sx={{
+          px: { xs: 2.5, sm: 0 },
+          pt: { xs: 2.5, md: 7 },
+          maxWidth: {
+            sm: "648px",
+            md: "912px",
+          },
+        }}
+      >
+        <RichText
+          variant="subheading"
+          component="p"
+          sx={{
+            mb: 5,
+            typography: "subheading",
+            "& > p": {
+              mb: 5,
+            },
+          }}
+          elements={description}
+        />
+
+        <ConnectBar title="Connect" links={connect} />
+      </Section>
+      {relatedProjects?.length ? (
+        <>
+          <SectionDivider
+            sx={{
+              maxWidth: {
+                sm: "648px",
+                md: "912px",
+              },
+              px: { xs: 2.5, sm: 0 },
+              py: { xs: "30px", md: 5 },
+            }}
+          />
+          <RelatedProjects
+            sx={{
+              maxWidth: {
+                sm: "648px",
+                md: "912px",
+              },
+              pt: 0,
+            }}
+            tileListProps={{ fixed: true }}
+            titleProps={{ sx: { mb: { xs: "30px", md: 5 } } }}
+            title={relatedProjectsTitle}
+            projects={relatedProjects}
+          />
+        </>
+      ) : null}
+    </Box>
+  );
+});
+
+export default Partner;