Merge branch 'develop' into ft/codefroafrica-team-infographic

Signed-off-by: Kipruto <[email protected]>

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/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;

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

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Partners /> renders unchanged 1`] = `
+<div>
+  <div
+    class="MuiBox-root css-1gghq2r"
+  >
+    <div
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1ilq66o-MuiContainer-root"
+    >
+      <div
+        class="MuiBox-root css-15sqwg8"
+      >
+        Lorem ipsum dolor sit amet consectetur adipiscing, elit ac primis praesent
+        tempor luctus libero, curae condimentum ultricies proin leo. Arcu ornare dis fermentum nisi consequat imperdiet porta viverra placerat nullam, dapibus molestie faucibus id mi lacinia orci magnis. Ridiculus aptent phasellus mus nisi porta rutrum tellus, ut venenatis feugiat massa volutpat. 
+        Duis maecenas per erat odio quisque accumsan, donec tempus class euismod vulputate fermentum imperdiet, suspendisse blandit lacinia semper cursus. Neque tristique posuere a feugiat convallis tempor cras nunc, leo faucibus cum aptent placerat aenean lobortis, nibh iaculis ac nascetur praesent mus quisque. Nullam leo rutrum augue urna cubilia morbi enim, arcu risus mus mauris elementum pulvinar, laoreet bibendum convallis senectus ullamcorper malesuada.
+      </div>
+    </div>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,30 @@
+import { createRender } from "@commons-ui/testing-library";
+import React from "react";
+
+import Partner from "./Partner";
+
+import theme from "@/codeforafrica/theme";
+
+// eslint-disable-next-line testing-library/render-result-naming-convention
+const render = createRender({ theme });
+
+const defaultProps = {
+  description: [
+    {
+      text: "Lorem ipsum dolor sit amet consectetur adipiscing, elit ac primis praesent",
+    },
+    {
+      text: "tempor luctus libero, curae condimentum ultricies proin leo. Arcu ornare dis fermentum nisi consequat imperdiet porta viverra placerat nullam, dapibus molestie faucibus id mi lacinia orci magnis. Ridiculus aptent phasellus mus nisi porta rutrum tellus, ut venenatis feugiat massa volutpat. ",
+    },
+    {
+      text: "Duis maecenas per erat odio quisque accumsan, donec tempus class euismod vulputate fermentum imperdiet, suspendisse blandit lacinia semper cursus. Neque tristique posuere a feugiat convallis tempor cras nunc, leo faucibus cum aptent placerat aenean lobortis, nibh iaculis ac nascetur praesent mus quisque. Nullam leo rutrum augue urna cubilia morbi enim, arcu risus mus mauris elementum pulvinar, laoreet bibendum convallis senectus ullamcorper malesuada.",
+    },
+  ],
+};
+
+describe("<Partners />", () => {
+  it("renders unchanged", () => {
+    const { container } = render(<Partner {...defaultProps} />);
+    expect(container).toMatchSnapshot();
+  });
+});

apps/codeforafrica/src/components/Partner/index.js

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

apps/codeforafrica/src/lib/data/blockify/get-involved.js

@@ -0,0 +1,14 @@
+import formatImpacts from "@/codeforafrica/lib/data/utils/impacts";
+
+function getInvolved(block) {
+  const { impacts, ...other } = block;
+  const ourImpacts = formatImpacts(impacts);
+
+  return {
+    ...other,
+    impacts: ourImpacts,
+    slug: "get-involved",
+  };
+}
+
+export default getInvolved;

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

@@ -1,3 +1,4 @@
+import getInvolved from "./get-involved";
 import hero from "./hero";
 import meetOurTeam from "./meetOurTeam";
 import ourImpact from "./our-impact";
@@ -6,6 +7,7 @@ const propsifyBlockBySlug = {
   hero,
   "meet-our-team": meetOurTeam,
   "our-impact": ourImpact,
+  "get-involved": getInvolved,
 };
 
 async function blockify(blocks) {

apps/codeforafrica/src/lib/data/blockify/our-impact.js

@@ -1,16 +1,8 @@
-import { imageFromMedia } from "@/codeforafrica/lib/data/utils";
+import formatImpacts from "@/codeforafrica/lib/data/utils/impacts";
 
 function ourImpact(block) {
   const { impacts, ...other } = block;
-  const ourImpacts = impacts.map((impact) => {
-    const { icon: media, title, ...rest } = impact;
-    const image = imageFromMedia({ alt: title, ...media });
-    return {
-      ...rest,
-      image,
-      title,
-    };
-  });
+  const ourImpacts = formatImpacts(impacts);
 
   return {
     ...other,