NXT-163 Display word conversion

web/src/__mocks__/__data__/inDev/guidance/gid-dg10086/documents/empty-conversion/chapter/recommendations.json

@@ -0,0 +1 @@
+{"_links":{"self":[{}]},"eTag":"01000000-0000-0017-0000-000000000007","content":null,"pdfLink":null,"title":"","chapterTitle": "","chapters":[],"sections":[]}

web/src/__mocks__/__data__/inDev/guidance/gid-dg10086/documents/empty-conversion/html.json

@@ -0,0 +1 @@
+{"_links":{"self":[{}]},"eTag":"01000000-0000-0017-0000-000000000007","content":null,"pdfLink":null,"title":"","chapterTitle": "","chapters":[],"sections":[]}

web/src/__mocks__/__data__/inDev/guidance/gid-dg10086/documents/final-scope-html-conversion/chapter/not-a-real-chapter.json

@@ -0,0 +1 @@
+{"_links":{"self":[{}]},"eTag":"01000000-0000-0017-0000-000000000007","content":null,"pdfLink":null,"title":"","chapterTitle": "","chapters":[],"sections":[]}

web/src/__mocks__/__data__/inDev/guidance/gid-dg10086/documents/final-scope-html-conversion/html.json

@@ -0,0 +1,26 @@
+{
+  "_links": { "self": [{}] },
+  "eTag": "01000000-0000-0017-0000-000000000007",
+  "content": "<div class=\"chapter\" title=\"Overview\" id=\"0-1-overview\" xmlns=\"http://www.w3.org/1999/xhtml\">\r\n  <h2 class=\"title\">\r\n    <a id=\"overview\" style=\"position:relative\" class=\"annotator-chapter\" data-heading-type=\"chapter\"></a>Overview<span class=\"annotator-adder\"></span></h2>\r\n  <p>This guideline covers care for women of any age (including girls and young women under 18) who request an abortion. It aims to improve the organisation of services and make them easier for women to access. Detailed recommendations on conducting abortions at different gestational stages are also included, to ensure that women get the safest and most effective care possible. </p>\r\n</div>",
+  "pdfLink": "/guidance/GID-DG10086/documents/final-scope-pdf",
+  "title": "Some document title",
+  "chapterTitle": "Overview",
+  "chapters": [
+    {
+      "slug": "overview",
+      "title": "Overview",
+      "href": "/guidance/GID-DG10086/documents/final-scope-html-conversion/chapter/overview"
+    },
+    {
+      "slug": "recommendations",
+      "title": "Recommendations",
+      "href": "/guidance/GID-DG10086/documents/final-scope-html-conversion/chapter/recommendations"
+    }
+  ],
+  "sections": [
+    {
+      "slug": "0-1-who-is-it-for",
+      "title": "Who is it for?"
+    }
+  ]
+}

web/src/__mocks__/__data__/inDev/project/gid-dg10086.json

