VIA-299 SB Display callout component.

Author: acerathereinspirative-nhs-nvir

src/app/_components/content/Callout.test.tsx

@@ -0,0 +1,27 @@
+import { Callout } from "@src/app/_components/content/Callout";
+import { VaccineType } from "@src/models/vaccine";
+import { mockStyledContent } from "@test-data/content-api/data";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+
+describe("Callout component", () => {
+  it("renders correctly", () => {
+    const vaccineType = VaccineType.HIB_MENC;
+
+    render(<Callout styledVaccineContent={mockStyledContent} vaccineType={vaccineType} />);
+
+    const CalloutText: HTMLElement = screen.getByTestId("callout");
+
+    expect(CalloutText).toBeInTheDocument();
+  });
+
+  it("does not render for vaccines for which they should not be shown", () => {
+    const vaccineType = VaccineType.SHINGLES;
+
+    render(<Callout styledVaccineContent={mockStyledContent} vaccineType={vaccineType} />);
+
+    const CalloutText: HTMLElement | null = screen.queryByTestId("Callout-text");
+
+    expect(CalloutText).not.toBeInTheDocument();
+  });
+});

src/app/_components/content/Callout.tsx

@@ -0,0 +1,18 @@
+import WarningCallout from "@src/app/_components/nhs-frontend/WarningCallout";
+import { VaccineInfo, VaccineType } from "@src/models/vaccine";
+import { StyledVaccineContent } from "@src/services/content-api/types";
+import { JSX } from "react";
+
+const Callout = (props: { styledVaccineContent: StyledVaccineContent; vaccineType: VaccineType }): JSX.Element => {
+  const element =
+    props.styledVaccineContent.callout && VaccineInfo[props.vaccineType].showWarningCallout ? (
+      <WarningCallout
+        heading={props.styledVaccineContent.callout.heading}
+        content={props.styledVaccineContent.callout.content}
+      />
+    ) : (
+      <></>
+    );
+  return element;
+};
+export { Callout };

src/app/_components/nhs-frontend/WarningCallout.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+interface WarningCalloutProps {
+  heading: string;
+  content: string;
+}
+
+const WarningCallout = ({ heading, content }: WarningCalloutProps) => {
+  return (
+    <div data-testid="callout" className="nhsuk-warning-callout">
+      <h3 className="nhsuk-warning-callout__label">
+        <span role="text">
+          <span className="nhsuk-u-visually-hidden">Important: </span>
+          {heading}
+        </span>
+      </h3>
+      <div data-testid="callout-text" dangerouslySetInnerHTML={{ __html: content || "" }} />
+    </div>
+  );
+};
+
+export default WarningCallout;

src/app/_components/vaccine/Vaccine.test.tsx

@@ -125,6 +125,14 @@ describe("Any vaccine page", () => {
       expect(overviewText).toBeInTheDocument();
     });
 
