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 %}

templates/components/alert.html.to

@@ -1,35 +0,0 @@
-{% 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')}}'>
-  {% module 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'>{% raw message %}</div>
-    {% end %}
-
-    {% if actions %}
-      <div class='alert__actions'>{% raw actions %}</div>
-    {% end %}
-  </div>
-</div>

templates/components/empty_state.html

@@ -0,0 +1,13 @@
+{% from "components/icon.html" import Icon %}
+
+{% macro EmptyState(message, actionLabel, actionHref, icon=None) -%}
+  <div class='empty-state'>
+    <p>{{ message }}</p>
+
+    {% if icon %}
+      {{ Icon(icon) }}
+    {% endif %}
+
+    <a href='{{ actionHref }}' class='usa-button usa-button-big'>{{ actionLabel }}</a>
+  </div>
+{%- endmacro %}

templates/components/empty_state.html.to

@@ -1,9 +0,0 @@
-<div class='empty-state'>
-  <p>{{ message }}</p>
-
-  {% if icon %}
-    {% module Icon(icon) %}
-  {% end %}
-
-  <a href='{{ actionHref }}' class='usa-button usa-button-big'>{{ actionLabel }}</a>
-</div>

templates/components/icon.html

@@ -0,0 +1,6 @@
+{% macro Icon(name, classes="") -%}
+  {% autoescape false %}
+      <span class="icon icon--{{name}} {{classes}}" aria-hidden="true">{{ name | iconSvg }}</span>
+  {% endautoescape %}
+{%- endmacro %}
+

templates/components/icon.html.to

@@ -1,2 +0,0 @@
-{% autoescape None %}
-<span class="icon icon--{{name}} {{classes}}" aria-hidden="true">{{ svg }}</span>

templates/components/modal.html

@@ -0,0 +1,9 @@
+{% macro Modal() -%}
+  <div class='modal'>
+    <div class='modal__dialog' role='dialog' aria-modal='true'>
+      <div class='modal__body'>
+          {{ caller() }}
+      </div>
+    </div>
+  </div>
+{%- endmacro %}

templates/components/modal.html.to

@@ -1,7 +0,0 @@
-<div class='modal'>
-  <div class='modal__dialog' role='dialog' aria-modal='true'>
-    <div class='modal__body'>
-      {% raw body %}
-    </div>
-  </div>
-</div>

templates/components/options_input.html

@@ -0,0 +1,27 @@
+{% macro OptionsInput(field, inline=False) -%}
+  <div class='usa-input {% if errors %}usa-input--error{% endif %}'>
+
+    <fieldset class="usa-input__choices {% if inline %}usa-input__choices--inline{% endif %}">
+      <legend>
+        {{ field.label }}
+
+        {% if field.description %}
+          <span class='usa-input__help'>{{ field.description | safe }}</span>
+        {% endif %}
+
+        {% if field.errors %}
+          {{ Icon('alert') }}
+        {% endif %}
+      </legend>
+
+      {{ field() }}
+
+      {% if field.errors %}
+        {% for error in field.errors %}
+          <span class='usa-input__message'>{{ error }}</span>
+        {% endfor %}
+      {% endif %}
+
+    </fieldset>
+  </div>
+{%- endmacro %}

templates/components/options_input.html.to

@@ -1,25 +0,0 @@
-<div class='usa-input {% if errors %}usa-input--error{% end %}'>
-
-  <fieldset class="usa-input__choices {% if inline %}usa-input__choices--inline{% end %}">
-    <legend>
-      {{ label }}
-
-      {% if description %}
-        <span class='usa-input__help'>{% raw description %}</span>
-      {% end %}
-
-      {% if errors %}
-        {% module Icon('alert') %}
-      {% end %}
-    </legend>
-
-    {% raw field() %}
-
-    {% if errors %}
-      {% for error in errors %}
-        <span class='usa-input__message'>{{ error }}</span>
-      {% end %}
-    {% end %}
-
-  </fieldset>
-</div>

templates/components/sidenav_item.html

@@ -0,0 +1,28 @@
+{% from "components/icon.html" import Icon %}
+
+{% macro SidenavItem(label, href, active=False, icon=None, subnav=None) -%}
+  <li>
+  <a class="sidenav__link {% if active %}sidenav__link--active{% endif %}" href="{{href}}" title="{{label}}">
+    {% if icon %}
+      {{ Icon(icon, classes="sidenav__link-icon") }}
+    {% endif %}
+
+    <span class="sidenav__link-label">{{label}}</span>
+  </a>
+
+  {% if subnav and active %}
+      <ul>
+      {% for item in subnav %}
+      <li>
+          <a class="sidenav__link {% if item["active"] %}sidenav__link--active{% endif %}" href="{{item["href"]}}" title="{{item["label"]}}">
+          {% if "icon" in item %}
+              {{ Icon(item["icon"], classes="sidenav__link-icon") }}
+          {% endif %}
+          <span class="sidenav__link-label">{{item["label"]}}</span>
+          </a>
+      </li>
+      {% endfor %}
+      </ul>
+  {% endif %}
+  </li>
+{%- endmacro %}

templates/components/text_input.html

@@ -0,0 +1,23 @@
+{% macro TextInput(field, placeholder='') -%}
+  <div class='usa-input {% if errors %}usa-input--error{% endif %}'>
+    <label for={{field.name}}>
+      {{ field.label }}
+
+      {% if field.description %}
+        <span class='usa-input__help'>{{ field.description | safe }}</span>
+      {% endif %}
+
+      {% if errors %}
+        {{ Icon('alert') }}
+      {% endif %}
+    </label>
+
+    {{ field(placeholder=placeholder) | safe }}
+
+    {% if field.errors %}
+      {% for error in field.errors %}
+        <span class='usa-input__message'>{{ error }}</span>
+      {% endfor %}
+    {% endif %}
+  </div>
+{%- endmacro %}

templates/components/text_input.html.to

@@ -1,21 +0,0 @@
-<div class='usa-input {% if errors %}usa-input--error{% end %}'>
-  <label for={{field.name}}>
-    {{ label }}
-
-    {% if description %}
-      <span class='usa-input__help'>{% raw description %}</span>
-    {% end %}
-
-    {% if errors %}
-      {% module Icon('alert') %}
-    {% end %}
-  </label>
-
-  {% raw field(placeholder=placeholder) %}
-
-  {% if errors %}
-    {% for error in errors %}
-      <span class='usa-input__message'>{{ error }}</span>
-    {% end %}
-  {% end %}
-</div>