@/Trustlab: CourseList

apps/trustlab/src/components/CourseList/CourseCard.js

@@ -0,0 +1,67 @@
+import { Link } from "@commons-ui/next";
+import { LexicalRichText } from "@commons-ui/payload";
+import { Card, CardContent, CardMedia, Typography } from "@mui/material";
+import React from "react";
+
+const CourseCard = React.forwardRef(function CourseCard(props, ref) {
+  const { image, title, description, link, ...other } = props;
+
+  return (
+    <Card
+      ref={ref}
+      sx={{
+        boxShadow: "none",
+        border: "none",
+        display: "inline-block",
+        maxWidth: { xs: "100%", sm: 400 },
+        width: "100%",
+        backgroundColor: "transparent",
+        textDecoration: "none",
+      }}
+      component={link?.href ? Link : "div"}
+      href={link?.href}
+      {...other}
+    >
+      <CardMedia
+        image={image.src}
+        title={title}
+        {...image}
+        sx={[
+          {
+            height: 200,
+            width: "100%",
+            position: "relative",
+            border: "1px solid",
+            borderRadius: "10px",
+            filter: "grayscale(100%)",
+            pb: "0 !important",
+            ...image?.sx,
+          },
+        ]}
+      />
+      <CardContent sx={{ p: 0 }}>
+        <Typography variant="h3" component="div" noWrap>
+          {title}
+        </Typography>
+        <LexicalRichText
+          elements={description}
+          TypographyProps={{
+            gutterBottom: true,
+            variant: "p3",
+            sx: {
+              mb: 0,
+              textDecoration: "none",
+              color: "#1F2937",
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+            },
+          }}
+        />
+      </CardContent>
+      <div />
+    </Card>
+  );
+});
+
+export default CourseCard;

apps/trustlab/src/components/CourseList/CourseList.js

@@ -0,0 +1,48 @@
+import { Section } from "@commons-ui/core";
+import { LexicalRichText } from "@commons-ui/payload";
+import { Box, Typography, Grid } from "@mui/material";
+import React, { forwardRef } from "react";
+
+import CourseCard from "./CourseCard";
+
+const CourseList = forwardRef(
+  ({ title, description, courses, ...props }, ref) => {
+    return (
+      <Section ref={ref} sx={{ py: 4, px: { xs: 2.5, md: 0 } }} {...props}>
+        <Box
+          display="flex"
+          justifyContent="space-between"
+          alignItems="center"
+          gap={{ xs: 2.5, md: 8 }}
+          mb={3.75}
+          sx={{
+            flexDirection: { xs: "column", md: "row" },
+          }}
+        >
+          <Typography sx={{ whiteSpace: "nowrap" }} variant="h1">
+            {title}
+          </Typography>
+          <LexicalRichText
+            elements={description}
+            TypographyProps={{
+              gutterBottom: true,
+              variant: "p2",
+              sx: {
+                mb: 0,
+              },
+            }}
+          />
+        </Box>
+        <Grid spacing={2.5} container>
+          {courses.map((course) => (
+            <Grid item key={course.id} xs={12} sm={4} md={4}>
+              <CourseCard {...course} />
+            </Grid>
+          ))}
+        </Grid>
+      </Section>
+    );
+  },
+);
+
+export default CourseList;

apps/trustlab/src/components/CourseList/Courselist.snap.js

