From 41259685b07fd2a8ddd394740c2430e0b226c5f3 Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Tue, 17 Jul 2018 10:41:50 -0400
Subject: [PATCH 01/10] Icon ui method

---
 atst/app.py                  | 3 ++-
 atst/ui.py                   | 5 +++++
 static/icons/trash.svg       | 1 +
 templates/styleguide.html.to | 1 +
 4 files changed, 9 insertions(+), 1 deletion(-)
 create mode 100644 atst/ui.py
 create mode 100644 static/icons/trash.svg

diff --git a/atst/app.py b/atst/app.py
index ed1be4a6..7dcc1b9a 100644
--- a/atst/app.py
+++ b/atst/app.py
@@ -15,10 +15,10 @@ from atst.handlers.dev import Dev
 from atst.home import home
 from atst.api_client import ApiClient
 from atst.sessions import RedisSessions
+from atst.ui import UI
 
 ENV = os.getenv("TORNADO_ENV", "dev")
 
-
 def make_app(config, deps, **kwargs):
 
     routes = [
@@ -104,6 +104,7 @@ def make_app(config, deps, **kwargs):
     )
     app.config = config
     app.sessions = deps["sessions"]
+    app.ui = UI
     return app
 
 
diff --git a/atst/ui.py b/atst/ui.py
new file mode 100644
index 00000000..6926febb
--- /dev/null
+++ b/atst/ui.py
@@ -0,0 +1,5 @@
+class UI:
+
+    def icon(name):
+        with open("../static/icons/%(name)s.svg") as svg:
+            return svg.read()
diff --git a/static/icons/trash.svg b/static/icons/trash.svg
new file mode 100644
index 00000000..c03b2a7e
--- /dev/null
+++ b/static/icons/trash.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 91 91"><path d="M67.305 36.442v-8.055c0-.939-.762-1.701-1.7-1.701H54.342v-5.524c0-.938-.761-1.7-1.699-1.7h-12.75c-.939 0-1.701.762-1.701 1.7v5.524H26.93c-.939 0-1.7.762-1.7 1.701v8.055c0 .938.761 1.699 1.7 1.699h.488v34.021c0 .938.761 1.7 1.699 1.7h29.481c3.595 0 6.52-2.924 6.52-6.518V38.142h.486c.939 0 1.701-.761 1.701-1.7zm-25.713-13.58h9.35v3.824h-9.35v-3.824zm20.127 44.483c0 1.719-1.4 3.117-3.12 3.117h-27.78v-32.32l30.9.002v29.201zm2.185-32.603H28.629v-4.655H63.905v4.655z"/><path d="M36.066 44.962h3.4v19.975h-3.4zM44.566 44.962h3.4v19.975h-3.4zM53.066 44.962h3.4v19.975h-3.4z"/></svg>
diff --git a/templates/styleguide.html.to b/templates/styleguide.html.to
index 4439a21d..8a2c489c 100644
--- a/templates/styleguide.html.to
+++ b/templates/styleguide.html.to
@@ -5,6 +5,7 @@
   <ul>
     <li>
       <a href='/' class='sidenav__link sidenav__link--active' aria-current='true'>Navigation Item</a>
+      {{ ui.icon('trash') }}
       <ul>
         <li><a href='/' class='sidenav__link sidenav__link--active'>Sub Navigation</a></li>
         <li><a href='/' class='sidenav__link'>Sub Navigation</a></li>

From e2799f8458349e65097b386f2cd0207c89c029fc Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Tue, 17 Jul 2018 14:41:44 -0400
Subject: [PATCH 02/10] Readme notes on icons

---
 README.md | 29 ++++++++++++++++++-----------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index fbd0daf9..311965be 100644
--- a/README.md
+++ b/README.md
@@ -12,43 +12,43 @@ microservices when appropriate.
 ## Installation
 
 ### Requirements
