GN-106 About us content

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

@@ -140,6 +140,20 @@ exports[`Services Matches snapshot 1`] = `
         </span>
       </TrackedLink>
     </li>
+    <li
+      key="about-us"
+    >
+      <TrackedLink
+        aria-current={null}
+        className="link"
+        eventAction="Footer click"
+        eventCategory="TopHat and footer"
+        eventLabel="About us"
+        href="https://www.nice.org.uk/about/"
+      >
+        About us
+      </TrackedLink>
+    </li>
     <li
       key="more-nice-services"
     >

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

@@ -0,0 +1,167 @@
+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 AboutUs() {
+	const baseUrl = services.external.find(
+		(service) => service.text == "About us"
+	).href;
+
+	return (
+		<section aria-label="About us - dropdown navigation">
+			<h2 className="mt--0">About us</h2>
+			<p>
+				We provide national guidance and advice to improve health and social
+				care.
+			</p>
+			<Button variant="primary" to={baseUrl}>
+				View about us
+			</Button>
+			<Grid gutter="loose">
+				<GridItem cols={12} md={3}>
+					<h3 className="mt--d">Who we are</h3>
+					<ol className={classnames(styles.listUnstyled, "mt--d")}>
+						<li>
+							<a href={`${baseUrl}who-we-are/board`}>The board</a>
+						</li>
+						<li>
+							<a href={`${baseUrl}who-we-are/senior-management-team`}>
+								Executive team
+							</a>
+						</li>
+						<li>
+							<a href={`${baseUrl}who-we-are/guidance-executive`}>
+								Guidance executive
+							</a>
+						</li>
+						<li>
+							<a href={`${baseUrl}who-we-are/structure-of-nice`}>
+								Our structure
+							</a>
+						</li>
+						<li>
+							<a href={`${baseUrl}who-we-are/policies-and-procedures`}>
+								Policies and procedures
+							</a>
+						</li>
+						<li>
+							<a
+								href={`${baseUrl}who-we-are/corporate-publications/the-nice-strategy-2021-to-2026`}
+							>
+								The NICE strategy 2021 to 2026
+							</a>
+						</li>
+					</ol>
+				</GridItem>
+				<GridItem cols={12} md={3}>
+					<h3 className="mt--d">What we do</h3>
+					<ol className={classnames(styles.listUnstyled, "mt--d")}>
+						<li>
+							<a
+								href={`${baseUrl}what-we-do/our-programmes/evidence-standards-framework-for-digital-health-technologies`}
+							>
+								Digital health
+							</a>
+						</li>
+						<li>
+							<a href={`${baseUrl}what-we-do/nice-international`}>
+								NICE international
+							</a>
+						</li>
+						<li>
+							<a href={`${baseUrl}nice-communities/social-care`}>Social care</a>
+						</li>
+						<li>
+							<a href={`${baseUrl}what-we-do/life-sciences`}>Life sciences</a>
+						</li>
+						<li>
+							<a href={`${baseUrl}what-we-do/into-practice`}>Into practice</a>
+						</li>
+						<li>
+							<a
+								href={`${baseUrl}what-we-do/our-programmes/nice-guidance/nice-guidelines/shared-decision-making`}
+							>
+								Shared decision making
+							</a>
+						</li>
+					</ol>
+				</GridItem>
+				<GridItem cols={12} md={3}>
+					<h3 className="mt--d">Our programmes</h3>
+					<ol className={classnames(styles.listUnstyled, "mt--d")}>
+						<li>
+							<a href={`${baseUrl}what-we-do/our-programmes/nice-guidance`}>
+								Guidance
+							</a>
+						</li>
+						<li>
+							<a href={`${baseUrl}what-we-do/our-programmes/nice-advice`}>
+								Advice
+							</a>
+						</li>
+						<li>
+							<a href="https://www.nice.org.uk/standards-and-indicators">
+								Standards and indicators
+							</a>
+						</li>
+						<li>
+							<a href={`${baseUrl}what-we-do/our-programmes/topic-selection`}>
+								Topic selection
+							</a>
+						</li>
+						<li>
+							<a
+								href={`${baseUrl}what-we-do/our-programmes/cost-savings-resource-planning`}
+							>
+								Financial planning
+							</a>
+						</li>
+						<li>
+							<a href={`${baseUrl}what-we-do/our-programmes/patient-safety`}>
+								Patient safety
+							</a>
+						</li>
+					</ol>
+				</GridItem>
+				<GridItem cols={12} md={3}>
+					<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">
+								Register as a stakeholder
+							</a>
+						</li>
+						<li>
+							<a href="https://www.nice.org.uk/Get-Involved/Consultations">
+								Comment on a consultation
+							</a>
+						</li>
+						<li>
+							<a href="https://www.nice.org.uk/Get-Involved/our-committees">
+								Join a committee
+							</a>
+						</li>
+						<li>
+							<a href="https://www.nice.org.uk/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">
+								Public involvement
+							</a>
+						</li>
+					</ol>
+				</GridItem>
+			</Grid>
+		</section>
+	);
+}

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

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

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

@@ -1,2 +1,3 @@
 export { Guidance } from "./Guidance";
 export { More } from "./More";
+export { AboutUs } from "./AboutUs";

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, AboutUs } from "./Components/";
 import Remove from "@nice-digital/icons/lib/Remove";
 
 export function Dropdown({
@@ -15,6 +15,7 @@ export function Dropdown({
 	const components = {
 		Guidance: Guidance,
 		More: More,
+		AboutUs: AboutUs,
 	};
 	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;
 

src/Header/Nav/__snapshots__/Nav.test.jsx.snap

@@ -57,6 +57,7 @@ exports[`Nav Matches snapshot with no accounts links 1`] = `
     >
       <NavLinks
         currentService={null}
+        handleScrim={[Function]}
         servicesToDisplay={
           Array [
             Object {
@@ -121,6 +122,7 @@ exports[`Nav Matches snapshot with sub links for selected external service 1`] =
 <Nav
   accountsData={null}
   additionalSubMenuItems={Array []}
+  handleScrim={[Function]}
   isExpanded={false}
   service="link2"
 >
@@ -137,6 +139,7 @@ exports[`Nav Matches snapshot with sub links for selected external service 1`] =
       >
         <NavLinks
           currentService="link2"
+          handleScrim={[Function]}
           servicesToDisplay={
             Array [
               Object {
@@ -287,6 +290,7 @@ exports[`Nav internalServices Matches snapshot with sub links for selected inter
 <Nav
   accountsData={null}
   additionalSubMenuItems={Array []}
+  handleScrim={[Function]}
   isExpanded={false}
   service="internal1"
 >
@@ -303,6 +307,7 @@ exports[`Nav internalServices Matches snapshot with sub links for selected inter
       >
         <NavLinks
           currentService="internal1"
+          handleScrim={[Function]}
           servicesToDisplay={
             Array [
               Object {