GN-104 Cks content

src/Footer/Services/__snapshots__/Services.test.jsx.snap

@@ -17,7 +17,7 @@ exports[`Services Matches snapshot 1`] = `
         eventAction="Footer click"
         eventCategory="TopHat and footer"
         eventLabel="Guidance"
-        href="https://www.nice.org.uk/guidance/"
+        href="https://www.nice.org.uk/guidance"
       >
         Guidance
       </TrackedLink>
@@ -45,7 +45,7 @@ exports[`Services Matches snapshot 1`] = `
         eventAction="Footer click"
         eventCategory="TopHat and footer"
         eventLabel="Standards and indicators"
-        href="https://www.nice.org.uk/standards-and-indicators/"
+        href="https://www.nice.org.uk/standards-and-indicators"
       >
         Standards and indicators
       </TrackedLink>
@@ -132,13 +132,13 @@ exports[`Services Matches snapshot 1`] = `
         className="link"
         eventAction="Footer click"
         eventCategory="TopHat and footer"
-        eventLabel="Clinical Knowledge Summaries"
+        eventLabel="CKS"
         href="https://cks.nice.org.uk/"
       >
         <abbr
           title="Clinical Knowledge Summaries"
         >
-          Clinical Knowledge Summaries
+          CKS
 
           <span
             className="visuallyHidden"

src/Header/Nav/Dropdown/Components/AboutUs.jsx

@@ -10,6 +10,7 @@ export function AboutUs() {
 		(service) => service.text == "About us"
 	).href;
 
+	const alphaNICEorg = "http://alpha.nice.org.uk/";
 	return (
 		<section aria-label="About us - dropdown navigation">
 			<h2 className="mt--0">About us</h2>
@@ -132,32 +133,28 @@ export function AboutUs() {
 					<h3 className="mt--d">Get involved</h3>
 					<ol className={classnames(styles.listUnstyled, "mt--d")}>
 						<li>
-							<a href="https://www.nice.org.uk/Get-Involved/stakeholder-registration">
+							<a href={`${alphaNICEorg}Get-Involved/stakeholder-registration`}>
 								Register as a stakeholder
 							</a>
 						</li>
 						<li>
-							<a href="https://www.nice.org.uk/Get-Involved/Consultations">
+							<a href={`${alphaNICEorg}Get-Involved/Consultations`}>
 								Comment on a consultation
 							</a>
 						</li>
 						<li>
-							<a href="https://www.nice.org.uk/Get-Involved/our-committees">
+							<a href={`${alphaNICEorg}Get-Involved/our-committees`}>
 								Join a committee
 							</a>
 						</li>
 						<li>
-							<a href="https://www.nice.org.uk/Get-Involved/Meetings-in-public">
+							<a href={`${alphaNICEorg}Get-Involved/Meetings-in-public`}>
 								Come to a meeting
 							</a>
 						</li>
 						<li>
-							<a href="https://www.nice.org.uk/Get-Involved/jobs">
-								Work with us
-							</a>
-						</li>
-						<li>
-							<a href="https://www.nice.org.uk/about/nice-communities/public-involvement">
+							<a href={`${alphaNICEorg}Get-Involved/jobs`}>Work with us</a>
+							<a href={`${baseUrl}nice-communities/public-involvement`}>
 								Public involvement
 							</a>
 						</li>

src/Header/Nav/Dropdown/Components/CKS.jsx

@@ -0,0 +1,121 @@
+import React from "react";
+import { Button } from "@nice-digital/nds-button";
+import { Grid, GridItem } from "@nice-digital/nds-grid";
+import styles from "./Components.module.scss";
+import services from "../../../../services.json";
+
+export function CKS() {
+	const baseUrl = services.external.find(
+		(service) => service.text == "CKS"
+	).href;
+
+	const topicsAtoZurl = baseUrl + "topics/#";
+
+	const topicsAtoZ = [
+		{ letter: "A", link: true },
+		{ letter: "B", link: true },
+		{ letter: "C", link: true },
+		{ letter: "D", link: true },
+		{ letter: "E", link: true },
+		{ letter: "F", link: true },
+		{ letter: "G", link: true },
+		{ letter: "H", link: true },
+		{ letter: "I", link: true },
+		{ letter: "J", link: true },
+		{ letter: "K", link: true },
+		{ letter: "L", link: true },
+		{ letter: "M", link: true },
+		{ letter: "N", link: true },
+		{ letter: "O", link: true },
+		{ letter: "P", link: true },
+		{ letter: "Q", link: false },
+		{ letter: "R", link: true },
+		{ letter: "S", link: true },
+		{ letter: "T", link: true },
+		{ letter: "U", link: true },
+		{ letter: "V", link: true },
+		{ letter: "W", link: true },
+		{ letter: "X", link: false },
+		{ letter: "Y", link: false },
+		{ letter: "Z", link: true },
+	];
+
+	return (
+		<section aria-label="CKS - dropdown navigation">
+			<h2 className="mt--0">CKS</h2>
+			<p>
+				Providing primary care practitioners with a readily accessible summary
+				of the current evidence base and practical guidance on best practice
+			</p>
+			<Button variant="primary" to={baseUrl}>
+				View CKS
+			</Button>
+
+			<h3 className="mt--d">Health topics A to Z</h3>
+			<ol className={styles.alphabet}>
+				{topicsAtoZ.map(({ letter, link }) => {
+					return (
+						<li
+							key={letter}
+							className={`${styles.letter} ${link ? "" : styles.chunkyLetter}`}
+						>
+							{link ? (
+								<a href={`${topicsAtoZurl}${letter}`}>{letter}</a>
+							) : (
+								<span>{letter}</span>
+							)}
+						</li>
+					);
+				})}
+			</ol>
+
+			<Grid gutter="loose">
+				<GridItem cols={12} md={6}>
+					<h3 className="mt--0">Topics most frequently visited</h3>
+					<ul className={styles.listUnstyled} style={{ columnCount: 2 }}>
+						<li>
+							<a href={`${baseUrl}topics/hypertension/`}>Hypertension</a>
+						</li>
+						<li>
+							<a href={`${baseUrl}topics/diabetes-type-2/`}>
+								Diabetes - type 2
+							</a>
+						</li>
+						<li>
+							<a href={`${baseUrl}topics/gout/`}>Gout</a>
+						</li>
+						<li>
+							<a href={`${baseUrl}topics/migraine/`}>Migraine</a>
+						</li>
+						<li>
+							<a href={`${baseUrl}topics/allergic-rhinitis/`}>
+								Allergic rhinitis
+							</a>
+						</li>
+						<li>
+							<a href={`${baseUrl}topics/asthma/`}>Asthma</a>
+						</li>
+					</ul>
+				</GridItem>
+				<GridItem cols={12} md={3}>
+					<h3 className="mt--0">Browse by</h3>
+					<ul className={styles.listUnstyled}>
+						<li>
+							<a href={`${baseUrl}specialities/`}>Specialities</a>
+						</li>
+					</ul>
+				</GridItem>
+				<GridItem cols={12} md={3}>
+					<h3 className="mt--0">What’s new</h3>
+					<ul className={styles.listUnstyled}>
+						<li>
+							<a href={`${baseUrl}whats-new/`}>Latest CKS</a>
+						</li>
+					</ul>
+				</GridItem>
+			</Grid>
+			<hr />
+			<a href={`${baseUrl}about/`}>About CKS</a>
+		</section>
+	);
+}

src/Header/Nav/Dropdown/Components/More.jsx

@@ -15,7 +15,7 @@ export function More() {
 						go.
 					</p>
 					<p>
-						<Button variant="primary" to="https://evidence.nhs.uk">
+						<Button variant="primary" to="https://alpha.evidence.nhs.uk/">
 							Evidence search
 						</Button>
 					</p>
@@ -32,13 +32,13 @@ export function More() {
 					</p>
 
 					<p>
-						You'll need an NHS OpenAthens account to access most of these
+						You&apos;ll need an NHS OpenAthens account to access most of these
 						resources.
 					</p>
 					<p>
 						<Button
 							variant="primary"
-							to="https://www.nice.org.uk/about/what-we-do/evidence-services/journals-and-databases"
+							to="https://alpha.nice.org.uk/about/what-we-do/evidence-services/journals-and-databases"
 						>
 							Journals and databases
 						</Button>

src/Header/Nav/Dropdown/Components/Pathways.jsx

@@ -0,0 +1,113 @@
+import React from "react";
+import { Button } from "@nice-digital/nds-button";
+import { Grid, GridItem } from "@nice-digital/nds-grid";
+import styles from "./Components.module.scss";
+import services from "../../../../services.json";
+
+export function Pathways() {
+	const baseUrl = services.external.find(
+		(service) => service.text == "NICE Pathways"
+	).href;
+
+	const pathwaysAtoZurl = baseUrl + "?jumpAtoZ=";
+
+	const pathwaysAtoZ = [
+		{ letter: "A", link: true },
+		{ letter: "B", link: true },
+		{ letter: "C", link: true },
+		{ letter: "D", link: true },
+		{ letter: "E", link: true },
+		{ letter: "F", link: true },
+		{ letter: "G", link: true },
+		{ letter: "H", link: true },
+		{ letter: "I", link: true },
+		{ letter: "J", link: true },
+		{ letter: "K", link: true },
+		{ letter: "L", link: true },
+		{ letter: "M", link: true },
+		{ letter: "N", link: true },
+		{ letter: "O", link: true },
+		{ letter: "P", link: true },
+		{ letter: "Q", link: false },
+		{ letter: "R", link: true },
+		{ letter: "S", link: true },
+		{ letter: "T", link: true },
+		{ letter: "U", link: true },
+		{ letter: "V", link: true },
+		{ letter: "W", link: true },
+		{ letter: "X", link: false },
+		{ letter: "Y", link: true },
+		{ letter: "Z", link: false },
+	];
+
+	return (
+		<section aria-label="Pathways - dropdown navigation">
+			<h2 className="mt--0">NICE Pathways</h2>
+			<p>Everything NICE says on a topic in an interactive flowchart</p>
+			<Button variant="cta" to={baseUrl}>
+				View NICE Pathways
+			</Button>
+
+			<h3 className="mt--d">Pathways A to Z</h3>
+			<ol className={styles.alphabet}>
+				{pathwaysAtoZ.map(({ letter, link }) => {
+					return (
+						<li
+							key={letter}
+							className={`${styles.letter} ${link ? "" : styles.chunkyLetter}`}
+						>
+							{link ? (
+								<a href={`${pathwaysAtoZurl}${letter}`}>{letter}</a>
+							) : (
+								<span>{letter}</span>
+							)}
+						</li>
+					);
+				})}
+			</ol>
+
+			<Grid gutter="loose">
+				<GridItem cols={12} md={6}>
+					<h3 className="mt--0">Browse topics by</h3>
+					<ul className={styles.listUnstyled} style={{ columnCount: 2 }}>
+						<li>
+							<a href={`${baseUrl}?browse=conditionsAndDiseases`}>
+								Conditions and diseases
+							</a>
+						</li>
+						<li>
+							<a href={`${baseUrl}?browse=healthProtection`}>
+								Health protection
+							</a>
+						</li>
+						<li>
+							<a href={`${baseUrl}?browse=lifestyleAndWellbeing`}>
+								Lifestyle and wellbeing
+							</a>
+						</li>
+						<li>
+							<a href={`${baseUrl}?browse=populationGroups`}>
+								Population groups
+							</a>
+						</li>
+						<li>
+							<a href={`${baseUrl}?browse=healthProtection`}>
+								Service delivery, organisation and staffing
+							</a>
+						</li>
+					</ul>
+				</GridItem>
+				<GridItem cols={12} md={3}>
+					<h3 className="mt--0">What&apos;s new</h3>
+					<ul className={styles.listUnstyled}>
+						<li>
+							<a href={`${baseUrl}?browse=latest`}>Latest NICE Pathways</a>
+						</li>
+					</ul>
+				</GridItem>
+			</Grid>
+			<hr />
+			<a href={`${baseUrl}#help`}>How to use NICE Pathways</a>
+		</section>
+	);
+}