@@ -0,0 +1,202 @@
+{
+  "_links": {
+      "nice.indev:stakeholder-registration": [
+          {
+              "href": "https://www.nice.org.uk/about/what-we-do/our-programmes/nice-guidance/nice-diagnostics-guidance/dt-stakeholder-registration"
+          }
+      ],
+      "self": [
+          {
+              "href": "/project/GID-DG10086"
+          }
+      ]
+  },
+  "_embedded": {
+      "nice.indev:timeline-list": {
+          "_links": {
+              "self": [
+                  {}
+              ]
+          },
+          "_embedded": {
+              "nice.indev:timeline": {
+                  "_links": {
+                      "self": [
+                          {}
+                      ]
+                  },
+                  "ETag": null,
+                  "Column1": "04 September 2023",
+                  "Column2": "Final scope",
+                  "AdditionalInfoLabel": null,
+                  "AdditionalInfo": null,
+                  "Hidden": false
+              }
+          },
+          "ETag": null
+      },
+      "nice.indev:process-homepage": {
+          "_links": {
+              "self": [
+                  {
+                      "href": "https://www.nice.org.uk/about/what-we-do/our-programmes/topic-selection"
+                  },
+                  {}
+              ]
+          },
+          "ETag": null,
+          "Description": "For further information on how we select topics for development, please see our page about",
+          "LinkText": "topic selection"
+      },
+      "nice.indev:panel-list": {
+          "_links": {
+              "self": [
+                  {}
+              ]
+          },
+          "_embedded": {
+              "nice.indev:panel": {
+                  "_links": {
+                      "self": [
+                          {}
+                      ]
+                  },
+                  "_embedded": {
+                      "nice.indev:resource-list": {
+                          "_links": {
+                              "self": [
+                                  {}
+                              ]
+                          },
+                          "_embedded": {
+                              "nice.indev:resource": [
+                                  {
+                                      "_links": {
+                                          "self": [
+                                              {}
+                                          ]
+                                      },
+                                      "_embedded": {
+                                          "nice.indev:converted-document": {
+                                              "_links": {
+                                                  "self": [
+                                                      {
+                                                          "href": "/guidance/GID-DG10086/documents/final-scope-html-conversion/html"
+                                                      }
+                                                  ]
+                                              },
+                                              "ETag": null,
+                                              "Reference": "GID-DG10086",
+                                              "Title": "Final scope (html conversion)",
+                                              "ResourceTitleId": "final-scope-html-conversion",
+                                              "ProjectType": "DG",
+                                              "ProductTypeName": "Diagnostics guidance"
+                                          }
+                                      },
+                                      "ETag": null,
+                                      "Title": "Final scope (html conversion)",
+                                      "Level": 1,
+                                      "PublishedDate": "2023-09-04T14:22:00",
+                                      "MajorChangeDate": null,
+                                      "ExternalUrl": null,
+                                      "ShowInDocList": true,
+                                      "TextOnly": false,
+                                      "ConsultationId": 0,
+                                      "ConsultationDocumentId": 0,
+                                      "IsCurrentViewableConsultationMarkup": false,
+                                      "ConvertedDocument": true,
+                                      "SupportsComments": false
+                                  },
+                                  {
+                                      "_links": {
+                                          "self": [
+                                              {}
+                                          ]
+                                      },
+                                      "_embedded": {
+                                          "nice.indev:file": {
+                                              "_links": {
+                                                  "self": [
+                                                      {
+                                                          "href": "/guidance/GID-DG10086/documents/final-scope-pdf"
+                                                      }
+                                                  ]
+                                              },
+                                              "ETag": null,
+                                              "Id": "e38f46ea-5fde-4301-94eb-238765c6df80",
+                                              "MimeType": "application/pdf",
+                                              "FileName": "NG140 (1).pdf",
+                                              "Length": 93282,
+                                              "Hash": "BAF44536C6AD567F412765282F8CA4E3294868BA",
+                                              "Name": null,
+                                              "Reference": "GID-DG10086",
+                                              "ResourceTitleId": "final-scope-pdf",
+                                              "ConsultationDocumentId": 0
+                                          }
+                                      },
+                                      "ETag": null,
+                                      "Title": "Final scope (html conversion)",
+                                      "Level": 1,
+                                      "PublishedDate": "2023-09-04T14:22:00",
+                                      "MajorChangeDate": null,
+                                      "ExternalUrl": null,
+                                      "ShowInDocList": true,
+                                      "TextOnly": false,
+                                      "ConsultationId": 0,
+                                      "ConsultationDocumentId": 0,
+                                      "IsCurrentViewableConsultationMarkup": false,
+                                      "ConvertedDocument": false,
+                                      "SupportsComments": false
+                                  }
+                              ]
+                          },
+                          "ETag": null,
+                          "HasResources": true
+                      }
+                  },
+                  "ETag": null,
+                  "Title": "Final scope",
+                  "PanelType": "History",
+                  "LegacyPanel": false,
+                  "OriginalReference": null,
+                  "UpdateReference": null,
+                  "ShowPanel": true
+              }
+          },
+          "ETag": null
+      }
+  },
+  "ETag": "01000000-0000-0017-0000-000000000007",
+  "Summary": null,
+  "Description": null,
+  "ReferralDate": null,
+  "SuspendDiscontinuedReason": null,
+  "SuspendDiscontinuedUrl": null,
+  "SuspendDiscontinuedUrlText": null,
+  "LegacyModel": false,
+  "ProductReference": null,
+  "EvidenceAssessmentGroup": null,
+  "Alert": null,
+  "Content": null,
+  "Reference": "GID-DG10086",
+  "ProjectType": "DG",
+  "TechnologyType": "Device",
+  "ProductTypeName": "Diagnostics guidance",
+  "Process": "DG",
+  "Title": "Test Conversion John H",
+  "Status": "TopicSelection",
+  "ProjectGroup": "Guidance",
+  "PublishedDate": null,
+  "LastModifiedDate": "2023-09-04T14:22:37.6587088",
+  "FirstGoLiveDate": "2023-09-04T14:22:37.6587088",
+  "CreatedDate": "2023-09-04T14:20:35.4017404",
+  "DevelopedAs": null,
+  "RelevantTo": null,
+  "IdNumber": null,
+  "AreasOfInterestList": [],
+  "TopicSelectionDecision": "AwaitingDecision",
+  "TopicSelectionReason": null,
+  "TopicSelectionDecisionDate": null,
+  "TopicSelectionFurtherInfo": null,
+  "IndicatorSubTypes": []
+}

