hof 22.8.4 → 22.9.0-beta.v1

package/package/frontend/template-mixins/mixins/template-mixins.js

@@ -0,0 +1,520 @@
+/* eslint-disable no-param-reassign, max-len, consistent-return */
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+
+const Hogan = require('hogan.js');
+const _ = require('underscore');
+
+const renderer = require('./render');
+
+const PANELMIXIN = 'partials/mixins/panel';
+const PARTIALS = [
+  'partials/forms/input-text-group',
+  'partials/forms/input-text-date',
+  'partials/forms/input-submit',
+  'partials/forms/select',
+  'partials/forms/checkbox',
+  'partials/forms/textarea-group',
+  'partials/forms/option-group',
+  'partials/forms/checkbox-group'
+];
+
+// This returns a middleware that places mixins against the `res.locals` object.
+//
+// It should be given:
+// - options:
+//   - viewDirectory: the folder in which templates are found in.
+//   - viewEngine: the type of view, defaults to 'html'.
+//   - sharedTranslationsKey: used to find translations relatively within
+//     the translations.json. Useful for field and button labels.
+module.exports = function (options) {
+  const compiled = {};
+  const templateCache = {};
+
+  function maxlength(field) {
+    const validation = field.validate || [];
+    const ml = _.findWhere(validation, { type: 'maxlength' }) || _.findWhere(validation, { type: 'exactlength' });
+    if (ml) {
+      return _.isArray(ml.arguments) ? ml.arguments[0] : ml.arguments;
+    }
+    return null;
+  }
+
+  function maxword(field) {
+    const validation = field.validate || [];
+    const mw = _.findWhere(validation, { type: 'maxword' });
+    if (mw) {
+      return _.isArray(mw.arguments) ? mw.arguments[0] : mw.arguments;
+    }
+    return null;
+  }
+
+  function type(field) {
+    return field.type || 'text';
+  }
+
+  function classNameString(name) {
+    if (_.isArray(name)) {
+      return name.join(' ');
+    }
+    return name;
+  }
+
+  function classNames(field, prop) {
+    prop = prop || 'className';
+    if (field[prop]) {
+      return classNameString(field[prop]);
+    }
+    return '';
+  }
+
+  return function (req, res, next) {
+    const roots = [].concat(req.app.get('views')).concat(options.viewsDirectory);
+    const View = req.app.get('view');
+
+    // wrap in try catch to throw an error if any one template cannot be resolved
+    try {
+      PARTIALS.forEach(relativeTemplatePath => {
+        if (compiled[relativeTemplatePath]) {
+          return;
+        }
+        const viewExtension = '.' + options.viewEngine;
+        const engines = {};
+        engines[viewExtension] = {};
+        const view = new View(relativeTemplatePath, {
+          defaultEngine: options.viewEngine,
+          root: roots,
+          engines: engines
+        });
+        if (!view.path) {
+          throw new Error('Could not find template file: ' + relativeTemplatePath);
+        }
+        const compiledTemplate = Hogan.compile(fs.readFileSync(view.path).toString());
+        compiled[relativeTemplatePath] = compiledTemplate;
+      });
+    } catch (e) {
+      return next(e);
+    }
+
+    const hoganRender = renderer(res);
+
+    const t = function (key) {
+      return hoganRender(req.translate(options.sharedTranslationsKey + key), this);
+    };
+
+    // Like t() but returns null on failed translations
+    const conditionalTranslate = function (key) {
+      key = options.sharedTranslationsKey + key;
+      const translated = req.translate(key);
+      return translated !== key ? translated : null;
+    };
+
+    const getTranslationKey = function (field, key, property) {
+      return field[property] ? field[property] : 'fields.' + key + '.' + property;
+    };
+
+    function readTemplate(name) {
+      if (templateCache[name]) {
+        return templateCache[name];
+      }
+      const data = fs.readFileSync(`${name}.${options.viewEngine}`).toString();
+      templateCache[name] = data;
+      return data;
+    }
+
+    /*
+     * helper function which takes a child string which
+     * can either be the name of a partial in the format
+     * partial/{partial-name}, the name of a template mixin
+     * or a raw template string to render
+     */
+    function getTemplate(child) {
+      res.locals.partials = res.locals.partials || {};
+
+
+      const re = /^partials\/(.+)/i;
+      const match = child.match(re);
+
+      if (match) {
+        return readTemplate(res.locals.partials['partials-' + match[1]]);
+      } else if (child === 'html' || res.locals[child]) {
+        if (res.locals.partials['partials-mixins-panel']) {
+          return readTemplate(res.locals.partials['partials-mixins-panel']);
+        }
+        const panelPath = path.join(options.viewsDirectory, PANELMIXIN);
+        return readTemplate(panelPath);
+      }
+      return child;
+    }
+
+    function isRequired(field) {
+      if (field.required !== undefined) {
+        return field.required;
+      } else if (field.validate) {
+        return field.validate.indexOf('required') > -1;
+      }
+      return false;
+    }
+
+    function renderMixin() {
+      return function () {
+        if (this.child) {
+          if (this.child === 'html') {
+            try {
+              const key = this.toggle;
+              return res.locals.fields.find(function (field) {
+                return field.key === key;
+              }).html;
+            } catch (err) {
+              const msg = `html property not set on field: ${this.toggle}. Did you forget to use a component?`;
+              next(new Error(msg));
+            }
+          }
+          if (this[this.child]) {
+            return this[this.child]().call(this, this.toggle);
+          }
+        }
+      };
+    }
+
+    function renderChild() {
+      return function () {
+        if (this.child) {
+          const templateString = getTemplate(this.child, this.toggle);
+          const template = Hogan.compile(templateString);
+          return template.render(Object.assign({
+            renderMixin: renderMixin.bind(this)
+          }, res.locals, this), _.mapObject(res.locals.partials, function (partialpath) {
+            return readTemplate(partialpath);
+          }));
+        }
+      };
+    }
+
+    // eslint-disable-next-line complexity
+    function inputText(key, extension) {
+      extension = extension || {};
+
+      const field = Object.assign({}, this.options.fields[key] || options.fields[key]);
+      const hKey = getTranslationKey(field, key, 'hint');
+      const lKey = getTranslationKey(field, key, 'label');
+      const hint = conditionalTranslate(hKey);
+      const required = isRequired(field);
+      const labelClassName = classNames(field, 'labelClassName');
+      const autocomplete = field.autocomplete || extension.autocomplete;
+
+      return Object.assign({}, extension, {
+        id: key,
+        className: extension.className || classNames(field),
+        type: extension.type || type(field),
+        value: this.values && this.values[key],
+        label: t(lKey),
+        labelClassName: labelClassName ? `govuk-label ${labelClassName}` : 'govuk-label',
+        formGroupClassName: classNames(field, 'formGroupClassName') || extension.formGroupClassName || 'govuk-form-group',
+        hint: hint,
+        hintId: extension.hintId || (hint ? key + '-hint' : null),
+        error: this.errors && this.errors[key],
+        maxlengthAttribute: field.maxlengthAttribute === true,
+        maxlength: maxlength(field) || extension.maxlength,
+        maxword: maxword(field) || extension.maxword,
+        required: required,
+        pattern: extension.pattern,
+        date: extension.date,
+        autocomplete: autocomplete,
+        child: field.child,
+        isPageHeading: field.isPageHeading,
+        attributes: field.attributes,
+        isPrefixOrSuffix: _.map(field.attributes, item => {if (item.prefix || item.suffix !== undefined) return true;}),
+        isMaxlengthOrMaxword: maxlength(field) || extension.maxlength || maxword(field) || extension.maxword,
+        renderChild: renderChild.bind(this)
+      });
+    }
+
+    function optionGroup(key, opts) {
+      opts = opts || {};
+      const field = Object.assign({}, this.options.fields[key] || options.fields[key]);
+      const legend = field.legend;
+      const detail = field.detail;
+      const warningValue = 'fields.' + key + '.warning';
+      let legendClassName;
+      let legendValue = 'fields.' + key + '.legend';
+      if (legend) {
+        if (legend.className) {
+          legendClassName = classNameString(legend.className);
+        }
+        if (typeof legend.value !== 'undefined') {
+          legendValue = legend.value;
+        }
+      }
+      return {
+        key: key,
+        error: this.errors && this.errors[key],
+        legend: t(legendValue),
+        legendClassName: legendClassName,
+        role: opts.type === 'radio' ? 'radiogroup' : 'group',
+        isPageHeading: field.isPageHeading,
+        isWarning: field.isWarning,
+        warning: t(warningValue),
+        detail: detail ? detail : '',
+        hint: conditionalTranslate(getTranslationKey(field, key, 'hint')),
+        options: _.map(field.options, function (obj) {
+          let selected = false;
+          let label;
+          let value;
+          let toggle;
+          let child;
+          let optionHint;
+          let useHintText;
+
+          if (typeof obj === 'string') {
+            value = obj;
+            label = 'fields.' + key + '.options.' + obj + '.label';
+            optionHint = 'fields.' + key + '.options.' + obj + '.hint';
+          } else {
+            value = obj.value;
+            label = obj.label || 'fields.' + key + '.options.' + obj.value + '.label';
+            toggle = obj.toggle;
+            child = obj.child;
+            useHintText = obj.useHintText;
+            optionHint = obj.hint || 'fields.' + key + '.options.' + obj.value + '.hint';
+          }
+
+          if (this.values && this.values[key] !== undefined) {
+            const selectedValue = this.values[key];
+            selected = Array.isArray(selectedValue)
+              ? selectedValue.indexOf(value) > -1
+              : selectedValue === value;
+          }
+
+          return {
+            label: t(label) || '',
+            value: value,
+            type: opts.type,
+            selected: selected,
+            radioOption: opts.type === 'radio',
+            toggle: toggle,
+            child: child,
+            optionHint: useHintText ? optionHint : conditionalTranslate(optionHint) || ''
+          };
+        }, this),
+        className: classNames(field),
+        renderChild: renderChild.bind(this)
+      };
+    }
+
+    // eslint-disable-next-line complexity
+    function checkbox(key, opts) {
+      opts = opts || {};
+      const field = Object.assign({}, this.options.fields[key] || options.fields[key]);
+      opts.required = opts.required || false;
+      opts.toggle = field.toggle;
+      let selected = false;
+      const fieldLabel = field.label ? field.label : false;
+      if (this.values && this.values[key] !== undefined) {
+        selected = this.values[key].toString() === 'true';
+      }
+      return Object.assign(opts, {
+        key: key,
+        error: this.errors && this.errors[key],
+        invalid: this.errors && this.errors[key] && opts.required,
+        label: t(fieldLabel || 'fields.' + key + '.label'),
+        hint: conditionalTranslate(getTranslationKey(field, key, 'hint')),
+        selected: selected,
+        className: classNames(field) || 'govuk-label govuk-checkboxes__label',
+        child: field.child,
+        renderChild: renderChild.bind(this)
+      });
+    }
+
+    const mixins = {
+      'input-text': {
+        path: 'partials/forms/input-text-group',
+        renderWith: inputText
+      },
+      'input-text-compound': {
+        path: 'partials/forms/input-text-group',
+        renderWith: inputText,
+        options: {
+          compound: true
+        }
+      },
+      'input-text-code': {
+        path: 'partials/forms/input-text-group',
+        renderWith: inputText,
+        options: {
+          className: 'input-code'
+        }
+      },
+      'input-number': {
+        path: 'partials/forms/input-text-group',
+        renderWith: inputText,
+        options: {
+          pattern: '[0-9]*'
+        }
+      },
+      'input-phone': {
+        path: 'partials/forms/input-text-group',
+        renderWith: inputText,
+        options: {
+          maxlength: 18
+        }
+      },
+      'input-file': {
+        path: 'partials/forms/input-text-group',
+        renderWith: inputText,
+        options: {
+          type: 'file'
+        }
+      },
+      textarea: {
+        path: 'partials/forms/textarea-group',
+        renderWith: inputText
+      },
+      'radio-group': {
+        path: 'partials/forms/option-group',
+        renderWith: optionGroup,
+        options: {
+          type: 'radio'
+        }
+      },
+      'checkbox-group': {
+        path: 'partials/forms/checkbox-group',
+        renderWith: optionGroup,
+        options: {
+          type: 'checkbox'
+        }
+      },
+      select: {
+        path: 'partials/forms/select',
+        renderWith: inputText,
+        options: optionGroup
+      },
+      checkbox: {
+        path: 'partials/forms/checkbox',
+        renderWith: checkbox
+      },
+      'checkbox-compound': {
+        path: 'partials/forms/checkbox',
+        renderWith: checkbox,
+        options: {
+          compound: true
+        }
+      },
+      'checkbox-required': {
+        path: 'partials/forms/checkbox',
+        renderWith: checkbox,
+        options: {
+          required: true
+        }
+      },
+      'input-submit': {
+        handler: function () {
+          return function (props) {
+            props = (props || '').split(' ');
+            const def = 'next';
+            const value = props[0] || def;
+            const id = props[1];
+
+            const obj = {
+              value: t('buttons.' + value),
+              id: id
+            };
+            return compiled['partials/forms/input-submit'].render(obj);
+          };
+        }
+      },
+      'input-date': {
+        handler: function () {
+          /**
+          * props: '[value] [id]'
+          */
+          return function (key) {
+            const field = Object.assign({}, this.options.fields[key] || options.fields[key]);
+            key = hoganRender(key, this);
+            // Exact unless there is a inexact property against the fields key.
+            const isExact = field.inexact !== true;
+
+            let autocomplete = field.autocomplete || {};
+            if (autocomplete === 'off') {
+              autocomplete = {
+                day: 'off',
+                month: 'off',
+                year: 'off'
+              };
+            } else if (typeof autocomplete === 'string') {
+              autocomplete = {
+                day: autocomplete + '-day',
+                month: autocomplete + '-month',
+                year: autocomplete + '-year'
+              };
+            }
+            const isThisRequired = field.validate ? field.validate.indexOf('required') > -1 : false;
+            const formGroupClassName = (field.formGroup && field.formGroup.className) ? field.formGroup.className : '';
+            const classNameDay = (field.controlsClass && field.controlsClass.day) ? field.controlsClass.day : 'govuk-date-input__input govuk-input--width-2';
+            const classNameMonth = (field.controlsClass && field.controlsClass.month) ? field.controlsClass.month : 'govuk-date-input__input govuk-input--width-2';
+            const classNameYear = (field.controlsClass && field.controlsClass.year) ? field.controlsClass.year : 'govuk-date-input__input govuk-input--width-4';
+
+            const parts = [];
+
+            if (isExact) {
+              const dayPart = compiled['partials/forms/input-text-date'].render(inputText.call(this, key + '-day', { pattern: '[0-9]*', min: 1, max: 31, maxlength: 2, hintId: key + '-hint', date: true, autocomplete: autocomplete.day, formGroupClassName, className: classNameDay, isThisRequired }));
+              parts.push(dayPart);
+            }
+
+            const monthPart = compiled['partials/forms/input-text-date'].render(inputText.call(this, key + '-month', { pattern: '[0-9]*', min: 1, max: 12, maxlength: 2, hintId: key + '-hint', date: true, autocomplete: autocomplete.month, formGroupClassName, className: classNameMonth, isThisRequired }));
+            const yearPart = compiled['partials/forms/input-text-date'].render(inputText.call(this, key + '-year', { pattern: '[0-9]*', maxlength: 4, hintId: key + '-hint', date: true, autocomplete: autocomplete.year, formGroupClassName, className: classNameYear, isThisRequired }));
+
+            return parts.concat(monthPart, yearPart).join('\n');
+          };
+        }
+      }
+    };
+
+    // loop through mixins object and attach their handler methods
+    // to res.locals['mixin-name'].
+    _.each(mixins, function (mixin, name) {
+      const handler = _.isFunction(mixin.handler) ? mixin.handler : function () {
+        return function (key) {
+          this.options = this.options || {};
+          this.options.fields = this.options.fields || {};
+          key = hoganRender(key, this);
+          return compiled[mixin.path]
+            .render(mixin.renderWith.call(this, key, _.isFunction(mixin.options)
+              ? mixin.options.call(this, key)
+              : mixin.options
+            ));
+        };
+      };
+      res.locals[name] = handler;
+    });
+
+    res.locals.renderField = function () {
+      return function (key) {
+        if (key) {
+          const fields = this.fields || res.locals.fields;
+          const field = fields.find(f => f.key === key);
+          if (field) {
+            Object.assign(this, field);
+          } else {
+            throw new Error('Could not find field: ' + key);
+          }
+        }
+        if (this.disableRender) {
+          return null;
+        }
+        if (this.html) {
+          return this.html;
+        }
+        const mixin = this.mixin || 'input-text';
+        if (mixin && res.locals[mixin] && typeof res.locals[mixin] === 'function') {
+          return res.locals[mixin]().call(Object.assign({}, res.locals), this.key);
+        }
+        throw new Error('Mixin: "' + mixin + '" not found');
+      };
+    };
+
+    next();
+  };
+};

