Skip to content

Commit

Permalink
Merge pull request #620 from CodeForAfrica/ft/posts-overview
Browse files Browse the repository at this point in the history
Ft/Featured stories
  • Loading branch information
kelvinkipruto authored Oct 4, 2023
2 parents 45b294c + 55cf28e commit fbf3c07
Show file tree
Hide file tree
Showing 9 changed files with 260 additions and 10 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 12 additions & 8 deletions apps/codeforafrica/src/components/NewsAndStories/NewsAndStories.js
Original file line number Diff line number Diff line change
Expand Up @@ -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={{
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
`;
Original file line number Diff line number Diff line change
Expand Up @@ -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 />", () => {
Expand Down
20 changes: 20 additions & 0 deletions apps/codeforafrica/src/lib/data/blockify/featuredStories.js
Original file line number Diff line number Diff line change
@@ -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;
2 changes: 2 additions & 0 deletions apps/codeforafrica/src/lib/data/blockify/index.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import featuredStories from "./featuredStories";
import getInvolved from "./get-involved";
import hero from "./hero";
import meetOurTeam from "./meetOurTeam";
Expand All @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion apps/codeforafrica/src/pages/[...slugs].page.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
76 changes: 76 additions & 0 deletions apps/codeforafrica/src/payload/blocks/FeaturedStories.js
Original file line number Diff line number Diff line change
@@ -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;
2 changes: 2 additions & 0 deletions apps/codeforafrica/src/payload/collections/Pages.js
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -51,6 +52,7 @@ const Pages = {
blocks: [
ContactForm,
Error,
FeaturedStories,
GetInTouch,
GetInvolved,
GuidingPrinciples,
Expand Down

0 comments on commit fbf3c07

Please sign in to comment.