@nice-digital/global-nav 7.1.1097 → 7.1.1099
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +81 -80
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -14,66 +14,66 @@
|
|
|
14
14
|
<!-- START doctoc -->
|
|
15
15
|
|
|
16
16
|
- [Global navigation](#global-navigation)
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
17
|
+
- [What is it?](#what-is-it)
|
|
18
|
+
- [Functionality](#functionality)
|
|
19
|
+
- [Non-functional](#non-functional)
|
|
20
|
+
- [Stack](#stack)
|
|
21
|
+
- [Principles](#principles)
|
|
22
|
+
- [CSS Modules](#css-modules)
|
|
23
|
+
- [:rocket: Set up](#rocket-set-up)
|
|
24
|
+
- [Other commands](#other-commands)
|
|
25
|
+
- [Tests](#tests)
|
|
26
|
+
- [Run individual files](#run-individual-files)
|
|
27
|
+
- [Run individual tests](#run-individual-tests)
|
|
28
|
+
- [Linting](#linting)
|
|
29
|
+
- [Production build](#production-build)
|
|
30
|
+
- [IDE](#ide)
|
|
31
|
+
- [Extensions](#extensions)
|
|
32
|
+
- [Gotchas](#gotchas)
|
|
33
|
+
- [How to use](#how-to-use)
|
|
34
|
+
- [React](#react)
|
|
35
|
+
- [Installation](#installation)
|
|
36
|
+
- [Usage](#usage)
|
|
37
|
+
- [Props](#props)
|
|
38
|
+
- [Main props](#main-props)
|
|
39
|
+
- [Main.withPadding](#mainwithpadding)
|
|
40
|
+
- [Header props](#header-props)
|
|
41
|
+
- [Header.service](#headerservice)
|
|
42
|
+
- [Header.skipLinkId](#headerskiplinkid)
|
|
43
|
+
- [Header.renderSearchOnly](#headerrendersearchonly)
|
|
44
|
+
- [Header.onNavigating](#headeronnavigating)
|
|
45
|
+
- [Header.onResize](#headeronresize)
|
|
46
|
+
- [Header.onDropdownOpen](#headerondropdownopen)
|
|
47
|
+
- [Header.onDropdownClose](#headerondropdownclose)
|
|
48
|
+
- [Header.additionalSubMenuItems](#headeradditionalsubmenuitems)
|
|
49
|
+
- [Header.search](#headersearch)
|
|
50
|
+
- [Header.search.url](#headersearchurl)
|
|
51
|
+
- [Header.search.autocomplete](#headersearchautocomplete)
|
|
52
|
+
- [Header.search.placeholder](#headersearchplaceholder)
|
|
53
|
+
- [Header.search.query](#headersearchquery)
|
|
54
|
+
- [Header.search.onSearching](#headersearchonsearching)
|
|
55
|
+
- [Header.auth](#headerauth)
|
|
56
|
+
- [Header.auth.environment](#headerauthenvironment)
|
|
57
|
+
- [Header.auth.provider](#headerauthprovider)
|
|
58
|
+
- [Header.auth.links](#headerauthlinks)
|
|
59
|
+
- [Header.auth.displayName](#headerauthdisplayname)
|
|
60
|
+
- [Footer props](#footer-props)
|
|
61
|
+
- [Footer.service](#footerservice)
|
|
62
|
+
- [CDN](#cdn)
|
|
63
|
+
- [Container IDs](#container-ids)
|
|
64
|
+
- [Overrides](#overrides)
|
|
65
|
+
- [Configuration](#configuration)
|
|
66
|
+
- [service](#service)
|
|
67
|
+
- [header](#header)
|
|
68
|
+
- [header.onRendering](#headeronrendering)
|
|
69
|
+
- [header.onRendered](#headeronrendered)
|
|
70
|
+
- [footer](#footer)
|
|
71
|
+
- [Deployments](#deployments)
|
|
72
|
+
- [Upgrading to v2](#upgrading-to-v2)
|
|
73
|
+
- [Upgrading to v3](#upgrading-to-v3)
|
|
74
|
+
- [Upgrading to v4](#upgrading-to-v4)
|
|
75
|
+
- [Upgrading to v5](#upgrading-to-v5)
|
|
76
|
+
- [Upgrading to v6](#upgrading-to-v6)
|
|
77
77
|
|
|
78
78
|
<!-- END doctoc -->
|
|
79
79
|
</details>
|
|
@@ -162,8 +162,8 @@ Using SCSS allows us to use mixins, functions and variables from the NICE Design
|
|
|
162
162
|
|
|
163
163
|
- 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.
|
|
164
164
|
- run `npm ci` on the command line to install dependencies
|
|
165
|
-
- run `npm
|
|
166
|
-
- navigate to http://localhost:
|
|
165
|
+
- run `npm run dev` on the command line
|
|
166
|
+
- navigate to <http://localhost:3000/> in a browser.
|
|
167
167
|
|
|
168
168
|
This compiles the application and spins up a development server. It then watches for changes to files and:
|
|
169
169
|
|
|
@@ -260,7 +260,7 @@ This is a good option if you're rendering you're app's interface via React, eith
|
|
|
260
260
|
|
|
261
261
|
Install the package and require the `Header`, `Footer` and `Main` React components into your application, just as you would for any other 3rd party component:
|
|
262
262
|
|
|
263
|
-
#### Installation
|
|
263
|
+
#### Installation for new projects
|
|
264
264
|
|
|
265
265
|
First, install the _@nice-digital/global-nav_ package [from npm](https://www.npmjs.com/package/@nice-digital/global-nav) into your project:
|
|
266
266
|
|
|
@@ -292,11 +292,12 @@ const search = {
|
|
|
292
292
|
const page = () => (
|
|
293
293
|
<div>
|
|
294
294
|
<Header service="guidance" search={search} />
|
|
295
|
-
|
|
295
|
+
<Main withPadding={true} myOptionalProp={myOptionalProp} className="my-optional-class" >{/* Your page content here */} </Main>
|
|
296
296
|
<Footer />
|
|
297
297
|
</div>
|
|
298
298
|
);
|
|
299
299
|
```
|
|
300
|
+
|
|
300
301
|
Wrapping your template with the main component will render a main tag in the html with a back to top link.
|
|
301
302
|
|
|
302
303
|
For a full list of all the available props, see the [props section](#props) below:
|
|
@@ -443,6 +444,7 @@ var global_nav_config = {
|
|
|
443
444
|
},
|
|
444
445
|
};
|
|
445
446
|
```
|
|
447
|
+
|
|
446
448
|
###### Header.additionalSubMenuItems
|
|
447
449
|
|
|
448
450
|
- Type: `null | Array`
|
|
@@ -450,7 +452,7 @@ var global_nav_config = {
|
|
|
450
452
|
|
|
451
453
|
Pass an `additionalSubMenuItems` array to add extra sub menu items for a given service.
|
|
452
454
|
|
|
453
|
-
The array should be an array of objects, each containing a `service: string` and another array of `links: Array`.
|
|
455
|
+
The array should be an array of objects, each containing a `service: string` and another array of `links: Array`.
|
|
454
456
|
The links array should contain an array of `text: string` and `url: string`. E.g:
|
|
455
457
|
|
|
456
458
|
```js
|
|
@@ -518,7 +520,7 @@ The response is expected to be JSON in the format `Array<{ Title: string, TitleH
|
|
|
518
520
|
"Title": "Paracetamol",
|
|
519
521
|
"TitleHtml": "<mark>Para</mark>cetamol",
|
|
520
522
|
"Link": "/search?q=Paracetamol",
|
|
521
|
-
|
|
523
|
+
"TypeAheadType": "keyword"
|
|
522
524
|
}
|
|
523
525
|
]
|
|
524
526
|
```
|
|
@@ -527,20 +529,20 @@ Or to customise the template for autocomplete suggestions, pass an object with `
|
|
|
527
529
|
|
|
528
530
|
```jsx
|
|
529
531
|
const autocompleteOptions = {
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
532
|
+
// Suggestions can be either the name of a variable, a remote url starting with a slash or an array
|
|
533
|
+
suggestions: "/a-remote-url",
|
|
534
|
+
// Return an HTML string, for example:
|
|
535
|
+
suggestionTemplate: (suggestion) => {
|
|
536
|
+
if (!suggestion || !suggestion.Link) return "";
|
|
537
|
+
return `<a href="${suggestion.Link}">${
|
|
538
|
+
suggestion.TitleHtml || suggestion.Title
|
|
539
|
+
}</a>`;
|
|
540
|
+
}
|
|
541
|
+
};
|
|
540
542
|
|
|
541
543
|
<Header search={{
|
|
542
|
-
|
|
543
|
-
|
|
544
|
+
autocomplete: autocompleteOptions
|
|
545
|
+
}} />;
|
|
544
546
|
```
|
|
545
547
|
|
|
546
548
|
If you're using TypeScript, then you can import types e.g.:
|
|
@@ -851,7 +853,7 @@ Version 5 includes updates for the summer 2022 brand refresh. It's mostly an int
|
|
|
851
853
|
|
|
852
854
|
## Upgrading to v6
|
|
853
855
|
|
|
854
|
-
Version 6 is mostly updates of dependencies, the biggest of which was React Testing Library (from Enzyme). It also includes support for React 18 and Design System v5.
|
|
856
|
+
Version 6 is mostly updates of dependencies, the biggest of which was React Testing Library (from Enzyme). It also includes support for React 18 and Design System v5.
|
|
855
857
|
|
|
856
858
|
## Upgrading to v7
|
|
857
859
|
|
|
@@ -868,4 +870,3 @@ Migration from Webpack to Vite, a faster build tool. Vite provides improved perf
|
|
|
868
870
|
### Easier transition to TypeScript
|
|
869
871
|
|
|
870
872
|
With the migration to Vite, transitioning to TypeScript in the future will be more straightforward. Vite's TypeScript support will make the process smoother when the time comes for the project to adopt TypeScript.
|
|
871
|
-
|