Merge pull request #595 from CodeForAfrica/ft/codeforafrica-get-involved

Ft/codeforafrica Get Involved block

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/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,9 +1,11 @@
+import getInvolved from "./get-involved";
 import hero from "./hero";
 import ourImpact from "./our-impact";
 
 const propsifyBlockBySlug = {
   hero,
   "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,

apps/codeforafrica/src/lib/data/utils/impacts.js

@@ -0,0 +1,13 @@
+import { imageFromMedia } from "@/codeforafrica/lib/data/utils";
+
+export default function formatImpacts(impacts) {
+  return impacts.map((impact) => {
+    const { icon: media, title, ...rest } = impact;
+    const image = imageFromMedia({ alt: title, ...media });
+    return {
+      ...rest,
+      image,
+      title,
+    };
+  });
+}

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

@@ -0,0 +1,17 @@
+import impacts from "../fields/impacts";
+import linkGroup from "../fields/links/linkGroup";
+
+const GetInvolved = {
+  slug: "get-involved",
+  imageURL: "/images/cms/blocks/get_involved.jpg",
+  imageAltText: "Get Involved",
+  fields: [
+    impacts({
+      minRows: 3,
+      maxRows: 3,
+    }),
+    linkGroup({ overrides: { name: "action", label: "Action" } }),
+  ],
+};
+
+export default GetInvolved;

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

@@ -1,6 +1,7 @@
 import CustomPageHeader from "../blocks/CustomPageHeader";
 import Error from "../blocks/Error";
 import GetInTouch from "../blocks/GetInTouch";
+import GetInvolved from "../blocks/GetInvolved";
 import Hero from "../blocks/Hero";
 import OurImpact from "../blocks/OurImpact";
 import OurPartners from "../blocks/OurPartners";
@@ -42,10 +43,11 @@ const Pages = {
       blocks: [
         Error,
         GetInTouch,
+        GetInvolved,
         Hero,
-        OurImpact,
         PageHeader,
         CustomPageHeader,
+        OurImpact,
         OurPartners,
       ],
       admin: {