GN-105 Standards and indicators content

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

@@ -36,6 +36,20 @@ exports[`Services Matches snapshot 1`] = `
         NICE Pathways
       </TrackedLink>
     </li>
+    <li
+      key="standards-and-indicators"
+    >
+      <TrackedLink
+        aria-current={null}
+        className="link"
+        eventAction="Footer click"
+        eventCategory="TopHat and footer"
+        eventLabel="Standards and indicators"
+        href="https://www.nice.org.uk/standards-and-indicators/"
+      >
+        Standards and indicators
+      </TrackedLink>
+    </li>
     <li
       key="life-sciences"
     >

src/Header/Nav/Dropdown/Components/Components.module.scss

@@ -6,6 +6,10 @@
   margin-left: 0;
   max-width: none; // To override max-width of 66ch set on lists
   padding: 0;
+
+  li {
+    margin-bottom: rem($nds-spacing-small);
+  }
 }
 
 .alphabet {

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

@@ -6,7 +6,7 @@ export function More() {
 	return (
 		<section aria-label="More NICE services">
 			<Grid gutter="loose">
-				<GridItem cols={12} md={4}>
+				<GridItem cols={12} md={6}>
 					<h3>Evidence search</h3>
 					<p>
 						Evidence search helps you make better, faster evidence-based
@@ -15,32 +15,12 @@ export function More() {
 						go.
 					</p>
 					<p>
-						<Button variant="cta" to="https://evidence.nhs.uk">
+						<Button variant="primary" to="https://evidence.nhs.uk">
 							Evidence search
 						</Button>
 					</p>
 				</GridItem>
-				<GridItem cols={12} md={4}>
-					<h3>Standards and indicators</h3>
-					<p>
-						Quality standards set out the priority areas for quality improvement
-						in health and social care. They cover areas where there is variation
-						in care. Each standard gives you:
-					</p>
-					<ul>
-						<li>a set of statements to help you</li>
-						<li>improve quality information on how to measure progress.</li>
-					</ul>
-					<p>
-						<Button
-							variant="cta"
-							to="https://www.nice.org.uk/standards-and-indicators"
-						>
-							Standards and indicators
-						</Button>
-					</p>
-				</GridItem>
-				<GridItem cols={12} md={4}>
+				<GridItem cols={12} md={6}>
 					<h3>Journals and databases</h3>
 					<p>
 						Quick access to a range of journals and other evidence-based
@@ -57,7 +37,7 @@ export function More() {
 					</p>
 					<p>
 						<Button
-							variant="cta"
+							variant="primary"
 							to="https://www.nice.org.uk/about/what-we-do/evidence-services/journals-and-databases"
 						>
 							Journals and databases

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

@@ -0,0 +1,117 @@
+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";
+import classnames from "classnames";
+
+export function StandardsAndIndicators() {
+	const baseUrl = services.external.find(
+		(service) => service.text == "Standards and indicators"
+	).href;
+
+	return (
+		<section aria-label="Standards and indicators - dropdown navigation">
+			<Grid gutter="loose">
+				<GridItem cols={12} md={6}>
+					<h3>Quality standards</h3>
+					<p>
+						Quality standards set out the priority areas for quality improvement
+						in health and social care.
+					</p>
+					<Button
+						variant="primary"
+						to="https://www.nice.org.uk/guidance/published?type=QS"
+					>
+						View quality standards
+					</Button>
+
+					<ol className={classnames(styles.listUnstyled, "mt--d")}>
+						<li>
+							<a href={`${baseUrl}how-to-use-quality-standards`}>
+								How we use quality standards
+							</a>
+						</li>
+						<li>
+							<a href={`${baseUrl}timeline-developing-quality-standards`}>
+								Timeline-quality standards development
+							</a>
+						</li>
+						<li>
+							<a href={`${baseUrl}get-involved`}>
+								Help develop quality standards
+							</a>
+						</li>
+						<li>
+							<a
+								href={`${baseUrl}selecting-and-prioritising-quality-standard-topics`}
+							>
+								Selecting and prioritising quality standards topics
+							</a>
+						</li>
+						<li>
+							<a
+								href={`${baseUrl}developing-nice-quality-standards-/quality-standards-topic-library`}
+							>
+								Quality standard topic library
+							</a>
+						</li>
+						<li>
+							<a href="https://www.nice.org.uk/Media/Default/Standards-and-indicators/qs-forward-planner.xlsx">
+								Upcoming quality standards - forward planner
+							</a>
+						</li>
+						<li>
+							<a href="https://www.nice.org.uk/about/what-we-do/into-practice/measuring-the-uptake-of-nice-guidance">
+								Measuring uptake of quality standards
+							</a>
+						</li>
+					</ol>
+				</GridItem>
+				<GridItem cols={12} md={6}>
+					<h3>Indicators</h3>
+					<p>
+						NICE indicators measure outcomes that reflect the quality of care,
+						or processes linked, by evidence, to improved outcomes.
+					</p>
+					<Button variant="primary" to={`${baseUrl}index`}>
+						View indicators
+					</Button>
+
+					<ol className={classnames(styles.listUnstyled, "mt--d")}>
+						<li>
+							<a href="https://www.nice.org.uk/media/default/Get-involved/Meetings-In-Public/indicator-advisory-committee/ioc-process-guide.pdf">
+								How we develop indicators for the NICE menu (PDF)
+							</a>
+						</li>
+						<li>
+							<a href="https://www.nice.org.uk/get-involved/meetings-in-public/indicator-advisory-committee">
+								Learn about the committee that develops indicators
+							</a>
+						</li>
+						<li>
+							<a href="https://www.nice.org.uk/Media/Default/Standards-and-indicators/new-updated-retired-indicators.docx">
+								New, updated and retired indicators: September 2020 (Word)
+							</a>
+						</li>
+						<li>
+							<a href="https://www.nice.org.uk/Media/Default/Standards-and-indicators/full-indicator-menu.docx">
+								NICE indicator menu (Word)
+							</a>
+						</li>
+						<li>
+							<a href="https://www.nice.org.uk/Media/Default/Standards-and-indicators/hypertension-indicator-pack.pptx">
+								Hypertension indicator pack (PowerPoint)
+							</a>
+						</li>
+						<li>
+							<a href="https://www.nice.org.uk/Media/Default/Standards-and-indicators/qof-indicator-assessment-report.pdf">
+								QOF indicator assessment report (PDF)
+							</a>
+						</li>
+					</ol>
+				</GridItem>
+			</Grid>
+		</section>
+	);
+}

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

@@ -1,4 +1,5 @@
 export { Guidance } from "./Guidance";
 export { More } from "./More";
+export { StandardsAndIndicators } from "./StandardsAndIndicators";
 export { BNF } from "./BNF";
 export { BNFc } from "./BNFc";

src/Header/Nav/Dropdown/Dropdown.jsx

@@ -1,7 +1,8 @@
 import React from "react";
 import PropTypes from "prop-types";
 import styles from "./Dropdown.module.scss";
-import { Guidance, More, BNF, BNFc } from "./Components/";
+import { Guidance, More, StandardsAndIndicators, BNF, BNFc } from "./Components/";
+
 import Remove from "@nice-digital/icons/lib/Remove";
 
 export function Dropdown({
@@ -15,6 +16,7 @@ export function Dropdown({
 	const components = {
 		Guidance: Guidance,
 		More: More,
+		StandardsAndIndicators: StandardsAndIndicators,
 		BNF: BNF,
 		BNFc: BNFc,
 	};

src/services.json

@@ -31,6 +31,13 @@
         }
       ]
     },
+    {
+      "href": "https://www.nice.org.uk/standards-and-indicators/",
+      "text": "Standards and indicators",
+      "id": "standards-and-indicators",
+      "dropdown": true,
+      "dropdownComponent": "StandardsAndIndicators"
+    },
     {
       "href": "https://www.nice.org.uk/about/what-we-do/life-sciences",
       "text": "Life sciences",