Add autocomplete component

README.md

@@ -157,6 +157,7 @@ const nunjucksEnv = nunjucks.configure([
     path.resolve(__dirname, 'views'),
     path.resolve(__dirname, 'node_modules', 'hmpo-components', 'components'),
     path.resolve(__dirname, 'node_modules', 'govuk-frontend')
+    path.resolve(__dirname, 'node_modules', '@x-govuk',  'govuk-prototype-components', 'src', 'x-govuk', 'components')
 ], {
     express: app,
     dev: true, // Set to false in production
@@ -262,6 +263,8 @@ For a comprehensive list of all available parameters, refer to the [GOV.UK Front
 
 ### Other available components:
 
+- `hmpoAutocomplete(ctx, params)`: Generates an autocomplete (`<select>`) component preloaded with list of items given and handled by GOV.UK Prototype Components.
+
 - `hmpoCircleStep(params)`: Generates a numbered step in a list with a circular icon, optional title, and description, allowing custom classes and attributes for styling and accessibility.
 
 - `hmpoCircleStepList(params)`: Generates an ordered list of circular step items using `hmpoCircleStep`, automatically numbering steps and supporting custom classes, attributes, titles, and descriptions.

components/hmpo-all.njk

@@ -1,4 +1,5 @@
 
+{% include "hmpo-autocomplete/macro.njk" %}
 {% include "hmpo-chars-left/macro.njk" %}
 {% include "hmpo-checkboxes/macro.njk" %}
 {% include "hmpo-circle-step-list/macro.njk" %}

components/hmpo-autocomplete/macro.njk

@@ -0,0 +1,26 @@
+{% macro hmpoAutocomplete(ctx, params, base) %}
+    {%- set params = hmpoGetParams(ctx, params, base) %}
+
+    {%- set value = hmpoGetValue(ctx, params) %}
+
+    {%- set pageHeading = {
+        isPageHeading: true,
+        classes: "govuk-label--l"
+    } if params.isPageHeading %}
+
+    {%- set args = {
+        id: params.id,
+        name: params.id,
+        label: merge(
+            pageHeading,
+            { attributes: { id: params.id + "-label" } },
+            hmpoGetOptions(ctx, params, "label")
+        ),
+        hint: hmpoGetOptions(ctx, params, "hint", true),
+        errorMessage: hmpoGetError(ctx, params),
+        items: params.items
+    } %}
+
+    {% from "autocomplete/macro.njk" import xGovukAutocomplete %}
+    {{- xGovukAutocomplete(args) }}
+{% endmacro %}

components/hmpo-autocomplete/spec.macro.js

@@ -0,0 +1,91 @@
+'use strict';
+
+describe('hmpoAutocomplete', () => {
+    let locals;
+
+    beforeEach(() => {
+        locals = {
+            options: {
+                fields: {
+                    'my-input': {
+                        validate: 'required',
+                        items: [{ text: 'a' }, { text: 'b' }, { text: 'c' }]
+                    }
+                }
+            }
+        };
+    });
+
+    it('renders with name and id', () => {
+        const $ = render({ component: 'hmpoAutocomplete', params: { id: 'my-input' }, ctx: true }, locals);
+
+        const $component = $('select');
+
+        expect($component.attr('id')).to.equal('my-input');
+        expect($component.attr('name')).to.equal('my-input');
+    });
+
+    it('renders with label and hint', () => {
+        const $ = render({ component: 'hmpoAutocomplete', params: { id: 'my-input' }, ctx: true }, locals);
+
+        const $label = $('.govuk-label');
+        const $hint = $('.govuk-hint');
+
+        expect($label.text().trim()).to.equal('[fields.my-input.label]');
+        expect($label.attr('id')).to.equal('my-input-label');
+
+        expect($hint.text().trim()).to.equal('[fields.my-input.hint]');
+    });
+
+    it('renders label as header', () => {
+        const $ = render({ component: 'hmpoAutocomplete', params: { id: 'my-input', isPageHeading: true }, ctx: true }, locals);
+        const $label = $('h1 .govuk-label');
+        expect($label.attr('class')).to.equal('govuk-label govuk-label--l');
+    });
+
+    it('renders items with matching names and labels', () => {
+        const $ = render({ component: 'hmpoAutocomplete', params: { id: 'my-input' }, ctx: true }, locals);
+
+        const $itemDefault = $('option').eq(0);
+        expect($itemDefault.attr('value')).to.equal('');
+        expect($itemDefault.text().trim()).to.equal('Select an option');
+
+        const $item1 = $('option').eq(1);
+        expect($item1.attr('value')).to.equal('a');
+        expect($item1.text().trim()).to.equal('a');
+
+        const $item2 = $('option').eq(2);
+        expect($item2.attr('value')).to.equal('b');
+        expect($item2.text().trim()).to.equal('b');
+
+        const $item3 = $('option').eq(3);
+        expect($item3.attr('value')).to.equal('c');
+        expect($item3.text().trim()).to.equal('c');
+    });
+
+    it('renders items with gven names and labels', () => {
+        locals.options.fields['my-input'].items = [
+            { value: 'a', text: 'x' },
+            { value: 'b', text: 'y' },
+            { value: 'c', text: 'z' }
+        ];
+
+        const $ = render({ component: 'hmpoAutocomplete', params: { id: 'my-input', }, ctx: true }, locals);
+
+        const $itemDefault = $('option').eq(0);
+        expect($itemDefault.attr('value')).to.equal('');
+        expect($itemDefault.text().trim()).to.equal('Select an option');
+
+        const $item1 = $('option').eq(1);
+        expect($item1.attr('value')).to.equal('a');
+        expect($item1.text().trim()).to.equal('x');
+
+        const $item2 = $('option').eq(2);
+        expect($item2.attr('value')).to.equal('b');
+        expect($item2.text().trim()).to.equal('y');
+
+        const $item3 = $('option').eq(3);
+        expect($item3.attr('value')).to.equal('c');
+        expect($item3.text().trim()).to.equal('z');
+    });
+});

components/hmpo-field/macro.njk

@@ -4,8 +4,11 @@
     {%- set labelClass = field.label.classes | default("govuk-label--s" if field.group else "govuk-label--m") %}
     {%- set legendClass = field.fieldset.legend.classes | default("govuk-fieldset__legend--s" if field.group else "govuk-fieldset__legend--m") %}
 
-    {%- if field.type == "radios" %}
-        {% from "../hmpo-radios/macro.njk" import hmpoRadios%}
+    {%- if field.type == "autocomplete" %}
+        {% from "../hmpo-autocomplete/macro.njk" import hmpoAutocomplete %}
+        {% set component = hmpoAutocomplete %}
+    {%- elif field.type == "radios" %}
+        {% from "../hmpo-radios/macro.njk" import hmpoRadios %}
         {% set component = hmpoRadios %}
     {%- elif field.type == "checkboxes" %}
         {% from "../hmpo-checkboxes/macro.njk" import hmpoCheckboxes %}