TASK AS Refactor WarningCallout, add refs for nhsuk components

Author: anoop-surej-nhs

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

@@ -6,6 +6,7 @@ interface CardLinkProps {
   link: string;
 }
 
+// Ref: https://design-system.nhsapp.service.nhs.uk/components/card-links/
 const CardLinkWithDescription = ({ title, description, link }: CardLinkProps) => {
   return (
     <li className="nhsapp-card">

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

@@ -9,6 +9,7 @@ const handleClick = (router: AppRouterInstance) => {
   router.back();
 };
 
+// Ref: https://service-manual.nhs.uk/design-system/components/back-link
 const BackLink = () => {
   const router = useRouter();
   const { hasContextLoaded, isOpenInMobileApp } = useBrowserContext();

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

@@ -13,6 +13,7 @@ interface NonUrgentCareCardProps {
   content: JSX.Element;
 }
 
+// Ref: https://service-manual.nhs.uk/design-system/patterns/help-users-decide-when-and-where-to-get-care
 const NonUrgentCareCard = ({ heading, headingLevel, content }: NonUrgentCareCardProps) => {
   return (
     <Card cardType="non-urgent" data-testid="non-urgent-care-card">

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

@@ -2,6 +2,7 @@
 
 import React from "react";
 
+// Ref: https://service-manual.nhs.uk/design-system/components/skip-link
 const SkipLink = () => {
   return (
     <a

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

@@ -13,6 +13,7 @@ interface NonUrgentCareCardProps {
   content: JSX.Element;
 }
 
+// Ref: https://service-manual.nhs.uk/design-system/patterns/help-users-decide-when-and-where-to-get-care
 const UrgentCareCard = ({ heading, headingLevel, content }: NonUrgentCareCardProps) => {
   return (
     <Card cardType="urgent" data-testid="urgent-care-card">

…mponents/content/WarningCallout.test.tsx …nts/nhs-frontend/WarningCallout.test.tsxsrc/app/_components/content/WarningCallout.test.tsx renamed to src/app/_components/nhs-frontend/WarningCallout.test.tsx src/app/_components/content/WarningCallout.test.tsx renamed to src/app/_components/nhs-frontend/WarningCallout.test.tsx

@@ -1,4 +1,4 @@
-import Callout from "@src/app/_components/content/WarningCallout";
+import Callout from "@src/app/_components/nhs-frontend/WarningCallout";
 import { VaccineType } from "@src/models/vaccine";
 import { mockStyledContent } from "@test-data/content-api/data";
 import { render, screen } from "@testing-library/react";

…p/_components/content/WarningCallout.tsx …mponents/nhs-frontend/WarningCallout.tsxsrc/app/_components/content/WarningCallout.tsx renamed to src/app/_components/nhs-frontend/WarningCallout.tsx src/app/_components/content/WarningCallout.tsx renamed to src/app/_components/nhs-frontend/WarningCallout.tsx

@@ -2,13 +2,15 @@ import { VaccineInfo, VaccineType } from "@src/models/vaccine";
 import { StyledVaccineContent } from "@src/services/content-api/types";
 import { JSX } from "react";
 
+import styles from "./styles.module.css";
+
 const WarningCallout = (props: {
   styledVaccineContent: StyledVaccineContent;
   vaccineType: VaccineType;
 }): JSX.Element => {
   const element =
     props.styledVaccineContent.callout && !VaccineInfo[props.vaccineType].supressWarningCallout ? (
-      <div data-testid="callout" className="nhsuk-warning-callout">
+      <div data-testid="callout" className={`nhsuk-warning-callout  ${styles.warningCalloutZeroMarginBottom}`}>
         <h3 className="nhsuk-warning-callout__label">
           <span role="text">
             <span className="nhsuk-u-visually-hidden">Important: </span>

src/app/_components/nhs-frontend/styles.module.css

@@ -5,3 +5,7 @@
 .careCardZeroMarginBottom ul:last-child {
   margin-bottom: 0;
 }
+
+.warningCalloutZeroMarginBottom p:last-child {
+  margin-bottom: 0;
+}

src/app/_components/vaccine/Vaccine.tsx

@@ -6,8 +6,8 @@ import { HowToGetVaccineFallback } from "@src/app/_components/content/HowToGetVa
 import { MoreInformation } from "@src/app/_components/content/MoreInformation";
 import { Overview } from "@src/app/_components/content/Overview";
 import Recommendation from "@src/app/_components/content/Recommendation";
-import WarningCallout from "@src/app/_components/content/WarningCallout";
 import { EligibilityVaccinePageContent } from "@src/app/_components/eligibility/EligibilityVaccinePageContent";
+import WarningCallout from "@src/app/_components/nhs-frontend/WarningCallout";
 import { RSVPregnancyInfo } from "@src/app/_components/vaccine-custom/RSVPregnancyInfo";
 import { NhsNumber, VaccineDetails, VaccineInfo, VaccineType } from "@src/models/vaccine";
 import { getContentForVaccine } from "@src/services/content-api/content-service";