From 65c0f70cdc09b57d319e31f5c55f3847691c6607 Mon Sep 17 00:00:00 2001 From: Kevin Koech Date: Thu, 6 Nov 2025 16:42:59 +0300 Subject: [PATCH 1/4] feat: Add ReportCard and ReportsList components with tests and snapshots - Implemented ReportCard component for displaying report details. - Created ReportsList component to render a list of ReportCard components. - Added tests for ReportCard and ReportsList with snapshot verification. - Introduced ResearchCategoryCard and ResearchCategoryList components for categorizing reports. - Included tests and snapshots for ResearchCategoryCard and ResearchCategoryList. --- .../src/components/ReportCard/ReportCard.js | 126 +++++++++++ .../components/ReportCard/ReportCard.snap.js | 204 ++++++++++++++++++ .../components/ReportCard/ReportCard.test.js | 116 ++++++++++ .../src/components/ReportCard/index.js | 3 + .../src/components/ReportsList/ReportsList.js | 37 ++++ .../ReportsList/ReportsList.snap.js | 3 + .../ReportsList/ReportsList.test.js | 149 +++++++++++++ .../src/components/ReportsList/index.js | 3 + .../ResearchCategoryCard.js | 83 +++++++ .../ResearchCategoryCard.snap.js | 113 ++++++++++ .../ResearchCategoryCard.test.js | 141 ++++++++++++ .../components/ResearchCategoryCard/index.js | 3 + .../ResearchCategoryList.js | 29 +++ .../ResearchCategoryList.snap.js | 159 ++++++++++++++ .../ResearchCategoryList.test.js | 159 ++++++++++++++ .../components/ResearchCategoryList/index.js | 3 + 16 files changed, 1331 insertions(+) create mode 100644 apps/trustlab/src/components/ReportCard/ReportCard.js create mode 100644 apps/trustlab/src/components/ReportCard/ReportCard.snap.js create mode 100644 apps/trustlab/src/components/ReportCard/ReportCard.test.js create mode 100644 apps/trustlab/src/components/ReportCard/index.js create mode 100644 apps/trustlab/src/components/ReportsList/ReportsList.js create mode 100644 apps/trustlab/src/components/ReportsList/ReportsList.snap.js create mode 100644 apps/trustlab/src/components/ReportsList/ReportsList.test.js create mode 100644 apps/trustlab/src/components/ReportsList/index.js create mode 100644 apps/trustlab/src/components/ResearchCategoryCard/ResearchCategoryCard.js create mode 100644 apps/trustlab/src/components/ResearchCategoryCard/ResearchCategoryCard.snap.js create mode 100644 apps/trustlab/src/components/ResearchCategoryCard/ResearchCategoryCard.test.js create mode 100644 apps/trustlab/src/components/ResearchCategoryCard/index.js create mode 100644 apps/trustlab/src/components/ResearchCategoryList/ResearchCategoryList.js create mode 100644 apps/trustlab/src/components/ResearchCategoryList/ResearchCategoryList.snap.js create mode 100644 apps/trustlab/src/components/ResearchCategoryList/ResearchCategoryList.test.js create mode 100644 apps/trustlab/src/components/ResearchCategoryList/index.js diff --git a/apps/trustlab/src/components/ReportCard/ReportCard.js b/apps/trustlab/src/components/ReportCard/ReportCard.js new file mode 100644 index 000000000..615710905 --- /dev/null +++ b/apps/trustlab/src/components/ReportCard/ReportCard.js @@ -0,0 +1,126 @@ +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 ( + + {image?.src && !condensed && ( + + )} + + + {title} + + + {date} + + {description && !condensed && ( + <> + + + + + {actionLabel} + + + + )} + {description && condensed && ( + + + + + + {actionLabel} + + + + )} + + + ); +}); + +export default ReportCard; diff --git a/apps/trustlab/src/components/ReportCard/ReportCard.snap.js b/apps/trustlab/src/components/ReportCard/ReportCard.snap.js new file mode 100644 index 000000000..8fb487a28 --- /dev/null +++ b/apps/trustlab/src/components/ReportCard/ReportCard.snap.js @@ -0,0 +1,204 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders in condensed mode 1`] = ` +
+
+

