Add Guiding Principles

CodeForAfrica · Sep 21, 2023 · 176eadc · 176eadc
1 parent 3a0d281
commit 176eadc
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 4 deletions.
diff --git a/apps/codeforafrica/public/images/cms/blocks/guiding_principles.png b/apps/codeforafrica/public/images/cms/blocks/guiding_principles.png
diff --git a/apps/codeforafrica/src/components/GuidingPrinciplesCard/GuidingPrinciplesCard.js b/apps/codeforafrica/src/components/GuidingPrinciplesCard/GuidingPrinciplesCard.js
@@ -2,9 +2,11 @@ import { RichTypography } from "@commons-ui/next";
 import { Card, CardContent, CardMedia } from "@mui/material";
 import React from "react";
 
+import RichText from "@/codeforafrica/components/RichText";
+
 const GuidingPrinciplesCard = React.forwardRef(
   function GuidingPrinciplesCard(props, ref) {
-    const { title, content, icon } = props;
+    const { title, description, icon } = props;
 
     return (
       <Card
@@ -35,7 +37,7 @@ const GuidingPrinciplesCard = React.forwardRef(
           <RichTypography variant="h3" sx={{ my: 2.5 }}>
             {title}
           </RichTypography>
-          <RichTypography>{content}</RichTypography>
+          <RichText elements={description} />
         </CardContent>
       </Card>
     );

diff --git a/apps/codeforafrica/src/components/GuidingPrinciplesCardList/GuidingPrinciplesCardList.js b/apps/codeforafrica/src/components/GuidingPrinciplesCardList/GuidingPrinciplesCardList.js
@@ -7,13 +7,20 @@ import GuidingPrinciplesCard from "../GuidingPrinciplesCard";
 
 const GuidingPrinciplesCardList = React.forwardRef(
   function GuidingPrinciplesCardList(props, ref) {
-    const { list, title, ...other } = props;
+    const { list, title, sx } = props;
 
     if (!list?.length) {
       return null;
     }
     return (
-      <Section {...other} ref={ref}>
+      <Section
+        sx={{
+          px: { xs: 2.5, sm: 0 },
+          py: { xs: 2.5, md: 10 },
+          ...sx,
+        }}
+        ref={ref}
+      >
         <RichTypography variant="h4">{title}</RichTypography>
         <Grid
           container

diff --git a/apps/codeforafrica/src/pages/[...slugs].page.js b/apps/codeforafrica/src/pages/[...slugs].page.js
@@ -6,6 +6,7 @@ import CustomPageHeader from "@/codeforafrica/components/CustomPageHeader";
 import FeaturedProjects from "@/codeforafrica/components/FeaturedProjects";
 import GetInTouch from "@/codeforafrica/components/GetInTouch";
 import GetInvolved from "@/codeforafrica/components/GetInvolved";
+import GuidingPrinciplesCardList from "@/codeforafrica/components/GuidingPrinciplesCardList";
 import Hero from "@/codeforafrica/components/Hero";
 import JoinOurSlack from "@/codeforafrica/components/JoinOurSlack";
 import MeetOurTeam from "@/codeforafrica/components/MeetOurTeam";
@@ -21,6 +22,7 @@ const componentsBySlugs = {
   "custom-page-header": CustomPageHeader,
   "get-involved": GetInvolved,
   "get-in-touch": GetInTouch,
+  "guiding-principles": GuidingPrinciplesCardList,
   hero: Hero,
   "join-our-slack": JoinOurSlack,
   "meet-our-team": MeetOurTeam,

diff --git a/apps/codeforafrica/src/payload/blocks/GuidingPrinciples.js b/apps/codeforafrica/src/payload/blocks/GuidingPrinciples.js
@@ -0,0 +1,51 @@
+import image from "../fields/image";
+import richText from "../fields/richText";
+
+const GuidingPrinciples = {
+  slug: "guiding-principles",
+  imageURL: "/images/cms/blocks/guiding_principles.jpg",
+  imageAltText: "Guiding Principles",
+  fields: [
+    {
+      name: "title",
+      label: {
+        en: "Title",
+      },
+      type: "text",
+      localized: true,
+      required: true,
+    },
+    {
+      name: "list",
+      label: "Guiding Principles",
+      type: "array",
+      fields: [
+        {
+          name: "title",
+          label: {
+            en: "Title",
+          },
+          type: "text",
+          localized: true,
+          required: true,
+        },
+        image({
+          overrides: {
+            name: "icon",
+            required: true,
+          },
+        }),
+        richText({
+          name: "description",
+          label: {
+            en: "Description",
+          },
+          localized: true,
+          required: true,
+        }),
+      ],
+    },
+  ],
+};
+
+export default GuidingPrinciples;
diff --git a/apps/codeforafrica/src/payload/collections/Media.js b/apps/codeforafrica/src/payload/collections/Media.js
@@ -18,6 +18,9 @@ const Media = {
       required: true,
     },
   ],
+  hooks: {
+    afterRead: [({ doc }) => ({ ...doc, src: doc.url })],
+  },
 };
 
 export default Media;
diff --git a/apps/codeforafrica/src/payload/collections/Pages.js b/apps/codeforafrica/src/payload/collections/Pages.js
@@ -3,6 +3,7 @@ import CustomPageHeader from "../blocks/CustomPageHeader";
 import Error from "../blocks/Error";
 import GetInTouch from "../blocks/GetInTouch";
 import GetInvolved from "../blocks/GetInvolved";
+import GuidingPrinciples from "../blocks/GuidingPrinciples";
 import Hero from "../blocks/Hero";
 import JoinOurSlack from "../blocks/JoinOurSlack";
 import MeetOurTeam from "../blocks/MeetOurTeam";
@@ -48,6 +49,7 @@ const Pages = {
         Error,
         GetInTouch,
         GetInvolved,
+        GuidingPrinciples,
         Hero,
         JoinOurSlack,
         MeetOurTeam,