nhsuk-decorated-components 0.0.5 → 0.0.6

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.
Files changed (3) hide show
  1. package/README.md +38 -28
  2. package/lib/decorate.js +83 -78
  3. package/package.json +22 -17
package/README.md CHANGED
@@ -1,14 +1,15 @@
1
1
  # NHS.UK Decorated Components · [![test](https://github.com/x-govuk/nhsuk-decorated-components/actions/workflows/test.yml/badge.svg)](https://github.com/x-govuk/nhsuk-decorated-components/actions/workflows/test.yml)
2
2
 
3
- Form components for the NHS.UK Design System that require less parameters to collect data. [Replace the multiple parameters needed for saving data with a single `decorate` parameter](https://x-govuk.github.io/nhsuk-prototype-rig/using-data/form-components/).
3
+ Form components for the NHS.UK Design System that require less parameters to collect data. [Replace the multiple parameters needed for saving data with a single `decorate` parameter](https://x-govuk.github.io/govuk-prototype-rig/using-data/form-components/).
4
4
 
5
5
  ## Requirements
6
6
 
7
- Node.js v16 or later.
7
+ Node.js v20 or later.
8
8
 
9
9
  ## Installation
10
10
 
11
- > **Note** These components are included by default with the [NHS.UK Prototype Rig](https://x-govuk.github.io/nhsuk-prototype-rig/).
11
+ > [!NOTE]
12
+ > These components are included by default with the [NHS.UK Prototype Rig](https://x-govuk.github.io/nhsuk-prototype-rig/).
12
13
 
13
14
  ```shell
14
15
  npm install nhsuk-decorated-components --save
@@ -20,36 +21,45 @@ To add them to the NHS.UK Prototype Kit, follow these steps:
20
21
 
21
22
  1. Add `/node_modules/nhsuk-decorated-components` to your application’s views (`appViews`) in `server.js`:
22
23
 
23
- ```diff
24
- // Set up App
25
- var appViews = extensions.getAppViews([
26
- + path.join(projectDir, '/node_modules/nhsuk-decorated-components'),
27
- path.join(projectDir, '/app/views/'),
28
- path.join(projectDir, '/lib/')
29
- ])
30
- ```
24
+ ```diff
25
+ // Set up App
26
+ var appViews = extensions.getAppViews([
27
+ + path.join(projectDir, '/node_modules/nhsuk-decorated-components'),
28
+ path.join(projectDir, '/app/views/'),
29
+ path.join(projectDir, '/lib/')
30
+ ])
31
+ ```
31
32
 
32
33
  2. Add the `decorate` global function to your Nunjucks environment (`nunjucksAppEnv`) in `server.js`:
33
34
 
34
- ```diff
35
- var nunjucksAppEnv = nunjucks.configure(appViews, nunjucksConfig)
35
+ ```diff
36
+ var nunjucksAppEnv = nunjucks.configure(appViews, nunjucksConfig)
36
37
 
37
- // Add Nunjucks Globals
38
- + const { decorate } = require('nhsuk-decorated-components')
39
- + nunjucksAppEnv.addGlobal('decorate', decorate)
38
+ // Add Nunjucks Globals
39
+ + const { decorate } = require('nhsuk-decorated-components')
40
+ + nunjucksAppEnv.addGlobal('decorate', decorate)
40
41
 
41
- // Add Nunjucks filters
42
- utils.addNunjucksFilters(nunjucksAppEnv)
43
- ```
42
+ // Add Nunjucks filters
43
+ utils.addNunjucksFilters(nunjucksAppEnv)
44
+ ```
44
45
 
45
46
  3. Replace imported NHS.UK Frontend macros with those provided by this package:
46
47
 
47
- ```diff
48
- + {% from "x-nhsuk/decorated/button/macro.njk" import button with context %}
49
- + {% from "x-nhsuk/decorated/checkboxes/macro.njk" import checkboxes with context %}
50
- + {% from "x-nhsuk/decorated/date-input/macro.njk" import dateInput with context %}
51
- + {% from "x-nhsuk/decorated/input/macro.njk" import input with context %}
52
- + {% from "x-nhsuk/decorated/radios/macro.njk" import radios with context %}
53
- + {% from "x-nhsuk/decorated/select/macro.njk" import select with context %}
54
- + {% from "x-nhsuk/decorated/textarea/macro.njk" import textarea with context %}
55
- ```
48
+ ```diff
49
+ + {% from "x-nhsuk/decorated/button/macro.njk" import button with context %}
50
+ + {% from "x-nhsuk/decorated/checkboxes/macro.njk" import checkboxes with context %}
51
+ + {% from "x-nhsuk/decorated/date-input/macro.njk" import dateInput with context %}
52
+ + {% from "x-nhsuk/decorated/input/macro.njk" import input with context %}
53
+ + {% from "x-nhsuk/decorated/radios/macro.njk" import radios with context %}
54
+ + {% from "x-nhsuk/decorated/select/macro.njk" import select with context %}
55
+ + {% from "x-nhsuk/decorated/textarea/macro.njk" import textarea with context %}
56
+ ```
57
+
58
+ ## Releasing a new version
59
+
60
+ `npm run release`
61
+
62
+ This command will ask you what version you want to use. It will then publish a new version on NPM, create and push a new git tag and then generate release notes ready for posting on GitHub.
63
+
64
+ > [!NOTE]
65
+ > Releasing a new version requires permission to publish packages to the `@x-govuk` organisation.
package/lib/decorate.js CHANGED
@@ -15,22 +15,25 @@ exports.decorate = function (params, keyPath, componentName) {
15
15
  return params
16
16
  }
17
17
 
18
- keyPath = _.toPath(keyPath)
19
-
20
18
  const { data, errors } = this.ctx
21
- if (!data) {
22
- return ''
23
- }
19
+
20
+ keyPath = _.toPath(keyPath)
24
21
 
25
22
  // Strip data from key path as auto store data middleware adds it
26
23
  if (keyPath[0] === 'data') {
27
24
  keyPath.shift(1)
28
25
  }
29
26
 
30
- const storedValue = _.get(data, keyPath)
27
+ // Get stored value from session data, else local data
28
+ const storedValue = _.get(data, keyPath) || _.get(this.ctx, keyPath)
29
+ if (!storedValue) {
30
+ return ''
31
+ }
31
32
 
32
- params.id = (params.id) ? params.id : keyPath.join('-')
33
- params.name = (params.name) ? params.name : keyPath.map(s => `[${s}]`).join('')
33
+ params.id = params.id ? params.id : keyPath.join('-')
34
+ params.name = params.name
35
+ ? params.name
36
+ : keyPath.map((s) => `[${s}]`).join('')
34
37
 
35
38
  // Add field validations to data
36
39
  if (params.validate) {
@@ -48,82 +51,84 @@ exports.decorate = function (params, keyPath, componentName) {
48
51
 
49
52
  if (params.items) {
50
53
  params.idPrefix = params.id
51
- params.items = params.items.filter(i => i).map(item => {
52
- // Ignore dividers or empty items
53
- if (item.divider || item === '') {
54
- return item
55
- }
56
-
57
- // Validate dates
58
- // ==============
59
- // We want to validate a combined date, but validate.js validates
60
- // individual fields. The custom `date` validator hooks into the year
61
- // value and gets day and month values via its `attributes` object.
62
- //
63
- // 1. Delete `validations` for all date fields
64
- // 2. Add `validations` for year field
65
-
66
- if (item.decorate && data.validations) {
67
- delete data.validations[params.name] // 1.
68
- }
69
-
70
- // Update date input items based on `decorate` value
71
- switch (item.decorate) {
72
- case 'day':
73
- item.classes = item.classes || 'nhsuk-input--width-2'
74
- item.id = `${params.id}-day`
75
- item.name = `${params.name}[day]`
76
- item.label = item.label || 'Day'
77
- item.value = storedValue?.day
78
- break
79
- case 'month':
80
- item.classes = item.classes || 'nhsuk-input--width-2'
81
- item.id = `${params.id}-month`
82
- item.name = `${params.name}[month]`
83
- item.label = item.label || 'Month'
84
- item.value = storedValue?.month
85
- break
86
- case 'year':
87
- item.classes = item.classes || 'nhsuk-input--width-4'
88
- item.id = `${params.id}-year`
89
- item.name = `${params.name}[year]`
90
- item.label = item.label || 'Year'
91
- item.value = storedValue?.year
92
-
93
- if (params.validate && data.validations) {
94
- data.validations[item.name] = params.validate // 2.
95
- }
96
-
97
- break
98
- default:
99
- // Use label text if no value given for option
100
- if (typeof item.value === 'undefined') {
101
- item.value = item.text
102
- }
103
- }
54
+ params.items = params.items
55
+ .filter((i) => i)
56
+ .map((item) => {
57
+ // Ignore dividers or empty items
58
+ if (item.divider || item === '') {
59
+ return item
60
+ }
104
61
 
105
- let checkedValue = ''
106
- let selectedValue = ''
62
+ // Validate dates
63
+ // ==============
64
+ // We want to validate a combined date, but validate.js validates
65
+ // individual fields. The custom `date` validator hooks into the year
66
+ // value and gets day and month values via its `attributes` object.
67
+ //
68
+ // 1. Delete `validations` for all date fields
69
+ // 2. Add `validations` for year field
70
+
71
+ if (item.decorate && data.validations) {
72
+ delete data.validations[params.name] // 1.
73
+ }
107
74
 
108
- if (Array.isArray(storedValue)) {
109
- // Stored value is an array, check it exists in the array
110
- if (storedValue.indexOf(item.value) !== -1) {
111
- checkedValue = 'checked'
112
- selectedValue = 'selected'
75
+ // Update date input items based on `decorate` value
76
+ switch (item.decorate) {
77
+ case 'day':
78
+ item.classes = item.classes || 'nhsuk-input--width-2'
79
+ item.id = `${params.id}-day`
80
+ item.name = `${params.name}[day]`
81
+ item.label = item.label || 'Day'
82
+ item.value = storedValue?.day
83
+ break
84
+ case 'month':
85
+ item.classes = item.classes || 'nhsuk-input--width-2'
86
+ item.id = `${params.id}-month`
87
+ item.name = `${params.name}[month]`
88
+ item.label = item.label || 'Month'
89
+ item.value = storedValue?.month
90
+ break
91
+ case 'year':
92
+ item.classes = item.classes || 'nhsuk-input--width-4'
93
+ item.id = `${params.id}-year`
94
+ item.name = `${params.name}[year]`
95
+ item.label = item.label || 'Year'
96
+ item.value = storedValue?.year
97
+
98
+ if (params.validate && data.validations) {
99
+ data.validations[item.name] = params.validate // 2.
100
+ }
101
+
102
+ break
103
+ default:
104
+ // Use label text if no value given for option
105
+ if (typeof item.value === 'undefined') {
106
+ item.value = item.text
107
+ }
113
108
  }
114
- } else {
115
- // Stored value is a simple value, check it matches
116
- if (storedValue === item.value) {
117
- checkedValue = 'checked'
118
- selectedValue = 'selected'
109
+
110
+ let checkedValue = ''
111
+ let selectedValue = ''
112
+
113
+ if (Array.isArray(storedValue)) {
114
+ // Stored value is an array, check it exists in the array
115
+ if (storedValue.indexOf(item.value) !== -1) {
116
+ checkedValue = 'checked'
117
+ selectedValue = 'selected'
118
+ }
119
+ } else {
120
+ // Stored value is a simple value, check it matches
121
+ if (storedValue === item.value) {
122
+ checkedValue = 'checked'
123
+ selectedValue = 'selected'
124
+ }
119
125
  }
120
- }
121
126
 
122
- item.checked = checkedValue
123
- item.selected = selectedValue
127
+ item.checked = checkedValue
128
+ item.selected = selectedValue
124
129
 
125
- return item
126
- })
130
+ return item
131
+ })
127
132
  } else {
128
133
  // Check for undefined because value may exist and be intentionally blank
129
134
  if (typeof params.value === 'undefined') {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "nhsuk-decorated-components",
3
- "version": "0.0.5",
3
+ "version": "0.0.6",
4
4
  "description": "Form components for the NHS.UK Design System that require less parameters to collect data",
5
5
  "keywords": [
6
6
  "nhsuk",
@@ -23,10 +23,15 @@
23
23
  "url": "https://github.com/x-govuk/nhsuk-decorated-components.git"
24
24
  },
25
25
  "scripts": {
26
- "lint": "standard",
27
- "test": "ava",
28
- "test:watch": "ava --watch",
29
- "coverage": "c8 ava"
26
+ "lint:prettier": "prettier . --check",
27
+ "lint:prettier:fix": "prettier . --write",
28
+ "lint:js": "eslint '**/*.js'",
29
+ "lint:js:fix": "eslint '**/*.js' --fix",
30
+ "lint": "npm run lint:prettier && npm run lint:js",
31
+ "lint:fix": "npm run lint:prettier:fix && npm run lint:js:fix",
32
+ "test": "NODE_ENV=test node --test",
33
+ "coverage": "NODE_ENV=test node --test --experimental-test-coverage",
34
+ "release": "np"
30
35
  },
31
36
  "publishConfig": {
32
37
  "access": "public"
@@ -35,19 +40,19 @@
35
40
  "lodash": "^4.17.21"
36
41
  },
37
42
  "devDependencies": {
38
- "ava": "^4.0.1",
39
- "c8": "^7.11.0",
40
- "nhsuk-frontend": "^6.1.2",
41
- "nunjucks": "^3.2.3",
42
- "standard": "^17.0.0"
43
+ "eslint": "^8.56.0",
44
+ "eslint-config-prettier": "^9.1.0",
45
+ "eslint-config-standard": "^17.1.0",
46
+ "eslint-plugin-import": "^2.29.1",
47
+ "eslint-plugin-jsdoc": "^48.0.6",
48
+ "eslint-plugin-n": "^16.6.2",
49
+ "eslint-plugin-prettier": "^5.1.3",
50
+ "eslint-plugin-promise": "^6.1.1",
51
+ "nhsuk-frontend": "^8.0.0",
52
+ "np": "^9.2.0",
53
+ "nunjucks": "^3.2.3"
43
54
  },
44
55
  "engines": {
45
- "node": ">=16.0.0"
46
- },
47
- "c8": {
48
- "reporter": [
49
- "text",
50
- "lcovonly"
51
- ]
56
+ "node": ">=20"
52
57
  }
53
58
  }