+    it("should include callout text", async () => {
+      await renderNamedVaccinePage(VaccineType.HIB_MENC);
+
+      const overviewText: HTMLElement = screen.getByTestId("callout");
+
+      expect(overviewText).toBeInTheDocument();
+    });
+
     it("should include lowercase vaccine name in more information text", async () => {
       const expectedMoreInformationHeading: string = "More information about the RSV vaccine";
 
@@ -189,6 +197,14 @@ describe("Any vaccine page", () => {
       expect(overviewText).not.toBeInTheDocument();
     });
 
+    it("should not display callout", async () => {
+      await renderNamedVaccinePage(VaccineType.HIB_MENC);
+
+      const overviewText: HTMLElement | null = screen.queryByTestId("callout");
+
+      expect(overviewText).not.toBeInTheDocument();
+    });
+
     it("should not display vaccine info expanders", async () => {
       await renderRsvVaccinePage();
 

src/app/_components/vaccine/Vaccine.tsx

@@ -1,6 +1,7 @@
 "use server";
 
 import { auth } from "@project/auth";
+import { Callout } from "@src/app/_components/content/Callout";
 import { FindOutMoreLink } from "@src/app/_components/content/FindOutMore";
 import { HowToGetVaccineFallback } from "@src/app/_components/content/HowToGetVaccineFallback";
 import { MoreInformation } from "@src/app/_components/content/MoreInformation";
@@ -65,8 +66,12 @@ const VaccineComponent = async ({ vaccineType }: VaccineProps): Promise<JSX.Elem
   return (
     <div className={styles.tableCellSpanHide}>
       {contentError != ContentErrorTypes.CONTENT_LOADING_ERROR && styledVaccineContent != undefined && (
-        <Overview styledVaccineContent={styledVaccineContent} vaccineType={vaccineType} />
+        <>
+          <Overview styledVaccineContent={styledVaccineContent} vaccineType={vaccineType} />
+          <Callout styledVaccineContent={styledVaccineContent} vaccineType={vaccineType} />
+        </>
       )}
+
       {/* Eligibility section for RSV */}
       {vaccineType === VaccineType.RSV && eligibilityForPerson !== undefined && (
         <EligibilityVaccinePageContent

src/models/vaccine.ts

@@ -34,6 +34,7 @@ export type VaccineDetails = {
   contentPath: UrlPathFragment;
   cacheFilename: Filename;
   nboPath: UrlPathFragment;
+  showWarningCallout?: boolean;
 };
 
 type displayName = {
@@ -274,6 +275,7 @@ const VaccineInfo: Record<VaccineType, VaccineDetails> = {
     contentPath: "vaccinations/hib-menc-vaccine" as UrlPathFragment,
     cacheFilename: "hib-menc-vaccine.json" as Filename,
     nboPath: "hib-menc-vaccine" as UrlPathFragment,
+    showWarningCallout: true,
   },
 };
 

src/services/content-api/parsers/content-styling-service.test.tsx

@@ -213,13 +213,15 @@ describe("ContentStylingService", () => {
         headline: "Side effects of the generic vaccine",
         subsections: [mockMarkdownSubsection, mockUrgentSubsection],
       };
+      const mockCallout: HeadingWithContent = { heading: "Callout Heading", content: "Callout content" };
       const mockContent: VaccinePageContent = {
         overview: { content: "This is an overview", containsHtml: false },
         whatVaccineIsFor: mockWhatSection,
         whoVaccineIsFor: mockWhoSection,
         howToGetVaccine: mockHowSection,
         vaccineSideEffects: mockSideEffectsSection,
         webpageLink: new URL("https://test.example.com/"),
+        callout: mockCallout,
       };
 
       const styledVaccineContent: StyledVaccineContent = await getStyledContentForVaccine(vaccine, mockContent, false);
@@ -230,6 +232,7 @@ describe("ContentStylingService", () => {
       expect(styledVaccineContent.whoVaccineIsFor.heading).toEqual(mockWhoSection.headline);
       expect(styledVaccineContent.howToGetVaccine.heading).toEqual(mockHowSection.headline);
       expect(styledVaccineContent.vaccineSideEffects.heading).toEqual(mockSideEffectsSection.headline);
+      expect(styledVaccineContent.callout?.heading).toEqual(mockCallout.heading);
 
       const expectedRsvHowToGetSection = "<div><p>para1</p><p>para2</p></div>";
       const expectedRsvPregnancyHowToGetSection = `<div><div><p>para3</p><p>para4</p></div></div>`;

src/services/content-api/parsers/content-styling-service.tsx

@@ -138,6 +138,13 @@ const styleHowToGetSection = (
   }
 };
 
+function styleCallout(callout: HeadingWithContent | undefined): HeadingWithContent | undefined {
+  if (callout) {
+    return { heading: callout.heading, content: callout.content };
+  }
+  return undefined;
+}
+
 const getStyledContentForVaccine = async (
   vaccine: VaccineType,
   filteredContent: VaccinePageContent,
@@ -151,6 +158,7 @@ const getStyledContentForVaccine = async (
   const whoVaccineIsFor: StyledPageSection = styleSection(filteredContent.whoVaccineIsFor);
   const howToGetVaccine: StyledPageSection = styleHowToGetSection(vaccine, filteredContent.howToGetVaccine, fragile);
   const vaccineSideEffects: StyledPageSection = styleSection(filteredContent.vaccineSideEffects);
+  const callout: HeadingWithContent | undefined = styleCallout(filteredContent.callout);
   const webpageLink: URL = filteredContent.webpageLink;
 
   return {
@@ -160,6 +168,7 @@ const getStyledContentForVaccine = async (
     howToGetVaccine,
     vaccineSideEffects,
     webpageLink,
+    callout,
   };
 };
 

test-data/content-api/data.tsx

@@ -591,6 +591,7 @@ export const mockStyledContent: StyledVaccineContent = {
     component: <div>Side effects section styled component</div>,
   },
   webpageLink: new URL("https://test.example.com/"),
+  callout: { heading: "Callout Heading", content: "Callout content" },
 };
 
 export const mockStyledContentWithHtmlOverview: StyledVaccineContent = {