diff --git a/README.md b/README.md
index d592bb3a..5b7d8f5b 100644
--- a/README.md
+++ b/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
diff --git a/package.json b/package.json
index 51f97783..9db0a120 100644
--- a/package.json
+++ b/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"
}
}
diff --git a/src/Footer/Footer.jsx b/src/Footer/Footer.jsx
index 41b70bba..3d9309d2 100644
--- a/src/Footer/Footer.jsx
+++ b/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" && }
+
diff --git a/src/Footer/Footer.test.jsx b/src/Footer/Footer.test.jsx
index 0ddcc59e..94e4adfb 100644
--- a/src/Footer/Footer.test.jsx
+++ b/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();
expect(toJson(wrapper)).toMatchSnapshot();
});
-
- it("Matches snapshot with SVG support", () => {
- window.SVGRect = "anything";
- const wrapper = shallow();
- expect(toJson(wrapper)).toMatchSnapshot();
- delete window.SVGRect;
- });
});
diff --git a/src/Footer/Social/Social.jsx b/src/Footer/Social/Social.jsx
index 2080cab3..f9b4c9fa 100644
--- a/src/Footer/Social/Social.jsx
+++ b/src/Footer/Social/Social.jsx
@@ -20,7 +20,7 @@ export default class Social extends Component {
eventAction={footerClickEventAction}
eventLabel="Facebook"
>
- {typeof SVGRect !== "undefined" && }
+
Facebook
@@ -30,7 +30,7 @@ export default class Social extends Component {
eventAction={footerClickEventAction}
eventLabel="Twitter"
>
- {typeof SVGRect !== "undefined" && }
+
Twitter
@@ -40,7 +40,7 @@ export default class Social extends Component {
eventAction={footerClickEventAction}
eventLabel="YouTube"
>
- {typeof SVGRect !== "undefined" && }
+
YouTube
@@ -50,7 +50,7 @@ export default class Social extends Component {
eventAction={footerClickEventAction}
eventLabel="Instagram"
>
- {typeof SVGRect !== "undefined" && }
+
Instagram
@@ -60,7 +60,7 @@ export default class Social extends Component {
eventAction={footerClickEventAction}
eventLabel="LinkedIn"
>
- {typeof SVGRect !== "undefined" && }
+
LinkedIn
diff --git a/src/Footer/Social/Social.test.jsx b/src/Footer/Social/Social.test.jsx
index b9165cda..a0b8b984 100644
--- a/src/Footer/Social/Social.test.jsx
+++ b/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();
expect(toJson(wrapper)).toMatchSnapshot();
});
-
- it("Matches snapshot with SVG support", () => {
- window.SVGRect = "anything";
- const wrapper = shallow();
- expect(toJson(wrapper)).toMatchSnapshot();
- delete window.SVGRect;
- });
});
diff --git a/src/Footer/Social/__snapshots__/Social.test.jsx.snap b/src/Footer/Social/__snapshots__/Social.test.jsx.snap
index 8b5492d0..d18e2148 100644
--- a/src/Footer/Social/__snapshots__/Social.test.jsx.snap
+++ b/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`] = `
@@ -66,65 +66,3 @@ exports[`Social Matches snapshot with SVG support 1`] = `
`;
-
-exports[`Social Matches snapshot with no SVG support 1`] = `
-
-
- -
-
- Facebook
-
-
- -
-
- Twitter
-
-
- -
-
- YouTube
-
-
- -
-
- Instagram
-
-
- -
-
- LinkedIn
-
-
-
-
-`;
diff --git a/src/Footer/__snapshots__/Footer.test.jsx.snap b/src/Footer/__snapshots__/Footer.test.jsx.snap
index 22c501c3..0e6f49db 100644
--- a/src/Footer/__snapshots__/Footer.test.jsx.snap
+++ b/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`] = `
`;
-
-exports[`Legal Matches snapshot with no SVG support 1`] = `
-
-`;
diff --git a/src/Header/Search/Search.jsx b/src/Header/Search/Search.jsx
index c98d9578..a28d18f3 100644
--- a/src/Header/Search/Search.jsx
+++ b/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" ? (
-
- ) : (
- // We can remove this fallback when we drop support for IE8
-
- search
-
- )}
+
Skip to content
diff --git a/src/Header/Search/Search.test.jsx b/src/Header/Search/Search.test.jsx
index 1b8d35cc..199dfe96 100644
--- a/src/Header/Search/Search.test.jsx
+++ b/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();
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();
- expect(wrapper.find("button").text()).toEqual("search");
});
});
diff --git a/src/Header/Search/__snapshots__/Search.test.jsx.snap b/src/Header/Search/__snapshots__/Search.test.jsx.snap
index cac3cd49..a91274ab 100644
--- a/src/Header/Search/__snapshots__/Search.test.jsx.snap
+++ b/src/Header/Search/__snapshots__/Search.test.jsx.snap
@@ -26,12 +26,9 @@ exports[`Search Rendering Matches snapshot 1`] = `
onClick={[Function]}
type="submit"
>
-
- search
-
+ />