Reorganize macros into separate component files

Replace a few old UI Module instances with  macros

templates/components/alert.html

@@ -0,0 +1,39 @@
+{% from "components/icon.html" import Icon %}
+
+{% 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 %}