Trustlab: Post Page add block support

apps/trustlab/src/components/Banner/Banner.js

@@ -7,7 +7,7 @@ function Banner({
   backgroundColor,
   textColor,
   title,
-  description,
+  description = "",
   image,
   blockType,
 }) {
@@ -38,7 +38,21 @@ function Banner({
             >
               {title}
             </RichTypography>
-            {description && (
+            {typeof description === "string" ? (
+              <RichTypography
+                color={textColor}
+                variant={isPageHeader ? "subheading1" : "p1"}
+                sx={{
+                  mb: 4,
+                  textAlign: {
+                    xs: "center",
+                    md: "start",
+                  },
+                }}
+              >
+                {description}
+              </RichTypography>
+            ) : (
               <LexicalRichText
                 TypographyProps={{
                   color: textColor,

apps/trustlab/src/components/PageOverview/PageOverview.js

@@ -1,61 +1,115 @@
 import { Section } from "@commons-ui/core";
-import { Figure } from "@commons-ui/next";
+import { Figure, Link } from "@commons-ui/next";
 import { LexicalRichText } from "@commons-ui/payload";
-import { Grid, Typography } from "@mui/material";
+import { Grid, Typography, Button, Box } from "@mui/material";
 import React, { forwardRef } from "react";
 
-const PageOverview = forwardRef(function PageOverview(
-  { title, description, image },
+const PostImageOverview = forwardRef(function PostImageOverview(
+  {
+    content,
+    image,
+    date,
+    caption,
+    buttonLink,
+    isClosed = false,
+    backgroundColor = "common.white",
+    textColor = "text.primary",
+  },
   ref,
 ) {
-  if (!title || !description || !image?.url) {
+  if (!content && !image) {
     return null;
   }
+
   const { url, alt } = image;
+
   return (
-    <Section sx={{ py: 8, px: { xs: 2.5, md: 0 } }} ref={ref}>
-      <Grid
-        container
-        alignItems="center"
-        flexWrap="nowrap"
-        spacing={{ xs: 6, md: 0 }}
-        flexDirection={{ xs: "column", md: "row" }}
-        justifyContent="space-between"
-      >
-        <Grid item>
-          <Typography
-            variant="h1"
-            sx={{ borderBottom: "1px solid", mb: 3, pb: 1 }}
-          >
-            {title}
-          </Typography>
-          <LexicalRichText
-            elements={description}
-            TypographyProps={{
-              sx: { mb: 2 },
-            }}
-          />
-        </Grid>
+    <Box
+      sx={{
+        backgroundColor,
+      }}
+      ref={ref}
+    >
+      <Section sx={{ py: 8, px: { xs: 2.5, md: 0 } }}>
         <Grid
-          item
-          sx={{ width: { xs: "100%", md: "283.53px" }, minWidth: "283.53px" }}
+          container
+          alignItems="flex-start"
+          sx={{
+            flexWrap: "nowrap",
+            gap: {
+              xs: 6,
+              md: 2,
+            },
+            flexDirection: { xs: "column", md: "row" },
+          }}
+          justifyContent="space-between"
         >
-          <Figure
-            ImageProps={{
-              alt,
-              src: url,
-            }}
+          <Grid item>
+            <LexicalRichText
+              elements={content}
+              sx={{
+                h1: {
+                  borderBottom: `1px solid`,
+                  mb: 3,
+                  pb: 1,
+                },
+                p: {
+                  mb: 3,
+                },
+              }}
+              TypographyProps={{
+                gutterBottom: true,
+                sx: {
+                  mb: 3,
+                  color: textColor,
+                },
+              }}
+            />
+          </Grid>
+          <Grid
+            item
             sx={{
-              height: { xs: "374.47px", md: "158px" },
-              m: 0,
-              position: "relative",
-              width: { xs: "100%", md: "283.53px" },
+              width: { xs: "100%", md: "360px" },
+              minWidth: "360px",
+              textAlign: { xs: "center", md: "left" },
+              position: "sticky",
+              top: 64,
+              alignSelf:
+                caption || date || buttonLink?.href ? "flex-start" : "center",
             }}
-          />
+          >
+            <Figure
+              ImageProps={{
+                alt,
+                src: url,
+              }}
+              sx={{
+                height: { xs: "374.47px", md: "268px" },
+                m: 0,
+                position: "relative",
+                width: { xs: "100%", md: "360px" },
+              }}
+            />
+            <Typography sx={{ mt: 2, color: textColor }}>{caption}</Typography>
+            <Typography sx={{ mt: 4, color: textColor }}>{date}</Typography>
+            {buttonLink?.href ? (
+              <Button
+                variant="contained"
+                component={buttonLink?.href && !isClosed ? Link : undefined}
+                href={buttonLink?.href}
+                disabled={isClosed}
+                sx={{
+                  mt: 2,
+                }}
+              >
+                {buttonLink?.label}
+              </Button>
+            ) : null}
+          </Grid>
         </Grid>
-      </Grid>
-    </Section>
+      </Section>
+    </Box>
   );
 });
 
-export default PageOverview;
+export default PostImageOverview;

apps/trustlab/src/components/PageOverview/PageOverview.snap.js

@@ -1,49 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<PageOverview /> renders unchanged 1`] = `
-<div>
-  <div
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1rx5gpk-MuiContainer-root"
-  >
-    <div
-      class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-6 css-1nj03o-MuiGrid-root"
-    >
-      <div
-        class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
-      >
-        <h1
-          class="MuiTypography-root MuiTypography-h1 css-1y38bh9-MuiTypography-root"
-        >
-          Overview Title
-        </h1>
-        <div
-          class="MuiBox-root css-0"
-        >
-          <div
-            class="payload-richtext"
-          />
-        </div>
-      </div>
-      <div
-        class="MuiGrid-root MuiGrid-item css-ok4we9-MuiGrid-root"
-      >
-        <figure
-          class="MuiBox-root css-1b6fz1"
-        >
-          <img
-            alt="Example Image"
-            class="css-qv2885"
-            data-nimg="fill"
-            decoding="async"
-            loading="lazy"
-            sizes="100vw"
-            src="/_next/image?url=%2Fimages%2Fcms%2Fblocks%2Foverview.png&w=3840&q=75"
-            srcset="/_next/image?url=%2Fimages%2Fcms%2Fblocks%2Foverview.png&w=640&q=75 640w, /_next/image?url=%2Fimages%2Fcms%2Fblocks%2Foverview.png&w=750&q=75 750w, /_next/image?url=%2Fimages%2Fcms%2Fblocks%2Foverview.png&w=828&q=75 828w, /_next/image?url=%2Fimages%2Fcms%2Fblocks%2Foverview.png&w=1080&q=75 1080w, /_next/image?url=%2Fimages%2Fcms%2Fblocks%2Foverview.png&w=1200&q=75 1200w, /_next/image?url=%2Fimages%2Fcms%2Fblocks%2Foverview.png&w=1920&q=75 1920w, /_next/image?url=%2Fimages%2Fcms%2Fblocks%2Foverview.png&w=2048&q=75 2048w, /_next/image?url=%2Fimages%2Fcms%2Fblocks%2Foverview.png&w=3840&q=75 3840w"
-            style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; right: 0px; bottom: 0px; color: transparent;"
-          />
-        </figure>
-      </div>
-    </div>
-  </div>
-</div>
-`;
+exports[`<PageOverview /> renders unchanged 1`] = `<div />`;

apps/trustlab/src/components/PageOverview/PageOverview.test.js

@@ -7,23 +7,7 @@ import theme from "@/trustlab/theme";
 
 const render = createRender({ theme });
 
-const defaultProps = {
-  title: "Overview Title",
-  description: [
-    {
-      type: "paragraph",
-      children: [
-        {
-          text: "This is an overview description.",
-        },
-      ],
-    },
-  ],
-  image: {
-    url: "/images/cms/blocks/overview.png",
-    alt: "Example Image",
-  },
-};
+const defaultProps = {};
 
 describe("<PageOverview />", () => {
   it("renders unchanged", () => {

apps/trustlab/src/lib/data/pagify/index.js

@@ -2,6 +2,7 @@ import post from "./post";
 
 const COLLECTION_BY_SLUG = {
   opportunities: post,
+  incubator: post,
 };
 
 async function pagify(parentPage, api, context) {

apps/trustlab/src/payload/blocks/PageOverview.js

@@ -1,4 +1,6 @@
-import { richText, image } from "@commons-ui/payload";
+import { richText, image, linkGroup } from "@commons-ui/payload";
+
+import colorSettingsField from "../fields/colorSettingsField";
 
 const PageOverview = {
   slug: "page-overview",
@@ -9,14 +11,8 @@ const PageOverview = {
     plural: "Page Overviews",
   },
   fields: [
-    {
-      name: "title",
-      type: "text",
-      required: true,
-      localized: true,
-    },
     richText({
-      name: "description",
+      name: "content",
       required: true,
       localized: true,
       admin: {
@@ -29,6 +25,29 @@ const PageOverview = {
         required: true,
       },
     }),
+    {
+      name: "caption",
+      type: "text",
+      localized: true,
+    },
+    linkGroup({
+      overrides: {
+        name: "buttonLink",
+        label: "Button Link",
+        required: false,
+      },
+      linkConfig: {
+        required: false,
+      },
+    }),
+    colorSettingsField({
+      backgroundOverrides: {
+        defaultValue: "#F0F0F5",
+      },
+      textOverrides: {
+        defaultValue: "#000000",
+      },
+    }),
   ],
 };
 

apps/trustlab/src/payload/collections/BaseContentCollection.js

@@ -1,4 +1,11 @@
-import { image, publishedOn, richText, slug } from "@commons-ui/payload";
+import { image, publishedOn, slug } from "@commons-ui/payload";
+
+import {
+  Content,
+  DonorOverviewList,
+  PartnerOverviewList,
+  PageOverview,
+} from "../blocks";
 
 import { canManageContent } from "@/trustlab/payload/access/abilities";
 import { anyone } from "@/trustlab/payload/access/anyone";
@@ -40,10 +47,13 @@ function BaseContentCollection(
         position: "sidebar",
       },
     },
-    richText({
+    {
       name: "content",
+      type: "blocks",
+      blocks: [Content, PageOverview, DonorOverviewList, PartnerOverviewList],
       localized: true,
-    }),
+      required: true,
+    },
     publishedOn(),
   ];
 

apps/trustlab/src/payload/utils/formatDate.js

@@ -1,4 +1,4 @@
-const formatDate = (date, options) => {
+const formatDate = (date, options = {}) => {
   const { locale = "en", includeTime, ...restOptions } = options;
 
   const formatOptions = {