Merge pull request #125 from dod-ccpo/vue

Add Parcel front end stuff

.gitignore

@@ -23,6 +23,9 @@ static/fonts
 # font files originate from a node module
 static/fonts/*
 
+static/assets
+static/assets/*
+
 # local log files
 log/*
 

Pipfile

@@ -17,6 +17,7 @@ flask = "*"
 flask-sqlalchemy = "*"
 flask-assets = "*"
 flask-session = "*"
+flask-wtf = "*"
 
 [dev-packages]
 bandit = "*"

Pipfile.lock

@@ -1,7 +1,7 @@
 {
     "_meta": {
         "hash": {
-            "sha256": "9f17530cb96833c424369b9cac305cb43a817cdf19605aaedeb2d98566302857"
+            "sha256": "0738d50fa0153e356ddd9ce23bcc781914ed0fe860044457a9db9fc0e1cff46b"
         },
         "pipfile-spec": 6,
         "requires": {
@@ -62,6 +62,14 @@
             "index": "pypi",
             "version": "==2.3.2"
         },
+        "flask-wtf": {
+            "hashes": [
+                "sha256:5d14d55cfd35f613d99ee7cba0fc3fbbe63ba02f544d349158c14ca15561cc36",
+                "sha256:d9a9e366b32dcbb98ef17228e76be15702cd2600675668bca23f63a7947fd5ac"
+            ],
+            "index": "pypi",
+            "version": "==0.14.2"
+        },
         "itsdangerous": {
             "hashes": [
                 "sha256:cbb3fcf8d3e33df861709ecaf89d9e6629cff0a217bc2848f1b41cd30d360519"
@@ -160,6 +168,7 @@
                 "sha256:1d936da41ee06216d89fdc7ead1ee9a5da2811a8787515a976b646e110c3f622",
                 "sha256:e4ef42e82b0b493c5849eed98b5ab49d6767caf982127e9a33167f1153b36cc5"
             ],
+            "markers": "python_version != '3.2.*' and python_version != '3.3.*' and python_version != '3.0.*' and python_version != '3.1.*' and python_version >= '2.7'",
             "version": "==2018.5"
         },
         "redis": {
@@ -393,6 +402,7 @@
                 "sha256:b9c40e9750f3d77e6e4d441d8b0266cf555e7cdabdcff33c4fd06366ca761ef8",
                 "sha256:ec9ef8f4a9bc6f71eec99e1806bfa2de401650d996c59330782b89a5555c1497"
             ],
+            "markers": "python_version != '3.2.*' and python_version != '3.1.*' and python_version != '3.3.*' and python_version >= '2.7' and python_version != '3.0.*'",
             "version": "==4.3.4"
         },
         "itsdangerous": {
@@ -510,6 +520,7 @@
                 "sha256:6e3836e39f4d36ae72840833db137f7b7d35105079aee6ec4a62d9f80d594dd1",
                 "sha256:95eb8364a4708392bae89035f45341871286a333f749c3141c20573d2b3876e1"
             ],
+            "markers": "python_version != '3.2.*' and python_version != '3.1.*' and python_version != '3.3.*' and python_version >= '2.7' and python_version != '3.0.*'",
             "version": "==0.7.1"
         },
         "prompt-toolkit": {
@@ -532,6 +543,7 @@
                 "sha256:3fd59af7435864e1a243790d322d763925431213b6b8529c6ca71081ace3bbf7",
                 "sha256:e31fb2767eb657cbde86c454f02e99cb846d3cd9d61b318525140214fdc0e98e"
             ],
+            "markers": "python_version != '3.2.*' and python_version != '3.1.*' and python_version != '3.3.*' and python_version >= '2.7' and python_version != '3.0.*'",
             "version": "==1.5.4"
         },
         "pygments": {
@@ -551,11 +563,11 @@
         },
         "pytest": {
             "hashes": [
-                "sha256:8214ab8446104a1d0c17fbd218ec6aac743236c6ffbe23abc038e40213c60b88",
+                "sha256:86a8dbf407e437351cef4dba46736e9c5a6e3c3ac71b2e942209748e76ff2086",
-                "sha256:e2b2c6e1560b8f9dc8dd600b0923183fbd68ba3d9bdecde04467be6dd296a384"
+                "sha256:e74466e97ac14582a8188ff4c53e6cc3810315f342f6096899332ae864c1d432"
             ],
             "index": "pypi",
-            "version": "==3.7.0"
+            "version": "==3.7.1"
         },
         "pytest-flask": {
             "hashes": [
@@ -581,15 +593,11 @@
         },
         "pyyaml": {
             "hashes": [
-                "sha256:1cbc199009e78f92d9edf554be4fe40fb7b0bef71ba688602a00e97a51909110",
                 "sha256:254bf6fda2b7c651837acb2c718e213df29d531eebf00edb54743d10bcb694eb",
                 "sha256:3108529b78577327d15eec243f0ff348a0640b0c3478d67ad7f5648f93bac3e2",
                 "sha256:3c17fb92c8ba2f525e4b5f7941d850e7a48c3a59b32d331e2502a3cdc6648e76",
-                "sha256:6f89b5c95e93945b597776163403d47af72d243f366bf4622ff08bdfd1c950b7",
                 "sha256:8d6d96001aa7f0a6a4a95e8143225b5d06e41b1131044913fecb8f85a125714b",
-                "sha256:be622cc81696e24d0836ba71f6272a2b5767669b0d79fdcf0295d51ac2e156c8",
+                "sha256:c8a88edd93ee29ede719080b2be6cb2333dfee1dccba213b422a9c8e97f2967b"
-                "sha256:c8a88edd93ee29ede719080b2be6cb2333dfee1dccba213b422a9c8e97f2967b",
-                "sha256:f39411e380e2182ad33be039e8ee5770a5d9efe01a2bfb7ae58d9ba31c4a2a9d"
             ],
             "version": "==4.2b4"
         },

README.md

@@ -57,6 +57,10 @@ To start the app locally in the foreground and watch for changes:
 
     script/dev_server
 
+To watch for changes to any js/css assets:
+
+    yarn watch
+
 ### Users
 
 There are currently six mock users for development:

atst/app.py

@@ -63,6 +63,11 @@ def make_flask_callbacks(app):
             "atat_permissions": [],
         }
 
+    @app.template_filter('iconSvg')
+    def _iconSvg(name):
+        with open('static/icons/'+name+'.svg') as contents:
+            return contents.read()
+
 
 def map_config(config):
     return {

atst/assets.py

@@ -3,10 +3,14 @@ from flask_assets import Environment, Bundle
 environment = Environment()
 
 css = Bundle(
-    "../scss/atat.scss",
+    "../static/assets/index.css",
-    filters="scss",
+    output="../static/assets/index.%(version)s.css",
-    output="../static/assets/out.%(version)s.css",
-    depends=("**/*.scss"),
 )
 
 environment.register("css", css)
