nhsuk-decorated-components 0.3.1 → 0.4.1

package/lib/decorate.js

@@ -27,7 +27,15 @@ export function decorate(params, keyPath, componentName) {
   // Get stored value from session data, else local data
   const storedValue = _.get(data, keyPath) || _.get(this.ctx, keyPath)
 
-  params.id = params.id ? params.id : keyPath.join('-')
+  if (params.items) {
+    // If no ID explicity set, append `-items`
+    // This to prevent collision with the ID of the first item
+    params.id = params.id || `${keyPath.join('-')}-items`
+  } else {
+    // If no ID explicity set, convert keyPath to kebab-case
+    params.id = params.id || keyPath.join('-')
+  }
+
   params.name = params.name
     ? params.name
     : keyPath.map((s) => `[${s}]`).join('')
@@ -47,7 +55,7 @@ export function decorate(params, keyPath, componentName) {
   }
 
   if (params.items) {
-    params.idPrefix = params.id
+    params.idPrefix = params.idPrefix || keyPath.join('-')
     params.items = params.items
       .filter((i) => i)
       .map((item) => {
@@ -69,25 +77,28 @@ export function decorate(params, keyPath, componentName) {
           delete data.validations[params.name] // 1.
         }
 
+        // Remove appended `-items`, as not needed for date input components
+        const dateIdPrefix = params.id.replace(/-items$/, '')
+
         // Update date input items based on `decorate` value
         switch (item.decorate) {
           case 'day':
             item.classes = item.classes || 'nhsuk-input--width-2'
-            item.id = `${params.id}-day`
+            item.id = `${dateIdPrefix}-day`
             item.name = `${params.name}[day]`
             item.label = item.label || 'Day'
             item.value = storedValue?.day
             break
           case 'month':
             item.classes = item.classes || 'nhsuk-input--width-2'
-            item.id = `${params.id}-month`
+            item.id = `${dateIdPrefix}-month`
             item.name = `${params.name}[month]`
             item.label = item.label || 'Month'
             item.value = storedValue?.month
             break
           case 'year':
             item.classes = item.classes || 'nhsuk-input--width-4'
-            item.id = `${params.id}-year`
+            item.id = `${dateIdPrefix}-year`
             item.name = `${params.name}[year]`
             item.label = item.label || 'Year'
             item.value = storedValue?.year
@@ -113,13 +124,14 @@ export function decorate(params, keyPath, componentName) {
           selectedValue = item.selected
         } else if (Array.isArray(storedValue)) {
           // Stored value is an array, check it exists in the array
-          if (storedValue.indexOf(item.value) !== -1) {
+          const storedValues = storedValue.map(value => String(value))
+          if (storedValues.indexOf(String(item.value)) !== -1) {
             checkedValue = 'checked'
             selectedValue = 'selected'
           }
         } else {
           // Stored value is a simple value, check it matches
-          if (storedValue === item.value) {
+          if (String(storedValue) === String(item.value)) {
             checkedValue = 'checked'
             selectedValue = 'selected'
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nhsuk-decorated-components",
-  "version": "0.3.1",
+  "version": "0.4.1",
   "description": "Form components for the NHS.UK Design System that require less parameters to collect data",
   "keywords": [
     "nhsuk",
@@ -31,7 +31,7 @@
     "lint:fix": "npm run lint:prettier:fix && npm run lint:js:fix",
     "test": "NODE_ENV=test node --test",
     "coverage": "NODE_ENV=test node --test --experimental-test-coverage",
-    "release": "np"
+    "release": "np --no-publish"
   },
   "publishConfig": {
     "access": "public"