package/package/frontend/template-mixins/partials/forms/checkbox-group.html

@@ -0,0 +1,47 @@
+<div id="{{key}}-group" class="govuk-form-group{{#className}} {{className}} {{/className}}{{#formGroupClassName}} {{formGroupClassName}}{{/formGroupClassName}}{{#error}} govuk-form-group--error{{/error}}">
+    <fieldset class="govuk-fieldset" {{#hint}} aria-describedby="{{key}}-hint"{{/hint}}>
+        <legend class="govuk-fieldset__legend {{#isPageHeading}}govuk-fieldset__legend--l{{/isPageHeading}}{{#legendClassName}} {{legendClassName}}{{/legendClassName}}">
+            {{#isPageHeading}}<h1 class="govuk-fieldset__heading">{{/isPageHeading}}
+                {{legend}}
+            {{#isPageHeading}}</h1>{{/isPageHeading}}
+        </legend>
+        {{#isWarning}}
+        <div class="govuk-warning-text">
+            <span class="govuk-warning-text__icon" aria-hidden="true">!</span>
+            <strong class="govuk-warning-text__text">
+              <span class="govuk-warning-text__assistive">Warning</span>
+             {{warning}}
+            </strong>
+          </div>
+        {{/isWarning}}
+        {{#hint}}<div id="{{key}}-hint" class="govuk-hint">{{{hint}}}</div>{{/hint}}
+        {{#error}}
+        <p id="{{key}}-error" class="govuk-error-message">
+            <span class="govuk-visually-hidden">Error:</span> {{error.message}}
+        </span>
+        {{/error}}
+        {{{detail}}}
+		<div class="govuk-checkboxes" data-module="govuk-checkboxes">
+        {{#options}}
+        <div class="govuk-checkboxes__item">
+            <input
+				class="govuk-checkboxes__input"
+                type="{{type}}"
+                name="{{key}}"
+                id="{{key}}-{{value}}"
+                value="{{value}}"                
+                {{#toggle}} data-toggle="{{toggle}}"{{/toggle}}
+                {{#selected}} checked="checked"{{/selected}}
+                {{^error}}{{#optionHint}} aria-describedby="{{key}}-{{value}}-hint"{{/optionHint}}{{^optionHint}}{{#hint}} aria-describedby="{{key}}-hint"{{/hint}}{{/optionHint}}{{/error}}
+                {{#error}} aria-describedby="{{key}}-error" aria-invalid="true"{{/error}}
+            >
+            <label class="govuk-label govuk-checkboxes__label" for="{{key}}-{{value}}">
+                {{{label}}}
+                {{#optionHint}}<div id="{{key}}-{{value}}-item-hint" class="govuk-hint">{{optionHint}}</div>{{/optionHint}}
+            </label>
+        </div>
+        {{#renderChild}}{{/renderChild}}
+        {{/options}}
+		</div>
+    </fieldset>
+</div>

package/package/frontend/template-mixins/partials/forms/checkbox.html

@@ -0,0 +1,16 @@
+<div id="{{key}}-group" class="govuk-form-group {{#compound}} form-group-compound{{/compound}}{{#formGroupClassName}} {{formGroupClassName}}{{/formGroupClassName}}{{#error}} govuk-form-group--error{{/error}}">
+    {{#error}}<p class="govuk-error-message" aria-hidden="true">{{error.message}}</p>{{/error}}
+    <div class="govuk-checkboxes__item">
+        <input class="govuk-checkboxes__input" type="checkbox" id="{{key}}" name="{{key}}" value="true" aria-required="{{required}}"{{#error}} aria-invalid="true"{{/error}}{{^error}}{{#toggle}} data-toggle="{{toggle}}"{{/toggle}}{{#selected}} checked="checked"{{/selected}}{{/error}}>
+        <label for="{{key}}" class="{{#className}}{{className}} {{/className}}{{#invalid}}invalid-input{{/invalid}}">
+            {{{label}}}
+            {{#error}}<span class="visuallyhidden">{{error.message}}</span>{{/error}}
+        </label>
+        {{#hint}}
+        <div id="{{key}}-hint" class="govuk-hint govuk-checkboxes__hint">
+          {{{hint}}}
+        </div>
+        {{/hint}}
+    </div>
+    {{#renderChild}}{{/renderChild}}
+</div>

package/package/frontend/template-mixins/partials/forms/input-submit.html

@@ -0,0 +1 @@
+<input type="submit" {{#id}}id="{{id}}"{{/id}} value="{{{value}}}" class="govuk-button">

package/package/frontend/template-mixins/partials/forms/input-text-date.html

@@ -0,0 +1,37 @@
+<div class="govuk-date-input__item">
+    <div id="{{id}}-group" class="{{#formGroupClassName}} {{formGroupClassName}}{{/formGroupClassName}}">
+      <label for="{{id}}" class="{{labelClassName}}">
+          <span class="label-text">{{{label}}}</span>
+      </label>
+      {{#hint}}<span {{$hintId}}id="{{hintId}}" {{/hintId}}class="govuk-hint">{{{hint}}}</span>{{/hint}}
+      {{#renderChild}}{{/renderChild}}
+          {{#attributes}}
+              {{#prefix}}
+                  <div class="govuk-input__prefix" aria-hidden="true">{{prefix}}</div>
+              {{/prefix}}
+          {{/attributes}}
+          <input
+              type="{{type}}"
+              name="{{id}}"
+              id="{{id}}"
+              class="govuk-input{{#className}} {{className}}{{/className}}{{#error}} govuk-input--error{{/error}}"
+              aria-required="{{required}}"
+              {{#value}} value="{{value}}"{{/value}}
+              {{#min}} min="{{min}}"{{/min}}
+              {{#max}} max="{{max}}"{{/max}}
+              {{#maxlength}} maxlength="{{maxlength}}"{{/maxlength}}
+              {{#pattern}} pattern="{{pattern}}"{{/pattern}}
+              {{#hintId}} aria-describedby="{{hintId}}"{{/hintId}}
+              {{#error}} aria-invalid="true"{{/error}}
+              {{#autocomplete}} autocomplete="{{autocomplete}}"{{/autocomplete}}
+              {{#attributes}}
+                  {{attribute}}="{{value}}"
+              {{/attributes}}
+          >
+          {{#attributes}}
+              {{#suffix}}
+                  <div class="govuk-input__prefix" aria-hidden="true">{{suffix}}</div>
+              {{/suffix}}
+          {{/attributes}}
+    </div>
+</div>

package/package/frontend/template-mixins/partials/forms/input-text-group.html

@@ -0,0 +1,45 @@
+<div id="{{id}}-group" class="{{#compound}} form-group-compound{{/compound}}{{#formGroupClassName}}{{formGroupClassName}}{{/formGroupClassName}}{{#error}} govuk-form-group--error{{/error}}">
+    {{#isPageHeading}}<h1 class="govuk-label-wrapper">{{/isPageHeading}}<label for="{{id}}" class="{{labelClassName}} {{#isPageHeading}}govuk-label--l{{/isPageHeading}}">
+        {{{label}}}
+      </label>
+    {{#isPageHeading}}</h1>{{/isPageHeading}}
+    {{#hint}}<span {{$hintId}}id="{{hintId}}" {{/hintId}}class="govuk-hint">{{{hint}}}</span>{{/hint}}
+    {{#error}}
+      <p class="govuk-error-message">
+        <span class="govuk-visually-hidden">Error:</span> {{error.message}}
+      </p>
+    {{/error}}
+    {{#renderChild}}{{/renderChild}}
+    {{#isPrefixOrSuffix}}<div class="govuk-input__wrapper">{{/isPrefixOrSuffix}}
+        {{#attributes}}
+            {{#prefix}}
+                <div class="govuk-input__prefix" aria-hidden="true">{{prefix}}</div>
+            {{/prefix}}
+        {{/attributes}}
+        <input
+            type="{{type}}"
+            name="{{id}}"
+            id="{{id}}"
+            class="{{^className}}govuk-input{{/className}}{{#className}}{{className}}{{/className}}{{#error}} govuk-input--error{{/error}}"
+            aria-required="{{required}}"
+            {{#value}} value="{{value}}"{{/value}}
+            {{#min}} min="{{min}}"{{/min}}
+            {{#max}} max="{{max}}"{{/max}}
+            {{#maxlengthAttribute}}
+              {{#maxlength}} maxlength="{{maxlength}}"{{/maxlength}}
+            {{/maxlengthAttribute}}
+            {{#pattern}} pattern="{{pattern}}"{{/pattern}}
+            {{#hintId}} aria-describedby="{{hintId}}"{{/hintId}}
+            {{#error}} aria-invalid="true"{{/error}}
+            {{#autocomplete}} autocomplete="{{autocomplete}}"{{/autocomplete}}
+            {{#attributes}}
+                {{attribute}}="{{value}}"
+            {{/attributes}}
+        >
+        {{#attributes}}
+            {{#suffix}}
+                <div class="govuk-input__suffix" aria-hidden="true">{{suffix}}</div>
+            {{/suffix}}
+        {{/attributes}}
+    {{#isPrefixOrSuffix}}</div>{{/isPrefixOrSuffix}}
+</div>