add test add example

packages/govuk-frontend/src/govuk/components/input/input.yaml

@@ -139,23 +139,6 @@ params:
     type: boolean
     required: false
     description: Optional field to enable or disable the `spellcheck` attribute on the input.
-  - name: autocapitalize
-    type: string
-    required: false
-    description: Optional field to enable or disable autocapitalisation of user input. See [autocapitalization](https://html.spec.whatwg.org/multipage/interaction.html#autocapitalization) for a full list of values that can be used.
-  - name: inputWrapper
-    type: object
-    required: false
-    description: If any of `prefix`, `suffix`, `formGroup.beforeInput` or `formGroup.afterInput` have a value, a wrapping element is added around the input and inserted content. This object allows you to customise that wrapping element.
-    params:
-      - name: classes
-        type: string
-        required: false
-        description: Classes to add to the wrapping element.
-      - name: attributes
-        type: object
-        required: false
-        description: HTML attributes (for example data attributes) to add to the wrapping element.
   - name: attributes
     type: object
     required: false
@@ -296,14 +279,6 @@ examples:
       name: spellcheck
       type: text
       spellcheck: false
-  - name: with autocapitalize turned off
-    options:
-      label:
-        text: Autocapitalize is turned off
-      id: input-with-autocapitalize-off
-      name: autocapitalize
-      type: text
-      autocapitalize: none
 
   - name: with prefix
     options:
@@ -399,6 +374,14 @@ examples:
       label:
         text: With value
       value: QQ 12 34 56 C
+  - name: zero value
+    hidden: true
+    options:
+      id: with-zero-value
+      name: with-zero-value
+      label:
+        text: With zero value
+      value: !!int 0
   - name: with describedBy
     hidden: true
     options:
@@ -547,18 +530,3 @@ examples:
         html: <span>kg</span>
         attributes:
           data-attribute: value
-  - name: with customised input wrapper
-    hidden: true
-    options:
-      label:
-        text: Cost per item, in pounds
-      id: input-with-customised-input-wrapper
-      name: cost
-      inputWrapper:
-        classes: app-input-wrapper--custom-modifier
-        attributes:
-          data-attribute: value
-      prefix:
-        text: £
-      suffix:
-        text: per item

packages/govuk-frontend/src/govuk/components/input/template.njk

@@ -3,25 +3,65 @@
 {% from "../hint/macro.njk" import govukHint %}
 {% from "../label/macro.njk" import govukLabel %}
 
+{#- Set classes for this component #}
+{%- set classNames = "govuk-input" -%}
+
+{%- if params.classes %}
+  {% set classNames = classNames + " " + params.classes %}
+{% endif %}
+
+{%- if params.errorMessage %}
+  {% set classNames = classNames + " govuk-input--error" %}
+{% endif %}
+
 {#- a record of other elements that we need to associate with the input using
   aria-describedby – for example hints or error messages -#}
-{% set describedBy = params.describedBy if params.describedBy else "" -%}
+{% set describedBy = params.describedBy if params.describedBy else undefined -%}
 
 {%- set hasPrefix = true if params.prefix and (params.prefix.text or params.prefix.html) else false %}
 {%- set hasSuffix = true if params.suffix and (params.suffix.text or params.suffix.html) else false %}
 {%- set hasBeforeInput = true if params.formGroup.beforeInput and (params.formGroup.beforeInput.text or params.formGroup.beforeInput.html) else false %}
 {%- set hasAfterInput = true if params.formGroup.afterInput and (params.formGroup.afterInput.text or params.formGroup.afterInput.html) else false %}
 
 {%- macro _inputElement(params) -%}
-  <input class="govuk-input {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} govuk-input--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="{{ params.type | default("text", true) }}"
-    {%- if (params.spellcheck === false) or (params.spellcheck === true) %} spellcheck="{{ params.spellcheck }}"{% endif %}
-    {%- if params.value %} value="{{ params.value }}"{% endif %}
-    {%- if params.disabled %} disabled{% endif %}
-    {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
-    {%- if params.autocomplete %} autocomplete="{{ params.autocomplete }}"{% endif %}
-    {%- if params.pattern %} pattern="{{ params.pattern }}"{% endif %}
-    {%- if params.inputmode %} inputmode="{{ params.inputmode }}"{% endif %}
-    {%- if params.autocapitalize %} autocapitalize="{{ params.autocapitalize }}"{% endif %}
+  <input
+    {{- govukAttributes({
+      class: classNames,
+      id: params.id,
+      name: params.name,
+      type: params.type | default("text", true),
+      spellcheck: {
+        value: params.spellcheck | string
+          if [true, false].includes(params.spellcheck)
+          else false,
+        optional: true
+      },
+      value: {
+        value: params.value,
+        optional: true
+      },
+      disabled: {
+        value: params.disabled,
+        optional: true
+      },
+      "aria-describedby": {
+        value: describedBy,
+        optional: true
+      },
+      autocomplete: {
+        value: params.autocomplete,
+        optional: true
+      },
+      pattern: {
+        value: params.pattern,
+        optional: true
+      },
+      inputmode: {
+        value: params.inputmode,
+        optional: true
+      }
+    }) -}}
+
     {{- govukAttributes(params.attributes) }}>
 {%- endmacro -%}
 
@@ -66,8 +106,7 @@
 {% endif %}
 
 {%- if hasPrefix or hasSuffix or hasBeforeInput or hasAfterInput %}
-  <div class="govuk-input__wrapper {%- if params.inputWrapper.classes %} {{ params.inputWrapper.classes }}{% endif %}"
-    {{- govukAttributes(params.inputWrapper.attributes) }}>
+  <div class="govuk-input__wrapper {%- if params.inputWrapper.classes %} {{ params.inputWrapper.classes }}{% endif %}" {{- govukAttributes(params.inputWrapper.attributes) }}>
     {% if hasBeforeInput %}
       {{- params.formGroup.beforeInput.html | safe | trim | indent(4, true) if params.formGroup.beforeInput.html else params.formGroup.beforeInput.text }}
     {% endif %}

packages/govuk-frontend/src/govuk/components/input/template.test.js

@@ -71,6 +71,13 @@ describe('Input', () => {
       expect($component.val()).toBe('QQ 12 34 56 C')
     })
 
+    it('renders with zero value', () => {
+      const $ = render('input', examples['zero value'])
+
+      const $component = $('.govuk-input')
+      expect($component.val()).toBe('0')
+    })
+
     it('renders with aria-describedby', () => {
       const $ = render('input', examples['with describedBy'])
 
@@ -205,22 +212,6 @@ describe('Input', () => {
     })
   })
 
-  describe('when it has the autocapitalize attribute', () => {
-    it('renders without autocapitalize attribute by default', () => {
-      const $ = render('input', examples.default)
-
-      const $component = $('.govuk-input')
-      expect($component.attr('autocapitalize')).toBeUndefined()
-    })
-
-    it('renders with autocapitalize attribute when set', () => {
-      const $ = render('input', examples['with autocapitalize turned off'])
-
-      const $component = $('.govuk-input')
-      expect($component.attr('autocapitalize')).toBe('none')
-    })
-  })
-
   describe('when it includes both a hint and an error message', () => {
     it('associates the input as described by both the hint and the error message', () => {
       const $ = render('input', examples['with error and hint'])
@@ -455,22 +446,4 @@ describe('Input', () => {
       expect($prefixBeforeSuffix.length).toBeTruthy()
     })
   })
-
-  describe('when it includes the input wrapper', () => {
-    it('renders the input wrapper with custom classes', () => {
-      const $ = render('input', examples['with customised input wrapper'])
-
-      const $wrapper = $('.govuk-form-group > .govuk-input__wrapper')
-      expect(
-        $wrapper.hasClass('app-input-wrapper--custom-modifier')
-      ).toBeTruthy()
-    })
-
-    it('renders the input wrapper with custom attributes', () => {
-      const $ = render('input', examples['with customised input wrapper'])
-
-      const $wrapper = $('.govuk-form-group > .govuk-input__wrapper')
-      expect($wrapper.attr('data-attribute')).toBe('value')
-    })
-  })
 })