Trustlab: Showcase block

apps/trustlab/src/components/CallToAction/CallToAction.js

@@ -0,0 +1,180 @@
+import { Section } from "@commons-ui/core";
+import { Figure, Link } from "@commons-ui/next";
+import { LexicalRichText } from "@commons-ui/payload";
+import { Box, Button, Typography } from "@mui/material";
+import React, { forwardRef } from "react";
+
+const CallToAction = forwardRef(function CallToAction(
+  { reverse, images, title, description, label, href },
+  ref,
+) {
+  if (!images || images.length < 4) {
+    return null;
+  }
+  const [image1, image2, image3, image4] = images;
+  return (
+    <Box
+      sx={{
+        bgcolor: "common.black",
+      }}
+      ref={ref}
+    >
+      <Section
+        sx={{
+          color: "common.white",
+          py: 8,
+        }}
+      >
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: {
+              xs: "column",
+              md: reverse ? "row-reverse" : "row",
+            },
+            justifyContent: "flex-end",
+            width: "100%",
+            color: "white",
+            overflow: "hidden",
+            m: "0 auto",
+            gap: 2,
+          }}
+        >
+          <Box
+            sx={{
+              position: "relative",
+              height: { sm: "600px", xs: "360px" },
+              width: { xs: "390px", sm: "572px" },
+              maxWidth: "572px",
+              margin: "0 auto",
+            }}
+          >
+            <Figure
+              ImageProps={{
+                src: image1.image.src,
+                alt: image1.image.alt || "Showcase Image 1",
+              }}
+              sx={{
+                display: {
+                  sm: "block",
+                },
+                height: { sm: "253px", xs: "153px" },
+                width: { sm: "203px", xs: 121 },
+                position: "absolute",
+                top: 0,
+                left: 80,
+              }}
+            />
+            <Figure
+              ImageProps={{
+                src: image2.image.src,
+                alt: image2.image.alt || "Showcase Image 2",
+              }}
+              sx={{
+                display: {
+                  sm: "block",
+                },
+                height: { sm: "253px", xs: "157px" },
+                width: { sm: "260px", xs: "157px" },
+                position: "absolute",
+                right: 20,
+                bottom: { sm: "276px", xs: "unset" },
+                top: { sm: "unset", xs: "16px" },
+              }}
+            />
+            <Figure
+              ImageProps={{
+                src: image3.image.src,
+                alt: image3.image.alt || "Showcase Image 3",
+              }}
+              sx={{
+                display: {
+                  sm: "block",
+                },
+                height: { sm: "260px", xs: "157px" },
+                width: { sm: "260px", xs: "157px" },
+                position: "absolute",
+                top: { sm: "276px", xs: "160px" },
+                left: { sm: 0, xs: "32px" },
+              }}
+            />
+
+            <Figure
+              ImageProps={{
+                src: image4.image.src,
+                alt: image4.image.alt || "Showcase Image 4",
+              }}
+              sx={{
+                display: {
+                  sm: "block",
+                },
+                height: { sm: "260px", xs: "157px" },
+                width: { sm: "200px", xs: "121px" },
+                position: "absolute",
+                bottom: { xs: "unset", sm: "0" },
+                top: { xs: "176px", sm: "unset" },
+                left: { sm: "276px", xs: "200px" },
+              }}
+            />
+          </Box>
+
+          <Box
+            flex={1}
+            alignItems="center"
+            justifyContent="center"
+            display="flex"
+            sx={{
+              px: { xs: 2.5, sm: 0 },
+            }}
+          >
+            <Box
+              sx={{
+                flex: 1,
+                bgcolor: "white",
+                color: "black",
+                p: { xs: 3, md: 6 },
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center",
+                ml: { xs: 0, md: reverse ? 0 : -10 },
+                mr: { xs: 0, md: reverse ? -10 : 0 },
+                zIndex: 1,
+              }}
+            >
+              <Typography variant="display3" gutterBottom>
+                {title}
+              </Typography>
+              <LexicalRichText
+                elements={description}
+                TypographyProps={{
+                  sx: { mb: 3 },
+                }}
+              />
+              <Button
+                variant="contained"
+                component={href ? Link : undefined}
+                href={href}
+                sx={{
+                  bgcolor: "black",
+                  color: "white",
+                  fontWeight: "bold",
+                  px: 4,
+                  py: 1.5,
+                  "&:hover": {
+                    bgcolor: "#222",
+                  },
+                  width: "fit-content",
+                  mt: 6,
+                }}
+              >
+                {label}
+              </Button>
+            </Box>
+          </Box>
+        </Box>
+      </Section>
+    </Box>
+  );
+});
+
+export default CallToAction;

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

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<CallToAction /> renders unchanged 1`] = `<div />`;

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

@@ -0,0 +1,17 @@
+import { createRender } from "@commons-ui/testing-library";
+import React from "react";
+
+import CallToAction from "./CallToAction";
+
+import theme from "@/trustlab/theme";
+
+const render = createRender({ theme });
+
+const defaultProps = {};
+
+describe("<CallToAction />", () => {
+  it("renders unchanged", () => {
+    const { container } = render(<CallToAction {...defaultProps} />);
+    expect(container).toMatchSnapshot();
+  });
+});

apps/trustlab/src/components/CallToAction/index.js

@@ -0,0 +1,3 @@
+import CallToAction from "./CallToAction";
+
+export default CallToAction;

apps/trustlab/src/components/DonorOverviewList/DonorOverviewList.js

@@ -14,7 +14,7 @@ const DonorOverviewList = React.forwardRef(
       <Section
         sx={(theme) => ({
           px: { xs: 2.5, sm: 0 },
-          py: { xs: 5, md: 7, lg: 10 },
+          py: 4.5,
           maxWidth: theme.contentWidths.values,
           m: "0 auto",
           ...sx,
@@ -48,7 +48,6 @@ const DonorOverviewList = React.forwardRef(
                 sm={2}
                 justifyContent="center"
                 key={id}
-                spacing={2}
                 sx={{
                   width: {
                     xs: "100%",

apps/trustlab/src/components/PartnerOverviewList/PartnerOverviewList.js

@@ -20,7 +20,7 @@ const PartnerOverviewList = React.forwardRef(
         <Box
           sx={(theme) => ({
             px: { xs: 2.5, sm: 0 },
-            py: { xs: 5, md: 7, lg: 10 },
+            py: 4.5,
             maxWidth: theme.contentWidths.values,
             m: "0 auto",
             ...sx,
@@ -54,7 +54,6 @@ const PartnerOverviewList = React.forwardRef(
                   sm={2}
                   justifyContent="center"
                   key={id}
-                  spacing={2}
                   sx={{
                     width: {
                       xs: "100%",

apps/trustlab/src/pages/[[...slugs]].page.js

@@ -1,6 +1,7 @@
 import React from "react";
 import { SWRConfig } from "swr";
 
+import CallToAction from "@/trustlab/components/CallToAction";
 import DonorOverviewList from "@/trustlab/components/DonorOverviewList";
 import Hero from "@/trustlab/components/Hero";
 import PartnerOverviewList from "@/trustlab/components/PartnerOverviewList";
@@ -10,6 +11,7 @@ const componentsBySlugs = {
   hero: Hero,
   "partner-overview-list": PartnerOverviewList,
   "donor-overview-list": DonorOverviewList,
+  "call-to-action": CallToAction,
 };
 
 function Page({ blocks, fallback }) {
@@ -30,7 +32,7 @@ function Page({ blocks, fallback }) {
         if (!Component) {
           return null;
         }
-        return <Component {...block} key={block.slug} />;
+        return <Component {...block} key={block.id} />;
       })}
     </PageComponent>
   );

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

@@ -0,0 +1,62 @@
+import { richText, image, link } from "@commons-ui/payload";
+
+const CallToAction = {
+  slug: "call-to-action",
+  labels: {
+    singular: "Call to Action",
+    plural: "Calls to Action",
+  },
+  imageURL: "/images/cms/blocks/call-to-action.png",
+  imageAltText: "Showcases images and content.",
+  fields: [
+    {
+      name: "title",
+      type: "text",
+      required: true,
+      localized: true,
+      admin: {},
+    },
+    richText({
+      name: "description",
+      required: true,
+      admin: {
+        description: "A brief description of the slide content.",
+      },
+    }),
+    {
+      name: "reverse",
+      type: "checkbox",
+      label: { en: "Reverse Layout" },
+      defaultValue: false,
+      admin: {
+        description:
+          "If enabled, the layout of the showcase block will be reversed. This is used to determine the layout of the showcase block.",
+      },
+    },
+    link({
+      name: "action",
+      label: "Action Link",
+      required: true,
+    }),
+    {
+      name: "images",
+      type: "array",
+      label: { en: "Images" },
+      minRows: 4,
+      maxRows: 4,
+      fields: [
+        image({
+          overrides: {
+            name: "image",
+            required: true,
+            admin: {
+              description: "Image to display in the showcase block.",
+            },
+          },
+        }),
+      ],
+    },
+  ],
+};
+
+export default CallToAction;

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

@@ -2,6 +2,7 @@ import { slug, fullTitle } from "@commons-ui/payload";
 
 import { canManagePages } from "@/trustlab/payload/access/abilities";
 import { anyone } from "@/trustlab/payload/access/anyone";
+import CallToAction from "@/trustlab/payload/blocks/CallToAction";
 import DonorOverviewList from "@/trustlab/payload/blocks/DonorOverviewList";
 import Hero from "@/trustlab/payload/blocks/Hero";
 import PartnerOverviewList from "@/trustlab/payload/blocks/PartnerOverviewList";
@@ -41,7 +42,7 @@ const Pages = {
     {
       name: "blocks",
       type: "blocks",
-      blocks: [Hero, DonorOverviewList, PartnerOverviewList],
+      blocks: [Hero, CallToAction, DonorOverviewList, PartnerOverviewList],
       localized: true,
       admin: {
         initCollapsed: true,