web/src/components/OnThisPage/OnThisPage.tsx

@@ -80,7 +80,9 @@ export const OnThisPage: FC<OnThisPageProps> = ({ sections }) => {
 							<a
 								className={activeHeadingId === slug ? styles.activeHeading : ""}
 								href={`#${slug}`}
-								dangerouslySetInnerHTML={{ __html: striptags(title) }}
+								dangerouslySetInnerHTML={{
+									__html: striptags(title, ["sup", "sub"]).trim(),
+								}}
 							/>
 						</li>
 					) : null;

web/src/components/ProjectDisplayWordConversion/ProjectDisplayWordConversion.module.scss

@@ -0,0 +1,31 @@
+@use '@nice-digital/nds-core/scss/spacing';
+@use '@nice-digital/nds-core/scss/utils';
+
+.chapterContent {
+  margin-bottom: utils.rem(spacing.$large);
+
+  > div > :first-child {
+    margin-top: 0;
+  }
+
+  h2, h3, h4, h5, h6 {
+    a {
+      text-decoration-line: none;
+      color: initial;
+    }
+  }
+}
+
+.download {
+  display: block;
+  margin-bottom: utils.rem(spacing.$medium);
+  margin-right: 0;
+  text-align: center;
+}
+
+.inPageNavNoScroll > nav {
+  margin: utils.rem(0 0 spacing.$large);
+  max-height: none;
+  position: relative;
+}
+

web/src/components/ProjectDisplayWordConversion/ProjectDisplayWordConversion.test.tsx