src/Header/Nav/Dropdown/Components/StandardsAndIndicators.jsx

@@ -21,7 +21,7 @@ export function StandardsAndIndicators() {
 					</p>
 					<Button
 						variant="primary"
-						to="https://www.nice.org.uk/guidance/published?type=QS"
+						to="https://alpha.nice.org.uk/guidance/published?type=qs"
 					>
 						View quality standards
 					</Button>
@@ -62,7 +62,7 @@ export function StandardsAndIndicators() {
 							</a>
 						</li>
 						<li>
-							<a href="https://www.nice.org.uk/about/what-we-do/into-practice/measuring-the-uptake-of-nice-guidance">
+							<a href="https://alpha.nice.org.uk/about/what-we-do/into-practice/measuring-the-uptake-of-nice-guidance">
 								Measuring uptake of quality standards
 							</a>
 						</li>
@@ -85,7 +85,7 @@ export function StandardsAndIndicators() {
 							</a>
 						</li>
 						<li>
-							<a href="https://www.nice.org.uk/get-involved/meetings-in-public/indicator-advisory-committee">
+							<a href="https://alpha.nice.org.uk/get-involved/meetings-in-public/indicator-advisory-committee">
 								Learn about the committee that develops indicators
 							</a>
 						</li>

src/Header/Nav/Dropdown/Components/index.jsx

@@ -1,6 +1,8 @@
-export { Guidance } from "./Guidance";
-export { More } from "./More";
-export { StandardsAndIndicators } from "./StandardsAndIndicators";
 export { AboutUs } from "./AboutUs";
 export { BNF } from "./BNF";
 export { BNFc } from "./BNFc";
+export { CKS } from "./CKS";
+export { Guidance } from "./Guidance";
+export { More } from "./More";
+export { Pathways } from "./Pathways";
+export { StandardsAndIndicators } from "./StandardsAndIndicators";