Project Single Page

apps/codeforafrica/src/components/Project/Project.js

@@ -0,0 +1,90 @@
+import { Section } from "@commons-ui/core";
+import { Box } from "@mui/material";
+import React from "react";
+
+import AccoladeBadgeList from "@/codeforafrica/components/AccoladeBadgeList";
+import ProjectDetails from "@/codeforafrica/components/ProjectDetails";
+import ProjectPageHeader from "@/codeforafrica/components/ProjectPageHeader";
+import RelatedProjects from "@/codeforafrica/components/RelatedProjects";
+import RelatedStories from "@/codeforafrica/components/RelatedStories";
+import SectionDivider from "@/codeforafrica/components/SectionDivider";
+import TeamMembers from "@/codeforafrica/components/TeamMembers";
+
+function Project(props) {
+  const {
+    badges,
+    description,
+    donors,
+    links,
+    partners,
+    relatedProjectsTitle,
+    relatedProjects,
+    team,
+    stories,
+  } = props;
+
+  return (
+    <Box>
+      <ProjectPageHeader {...props} />
+      <Section
+        sx={{
+          marginTop: { xs: "26.6px", sm: "20px", md: "56px" },
+          marginBottom: "42px",
+          px: { xs: 2.5, sm: 0 },
+        }}
+      >
+        <AccoladeBadgeList badges={badges} />
+      </Section>
+      <ProjectDetails
+        description={description}
+        donors={donors}
+        links={links}
+        partners={partners}
+        sx={{
+          my: "42px",
+          px: { xs: 2.5, sm: 0 },
+        }}
+      />
+      {stories ? (
+        <>
+          <SectionDivider
+            sx={{
+              px: { xs: 2.5, sm: 0 },
+              py: "42px",
+            }}
+          />
+          <RelatedStories {...stories} sx={{ py: 0 }} />{" "}
+        </>
+      ) : null}
+      {team ? (
+        <>
+          <SectionDivider
+            sx={{
+              px: { xs: 2.5, sm: 0 },
+              py: "42px",
+            }}
+          />
+          <TeamMembers
+            {...team}
+            sx={{ px: { xs: 2.5, sm: 0 }, overflowX: "visible" }}
+          />
+        </>
+      ) : null}
+      <Box
+        sx={{
+          bgcolor: { xs: "none", md: "background.main" },
+        }}
+      >
+        <RelatedProjects
+          sx={{
+            py: { xs: 5, md: 8, lg: 10 },
+          }}
+          title={relatedProjectsTitle}
+          projects={relatedProjects}
+        />
+      </Box>
+    </Box>
+  );
+}
+
+export default Project;

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