+
+js = Bundle(
+    '../static/assets/index.js',
+    output='../static/assets/index.%(version)s.js'
+)
+environment.register('js_all', js)

js/example.js

@@ -0,0 +1,4 @@
+window.onload = function() {
+  console.log('hello from example')
+}
+

js/index.js

@@ -0,0 +1,5 @@
+import classes from '../styles/atat.scss'
+
+import './example'
+
+console.log('hello from index')

package.json

@@ -4,12 +4,19 @@
   "description": "ATST Stateless Services",
   "main": "index.js",
   "scripts": {
+    "watch": "parcel watch js/index.js -d static/assets --public-url /static/assets -o index.js --no-autoinstall",
+    "build": "parcel build js/index.js -d static/assets --public-url /static/assets -o index.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
   "license": "MIT",
   "dependencies": {
     "npm": "^6.0.1",
-    "uswds": "^1.6.3"
+    "parcel": "^1.9.7",
+    "uswds": "^1.6.3",
+    "vue": "^2.5.17"
+  },
+  "devDependencies": {
+    "node-sass": "^4.9.2"
   }
 }

script/bootstrap

@@ -5,9 +5,6 @@
 
 source "$(dirname "${0}")"/../script/include/global_header.inc.sh
 
-# Set sass compiling command for this app
-COMPILE_SASS_CMD="webassets -m atst.assets build"
-
 # Enable python and node package installation
 INSTALL_PYTHON_PACKAGES="true"
 INSTALL_NODE_PACKAGES="true"

script/cibuild

@@ -5,4 +5,19 @@
 source "$(dirname "${0}")"/../script/include/global_header.inc.sh
 
 # Run lint/style checks and unit tests
-source ./script/test
+export FLASK_ENV=ci
+
+# Enable database resetting
+RESET_DB="true"
+
+# Define all relevant python files and directories for this app
+PYTHON_FILES="./app.py ./atst ./config"
+
+# Enable Python testing
+RUN_PYTHON_TESTS="true"
+
+# Compile assets
+yarn build
+
+# Run the shared test script
+source ./script/include/run_test

