GN-000 Merge npm release

README.md

@@ -184,7 +184,7 @@ Using SCSS allows us to use mixins, functions and variables from the NICE Design
 
 **TL;DR;** to run the project locally, do the following:
 
-- install [Node 10+](https://nodejs.org/en/download/) or latest LTS version
+- install [Node 14+](https://nodejs.org/en/download/) or latest LTS version. Or even better, use [Volta](https://volta.sh/) to use the Node version pinned in package.json.
 - run `npm i` on the command line to install dependencies
 - run `npm start` on the command line
 - navigate to http://localhost:8080/ in a browser.
@@ -287,14 +287,14 @@ Install the package and require the `Header` and `Footer` React components into
 
 #### Installation
 
-First, install the _@nice-digital/global-nav_ package into your project, directly from GitHub:
-
-> Note: we currently don't publish the Global Nav to npm but we plan to in the future.
+First, install the _@nice-digital/global-nav_ package [from npm](https://www.npmjs.com/package/@nice-digital/global-nav) into your project:
 
 ```sh
-npm install nice-digital/global-nav --save
+npm i @nice-digital/global-nav --save
 ```
 
+> Note: we used to recommend installing directly from GitHub via `npm i nice-digital/global-nav --save` (notice the missing _@_), which still works but we now recommend using npm.
+
 Then, require the header and/or footer into your application:
 
 #### Usage

package.json

@@ -10,7 +10,7 @@
     "start:nohot": "cross-env HOT=false webpack serve --mode development",
     "// PRODUCTION BUILDS": "",
     "build": "webpack --mode=production --config webpack.config.prod.js",
-    "es5ify": "cross-env NODE_ENV=production babel src -d lib --copy-files --no-copy-ignored --ignore \"src/**/*.test.js\",\"src/**/*.test.jsx\",\"src/setupTests.js\",\"src/polyfill/**/*.js\"",
+    "es5ify": "cross-env NODE_ENV=production babel src -d lib --extensions \".js\",\".jsx\",\".snap\" --copy-files --no-copy-ignored --ignore \"src/**/*.test.js\",\"src/**/*.test.jsx\",\"src/setupTests.js\",\"src/polyfill/**/*.js\",\"src/cdn.js\",\"src/**/*.snap\"",
     "// TESTS": "",
     "test": "npm run lint && npm run test:unit",
     "test:unit": "jest --notify",
@@ -48,7 +48,7 @@
     "access": "public"
   },
   "engines": {
-    "node": ">= 8.9"
+    "node": ">= 12"
   },
   "devDependencies": {
     "@babel/cli": "^7.13.16",
@@ -137,5 +137,8 @@
   ],
   "directories": {
     "lib": "lib"
+  },
+  "volta": {
+    "node": "14.18.1"
   }
 }

src/Footer/Footer.jsx

@@ -23,7 +23,7 @@ export class Footer extends Component {
 						className={styles.logo}
 						aria-label="Go to NICE home page"
 					>
-						{typeof SVGRect !== "undefined" && <NiceLogo />}
+						<NiceLogo />
 					</TrackedLink>
 					<Services service={this.props.service} />
 					<Pages service={this.props.service} />

src/Footer/Footer.test.jsx

@@ -10,15 +10,8 @@ describe("Legal", () => {
 		expect(wrapper).toHaveLength(1);
 	});
 
-	it("Matches snapshot with no SVG support", () => {
+	it("Matches snapshot", () => {
 		const wrapper = shallow(<Footer service="cks" />);
 		expect(toJson(wrapper)).toMatchSnapshot();
 	});
-
-	it("Matches snapshot with SVG support", () => {
-		window.SVGRect = "anything";
-		const wrapper = shallow(<Footer service="cks" />);
-		expect(toJson(wrapper)).toMatchSnapshot();
-		delete window.SVGRect;
-	});
 });

src/Footer/Social/Social.jsx

@@ -20,7 +20,7 @@ export default class Social extends Component {
 							eventAction={footerClickEventAction}
 							eventLabel="Facebook"
 						>
-							{typeof SVGRect !== "undefined" && <FacebookIcon />}
+							<FacebookIcon />
 							Facebook
 						</TrackedLink>
 					</li>
@@ -30,7 +30,7 @@ export default class Social extends Component {
 							eventAction={footerClickEventAction}
 							eventLabel="Twitter"
 						>
-							{typeof SVGRect !== "undefined" && <TwitterIcon />}
+							<TwitterIcon />
 							Twitter
 						</TrackedLink>
 					</li>
@@ -40,7 +40,7 @@ export default class Social extends Component {
 							eventAction={footerClickEventAction}
 							eventLabel="YouTube"
 						>
-							{typeof SVGRect !== "undefined" && <YouTubeIcon />}
+							<YouTubeIcon />
 							YouTube
 						</TrackedLink>
 					</li>
@@ -50,7 +50,7 @@ export default class Social extends Component {
 							eventAction={footerClickEventAction}
 							eventLabel="Instagram"
 						>
-							{typeof SVGRect !== "undefined" && <InstagramIcon />}
+							<InstagramIcon />
 							Instagram
 						</TrackedLink>
 					</li>
@@ -60,7 +60,7 @@ export default class Social extends Component {
 							eventAction={footerClickEventAction}
 							eventLabel="LinkedIn"
 						>
-							{typeof SVGRect !== "undefined" && <LinkedInIcon />}
+							<LinkedInIcon />
 							LinkedIn
 						</TrackedLink>
 					</li>

src/Footer/Social/Social.test.jsx

@@ -10,15 +10,8 @@ describe("Social", () => {
 		expect(wrapper).toHaveLength(1);
 	});
 
-	it("Matches snapshot with no SVG support", () => {
+	it("Matches snapshot", () => {
 		const wrapper = shallow(<Social />);
 		expect(toJson(wrapper)).toMatchSnapshot();
 	});
-
-	it("Matches snapshot with SVG support", () => {
-		window.SVGRect = "anything";
-		const wrapper = shallow(<Social />);
-		expect(toJson(wrapper)).toMatchSnapshot();
-		delete window.SVGRect;
-	});
 });

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Social Matches snapshot with SVG support 1`] = `
+exports[`Social Matches snapshot 1`] = `
 <div
   className="wrapper"
 >
@@ -66,65 +66,3 @@ exports[`Social Matches snapshot with SVG support 1`] = `
   </ul>
 </div>
 `;
-
-exports[`Social Matches snapshot with no SVG support 1`] = `
-<div
-  className="wrapper"
->
-  <ul
-    aria-label="NICE on social media"
-    className="list"
-  >
-    <li>
-      <TrackedLink
-        eventAction="Footer click"
-        eventCategory="TopHat and footer"
-        eventLabel="Facebook"
-        href="https://en-gb.facebook.com/NationalInstituteforHealthandCareExcellence/"
-      >
-        Facebook
-      </TrackedLink>
-    </li>
-    <li>
-      <TrackedLink
-        eventAction="Footer click"
-        eventCategory="TopHat and footer"
-        eventLabel="Twitter"
-        href="https://twitter.com/NICEcomms"
-      >
-        Twitter
-      </TrackedLink>
-    </li>
-    <li>
-      <TrackedLink
-        eventAction="Footer click"
-        eventCategory="TopHat and footer"
-        eventLabel="YouTube"
-        href="https://www.youtube.com/user/NICEmedia"
-      >
-        YouTube
-      </TrackedLink>
-    </li>
-    <li>
-      <TrackedLink
-        eventAction="Footer click"
-        eventCategory="TopHat and footer"
-        eventLabel="Instagram"
-        href="https://www.instagram.com/nicecomms/"
-      >
-        Instagram
-      </TrackedLink>
-    </li>
-    <li>
-      <TrackedLink
-        eventAction="Footer click"
-        eventCategory="TopHat and footer"
-        eventLabel="LinkedIn"
-        href="https://www.linkedin.com/company/national-institute-for-health-and-clinical-excellence"
-      >
-        LinkedIn
-      </TrackedLink>
-    </li>
-  </ul>
-</div>
-`;

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Legal Matches snapshot with SVG support 1`] = `
+exports[`Legal Matches snapshot 1`] = `
 <footer
   className="footer"
 >
@@ -28,30 +28,3 @@ exports[`Legal Matches snapshot with SVG support 1`] = `
   <Legal />
 </footer>
 `;
-
-exports[`Legal Matches snapshot with no SVG support 1`] = `
-<footer
-  className="footer"
->
-  <div
-    className="container"
-  >
-    <TrackedLink
-      aria-label="Go to NICE home page"
-      className="logo"
-      eventAction="Footer click"
-      eventCategory="TopHat and footer"
-      eventLabel="Logo"
-      href="https://www.nice.org.uk/"
-    />
-    <Services
-      service="cks"
-    />
-    <Pages
-      service="cks"
-    />
-    <Social />
-  </div>
-  <Legal />
-</footer>
-`;

src/Header/Search/Search.jsx

@@ -94,14 +94,7 @@ export default class Search extends Component {
 					aria-label="Perform search"
 					onClick={this.searchSubmitHandler}
 				>
-					{!this.state.canUseDOM || typeof window.SVGRect !== "undefined" ? (
-						<SearchIcon className={styles.icon} />
-					) : (
-						// We can remove this fallback when we drop support for IE8
-						<span className={styles.icon} aria-hidden="true">
-							search
-						</span>
-					)}
+					<SearchIcon className={styles.icon} />
 				</button>
 				<SkipLink to={`#${this.props.skipLinkId}`}>Skip to content</SkipLink>
 			</form>

src/Header/Search/Search.test.jsx

@@ -29,17 +29,10 @@ describe("Search", () => {
 			expect(toJson(wrapper)).toMatchSnapshot();
 		});
 
-		it("Renders SVG search icon when in an SVG-compatible browser", () => {
-			window.SVGRect = {};
+		it("Renders SVG search icon", () => {
 			const wrapper = shallow(<Search {...defaultProps} />);
 			expect(wrapper.find("SvgSearch").length).toEqual(1);
 			expect(wrapper.find("SvgSearch").props()).toEqual({ className: "icon" });
-			window.SVGRect = undefined;
-		});
-
-		it("Renders fallback unicode search button text when in an non SVG-compatible browser", () => {
-			const wrapper = shallow(<Search {...defaultProps} />);
-			expect(wrapper.find("button").text()).toEqual("search");
 		});
 	});
 

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

@@ -26,12 +26,9 @@ exports[`Search Rendering Matches snapshot 1`] = `
     onClick={[Function]}
     type="submit"
   >
-    <span
-      aria-hidden="true"
+    <SvgSearch
       className="icon"
-    >
-      search
-    </span>
+    />
   </button>
   <SkipLink
     to="#content-start"