+ Test Report +

+
+ Jul 28, 2025 +
+
+
+
+ + 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. + +
+
+ + + Download Report + + +
+
+
+`; + +exports[` renders unchanged 1`] = ` +
+ Test image +
+

+ Test Report +

+
+ Jul 28, 2025 +
+
+
+ + 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. + +
+
+
+ + + Download Report + + +
+
+`; + +exports[` renders without image 1`] = ` +
+
+

+ Test Report +

+
+ Jul 28, 2025 +
+
+
+ + 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. + +
+
+
+ + + Download Report + + +
+
+`; + +exports[` renders without link 1`] = ` +
+ Test image +
+

+ Test Report +

+
+ Jul 28, 2025 +
+
+
+ + 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. + +
+
+
+ + + Download Report + + +
+
+`; diff --git a/apps/trustlab/src/components/ReportCard/ReportCard.test.js b/apps/trustlab/src/components/ReportCard/ReportCard.test.js new file mode 100644 index 000000000..224a26082 --- /dev/null +++ b/apps/trustlab/src/components/ReportCard/ReportCard.test.js @@ -0,0 +1,116 @@ +import { createRender } from "@commons-ui/testing-library"; +import React from "react"; + +import ReportCard from "./ReportCard"; + +import theme from "@/trustlab/theme"; + +const render = createRender({ theme }); + +const mockDescription = { + root: { + children: [ + { + children: [ + { + detail: 0, + format: 0, + mode: "normal", + style: "", + text: "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.", + type: "text", + version: 1, + }, + ], + direction: "ltr", + format: "", + indent: 0, + type: "paragraph", + version: 1, + textFormat: 0, + textStyle: "", + }, + ], + direction: "ltr", + format: "", + indent: 0, + type: "root", + version: 1, + }, +}; + +describe("", () => { + it("renders unchanged", () => { + const { container } = render( + , + ); + expect(container.firstChild).toMatchSnapshot(); + }); + + it("renders without image", () => { + const { container } = render( + , + ); + expect(container.firstChild).toMatchSnapshot(); + }); + + it("renders in condensed mode", () => { + const { container } = render( + , + ); + expect(container.firstChild).toMatchSnapshot(); + }); + + it("renders without link", () => { + const { container } = render( + , + ); + expect(container.firstChild).toMatchSnapshot(); + }); + + it("renders with custom action label", () => { + const { getByText } = render( + , + ); + expect(getByText("View Full Report")).toBeInTheDocument(); + }); + + it("renders with default action label", () => { + const { getByText } = render( + , + ); + expect(getByText("Download Report")).toBeInTheDocument(); + }); +}); diff --git a/apps/trustlab/src/components/ReportCard/index.js b/apps/trustlab/src/components/ReportCard/index.js new file mode 100644 index 000000000..7a34db2da --- /dev/null +++ b/apps/trustlab/src/components/ReportCard/index.js @@ -0,0 +1,3 @@ +import ReportCard from "./ReportCard"; + +export default ReportCard; diff --git a/apps/trustlab/src/components/ReportsList/ReportsList.js b/apps/trustlab/src/components/ReportsList/ReportsList.js new file mode 100644 index 000000000..28319bf9d --- /dev/null +++ b/apps/trustlab/src/components/ReportsList/ReportsList.js @@ -0,0 +1,37 @@ +import { Section } from "@commons-ui/core"; +import { Grid2 as Grid, Box } from "@mui/material"; +import { forwardRef } from "react"; + +import ReportCard from "@/trustlab/components/ReportCard"; + +const ReportsList = forwardRef(function ReportsList(props, ref) { + const { reports = [], condensed, ...other } = props; + + if (!reports.length) { + return null; + } + + return ( + +
+ + {reports.map((report, index) => ( + + + + ))} + +
+ + ); +}); + +export default ReportsList; diff --git a/apps/trustlab/src/components/ReportsList/ReportsList.snap.js b/apps/trustlab/src/components/ReportsList/ReportsList.snap.js new file mode 100644 index 000000000..543a5edbd --- /dev/null +++ b/apps/trustlab/src/components/ReportsList/ReportsList.snap.js @@ -0,0 +1,3 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders unchanged 1`] = `null`; diff --git a/apps/trustlab/src/components/ReportsList/ReportsList.test.js b/apps/trustlab/src/components/ReportsList/ReportsList.test.js new file mode 100644 index 000000000..2f9ac6bd5 --- /dev/null +++ b/apps/trustlab/src/components/ReportsList/ReportsList.test.js @@ -0,0 +1,149 @@ +import { createRender } from "@commons-ui/testing-library"; +import React from "react"; + +import ReportsList from "./ReportsList"; + +import theme from "@/trustlab/theme"; + +const render = createRender({ theme }); + +const mockCategories = [ + { + id: "1", + title: "Research Category 1", + description: { + root: { + children: [ + { + children: [ + { + detail: 0, + format: 0, + mode: "normal", + style: "", + text: "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.", + type: "text", + version: 1, + }, + ], + direction: "ltr", + format: "", + indent: 0, + type: "paragraph", + version: 1, + textFormat: 0, + textStyle: "", + }, + ], + direction: "ltr", + format: "", + indent: 0, + type: "root", + version: 1, + }, + }, + image: { + src: "/test-image-1.jpg", + alt: "Test image 1", + }, + link: { + href: "/category-1", + }, + }, + { + id: "2", + title: "Research Category 2", + description: { + root: { + children: [ + { + children: [ + { + detail: 0, + format: 0, + mode: "normal", + style: "", + text: "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.", + type: "text", + version: 1, + }, + ], + direction: "ltr", + format: "", + indent: 0, + type: "paragraph", + version: 1, + textFormat: 0, + textStyle: "", + }, + ], + direction: "ltr", + format: "", + indent: 0, + type: "root", + version: 1, + }, + }, + image: { + src: "/test-image-2.jpg", + alt: "Test image 2", + }, + link: { + href: "/category-2", + }, + }, + { + id: "3", + title: "Research Category 3", + description: { + root: { + children: [ + { + children: [ + { + detail: 0, + format: 0, + mode: "normal", + style: "", + text: "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.", + type: "text", + version: 1, + }, + ], + direction: "ltr", + format: "", + indent: 0, + type: "paragraph", + version: 1, + textFormat: 0, + textStyle: "", + }, + ], + direction: "ltr", + format: "", + indent: 0, + type: "root", + version: 1, + }, + }, + image: { + src: "/test-image-3.jpg", + alt: "Test image 3", + }, + link: { + href: "/category-3", + }, + }, +]; + +describe("", () => { + it("renders unchanged", () => { + const { container } = render(); + expect(container.firstChild).toMatchSnapshot(); + }); + + it("renders empty list when no categories", () => { + const { container } = render(); + expect(container.firstChild).toBeNull(); + }); +}); diff --git a/apps/trustlab/src/components/ReportsList/index.js b/apps/trustlab/src/components/ReportsList/index.js new file mode 100644 index 000000000..99971a1e2 --- /dev/null +++ b/apps/trustlab/src/components/ReportsList/index.js @@ -0,0 +1,3 @@ +import ReportsList from "./ReportsList"; + +export default ReportsList; diff --git a/apps/trustlab/src/components/ResearchCategoryCard/ResearchCategoryCard.js b/apps/trustlab/src/components/ResearchCategoryCard/ResearchCategoryCard.js new file mode 100644 index 000000000..931b60363 --- /dev/null +++ b/apps/trustlab/src/components/ResearchCategoryCard/ResearchCategoryCard.js @@ -0,0 +1,83 @@ +import { Link } from "@commons-ui/next"; +import { LexicalRichText } from "@commons-ui/payload"; +import { + Box, + Button, + Card, + CardContent, + CardMedia, + Typography, +} from "@mui/material"; +import { forwardRef } from "react"; + +const ResearchCategoryCard = forwardRef( + function ResearchCategoryCard(props, ref) { + const { + image, + title, + description, + link, + readMoreLabel = "Read More", + ...other + } = props; + + return ( + + {image?.src && ( + + )} + + + {title} + + {description && ( + + )} + {link?.href && ( + + + + )} + + + ); + }, +); + +export default ResearchCategoryCard; diff --git a/apps/trustlab/src/components/ResearchCategoryCard/ResearchCategoryCard.snap.js b/apps/trustlab/src/components/ResearchCategoryCard/ResearchCategoryCard.snap.js new file mode 100644 index 000000000..1436cc39f --- /dev/null +++ b/apps/trustlab/src/components/ResearchCategoryCard/ResearchCategoryCard.snap.js @@ -0,0 +1,113 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders unchanged 1`] = ` + + Test image +
+

