Allow values to be set as an object for custom items

Thanks @edwardhorsford for the suggestion!
nhsuk · Aug 20, 2024 · 8a70305 · 8a70305
1 parent 6e8a979
commit 8a70305
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 1 deletion.
diff --git a/app/components/date-input/month-and-year-with-values.njk b/app/components/date-input/month-and-year-with-values.njk
@@ -0,0 +1,45 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Date input' %}
+{% from 'components/date-input/macro.njk' import dateInput %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+  <div class="nhsuk-width-container">
+    <main class="nhsuk-main-wrapper" id="maincontent">
+
+      <div class="nhsuk-grid-row">
+        <div class="nhsuk-grid-column-two-thirds">
+          {{ dateInput({
+            "id": "dob",
+            "namePrefix": "dob",
+            "fieldset": {
+              "legend": {
+                "text": "When did you start your job?"
+              }
+            },
+            "hint": {
+              "text": "For example, 11 2023"
+            },
+            values: {
+              month: "8",
+              year: "2024"
+            },
+            "items": [
+              {
+                "name": "month",
+                "classes": "nhsuk-input--width-2"
+              },
+              {
+                "name": "year",
+                "classes": "nhsuk-input--width-4"
+              }
+            ]
+          }) }}
+        </div>
+      </div>
+
+    </main>
+  </div>
+
+{% endblock %}
diff --git a/app/pages/examples.njk b/app/pages/examples.njk
@@ -61,6 +61,7 @@
     <li><a href="../components/date-input/error.html">Date input with error</a></li>
     <li><a href="../components/date-input/multiple-errors.html">Date input with multiple errors</a></li>
     <li><a href="../components/date-input/with-values.html">Date input with values</a></li>
+    <li><a href="../components/date-input/month-and-year-with-values.html">Date (month and year) input with values</a></li>
     <li><a href="../components/details/index.html">Details</a></li>
     <li><a href="../components/do-dont-list/index.html">Do and Don't list</a></li>
     <li><a href="../components/error-message/index.html">Error message</a></li>

diff --git a/packages/components/date-input/template.njk b/packages/components/date-input/template.njk
@@ -67,7 +67,7 @@
         id: item.id if item.id else (params.id + "-" + item.name),
         classes: "nhsuk-date-input__input " + (item.classes if item.classes),
         name: (params.namePrefix + "[" + item.name + "]") if params.namePrefix else item.name,
-        value: item.value,
+        value: item.value or params.values[item.name],
         inputmode: item.inputmode if item.inputmode else "numeric",
         autocomplete: item.autocomplete,
         pattern: item.pattern,