Feature/cfa single partners 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/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 SinglePartner = React.forwardRef(function SinglePartner(
+  { 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 SinglePartner;

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/common/index.js

@@ -1,4 +1,5 @@
 import blockify from "@/codeforafrica/lib/data/blockify";
+import pagify from "@/codeforafrica/lib/data/pagify";
 import { imageFromMedia } from "@/codeforafrica/lib/data/utils";
 
 function getNavBar(settings) {
@@ -45,18 +46,21 @@ function getPageSlug({ params }) {
 }
 
 export async function getPageProps(api, context) {
+  const { params } = context;
   const slug = getPageSlug(context);
-  const {
+  let {
     docs: [page],
   } = await api.findPage(slug);
   if (!page) {
     return null;
   }
-
+  if (params?.slugs?.length > 2) {
+    page = await pagify(page, api, context);
+  }
+  const blocks = await blockify(page?.blocks);
   const settings = await api.findGlobal("settings");
   const navbar = getNavBar(settings);
   const footer = getFooter(settings);
-  const blocks = await blockify(page.blocks);
 
   return {
     blocks,

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

@@ -0,0 +1,13 @@
+import partners from "./partners";
+
+const COLLECTION_BY_SLUG = {
+  partners,
+};
+
+async function pagify(parentPage, api, context) {
+  const { slug: collection } = parentPage;
+  const pageProps = COLLECTION_BY_SLUG[collection];
+  return pageProps?.(api, context) ?? null;
+}
+
+export default pagify;

apps/codeforafrica/src/lib/data/pagify/partners.js

@@ -0,0 +1,30 @@
+import { imageFromMedia } from "@/codeforafrica/lib/data/utils";
+
+async function partners(api, context) {
+  const { params, locale } = context;
+  const slug = params.slugs[2];
+  const { docs } = await api.getCollection("partners", {
+    locale,
+    where: {
+      slug: {
+        equals: slug,
+      },
+    },
+  });
+  if (!docs?.length) {
+    return null;
+  }
+  const [partner] = docs;
+  return {
+    blocks: [
+      {
+        relatedProjects: [], // TODO(koechkevin) Related projects go here once projects implemented
+        ...partner,
+        logo: imageFromMedia(partner.logo),
+        blockType: "partner",
+      },
+    ],
+  };
+}
+
+export default partners;

apps/codeforafrica/src/pages/[...slugs].page.js

@@ -9,6 +9,7 @@ import MeetOurTeam from "@/codeforafrica/components/MeetOurTeam";
 import NewsAndStories from "@/codeforafrica/components/NewsAndStories";
 import OurPartners from "@/codeforafrica/components/OurPartners";
 import PageHeader from "@/codeforafrica/components/PageHeader";
+import Partner from "@/codeforafrica/components/Partner";
 import { getPageServerSideProps } from "@/codeforafrica/lib/data";
 
 const componentsBySlugs = {
@@ -20,6 +21,7 @@ const componentsBySlugs = {
   "our-impact": GetInvolved,
   "our-partners": OurPartners,
   projects: FeaturedProjects,
+  partner: Partner,
 };
 
 function Index({ blocks, fallback }) {

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

@@ -1,5 +1,7 @@
 const Partners = {
   slug: "our-partners",
+  imageURL: "/images/cms/blocks/partners.png",
+  imageAltText: "Our Partners",
   labels: {
     singular: {
       en: "Partners",