+ Test Research Category +

+
+
+

+ 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. +

+
+
+
+ +
+
+ +`; + +exports[` renders without image 1`] = ` +
+
+

+ Test Research Category +

+
+
+

+ 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. +

+
+
+
+
+`; + +exports[` renders without link 1`] = ` +
+ Test image +
+

+ Test Research Category +

+
+
+

+ 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. +

+
+
+
+
+`; diff --git a/apps/trustlab/src/components/ResearchCategoryCard/ResearchCategoryCard.test.js b/apps/trustlab/src/components/ResearchCategoryCard/ResearchCategoryCard.test.js new file mode 100644 index 000000000..24cb43aa2 --- /dev/null +++ b/apps/trustlab/src/components/ResearchCategoryCard/ResearchCategoryCard.test.js @@ -0,0 +1,141 @@ +import { createRender } from "@commons-ui/testing-library"; +import React from "react"; + +import ResearchCategoryCard from "./ResearchCategoryCard"; + +import theme from "@/trustlab/theme"; + +const render = createRender({ theme }); + +describe("", () => { + it("renders unchanged", () => { + const { container } = render( + , + ); + expect(container.firstChild).toMatchSnapshot(); + }); + + it("renders without image", () => { + const { container } = render( + , + ); + expect(container.firstChild).toMatchSnapshot(); + }); + + it("renders without link", () => { + const { container } = render( + , + ); + expect(container.firstChild).toMatchSnapshot(); + }); +}); diff --git a/apps/trustlab/src/components/ResearchCategoryCard/index.js b/apps/trustlab/src/components/ResearchCategoryCard/index.js new file mode 100644 index 000000000..efc06b207 --- /dev/null +++ b/apps/trustlab/src/components/ResearchCategoryCard/index.js @@ -0,0 +1,3 @@ +import ResearchCategoryCard from "./ResearchCategoryCard"; + +export default ResearchCategoryCard; diff --git a/apps/trustlab/src/components/ResearchCategoryList/ResearchCategoryList.js b/apps/trustlab/src/components/ResearchCategoryList/ResearchCategoryList.js new file mode 100644 index 000000000..f4371af22 --- /dev/null +++ b/apps/trustlab/src/components/ResearchCategoryList/ResearchCategoryList.js @@ -0,0 +1,29 @@ +import { Section } from "@commons-ui/core"; +import { Grid2 as Grid } from "@mui/material"; +import { forwardRef } from "react"; + +import ResearchCategoryCard from "@/trustlab/components/ResearchCategoryCard"; + +const ResearchCategoryList = forwardRef( + function ResearchCategoryList(props, ref) { + const { categories = [], ...other } = props; + + if (!categories.length) { + return null; + } + + return ( +
+ + {categories.map((category, index) => ( + + + + ))} + +
+ ); + }, +); + +export default ResearchCategoryList; diff --git a/apps/trustlab/src/components/ResearchCategoryList/ResearchCategoryList.snap.js b/apps/trustlab/src/components/ResearchCategoryList/ResearchCategoryList.snap.js new file mode 100644 index 000000000..4b0f505b8 --- /dev/null +++ b/apps/trustlab/src/components/ResearchCategoryList/ResearchCategoryList.snap.js @@ -0,0 +1,159 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders unchanged 1`] = ` +
+
+
+ + Test image 1 +
+

+ Research Category 1 +

+
+
+

+ 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. +

+
+
+
+ +
+
+ +
+
+ + Test image 2 +
+

+ Research Category 2 +

+
+
+

+ 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. +

+
+
+
+ +
+
+ +
+
+ + Test image 3 +
+

+ Research Category 3 +

+
+
+

+ 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. +

+
+
+
+ +
+
+ +
+
+
+`; diff --git a/apps/trustlab/src/components/ResearchCategoryList/ResearchCategoryList.test.js b/apps/trustlab/src/components/ResearchCategoryList/ResearchCategoryList.test.js new file mode 100644 index 000000000..634f56b1d --- /dev/null +++ b/apps/trustlab/src/components/ResearchCategoryList/ResearchCategoryList.test.js @@ -0,0 +1,159 @@ +import { createRender } from "@commons-ui/testing-library"; +import React from "react"; + +import ResearchCategoryList from "./ResearchCategoryList"; + +import theme from "@/trustlab/theme"; + +const render = createRender({ theme }); + +const mockCategories = [ + { + id: "1", + title: "Research Category 1", + description: { + root: { + children: [ + { + children: [ + { + detail: 0, + format: 0, + mode: "normal", + style: "", + text: "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.", + type: "text", + version: 1, + }, + ], + direction: "ltr", + format: "", + indent: 0, + type: "paragraph", + version: 1, + textFormat: 0, + textStyle: "", + }, + ], + direction: "ltr", + format: "", + indent: 0, + type: "root", + version: 1, + }, + }, + image: { + src: "/test-image-1.jpg", + alt: "Test image 1", + }, + link: { + href: "/category-1", + }, + }, + { + id: "2", + title: "Research Category 2", + description: { + root: { + children: [ + { + children: [ + { + detail: 0, + format: 0, + mode: "normal", + style: "", + text: "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.", + type: "text", + version: 1, + }, + ], + direction: "ltr", + format: "", + indent: 0, + type: "paragraph", + version: 1, + textFormat: 0, + textStyle: "", + }, + ], + direction: "ltr", + format: "", + indent: 0, + type: "root", + version: 1, + }, + }, + image: { + src: "/test-image-2.jpg", + alt: "Test image 2", + }, + link: { + href: "/category-2", + }, + }, + { + id: "3", + title: "Research Category 3", + description: { + root: { + children: [ + { + children: [ + { + detail: 0, + format: 0, + mode: "normal", + style: "", + text: "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.", + type: "text", + version: 1, + }, + ], + direction: "ltr", + format: "", + indent: 0, + type: "paragraph", + version: 1, + textFormat: 0, + textStyle: "", + }, + ], + direction: "ltr", + format: "", + indent: 0, + type: "root", + version: 1, + }, + }, + image: { + src: "/test-image-3.jpg", + alt: "Test image 3", + }, + link: { + href: "/category-3", + }, + }, +]; + +describe("", () => { + it("renders unchanged", () => { + const { container } = render( + , + ); + expect(container.firstChild).toMatchSnapshot(); + }); + + it("renders empty list when no categories", () => { + const { container } = render(); + expect(container.firstChild).toBeNull(); + }); + + it("renders correct number of cards", () => { + const { getAllByRole } = render( + , + ); + const cards = getAllByRole("heading", { level: 3 }); + expect(cards).toHaveLength(mockCategories.length); + }); +}); diff --git a/apps/trustlab/src/components/ResearchCategoryList/index.js b/apps/trustlab/src/components/ResearchCategoryList/index.js new file mode 100644 index 000000000..965714bfe --- /dev/null +++ b/apps/trustlab/src/components/ResearchCategoryList/index.js @@ -0,0 +1,3 @@ +import ResearchCategoryList from "./ResearchCategoryList"; + +export default ResearchCategoryList; From 692acb774fbc5831560cf7929e6bb5e275830223 Mon Sep 17 00:00:00 2001 From: Kevin Koech Date: Fri, 7 Nov 2025 11:27:53 +0300 Subject: [PATCH 2/4] feat: Enhance ReportCard component with improved text truncation styles and update snapshots --- apps/trustlab/src/components/ReportCard/ReportCard.js | 10 ++++++++++ .../src/components/ReportCard/ReportCard.snap.js | 8 ++++---- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/apps/trustlab/src/components/ReportCard/ReportCard.js b/apps/trustlab/src/components/ReportCard/ReportCard.js index 615710905..df960e3f6 100644 --- a/apps/trustlab/src/components/ReportCard/ReportCard.js +++ b/apps/trustlab/src/components/ReportCard/ReportCard.js @@ -65,6 +65,15 @@ const ReportCard = forwardRef(function ReportCard(props, ref) { TypographyProps={{ variant: "body2", component: "span", + sx: { + display: "-webkit-box", + WebkitLineClamp: 5, + WebkitBoxOrient: "vertical", + overflow: "hidden", + textOverflow: "ellipsis", + flex: 1, + height: 100, + }, }} /> @@ -98,6 +107,7 @@ const ReportCard = forwardRef(function ReportCard(props, ref) { overflow: "hidden", textOverflow: "ellipsis", flex: 1, + height: 60, }, }} /> diff --git a/apps/trustlab/src/components/ReportCard/ReportCard.snap.js b/apps/trustlab/src/components/ReportCard/ReportCard.snap.js index 8fb487a28..3d61b986a 100644 --- a/apps/trustlab/src/components/ReportCard/ReportCard.snap.js +++ b/apps/trustlab/src/components/ReportCard/ReportCard.snap.js @@ -28,7 +28,7 @@ exports[` renders in condensed mode 1`] = ` class="payload-richtext" > 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. @@ -79,7 +79,7 @@ exports[` renders unchanged 1`] = ` class="payload-richtext" > 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. @@ -127,7 +127,7 @@ exports[` renders without image 1`] = ` class="payload-richtext" > 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. @@ -180,7 +180,7 @@ exports[` renders without link 1`] = ` class="payload-richtext" > 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. From 560cd60ec280018042b022fd3e9427d67066102a Mon Sep 17 00:00:00 2001 From: Kevin Koech Date: Fri, 7 Nov 2025 11:32:26 +0300 Subject: [PATCH 3/4] feat: Update ResearchCategoryCard and ResearchCategoryList components with improved text truncation styles and snapshot updates --- .../ResearchCategoryCard/ResearchCategoryCard.js | 9 +++++++++ .../ResearchCategoryCard/ResearchCategoryCard.snap.js | 6 +++--- .../ResearchCategoryList/ResearchCategoryList.snap.js | 6 +++--- 3 files changed, 15 insertions(+), 6 deletions(-) diff --git a/apps/trustlab/src/components/ResearchCategoryCard/ResearchCategoryCard.js b/apps/trustlab/src/components/ResearchCategoryCard/ResearchCategoryCard.js index 931b60363..6dddcae71 100644 --- a/apps/trustlab/src/components/ResearchCategoryCard/ResearchCategoryCard.js +++ b/apps/trustlab/src/components/ResearchCategoryCard/ResearchCategoryCard.js @@ -51,6 +51,15 @@ const ResearchCategoryCard = forwardRef( elements={description} TypographyProps={{ variant: "body2", + sx: { + display: "-webkit-box", + WebkitLineClamp: 5, + WebkitBoxOrient: "vertical", + overflow: "hidden", + textOverflow: "ellipsis", + flex: 1, + height: 100, + }, }} /> )} diff --git a/apps/trustlab/src/components/ResearchCategoryCard/ResearchCategoryCard.snap.js b/apps/trustlab/src/components/ResearchCategoryCard/ResearchCategoryCard.snap.js index 1436cc39f..f67232f25 100644 --- a/apps/trustlab/src/components/ResearchCategoryCard/ResearchCategoryCard.snap.js +++ b/apps/trustlab/src/components/ResearchCategoryCard/ResearchCategoryCard.snap.js @@ -26,7 +26,7 @@ exports[` renders unchanged 1`] = ` class="payload-richtext" >

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.

@@ -67,7 +67,7 @@ exports[` renders without image 1`] = ` class="payload-richtext" >

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.

