Skip to content

Commit

Permalink
add test add example
Browse files Browse the repository at this point in the history
  • Loading branch information
patrickpatrickpatrick committed May 2, 2024
1 parent f047499 commit 161c516
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 86 deletions.
48 changes: 8 additions & 40 deletions packages/govuk-frontend/src/govuk/components/input/input.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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:
Expand Down Expand Up @@ -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:
Expand Down Expand Up @@ -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
62 changes: 50 additions & 12 deletions packages/govuk-frontend/src/govuk/components/input/template.njk
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,64 @@
{% 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 | default("none", true),
},
pattern: {
value: params.pattern,
optional: true
},
inputmode: {
value: params.inputmode,
optional: true
}
}) -}}

{{- govukAttributes(params.attributes) }}>
{%- endmacro -%}

Expand Down Expand Up @@ -66,8 +105,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 %}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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'])

Expand Down Expand Up @@ -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'])
Expand Down Expand Up @@ -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')
})
})
})

0 comments on commit 161c516

Please sign in to comment.