diff --git a/src/app/components/content/IsaacContent.tsx b/src/app/components/content/IsaacContent.tsx index 63490d475d..70399b2a68 100644 --- a/src/app/components/content/IsaacContent.tsx +++ b/src/app/components/content/IsaacContent.tsx @@ -21,6 +21,7 @@ import { isQuestion } from "../../services"; import { IsaacCodeTabs } from "./IsaacCodeTabs"; import { IsaacInteractiveCodeSnippet } from "./IsaacInteractiveCodeSnippet"; import { IsaacCallout } from "./IsaacCallout"; +import { IsaacEventsCarousel } from "./IsaacEventsCarousel"; const IsaacCodeSnippet = lazy(() => import("./IsaacCodeSnippet")); const classBasedLayouts = { @@ -90,6 +91,9 @@ export const IsaacContent = withRouter((props: IsaacContentProps) => { case "codeTabs": selectedComponent = ; break; + case "isaacEventsCarousel": + selectedComponent = ; + break; default: switch (layout) { case "tabs": diff --git a/src/app/components/content/IsaacEventsCarousel.tsx b/src/app/components/content/IsaacEventsCarousel.tsx new file mode 100644 index 0000000000..6f443f6d5d --- /dev/null +++ b/src/app/components/content/IsaacEventsCarousel.tsx @@ -0,0 +1,16 @@ +import React from "react"; +import { Link } from "react-router-dom"; +import { EventsCarousel } from "../elements/EventsCarousel"; + +export const IsaacEventsCarousel = () => { + return ( +
+ +
+ + Browse all events + +
+
+ ); +}; diff --git a/src/scss/cs/isaac.scss b/src/scss/cs/isaac.scss index a25e25b6c3..4f1fa06624 100644 --- a/src/scss/cs/isaac.scss +++ b/src/scss/cs/isaac.scss @@ -537,6 +537,14 @@ a.browse-events { } } +.isaac-events-carousel { + padding-top: 1rem; + + .center-container { + margin-top: 1rem; + } +} + .center-container { display: flex; justify-content: center; diff --git a/src/test/components/elements/content/IsaacEventsCarousel.test.tsx b/src/test/components/elements/content/IsaacEventsCarousel.test.tsx new file mode 100644 index 0000000000..7c7b1111d7 --- /dev/null +++ b/src/test/components/elements/content/IsaacEventsCarousel.test.tsx @@ -0,0 +1,28 @@ +import React from "react"; +import { screen } from "@testing-library/react"; +import { renderTestEnvironment } from "../../../utils"; +import { IsaacContent } from "../../../../app/components/content/IsaacContent"; + +const IsaacEventsCarouselHarness = () => ; + +describe("IsaacEventsCarousel content type", () => { + const renderInsideIsaacContent = () => + renderTestEnvironment({ + role: "ANONYMOUS", + PageComponent: IsaacEventsCarouselHarness, + initialRouteEntries: ["/"], + }); + + it("renders the events carousel wrapper", () => { + renderInsideIsaacContent(); + const wrapper = screen.getByTestId("isaac-events-carousel"); + expect(wrapper).toBeInTheDocument(); + }); + + it("renders a 'Browse all events' link pointing to /events", () => { + renderInsideIsaacContent(); + const browseLink = screen.getByRole("link", { name: /browse all events/i }); + expect(browseLink).toBeInTheDocument(); + expect(browseLink).toHaveAttribute("href", "/events"); + }); +});