From 5846560b237575d6f51291ecfe8459d64a50b816 Mon Sep 17 00:00:00 2001
From: Patrick Cartlidge <patrickcartlidge@gmail.com>
Date: Thu, 2 May 2024 10:46:20 +0100
Subject: [PATCH] add test add example

---
 .../src/govuk/components/input/input.yaml     | 16 +++++
 .../src/govuk/components/input/template.njk   | 67 +++++++++++++++----
 .../govuk/components/input/template.test.js   | 50 +++++---------
 3 files changed, 87 insertions(+), 46 deletions(-)

diff --git a/packages/govuk-frontend/src/govuk/components/input/input.yaml b/packages/govuk-frontend/src/govuk/components/input/input.yaml
index 439bc6a333..6dbe124f05 100644
--- a/packages/govuk-frontend/src/govuk/components/input/input.yaml
+++ b/packages/govuk-frontend/src/govuk/components/input/input.yaml
@@ -399,6 +399,22 @@ 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: autocapitalize
+    hidden: true
+    options:
+      label:
+        text: With autocapitalize
+      id: with-autocapitalize
+      name: with-autocapitalize
+      autocapitalize: none
   - name: with describedBy
     hidden: true
     options:
diff --git a/packages/govuk-frontend/src/govuk/components/input/template.njk b/packages/govuk-frontend/src/govuk/components/input/template.njk
index bb4666d4ac..f34e1dfb13 100644
--- a/packages/govuk-frontend/src/govuk/components/input/template.njk
+++ b/packages/govuk-frontend/src/govuk/components/input/template.njk
@@ -3,9 +3,20 @@
 {% 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 %}
@@ -13,15 +24,48 @@
 {%- 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
+      },
+      autocapitalize: {
+        value: params.autocapitalize,
+        optional: true
+      },
+      pattern: {
+        value: params.pattern,
+        optional: true
+      },
+      inputmode: {
+        value: params.inputmode,
+        optional: true
+      }
+    }) -}}
+
     {{- govukAttributes(params.attributes) }}>
 {%- endmacro -%}
 
@@ -66,8 +110,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 %}
diff --git a/packages/govuk-frontend/src/govuk/components/input/template.test.js b/packages/govuk-frontend/src/govuk/components/input/template.test.js
index 013b983694..8ff6907ef5 100644
--- a/packages/govuk-frontend/src/govuk/components/input/template.test.js
+++ b/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'])
@@ -282,6 +273,15 @@ describe('Input', () => {
     })
   })
 
+  describe('when it includes an autocapitalize attribute', () => {
+    it('renders the autocapitalize attribute', () => {
+      const $ = render('input', examples.autocapitalize)
+
+      const $component = $('.govuk-input')
+      expect($component.attr('autocapitalize')).toBe('none')
+    })
+  })
+
   describe('when it includes an inputmode', () => {
     it('renders with an inputmode attached to the input', () => {
       const $ = render('input', examples.inputmode)
@@ -455,22 +455,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')
-    })
-  })
 })