feat: Add ReportCard and ReportsList components

apps/trustlab/src/components/ReportCard/ReportCard.js

@@ -0,0 +1,145 @@
+import { Link } from "@commons-ui/next";
+import { LexicalRichText } from "@commons-ui/payload";
+import {
+  Box,
+  Card,
+  CardContent,
+  CardMedia,
+  Divider,
+  Typography,
+} from "@mui/material";
+import { forwardRef } from "react";
+
+const ReportCard = forwardRef(function ReportCard(props, ref) {
+  const {
+    image,
+    title,
+    description,
+    link,
+    actionLabel = "Download Report",
+    condensed = false,
+    date = "Jul 28, 2025",
+    sx,
+    ...other
+  } = props;
+
+  return (
+    <Card
+      ref={ref}
+      elevation={0}
+      sx={[{ borderRadius: "5px", p: 0 }, ...(Array.isArray(sx) ? sx : [sx])]}
+      {...other}
+    >
+      {image?.src && !condensed && (
+        <CardMedia
+          component="img"
+          image={image.src}
+          alt={image.alt ?? title}
+          sx={{
+            borderRadius: "10px",
+            objectFit: "cover",
+            height: 200,
+          }}
+        />
+      )}
+      <CardContent
+        sx={{ pb: "16px !important", px: image?.src && !condensed ? 0 : 2 }}
+      >
+        <Typography variant="h3" gutterBottom>
+          {title}
+        </Typography>
+        <Typography
+          variant="caption"
+          component="div"
+          sx={{
+            color: "#828499",
+            my: 2,
+          }}
+        >
+          {date}
+        </Typography>
+        {description && !condensed && (
+          <>
+            <LexicalRichText
+              elements={description}
+              TypographyProps={{
+                variant: "body2",
+                component: "span",
+                sx: {
+                  display: "-webkit-box",
+                  WebkitLineClamp: 5,
+                  WebkitBoxOrient: "vertical",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  flex: 1,
+                  height: 100,
+                },
+              }}
+            />
+            <Divider sx={{ my: 2 }} />
+            {/* TODO: Remove link?.href integration is done */}
+            <Box
+              href={link?.href}
+              component={link?.href ? Link : "div"}
+              sx={{ textDecoration: "none", lineHeight: "16px" }}
+            >
+              <Typography
+                sx={{
+                  whiteSpace: "nowrap",
+                  fontWeight: "bold",
+                  color: "#1020E1",
+                  textDecoration: "none",
+                  lineHeight: "16px",
+                }}
+                variant="caption"
+              >
+                {actionLabel}
+              </Typography>
+            </Box>
+          </>
+        )}
+        {description && condensed && (
+          <Box>
+            <LexicalRichText
+              elements={description}
+              TypographyProps={{
+                variant: "body2",
+                component: "span",
+                sx: {
+                  display: "-webkit-box",
+                  WebkitLineClamp: 3,
+                  WebkitBoxOrient: "vertical",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  flex: 1,
+                  height: 60,
+                },
+              }}
+            />
+
+            <Box
+              href={link?.href}
+              component={link?.href ? Link : "div"}
+              sx={{ textDecoration: "none", lineHeight: "16px" }}
+            >
+              <Typography
+                sx={{
+                  whiteSpace: "nowrap",
+                  fontWeight: "bold",
+                  color: "#1020E1",
+                  textDecoration: "none",
+                  lineHeight: "16px",
+                }}
+                variant="caption"
+              >
+                {actionLabel}
+              </Typography>
+            </Box>
+          </Box>
+        )}
+      </CardContent>
+    </Card>
+  );
+});
+
+export default ReportCard;

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

