diff --git a/apps/codeforafrica/public/images/cms/blocks/get_involved.jpg b/apps/codeforafrica/public/images/cms/blocks/get_involved.jpg new file mode 100644 index 000000000..e0759fe80 Binary files /dev/null and b/apps/codeforafrica/public/images/cms/blocks/get_involved.jpg differ diff --git a/apps/codeforafrica/src/components/GetInvolved/GetInvolved.js b/apps/codeforafrica/src/components/GetInvolved/GetInvolved.js index 1d4796ed2..92ae75ead 100644 --- a/apps/codeforafrica/src/components/GetInvolved/GetInvolved.js +++ b/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 }, }} > - + @@ -47,12 +47,12 @@ const GetInvolved = React.forwardRef(function GetInvolved(props, ref) { }); GetInvolved.propTypes = { - list: PropTypes.arrayOf(PropTypes.shape({})), + impacts: PropTypes.arrayOf(PropTypes.shape({})), action: PropTypes.shape({}), }; GetInvolved.defaultProps = { - list: undefined, + impacts: undefined, action: undefined, }; diff --git a/apps/codeforafrica/src/components/GetInvolved/GetInvolved.snap.js b/apps/codeforafrica/src/components/GetInvolved/GetInvolved.snap.js index 072057c34..f824ab1a4 100644 --- a/apps/codeforafrica/src/components/GetInvolved/GetInvolved.snap.js +++ b/apps/codeforafrica/src/components/GetInvolved/GetInvolved.snap.js @@ -47,6 +47,15 @@ exports[` renders unchanged 1`] = ` > 15000 +
+ + Our team makes an impact in more than 20 countries where members are present. + +
diff --git a/apps/codeforafrica/src/components/GetInvolved/GetInvolved.test.js b/apps/codeforafrica/src/components/GetInvolved/GetInvolved.test.js index d0fbd6634..60263bf9b 100644 --- a/apps/codeforafrica/src/components/GetInvolved/GetInvolved.test.js +++ b/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", }, }; diff --git a/apps/codeforafrica/src/components/ImpactCardList/ImpactCardList.snap.js b/apps/codeforafrica/src/components/ImpactCardList/ImpactCardList.snap.js index ad09c8d89..2eb50f825 100644 --- a/apps/codeforafrica/src/components/ImpactCardList/ImpactCardList.snap.js +++ b/apps/codeforafrica/src/components/ImpactCardList/ImpactCardList.snap.js @@ -41,6 +41,15 @@ exports[` renders unchanged 1`] = ` > 15000 +
+ + Our team makes an impact in more than 20 countries where members are present. + +
diff --git a/apps/codeforafrica/src/components/ImpactCardList/ImpactCardList.test.js b/apps/codeforafrica/src/components/ImpactCardList/ImpactCardList.test.js index e67879744..b81e90e6c 100644 --- a/apps/codeforafrica/src/components/ImpactCardList/ImpactCardList.test.js +++ b/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, + }, + ], + }, + ], }, ], }; diff --git a/apps/codeforafrica/src/lib/data/blockify/get-involved.js b/apps/codeforafrica/src/lib/data/blockify/get-involved.js new file mode 100644 index 000000000..46ea5c310 --- /dev/null +++ b/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; diff --git a/apps/codeforafrica/src/lib/data/blockify/index.js b/apps/codeforafrica/src/lib/data/blockify/index.js index 9297d0f7f..206e1b93a 100644 --- a/apps/codeforafrica/src/lib/data/blockify/index.js +++ b/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) { diff --git a/apps/codeforafrica/src/lib/data/blockify/our-impact.js b/apps/codeforafrica/src/lib/data/blockify/our-impact.js index c5e53b4e9..98a2f5133 100644 --- a/apps/codeforafrica/src/lib/data/blockify/our-impact.js +++ b/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, diff --git a/apps/codeforafrica/src/lib/data/utils/impacts.js b/apps/codeforafrica/src/lib/data/utils/impacts.js new file mode 100644 index 000000000..08357c4e1 --- /dev/null +++ b/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, + }; + }); +} diff --git a/apps/codeforafrica/src/payload/blocks/GetInvolved.js b/apps/codeforafrica/src/payload/blocks/GetInvolved.js new file mode 100644 index 000000000..28fb24395 --- /dev/null +++ b/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; diff --git a/apps/codeforafrica/src/payload/collections/Pages.js b/apps/codeforafrica/src/payload/collections/Pages.js index b7f1bf7b3..41d0fca12 100644 --- a/apps/codeforafrica/src/payload/collections/Pages.js +++ b/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: {