From 29b3c941c82a2990b38784a52d792304d11fdd0f Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Wed, 20 Sep 2023 09:58:46 +0300 Subject: [PATCH] Render get invloved block --- .../src/components/GetInvolved/GetInvolved.js | 10 ++++----- .../GetInvolved/GetInvolved.snap.js | 13 ++++++++--- .../GetInvolved/GetInvolved.test.js | 16 ++++++++++---- .../ImpactCardList/ImpactCardList.snap.js | 9 ++++++++ .../ImpactCardList/ImpactCardList.test.js | 12 ++++++++-- .../src/lib/data/blockify/get-involved.js | 22 +++++++++++++++++++ .../src/lib/data/blockify/index.js | 2 ++ .../src/payload/blocks/GetInvolved.js | 19 ++++++++++++++-- 8 files changed, 87 insertions(+), 16 deletions(-) create mode 100644 apps/codeforafrica/src/lib/data/blockify/get-involved.js 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..7db519367 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. + +
@@ -55,9 +64,7 @@ exports[` renders unchanged 1`] = ` class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1utjjui-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root" href="/contact" tabindex="0" - > - Get Involved - + /> diff --git a/apps/codeforafrica/src/components/GetInvolved/GetInvolved.test.js b/apps/codeforafrica/src/components/GetInvolved/GetInvolved.test.js index d0fbd6634..c354fde47 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", + lable: "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..9ec783037 --- /dev/null +++ b/apps/codeforafrica/src/lib/data/blockify/get-involved.js @@ -0,0 +1,22 @@ +import { imageFromMedia } from "@/codeforafrica/lib/data/utils"; + +function getInvolved(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, + }; + }); + + 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/payload/blocks/GetInvolved.js b/apps/codeforafrica/src/payload/blocks/GetInvolved.js index 1ca0fae82..1cbfc9b7a 100644 --- a/apps/codeforafrica/src/payload/blocks/GetInvolved.js +++ b/apps/codeforafrica/src/payload/blocks/GetInvolved.js @@ -1,13 +1,28 @@ -import impact from "../fields/impact"; +import impacts from "../fields/impacts"; +import link from "../fields/links/link"; const GetInvolved = { slug: "get-involved", imageURL: "/images/cms/blocks/get_involved.jpg", imageAltText: "Our Impact Statisctics", fields: [ - impact({ + impacts({ minRows: 3, }), + { + name: "action", + label: "Action", + type: "group", + fields: [ + { + name: "label", + label: "Label", + type: "text", + required: true, + }, + link({}), + ], + }, ], };