Reorganize macros into separate component files

Replace a few old UI Module instances with  macros

templates/components.html

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

templates/member_edit.html.to

@@ -1,5 +1,7 @@
 {% extends "base_workspace.html.to" %}
 
+{% from "components/alert.html" import Alert %}
+
 {% block template_vars %}
 {% set is_new_member = False %}
 {% set member_name = "Danny Knight" %}
@@ -10,11 +12,12 @@
 
 {% block workspace_content %}
 
-{% module Alert(
+{{ Alert(
   "UI Mock",
   message="<p>Please note, this screen is a non-functional UI mockup.</p>",
   level="info"
-  ) %}
+  )
+}}
 
 
   <div class='panel'>

templates/navigation/_sidenav_item.html.to

@@ -1,24 +0,0 @@
-<li>
-  <a class="sidenav__link {% if active %}sidenav__link--active{% end %}" href="{{href}}" title="{{label}}">
-    {% if icon %}
-      {% module Icon(icon, classes="sidenav__link-icon") %}
-    {% end %}
-
-    <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{% end %}" href="{{item["href"]}}" title="{{item["label"]}}">
-          {% if "icon" in item %}
-            {% module Icon(item["icon"], classes="sidenav__link-icon") %}
-          {% end %}
-          <span class="sidenav__link-label">{{item["label"]}}</span>
-        </a>
-      </li>
-    {% end %}
-    </ul>
-  {% end %}
-</li>

templates/navigation/global_navigation.html

@@ -1,4 +1,5 @@
-{% from "components.html" import SidenavItem %}
+{% from "components/sidenav_item.html" import SidenavItem %}
+
 <div class="global-navigation sidenav global-navigation__context--{{context}}">
   <ul>
     {% if g.dev %}

templates/navigation/topbar.html

@@ -1,4 +1,5 @@
-{% from "components.html" import Icon %}
+{% from "components/icon.html" import Icon %}
+
 <header class="topbar">
   <nav class="topbar__navigation">
     <a href="/home" class="topbar__link topbar__link--shield" title="JEDI Home">

templates/navigation/workspace_navigation.html.to

@@ -1,42 +1,44 @@
+{% from "components/sidenav_item.html" import SidenavItem %}
+
 <nav class='sidenav workspace-navigation'>
   <ul>
-    {% module SidenavItem(
+    {{ SidenavItem(
       "Projects",
-      href=reverse_url('workspace_projects', '123456'),
-      active=matchesPath('\/workspaces\/[A-Za-z0-9]*\/projects'),
+      href='/workspace_projects/123456',
+      active=g.matchesPath('\/workspaces\/[A-Za-z0-9]*\/projects'),
       subnav=[
         {
           "label": "Add New Project",
           "href":"/",
-          "active": matchesPath('workspaces/projects/new'),
+          "active": g.matchesPath('workspaces/projects/new'),
           "icon": "plus"
         }
       ]
-    )%}
+    ) }}
 
-    {% module SidenavItem(
+    {{ SidenavItem(
       "Members",
-      href=reverse_url('workspace_members', '123456'),
-      active=matchesPath('\/workspaces\/[A-Za-z0-9]*\/members'),
+      href='/workspace_members/123456',
+      active=g.matchesPath('\/workspaces\/[A-Za-z0-9]*\/members'),
       subnav=[
         {
           "label": "Add New Member",
           "href": "",
-          "active": matchesPath('/workspaces/members/new'),
+          "active": g.matchesPath('/workspaces/members/new'),
           "icon": "plus"
         },
         {
           "label": "Editing Member",
           "href": "",
-          "active": matchesPath('/workspaces/123456/members/789/edit')
+          "active": g.matchesPath('/workspaces/123456/members/789/edit')
         }
       ]
-    )%}
+    ) }}
 
-    {% module SidenavItem(
+    {{ SidenavItem(
       "Funding & Reports",
-      href=reverse_url('workspace_projects', '123456'),
-      active=matchesPath('\/workspaces\/[A-Za-z0-9]*\/reports')
-    )%}
+      href='/workspace_reports/123456',
+      active=g.matchesPath('\/workspaces\/[A-Za-z0-9]*\/reports')
+    ) }}
   </ul>
 </nav>