script/include

@@ -1 +1 @@
-Subproject commit 05492977844309215c122e925159f9f8c62014e3
+Subproject commit 8cf96c9776e7fd73c11d57160d26fc1715bf00da

script/ingest_pe_numbers.py

@@ -7,7 +7,7 @@ import sys
 parent_dir = os.path.abspath(os.path.join(os.path.dirname(__file__), '..'))
 sys.path.append(parent_dir)
 
-from atst.app import make_deps, make_config
+from atst.app import make_app, make_config
 from atst.domain.pe_numbers import PENumbers
 
 
@@ -23,9 +23,11 @@ def make_pe_number_repo(config):
 
 if __name__ == "__main__":
     config = make_config()
-    url = config["default"]['PE_NUMBER_CSV_URL']
+    url = config['PE_NUMBER_CSV_URL']
     print("Fetching PE numbers from {}".format(url))
     pe_numbers = get_pe_numbers(url)
-    print("Inserting {} PE numbers".format(len(pe_numbers)))
+
-    pe_numbers_repo = make_pe_number_repo(config)
+    app = make_app(config)
-    pe_numbers_repo.create_many(pe_numbers)
+    with app.app_context():
+        print("Inserting {} PE numbers".format(len(pe_numbers)))
+        PENumbers.create_many(pe_numbers)

script/setup

@@ -8,9 +8,6 @@ source "$(dirname "${0}")"/../script/include/global_header.inc.sh
 # Turn on sass compiler installation
 INSTALL_SASS="true"
 
-# Set database name
-DATABASE_NAME="atat"
-
 # Enable database resetting
 RESET_DB="true"
 

script/test

@@ -6,9 +6,6 @@ source "$(dirname "${0}")"/../script/include/global_header.inc.sh
 
 export FLASK_ENV=test
 
-# Set database name
-DATABASE_NAME="atat_test"
-
 # Enable database resetting
 RESET_DB="true"
 

styles/atat.scss

@@ -1,5 +1,5 @@
 @import 'core/variables';
-@import '../node_modules/uswds/src/stylesheets/uswds';
+@import 'node_modules/uswds/src/stylesheets/uswds';
 
 @import 'core/grid';
 @import 'core/util';

styles/components/_progress_menu.scss

@@ -88,7 +88,7 @@
     }
 
     &--complete:before {
-      content: url('/static/icons/checkmark.svg');
+      content: url('#{$asset-path}/icons/checkmark.svg');
       background-color: $color-blue;
       border: 2px solid $color-blue;
       font-size: $h6-font-size;
@@ -100,4 +100,4 @@
     }
 
   }
-}
+}

styles/components/_search_bar.scss

@@ -62,7 +62,7 @@
       text-align: center;
 
       &:after {
-        content: url('/static/icons/search.svg');
+        content: url('#{$asset-path}/icons/search.svg');
         display: inline-block;
         width: 1.6rem;
         height: 1.6rem;

styles/core/_variables.scss

@@ -129,7 +129,7 @@ $grid-columns-large: 12;
 // $large: new-breakpoint(min-width $large-screen $grid-columns-large);
 
 // Set the base path for assets (used for font and image paths below)
-$asset-path: '../';
+$asset-path: '../static/';
 
 // Relative font and image file paths
 $font-path: '#{$asset-path}fonts';

templates/base.html

@@ -34,5 +34,8 @@
   {% include 'footer.html' %}
 
   {% block modal %}{% endblock %}
+  {% assets "js_all" %}
+    <script src="{{ ASSET_URL }}"></script>
+  {% endassets %}
 </body>
 </html>

templates/components.html

@@ -1,145 +0,0 @@
-{% macro Icon(name, classes="") -%}
-    {% autoescape false %}
-        <span class="icon icon--{{name}} {{classes}}" aria-hidden="true">{{ svg }}</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,29 @@
+{% from "components/icon.html" import Icon %}
+
+{% 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/home.html

@@ -5,6 +5,7 @@
 <main class="usa-section usa-content">
 
 <h1>Home</h1>
+<div id='hello'></div>
 
 </main>
 

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'),
+      href='/workspace_projects/123456',
-      active=matchesPath('\/workspaces\/[A-Za-z0-9]*\/projects'),
+      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'),
+      href='/workspace_members/123456',
-      active=matchesPath('\/workspaces\/[A-Za-z0-9]*\/members'),
+      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'),
+      href='/workspace_reports/123456',
-      active=matchesPath('\/workspaces\/[A-Za-z0-9]*\/reports')
+      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" %}