CodeForAfrica · kelvinkipruto · Oct 4, 2023 · Oct 3, 2023 · Oct 3, 2023 · Oct 3, 2023
diff --git a/apps/codeforafrica/public/images/cms/blocks/featured_stories.jpg b/apps/codeforafrica/public/images/cms/blocks/featured_stories.jpg
diff --git a/apps/codeforafrica/src/components/NewsAndStories/NewsAndStories.js b/apps/codeforafrica/src/components/NewsAndStories/NewsAndStories.js
@@ -8,10 +8,13 @@ import FeaturedArticle from "@/codeforafrica/components/FeaturedArticle";
 
 // TODO(kilemensi): Remove hard-coded strings
 const NewsAndStories = React.forwardRef(function NewsAndStories(props, ref) {
-  const { articles, title } = props;
-  if (!articles?.length) {
-    return null;
-  }
+  const {
+    action: { label, href },
+    featured,
+    featuredStoryActionLabel,
+    stories,
+    title,
+  } = props;
   return (
     <Section
       sx={{
@@ -35,21 +38,22 @@ const NewsAndStories = React.forwardRef(function NewsAndStories(props, ref) {
           {title}
         </RichTypography>
         <FeaturedArticle
-          {...articles[0]}
+          {...featured}
+          readMoreLabel={featuredStoryActionLabel}
           variant="cover"
           sx={{ mb: { xs: "28px", sm: "40px", lg: "55px" }, width: "100%" }}
         />
         <ArticleCardList
-          articles={articles.slice(1)}
+          articles={stories}
           sx={{ mb: { xs: 5, lg: "55px" } }}
         />
         <Button
           variant="contained"
           component={Link}
-          href="/stories"
+          href={href}
           sx={{ width: { xs: "100%", sm: "unset" } }}
         >
-          Browse More Stories
+          {label}
         </Button>
       </Box>
     </Section>

diff --git a/apps/codeforafrica/src/components/NewsAndStories/NewsAndStories.snap.js b/apps/codeforafrica/src/components/NewsAndStories/NewsAndStories.snap.js
@@ -1,3 +1,106 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<NewsAndStories /> renders unchanged 1`] = `<div />`;
+exports[`<NewsAndStories /> renders unchanged 1`] = `
+<div>
+  <div
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1wsvydc-MuiContainer-root"
+  >
+    <div
+      class="MuiBox-root css-dvxtzn"
+    >
+      <div
+        class="MuiTypography-root MuiTypography-h4 css-1q524zl-MuiTypography-root"
+      >
+        News and Stories
+      </div>
+      <div
+        class="MuiPaper-root MuiPaper-outlined MuiCard-root css-1486ctq-MuiPaper-root-MuiCard-root"
+      >
+        <a
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-275i79-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
+          href="/stories/article-1"
+          tabindex="0"
+        >
+          <div
+            class="MuiGrid-root MuiGrid-container css-1xzqqmo-MuiGrid-root"
+          >
+            <div
+              class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-12 css-18qart5-MuiGrid-root"
+            >
+              <img
+                alt="Featured Article Image"
+                class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1hjwis2-MuiCardMedia-root"
+                src="https://res.cloudinary.com/code-for-africa/image/upload/v1650885664/codeforafrica/unsplash_L6hr1BptcNc_of23p3.png"
+              />
+            </div>
+            <div
+              class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-true css-p8r8tv-MuiGrid-root"
+            >
+              <div
+                class="MuiCardContent-root css-jq2jyh-MuiCardContent-root"
+              >
+                <p
+                  class="MuiTypography-root MuiTypography-body1 css-pdkb43-MuiTypography-root"
+                >
+                  Battle for gender equality in African media continues
+                </p>
+                <p
+                  class="MuiTypography-root MuiTypography-body1 css-ajju11-MuiTypography-root"
+                >
+                  Lorem ipsum dolor sit amet consectetur adipiscing elit mattis, vestibulum potenti rhoncus eget lacus fermentum taciti quam, quis curae accumsan viverra semper dapibus sed.
+                </p>
+                <button
+                  class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1it8s17-MuiButtonBase-root-MuiButton-root"
+                  tabindex="0"
+                  type="button"
+                >
+                  Read Story
+                </button>
+                <span
+                  class="MuiTypography-root MuiTypography-caption css-13ob0ik-MuiTypography-root"
+                >
+                  Jan 6, 2022
+                </span>
+              </div>
+            </div>
+            <div
+              class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-12 css-1uhca85-MuiGrid-root"
+            >
+              <div
+                class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+              >
+                <div
+                  class="MuiCardContent-root css-148nlxb-MuiCardContent-root"
+                >
+                  <h1
+                    class="MuiTypography-root MuiTypography-h1 css-gklt6i-MuiTypography-root"
+                  >
+                    Battle for gender equality in African media continues
+                  </h1>
+                  <button
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeLarge MuiButton-contained-reverseSizeLarge MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeLarge MuiButton-contained-reverseSizeLarge css-18nvokw-MuiButtonBase-root-MuiButton-root"
+                    tabindex="0"
+                    type="button"
+                  >
+                    READ STORY
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <span
+            class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+          />
+        </a>
+      </div>
+      <a
+        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-xtiyn3-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
+        href="/stories"
+        tabindex="0"
+      >
+        Read Stories
+      </a>
+    </div>
+  </div>
+</div>
+`;
diff --git a/apps/codeforafrica/src/components/NewsAndStories/NewsAndStories.test.js b/apps/codeforafrica/src/components/NewsAndStories/NewsAndStories.test.js
@@ -10,6 +10,49 @@ const render = createRender({ theme });
 
 const defaultProps = {
   title: "News and Stories",
+  action: {
+    label: "Read Stories",
+    href: "/stories",
+  },
+  featured: {
+    title: "Battle for gender equality in African media continues",
+    excerpt:
+      "Lorem ipsum dolor sit amet consectetur adipiscing elit mattis, vestibulum potenti rhoncus eget lacus fermentum taciti quam, quis curae accumsan viverra semper dapibus sed.",
+    publishedOn: "Jan 6, 2022",
+    image: {
+      src: "https://res.cloudinary.com/code-for-africa/image/upload/v1650885664/codeforafrica/unsplash_L6hr1BptcNc_of23p3.png",
+      alt: "Featured Article Image",
+    },
+    readMoreLabel: "Read Story",
+    href: "/stories/article-1",
+  },
+  posts: [
+    {
+      title: "Battle for gender equality in African media continues",
+      excerpt:
+        "Lorem ipsum dolor sit amet consectetur adipiscing elit mattis, vestibulum potenti rhoncus eget lacus fermentum taciti quam, quis curae accumsan viverra semper dapibus sed.",
+      publishedOn: "Jan 6, 2022",
+      image: {
+        src: "https://res.cloudinary.com/code-for-africa/image/upload/v1650885664/codeforafrica/unsplash_L6hr1BptcNc_of23p3.png",
+        alt: "Featured Article Image",
+      },
+      readMoreLabel: "Read Story",
+      href: "/stories/article-1",
+    },
+    {
+      title: "Battle for gender equality in African media continues",
+      excerpt:
+        "Lorem ipsum dolor sit amet consectetur adipiscing elit mattis, vestibulum potenti rhoncus eget lacus fermentum taciti quam, quis curae accumsan viverra semper dapibus sed.",
+      publishedOn: "Jan 6, 2022",
+      image: {
+        src: "https://res.cloudinary.com/code-for-africa/image/upload/v1650885664/codeforafrica/unsplash_L6hr1BptcNc_of23p3.png",
+        alt: "Featured Article Image",
+      },
+      readMoreLabel: "Read Story",
+      href: "/stories/article-1",
+    },
+  ],
+  featuredStoryActionLabel: "Read Story",
 };
 
 describe("<NewsAndStories />", () => {

diff --git a/apps/codeforafrica/src/lib/data/blockify/featuredStories.js b/apps/codeforafrica/src/lib/data/blockify/featuredStories.js
@@ -0,0 +1,20 @@
+import { formatPost } from "@/codeforafrica/lib/data/utils/posts";
+
+async function featuredStories(block) {
+  const {
+    primaryTag,
+    featured: { story: featuredStory, action: featuredStoryActionLabel },
+    stories: { items, action },
+    ...other
+  } = block;
+  return {
+    ...other,
+    action,
+    featured: formatPost(featuredStory, primaryTag),
+    featuredStoryActionLabel,
+    stories: items.map((item) => formatPost(item, primaryTag)),
+    slug: "featured-stories",
+  };
+}
+
+export default featuredStories;
diff --git a/apps/codeforafrica/src/lib/data/blockify/index.js b/apps/codeforafrica/src/lib/data/blockify/index.js
@@ -1,3 +1,4 @@
+import featuredStories from "./featuredStories";
 import getInvolved from "./get-involved";
 import hero from "./hero";
 import meetOurTeam from "./meetOurTeam";
@@ -7,6 +8,7 @@ import ourWork from "./ourWork";
 import posts from "./posts";
 
 const propsifyBlockBySlug = {
+  "featured-stories": featuredStories,
   "get-involved": getInvolved,
   hero,
   "meet-our-team": meetOurTeam,

diff --git a/apps/codeforafrica/src/pages/[...slugs].page.js b/apps/codeforafrica/src/pages/[...slugs].page.js
@@ -29,12 +29,12 @@ const componentsBySlugs = {
   article: ArticlePage,
   "contact-form": ContactForm,
   "custom-page-header": CustomPageHeader,
+  "featured-stories": NewsAndStories,
   "get-involved": GetInvolved,
   "get-in-touch": GetInTouch,
   hero: Hero,
   "join-our-slack": JoinOurSlack,
   "meet-our-team": MeetOurTeam,
-  "news-stories": NewsAndStories,
   opportunities: Opportunities,
   "our-guiding-principles": GuidingPrinciplesCardList,
   "our-impact": OurImpact,

diff --git a/apps/codeforafrica/src/payload/blocks/FeaturedStories.js b/apps/codeforafrica/src/payload/blocks/FeaturedStories.js
@@ -0,0 +1,76 @@
+import linkGroup from "../fields/links/linkGroup";
+
+const FeaturedStories = {
+  slug: "featured-stories",
+  imageURL: "/images/cms/blocks/featured_stories.jpg",
+  imageAltText: "Featured Stories",
+  labels: {
+    singular: {
+      en: "Featured Stories",
+    },
+    plural: {
+      en: "Featured Stories",
+    },
+  },
+  fields: [
+    {
+      name: "title",
+      type: "text",
+      required: true,
+    },
+    {
+      name: "primaryTag",
+      label: "Post Type",
+      type: "text",
+      defaultValue: "stories",
+      admin: {
+        hidden: true,
+      },
+    },
+    {
+      name: "featured",
+      label: "Featured Story",
+      type: "group",
+      fields: [
+        {
+          name: "story",
+          type: "relationship",
+          relationTo: "posts",
+          hasMany: false,
+          required: true,
+        },
+        {
+          name: "action",
+          label: "Action Label",
+          type: "text",
+          defaultValue: "Read Story",
+        },
+      ],
+    },
+    {
+      name: "stories",
+      label: "Stories",
+      type: "group",
+      fields: [
+        {
+          name: "items",
+          label: "Stories",
+          type: "relationship",
+          relationTo: "posts",
+          hasMany: true,
+          minRows: 1,
+          maxRows: 3,
+          required: true,
+        },
+        linkGroup({
+          overrides: {
+            name: "action",
+            label: "Browse More Action",
+          },
+        }),
+      ],
+    },
+  ],
+};
+
+export default FeaturedStories;
diff --git a/apps/codeforafrica/src/payload/collections/Pages.js b/apps/codeforafrica/src/payload/collections/Pages.js
@@ -1,6 +1,7 @@
 import ContactForm from "../blocks/ContactForm";
 import CustomPageHeader from "../blocks/CustomPageHeader";
 import Error from "../blocks/Error";
+import FeaturedStories from "../blocks/FeaturedStories";
 import GetInTouch from "../blocks/GetInTouch";
 import GetInvolved from "../blocks/GetInvolved";
 import GuidingPrinciples from "../blocks/GuidingPrinciples";
@@ -51,6 +52,7 @@ const Pages = {
       blocks: [
         ContactForm,
         Error,
+        FeaturedStories,
         GetInTouch,
         GetInvolved,
         GuidingPrinciples,