@@ -0,0 +1,224 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Project /> renders unchanged 1`] = `
+<div>
+  <div
+    class="MuiBox-root css-0"
+  >
+    <div
+      class="MuiBox-root css-h16mw8"
+    >
+      <div
+        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-adddkm-MuiContainer-root"
+      >
+        <div
+          class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiCard-root css-1rwywmd-MuiPaper-root-MuiCard-root"
+        >
+          <nav
+            class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-15752dv-MuiTypography-root-MuiBreadcrumbs-root"
+          >
+            <ol
+              class="MuiBreadcrumbs-ol css-4pdmu4-MuiBreadcrumbs-ol"
+            >
+              <li
+                class="MuiBreadcrumbs-li"
+              >
+                <a
+                  class="MuiTypography-root MuiTypography-body1Underline MuiLink-root MuiLink-underlineAlways css-1xj2ue7-MuiTypography-root-MuiLink-root"
+                  href="/projects"
+                >
+                  Our Work
+                </a>
+              </li>
+              <li
+                aria-hidden="true"
+                class="MuiBreadcrumbs-separator css-1wuw8dw-MuiBreadcrumbs-separator"
+              >
+                /
+              </li>
+              <li
+                class="MuiBreadcrumbs-li"
+              />
+            </ol>
+          </nav>
+          <img
+            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-tm1rxb-MuiCardMedia-root"
+          />
+          <div
+            class="MuiBox-root css-1ntmuzk"
+          >
+            <nav
+              class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-mdodgn-MuiTypography-root-MuiBreadcrumbs-root"
+            >
+              <ol
+                class="MuiBreadcrumbs-ol css-4pdmu4-MuiBreadcrumbs-ol"
+              >
+                <li
+                  class="MuiBreadcrumbs-li"
+                >
+                  <a
+                    class="MuiTypography-root MuiTypography-body1Underline MuiLink-root MuiLink-underlineAlways css-1xj2ue7-MuiTypography-root-MuiLink-root"
+                    href="/projects"
+                  >
+                    Our Work
+                  </a>
+                </li>
+                <li
+                  aria-hidden="true"
+                  class="MuiBreadcrumbs-separator css-1wuw8dw-MuiBreadcrumbs-separator"
+                >
+                  /
+                </li>
+                <li
+                  class="MuiBreadcrumbs-li"
+                />
+              </ol>
+            </nav>
+            <div
+              class="MuiCardContent-root css-nvlyan-MuiCardContent-root"
+            >
+              <div
+                class="MuiPaper-root MuiPaper-outlined css-1irxcig-MuiPaper-root"
+              >
+                <div
+                  class="MuiBox-root css-uq7i85"
+                >
+                  <h4
+                    class="MuiTypography-root MuiTypography-h4 css-yd0a7d-MuiTypography-root"
+                  />
+                  <div
+                    class="MuiStack-root css-1v20l1v-MuiStack-root"
+                  >
+                    <span
+                      class="MuiTypography-root MuiTypography-body3SemiBold css-dyfp2-MuiTypography-root"
+                    />
+                    <p
+                      class="MuiTypography-root MuiTypography-body2 css-1rafkl6-MuiTypography-root"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="MuiCardActions-root MuiCardActions-spacing css-1jzc3k6-MuiCardActions-root"
+            >
+              <button
+                class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-12dqrmj-MuiButtonBase-root-MuiButton-root"
+                tabindex="0"
+                type="button"
+              >
+                Launch Project
+                <span
+                  class="MuiButton-endIcon MuiButton-iconSizeMedium css-1gnd1fd-MuiButton-endIcon"
+                >
+                  <div
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+                    focusable="false"
+                    viewbox="0 0 24 24"
+                  />
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1mtya01-MuiContainer-root"
+    />
+    <div
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-kxk6gi-MuiContainer-root"
+    >
+      <div
+        class="MuiGrid-root MuiGrid-container css-1ldf9ke-MuiGrid-root"
+      >
+        <div
+          class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-true css-1vcuf8r-MuiGrid-root"
+        >
+          <div
+            class="MuiStack-root css-h9vuy5-MuiStack-root"
+          >
+            <div
+              class="MuiTypography-root MuiTypography-h5Small css-1rq9mfe-MuiTypography-root"
+            >
+              Details
+            </div>
+            <div
+              class="MuiStack-root css-1025p66-MuiStack-root"
+            >
+              <div
+                class="MuiTypography-root MuiTypography-footerCap css-scsc4a-MuiTypography-root"
+              >
+                Share This Project
+              </div>
+              <div
+                class="MuiStack-root css-1jqw290-MuiStack-root"
+              >
+                <button
+                  aria-label="Twitter"
+                  class="react-share__ShareButton MuiBox-root css-15p9n5u"
+                  data-mui-internal-clone-element="true"
+                  style="background-color: transparent; padding: 0px; cursor: pointer;"
+                >
+                  <div
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+                    focusable="false"
+                    viewbox="0 0 24 24"
+                  />
+                </button>
+                <button
+                  aria-label="Linkedin"
+                  class="react-share__ShareButton MuiBox-root css-15p9n5u"
+                  data-mui-internal-clone-element="true"
+                  style="background-color: transparent; padding: 0px; cursor: pointer;"
+                >
+                  <div
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+                    focusable="false"
+                    viewbox="0 0 24 24"
+                  />
+                </button>
+                <button
+                  aria-label="Facebook"
+                  class="react-share__ShareButton MuiBox-root css-15p9n5u"
+                  data-mui-internal-clone-element="true"
+                  style="background-color: transparent; padding: 0px; cursor: pointer;"
+                >
+                  <div
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+                    focusable="false"
+                    viewbox="0 0 24 24"
+                  />
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <hr
+          class="MuiDivider-root MuiDivider-fullWidth MuiDivider-flexItem css-11319uf-MuiDivider-root"
+        />
+        <div
+          class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-auto css-17q9xai-MuiGrid-root"
+        >
+          <div
+            class="MuiStack-root css-hqqldn-MuiStack-root"
+          >
+            <div
+              class="MuiTypography-root MuiTypography-h5 css-1a7nesc-MuiTypography-root"
+            >
+              Description
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="MuiBox-root css-em1l33"
+    />
+  </div>
+</div>
+`;

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

@@ -0,0 +1,40 @@
+import { createRender } from "@commons-ui/testing-library";
+import React from "react";
+
+import Project from "./Project";
+
+import theme from "@/codeforafrica/theme";
+
+// eslint-disable-next-line testing-library/render-result-naming-convention
+const render = createRender({ theme });
+
+const defaultProps = {
+  project: {
+    slug: "knowledge-africa",
+    name: "knowledgeAFRICA",
+    tagLine: "Knowledge tag line",
+    title:
+      'Empowering citizens through <span class="highlight">drone technology</span>',
+    subtitle:
+      "AfricanDRONE brings together communities of drone operators, enthusiasts, journalists, activists, and entrepreneurs in Africa who use drones for good.",
+    description:
+      "This award-winning initiative works to give citizens a new perspective on their lives. Using drone technology, africanDRONE empowers local pilots through a self-help network that offers seed funding, skills development, resource sharing, advocacy, and networking opportunities for members. The goal is to support the evolution of a vibrant and diverse drone ecosystem across Africa.",
+    icon: {
+      src: "https://res.cloudinary.com/code-for-africa/image/upload/v1652431402/codeforafrica/icons/Type_SourceAfrica_m7yvmt.svg",
+    },
+    thumbnail: {
+      src: "https://res.cloudinary.com/code-for-africa/image/upload/v1652705959/codeforafrica/images/Property_1_PesaCheck_iahlrh.jpg",
+    },
+    tag: "Knowedge",
+    href: "/projects/knowledge-africa",
+    externalHref: "https://codeforafrica.org",
+  },
+  sections: [],
+};
+
+describe("<Project />", () => {
+  it("renders unchanged", () => {
+    const { container } = render(<Project {...defaultProps} />);
+    expect(container).toMatchSnapshot();
+  });
+});

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

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

apps/codeforafrica/src/components/ProjectDetails/ProjectDescription.js

@@ -4,9 +4,11 @@ import React from "react";
 
 import Button from "./ProjectDescriptionButton";
 
+import RichText from "@/codeforafrica/components/RichText";
+
 const ProjectDescription = React.forwardRef(
   function ProjectDescription(props, ref) {
-    const { children, links, sx, title, ...other } = props;
+    const { description, links, sx, title, ...other } = props;
 
     if (!title?.length) {
       return null;
@@ -19,14 +21,16 @@ const ProjectDescription = React.forwardRef(
         ref={ref}
       >
         <RichTypography variant="h5">{title}</RichTypography>
-        <RichTypography variant="body1" sx={{ typography: { md: "body2" } }}>
-          {children}
-        </RichTypography>
+        <RichText
+          variant="body1"
+          elements={description}
+          sx={{ typography: { md: "body2" } }}
+        />
         {links?.length > 0 ? (
           <Stack direction="row" spacing={2.5}>
-            {links.map(({ content, href, slug }) => (
-              <Button key={slug} href={href} slug={slug}>
-                {content}
+            {links.map(({ label, href, slug }) => (
+              <Button key={href} href={href} slug={slug}>
+                {label}
               </Button>
             ))}
           </Stack>