form.njk

{##
 # Render form errors summary
 # @param {object} errors - A form error object
 # @param {string} errors.summary - A helpful summary
 # @param {object} errors.messages - A dictionary of errors with field name as key and message as value
 #}
{% macro ErrorSummary(errors) %}
  {% if errors.messages | length or errors.summary %}
    <div class="c-form-errors js-FormErrors" role="alert">
      <h1 class="c-form-errors__heading heading-medium">There was a problem submitting this form</h1>
      {% if errors.summary %}
        <p class="c-form-errors__summary">{{ errors.summary }}</p>
      {% endif %}
      {% if errors.messages | length %}
        <ul class="c-form-errors__list">
          {% for name, message in errors.messages %}
            <li class="c-form-errors__list-item">
              <a href="#group-field-{{ name }}">{{ message }}</a>
            </li>
          {% endfor %}
        </ul>
      {% endif %}
    </div>
  {% endif %}
{% endmacro %}

{##
 # Render form with form errors and CSRF token
 # @param {object} props - A form object
 # @param {string} [props.method=POST] - Form method
 # @param {string} [props.action] - Form action url
 # @param {object} [props.errors] - Object containing form errors
 # @param {object} [props.hiddenFields] - Custom fields to be added as hidden inputs
 # @param {boolean} [props.disableFormActions] - Avoid rendering form actions
 # @param {string} [props.class] - Form class name
 # @param {string} [props.role] - Form role attribute value
 # @param {string} [props.actionsClass] - Custom class name for actions container
 # @param {string} [props.buttonText=Submit] - Text for submit button
 # @param {string} [props.returnText=Back] - Text for return link
 # @param {string} [props.returnLink] - Location for return link
 #
 # @callback {function} caller - Required inner contents
 #}
{% macro Form(props) %}
  {% set method = props.method or 'POST' -%}
  {% set buttonText = props.buttonText or 'Submit' %}
  {% set returnText = props.returnText or 'Back' %}

  <form
    method="{{ method }}"
    {% if props.action %}action="{{ props.action }}"{% endif -%}
    {% if props.class %}class="{{ props.class }}"{% endif %}
    {% if props.role %}role="{{ props.role }}"{% endif %}
  >
    {{ ErrorSummary(props.errors) }}

    {% set hiddenFields = props.hiddenFields | default({}) | assign({
      '_csrf': csrfToken if method|lower === 'post'
    }) %}

    {% if hiddenFields|length %}
      {% for fieldName, fieldValue in hiddenFields | removeNilAndEmpty %}
        {% if fieldValue | isArray %}
          {% for value in fieldValue %}
            <input type="hidden" name="{{ fieldName }}" value="{{ value }}">
          {% endfor %}
        {% else %}
          <input type="hidden" name="{{ fieldName }}" value="{{ fieldValue }}">
        {% endif %}
      {% endfor %}
    {% endif %}

    {{ caller() }}

    {% if not props.disableFormActions %}
      <div class="c-form-group c-form-group--actions {{ props.actionsClass }}">
        <button class="button">{{ buttonText }}</button>
        {% if props.returnLink %}
          <p><a href="{{ props.returnLink }}">{{ returnText }}</a></p>
        {% endif %}
      </div>
    {% endif %}
  </form>
{% endmacro %}

{##
 # Render multi-step form
 # @param {object} props - A form object
 #}
{% macro MultiStepForm(props) %}
  {% set formContent = caller() if caller else null %}
  {% set method = props.method or 'POST' -%}
  {% set hiddenFields = props.hiddenFields | default({}) | assign({
    'x-csrf-token': getLocal('csrf-token') if method|lower === 'post'
  }) %}

  {% call Form(props | assign({
    formContent: formContent,
    hiddenFields: hiddenFields
  })) %}
    {{ props.formContent }}
  {% endcall %}
{% endmacro %}

{##
 # Render entity search form
 # @param {object} props - A form object
 # @param {string} props.action - Form action url
 # @param {string} props.inputLabel - Search input label
 # @param {string} [props.inputPlaceholder={props.inputLabel}] - Search input placeholder
 # @param {string} [props.inputName=term] - Search input name
 # @param {string} [props.inputHint] - Hint for input
 # @param {string} [props.method=GET] - Form method
 # @param {string, array} [props.modifier] - Search form modifier (e.g. global)
 # @param {string, array} [props.fieldModifier] - Form field modifier
 # @param {string} [props.entityType=company] - Search entity type
 # @param {object} [props.hiddenFields] - Custom fields to be added as hidden inputs
 # @param {boolean} [props.isLabelHidden=true] - Whether input label should be hidden
 # @param {array} [props.aggregations] - Search aggregations summary
 #}
{% macro EntitySearchForm(props) %}
  {% set method = props.method | default('GET') -%}
  {% set inputName = props.inputName | default('term') -%}
  {% set inputPlaceholder = props.inputPlaceholder | default(props.inputLabel) -%}
  {% set isLabelHidden = props.isLabelHidden | default(true) %}
  {% set entityType = props.entityType | default('company') %}
  {% set modifier = props.modifier | concat('') | reverse | join(' c-entity-search--') if props.modifier %}

  {% call Form(props | assign({
    class: 'c-entity-search ' + modifier,
    role: 'search',
    method: method,
    disableFormActions: true,
    inputName: inputName,
    inputPlaceholder: inputPlaceholder,
    isLabelHidden: isLabelHidden,
    entityType: entityType,
    fieldModifier: props.fieldModifier
  })) %}

    {% call TextField({
      type: 'search',
      inputClass: 'c-entity-search__input',
      name: props.inputName,
      value: props.searchTerm,
      hint: props.inputHint,
      label: props.inputLabel,
      placeholder: props.inputPlaceholder,
      isLabelHidden: props.isLabelHidden,
      modifier: props.fieldModifier
    }) %}
      <button class="c-entity-search__button">Search</button>
    {% endcall %}

    {% if props.aggregations|length %}
      <nav class="c-entity-search__aggregations" aria-label="search results aggregation options">
        <ul>
          {% for item in props.aggregations %}
            {% set isCurrentPage = item.entity === props.entityType %}
            <li class="c-entity-search__aggregations-item {{ 'is-active' if isCurrentPage }}">
              {% if isCurrentPage %}
                {{ item.text }}
              {% else %}
                <a class="c-entity-search__aggregations-link" href="/search/{{ item.path }}?term={{ props.searchTerm }}">{{ item.text }}</a>
              {% endif %}
              <span class="c-entity-search__aggregations-count">({{ item.count | formatNumber }})</span>
            </li>
          {% endfor %}
        </ul>
      </nav>
    {% endif %}
  {% endcall %}
{% endmacro %}

{##
 # Render form group container with label hint and field error message
 # @param {object} props - An object containing group properties
 # @param {string} props.name - Field name
 # @param {string} props.fieldId - Field id
 # @param {string} props.label - Field label
 # @param {string} [props.hint] - Field hint
 # @param {string} [props.error] - Field error
 # @param {string} [props.element=div] - Group element
 # @param {string, array} [props.modifier] - Group modifier
 # @param {boolean} [props.optional] - Marks field as optional
 # @param {boolean} [props.isLabelHidden=false] - Whether input label should be hidden
 # @param {string} [props.condition.name] - Name of the field that controls this form group if it is a subfield
 # @param {string} [props.condition.value] - Value of the field that controls this form group if it is a subfield
 # @param {string} [props.innerContent] - Optional inner content generated by parent component
 #
 # @param {function} props.caller - Inner contents

 #}
{% macro FormGroup(props) %}
  {% set groupElement = props.element or 'div' %}
  {% set labelElement = 'legend' if groupElement == 'fieldset' else 'label' %}
  {% set isLabelHidden = props.isLabelHidden | default(false) %}
  {% set isConditional = props.condition %}
  {% set modifier = props.modifier | concat('') | reverse | join(' c-form-group--') if props.modifier %}

  {% if props.label and props.name -%}
    <{{ groupElement }}
      id="group-{{ props.fieldId }}"
      class="
        c-form-group
        {{ 'has-error' if props.error }}
        {{ 'js-ConditionalSubfield' if isConditional }}
        {{ modifier }}
        {{ props.class if props.class }}
      "
      {% if isConditional %}
        data-controlled-by="{{ props.condition.name }}"
        data-control-value="{{ props.condition.value }}"
      {% endif %}
    >
      <{{ labelElement }}
        class="c-form-group__label {{ 'u-visually-hidden' if isLabelHidden }}"
        {% if labelElement == 'label' %}for="{{ props.fieldId }}"{% endif %}
      >
        <span class="c-form-group__label-text">
          {{ props.label }} {{ '(optional)' if props.optional }}
        </span>
        {% if props.error %}
          <span class="c-form-group__error-message">{{ props.error }}</span>
        {% endif %}
        {% if props.hint %}
          <span class="c-form-group__hint" id="hint-{{ props.fieldId }}">{{ props.hint }}</span>
        {% endif %}
      </{{ labelElement }}>

      <div class="c-form-group__inner">
        {{ caller() }}
        {{ props.innerContent }}
      </div>
    </{{ groupElement }}>
  {%- endif %}
{% endmacro %}

{##
 # Render form fieldset with inner content
 # @param {object} props - An object containing field properties
 # @param {string} props.legend - Fieldset legend
 # @param {string, array} [props.modifier] - Fieldset modifier
 # @param {string} [props.condition.name] - Name of the field that controls this form group if it is a subfield
 # @param {string} [props.condition.value] - Value of the field that controls this form group if it is a subfield
 #
 # @callback {function} caller - Inner contents
#}
{% macro Fieldset(props) %}
  {% set modifier = props.modifier | concat('') | reverse | join(' c-form-fieldset--') if props.modifier %}

  <fieldset
    class="
      c-form-fieldset
      {{ props.class if props.class }}
      {{ modifier }}
      {{ 'js-ConditionalSubfield' if props.condition }}
    "
    {% if props.condition %}
      data-controlled-by="{{ props.condition.name }}"
      data-control-value="{{ props.condition.value }}"
    {% endif %}
  >
    {% if props.legend %}
      <legend class="c-form-fieldset__legend">
        <span class="c-form-fieldset__legend-text">{{ props.legend }}</span>
      </legend>
    {% endif %}

    {{ caller() }}
  </fieldset>
{% endmacro %}

{##
 # Render form group with a text field and corresponding label, hint and error message
 # @param {object} props - An object containing field properties
 # @param {string} props.name - Field name
 # @param {string} props.label - Field label
 # @param {string} [props.type] - Field type
 # @param {string} [props.idSuffix] - field id suffix (e.g. when used in loops)
 # @param {string} [props.groupClass] - Group class name
 # @param {string} [props.inputClass] - Input class name
 # @param {string} [props.hint] - Field hint
 # @param {string} [props.error] - Field error
 # @param {string, array} [props.modifier] - Field modifier
 # @param {boolean} [props.optional] - Marks field as optional
 #
 # @param {function} [props.caller] - Optional inner contents
 #}
{% macro TextField(props) %}
  {% set fieldId = 'field-' + props.name + ('-' + props.idSuffix if props.idSuffix) if props.name %}
  {% set innerContent = caller() if caller else null %}

  {% call FormGroup(props | assign({ fieldId: fieldId, modifier: props.modifier, innerContent: innerContent, class: props.groupClass })) %}
    {% if props.type === 'textarea' %}
      {{ TextArea(props | assign({ class: props.inputClass })) }}
    {% else %}
      {{ Input(props | assign({ class: props.inputClass })) }}
    {% endif %}
  {% endcall %}
{% endmacro %}

{##
 # Render form group with a multi choice field (dropdown, radio, checkboxes)
 # and corresponding label, hint and error message
 # @param {object} props - An object containing field properties
 # @param {string} props.name - Field name
 # @param {string} props.label - Field label
 # @param {sops.t} [props.type] - Field type
 # @param {string} [props.idSuffix] - field id suffix (e.g. when used in loops)
 # @param {string} [props.placeholder] - Field placeholder
 # @param {string} [props.hint] - Field hint
 # @param {string} [props.error] - Field error
 # @param {string} [props.groupClass] - Group class name
 # @param {string} [props.inputClass] - Input class name
 # @param {boolean} [props.optional] - Marks field as optional
 #
 # @param {function} [props.caller] - Optional inner contents
 #}
{% macro MultipleChoiceField(props) %}
  {% set fieldId = 'field-' + props.name + ('-' + props.idSuffix if props.idSuffix) if props.name %}
  {% set element = 'fieldset' if props.type in ['checkbox', 'radio'] %}
  {% call FormGroup(props | assign({ fieldId: fieldId, caller: caller, element: element, class: groupClass })) %}
    {% if props.type in ['checkbox', 'radio'] %}
      {{ MultipleChoice(props) }}
    {% else %}
      {{ SelectBox(props | assign({ class: inputClass })) }}
    {% endif %}
    {{ props.caller() if props.caller }}
  {% endcall %}
{% endmacro %}

{##
 # Render form group with a text field and corresponding label, hint and error message
 # @param {object} props - An object containing field properties
 # @param {string} props.name - Field name
 # @param {string} [props.groupClass] - Group class name
 # @param {string, array} [props.modifier] - Field modifier
 #
 # @param {function} [props.caller] - Optional inner contents
 #}
{% macro HiddenField(props) %}
  {% set fieldId = 'field-' + props.name if props.name %}
  {{ Input(props | assign({
    type: 'hidden',
    fieldId: fieldId
  })) }}
{% endmacro %}

{##
 # Render input field (form-control)
 # @param {object} props - An object containing field properties
 # @param {string} props.name - Field name
 # @param {string} props.fieldId - Field id
 # @param {string} [props.type] - Field type
 # @param {string} [props.class] - Field class name
 # @param {string} [props.value] - Initial value to set
 # @param {string} [props.placeholder] - Field placeholder
 # @param {string, array} [props.modifier] - form-control modifier
 # @param {string} [props.error] - Mark form-control with error
 #}
{% macro Input(props) %}
  {% set modifier = props.modifier | concat('') | reverse | join(' c-form-control--') if props.modifier %}

  <input
    name="{{ props.name }}"
    type="{{ props.type if props.type else 'text' }}"
    id="{{ props.fieldId }}"
    {% if props.placeholder %}placeholder="{{ props.placeholder }}"{% endif %}
    value="{{ props.value }}"
    class="c-form-control {{ modifier }} {{ 'has-error' if props.error }} {{ props.class }}"
    {% if props.autofocus %}autofocus{% endif %}
    {% if props.hint %}aria-describedby="hint-{{ props.fieldId }}"{% endif %}
  >
{% endmacro %}

{##
 # Render textarea field (form-control)
 # @param {object} props - An object containing field properties
 # @param {string} props.name - Field name
 # @param {string} props.fieldId - Field id
 # @param {string} [props.value] - Field type
 # @param {string} [props.class] - Field class name
 # @param {string} [props.placeholder] - Field placeholder
 # @param {string, array} [props.modifier] - form-control modifier
 # @param {string} [props.error] - Mark form-control with error
 #}
{% macro TextArea(props) %}
  {% set modifier = props.modifier | concat('') | reverse | join(' c-form-control--') if props.modifier %}

  <textarea
    name="{{ props.name }}"
    class="c-form-control {{ modifier }} {{ 'has-error' if props.error }} {{ props.class }}"
    id="{{ props.fieldId }}"
    placeholder="{{ props.placeholder }}"
    {% if props.hint %}aria-describedby="hint-{{ props.fieldId }}"{% endif %}
    {% if props.autofocus %}autofocus{% endif %}
    rows="8"
  >{{ props.value }}</textarea>
{% endmacro %}

{##
 # Render select field (form-control)
 # @param {object} props - An object containing field properties
 # @param {string} props.name - Field name
 # @param {string} props.fieldId - Field id
 # @param {string} [props.class] - Field class name
 # @param {string} [props.options] - Field options
 # @param {string, array} [props.modifier] - form-control modifier
 # @param {string} [props.error] - Mark form-control with error
 # @param {string} [props.value] - Selected field value
 # @param {string} [props.initialOption] - Initial option label to use for empty value
 #}
{% macro SelectBox(props) %}
  {% set modifier = props.modifier | concat('') | reverse | join(' c-form-control--') if props.modifier %}

  <select
    id="{{ props.fieldId }}"
    name="{{ props.name }}"
    class="c-form-control {{ modifier }} {{ 'has-error' if props.error }} {{ props.class }}"
    {% if props.hint %}aria-describedby="hint-{{ props.fieldId }}"{% endif %}
  >
    {% if props.initialOption %}
      <option value="">{{ props.initialOption }}</option>
    {% endif %}
    {% for option in props.options %}
      <option value="{{ option.value }}" {% if option.value and props.value === option.value %}selected{% endif %}>
        {{ option.label }}
      </option>
    {% endfor %}
  </select>
{% endmacro %}

{##
 # Render checkbox or radio button (multiple-choice)
 # @param {object} props - An object containing field properties
 # @param {string} props.name - Field name
 # @param {string} props.fieldId - Field id
 # @param {string} props.options - Field options
 # @param {string, array} [props.modifier] - multiple-choice field modifier
 # @param {string} [props.value] - Checked field value
 # @param {string} [props.children] - Main field subfields
 # @param {string} [props.options[].subfield] - Field options subfields
 # @param {string} [props.initialOption] - Initial option label to use for empty value in select box
 #}
{% macro MultipleChoice(props) %}
  {% if props.type in ['checkbox', 'radio'] %}
    {% set fieldChildren = props.children or [] %}
    {% set modifier = props.modifier | concat('') | reverse | join(' c-multiple-choice--') if props.modifier %}

    {% if props.type == 'radio' and props.initialOption %}
      <div class="c-multiple-choice {{ modifier }}">
        <input
          class="c-multiple-choice__input"
          type="{{ props.type }}"
          name="{{ props.name }}"
          id="{{ props.fieldId }}-0"
          value=""
          {% if not props.value %}checked{% endif %}
        >
        <label class="c-multiple-choice__label" for="{{ props.fieldId }}-0">
          <span class="c-multiple-choice__label-text">{{ props.initialOption }}</span>
        </label>
      </div>
    {% endif %}

    {% for option in props.options %}
      {% set selected = props.value|default([]) %}
      {% set optionChildren = option.children|default([]) %}
      <div class="c-multiple-choice {{ modifier }}">
        <input
          class="c-multiple-choice__input"
          type="{{ props.type }}"
          name="{{ props.name }}"
          value="{{ option.value }}"
          id="{{ props.fieldId }}-{{ loop.index }}"
          {% if not selected | isNull and option.value in selected | string %}checked{% endif %}
          {% if props.hint %}aria-describedby="hint-{{ props.fieldId }}"{% endif %}
        >
        <label class="c-multiple-choice__label" for="{{ props.fieldId }}-{{ loop.index }}">
          <span class="c-multiple-choice__label-text">{{ option.label }}</span>
          {% if option.hint %}
            <span class="c-multiple-choice__hint">{{ option.hint }}</span>
          {% endif %}
        </label>

        {% for child in optionChildren %}
          {{ child }}
        {% endfor %}
      </div>
    {% endfor %}

    {% for child in fieldChildren %}
      {{ child }}
    {% endfor %}
  {% endif %}
{% endmacro %}