-See the [scriptz](https://github.com/dod-ccpo/scriptz) repository for the shared 
+See the [scriptz](https://github.com/dod-ccpo/scriptz) repository for the shared
 requirements and guidelines for all ATAT applications.
-Additionally, ATST requires a redis instance for session management. Have redis 
-installed and running. By default, ATST will try to connect to a redis instance 
+Additionally, ATST requires a redis instance for session management. Have redis
+installed and running. By default, ATST will try to connect to a redis instance
 running on localhost on its default port, 6379.
 
 ### Cloning
-This project contains git submodules. Here is an example clone command that will 
+This project contains git submodules. Here is an example clone command that will
 automatically initialize and update those modules:
 
     git clone --recurse-submodules git@github.com:dod-ccpo/atst.git
 
-If you have an existing clone that does not yet contain the submodules, you can 
+If you have an existing clone that does not yet contain the submodules, you can
 set them up with the following command:
 
     git submodule update --init --recursive
 
 ### Setup
 This application uses Pipenv to manage Python dependencies and a virtual
-environment. Instead of the classic `requirements.txt` file, pipenv uses a 
-Pipfile and Pipfile.lock, making it more similar to other modern package managers 
+environment. Instead of the classic `requirements.txt` file, pipenv uses a
+Pipfile and Pipfile.lock, making it more similar to other modern package managers
 like yarn or mix.
 
 To perform the installation, run the setup script:
 
     script/setup
 
-The setup script creates the virtual environment, and then calls script/bootstrap 
+The setup script creates the virtual environment, and then calls script/bootstrap
 to install all of the Python and Node dependencies.
 
 To enter the virtualenv manually (a la `source .venv/bin/activate`):
 
     pipenv shell
 
-If you want to automatically load the virtual environment whenever you enter the 
-project directory, take a look at [direnv](https://direnv.net/).  An `.envrc` 
-file is included in this repository.  direnv will activate and deactivate 
+If you want to automatically load the virtual environment whenever you enter the
+project directory, take a look at [direnv](https://direnv.net/).  An `.envrc`
+file is included in this repository.  direnv will activate and deactivate
 virtualenvs for you when you enter and leave the directory.
 
 
@@ -79,3 +79,10 @@ following to `~/.vim/filetype.vim` for syntax highlighting:
 
     :au BufRead *.html.to set filetype=mustache
 
+
+## Icons
+To render an icon use `{% module Icon('name') %}` in a template, where `name` is the filename of an svg file in `static/icons`.
+
+All icons used should be from the Noun Project, specifically [this collection](https://thenounproject.com/monstercritic/collection/tinicons-a-set-of-tiny-icons-perfect-for-ui-elemen/) if possible.
+
+SVG markup should be cleaned an minified, [Svgsus](http://www.svgs.us/) works well.

From 0de63228019fe140228a69a524cb65ec7ca13f21 Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Tue, 17 Jul 2018 14:42:05 -0400
Subject: [PATCH 03/10] UI module for Icon

---
 atst/app.py        | 4 ++--
 atst/ui_modules.py | 7 +++++++
 2 files changed, 9 insertions(+), 2 deletions(-)
 create mode 100644 atst/ui_modules.py

diff --git a/atst/app.py b/atst/app.py
index 7dcc1b9a..d804bdfa 100644
--- a/atst/app.py
+++ b/atst/app.py
@@ -15,7 +15,7 @@ from atst.handlers.dev import Dev
 from atst.home import home
 from atst.api_client import ApiClient
 from atst.sessions import RedisSessions
-from atst.ui import UI
+from atst import ui_modules
 
 ENV = os.getenv("TORNADO_ENV", "dev")
 
@@ -100,11 +100,11 @@ def make_app(config, deps, **kwargs):
         static_path=home.child("static"),
         cookie_secret=config["default"]["COOKIE_SECRET"],
         debug=config["default"].getboolean("DEBUG"),
+        ui_modules=ui_modules,
         **kwargs,
     )
     app.config = config
     app.sessions = deps["sessions"]
-    app.ui = UI
     return app
 
 
diff --git a/atst/ui_modules.py b/atst/ui_modules.py
new file mode 100644
index 00000000..ec197bcd
--- /dev/null
+++ b/atst/ui_modules.py
@@ -0,0 +1,7 @@
+from tornado.web import UIModule
+
+class Icon(UIModule):
+    def render(self, name, classes=''):
+        with open('static/icons/%s.svg' % name) as svg:
+            return self.render_string(
+              "components/icon.html.to", svg=svg.read(), name=name, classes=classes)

From 1904f07b7fea70945607d573987c50592ea670bf Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Tue, 17 Jul 2018 14:42:10 -0400
Subject: [PATCH 04/10] remove

---
 atst/ui.py | 5 -----
 1 file changed, 5 deletions(-)
 delete mode 100644 atst/ui.py

diff --git a/atst/ui.py b/atst/ui.py
deleted file mode 100644
index 6926febb..00000000
--- a/atst/ui.py
+++ /dev/null
@@ -1,5 +0,0 @@
-class UI:
-
-    def icon(name):
-        with open("../static/icons/%(name)s.svg") as svg:
-            return svg.read()

From b9f61d7c9fcb1717a1d6f543a6702babfbec0e7b Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Tue, 17 Jul 2018 14:42:22 -0400
Subject: [PATCH 05/10] Some initial svg icons

---
 static/icons/avatar.svg      | 1 +
 static/icons/bell.svg        | 1 +
 static/icons/briefcase.svg   | 1 +
 static/icons/caret_down.svg  | 1 +
 static/icons/caret_left.svg  | 1 +
 static/icons/caret_right.svg | 1 +
 static/icons/caret_up.svg    | 1 +
 static/icons/chart.svg       | 1 +
 static/icons/cloud.svg       | 1 +
 static/icons/document.svg    | 1 +
 static/icons/download.svg    | 1 +
 static/icons/folder.svg      | 1 +
 static/icons/search.svg      | 1 +
 static/icons/trash.svg       | 2 +-
 static/icons/x.svg           | 1 +
 15 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 static/icons/avatar.svg
 create mode 100644 static/icons/bell.svg
 create mode 100644 static/icons/briefcase.svg
 create mode 100644 static/icons/caret_down.svg
 create mode 100644 static/icons/caret_left.svg
 create mode 100644 static/icons/caret_right.svg
 create mode 100644 static/icons/caret_up.svg
 create mode 100644 static/icons/chart.svg
 create mode 100644 static/icons/cloud.svg
 create mode 100644 static/icons/document.svg
 create mode 100644 static/icons/download.svg
 create mode 100644 static/icons/folder.svg
 create mode 100644 static/icons/search.svg
 create mode 100644 static/icons/x.svg

diff --git a/static/icons/avatar.svg b/static/icons/avatar.svg
new file mode 100644
index 00000000..a3b68837
--- /dev/null
+++ b/static/icons/avatar.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M16 16h-2v-3.225l-3.919-.781C9.455 11.869 9 11.314 9 10.675V9.242c0-.477.236-.921.631-1.187C9.919 7.86 11 6.595 11 5c0-1.853-1.558-3-3-3-1.449 0-3 1.206-3 3 0 1.596 1.081 2.859 1.371 3.056.395.268.629.711.629 1.186v1.433c0 .64-.455 1.194-1.083 1.319l-3.916.783L2 16H0v-3.221c0-.951.677-1.776 1.609-1.963L5 10.139v-.623C4.235 8.839 3 7.136 3 5c0-3.088 2.595-5 5-5 2.757 0 5 2.243 5 5 0 2.134-1.234 3.837-2 4.516v.623l3.396.679c.929.187 1.604 1.01 1.604 1.957V16z"/></svg>
diff --git a/static/icons/bell.svg b/static/icons/bell.svg
new file mode 100644
index 00000000..dd06bb78
--- /dev/null
+++ b/static/icons/bell.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M14 12H2c-.552 0-1-.447-1-1s.448-1 1-1c.469 0 1 0 1-2V7c0-2.757 2.243-5 5-5s5 2.243 5 5v1c0 2 .531 2 1 2 .553 0 1 .447 1 1s-.447 1-1 1zm-9.261-2h6.521c-.173-.553-.26-1.22-.26-2V7c0-1.654-1.346-3-3-3S5 5.346 5 7v1c0 .78-.087 1.447-.261 2zM8 4c-.552 0-1-.448-1-1V1c0-.552.448-1 1-1s1 .448 1 1v2c0 .552-.448 1-1 1z"/><circle cx="8" cy="14.5" r="1.5"/></svg>
diff --git a/static/icons/briefcase.svg b/static/icons/briefcase.svg
new file mode 100644
index 00000000..efae9533
--- /dev/null
+++ b/static/icons/briefcase.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M15 16H1c-.552 0-1-.447-1-1V5c0-.552.448-1 1-1h14c.553 0 1 .448 1 1v10c0 .553-.447 1-1 1zM2 14h12V6H2v8zm10-8H4V3c0-1.102.896-1.999 1.999-1.999h4.002C11.104 1.001 12 1.898 12 3v3zM6 4h4V3l-4.001.001L6 4zm2 8l-.275-.038-7-2 .55-1.923L8 9.96l6.726-1.921.549 1.923-7 2L8 12z"/></svg>
diff --git a/static/icons/caret_down.svg b/static/icons/caret_down.svg
new file mode 100644
index 00000000..12f6381b
--- /dev/null
+++ b/static/icons/caret_down.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 13c-.256 0-.512-.098-.707-.293l-7-7c-.391-.391-.391-1.023 0-1.414s1.023-.391 1.414 0L8 10.586l6.293-6.293c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-7 7C8.512 12.902 8.256 13 8 13z"/></svg>
diff --git a/static/icons/caret_left.svg b/static/icons/caret_left.svg
new file mode 100644
index 00000000..b0711348
--- /dev/null
+++ b/static/icons/caret_left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M11 16c-.256 0-.512-.098-.707-.293l-7-7c-.391-.391-.391-1.023 0-1.414l7-7c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414L5.414 8l6.293 6.293c.391.391.391 1.023 0 1.414-.195.195-.451.293-.707.293z"/></svg>
diff --git a/static/icons/caret_right.svg b/static/icons/caret_right.svg
new file mode 100644
index 00000000..96e7419c
--- /dev/null
+++ b/static/icons/caret_right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M5 16c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.023 0-1.414L10.586 8 4.293 1.707c-.391-.391-.391-1.023 0-1.414s1.023-.391 1.414 0l7 7c.391.391.391 1.023 0 1.414l-7 7C5.512 15.902 5.256 16 5 16z"/></svg>
diff --git a/static/icons/caret_up.svg b/static/icons/caret_up.svg
new file mode 100644
index 00000000..d2bec294
--- /dev/null
+++ b/static/icons/caret_up.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M15 12c-.256 0-.512-.098-.707-.293L8 5.414l-6.293 6.293c-.391.391-1.023.391-1.414 0s-.391-1.023 0-1.414l7-7c.391-.391 1.023-.391 1.414 0l7 7c.391.391.391 1.023 0 1.414-.195.195-.451.293-.707.293z"/></svg>
diff --git a/static/icons/chart.svg b/static/icons/chart.svg
new file mode 100644
index 00000000..5b8cf399
--- /dev/null
+++ b/static/icons/chart.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M15 13H1c-.552 0-1-.447-1-1V2c0-.552.448-1 1-1h14c.553 0 1 .448 1 1v10c0 .553-.447 1-1 1zM2 11h12V3H2v8zm6-8c-.552 0-1-.448-1-1V1c0-.552.448-1 1-1s1 .448 1 1v1c0 .552-.448 1-1 1zM3.999 16c-.19 0-.383-.055-.554-.168-.459-.307-.583-.927-.277-1.387l2-3c.306-.46.926-.584 1.387-.277.459.307.583.927.277 1.387l-2 3c-.193.289-.51.445-.833.445zm8.002 0c-.323 0-.641-.156-.833-.445l-2-3c-.306-.46-.182-1.08.277-1.387.46-.307 1.08-.183 1.387.277l2 3c.307.46.183 1.08-.277 1.387-.171.113-.364.168-.554.168zM4 10c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.023 0-1.414l3-3c.391-.391 1.023-.391 1.414 0L9 6.586l2.293-2.293c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-3 3c-.391.391-1.023.391-1.414 0L7 7.414 4.707 9.707C4.512 9.902 4.256 10 4 10z"/></svg>
diff --git a/static/icons/cloud.svg b/static/icons/cloud.svg
new file mode 100644
index 00000000..5e568d43
--- /dev/null
+++ b/static/icons/cloud.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M11.5 15H5c-2.757 0-5-2.243-5-5 0-2.204 1.446-4.126 3.511-4.769C4.395 3.277 6.335 2 8.5 2c2.773 0 5.058 2.034 5.434 4.727C15.205 7.548 16 8.972 16 10.5c0 2.481-2.019 4.5-4.5 4.5zm-3-11c-1.493 0-2.819.962-3.3 2.394-.115.342-.407.596-.762.664C3.025 7.326 2 8.563 2 10c0 1.654 1.346 3 3 3h6.5c1.379 0 2.5-1.121 2.5-2.5 0-.972-.553-1.835-1.441-2.254-.339-.16-.561-.495-.573-.869C11.918 5.483 10.387 4 8.5 4z"/></svg>
diff --git a/static/icons/document.svg b/static/icons/document.svg
new file mode 100644
index 00000000..74cf4cef
--- /dev/null
+++ b/static/icons/document.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M15 16H2c-.552 0-1-.447-1-1V1c0-.552.448-1 1-1h13c.553 0 1 .448 1 1v14c0 .553-.447 1-1 1zM3 14h11V2H3v12zM5 4h7v2H5zm0 3h7v2H5zm0 3h4v2H5z"/></svg>
diff --git a/static/icons/download.svg b/static/icons/download.svg
new file mode 100644
index 00000000..6b68bae8
--- /dev/null
+++ b/static/icons/download.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M16 16H0v-6h2v4h12v-4h2zm-8-4c-.256 0-.512-.098-.707-.293l-4-4c-.391-.391-.391-1.023 0-1.414s1.023-.391 1.414 0L8 9.586l3.293-3.293c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-4 4C8.512 11.902 8.256 12 8 12zm0 0c-.552 0-1-.447-1-1V1c0-.552.448-1 1-1s1 .448 1 1v10c0 .553-.448 1-1 1z"/></svg>
diff --git a/static/icons/folder.svg b/static/icons/folder.svg
new file mode 100644
index 00000000..99b1e9a2
--- /dev/null
+++ b/static/icons/folder.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M14 16H2c-1.103 0-2-.897-2-2V2C0 .897.897 0 2 0h5.004c1.098 0 1.995.893 2 1.99V2H14c1.103 0 2 .897 2 2v10c0 1.103-.897 2-2 2zM7.005 1.99L2 2v12h12V4H6.995l.01-2.01z"/></svg>
diff --git a/static/icons/search.svg b/static/icons/search.svg
new file mode 100644
index 00000000..4d22f4df
--- /dev/null
+++ b/static/icons/search.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M1 15l5.465-5.465M1 16c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.023 0-1.414l5.465-5.465c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-5.465 5.465C1.512 15.902 1.256 16 1 16zm9-4c-3.309 0-6-2.691-6-6s2.691-6 6-6 6 2.691 6 6-2.691 6-6 6zm0-10C7.794 2 6 3.794 6 6s1.794 4 4 4 4-1.794 4-4-1.794-4-4-4z"/></svg>
diff --git a/static/icons/trash.svg b/static/icons/trash.svg
index c03b2a7e..950c23d2 100644
--- a/static/icons/trash.svg
+++ b/static/icons/trash.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 91 91"><path d="M67.305 36.442v-8.055c0-.939-.762-1.701-1.7-1.701H54.342v-5.524c0-.938-.761-1.7-1.699-1.7h-12.75c-.939 0-1.701.762-1.701 1.7v5.524H26.93c-.939 0-1.7.762-1.7 1.701v8.055c0 .938.761 1.699 1.7 1.699h.488v34.021c0 .938.761 1.7 1.699 1.7h29.481c3.595 0 6.52-2.924 6.52-6.518V38.142h.486c.939 0 1.701-.761 1.701-1.7zm-25.713-13.58h9.35v3.824h-9.35v-3.824zm20.127 44.483c0 1.719-1.4 3.117-3.12 3.117h-27.78v-32.32l30.9.002v29.201zm2.185-32.603H28.629v-4.655H63.905v4.655z"/><path d="M36.066 44.962h3.4v19.975h-3.4zM44.566 44.962h3.4v19.975h-3.4zM53.066 44.962h3.4v19.975h-3.4z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M11.098 16H4.902c-1.029 0-1.884-.772-1.987-1.798L2.095 6H1c-.552 0-1-.448-1-1s.448-1 1-1h2c.514 0 .944.389.995.9l.91 9.103L11.098 14l.907-9.1c.051-.511.481-.9.995-.9h2c.553 0 1 .448 1 1s-.447 1-1 1h-1.095l-.82 8.202C12.982 15.227 12.129 16 11.098 16zm-.993-12.553L9.382 2H6.618l-.723 1.447-1.79-.894 1-2C5.275.214 5.621 0 6 0h4c.379 0 .725.214.895.553l1 2-1.79.894zM2 4h12v2H2z"/></svg>
diff --git a/static/icons/x.svg b/static/icons/x.svg
new file mode 100644
index 00000000..0ed75ae4
--- /dev/null
+++ b/static/icons/x.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M2 2l12 12M14 15c-.256 0-.512-.098-.707-.293l-12-12c-.391-.391-.391-1.023 0-1.414s1.023-.391 1.414 0l12 12c.391.391.391 1.023 0 1.414-.195.195-.451.293-.707.293zm0-13L2 14"/><path d="M2 15c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.023 0-1.414l12-12c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-12 12C2.512 14.902 2.256 15 2 15z"/></svg>

From ce21bc16a2652178ce24dcb49d9098c011b80a81 Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Tue, 17 Jul 2018 14:42:38 -0400
Subject: [PATCH 06/10] Icon reference

---
 templates/styleguide.html.to | 28 ++++++++++++++++++++++------
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/templates/styleguide.html.to b/templates/styleguide.html.to
index 8a2c489c..4c2c41a5 100644
--- a/templates/styleguide.html.to
+++ b/templates/styleguide.html.to
@@ -5,7 +5,6 @@
   <ul>
     <li>
       <a href='/' class='sidenav__link sidenav__link--active' aria-current='true'>Navigation Item</a>
-      {{ ui.icon('trash') }}
       <ul>
         <li><a href='/' class='sidenav__link sidenav__link--active'>Sub Navigation</a></li>
         <li><a href='/' class='sidenav__link'>Sub Navigation</a></li>
@@ -25,11 +24,6 @@
 {% end %}
 
 {% block content %}
-<div class='col'>
-  <div class='panel'>
-    <p>This is a panel</p>
-  </div>
-</div>
 
 <div class='col col--grow'>
   <div class='panel'>
@@ -44,6 +38,7 @@
 
       <p>This is a paragraph. <a href="\">Lorem ipsum dolor sit amet</a>, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 
+
       <div class="row">
         <div class='col col--grow'>col 1</div>
         <div class='col col--grow'>col 2</div>
@@ -72,6 +67,27 @@
     Another panel without padding
   </div>
 
+  <div class='panel'>
+    <div class='panel__content'>
+      <h5>Icons</h5>
+      <span class='nowrap'>{% module Icon('trash') %} 'trash'&nbsp;&nbsp;&nbsp;</span>
+      <span class='nowrap'>{% module Icon('document') %} 'document'&nbsp;&nbsp;&nbsp;</span>
+      <span class='nowrap'>{% module Icon('cloud') %} 'cloud'&nbsp;&nbsp;&nbsp;</span>
+      <span class='nowrap'>{% module Icon('chart') %} 'chart'&nbsp;&nbsp;&nbsp;</span>
+      <span class='nowrap'>{% module Icon('caret_up') %} 'caret_up'&nbsp;&nbsp;&nbsp;</span>
+      <span class='nowrap'>{% module Icon('caret_down') %} 'caret_down'&nbsp;&nbsp;&nbsp;</span>
+      <span class='nowrap'>{% module Icon('caret_right') %} 'caret_right'&nbsp;&nbsp;&nbsp;</span>
+      <span class='nowrap'>{% module Icon('caret_left') %} 'caret_left'&nbsp;&nbsp;&nbsp;</span>
+      <span class='nowrap'>{% module Icon('x') %} 'x'&nbsp;&nbsp;&nbsp;</span>
+      <span class='nowrap'>{% module Icon('search') %} 'search'&nbsp;&nbsp;&nbsp;</span>
+      <span class='nowrap'>{% module Icon('avatar') %} 'avatar'&nbsp;&nbsp;&nbsp;</span>
+      <span class='nowrap'>{% module Icon('download') %} 'download'&nbsp;&nbsp;&nbsp;</span>
+      <span class='nowrap'>{% module Icon('briefcase') %} 'briefcase'&nbsp;&nbsp;&nbsp;</span>
+      <span class='nowrap'>{% module Icon('bell') %} 'bell'&nbsp;&nbsp;&nbsp;</span>
+      <span class='nowrap'>{% module Icon('folder') %} 'folder'&nbsp;&nbsp;&nbsp;</span>
+    </div>
+  </div>
+
   <section class='block-list'>
     <header class='block-list__header'>
       <h3 class='block-list__title'>A Block List</h3>

From b45d66120db808b304ee1b63db498f06095fcd71 Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Tue, 17 Jul 2018 14:42:47 -0400
Subject: [PATCH 07/10] icon template

---
 templates/components/icon.html.to | 2 ++
 1 file changed, 2 insertions(+)
 create mode 100644 templates/components/icon.html.to

diff --git a/templates/components/icon.html.to b/templates/components/icon.html.to
new file mode 100644
index 00000000..159cf196
--- /dev/null
+++ b/templates/components/icon.html.to
@@ -0,0 +1,2 @@
+{% autoescape None %}
+<span class="icon icon--{{name}}" aria-hidden="true">{{ svg }}</span>

From 2ec2d9410916fe988c34371012f5a3f6e4464c64 Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Tue, 17 Jul 2018 14:42:56 -0400
Subject: [PATCH 08/10] Icon styles

---
 scss/atat.scss            |  2 ++
 scss/core/_util.scss      |  3 +++
 scss/core/_variables.scss |  7 +++----
 scss/elements/_icons.scss | 28 ++++++++++++++++++++++++++++
 4 files changed, 36 insertions(+), 4 deletions(-)
 create mode 100644 scss/core/_util.scss
 create mode 100644 scss/elements/_icons.scss

diff --git a/scss/atat.scss b/scss/atat.scss
index 8f73326c..532330bb 100644
--- a/scss/atat.scss
+++ b/scss/atat.scss
@@ -3,6 +3,7 @@
 
 @import 'core/base';
 @import 'core/grid';
+@import 'core/util';
 
 @import 'elements/typography';
 @import 'elements/inputs';
@@ -10,6 +11,7 @@
 @import 'elements/panels';
 @import 'elements/block_lists';
 @import 'elements/tables';
+@import 'elements/icons';
 
 @import 'components/site_action';
 @import 'components/empty_state';
diff --git a/scss/core/_util.scss b/scss/core/_util.scss
new file mode 100644
index 00000000..101ddcf4
--- /dev/null
+++ b/scss/core/_util.scss
@@ -0,0 +1,3 @@
+.nowrap {
+  white-space: nowrap;
+}
diff --git a/scss/core/_variables.scss b/scss/core/_variables.scss
index 5dbdb23a..266065e8 100644
--- a/scss/core/_variables.scss
+++ b/scss/core/_variables.scss
@@ -3,10 +3,9 @@
  * ===================================================
  */
 
-$gap:             .8rem; // 8px at 10px $em-base
-$topbar-height:   4.8rem;
-
-
+$gap:               .8rem; // 8px at 10px $em-base
+$topbar-height:     4.8rem;
+$icon-size-small:   2.4rem;
 
 /*
  * USWDS Variables
diff --git a/scss/elements/_icons.scss b/scss/elements/_icons.scss
new file mode 100644
index 00000000..95f7fb46
--- /dev/null
+++ b/scss/elements/_icons.scss
@@ -0,0 +1,28 @@
+@mixin icon {
+  display: inline-block;
+  vertical-align: bottom;
+
+  > svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+@mixin icon-size($size) {
+  $icon-size: $size * .1rem;
+  width: $icon-size;
+  height: $icon-size;
+  margin: $icon-size / 4;
+}
+
+@mixin icon-style-default {
+  > svg * {
+    fill: $color-black;
+  }
+}
+
+.icon {
+  @include icon;
+  @include icon-size(16);
+  @include icon-style-default;
+}

From f57c93b6f12dd0dd9995648988e656206086b8da Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Wed, 18 Jul 2018 10:08:22 -0400
Subject: [PATCH 09/10] Add class names to icon template

---
 templates/components/icon.html.to | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/components/icon.html.to b/templates/components/icon.html.to
index 159cf196..99e74b40 100644
--- a/templates/components/icon.html.to
+++ b/templates/components/icon.html.to
@@ -1,2 +1,2 @@
 {% autoescape None %}
-<span class="icon icon--{{name}}" aria-hidden="true">{{ svg }}</span>
+<span class="icon icon--{{name}} {{classes}}" aria-hidden="true">{{ svg }}</span>

From 16fa8056e0275cc76fb66fb3c2de8d01b309aae8 Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Wed, 18 Jul 2018 10:15:11 -0400
Subject: [PATCH 10/10] Add a few more icons

---
 static/icons/alert.svg       | 1 +
 static/icons/help.svg        | 1 +
 static/icons/info.svg        | 1 +
 static/icons/link.svg        | 1 +
 static/icons/ok.svg          | 1 +
 static/icons/shield.svg      | 1 +
 templates/styleguide.html.to | 6 ++++++
 7 files changed, 12 insertions(+)
 create mode 100644 static/icons/alert.svg
 create mode 100644 static/icons/help.svg
 create mode 100644 static/icons/info.svg
 create mode 100644 static/icons/link.svg
 create mode 100644 static/icons/ok.svg
 create mode 100644 static/icons/shield.svg

diff --git a/static/icons/alert.svg b/static/icons/alert.svg
new file mode 100644
index 00000000..b2bfe5d1
--- /dev/null
+++ b/static/icons/alert.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM8 2C4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zm0 8c-.552 0-1-.447-1-1V4c0-.552.448-1 1-1s1 .448 1 1v5c0 .553-.448 1-1 1zm0 3c-.26 0-.52-.11-.71-.29-.18-.19-.29-.45-.29-.71 0-.271.11-.521.29-.71.38-.37 1.05-.37 1.42 0 .18.189.29.45.29.71s-.11.52-.29.71c-.19.18-.45.29-.71.29z"/></svg>
diff --git a/static/icons/help.svg b/static/icons/help.svg
new file mode 100644
index 00000000..1e669549
--- /dev/null
+++ b/static/icons/help.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM8 2C4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zm-.081 10.972c-.274 0-.513-.086-.717-.259-.204-.173-.306-.415-.306-.726 0-.276.099-.508.296-.696.198-.188.44-.283.727-.283.283 0 .521.095.714.283.193.188.289.42.289.696 0 .307-.101.548-.303.723-.202.175-.435.262-.7.262zM4.634 5.773c0-.416.137-.837.411-1.264.274-.427.673-.781 1.198-1.061.525-.28 1.138-.42 1.838-.42.651 0 1.225.117 1.723.351.498.234.883.553 1.155.956.271.403.407.841.407 1.313 0 .373-.078.699-.232.979-.155.28-.339.522-.552.726-.214.204-.596.546-1.148 1.028-.153.136-.275.255-.367.358-.092.103-.16.197-.205.282-.045.086-.08.171-.105.257-.024.085-.061.235-.111.45-.085.455-.352.683-.801.683-.233 0-.43-.075-.589-.224-.159-.149-.239-.37-.239-.663 0-.368.059-.687.175-.956.117-.269.272-.506.465-.709.193-.204.453-.446.781-.726.287-.245.494-.43.622-.555.128-.125.236-.264.323-.417.088-.153.132-.32.132-.499 0-.351-.134-.646-.401-.887s-.611-.361-1.033-.361c-.494 0-.857.121-1.091.364-.233.243-.431.601-.592 1.074-.153.495-.442.742-.869.742-.251 0-.463-.086-.636-.259-.173-.173-.259-.36-.259-.562z" fill-rule="nonzero"/></svg>
diff --git a/static/icons/info.svg b/static/icons/info.svg
new file mode 100644
index 00000000..828ebbe6
--- /dev/null
+++ b/static/icons/info.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M8 0c4.411 0 8 3.589 8 8s-3.589 8-8 8-8-3.589-8-8 3.589-8 8-8zm0 14c3.309 0 6-2.691 6-6s-2.691-6-6-6-6 2.691-6 6 2.691 6 6 6zm0-8c.552 0 1 .447 1 1v4.436c0 .552-.448 1-1 1s-1-.448-1-1V7c0-.553.448-1 1-1zm0-3c.26 0 .52.11.71.29.18.19.29.45.29.71 0 .271-.11.521-.29.71-.38.37-1.05.37-1.42 0C7.11 4.521 7 4.26 7 4c0-.26.11-.52.29-.71.19-.18.45-.29.71-.29z" fill-rule="nonzero"/></svg>
diff --git a/static/icons/link.svg b/static/icons/link.svg
new file mode 100644
index 00000000..14a65ba1
--- /dev/null
+++ b/static/icons/link.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6.321 10.68c-.256 0-.512-.098-.707-.293-1.953-1.954-1.953-5.132 0-7.085L7.465 1.45C8.411.504 9.67-.017 11.008-.017s2.596.521 3.542 1.467 1.468 2.205 1.468 3.543-.521 2.596-1.468 3.542c-.391.391-1.023.391-1.414 0s-.391-1.024 0-1.414c.568-.569.882-1.325.882-2.128 0-.804-.313-1.56-.882-2.129-1.137-1.137-3.12-1.137-4.257 0L7.028 4.715c-1.173 1.174-1.173 3.083 0 4.257.391.391.391 1.023 0 1.414-.195.196-.451.294-.707.294zm-1.293 5.302c-1.338 0-2.596-.521-3.542-1.468C.54 13.569.018 12.31.018 10.972S.539 8.376 1.485 7.43c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414c-.569.568-.882 1.325-.882 2.129s.313 1.56.882 2.128c1.138 1.137 3.119 1.137 4.257 0l1.699-1.699c.568-.568.882-1.324.882-2.128s-.313-1.56-.882-2.129c-.391-.39-.391-1.023 0-1.414s1.023-.391 1.414 0c.946.946 1.468 2.204 1.468 3.543 0 1.338-.521 2.597-1.468 3.542L8.57 14.515c-.946.946-2.204 1.467-3.542 1.467z"/></svg>
diff --git a/static/icons/ok.svg b/static/icons/ok.svg
new file mode 100644
index 00000000..d4f61f78
--- /dev/null
+++ b/static/icons/ok.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 12c-.266 0-.522-.106-.71-.296L3.915 8.297c-.389-.392-.386-1.025.006-1.414.392-.387 1.026-.386 1.414.007l2.574 2.597 6.302-8.101c.339-.435.967-.514 1.403-.176.436.339.515.968.175 1.403l-7 9c-.177.227-.442.367-.729.384L8 12zm0 4c-4.411 0-8-3.589-8-8s3.589-8 8-8c.964 0 1.906.17 2.803.505.517.193.779.77.586 1.287s-.765.783-1.287.586C9.431 2.127 8.724 2 8 2 4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6c0-.552.447-1 1-1s1 .448 1 1c0 4.411-3.589 8-8 8z"/></svg>
diff --git a/static/icons/shield.svg b/static/icons/shield.svg
new file mode 100644
index 00000000..ae782b54
--- /dev/null
+++ b/static/icons/shield.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M8.062 0c1.63.026 3.239.416 4.83.823 0 0 1.684.547 1.774 2.016.035 1.688.162 3.415-.133 4.952-.684 3.559-3.511 6.351-6.271 8.202 0 0-.454.068-.898-.228-3.182-2.179-5.963-5.341-6.067-9.247C1.274 4.012.695 1.43 3.331.756 4.886.368 6.457-.009 8.062 0zm-.197 2.082c-1.533.052-4.529.829-4.538.843-.031 1.555-.173 3.193.119 4.578.542 2.566 2.436 4.623 4.512 6.118 0 0 .991-.743 1.58-1.323.273-.27.537-.548.79-.838 1.237-1.419 2.256-3.125 2.308-4.983.011-1.181.001-2.363.001-3.544 0-.212-1.634-.446-2.789-.648-.657-.114-1.32-.211-1.983-.203z" fill-rule="nonzero"/></svg>
diff --git a/templates/styleguide.html.to b/templates/styleguide.html.to
index 4c2c41a5..62231d8e 100644
--- a/templates/styleguide.html.to
+++ b/templates/styleguide.html.to
@@ -85,6 +85,12 @@
       <span class='nowrap'>{% module Icon('briefcase') %} 'briefcase'&nbsp;&nbsp;&nbsp;</span>
       <span class='nowrap'>{% module Icon('bell') %} 'bell'&nbsp;&nbsp;&nbsp;</span>
       <span class='nowrap'>{% module Icon('folder') %} 'folder'&nbsp;&nbsp;&nbsp;</span>
+      <span class='nowrap'>{% module Icon('help') %} 'help'&nbsp;&nbsp;&nbsp;</span>
+      <span class='nowrap'>{% module Icon('shield') %} 'shield'&nbsp;&nbsp;&nbsp;</span>
+      <span class='nowrap'>{% module Icon('info') %} 'info'&nbsp;&nbsp;&nbsp;</span>
+      <span class='nowrap'>{% module Icon('alert') %} 'alert'&nbsp;&nbsp;&nbsp;</span>
+      <span class='nowrap'>{% module Icon('link') %} 'link'&nbsp;&nbsp;&nbsp;</span>
+      <span class='nowrap'>{% module Icon('ok') %} 'ok'&nbsp;&nbsp;&nbsp;</span>
     </div>
   </div>