@@ -0,0 +1,201 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ReportCard /> renders in condensed mode 1`] = `
+<div
+  class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-30th8x-MuiPaper-root-MuiCard-root"
+  style="--Paper-shadow: none;"
+>
+  <div
+    class="MuiCardContent-root css-1sipm9j-MuiCardContent-root"
+  >
+    <h3
+      class="MuiTypography-root MuiTypography-h3 MuiTypography-gutterBottom css-geacmp-MuiTypography-root"
+    >
+      Test Report
+    </h3>
+    <div
+      class="MuiTypography-root MuiTypography-caption css-uzvwmk-MuiTypography-root"
+    >
+      Jul 28, 2025
+    </div>
+    <div
+      class="MuiBox-root css-0"
+    >
+      <div
+        class="MuiBox-root css-0"
+      >
+        <div
+          class="payload-richtext"
+        >
+          <span
+            class="MuiTypography-root MuiTypography-body2 css-1fft1jv-MuiTypography-root"
+          >
+            This report is a baseline Information Ecosystem Assessment (IEA) of online communities in Kenya, mapping digital harms and malign actors, using the DISARM and D-RAIL frameworks for analysing weaponised hate speech, information manipulation and other forms of illicit influence operations.
+          </span>
+        </div>
+      </div>
+      <div
+        class="MuiBox-root css-s3avb4"
+      >
+        <span
+          class="MuiTypography-root MuiTypography-caption css-1p9k16f-MuiTypography-root"
+        >
+          Download Report
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<ReportCard /> renders unchanged 1`] = `
+<div
+  class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-30th8x-MuiPaper-root-MuiCard-root"
+  style="--Paper-shadow: none;"
+>
+  <img
+    alt="Test image"
+    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1ev1ed9-MuiCardMedia-root"
+    src="/test-image.jpg"
+  />
+  <div
+    class="MuiCardContent-root css-18o1kfx-MuiCardContent-root"
+  >
+    <h3
+      class="MuiTypography-root MuiTypography-h3 MuiTypography-gutterBottom css-geacmp-MuiTypography-root"
+    >
+      Test Report
+    </h3>
+    <div
+      class="MuiTypography-root MuiTypography-caption css-uzvwmk-MuiTypography-root"
+    >
+      Jul 28, 2025
+    </div>
+    <div
+      class="MuiBox-root css-0"
+    >
+      <div
+        class="payload-richtext"
+      >
+        <span
+          class="MuiTypography-root MuiTypography-body2 css-1vm0pmi-MuiTypography-root"
+        >
+          This report is a baseline Information Ecosystem Assessment (IEA) of online communities in Kenya, mapping digital harms and malign actors, using the DISARM and D-RAIL frameworks for analysing weaponised hate speech, information manipulation and other forms of illicit influence operations.
+        </span>
+      </div>
+    </div>
+    <hr
+      class="MuiDivider-root MuiDivider-fullWidth css-zzw4lh-MuiDivider-root"
+    />
+    <a
+      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiBox-root css-ey0t1c-MuiTypography-root-MuiLink-root"
+      href="/test-report"
+    >
+      <span
+        class="MuiTypography-root MuiTypography-caption css-1p9k16f-MuiTypography-root"
+      >
+        Download Report
+      </span>
+    </a>
+  </div>
+</div>
+`;
+
+exports[`<ReportCard /> renders without image 1`] = `
+<div
+  class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-30th8x-MuiPaper-root-MuiCard-root"
+  style="--Paper-shadow: none;"
+>
+  <div
+    class="MuiCardContent-root css-1sipm9j-MuiCardContent-root"
+  >
+    <h3
+      class="MuiTypography-root MuiTypography-h3 MuiTypography-gutterBottom css-geacmp-MuiTypography-root"
+    >
+      Test Report
+    </h3>
+    <div
+      class="MuiTypography-root MuiTypography-caption css-uzvwmk-MuiTypography-root"
+    >
+      Jul 28, 2025
+    </div>
+    <div
+      class="MuiBox-root css-0"
+    >
+      <div
+        class="payload-richtext"
+      >
+        <span
+          class="MuiTypography-root MuiTypography-body2 css-1vm0pmi-MuiTypography-root"
+        >
+          This report is a baseline Information Ecosystem Assessment (IEA) of online communities in Kenya, mapping digital harms and malign actors, using the DISARM and D-RAIL frameworks for analysing weaponised hate speech, information manipulation and other forms of illicit influence operations.
+        </span>
+      </div>
+    </div>
+    <hr
+      class="MuiDivider-root MuiDivider-fullWidth css-zzw4lh-MuiDivider-root"
+    />
+    <div
+      class="MuiBox-root css-s3avb4"
+    >
+      <span
+        class="MuiTypography-root MuiTypography-caption css-1p9k16f-MuiTypography-root"
+      >
+        Download Report
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<ReportCard /> renders without link 1`] = `
+<div
+  class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-30th8x-MuiPaper-root-MuiCard-root"
+  style="--Paper-shadow: none;"
+>
+  <img
+    alt="Test image"
+    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1ev1ed9-MuiCardMedia-root"
+    src="/test-image.jpg"
+  />
+  <div
+    class="MuiCardContent-root css-18o1kfx-MuiCardContent-root"
+  >
+    <h3
+      class="MuiTypography-root MuiTypography-h3 MuiTypography-gutterBottom css-geacmp-MuiTypography-root"
+    >
+      Test Report
+    </h3>
+    <div
+      class="MuiTypography-root MuiTypography-caption css-uzvwmk-MuiTypography-root"
+    >
+      Jul 28, 2025
+    </div>
+    <div
+      class="MuiBox-root css-0"
+    >
+      <div
+        class="payload-richtext"
+      >
+        <span
+          class="MuiTypography-root MuiTypography-body2 css-1vm0pmi-MuiTypography-root"
+        >
+          This report is a baseline Information Ecosystem Assessment (IEA) of online communities in Kenya, mapping digital harms and malign actors, using the DISARM and D-RAIL frameworks for analysing weaponised hate speech, information manipulation and other forms of illicit influence operations.
+        </span>
+      </div>
+    </div>
+    <hr
+      class="MuiDivider-root MuiDivider-fullWidth css-zzw4lh-MuiDivider-root"
+    />
+    <div
+      class="MuiBox-root css-s3avb4"
+    >
+      <span
+        class="MuiTypography-root MuiTypography-caption css-1p9k16f-MuiTypography-root"
+      >
+        Download Report
+      </span>
+    </div>
+  </div>
+</div>
+`;