Enable pattern attribute for input (+ custom date input attributes)

CHANGELOG.md

@@ -20,6 +20,32 @@
 
   ([PR #N](https://github.com/alphagov/govuk-frontend/pull/N))
 
+- Enable `pattern` attribute for input
+
+  You can now set the `pattern` attribute on input fields using the component macros:
+  ```js
+  {{ govukInput({
+    name: "example",
+    pattern: "[0-9]*"
+  }) }}
+  ```
+
+  As well as `pattern`, custom attributes can also be added on day/month/year inputs (e.g. `data-example`) shown below:
+  ```js
+  {{ govukDateInput({
+    items: [
+      {
+        pattern: "[0-9]*",
+        attributes: {
+          "data-example": "value"
+        }
+      }
+    ]
+  }) }}
+  ```
+
+  ([PR #1172](https://github.com/alphagov/govuk-frontend/pull/1172))
+
 - Prevent horizontal jump as scrollbars appear
 
   As content vertical height grows (e.g. autocomplete results appear), browsers

src/components/date-input/date-input.yaml

@@ -32,10 +32,18 @@ params:
     type: string
     required: false
     description: Attribute to [identify input purpose](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html), for instance "postal-code" or "username". See [autofill](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) for full list of attributes that can be used.
+  - name: pattern
+    type: string
+    required: false
+    description: Attribute to [provide a regular expression pattern](https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute), used to match allowed character combinations for the input value.
   - name: classes
     type: string
     required: false
     description: Classes to add to date input item.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the date input tag.
 - name: hint
   type: object
   required: false
@@ -212,5 +220,30 @@ examples:
         autocomplete: bday-month
       -
         name: year
-        classes: govuk-input--width-2
+        classes: govuk-input--width-4
         autocomplete: bday-year
+- name: with input attributes
+  data:
+    id: dob-with-input-attributes
+    namePrefix: dob-with-input-attributes
+    fieldset:
+      legend:
+        text: What is your date of birth?
+    hint:
+      text: For example, 31 3 1980
+    items:
+      -
+        name: day
+        classes: govuk-input--width-2
+        attributes:
+          data-example-day: day
+      -
+        name: month
+        classes: govuk-input--width-2
+        attributes:
+          data-example-month: month
+      -
+        name: year
+        classes: govuk-input--width-4
+        attributes:
+          data-example-year: year

src/components/date-input/template.njk

@@ -67,9 +67,8 @@
         value: item.value,
         type: "number",
         autocomplete: item.autocomplete,
-        attributes: {
-          pattern: "[0-9]*"
-        }
+        pattern: item.pattern if item.pattern else "[0-9]*",
+        attributes: item.attributes
       }) | indent(6) | trim }}
     </div>
   {% endfor %}

src/components/date-input/template.test.js

@@ -76,6 +76,39 @@ describe('Date input', () => {
       expect($firstItemInput.attr('name')).toEqual('day')
     })
 
+    it('renders with item attributes', () => {
+      const $ = render('date-input', {
+        items: [
+          {
+            'name': 'day',
+            'attributes': {
+              'data-example-day': 'day'
+            }
+          },
+          {
+            'name': 'month',
+            'attributes': {
+              'data-example-month': 'month'
+            }
+          },
+          {
+            'name': 'year',
+            'attributes': {
+              'data-example-year': 'year'
+            }
+          }
+        ]
+      })
+
+      const $input1 = $('.govuk-date-input__item:nth-of-type(1) input')
+      const $input2 = $('.govuk-date-input__item:nth-of-type(2) input')
+      const $input3 = $('.govuk-date-input__item:nth-of-type(3) input')
+
+      expect($input1.attr('data-example-day')).toEqual('day')
+      expect($input2.attr('data-example-month')).toEqual('month')
+      expect($input3.attr('data-example-year')).toEqual('year')
+    })
+
     it('renders item with capitalised label text', () => {
       const $ = render('date-input', {
         items: [
@@ -121,6 +154,20 @@ describe('Date input', () => {
       expect($firstInput.attr('pattern')).toEqual('[0-9]*')
     })
 
+    it('renders inputs with custom pattern attribute', () => {
+      const $ = render('date-input', {
+        items: [
+          {
+            'name': 'day',
+            'pattern': '[0-8]*'
+          }
+        ]
+      })
+
+      const $firstInput = $('.govuk-date-input__item:first-child input')
+      expect($firstInput.attr('pattern')).toEqual('[0-8]*')
+    })
+
     it('renders item with implicit class for label', () => {
       const $ = render('date-input', {
         items: [

src/components/input/input.yaml

@@ -47,6 +47,10 @@ params:
   type: string
   required: false
   description: Attribute to [identify input purpose](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html), for instance "postal-code" or "username". See [autofill](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) for full list of attributes that can be used.
+- name: pattern
+  type: string
+  required: false
+  description: Attribute to [provide a regular expression pattern](https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute), used to match allowed character combinations for the input value.
 - name: attributes
   type: object
   required: false
@@ -162,3 +166,11 @@ examples:
       id: input-with-autocomplete-attribute
       name: postcode
       autocomplete: postal-code
+  - name: with pattern attribute
+    data:
+      label:
+        text: Numbers only
+      id: input-with-pattern-attribute
+      name: numbers-only
+      type: number
+      pattern: '[0-9]*'

src/components/input/template.njk

@@ -41,5 +41,6 @@
   {%- if params.value %} value="{{ params.value}}"{% endif %}
   {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
   {%- if params.autocomplete %} autocomplete="{{ params.autocomplete}}"{% endif %}
+  {%- if params.pattern %} pattern="{{ params.pattern }}"{% endif %}
   {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
 </div>