@@ -102,7 +102,7 @@ exports[` renders without link 1`] = ` class="payload-richtext" >

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.

diff --git a/apps/trustlab/src/components/ResearchCategoryList/ResearchCategoryList.snap.js b/apps/trustlab/src/components/ResearchCategoryList/ResearchCategoryList.snap.js index 4b0f505b8..78fd532f4 100644 --- a/apps/trustlab/src/components/ResearchCategoryList/ResearchCategoryList.snap.js +++ b/apps/trustlab/src/components/ResearchCategoryList/ResearchCategoryList.snap.js @@ -36,7 +36,7 @@ exports[` renders unchanged 1`] = ` class="payload-richtext" >

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.

@@ -85,7 +85,7 @@ exports[` renders unchanged 1`] = ` class="payload-richtext" >

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.

@@ -134,7 +134,7 @@ exports[` renders unchanged 1`] = ` class="payload-richtext" >

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.

From 4e619266ecc4ae498c7e7d9ae101bc3cbf3c0f01 Mon Sep 17 00:00:00 2001 From: Kevin Koech Date: Fri, 7 Nov 2025 13:33:41 +0300 Subject: [PATCH 4/4] feat: Refactor ReportCard component to replace Link with Box for improved link handling and update snapshots --- .../src/components/ReportCard/ReportCard.js | 17 ++++++++++--- .../components/ReportCard/ReportCard.snap.js | 25 ++++++++----------- 2 files changed, 24 insertions(+), 18 deletions(-) diff --git a/apps/trustlab/src/components/ReportCard/ReportCard.js b/apps/trustlab/src/components/ReportCard/ReportCard.js index df960e3f6..54eaac2fe 100644 --- a/apps/trustlab/src/components/ReportCard/ReportCard.js +++ b/apps/trustlab/src/components/ReportCard/ReportCard.js @@ -77,7 +77,12 @@ const ReportCard = forwardRef(function ReportCard(props, ref) { }} /> - + {/* TODO: Remove link?.href integration is done */} + {actionLabel} - + )} {description && condensed && ( @@ -112,7 +117,11 @@ const ReportCard = forwardRef(function ReportCard(props, ref) { }} /> - + {actionLabel} - + )} diff --git a/apps/trustlab/src/components/ReportCard/ReportCard.snap.js b/apps/trustlab/src/components/ReportCard/ReportCard.snap.js index 3d61b986a..d135056c3 100644 --- a/apps/trustlab/src/components/ReportCard/ReportCard.snap.js +++ b/apps/trustlab/src/components/ReportCard/ReportCard.snap.js @@ -34,16 +34,15 @@ exports[` renders in condensed mode 1`] = ` - Download Report - + @@ -89,8 +88,8 @@ exports[` renders unchanged 1`] = ` class="MuiDivider-root MuiDivider-fullWidth css-zzw4lh-MuiDivider-root" /> renders without image 1`] = `
- Download Report - + `; @@ -189,16 +187,15 @@ exports[` renders without link 1`] = `
- Download Report - + `;