70 lines
1.7 KiB
HTML
70 lines
1.7 KiB
HTML
{% from "components/icon.html" import Icon %}
|
|
|
|
{% macro Alert(title=None, message=None, actions=None, level='info', fragment=None, vue_template=False) -%}
|
|
{% set role = 'alertdialog' if actions else 'alert' %}
|
|
{% set levels = {
|
|
'warning': {
|
|
'icon': 'alert',
|
|
'tone': 'assertive'
|
|
},
|
|
'error': {
|
|
'icon': 'alert',
|
|
'tone': 'assertive'
|
|
},
|
|
'info': {
|
|
'icon': 'info',
|
|
'tone': 'polite'
|
|
},
|
|
'success': {
|
|
'icon': 'ok',
|
|
'tone': 'polite'
|
|
}
|
|
} %}
|
|
|
|
<div class='usa-alert usa-alert-{{level}}' role='{{role}}' aria-live='{{levels.get(level).get('tone')}}'>
|
|
|
|
<div class='usa-alert-body'>
|
|
{% if vue_template %}
|
|
<h3 class='usa-alert-heading' v-text='title'></h3>
|
|
{% elif title %}
|
|
<h3 class='usa-alert-heading'>{{ title | safe }}</h3>
|
|
{% endif %}
|
|
|
|
{% if message %}
|
|
<p class='usa-alert-text'>
|
|
{{ message | safe }}
|
|
</p>
|
|
{% endif %}
|
|
|
|
{% if caller %}
|
|
<div class='usa-alert-text'>{{ caller() }}</div>
|
|
{% endif %}
|
|
|
|
{% if fragment %}
|
|
<div class='usa-alert-text'>
|
|
{% include fragment %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if actions %}
|
|
<div class='alert__actions'>
|
|
{% if actions is string %}
|
|
|
|
{{ actions | safe }}
|
|
|
|
{% elif actions is iterable %}
|
|
|
|
{% for action in actions %}
|
|
<a href='{{ action["href"] }}' class='icon-link'>
|
|
{% if 'icon' in action %}{{ Icon(action["icon"]) }}{% endif %}
|
|
<span>{{ action["label"] }}</span>
|
|
</a>
|
|
{% endfor %}
|
|
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{%- endmacro %}
|