@@ -0,0 +1,135 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<CourseList /> renders unchanged 1`] = `
+<div>
+  <div
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1yex5ce-MuiContainer-root"
+  >
+    <div
+      class="MuiBox-root css-3mrajc"
+    >
+      <h1
+        class="MuiTypography-root MuiTypography-h1 css-1h4ey4a-MuiTypography-root"
+      >
+        Test Course List
+      </h1>
+      <div
+        class="MuiBox-root css-0"
+      >
+        <div
+          class="payload-richtext"
+        />
+      </div>
+    </div>
+    <div
+      class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2.5 css-1tbc6t1-MuiGrid-root"
+    >
+      <div
+        class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 MuiGrid-grid-md-4 css-1dte7n6-MuiGrid-root"
+      >
+        <a
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-mm7cz9-MuiTypography-root-MuiLink-root-MuiPaper-root-MuiCard-root"
+          href="/course-1"
+          id="course-1"
+          style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
+        >
+          <div
+            alt="Course 1 Image"
+            class="MuiCardMedia-root css-1dg9gd2-MuiCardMedia-root"
+            role="img"
+            style="background-image: url(/images/course1.jpg);"
+            title="Course 1 Title"
+          />
+          <div
+            class="MuiCardContent-root css-127evc8-MuiCardContent-root"
+          >
+            <div
+              class="MuiTypography-root MuiTypography-h3 MuiTypography-noWrap css-nmdf49-MuiTypography-root"
+            >
+              Course 1 Title
+            </div>
+            <div
+              class="MuiBox-root css-0"
+            >
+              <div
+                class="payload-richtext"
+              />
+            </div>
+          </div>
+          <div />
+        </a>
+      </div>
+      <div
+        class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 MuiGrid-grid-md-4 css-1dte7n6-MuiGrid-root"
+      >
+        <a
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-mm7cz9-MuiTypography-root-MuiLink-root-MuiPaper-root-MuiCard-root"
+          href="/course-2"
+          id="course-2"
+          style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
+        >
+          <div
+            alt="Course 2 Image"
+            class="MuiCardMedia-root css-1dg9gd2-MuiCardMedia-root"
+            role="img"
+            style="background-image: url(/images/course2.jpg);"
+            title="Course 2 Title"
+          />
+          <div
+            class="MuiCardContent-root css-127evc8-MuiCardContent-root"
+          >
+            <div
+              class="MuiTypography-root MuiTypography-h3 MuiTypography-noWrap css-nmdf49-MuiTypography-root"
+            >
+              Course 2 Title
+            </div>
+            <div
+              class="MuiBox-root css-0"
+            >
+              <div
+                class="payload-richtext"
+              />
+            </div>
+          </div>
+          <div />
+        </a>
+      </div>
+      <div
+        class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 MuiGrid-grid-md-4 css-1dte7n6-MuiGrid-root"
+      >
+        <a
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-mm7cz9-MuiTypography-root-MuiLink-root-MuiPaper-root-MuiCard-root"
+          href="/course-3"
+          id="course-3"
+          style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
+        >
+          <div
+            alt="Course 3 Image"
+            class="MuiCardMedia-root css-1dg9gd2-MuiCardMedia-root"
+            role="img"
+            style="background-image: url(/images/course3.jpg);"
+            title="Course 3 Title"
+          />
+          <div
+            class="MuiCardContent-root css-127evc8-MuiCardContent-root"
+          >
+            <div
+              class="MuiTypography-root MuiTypography-h3 MuiTypography-noWrap css-nmdf49-MuiTypography-root"
+            >
+              Course 3 Title
+            </div>
+            <div
+              class="MuiBox-root css-0"
+            >
+              <div
+                class="payload-richtext"
+              />
+            </div>
+          </div>
+          <div />
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+`;

apps/trustlab/src/components/CourseList/Courselist.test.js

@@ -0,0 +1,81 @@
+import { createRender } from "@commons-ui/testing-library";
+import React from "react";
+
+import CourseList from "./CourseList";
+
+import theme from "@/trustlab/theme";
+
+const render = createRender({ theme });
+
+const defaultProps = {
+  title: "Test Course List",
+  description: [
+    {
+      type: "paragraph",
+      children: [{ text: "This is a test description for the course list." }],
+    },
+  ],
+  courses: [
+    {
+      id: "course-1",
+      image: {
+        src: "/images/course1.jpg",
+        alt: "Course 1 Image",
+      },
+      title: "Course 1 Title",
+      description: [
+        {
+          type: "paragraph",
+          children: [{ text: "Description for Course 1." }],
+        },
+      ],
+      link: {
+        href: "/course-1",
+        label: "Learn More",
+      },
+    },
+    {
+      id: "course-2",
+      image: {
+        src: "/images/course2.jpg",
+        alt: "Course 2 Image",
+      },
+      title: "Course 2 Title",
+      description: [
+        {
+          type: "paragraph",
+          children: [{ text: "Description for Course 2." }],
+        },
+      ],
+      link: {
+        href: "/course-2",
+        label: "Learn More",
+      },
+    },
+    {
+      id: "course-3",
+      image: {
+        src: "/images/course3.jpg",
+        alt: "Course 3 Image",
+      },
+      title: "Course 3 Title",
+      description: [
+        {
+          type: "paragraph",
+          children: [{ text: "Description for Course 3." }],
+        },
+      ],
+      link: {
+        href: "/course-3",
+        label: "Learn More",
+      },
+    },
+  ],
+};
+
+describe("<CourseList />", () => {
+  it("renders unchanged", () => {
+    const { container } = render(<CourseList {...defaultProps} />);
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -5,6 +5,7 @@ import ActionBanner from "@/trustlab/components/ActionBanner";
 import Banner from "@/trustlab/components/Banner";
 import CallToAction from "@/trustlab/components/CallToAction";
 import Content from "@/trustlab/components/Content";
+import CourseList from "@/trustlab/components/CourseList/CourseList";
 import DonorOverviewList from "@/trustlab/components/DonorOverviewList";
 import Gallery from "@/trustlab/components/Gallery/Gallery";
 import Hero from "@/trustlab/components/Hero";
@@ -20,6 +21,7 @@ const componentsBySlugs = {
   "action-banner": ActionBanner,
   "call-to-action": CallToAction,
   content: Content,
+  "course-list": CourseList,
   "donor-overview-list": DonorOverviewList,
   gallery: Gallery,
   "helplines-overview-list": OverviewCardList,