VIA-603 AS/DB Render 'Common Content' as inset 'information' component from Content-API

In the COVID-19 content API response 'side effects' section is the only
place we have found a 'Common Content' component so far (in this case
used for some information related to A&E); match rendering shown on NHS
website.

Author: donna-belsey-nhs

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

@@ -137,6 +137,25 @@ describe("ContentStylingService", () => {
       expect(text).toBeInTheDocument();
     });
 
+    it("should style Common Content subsection as an Information component (inset text)", async () => {
+      const mockCommonContentSubsection: VaccinePageSubsection = {
+        type: "simpleElement",
+        text: "<p>This is a styled paragraph Common Content subsection</p>",
+        name: "Common Content",
+        headline: "",
+      };
+
+      const styledSubsection: JSX.Element = styleSubsection(mockCommonContentSubsection, 1, false);
+      render(styledSubsection);
+
+      const commonContentText: HTMLElement = screen.getByText("This is a styled paragraph Common Content subsection");
+      const information: HTMLElement = screen.getByText("Information:");
+
+      expect(information).toBeInTheDocument();
+      expect(information.className).toEqual("nhsuk-u-visually-hidden");
+      expect(commonContentText).toBeInTheDocument();
+    });
+
     it("should return styled non-urgent component for subsection", async () => {
       const styledSubsection: JSX.Element = styleSubsection(mockNonUrgentSubsection, 1, false);
       render(styledSubsection);

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

@@ -28,6 +28,7 @@ enum SubsectionTypes {
   URGENT = "URGENT",
   CALLOUT = "CALLOUT",
   EMERGENCY = "EMERGENCY",
+  COMMON_CONTENT = "COMMON_CONTENT",
 }
 
 const Subsections: Record<SubsectionTypes, string> = {
@@ -36,6 +37,7 @@ const Subsections: Record<SubsectionTypes, string> = {
   [SubsectionTypes.URGENT]: "urgent",
   [SubsectionTypes.EMERGENCY]: "immediate",
   [SubsectionTypes.CALLOUT]: "Callout",
+  [SubsectionTypes.COMMON_CONTENT]: "Common Content",
 };
 
 const _getDivWithSanitisedHtml = (html: string) => {
@@ -65,7 +67,7 @@ const styleSubsection = (subsection: VaccinePageSubsection, id: number, isLastSu
     text = `<h3>${subsection.headline}</h3>`.concat(text);
   }
 
-  if (subsection.name === Subsections.INFORMATION) {
+  if (subsection.name === Subsections.INFORMATION || subsection.name === Subsections.COMMON_CONTENT) {
     return <InsetText key={id}>{_getDivWithSanitisedHtml(text)}</InsetText>;
   } else if (subsection.name === Subsections.NON_URGENT) {
     const { heading, headingLevel, content } = extractHeadingAndContent(subsection.text);