Requests index rendering

templates/components.html

@@ -31,7 +31,17 @@
     </li>
 {%- endmacro %}
 
-{% macro EmptyState(self, message, actionLabel, actionHref, icon=None) -%}
+{% macro Modal() -%}
+<div class='modal'>
+  <div class='modal__dialog' role='dialog' aria-modal='true'>
+    <div class='modal__body'>
+        {{ caller() }}
+    </div>
+  </div>
+</div>
+{%- endmacro %}
+
+{% macro EmptyState(message, actionLabel, actionHref, icon=None) -%}
 <div class='empty-state'>
   <p>{{ message }}</p>
 
@@ -42,3 +52,41 @@
   <a href='{{ actionHref }}' class='usa-button usa-button-big'>{{ actionLabel }}</a>
 </div>
 {%- endmacro %}
+
+{% macro Alert(title, message=None, actions=None, level='info') -%}
+{% 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='alert alert--{{level}}' role='{{role}}' aria-live='{{levels.get(level).get('tone')}}'>
+  {{ Icon(levels.get(level).get('icon'), classes='alert__icon icon--large') }}
+
+  <div class='alert__content'>
+    <h2 class='alert__title'>{{title}}</h2>
+
+    {% if message %}
+      <div class='alert__message'>{{ message | safe }}</div>
+    {% endif %}
+
+    {% if actions %}
+      <div class='alert__actions'>{{ actions | safe }}</div>
+    {% endif %}
+  </div>
+</div>
+{%- endmacro %}