From 8a703057b4ed3bbf64fabd2d55dcb5296bcc1aa7 Mon Sep 17 00:00:00 2001
From: Frankie Roberto <frankie@frankieroberto.com>
Date: Tue, 20 Aug 2024 18:47:33 +0100
Subject: [PATCH] Allow values to be set as an object for custom items

Thanks @edwardhorsford for the suggestion!
---
 .../date-input/month-and-year-with-values.njk | 45 +++++++++++++++++++
 app/pages/examples.njk                        |  1 +
 packages/components/date-input/template.njk   |  2 +-
 3 files changed, 47 insertions(+), 1 deletion(-)
 create mode 100644 app/components/date-input/month-and-year-with-values.njk

diff --git a/app/components/date-input/month-and-year-with-values.njk b/app/components/date-input/month-and-year-with-values.njk
new file mode 100644
index 000000000..9cf6f56b6
--- /dev/null
+++ 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
index a258adedb..970553246 100644
--- 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
index 26e819ae7..514554147 100644
--- 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,