@@ -0,0 +1,113 @@
+import { render, screen, within } from "@testing-library/react";
+
+import mockConvertedDocumentFeed from "./../../__mocks__/__data__/inDev/guidance/gid-dg10086/documents/final-scope-html-conversion/html.json";
+import {
+	ProjectDisplayWordConversion,
+	type ProjectDisplayWordConversionProps,
+} from "./ProjectDisplayWordConversion";
+
+const props: ProjectDisplayWordConversionProps = {
+	content: mockConvertedDocumentFeed.content,
+	chapters: mockConvertedDocumentFeed.chapters,
+	inPageNavLinks: [],
+	pdfLink: "/guidance/GID-DG10086/documents/final-scope-pdf",
+	currentChapter: "",
+	currentUrl:
+		"/guidance/topic-selection/gid-dg10086/documents/final-scope-html-conversion",
+	resourceFileTitle: "Test converted document",
+	sections: mockConvertedDocumentFeed.sections,
+};
+
+describe("ProjectDisplayWordConversion", () => {
+	it("should match snapshot for all nav items", () => {
+		const { container } = render(<ProjectDisplayWordConversion {...props} />);
+		expect(container).toMatchSnapshot();
+	});
+
+	it("should render the sections nav with two chapter menu items", () => {
+		render(<ProjectDisplayWordConversion {...props} />);
+		const chapterNavList = screen.getByRole("navigation", { name: "chapters" });
+		const { getAllByRole } = within(chapterNavList);
+		const chapterNavListItems = getAllByRole("listitem");
+		expect(chapterNavList).toBeInTheDocument();
+		expect(chapterNavListItems.length).toEqual(props.chapters.length);
+	});
+
+	it("should render the first chapter menu item as active with index as slug", () => {
+		render(<ProjectDisplayWordConversion {...props} />);
+		const chapterNavList = screen.getByRole("navigation", { name: "chapters" });
+		const { getAllByRole } = within(chapterNavList);
+		const chapterNavListItems = getAllByRole("listitem");
+		const { getByRole } = within(chapterNavListItems[0]);
+		const firstNavListItemLink = getByRole("link", { current: true });
+		expect(firstNavListItemLink).toBeInTheDocument();
+	});
+
+	it("should render the correct chapter menu item as active with chapter name as slug", () => {
+		const dupedProps = { ...props };
+		dupedProps.currentChapter = "recommendations";
+		dupedProps.currentUrl =
+			"/guidance/topic-selection/gid-dg10086/documents/final-scope-html-conversion/chapter/recommendations";
+		render(<ProjectDisplayWordConversion {...dupedProps} />);
+		const chapterNavList = screen.getByRole("navigation", { name: "chapters" });
+		const { getByRole } = within(chapterNavList);
+		const recommendationsNavListItem = getByRole("link", {
+			name: "Recommendations",
+			current: true,
+		});
+		expect(recommendationsNavListItem).toBeInTheDocument();
+	});
+
+	it("should render the html content properly", () => {
+		render(<ProjectDisplayWordConversion {...props} />);
+		const htmlContentHeading = screen.getByText("Overview", { selector: "h2" });
+		const htmlContentParagraph = screen.getByText(
+			/^(This guideline covers care)/i,
+			{ selector: "p" }
+		);
+		expect(htmlContentHeading).toBeInTheDocument();
+		expect(htmlContentParagraph).toBeInTheDocument();
+	});
+
+	it("should have prev and next links", () => {
+		render(<ProjectDisplayWordConversion {...props} />);
+		const prevAndNextLinksNav = screen.getByRole("navigation", {
+			name: "Previous and next pages",
+		});
+		expect(prevAndNextLinksNav).toBeInTheDocument();
+	});
+
+	it("should have only next link when in first chapter", () => {
+		render(<ProjectDisplayWordConversion {...props} />);
+		const prevAndNextLinksNav = screen.getByRole("navigation", {
+			name: "Previous and next pages",
+		});
+		const { getAllByRole } = within(prevAndNextLinksNav);
+		const prevAndNextLinks = getAllByRole("link");
+		expect(prevAndNextLinks.length).toEqual(1);
+		expect(prevAndNextLinks[0].textContent).toContain("Next page");
+	});
+
+	it("should have only previous link when in last chapter", () => {
+		const dupedProps = { ...props };
+		dupedProps.currentChapter = "recommendations";
+		dupedProps.currentUrl =
+			"/guidance/topic-selection/gid-dg10086/documents/final-scope-html-conversion/chapter/recommendations";
+		render(<ProjectDisplayWordConversion {...dupedProps} />);
+		const prevAndNextLinksNav = screen.getByRole("navigation", {
+			name: "Previous and next pages",
+		});
+		const { getAllByRole } = within(prevAndNextLinksNav);
+		const prevAndNextLinks = getAllByRole("link");
+		expect(prevAndNextLinks.length).toEqual(1);
+		expect(prevAndNextLinks[0].textContent).toContain("Previous page");
+	});
+
+	it("should render pdf download button for converted document", () => {
+		render(<ProjectDisplayWordConversion {...props} />);
+		const downloadPDFButton = screen.getByRole("link", {
+			name: "Download (PDF)",
+		});
+		expect(downloadPDFButton).toBeInTheDocument();
+	});
+});