GN-102 Bnf content

src/Header/Header.jsx

@@ -87,7 +87,7 @@ export class Header extends Component {
 				<>
 					<span
 						id="scrim"
-						className={this.state.scrimIsActive && styles.scrim}
+						className={this.state.scrimIsActive ? styles.scrim : undefined}
 						aria-hidden="true"
 					/>
 

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

@@ -0,0 +1,127 @@
+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 BNF() {
+	const baseUrl = services.external.find(
+		(service) => service.text == "BNF"
+	).href;
+
+	const drugsAtoZurl = baseUrl + "drug/#";
+
+	const drugsAtoZ = [
+		{ 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: true },
+		{ 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: true },
+		{ letter: "Y", link: true },
+		{ letter: "Z", link: true },
+	];
+
+	return (
+		<section aria-label="BNF - dropdown navigation">
+			<h2 className="mt--0">BNF</h2>
+			<p>
+				The BNF aims to provide prescribers, pharmacists, and other healthcare
+				professionals with sound up-to-date information about the use of
+				medicines.
+			</p>
+			<Button variant="primary" to={baseUrl}>
+				View BNF
+			</Button>
+
+			<h3 className="mt--d">Drugs A to Z</h3>
+			<ol className={styles.alphabet}>
+				{drugsAtoZ.map(({ letter, link }) => {
+					return (
+						<li
+							key={letter}
+							className={`${styles.letter} ${link ? "" : styles.chunkyLetter}`}
+						>
+							{link ? (
+								<a href={`${drugsAtoZurl}${letter}`}>{letter}</a>
+							) : (
+								<span>{letter}</span>
+							)}
+						</li>
+					);
+				})}
+			</ol>
+
+			<Grid gutter="loose">
+				<GridItem cols={12} md={3}>
+					<h3 className="mt--0">Browse A to Z by</h3>
+					<ul className={styles.listUnstyled}>
+						<li>
+							<a href={`${baseUrl}interaction/`}>Interactions</a>
+						</li>
+						<li>
+							<a href={`${baseUrl}treatment-summary/`}>Treatment summaries</a>
+						</li>
+					</ul>
+				</GridItem>
+				<GridItem cols={12} md={6}>
+					<h3 className="mt--0">Browse by type</h3>
+					<ul className={styles.listUnstyled} style={{ columnCount: 2 }}>
+						<li>
+							<a href={`${baseUrl}dental-practitioners-formulary/`}>
+								Dental practitioners' formulary
+							</a>
+						</li>
+						<li>
+							<a href={`${baseUrl}nurse-prescribers-formulary/`}>
+								Nurse prescribers' formulary
+							</a>
+						</li>
+						<li>
+							<a href={`${baseUrl}guidance/`}>Medicines guidance</a>
+						</li>
+						<li>
+							<a href={`${baseUrl}wound-management/`}>Wound management</a>
+						</li>
+						<li>
+							<a href={`${baseUrl}medical-devices/`}>Medical devices</a>
+						</li>
+						<li>
+							<a href={`${baseUrl}borderline-substance-taxonomy/`}>
+								Borderline substances
+							</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}about/changes.html`}>Latest BNF</a>
+						</li>
+					</ul>
+				</GridItem>
+			</Grid>
+			<hr />
+			<a href={`${baseUrl}about/`}>About BNF</a>
+		</section>
+	);
+}

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

@@ -0,0 +1,123 @@
+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";
+
+const drugsAtoZ = [
+	{ letter: "A", link: "https://bnfc.nice.org.uk/drug/#A" },
+	{ letter: "B", link: "https://bnfc.nice.org.uk/drug/#B" },
+	{ letter: "C", link: "https://bnfc.nice.org.uk/drug/#C" },
+	{ letter: "D", link: "https://bnfc.nice.org.uk/drug/#D" },
+	{ letter: "E", link: "https://bnfc.nice.org.uk/drug/#E" },
+	{ letter: "F", link: "https://bnfc.nice.org.uk/drug/#F" },
+	{ letter: "G", link: "https://bnfc.nice.org.uk/drug/#G" },
+	{ letter: "H", link: "https://bnfc.nice.org.uk/drug/#H" },
+	{ letter: "I", link: "https://bnfc.nice.org.uk/drug/#I" },
+	{ letter: "J", link: "https://bnfc.nice.org.uk/drug/#J" },
+	{ letter: "K", link: "https://bnfc.nice.org.uk/drug/#K" },
+	{ letter: "L", link: "https://bnfc.nice.org.uk/drug/#L" },
+	{ letter: "M", link: "https://bnfc.nice.org.uk/drug/#M" },
+	{ letter: "N", link: "https://bnfc.nice.org.uk/drug/#N" },
+	{ letter: "O", link: "https://bnfc.nice.org.uk/drug/#O" },
+	{ letter: "P", link: "https://bnfc.nice.org.uk/drug/#P" },
+	{ letter: "Q", link: null },
+	{ letter: "R", link: "https://bnfc.nice.org.uk/drug/#R" },
+	{ letter: "S", link: "https://bnfc.nice.org.uk/drug/#S" },
+	{ letter: "T", link: "https://bnfc.nice.org.uk/drug/#T" },
+	{ letter: "U", link: "https://bnfc.nice.org.uk/drug/#U" },
+	{ letter: "V", link: "https://bnfc.nice.org.uk/drug/#V" },
+	{ letter: "W", link: "https://bnfc.nice.org.uk/drug/#W" },
+	{ letter: "X", link: null },
+	{ letter: "Y", link: null },
+	{ letter: "Z", link: null },
+];
+
+export function BNFc() {
+	return (
+		<section aria-label="BNFc - dropdown navigation">
+			<h2 className="mt--0">BNFc</h2>
+			<p>Everything NICE says on a topic in an interactive flowchart</p>
+			<Button variant="primary" to="https://bnfc.nice.org.uk/">
+				Explore BNFc
+			</Button>
+
+			<h3>Drugs A to Z</h3>
+			<ol className={styles.alphabet}>
+				{drugsAtoZ.map((letter) => {
+					return (
+						<li
+							key={letter.letter}
+							className={`${styles.letter} ${
+								letter.link == null ? styles.chunkyLetter : ""
+							}`}
+						>
+							{letter.link == null ? (
+								<span>{letter.letter}</span>
+							) : (
+								<a href={letter.link}>{letter.letter}</a>
+							)}
+						</li>
+					);
+				})}
+			</ol>
+
+			<Grid gutter="loose">
+				<GridItem cols={12} md={3}>
+					<h3>Browse A to Z by</h3>
+					<ul className={styles.listUnstyled}>
+						<li>
+							<a href="https://bnfc.nice.org.uk/interaction/">Interactions</a>
+						</li>
+						<li>
+							<a href="https://bnfc.nice.org.uk/treatment-summary/">
+								Treatment summaries
+							</a>
+						</li>
+					</ul>
+				</GridItem>
+				<GridItem cols={12} md={6}>
+					<h3>Browse by type</h3>
+					<ul className={styles.listUnstyled} style={{ columnCount: 2 }}>
+						<li>
+							<a href="https://bnfc.nice.org.uk/dental-practitioners-formulary/">
+								Dental practitioners' formulary
+							</a>
+						</li>
+						<li>
+							<a href="https://bnfc.nice.org.uk/nurse-prescribers-formulary/">
+								Nurse prescribers' formulary
+							</a>
+						</li>
+						<li>
+							<a href="https://bnfc.nice.org.uk/guidance/">
+								Medicines guidance
+							</a>
+						</li>
+						<li>
+							<a href="https://bnfc.nice.org.uk/medical-devices/">
+								Medical devices
+							</a>
+						</li>
+						<li>
+							<a href="https://bnfc.nice.org.uk/borderline-substance-taxonomy/">
+								Borderline substances
+							</a>
+						</li>
+					</ul>
+				</GridItem>
+				<GridItem cols={12} md={3}>
+					<h3>Latest</h3>
+					<ul className={styles.listUnstyled}>
+						<li>
+							<a href="https://bnfc.nice.org.uk/about/changes.html">
+								What's changed
+							</a>
+						</li>
+					</ul>
+				</GridItem>
+			</Grid>
+			<hr />
+			<a href="https://bnfc.nice.org.uk/about/">About BNF</a>
+		</section>
+	);
+}

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

@@ -7,3 +7,82 @@
   max-width: none; // To override max-width of 66ch set on lists
   padding: 0;
 }
+
+.alphabet {
+  display: flex;
+  flex-wrap: wrap;
+  gap: rem($nds-spacing-small);
+  list-style: none;
+  margin: rem(0 0 $nds-spacing-large);
+  max-width: 90%;
+  padding: 0;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.chunkyLetter {
+  @include nds-font-size(h4);
+  color: $nds-colour-nice-dark-grey;
+
+  span {
+    width: 3.95ch;
+  }
+}
+
+.letter {
+  display: inline-block;
+  font-weight: bold;
+  margin: rem(0 $nds-spacing-small $nds-spacing-small 0);
+
+  a,
+  span {
+    display: block;
+    padding: rem($nds-spacing-small 0);
+    text-align: center;
+  }
+
+  a {
+    background: $nds-colour-true-white;
+    border: 1px solid $nds-colour-border;
+    text-decoration: none;
+    width: 4.95ch;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.btn {
+  &:hover,
+  &:focus,
+  &:active {
+    border: em(1px) solid $nds-colour-btn-primary-text !important;
+  }
+
+  &--cta {
+    &:hover,
+    &:focus,
+    &:active {
+      border: em(1px) solid $nds-colour-btn-cta-text !important;
+    }
+  }
+
+  &--secondary {
+    &:hover,
+    &:focus,
+    &:active {
+      border: em(1px) solid $nds-colour-btn-secondary-text !important;
+    }
+  }
+
+  &--inverse {
+    &:hover,
+    &:focus,
+    &:active {
+      border: em(1px) solid $nds-colour-btn-inverse-text !important;
+    }
+  }
+}

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

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

src/Header/Nav/Dropdown/Dropdown.jsx

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

src/Header/Nav/Nav.test.jsx

@@ -18,6 +18,7 @@ describe("Nav", () => {
 		isExpanded: false,
 		accountsData: null,
 		service: null,
+		handleScrim: () => {},
 	};
 	const externalServices = services.external;