Allow input type to be overridden; Update date input to use type="number"

src/date-input/README.md

@@ -37,7 +37,7 @@ Find out when to use the Date input component in your service in the [GOV.UK Des
             Day
 
           </label>
-          <input class="govuk-c-input govuk-c-date-input__input" id="dob-day" name="dob-day" type="text">
+          <input class="govuk-c-input govuk-c-date-input__input" id="dob-day" name="dob-day" type="number" pattern="[0-9]*">
           </div>
           </div>
 
@@ -46,7 +46,7 @@ Find out when to use the Date input component in your service in the [GOV.UK Des
             Month
 
           </label>
-          <input class="govuk-c-input govuk-c-date-input__input" id="dob-month" name="dob-month" type="text">
+          <input class="govuk-c-input govuk-c-date-input__input" id="dob-month" name="dob-month" type="number" pattern="[0-9]*">
           </div>
           </div>
 
@@ -55,7 +55,7 @@ Find out when to use the Date input component in your service in the [GOV.UK Des
             Year
 
           </label>
-          <input class="govuk-c-input govuk-c-date-input__input" id="dob-year" name="dob-year" type="text">
+          <input class="govuk-c-input govuk-c-date-input__input" id="dob-year" name="dob-year" type="number" pattern="[0-9]*">
           </div>
           </div>
 
@@ -115,7 +115,7 @@ Find out when to use the Date input component in your service in the [GOV.UK Des
             Day
 
           </label>
-          <input class="govuk-c-input govuk-c-date-input__input govuk-c-input--error" id="dob-errors-day" name="undefined-day" type="text">
+          <input class="govuk-c-input govuk-c-date-input__input govuk-c-input--error" id="dob-errors-day" name="undefined-day" type="number" pattern="[0-9]*">
           </div>
           </div>
 
@@ -124,7 +124,7 @@ Find out when to use the Date input component in your service in the [GOV.UK Des
             Month
 
           </label>
-          <input class="govuk-c-input govuk-c-date-input__input govuk-c-input--error" id="dob-errors-month" name="undefined-month" type="text">
+          <input class="govuk-c-input govuk-c-date-input__input govuk-c-input--error" id="dob-errors-month" name="undefined-month" type="number" pattern="[0-9]*">
           </div>
           </div>
 
@@ -133,7 +133,7 @@ Find out when to use the Date input component in your service in the [GOV.UK Des
             Year
 
           </label>
-          <input class="govuk-c-input govuk-c-date-input__input govuk-c-input--error" id="dob-errors-year" name="undefined-year" type="text">
+          <input class="govuk-c-input govuk-c-date-input__input govuk-c-input--error" id="dob-errors-year" name="undefined-year" type="number" pattern="[0-9]*">
           </div>
           </div>
 
@@ -195,7 +195,7 @@ Find out when to use the Date input component in your service in the [GOV.UK Des
             Day
 
           </label>
-          <input class="govuk-c-input govuk-c-date-input__input govuk-c-input--error" id="dob-day-error-day" name="dob-day-error-day" type="text">
+          <input class="govuk-c-input govuk-c-date-input__input govuk-c-input--error" id="dob-day-error-day" name="dob-day-error-day" type="number" pattern="[0-9]*">
           </div>
           </div>
 
@@ -204,7 +204,7 @@ Find out when to use the Date input component in your service in the [GOV.UK Des
             Month
 
           </label>
-          <input class="govuk-c-input govuk-c-date-input__input" id="dob-day-error-month" name="dob-day-error-month" type="text">
+          <input class="govuk-c-input govuk-c-date-input__input" id="dob-day-error-month" name="dob-day-error-month" type="number" pattern="[0-9]*">
           </div>
           </div>
 
@@ -213,7 +213,7 @@ Find out when to use the Date input component in your service in the [GOV.UK Des
             Year
 
           </label>
-          <input class="govuk-c-input govuk-c-date-input__input" id="dob-day-error-year" name="dob-day-error-year" type="text">
+          <input class="govuk-c-input govuk-c-date-input__input" id="dob-day-error-year" name="dob-day-error-year" type="number" pattern="[0-9]*">
           </div>
           </div>
 
@@ -274,7 +274,7 @@ Find out when to use the Date input component in your service in the [GOV.UK Des
             Day
 
           </label>
-          <input class="govuk-c-input govuk-c-date-input__input" id="dob-month-error-day" name="dob-month-error-day" type="text">
+          <input class="govuk-c-input govuk-c-date-input__input" id="dob-month-error-day" name="dob-month-error-day" type="number" pattern="[0-9]*">
           </div>
           </div>
 
@@ -283,7 +283,7 @@ Find out when to use the Date input component in your service in the [GOV.UK Des
             Month
 
           </label>
-          <input class="govuk-c-input govuk-c-date-input__input govuk-c-input--error" id="dob-month-error-month" name="dob-month-error-month" type="text">
+          <input class="govuk-c-input govuk-c-date-input__input govuk-c-input--error" id="dob-month-error-month" name="dob-month-error-month" type="number" pattern="[0-9]*">
           </div>
           </div>
 
@@ -292,7 +292,7 @@ Find out when to use the Date input component in your service in the [GOV.UK Des
             Year
 
           </label>
-          <input class="govuk-c-input govuk-c-date-input__input" id="dob-month-error-year" name="dob-month-error-year" type="text">
+          <input class="govuk-c-input govuk-c-date-input__input" id="dob-month-error-year" name="dob-month-error-year" type="number" pattern="[0-9]*">
           </div>
           </div>
 
@@ -353,7 +353,7 @@ Find out when to use the Date input component in your service in the [GOV.UK Des
             Day
 
           </label>
-          <input class="govuk-c-input govuk-c-date-input__input" id="dob-year-error-day" name="dob-year-error-day" type="text">
+          <input class="govuk-c-input govuk-c-date-input__input" id="dob-year-error-day" name="dob-year-error-day" type="number" pattern="[0-9]*">
           </div>
           </div>
 
@@ -362,7 +362,7 @@ Find out when to use the Date input component in your service in the [GOV.UK Des
             Month
 
           </label>
-          <input class="govuk-c-input govuk-c-date-input__input" id="dob-year-error-month" name="dob-year-error-month" type="text">
+          <input class="govuk-c-input govuk-c-date-input__input" id="dob-year-error-month" name="dob-year-error-month" type="number" pattern="[0-9]*">
           </div>
           </div>
 
@@ -371,7 +371,7 @@ Find out when to use the Date input component in your service in the [GOV.UK Des
             Year
 
           </label>
-          <input class="govuk-c-input govuk-c-date-input__input govuk-c-input--error" id="dob-year-error-year" name="dob-year-error-year" type="text">
+          <input class="govuk-c-input govuk-c-date-input__input govuk-c-input--error" id="dob-year-error-year" name="dob-year-error-year" type="number" pattern="[0-9]*">
           </div>
           </div>
 

src/date-input/template.njk

@@ -16,7 +16,11 @@
         "id": params.id + "-" + item.name,
         "classes": "govuk-c-date-input__input" + (" " + item.classes if item.classes),
         "name": params.name + "-" + item.name,
-        "value": item.value
+        "value": item.value,
+        "type": "number",
+        "attributes": {
+          "pattern": "[0-9]*"
+        }
       }) | indent(4) | trim }}
     </div>
   {% endfor %}

src/date-input/template.test.js

@@ -82,6 +82,32 @@ describe('Date input', () => {
       expect($firstItems.text().trim()).toEqual('Day')
     })
 
+    it('renders inputs with type="number"', () => {
+      const $ = render('date-input', {
+        items: [
+          {
+            'name': 'day'
+          }
+        ]
+      })
+
+      const $firstInput = $('.govuk-c-date-input__item:first-child input')
+      expect($firstInput.attr('type')).toEqual('number')
+    })
+
+    it('renders inputs with pattern="[0-9]*" to trigger numeric keypad on iOS', () => {
+      const $ = render('date-input', {
+        items: [
+          {
+            'name': 'day'
+          }
+        ]
+      })
+
+      const $firstInput = $('.govuk-c-date-input__item:first-child input')
+      expect($firstInput.attr('pattern')).toEqual('[0-9]*')
+    })
+
     it('renders item with implicit class for label', () => {
       const $ = render('date-input', {
         items: [

src/input/README.md

@@ -182,6 +182,18 @@ If you are using Nunjucks,then macros take the following arguments
 
 <tr class="govuk-c-table__row">
 
+<th class="govuk-c-table__header" scope="row">type</th>
+
+<td class="govuk-c-table__cell ">string</td>
+
+<td class="govuk-c-table__cell ">No</td>
+
+<td class="govuk-c-table__cell ">Type of input control to render. Defaults to "text"</td>
+
+</tr>
+
+<tr class="govuk-c-table__row">
+
 <th class="govuk-c-table__header" scope="row">label</th>
 
 <td class="govuk-c-table__cell ">object</td>

src/input/index.njk

@@ -79,6 +79,20 @@
         text: 'The name of the input, which is submitted with the form data'
       }
     ],
+    [
+      {
+        text: 'type'
+      },
+      {
+        text: 'string'
+      },
+      {
+        text: 'No'
+      },
+      {
+        text: 'Type of input control to render. Defaults to "text"'
+      }
+    ],
     [
       {
         text: 'label'

src/input/template.njk

@@ -13,7 +13,7 @@
     for: params.id
   }) -}}
 
-  <input class="govuk-c-input {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} govuk-c-input--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="text"
+  <input class="govuk-c-input {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} govuk-c-input--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="{{ params.type | default('text') }}"
   {%- if params.value %} value="{{ params.value}}"{% endif %}
   {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
 </div>

src/input/template.test.js

@@ -42,13 +42,22 @@ describe('Input', () => {
       expect($component.attr('name')).toEqual('my-input-name')
     })
 
-    it('renders with type="text"', () => {
+    it('renders with type="text" by default', () => {
       const $ = render('input')
 
       const $component = $('.govuk-c-input')
       expect($component.attr('type')).toEqual('text')
     })
 
+    it('allows you to override the type', () => {
+      const $ = render('input', {
+        type: 'number'
+      })
+
+      const $component = $('.govuk-c-input')
+      expect($component.attr('type')).toEqual('number')
+    })
+
     it('renders with value', () => {
       const $ = render('input', {
         value: 'QQ 12 34 56 C'