From 2ae0c34d9cabb972c9a7cecbe4995b5190866ff9 Mon Sep 17 00:00:00 2001
From: "w@rren" <w@rren.dev>
Date: Tue, 23 Nov 2021 15:46:19 +0000
Subject: [PATCH] GN-146 Data tracking attributes

---
 src/Footer/Footer.jsx                         |   2 +-
 src/Header/Account/Account.jsx                |   3 +-
 src/Header/Header.jsx                         |   3 +-
 .../Nav/Dropdown/Components/AboutUs.jsx       |   8 +-
 src/Header/Nav/Dropdown/Components/BNF.jsx    |  44 +++--
 src/Header/Nav/Dropdown/Components/BNFc.jsx   |  45 +++--
 src/Header/Nav/Dropdown/Components/CKS.jsx    |  49 +++--
 .../Nav/Dropdown/Components/Guidance.jsx      | 183 +++++++++---------
 .../Nav/Dropdown/Components/LifeSciences.jsx  |  82 ++++----
 src/Header/Nav/Dropdown/Dropdown.jsx          |  12 +-
 src/Header/Nav/Nav.jsx                        |   7 +-
 11 files changed, 238 insertions(+), 200 deletions(-)

diff --git a/src/Footer/Footer.jsx b/src/Footer/Footer.jsx
index 3d9309d2..964c5f0f 100644
--- a/src/Footer/Footer.jsx
+++ b/src/Footer/Footer.jsx
@@ -14,7 +14,7 @@ import { footerClickEventAction } from "../tracker";
 export class Footer extends Component {
 	render() {
 		return (
-			<footer className={styles.footer}>
+			<footer className={styles.footer} data-tracking="Global footer">
 				<div className={styles.container}>
 					<TrackedLink
 						eventAction={footerClickEventAction}
diff --git a/src/Header/Account/Account.jsx b/src/Header/Account/Account.jsx
index aa3f41e1..81a12585 100644
--- a/src/Header/Account/Account.jsx
+++ b/src/Header/Account/Account.jsx
@@ -140,7 +140,7 @@ function Account(props) {
 	}
 
 	return props.isLoggedIn ? (
-		<div className={styles.account}>
+		<div className={styles.account} data-tracking="Account panel">
 			<button
 				className={classnames(styles.button, styles.myAccount)}
 				id="my-account-button"
@@ -184,6 +184,7 @@ function Account(props) {
 		</div>
 	) : (
 		<a
+			data-tracking="Sign in"
 			href={signInLink.url}
 			className={styles.button}
 			onClick={handleMenuItemClick}
diff --git a/src/Header/Header.jsx b/src/Header/Header.jsx
index e878ecdd..3ac2df2a 100644
--- a/src/Header/Header.jsx
+++ b/src/Header/Header.jsx
@@ -92,7 +92,7 @@ export class Header extends Component {
 						aria-hidden="true"
 					/>
 
-					<div className={styles.header}>
+					<div className={styles.header} data-tracking="Global nav">
 						<header aria-label="Site header">
 							<ul className={styles.a11yLinks} aria-label="Accessibility links">
 								<li>
@@ -112,6 +112,7 @@ export class Header extends Component {
 									aria-label="Home"
 									className={styles.home}
 									onClick={this.handleLogoClick}
+									data-tracking="Logo"
 								>
 									<LogoIcon
 										className={styles.icon}
diff --git a/src/Header/Nav/Dropdown/Components/AboutUs.jsx b/src/Header/Nav/Dropdown/Components/AboutUs.jsx
index 6570ed4e..02d9857a 100644
--- a/src/Header/Nav/Dropdown/Components/AboutUs.jsx
+++ b/src/Header/Nav/Dropdown/Components/AboutUs.jsx
@@ -24,7 +24,7 @@ export function AboutUs() {
 				Explore about us
 			</Button>
 			<Grid gutter="loose">
-				<GridItem cols={12} md={3}>
+				<GridItem cols={12} md={3} data-tracking="Who we are">
 					<h3 className="mt--d">Who we are</h3>
 					<ul className={classnames(styles.listUnstyled, "mt--d")}>
 						<li>
@@ -59,7 +59,7 @@ export function AboutUs() {
 						</li>
 					</ul>
 				</GridItem>
-				<GridItem cols={12} md={3}>
+				<GridItem cols={12} md={3} data-tracking="What we do">
 					<h3 className="mt--d">What we do</h3>
 					<ul className={classnames(styles.listUnstyled, "mt--d")}>
 						<li>
@@ -94,7 +94,7 @@ export function AboutUs() {
 						</li>
 					</ul>
 				</GridItem>
-				<GridItem cols={12} md={3}>
+				<GridItem cols={12} md={3} data-tracking="Our programmes">
 					<h3 className="mt--d">Our programmes</h3>
 					<ul className={classnames(styles.listUnstyled, "mt--d")}>
 						<li>
@@ -131,7 +131,7 @@ export function AboutUs() {
 						</li>
 					</ul>
 				</GridItem>
-				<GridItem cols={12} md={3}>
+				<GridItem cols={12} md={3} data-tracking="Get involved">
 					<h3 className="mt--d">Get involved</h3>
 					<ul className={classnames(styles.listUnstyled, "mt--d")}>
 						<li>
diff --git a/src/Header/Nav/Dropdown/Components/BNF.jsx b/src/Header/Nav/Dropdown/Components/BNF.jsx
index 4bdfad3c..87619957 100644
--- a/src/Header/Nav/Dropdown/Components/BNF.jsx
+++ b/src/Header/Nav/Dropdown/Components/BNF.jsx
@@ -52,26 +52,30 @@ export function BNF() {
 				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>
+			<div data-tracking="Drugs A to Z">
+				<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>
+			</div>
 
 			<Grid gutter="loose">
-				<GridItem cols={12} md={3}>
+				<GridItem cols={12} md={3} data-tracking="Browse A to Z by">
 					<h3>Browse A to Z by</h3>
 					<ul className={styles.listUnstyled}>
 						<li>
@@ -82,7 +86,7 @@ export function BNF() {
 						</li>
 					</ul>
 				</GridItem>
-				<GridItem cols={12} md={6}>
+				<GridItem cols={12} md={6} data-tracking="Browse by type">
 					<h3>Browse by type</h3>
 					<ul className={styles.listUnstyled} style={{ columnCount: 2 }}>
 						<li>
@@ -111,7 +115,7 @@ export function BNF() {
 						</li>
 					</ul>
 				</GridItem>
-				<GridItem cols={12} md={3}>
+				<GridItem cols={12} md={3} data-tracking="What's new">
 					<h3>What’s new</h3>
 					<ul className={styles.listUnstyled}>
 						<li>
diff --git a/src/Header/Nav/Dropdown/Components/BNFc.jsx b/src/Header/Nav/Dropdown/Components/BNFc.jsx
index 118dc9b4..80e0d8b0 100644
--- a/src/Header/Nav/Dropdown/Components/BNFc.jsx
+++ b/src/Header/Nav/Dropdown/Components/BNFc.jsx
@@ -53,26 +53,29 @@ export function BNFc() {
 				View BNFC
 			</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>
-
+			<div data-tracking="Drugs A to Z">
+				<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>
+			</div>
 			<Grid gutter="loose">
-				<GridItem cols={12} md={3}>
+				<GridItem cols={12} md={3} data-tracking="Browse A to Z by">
 					<h3>Browse A to Z by</h3>
 					<ul className={styles.listUnstyled}>
 						<li>
@@ -83,7 +86,7 @@ export function BNFc() {
 						</li>
 					</ul>
 				</GridItem>
-				<GridItem cols={12} md={6}>
+				<GridItem cols={12} md={6} data-tracking="Browse by type">
 					<h3>Browse by type</h3>
 					<ul className={styles.listUnstyled} style={{ columnCount: 2 }}>
 						<li>
@@ -109,7 +112,7 @@ export function BNFc() {
 						</li>
 					</ul>
 				</GridItem>
-				<GridItem cols={12} md={3}>
+				<GridItem cols={12} md={3} data-tracking="What's new">
 					<h3>What’s new</h3>
 					<ul className={styles.listUnstyled}>
 						<li>
diff --git a/src/Header/Nav/Dropdown/Components/CKS.jsx b/src/Header/Nav/Dropdown/Components/CKS.jsx
index 61ace21d..714191e0 100644
--- a/src/Header/Nav/Dropdown/Components/CKS.jsx
+++ b/src/Header/Nav/Dropdown/Components/CKS.jsx
@@ -50,26 +50,33 @@ export function CKS() {
 				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>
-
+			<div data-tracking="Health topics A to Z">
+				<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>
+			</div>
 			<Grid gutter="loose">
-				<GridItem cols={12} md={6}>
+				<GridItem
+					cols={12}
+					md={6}
+					data-tracking="Topics most frequently visited"
+				>
 					<h3>Topics most frequently visited</h3>
 					<ul className={styles.listUnstyled} style={{ columnCount: 2 }}>
 						<li>
@@ -96,7 +103,7 @@ export function CKS() {
 						</li>
 					</ul>
 				</GridItem>
-				<GridItem cols={12} md={3}>
+				<GridItem cols={12} md={3} data-tracking="Browse by">
 					<h3>Browse by</h3>
 					<ul className={styles.listUnstyled}>
 						<li>
@@ -104,7 +111,7 @@ export function CKS() {
 						</li>
 					</ul>
 				</GridItem>
-				<GridItem cols={12} md={3}>
+				<GridItem cols={12} md={3} data-tracking="What's new">
 					<h3>What’s new</h3>
 					<ul className={styles.listUnstyled}>
 						<li>
diff --git a/src/Header/Nav/Dropdown/Components/Guidance.jsx b/src/Header/Nav/Dropdown/Components/Guidance.jsx
index e1a83fe4..cff4978f 100644
--- a/src/Header/Nav/Dropdown/Components/Guidance.jsx
+++ b/src/Header/Nav/Dropdown/Components/Guidance.jsx
@@ -23,21 +23,23 @@ export function Guidance() {
 				View guidance
 			</Button>
 
-			<h3>New and updated</h3>
-			<ul className={styles.inlineList}>
-				<li>
-					<a href={`${baseUrl}/date`}>This month</a>
-				</li>
-				<li>
-					<a href={`${baseUrl}/lastmonth`}>Last month</a>
-				</li>
-				<li>
-					<a href={`${baseUrl}/last6months`}>Last 6 months</a>
-				</li>
-			</ul>
+			<div data-tracking="New and updated">
+				<h3>New and updated</h3>
+				<ul className={styles.inlineList}>
+					<li>
+						<a href={`${baseUrl}/date`}>This month</a>
+					</li>
+					<li>
+						<a href={`${baseUrl}/lastmonth`}>Last month</a>
+					</li>
+					<li>
+						<a href={`${baseUrl}/last6months`}>Last 6 months</a>
+					</li>
+				</ul>
+			</div>
 
 			<Grid gutter="loose">
-				<GridItem cols={12} md={6}>
+				<GridItem cols={12} md={6} data-tracking="Topics">
 					<h3>Topics</h3>
 					<p>
 						Topic pages bring together products on the same subject, for example
@@ -71,7 +73,7 @@ export function Guidance() {
 						</li>
 					</ul>
 				</GridItem>
-				<GridItem cols={12} md={6}>
+				<GridItem cols={12} md={6} data-tracking="Being developed">
 					<h3>Being developed</h3>
 					<ul className={styles.listUnstyled}>
 						<li>
@@ -102,85 +104,88 @@ export function Guidance() {
 					</ul>
 				</GridItem>
 			</Grid>
+			<div data-tracking="Programmes">
+				<h3>Programmes</h3>
 
-			<h3>Programmes</h3>
+				<Grid>
+					<GridItem cols={12} md={6}>
+						<ul className={styles.listUnstyled}>
+							<li>
+								<h4 className="h5 mt--0 mb--c">
+									<a
+										href={`${baseUrl}/published?type=apg,csg,cg,cov,mpg,ph,sg,sc`}
+									>
+										NICE guidelines
+									</a>
+								</h4>
+								<p className="mt--0">
+									Review the evidence across broad health and social care
+									topics.
+								</p>
+							</li>
+							<li>
+								<h4 className="h5 mt--0 mb--c">
+									<a href={`${baseUrl}/published?type=dg`}>
+										Diagnostics guidance
+									</a>
+								</h4>
+								<p className="mt--0">
+									Review new diagnostic technologies for adoption in
+									the&nbsp;NHS.
+								</p>
+							</li>
+							<li>
+								<h4 className="h5 mt--0 mb--c">
+									<a href={`${baseUrl}/published?type=ipg`}>
+										Interventional procedures guidance
+									</a>
+								</h4>
+								<p className="mt--0">
+									<span>Review the efficacy and safety of&nbsp;procedures</span>
+								</p>
+							</li>
+						</ul>
+					</GridItem>
 
-			<Grid>
-				<GridItem cols={12} md={6}>
-					<ul className={styles.listUnstyled}>
-						<li>
-							<h4 className="h5 mt--0 mb--c">
-								<a
-									href={`${baseUrl}/published?type=apg,csg,cg,cov,mpg,ph,sg,sc`}
-								>
-									NICE guidelines
-								</a>
-							</h4>
-							<p className="mt--0">
-								Review the evidence across broad health and social care topics.
-							</p>
-						</li>
-						<li>
-							<h4 className="h5 mt--0 mb--c">
-								<a href={`${baseUrl}/published?type=dg`}>
-									Diagnostics guidance
-								</a>
-							</h4>
-							<p className="mt--0">
-								Review new diagnostic technologies for adoption in the&nbsp;NHS.
-							</p>
-						</li>
-						<li>
-							<h4 className="h5 mt--0 mb--c">
-								<a href={`${baseUrl}/published?type=ipg`}>
-									Interventional procedures guidance
-								</a>
-							</h4>
-							<p className="mt--0">
-								<span>Review the efficacy and safety of&nbsp;procedures</span>
-							</p>
-						</li>
-					</ul>
-				</GridItem>
-
-				<GridItem cols={12} md={6}>
-					<ul className={styles.listUnstyled}>
-						<li>
-							<h4 className="h5 mt--0 mb--c">
-								<a href={`${baseUrl}/published?type=ta`}>
-									Technology appraisal guidance
-								</a>
-							</h4>
-							<p className="mt--0">
-								Review clinical and cost effectiveness of new&nbsp;treatments.
-							</p>
-						</li>
+					<GridItem cols={12} md={6}>
+						<ul className={styles.listUnstyled}>
+							<li>
+								<h4 className="h5 mt--0 mb--c">
+									<a href={`${baseUrl}/published?type=ta`}>
+										Technology appraisal guidance
+									</a>
+								</h4>
+								<p className="mt--0">
+									Review clinical and cost effectiveness of new&nbsp;treatments.
+								</p>
+							</li>
 
-						<li>
-							<h4 className="h5 mt--0 mb--c">
-								<a href={`${baseUrl}/published?type=hst`}>
-									Highly specialised technologies guidance
-								</a>
-							</h4>
-							<p className="mt--0">
-								Review clinical and cost effectiveness of
-								specialised&nbsp;treatments.
-							</p>
-						</li>
+							<li>
+								<h4 className="h5 mt--0 mb--c">
+									<a href={`${baseUrl}/published?type=hst`}>
+										Highly specialised technologies guidance
+									</a>
+								</h4>
+								<p className="mt--0">
+									Review clinical and cost effectiveness of
+									specialised&nbsp;treatments.
+								</p>
+							</li>
 
-						<li>
-							<h4 className="h5 mt--0 mb--c">
-								<a href={`${baseUrl}/published?type=mtg`}>
-									Medical technologies guidance
-								</a>
-							</h4>
-							<p className="mt--0">
-								Review new medical devices for adoption in the&nbsp;NHS.
-							</p>
-						</li>
-					</ul>
-				</GridItem>
-			</Grid>
+							<li>
+								<h4 className="h5 mt--0 mb--c">
+									<a href={`${baseUrl}/published?type=mtg`}>
+										Medical technologies guidance
+									</a>
+								</h4>
+								<p className="mt--0">
+									Review new medical devices for adoption in the&nbsp;NHS.
+								</p>
+							</li>
+						</ul>
+					</GridItem>
+				</Grid>
+			</div>
 		</section>
 	);
 }
diff --git a/src/Header/Nav/Dropdown/Components/LifeSciences.jsx b/src/Header/Nav/Dropdown/Components/LifeSciences.jsx
index 4c54ba75..6512a17f 100644
--- a/src/Header/Nav/Dropdown/Components/LifeSciences.jsx
+++ b/src/Header/Nav/Dropdown/Components/LifeSciences.jsx
@@ -20,47 +20,51 @@ export function LifeSciences() {
 			<Button className={reset.gnButtonCta} variant="cta" to={baseUrl}>
 				View life sciences
 			</Button>
-			<h3 className="mt--d">Engage with us</h3>
-			<Grid gutter="loose">
-				<GridItem cols={12} md={6}>
-					<h4 className="h5 mb--c mt--0">
-						<a href="http://www.healthtechconnect.org.uk">HealthTech Connect</a>
-					</h4>
-					<p className="mt--0">
-						Register with HealthTech Connect for initial information and support
-						getting your non-pharmaceutical technology developed and adopted in
-						the UK.
-					</p>
+			<div data-tracking="Engage with us">
+				<h3 className="mt--d">Engage with us</h3>
+				<Grid gutter="loose">
+					<GridItem cols={12} md={6}>
+						<h4 className="h5 mb--c mt--0">
+							<a href="http://www.healthtechconnect.org.uk">
+								HealthTech Connect
+							</a>
+						</h4>
+						<p className="mt--0">
+							Register with HealthTech Connect for initial information and
+							support getting your non-pharmaceutical technology developed and
+							adopted in the UK.
+						</p>
 
-					<h4 className="h5 mb--c">
-						<a href="https://www.ukpharmascan.org.uk">UK PharmaScan</a>
-					</h4>
-					<p className="mt--0">
-						UK PharmaScan can help ensure earlier and more effective decision
-						making. Enabling faster uptake of innovative new medicines.
-					</p>
-				</GridItem>
-				<GridItem cols={12} md={6}>
-					<h4 className="h5 mb--c mt--0">
-						<a href={`${baseUrl}/office-for-market-access`}>
-							Office for Market Access
-						</a>
-					</h4>
-					<p className="mt--0">
-						The Office for Market Access can help you engage with us and speed
-						up the development process.
-					</p>
+						<h4 className="h5 mb--c">
+							<a href="https://www.ukpharmascan.org.uk">UK PharmaScan</a>
+						</h4>
+						<p className="mt--0">
+							UK PharmaScan can help ensure earlier and more effective decision
+							making. Enabling faster uptake of innovative new medicines.
+						</p>
+					</GridItem>
+					<GridItem cols={12} md={6}>
+						<h4 className="h5 mb--c mt--0">
+							<a href={`${baseUrl}/office-for-market-access`}>
+								Office for Market Access
+							</a>
+						</h4>
+						<p className="mt--0">
+							The Office for Market Access can help you engage with us and speed
+							up the development process.
+						</p>
 
-					<h4 className="h5 mb--c">
-						<a href={`${baseUrl}/scientific-advice`}>Scientific advice</a>
-					</h4>
-					<p className="mt--0">
-						By answering your questions, scientific advice can help you design
-						evidence generation plans and provide key insights through our
-						advisory services.
-					</p>
-				</GridItem>
-			</Grid>
+						<h4 className="h5 mb--c">
+							<a href={`${baseUrl}/scientific-advice`}>Scientific advice</a>
+						</h4>
+						<p className="mt--0">
+							By answering your questions, scientific advice can help you design
+							evidence generation plans and provide key insights through our
+							advisory services.
+						</p>
+					</GridItem>
+				</Grid>
+			</div>
 		</section>
 	);
 }
diff --git a/src/Header/Nav/Dropdown/Dropdown.jsx b/src/Header/Nav/Dropdown/Dropdown.jsx
index 9c911538..ada9b894 100644
--- a/src/Header/Nav/Dropdown/Dropdown.jsx
+++ b/src/Header/Nav/Dropdown/Dropdown.jsx
@@ -38,7 +38,11 @@ export function Dropdown({
 	const Component = components[component];
 
 	return (
-		<div className={classnames([className, reset.wrapper])} id={id}>
+		<div
+			className={classnames([className, reset.wrapper])}
+			id={id}
+			data-tracking={`${text} dropdown`}
+		>
 			<div className={styles.container}>
 				{nextNavSlug && (
 					<a
@@ -50,7 +54,11 @@ export function Dropdown({
 					</a>
 				)}
 				<Component />
-				<button onClick={closeDropdown} className={styles.exit}>
+				<button
+					onClick={closeDropdown}
+					className={styles.exit}
+					data-tracking="Close menu"
+				>
 					Close menu <Remove />
 				</button>
 			</div>
diff --git a/src/Header/Nav/Nav.jsx b/src/Header/Nav/Nav.jsx
index 0c7a1139..233ba3d0 100644
--- a/src/Header/Nav/Nav.jsx
+++ b/src/Header/Nav/Nav.jsx
@@ -114,7 +114,11 @@ function Nav(props) {
 			)}
 			ref={ref}
 		>
-			<nav className={styles.nav} aria-label="primary navigation">
+			<nav
+				className={styles.nav}
+				aria-label="primary navigation"
+				data-tracking="Primary navigation"
+			>
 				<div className={styles.menuWrapper}>
 					<NavLinks
 						handleScrim={props.handleScrim}
@@ -126,6 +130,7 @@ function Nav(props) {
 					/>
 				</div>
 			</nav>
+			{/* TODO: when is this used? */}
 			{accountsLinksArray && (
 				<nav
 					aria-label="My account"