GN-106 About us content

.vscode/settings.json

@@ -24,10 +24,10 @@
     "lib": true
   },
   "workbench.colorCustomizations": {
-    "activityBar.background": "#493657",
-    "activityBar.foreground": "#FFFFFF",
-    "titleBar.activeBackground": "#493657",
-    "titleBar.activeForeground": "#FFFFFF"
+    "activityBar.background": "#8f4e4d",
+    "activityBar.foreground": "#FFFDE1",
+    "titleBar.activeBackground": "#8f4e4d",
+    "titleBar.activeForeground": "#FFFDE1"
   },
   "omnisharp.autoStart": false
 }

package.json

@@ -61,6 +61,7 @@
     "@babel/plugin-transform-runtime": "^7.14.2",
     "@babel/preset-env": "^7.14.2",
     "@babel/preset-react": "^7.13.13",
+    "@nice-digital/design-system": "^1.2.17",
     "@nice-digital/eslint-config": "^1.0.3",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
     "autoprefixer": "^10.2.5",
@@ -127,6 +128,7 @@
     "es5-polyfill": "0.0.6",
     "js-cookie": "^2.2.1",
     "prop-types": "^15.7.2",
+    "react-shadow-root": "^6.1.0",
     "unfetch": "^4.2.0"
   },
   "files": [

src/Footer/Footer.module.scss

@@ -11,6 +11,8 @@
   content-visibility: auto; /* stylelint-disable-line */
   font-family: unquote($nds-font-family-sans);
   margin: rem($nds-spacing-large 0 0 0);
+  position: relative;
+  z-index: 1;
 
   *,
   *:before,

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

@@ -16,10 +16,10 @@ exports[`Services Matches snapshot 1`] = `
         className="link"
         eventAction="Footer click"
         eventCategory="TopHat and footer"
-        eventLabel="NICE guidance"
-        href="https://www.nice.org.uk/guidance"
+        eventLabel="Guidance"
+        href="https://www.nice.org.uk/guidance/"
       >
-        NICE guidance
+        Guidance
       </TrackedLink>
     </li>
     <li
@@ -154,6 +154,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/Account/Account.jsx

@@ -62,7 +62,6 @@ export default class Account extends Component {
 		let megaMenu = document.querySelector("#header-menu");
 
 		if (megaMenu.contains(event.target)) {
-			event.preventDefault();
 			this.setState({
 				isExpanded: false,
 			});

src/Header/Account/Account.module.scss

@@ -62,7 +62,7 @@
   position: absolute;
   right: 0;
   top: 100%;
-  z-index: 2;
+  z-index: 1;
 
   // We move focus when we expand via keyboard navigation
   &:focus {

src/Header/Header.module.scss

@@ -5,6 +5,8 @@
   border-bottom: rem($nds-spacing-xx-small) solid $nds-colour-nice-teal;
   box-sizing: border-box;
   font-family: unquote($nds-font-family-sans);
+  position: relative;
+  z-index: 2;
 
   *,
   *:before,
@@ -119,6 +121,19 @@
 }
 
 @include mq($from: md) {
+  .scrim {
+    background: rgba(0, 0, 0, 70%);
+    display: block;
+    left: 0;
+    margin-top: rem($search-height) + rem($nds-spacing-large);
+    min-height: 100vh;
+    overflow: hidden;
+    position: fixed;
+    top: 0;
+    width: 100vw;
+    z-index: 2;
+  }
+
   .header {
     border-bottom: rem($nds-spacing-x-small) solid $nds-colour-body;
   }
@@ -133,16 +148,6 @@
     margin-right: rem($nds-spacing-large);
   }
 
-  .scrim {
-    background: rgba(0, 0, 0, 70%);
-    display: block;
-    height: 100vh;
-    left: 0;
-    margin-top: rem($search-height) + rem($nds-spacing-large);
-    position: absolute;
-    width: 100vw;
-  }
-
   .wrapper {
     justify-content: flex-end;
   }

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

@@ -0,0 +1,169 @@
+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="cta" to={baseUrl}>
+				Explore 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

@@ -1,4 +1,5 @@
 @import '~@nice-digital/nds-core/scss/core';
+@import '~@nice-digital/design-system/scss/typography/typography-lists';
 
 .listUnstyled {
   @include nds-list;
@@ -59,6 +60,10 @@
   }
 }
 
+.listPiped {
+  @extend .list--piped;
+}
+
 // The buttons kept dancing on the BNF
 html body a.btn,
 html body button.btn {