VIA-603 AS Add EmergencyCareCard component

Author: anoop-surej-nhs

src/app/_components/nhs-frontend/EmergencyCareCard.test.tsx

@@ -0,0 +1,55 @@
+import EmergencyCareCard from "@src/app/_components/nhs-frontend/EmergencyCareCard";
+import { render, screen } from "@testing-library/react";
+
+describe("EmergencyCareCard", () => {
+  it("should render component", () => {
+    render(<EmergencyCareCard heading={"Contact GP:"} content={<p>this is their contact</p>} />);
+
+    const emergencyCareCard: HTMLElement = screen.getByTestId("emergency-care-card");
+
+    expect(emergencyCareCard).toBeVisible();
+  });
+
+  it("should render heading", () => {
+    render(<EmergencyCareCard heading={"Contact GP:"} content={<p>this is their contact</p>} />);
+
+    const defaultLevel2Heading: HTMLElement = screen.getByRole("heading", {
+      name: "Immediate action required: Contact GP:",
+      level: 2,
+    });
+
+    expect(defaultLevel2Heading).toBeVisible();
+  });
+
+  it("should render heading at specified heading level", () => {
+    render(
+      <EmergencyCareCard heading={"Contact GP lvl 3:"} headingLevel={"h3"} content={<p>this is their contact</p>} />,
+    );
+
+    const level3Heading: HTMLElement = screen.getByRole("heading", {
+      name: "Immediate action required: Contact GP lvl 3:",
+      level: 3,
+    });
+
+    expect(level3Heading).toBeVisible();
+  });
+
+  it("should render heading at level 2 by default if no heading level provided", () => {
+    render(<EmergencyCareCard heading={"Contact GP:"} content={<p>this is their contact</p>} />);
+
+    const heading: HTMLElement = screen.getByRole("heading", {
+      name: "Immediate action required: Contact GP:",
+      level: 2,
+    });
+
+    expect(heading).toBeVisible();
+  });
+
+  it("should render content inside of care card", () => {
+    render(<EmergencyCareCard heading={"Contact GP:"} content={<p>this is their contact</p>} />);
+
+    const content: HTMLElement = screen.getByText("this is their contact");
+
+    expect(content).toBeVisible();
+  });
+});

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

@@ -0,0 +1,30 @@
+"use client";
+
+import { HeadingLevel } from "@src/services/content-api/types";
+import { Heading } from "@src/services/eligibility-api/types";
+import { Card } from "nhsuk-react-components";
+import { JSX } from "react";
+
+import styles from "./styles.module.css";
+
+interface EmergencyCareCardProps {
+  heading: Heading | string | JSX.Element;
+  headingLevel?: HeadingLevel;
+  content: JSX.Element;
+}
+
+// Ref: https://service-manual.nhs.uk/design-system/patterns/help-users-decide-when-and-where-to-get-care
+const EmergencyCareCard = ({ heading, headingLevel, content }: EmergencyCareCardProps) => {
+  return (
+    <Card cardType="emergency" data-testid="emergency-care-card">
+      {headingLevel ? (
+        <Card.Heading headingLevel={headingLevel}>{heading}</Card.Heading>
+      ) : (
+        <Card.Heading>{heading}</Card.Heading>
+      )}
+      <Card.Content className={styles.careCardZeroMarginBottom}>{content}</Card.Content>
+    </Card>
+  );
+};
+
+export default EmergencyCareCard;

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

@@ -1,4 +1,5 @@
 import { MarkdownWithStyling } from "@project/src/app/_components/markdown/MarkdownWithStyling";
+import EmergencyCareCard from "@src/app/_components/nhs-frontend/EmergencyCareCard";
 import NonUrgentCareCard from "@src/app/_components/nhs-frontend/NonUrgentCareCard";
 import UrgentCareCard from "@src/app/_components/nhs-frontend/UrgentCareCard";
 import { VaccineType } from "@src/models/vaccine";
@@ -26,12 +27,14 @@ enum SubsectionTypes {
   NON_URGENT = "NON_URGENT",
   URGENT = "URGENT",
   CALLOUT = "CALLOUT",
+  EMERGENCY = "EMERGENCY",
 }
 
 const Subsections: Record<SubsectionTypes, string> = {
   [SubsectionTypes.INFORMATION]: "Information",
   [SubsectionTypes.NON_URGENT]: "non-urgent",
   [SubsectionTypes.URGENT]: "urgent",
+  [SubsectionTypes.EMERGENCY]: "immediate",
   [SubsectionTypes.CALLOUT]: "Callout",
 };
 
@@ -84,6 +87,16 @@ const styleSubsection = (subsection: VaccinePageSubsection, id: number, isLastSu
         content={_getDivWithSanitisedHtml(content)}
       />
     );
+  } else if (subsection.name === Subsections.EMERGENCY) {
+    const { heading, headingLevel, content } = extractHeadingAndContent(subsection.text);
+    return (
+      <EmergencyCareCard
+        key={id}
+        heading={_getDivWithSanitisedHtml(heading)}
+        headingLevel={headingLevel}
+        content={_getDivWithSanitisedHtml(content)}
+      />
+    );
   } else if (subsection.name === Subsections.CALLOUT) {
     const { heading, content } = extractHeadingAndContent(subsection.text);
     return (