diff --git a/apps/trustlab/public/images/cms/blocks/call-to-action.png b/apps/trustlab/public/images/cms/blocks/call-to-action.png new file mode 100644 index 000000000..4e99e23e1 Binary files /dev/null and b/apps/trustlab/public/images/cms/blocks/call-to-action.png differ diff --git a/apps/trustlab/src/components/CallToAction/CallToAction.js b/apps/trustlab/src/components/CallToAction/CallToAction.js new file mode 100644 index 000000000..093216267 --- /dev/null +++ b/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 ( + +
+ + +
+
+
+ +
+ + + + + + {title} + + + + + + +
+ + ); +}); + +export default CallToAction; diff --git a/apps/trustlab/src/components/CallToAction/CallToAction.snap.js b/apps/trustlab/src/components/CallToAction/CallToAction.snap.js new file mode 100644 index 000000000..773cb95de --- /dev/null +++ b/apps/trustlab/src/components/CallToAction/CallToAction.snap.js @@ -0,0 +1,3 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders unchanged 1`] = `
`; diff --git a/apps/trustlab/src/components/CallToAction/CallToAction.test.js b/apps/trustlab/src/components/CallToAction/CallToAction.test.js new file mode 100644 index 000000000..cdddf6dc3 --- /dev/null +++ b/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("", () => { + it("renders unchanged", () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/apps/trustlab/src/components/CallToAction/index.js b/apps/trustlab/src/components/CallToAction/index.js new file mode 100644 index 000000000..61891f04b --- /dev/null +++ b/apps/trustlab/src/components/CallToAction/index.js @@ -0,0 +1,3 @@ +import CallToAction from "./CallToAction"; + +export default CallToAction; diff --git a/apps/trustlab/src/components/DonorOverviewList/DonorOverviewList.js b/apps/trustlab/src/components/DonorOverviewList/DonorOverviewList.js index 51a93eb90..e5b0bb544 100644 --- a/apps/trustlab/src/components/DonorOverviewList/DonorOverviewList.js +++ b/apps/trustlab/src/components/DonorOverviewList/DonorOverviewList.js @@ -14,7 +14,7 @@ const DonorOverviewList = React.forwardRef(
({ 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%", diff --git a/apps/trustlab/src/components/PartnerOverviewList/PartnerOverviewList.js b/apps/trustlab/src/components/PartnerOverviewList/PartnerOverviewList.js index e1f4eb5f6..0e9546d3d 100644 --- a/apps/trustlab/src/components/PartnerOverviewList/PartnerOverviewList.js +++ b/apps/trustlab/src/components/PartnerOverviewList/PartnerOverviewList.js @@ -20,7 +20,7 @@ const PartnerOverviewList = React.forwardRef( ({ 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%", diff --git a/apps/trustlab/src/pages/[[...slugs]].page.js b/apps/trustlab/src/pages/[[...slugs]].page.js index 499380569..f6e59420f 100644 --- a/apps/trustlab/src/pages/[[...slugs]].page.js +++ b/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 ; + return ; })} ); diff --git a/apps/trustlab/src/payload/blocks/CallToAction.js b/apps/trustlab/src/payload/blocks/CallToAction.js new file mode 100644 index 000000000..b70d62045 --- /dev/null +++ b/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; diff --git a/apps/trustlab/src/payload/collections/Pages.js b/apps/trustlab/src/payload/collections/Pages.js index 2b4dd1e33..14ae8364f 100644 --- a/apps/trustlab/src/payload/collections/Pages.js +++ b/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,