diff --git a/apps/codeforafrica/public/images/cms/blocks/our_impact.jpg b/apps/codeforafrica/public/images/cms/blocks/our_impact.jpg new file mode 100644 index 000000000..b01b4a6c4 Binary files /dev/null and b/apps/codeforafrica/public/images/cms/blocks/our_impact.jpg differ diff --git a/apps/codeforafrica/src/components/GetInvolved/GetInvolved.snap.js b/apps/codeforafrica/src/components/GetInvolved/GetInvolved.snap.js index a9a53805f..072057c34 100644 --- a/apps/codeforafrica/src/components/GetInvolved/GetInvolved.snap.js +++ b/apps/codeforafrica/src/components/GetInvolved/GetInvolved.snap.js @@ -47,11 +47,6 @@ exports[` renders unchanged 1`] = ` > 15000 -
- In 10 years, 15 000 trainees have learned new skills and knowledge within the civic tech and media space. -
diff --git a/apps/codeforafrica/src/components/ImpactCard/ImpactCard.js b/apps/codeforafrica/src/components/ImpactCard/ImpactCard.js index 706f313fa..258c52b54 100644 --- a/apps/codeforafrica/src/components/ImpactCard/ImpactCard.js +++ b/apps/codeforafrica/src/components/ImpactCard/ImpactCard.js @@ -4,6 +4,8 @@ import { styled } from "@mui/material/styles"; import PropTypes from "prop-types"; import React from "react"; +import RichText from "@/codeforafrica/components/RichText"; + const ImpactCardRoot = styled(Card, { slot: "Root", })(({ theme: { breakpoints } }) => ({ @@ -19,7 +21,7 @@ const ImpactCardRoot = styled(Card, { })); const ImpactCard = React.forwardRef(function ImpactCard(props, ref) { - const { image, title, value, content } = props; + const { image, title, value, description } = props; if (!(image && title)) { return null; @@ -72,22 +74,21 @@ const ImpactCard = React.forwardRef(function ImpactCard(props, ref) { > {value} - - {content} - + /> ); }); ImpactCard.propTypes = { - content: PropTypes.string, + description: PropTypes.arrayOf(PropTypes.shape({})), title: PropTypes.string, value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), image: PropTypes.shape({ @@ -97,7 +98,7 @@ ImpactCard.propTypes = { }; ImpactCard.defaultProps = { - content: undefined, + description: undefined, title: undefined, value: undefined, image: undefined, diff --git a/apps/codeforafrica/src/components/ImpactCard/ImpactCard.snap.js b/apps/codeforafrica/src/components/ImpactCard/ImpactCard.snap.js index dc3be107d..9eb352a88 100644 --- a/apps/codeforafrica/src/components/ImpactCard/ImpactCard.snap.js +++ b/apps/codeforafrica/src/components/ImpactCard/ImpactCard.snap.js @@ -36,9 +36,13 @@ exports[` renders unchanged 1`] = ` 15000
- In 10 years, 15 000 trainees have learned new skills and knowledge within the civic tech and media space. + + Our team makes an impact in more than 20 countries where members are present. +
diff --git a/apps/codeforafrica/src/components/ImpactCard/ImpactCard.test.js b/apps/codeforafrica/src/components/ImpactCard/ImpactCard.test.js index 2f4928027..236b04831 100644 --- a/apps/codeforafrica/src/components/ImpactCard/ImpactCard.test.js +++ b/apps/codeforafrica/src/components/ImpactCard/ImpactCard.test.js @@ -14,8 +14,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, + }, + ], + }, + ], }; describe("", () => { diff --git a/apps/codeforafrica/src/components/ImpactCardList/ImpactCardList.snap.js b/apps/codeforafrica/src/components/ImpactCardList/ImpactCardList.snap.js index bcd507074..ad09c8d89 100644 --- a/apps/codeforafrica/src/components/ImpactCardList/ImpactCardList.snap.js +++ b/apps/codeforafrica/src/components/ImpactCardList/ImpactCardList.snap.js @@ -41,11 +41,6 @@ exports[` renders unchanged 1`] = ` > 15000 -
- In 10 years, 15 000 trainees have learned new skills and knowledge within the civic tech and media space. -
diff --git a/apps/codeforafrica/src/components/OurImpact/OurImpact.js b/apps/codeforafrica/src/components/OurImpact/OurImpact.js index 1471f87e6..0fe03d9e5 100644 --- a/apps/codeforafrica/src/components/OurImpact/OurImpact.js +++ b/apps/codeforafrica/src/components/OurImpact/OurImpact.js @@ -7,9 +7,9 @@ import React from "react"; import ImpactCardList from "@/codeforafrica/components/ImpactCardList"; const OurImpact = React.forwardRef(function OurImpact(props, ref) { - const { list, title, sx } = props; + const { impacts, title, sx } = props; - if (!list?.length) { + if (!impacts?.length) { return null; } return ( @@ -36,19 +36,19 @@ const OurImpact = React.forwardRef(function OurImpact(props, ref) { {title} )} - + ); }); OurImpact.propTypes = { - list: PropTypes.arrayOf(PropTypes.shape({})), + impacts: PropTypes.arrayOf(PropTypes.shape({})), title: PropTypes.string, }; OurImpact.defaultProps = { - list: undefined, + impacts: undefined, title: undefined, }; diff --git a/apps/codeforafrica/src/lib/data/blockify/index.js b/apps/codeforafrica/src/lib/data/blockify/index.js index 8b522d11e..9297d0f7f 100644 --- a/apps/codeforafrica/src/lib/data/blockify/index.js +++ b/apps/codeforafrica/src/lib/data/blockify/index.js @@ -1,7 +1,9 @@ import hero from "./hero"; +import ourImpact from "./our-impact"; const propsifyBlockBySlug = { hero, + "our-impact": ourImpact, }; 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 new file mode 100644 index 000000000..c5e53b4e9 --- /dev/null +++ b/apps/codeforafrica/src/lib/data/blockify/our-impact.js @@ -0,0 +1,22 @@ +import { imageFromMedia } from "@/codeforafrica/lib/data/utils"; + +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, + }; + }); + + return { + ...other, + impacts: ourImpacts, + slug: "our-impact", + }; +} + +export default ourImpact; diff --git a/apps/codeforafrica/src/pages/[...slugs].page.js b/apps/codeforafrica/src/pages/[...slugs].page.js index 4557ba5fa..4c0ed596f 100644 --- a/apps/codeforafrica/src/pages/[...slugs].page.js +++ b/apps/codeforafrica/src/pages/[...slugs].page.js @@ -7,6 +7,7 @@ import GetInvolved from "@/codeforafrica/components/GetInvolved"; import Hero from "@/codeforafrica/components/Hero"; import MeetOurTeam from "@/codeforafrica/components/MeetOurTeam"; import NewsAndStories from "@/codeforafrica/components/NewsAndStories"; +import OurImpact from "@/codeforafrica/components/OurImpact"; import OurPartners from "@/codeforafrica/components/OurPartners"; import PageHeader from "@/codeforafrica/components/PageHeader"; import { getPageServerSideProps } from "@/codeforafrica/lib/data"; @@ -17,7 +18,8 @@ const componentsBySlugs = { "custom-page-header": CustomPageHeader, "meet-our-team": MeetOurTeam, "news-stories": NewsAndStories, - "our-impact": GetInvolved, + "get-involved": GetInvolved, + "our-impact": OurImpact, "our-partners": OurPartners, projects: FeaturedProjects, }; diff --git a/apps/codeforafrica/src/payload/blocks/OurImpact.js b/apps/codeforafrica/src/payload/blocks/OurImpact.js new file mode 100644 index 000000000..d50570fdf --- /dev/null +++ b/apps/codeforafrica/src/payload/blocks/OurImpact.js @@ -0,0 +1,20 @@ +import impacts from "../fields/impacts"; + +const OurImpact = { + slug: "our-impact", + imageURL: "/images/cms/blocks/our_impact.jpg", + imageAltText: "Show Our Impact", + fields: [ + { + name: "title", + label: "Title", + type: "text", + required: true, + }, + impacts({ + minRows: 1, + }), + ], +}; + +export default OurImpact; diff --git a/apps/codeforafrica/src/payload/collections/Impact.js b/apps/codeforafrica/src/payload/collections/Impact.js index b6c9180a0..b09291ac9 100644 --- a/apps/codeforafrica/src/payload/collections/Impact.js +++ b/apps/codeforafrica/src/payload/collections/Impact.js @@ -1,4 +1,5 @@ import image from "../fields/image"; +import richText from "../fields/richText"; const Impact = { slug: "impact", @@ -9,7 +10,6 @@ const Impact = { access: { read: () => true, }, - fields: [ { name: "title", @@ -17,12 +17,9 @@ const Impact = { type: "text", required: true, }, - { + richText({ name: "description", - label: "Description", - type: "text", - required: true, - }, + }), { name: "value", label: "Value", diff --git a/apps/codeforafrica/src/payload/collections/Pages.js b/apps/codeforafrica/src/payload/collections/Pages.js index 5175b55cc..aaae324e9 100644 --- a/apps/codeforafrica/src/payload/collections/Pages.js +++ b/apps/codeforafrica/src/payload/collections/Pages.js @@ -2,6 +2,7 @@ import CustomPageHeader from "../blocks/CustomPageHeader"; import Error from "../blocks/Error"; import GetInvolved from "../blocks/GetInvolved"; import Hero from "../blocks/Hero"; +import OurImpact from "../blocks/OurImpact"; import OurPartners from "../blocks/OurPartners"; import PageHeader from "../blocks/PageHeader"; import fullTitle from "../fields/fullTitle"; @@ -44,6 +45,7 @@ const Pages = { Hero, PageHeader, CustomPageHeader, + OurImpact, OurPartners, ], admin: { diff --git a/apps/codeforafrica/src/payload/fields/impact.js b/apps/codeforafrica/src/payload/fields/impacts.js similarity index 77% rename from apps/codeforafrica/src/payload/fields/impact.js rename to apps/codeforafrica/src/payload/fields/impacts.js index 82b58f18b..314363295 100644 --- a/apps/codeforafrica/src/payload/fields/impact.js +++ b/apps/codeforafrica/src/payload/fields/impacts.js @@ -1,6 +1,6 @@ import { deepmerge } from "@mui/utils"; -const authors = (overrides) => +const impacts = (overrides) => deepmerge( { name: "impacts", @@ -11,4 +11,4 @@ const authors = (overrides) => overrides, ); -export default authors; +export default impacts;