VIA-608 AJ Remove extra margin from last subsection in a section

Author: ankur-jain-nhs

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

@@ -30,6 +30,20 @@ describe("ContentStylingService", () => {
     headline: "Headline",
   };
 
+  const mockMarkdown2Subsection: VaccinePageSubsection = {
+    type: "simpleElement",
+    text: "<h2>This is second styled paragraph markdown subsection</h2>",
+    name: "markdown",
+    headline: "Headline2",
+  };
+
+  const mockMarkdown3Subsection: VaccinePageSubsection = {
+    type: "simpleElement",
+    text: "<h2>This is third styled paragraph markdown subsection</h2>",
+    name: "markdown",
+    headline: "Headline3",
+  };
+
   const mockHowToGetMarkdownSubsection: VaccinePageSubsection = {
     type: "simpleElement",
     text: "<p>para</p><h3>If you're aged 75 to 79</h3><p>para1</p><p>para2</p><h3>If you're pregnant</h3><p>para3</p><p>para4</p>",
@@ -66,7 +80,7 @@ describe("ContentStylingService", () => {
 
   describe("styleSubsection", () => {
     it("should return styled markdown component for subsection beginning with headline", async () => {
-      const styledSubsection: JSX.Element | undefined = styleSubsection(mockMarkdownSubsection, 1);
+      const styledSubsection: JSX.Element | undefined = styleSubsection(mockMarkdownSubsection, 1, false);
       render(styledSubsection);
 
       const heading1: HTMLElement = screen.getByRole("heading", {
@@ -87,7 +101,7 @@ describe("ContentStylingService", () => {
         headline: "",
       };
 
-      const styledSubsection: JSX.Element | undefined = styleSubsection(mockMarkdownSubsection, 1);
+      const styledSubsection: JSX.Element | undefined = styleSubsection(mockMarkdownSubsection, 1, false);
       render(styledSubsection);
 
       const div: HTMLElement = screen.getByRole("section");
@@ -105,7 +119,7 @@ describe("ContentStylingService", () => {
         headline: "",
       };
 
-      const styledSubsection: JSX.Element = styleSubsection(mockInformationSubsection, 1);
+      const styledSubsection: JSX.Element = styleSubsection(mockInformationSubsection, 1, false);
       render(styledSubsection);
 
       const text: HTMLElement = screen.getByText("This is a styled paragraph information subsection");
@@ -117,7 +131,7 @@ describe("ContentStylingService", () => {
     });
 
     it("should return styled non-urgent component for subsection", async () => {
-      const styledSubsection: JSX.Element = styleSubsection(mockNonUrgentSubsection, 1);
+      const styledSubsection: JSX.Element = styleSubsection(mockNonUrgentSubsection, 1, false);
       render(styledSubsection);
 
       const text: HTMLElement = screen.getByText("This is a styled paragraph non-urgent subsection");
@@ -130,7 +144,7 @@ describe("ContentStylingService", () => {
     });
 
     it("should return styled urgent component for subsection", async () => {
-      const styledSubsection: JSX.Element = styleSubsection(mockUrgentSubsection, 1);
+      const styledSubsection: JSX.Element = styleSubsection(mockUrgentSubsection, 1, false);
       render(styledSubsection);
 
       const text: HTMLElement = screen.getByText("This is a styled paragraph urgent subsection");
@@ -143,7 +157,7 @@ describe("ContentStylingService", () => {
     });
 
     it("should return table component for subsection", async () => {
-      const styledSubsection: JSX.Element = styleSubsection(mockTableSubsection, 1);
+      const styledSubsection: JSX.Element = styleSubsection(mockTableSubsection, 1, false);
       render(styledSubsection);
 
       const column1: HTMLElement = screen.getByText("Name");
@@ -158,7 +172,7 @@ describe("ContentStylingService", () => {
     });
 
     it("should return styled callout component for subsection", async () => {
-      const styledSubsection: JSX.Element = styleSubsection(mockCalloutSubsection, 1);
+      const styledSubsection: JSX.Element = styleSubsection(mockCalloutSubsection, 1, false);
       render(styledSubsection);
 
       const text: HTMLElement = screen.getByText("This is a styled paragraph callout subsection");
@@ -193,6 +207,23 @@ describe("ContentStylingService", () => {
       expect(urgentSubsection).toBeInTheDocument();
       expect(columnOfTable).toBeInTheDocument();
     });
+
+    it("should display last subsection with zero margin in a section", async () => {
+      const mockSection: VaccinePageSection = {
+        headline: "This is a heading",
+        subsections: [mockMarkdownSubsection, mockMarkdown2Subsection, mockMarkdown3Subsection],
+      };
+
+      const styledSection: StyledPageSection = styleSection(mockSection);
+      render(styledSection.component);
+      const markdownSubsection: HTMLElement = screen.getByText("This is a styled paragraph markdown subsection");
+      const markdown2Subsection: HTMLElement = screen.getByText("This is second styled paragraph markdown subsection");
+      const markdown3Subsection: HTMLElement = screen.getByText("This is third styled paragraph markdown subsection");
+
+      expect(markdownSubsection.parentNode).not.toHaveClass("zeroMarginBottom");
+      expect(markdown2Subsection.parentNode).not.toHaveClass("zeroMarginBottom");
+      expect(markdown3Subsection.parentNode).toHaveClass("zeroMarginBottom");
+    });
   });
 
   describe("getStyledContentForVaccine", () => {
@@ -237,7 +268,7 @@ describe("ContentStylingService", () => {
       const expectedRsvHowToGetSection = "<div><p>para1</p><p>para2</p></div>";
       const expectedRsvPregnancyHowToGetSection = `<div><div><p>para3</p><p>para4</p></div></div>`;
       const expectedGenericVaccineHowToGetSection =
-        "<div><h3>How To Get Headline</h3><p>para</p><h3>If you're aged 75 to 79</h3><p>para1</p><p>para2</p><h3>If you're pregnant</h3><p>para3</p><p>para4</p></div>";
+        "<div class=\"zeroMarginBottom\"><h3>How To Get Headline</h3><p>para</p><h3>If you're aged 75 to 79</h3><p>para1</p><p>para2</p><h3>If you're pregnant</h3><p>para3</p><p>para4</p></div>";
       const { container } = render(styledVaccineContent.howToGetVaccine.component);
       if (vaccine === VaccineType.RSV) {
         expect(container).toContainHTML(expectedRsvHowToGetSection);

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

@@ -36,7 +36,7 @@ const _getDivWithSanitisedHtml = (html: string) => {
   return <div className={styles.zeroMarginBottom} dangerouslySetInnerHTML={{ __html: sanitiseHtml(html) }} />;
 };
 
-const styleSubsection = (subsection: VaccinePageSubsection, id: number): JSX.Element => {
+const styleSubsection = (subsection: VaccinePageSubsection, id: number, isLastSubsection: boolean): JSX.Element => {
   if (subsection.type === "expanderElement") {
     const content = `<h3>${subsection.headline}</h3>`.concat(subsection.mainEntity);
     return <div key={id} dangerouslySetInnerHTML={{ __html: sanitiseHtml(content) }} />;
@@ -87,19 +87,28 @@ const styleSubsection = (subsection: VaccinePageSubsection, id: number): JSX.Ele
       </WarningCallout>
     );
   } else {
-    return <div key={id} dangerouslySetInnerHTML={{ __html: sanitiseHtml(text) }}></div>;
+    return (
+      <div
+        className={isLastSubsection ? styles.zeroMarginBottom : undefined}
+        key={id}
+        dangerouslySetInnerHTML={{ __html: sanitiseHtml(text) }}
+      ></div>
+    );
   }
 };
 
 const styleSection = (section: VaccinePageSection): StyledPageSection => {
   const heading = section.headline;
+  const indexOfLastChild: number = section.subsections.length - 1;
+
   const styledComponent = (
     <>
       {section.subsections.map((subsection: VaccinePageSubsection, index: number) =>
-        styleSubsection(subsection, index),
+        styleSubsection(subsection, index, index == indexOfLastChild),
       )}
     </>
   );
+
   return {
     heading,
     component: styledComponent,