templates/project_edit.html.to

@@ -1,5 +1,7 @@
 {% extends "base_workspace.html.to" %}
 
+{% from "components/alert.html" import Alert %}
+
 {% block template_vars %}
   {% set is_new_project = False %}
   {% set project_name = "Code.mil" %}
@@ -8,11 +10,11 @@
 
 {% block workspace_content %}
 
-{% module Alert(
+{{ Alert(
   "UI Mock",
   message="<p>Please note, this screen is a non-functional UI mockup.</p>",
   level="warning"
-) %}
+) }}
 
 <form action=''>
   <div class='panel'>

templates/requests.html

@@ -1,6 +1,8 @@
 {% extends "base.html" %}
 
-{% from "components.html" import Modal, Alert, EmptyState %}
+{% from "components/alert.html" import Alert %}
+{% from "components/modal.html" import Modal %}
+{% from "components/empty_state.html" import EmptyState %}
 
 {% block modal %}
   {% if g.modalOpen %}

templates/requests/screen-1.html

@@ -1,6 +1,8 @@
 {% extends 'requests_new.html' %}
 
-{% from "components.html" import Alert, TextInput, OptionsInput %}
+{% from "components/alert.html" import Alert %}
+{% from "components/text_input.html" import TextInput %}
+{% from "components/options_input.html" import OptionsInput %}
 
 {% block subtitle %}
 <h2>Details of Use</h2>

templates/requests/screen-2.html

@@ -1,6 +1,8 @@
 {% extends 'requests_new.html' %}
 
-{% from "components.html" import Alert, TextInput, OptionsInput %}
+{% from "components/alert.html" import Alert %}
+{% from "components/text_input.html" import TextInput %}
+{% from "components/options_input.html" import OptionsInput %}
 
 {% block subtitle %}
 <h2>Information About You</h2>

templates/requests/screen-3.html

@@ -1,6 +1,7 @@
 {% extends 'requests_new.html' %}
 
-{% from "components.html" import Alert, TextInput %}
+{% from "components/alert.html" import Alert %}
+{% from "components/text_input.html" import TextInput %}
 
 {% block subtitle %}
 <h2>Primary Government/Military <br> Point of Contact (POC)</h2>

templates/requests/screen-4.html

@@ -1,6 +1,7 @@
 {% extends 'requests_new.html' %}
 
-{% from "components.html" import Alert, TextInput %}
+{% from "components/alert.html" import Alert %}
+{% from "components/text_input.html" import TextInput %}
 
 {% block subtitle %}
 <h2>Review &amp; Submit</h2>

templates/requests/screen-5.html

@@ -1,5 +1,7 @@
 {% extends '../requests_new.html.to' %}
 
+{% from "components/alert.html" import Alert %}
+
 {% block form %}
 
 {% if f.errors %}

templates/styleguide.html

@@ -1,6 +1,8 @@
 {% extends "base.html" %}
 
-{% from "components.html" import Alert, Modal, Icon %}
+{% from "components/icon.html" import Icon %}
+{% from "components/modal.html" import Modal %}
+{% from "components/alert.html" import Alert %}
 
 {% block modal %}
   {% if g.modalOpen %}

templates/workspace_members.html

@@ -1,15 +1,17 @@
 {% extends "base_workspace.html.to" %}
 
+{% from "components/empty_state.html" import EmptyState %}
+
 {% block workspace_content %}
 
 {% if not members %}
 
-  {% module EmptyState(
+  {{ EmptyState(
     'There are currently no members in this Workspace.',
     actionLabel='Invite a new Member',
     actionHref='/members/new',
     icon='avatar'
-  )%}
+  ) }}
 
 
 {% else %}

templates/workspace_projects.html

@@ -1,4 +1,4 @@
-{% from "components.html" import Icon %}
+{% from "components/icon.html" import Icon %}
 
 {% extends "base_workspace.html" %}