VIA-306 MD: Show vaccines for during pregnancy page

Author: marie-dedikova-nhs

.gitleaksignore

@@ -7,3 +7,4 @@ src/app/_components/nhs-app/CardLink.tsx:ipv4:30
 4042f9b1238dd4efc8bfdee65fa4ecbd5e08504e:fake-api/data/apim/token.json:generic-api-key:2
 4042f9b1238dd4efc8bfdee65fa4ecbd5e08504e:fake-api/data/apim/token.json:generic-api-key:6
 src/app/api/fake-login/token/route.ts:jwt:11
+src/app/_components/nhs-app/CardLinkWithDescription.tsx:ipv4:30

src/app/_components/nhs-app/CardLinkWithDescription.tsx

@@ -0,0 +1,38 @@
+interface CardLinkProps {
+  title: string;
+  description: string;
+  link: string;
+}
+
+const CardLinkWithDescription = ({ title, description, link }: CardLinkProps) => {
+  return (
+    <li className="nhsapp-card">
+      <div className="nhsapp-card">
+        <div className="nhsapp-card__container">
+          <div className="nhsapp-card__content">
+            <a href={link} className="nhsapp-card__link nhsuk-link--no-visited-state">
+              {title}
+            </a>
+            <div className="nhsapp-card__below">
+              <p className="nhsapp-card__description">{description}</p>
+            </div>
+          </div>
+          <svg
+            className="nhsapp-icon nhsapp-icon--chevron-right"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-hidden="true"
+            focusable="false"
+            height="2rem"
+            width="2rem"
+            viewBox="0 0 24 24"
+          >
+            {" "}
+            <path d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z" />{" "}
+          </svg>{" "}
+        </div>{" "}
+      </div>
+    </li>
+  );
+};
+
+export default CardLinkWithDescription;

src/app/constants.ts

@@ -1,6 +1,7 @@
 export const VACCINATIONS_HUB_PAGE_ROUTE = "/check-and-book-vaccinations";
 export const SERVICE_HEADING = "Check and book vaccinations";
 export const VACCINES_FOR_ALL_AGES_PAGE = "Vaccines for all ages";
+export const VACCINES_FOR_PREGNANT_PAGE = "Vaccines during Pregnancy";
 export const NHS_TITLE_SUFFIX = "NHS";
 export const HUB_FEEDBACK_REFERRER_ID = "hub";
 

src/app/vaccines-during-pregnancy/page.test.tsx

@@ -0,0 +1,52 @@
+import VaccinesForPregnant from "@src/app/vaccines-during-pregnancy/page";
+import { assertBackLinkIsPresent } from "@test-data/utils/back-link-helpers";
+import { render, screen } from "@testing-library/react";
+
+jest.mock("@src/app/_components/nhs-frontend/BackLink", () => jest.fn(() => <div data-testid="back-link"></div>));
+
+describe("VaccinesForPregnantPeople", () => {
+  const vaccines = [
+    {
+      name: "Whooping cough (Pertussis)",
+      description: "Around 20 weeks",
+      link: "/vaccines/whooping-cough-vaccination",
+    },
+    { name: "RSV in pregnancy", description: "From 28 weeks", link: "/vaccines/rsv-pregnancy" },
+  ];
+
+  it("should render heading", () => {
+    render(<VaccinesForPregnant />);
+
+    const heading: HTMLElement = screen.getByRole("heading", { name: "Vaccines during Pregnancy", level: 1 });
+
+    expect(heading).toBeVisible();
+  });
+
+  it("should render back link", () => {
+    render(<VaccinesForPregnant />);
+
+    assertBackLinkIsPresent(screen);
+  });
+
+  it.each(vaccines)(`should render card link with description for $name`, ({ name, description, link }) => {
+    render(<VaccinesForPregnant />);
+
+    const cardLink: HTMLElement = screen.getByRole("link", { name });
+    const cardDescription: HTMLElement = screen.getByText(description);
+
+    expect(cardLink).toBeVisible();
+    expect(cardLink.getAttribute("href")).toEqual(link);
+    expect(cardDescription).toBeVisible();
+  });
+
+  it("renders vaccines for all ages button", async () => {
+    render(<VaccinesForPregnant />);
+    expectLinkToBeRendered("View vaccines for all ages", "/vaccines-for-all-ages");
+  });
+});
+
+const expectLinkToBeRendered = (text: string, href: string) => {
+  const link: HTMLElement = screen.getByRole("link", { name: text });
+  expect(link).toBeVisible();
+  expect(link).toHaveAttribute("href", href);
+};

src/app/vaccines-during-pregnancy/page.tsx

@@ -0,0 +1,35 @@
+import CardLinkWithDescription from "@src/app/_components/nhs-app/CardLinkWithDescription";
+import BackLink from "@src/app/_components/nhs-frontend/BackLink";
+import MainContent from "@src/app/_components/nhs-frontend/MainContent";
+import { NHS_TITLE_SUFFIX, VACCINES_FOR_PREGNANT_PAGE } from "@src/app/constants";
+import Link from "next/link";
+import React, { JSX } from "react";
+
+const VaccinesForPregnant = (): JSX.Element => {
+  return (
+    <>
+      <title>{`${VACCINES_FOR_PREGNANT_PAGE} - ${NHS_TITLE_SUFFIX}`}</title>
+      <BackLink />
+      <MainContent>
+        <h1 className={"app-dynamic-page-title__heading"}>{VACCINES_FOR_PREGNANT_PAGE}</h1>
+        <ul className="nhsapp-cards nhsapp-cards--stacked">
+          <CardLinkWithDescription
+            title={"Whooping cough (Pertussis)"}
+            description={"Around 20 weeks"}
+            link={"/vaccines/whooping-cough-vaccination"}
+          />
+          <CardLinkWithDescription
+            title={"RSV in pregnancy"}
+            description={"From 28 weeks"}
+            link={"/vaccines/rsv-pregnancy"}
+          />
+        </ul>
+        <Link href={"/vaccines-for-all-ages"} className={"nhsuk-button nhsuk-button--secondary"}>
+          View vaccines for all ages
+        </Link>
+      </MainContent>
+    </>
+  );
+};
+
+export default VaccinesForPregnant;