@defra/lis-infra-ui-services 0.26.0 → 0.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@defra/lis-infra-ui-services",
-  "version": "0.26.0",
+  "version": "0.27.0",
   "description": "UI-Services shared definitions for the livestock taxonomy topology.",
   "main": "src/index.js",
   "repository": {

package/src/components/search-form.scss

@@ -27,6 +27,15 @@ $lis-search-form-input-size: 50px;
   border-right-width: 0;
   @include govuk-font($size: 19);
 
+  &.govuk-input--error {
+    border-color: govuk-functional-colour('error');
+
+    // GOV.UK switches an error input back to the normal border while focused.
+    &:focus {
+      border-color: govuk-functional-colour('input-border');
+    }
+  }
+
   &:focus {
     outline: $govuk-focus-width solid govuk-functional-colour('focus');
     outline-offset: 0;

package/src/nunjucks/components/search-form/search-form.test.js

@@ -171,19 +171,55 @@ describe('searchForm()', () => {
     )
   })
 
-  test('renders maxlength on the search input when given', () => {
+  test('renders the error message with a visually hidden prefix', () => {
     // Act
-    const html = render({ label: 'Search', maxlength: 50 })
+    const html = render({ label: 'Search', errorMessage: 'Too long' })
 
     // Assert
-    expect(html).toContain('maxlength="50"')
+    expect(html).toContain(
+      '<p id="search-error" class="govuk-error-message"><span class="govuk-visually-hidden">Error:</span> Too long</p>'
+    )
+    expect(html.indexOf('govuk-error-message')).toBeLessThan(
+      html.indexOf('lis-search-form__wrapper')
+    )
   })
 
-  test('renders no maxlength attribute when not given', () => {
+  test('adds the error classes to the form group and input', () => {
     // Act
-    const html = render({ label: 'Search' })
+    const html = render({ label: 'Search', errorMessage: 'Too long' })
+
+    // Assert
+    expect(html).toContain('govuk-form-group govuk-form-group--error')
+    expect(html).toContain('lis-search-form__input govuk-input--error')
+  })
+
+  test('describes the input by the hint then the error when both are given', () => {
+    // Act
+    const html = render({
+      label: 'Search',
+      hint: 'Search by ear tag',
+      errorMessage: 'Too long'
+    })
+
+    // Assert
+    expect(html).toContain('aria-describedby="search-hint search-error"')
+  })
+
+  test('describes the input by the error alone when there is no hint', () => {
+    // Act
+    const html = render({ label: 'Search', errorMessage: 'Too long' })
+
+    // Assert
+    expect(html).toContain('aria-describedby="search-error"')
+  })
+
+  test('renders no error markup when no error message is given', () => {
+    // Act
+    const html = render({ label: 'Search', hint: 'Search by ear tag' })
 
     // Assert
-    expect(html).not.toContain('maxlength')
+    expect(html).not.toContain('govuk-error-message')
+    expect(html).not.toContain('--error')
+    expect(html).not.toContain('search-error')
   })
 })

package/src/nunjucks/components/search-form/template.njk

@@ -1,7 +1,7 @@
 {%- set id = params.id or params.name or "search" -%}
 
 <form method="GET" class="lis-search-form" role="search" aria-label="{{ params.label }}">
-  <div class="govuk-form-group">
+  <div class="govuk-form-group{% if params.errorMessage %} govuk-form-group--error{% endif %}">
     <h2 class="govuk-label-wrapper">
       <label class="govuk-label govuk-label--m" for="{{ id }}">
         {{ params.label }}
@@ -15,15 +15,17 @@
     {%- for field in params.hiddenFields -%}
       <input type="hidden" name="{{ field.name }}" value="{{ field.value }}">
     {%- endfor -%}
+    {%- if params.errorMessage -%}
+      <p id="{{ id }}-error" class="govuk-error-message"><span class="govuk-visually-hidden">Error:</span> {{ params.errorMessage }}</p>
+    {%- endif %}
     <div class="lis-search-form__wrapper">
       <input
-        class="govuk-input lis-search-form__input"
+        class="govuk-input lis-search-form__input{% if params.errorMessage %} govuk-input--error{% endif %}"
         type="search"
         id="{{ id }}"
         name="{{ params.name or 'search' }}"
         value="{{ params.value }}"
-        {% if params.hint %}aria-describedby="{{ id }}-hint"{% endif %}
-        {% if params.maxlength %}maxlength="{{ params.maxlength }}"{% endif %}
+        {% if params.hint or params.errorMessage %}aria-describedby="{% if params.hint %}{{ id }}-hint{% endif %}{% if params.hint and params.errorMessage %} {% endif %}{% if params.errorMessage %}{{ id }}-error{% endif %}"{% endif %}
       >
       <div class="lis-search-form__submit-wrapper">
         <button class="lis-search-form__submit" type="submit">