Merge pull request #1487 from CodeForAfrica/fix/testimonial-background-color

Configurable background and text colour for ContentOverview and Testimonial

Author: koechkevin

apps/trustlab/src/components/ContentOverview/ContentOverview.js

@@ -87,15 +87,23 @@ const itemValueSx = {
 };
 
 const ContentOverview = forwardRef(function ContentOverview(props, ref) {
-  const { card, content, date, location, title } = props;
+  const {
+    card,
+    content,
+    date,
+    location,
+    title,
+    backgroundColor = "#fff",
+    textColor = "#000",
+  } = props;
 
   if (!(content && card)) {
     return null;
   }
   const { cardType, items, richContent, title: cardTitle } = card;
   const hasLocationOrDate = location?.length || date?.length;
   return (
-    <Box sx={{ backgroundColor: "common.white" }} ref={ref}>
+    <Box sx={{ backgroundColor, color: textColor }} ref={ref}>
       <Section sx={{ py: 5, px: { xs: 2.5, sm: 0 } }}>
         <Grid container spacing={4} alignItems="flex-start">
           <Grid
@@ -113,7 +121,11 @@ const ContentOverview = forwardRef(function ContentOverview(props, ref) {
             ) : null}
             {hasLocationOrDate ? (
               <Grid>
-                <LocationAndDate date={date} location={location} />
+                <LocationAndDate
+                  color={textColor}
+                  date={date}
+                  location={location}
+                />
               </Grid>
             ) : null}
             <Grid>
@@ -123,12 +135,13 @@ const ContentOverview = forwardRef(function ContentOverview(props, ref) {
                   "h1, h2, h3, h4, h5, h6": {
                     ...headingSx,
                     mb: 1,
+                    color: textColor,
                   },
                   p: { mb: 2 },
                 }}
                 TypographyProps={{
                   gutterBottom: true,
-                  sx: bodySx,
+                  sx: { ...bodySx, color: textColor },
                 }}
               />
             </Grid>

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

@@ -3,7 +3,7 @@
 exports[`<ContentOverview /> renders items without labels 1`] = `
 <div>
   <div
-    class="MuiBox-root css-1k9ek97"
+    class="MuiBox-root css-jvd2ob"
   >
     <div
       class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-j09c23-MuiContainer-root"
@@ -18,7 +18,7 @@ exports[`<ContentOverview /> renders items without labels 1`] = `
             class="MuiGrid2-root MuiGrid2-direction-xs-row css-1fzlhpv-MuiGrid2-root"
           >
             <div
-              class="MuiBox-root css-e71fug"
+              class="MuiBox-root css-1wrl852"
             />
           </div>
         </div>
@@ -75,7 +75,7 @@ exports[`<ContentOverview /> renders items without labels 1`] = `
 exports[`<ContentOverview /> renders richtext card type 1`] = `
 <div>
   <div
-    class="MuiBox-root css-1k9ek97"
+    class="MuiBox-root css-jvd2ob"
   >
     <div
       class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-j09c23-MuiContainer-root"
@@ -90,7 +90,7 @@ exports[`<ContentOverview /> renders richtext card type 1`] = `
             class="MuiGrid2-root MuiGrid2-direction-xs-row css-1fzlhpv-MuiGrid2-root"
           >
             <div
-              class="MuiBox-root css-e71fug"
+              class="MuiBox-root css-1wrl852"
             />
           </div>
         </div>
@@ -119,7 +119,7 @@ exports[`<ContentOverview /> renders richtext card type 1`] = `
 exports[`<ContentOverview /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiBox-root css-1k9ek97"
+    class="MuiBox-root css-jvd2ob"
   >
     <div
       class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-j09c23-MuiContainer-root"
@@ -134,7 +134,7 @@ exports[`<ContentOverview /> renders unchanged 1`] = `
             class="MuiGrid2-root MuiGrid2-direction-xs-row css-1fzlhpv-MuiGrid2-root"
           >
             <div
-              class="MuiBox-root css-e71fug"
+              class="MuiBox-root css-1wrl852"
             />
           </div>
         </div>
@@ -248,7 +248,7 @@ exports[`<ContentOverview /> renders unchanged 1`] = `
 exports[`<ContentOverview /> renders with linked item 1`] = `
 <div>
   <div
-    class="MuiBox-root css-1k9ek97"
+    class="MuiBox-root css-jvd2ob"
   >
     <div
       class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-j09c23-MuiContainer-root"
@@ -263,7 +263,7 @@ exports[`<ContentOverview /> renders with linked item 1`] = `
             class="MuiGrid2-root MuiGrid2-direction-xs-row css-1fzlhpv-MuiGrid2-root"
           >
             <div
-              class="MuiBox-root css-e71fug"
+              class="MuiBox-root css-1wrl852"
             />
           </div>
         </div>

apps/trustlab/src/components/LocationAndDate/LocationAndDate.js

@@ -1,7 +1,7 @@
 import { RichTypography } from "@commons-ui/next";
 import { Divider, Stack } from "@mui/material";
 
-function LocationAndDate({ DividerProps, date, location, sx }) {
+function LocationAndDate({ DividerProps, color, date, location, sx }) {
   // if both location and date are not present, return null
   if (!(date?.length || location?.length)) {
     return null;
@@ -14,14 +14,14 @@ function LocationAndDate({ DividerProps, date, location, sx }) {
         orientation="vertical"
         flexItem
         variant="middle"
-        sx={{ backgroundColor: "text.primary" }}
+        sx={{ backgroundColor: color ?? "text.primary" }}
         {...DividerProps}
       />
     );
   }
   return (
     <Stack direction="row" divider={divider} spacing={1} sx={sx}>
-      <RichTypography variant="p2" sx={{ color: "common.black" }}>
+      <RichTypography variant="p2" sx={{ color: color ?? "common.black" }}>
         {location}
       </RichTypography>
       <RichTypography variant="p2" sx={{ color: "#828499" }}>

apps/trustlab/src/components/Testimonial/Testimonial.js

@@ -5,7 +5,15 @@ import { Box, Grid2 as Grid, Typography } from "@mui/material";
 import { forwardRef } from "react";
 
 const Testimonial = forwardRef(function Testimonial(props, ref) {
-  const { title, description, image, signatureIcon, sx } = props;
+  const {
+    title,
+    description,
+    image,
+    signatureIcon,
+    backgroundColor = "#fff",
+    textColor = "#000",
+    sx,
+  } = props;
 
   if (!(description && image?.src && image.width && image.height)) {
     return null;
@@ -22,7 +30,8 @@ const Testimonial = forwardRef(function Testimonial(props, ref) {
       ref={ref}
       sx={[
         {
-          backgroundColor: "#fff",
+          backgroundColor,
+          color: textColor,
           py: 2,
         },
         ...(Array.isArray(sx) ? sx : [sx]),

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

@@ -1,5 +1,7 @@
 import { link, richText } from "@commons-ui/payload/fields";
 
+import colorSettingsField from "../fields/colorSettingsField";
+
 const ContentOverview = {
   slug: "content-overview",
   imageURL: "/images/cms/blocks/content-overview.png",
@@ -12,6 +14,10 @@ const ContentOverview = {
       localized: true,
     },
     richText({ name: "content", required: true, localized: true }),
+    colorSettingsField({
+      backgroundOverrides: { defaultValue: "#fff" },
+      textOverrides: { defaultValue: "#000" },
+    }),
     {
       name: "card",
       type: "group",

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

@@ -1,5 +1,7 @@
 import { richText } from "@commons-ui/payload/fields";
 
+import colorSettingsField from "../fields/colorSettingsField";
+
 const Testimonial = {
   slug: "testimonial",
   labels: { singular: "Testimonial", plural: "Testimonials" },
@@ -17,6 +19,10 @@ const Testimonial = {
       required: true,
       localized: true,
     }),
+    colorSettingsField({
+      backgroundOverrides: { defaultValue: "#fff" },
+      textOverrides: { defaultValue: "#000" },
+    }),
     {
       name: "image",
       type: "upload",