Files
notifications-admin/app/templates/components/textbox.html
2023-12-20 14:53:27 -08:00

74 lines
2.2 KiB
HTML

{% macro textbox(
field,
label=None,
hint=False,
highlight_placeholders=False,
autofocus=False,
autosize=False,
colour_preview=False,
help_link=None,
help_link_text=None,
width='2-3',
suffix=None,
safe_error_message=False,
rows=8,
extra_form_group_classes='',
placeholder=''
) %}
<div
class="form-group{% if field.errors %} form-group-error{% endif %} {{ extra_form_group_classes }}"
data-module="{% if autofocus %}autofocus{% elif colour_preview %}colour-preview{% endif %}"
>
{% if field.errors %}
<div class="usa-alert usa-alert--error edit-textbox-error-mt" role="alert">
<div class="usa-alert__body">
<h4 class="usa-alert__heading">Error message</h4>
<p class="usa-alert__text" data-module="track-error" data-error-type="{{ field.errors[0] }}" data-error-label="{{ field.name }}">
{% if not safe_error_message %}{{ field.errors[0] }}{% else %}{{ field.errors[0]|safe }}{% endif %}
</p>
</div>
</div>
{% endif %}
<label class="usa-label" for="{{ field.name }}">
{% if label %}
{{ label }}
{% else %}
{{ field.label.text }}
{% endif %}
</label>
{% if hint %}
<div class="usa-hint">
{{ hint }}
</div>
{% endif %}
{%
if highlight_placeholders or autosize
%}
{% set field_class = 'usa-textarea form-control-{} textbox-highlight-textbox'.format(width) %}
{% else %}
{% set field_class = 'form-control-{} {}'.format(width, 'textbox-right-aligned' if suffix else '') %}
{% endif %}
{%
set field_class = 'form-control ' + field_class + (
' form-control-error' if field.errors else ''
)
%}
{{ field(
class=field_class,
data_module='enhanced-textbox' if highlight_placeholders or autosize else '',
data_highlight_placeholders='true' if highlight_placeholders else 'false',
rows=rows|string,
placeholder=placeholder,
**kwargs
) }}
{% if suffix %}
<span>{{ suffix }}</span>
{% endif %}
{% if help_link and help_link_text %}
<p class="textbox-help-link">
<a class="usa-link" href='{{ help_link }}'>{{ help_link_text }}</a>
</p>
{% endif %}
</div>
{% endmacro %}