From 943be0707deb4eb333f97881c4b9a5feb1c2d4fa Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Tue, 2 Oct 2018 11:14:39 -0400
Subject: [PATCH] Add USA header to base templates

---
 styles/atat.scss                     |  1 +
 styles/components/_usa_banner.scss   | 27 +++++++++++++++++++++++++++
 templates/base.html                  |  2 ++
 templates/base_public.html           |  6 ++++++
 templates/components/usa_header.html | 10 ++++++++++
 5 files changed, 46 insertions(+)
 create mode 100644 styles/components/_usa_banner.scss
 create mode 100644 templates/components/usa_header.html

diff --git a/styles/atat.scss b/styles/atat.scss
index a908d116..27bb8a4c 100644
--- a/styles/atat.scss
+++ b/styles/atat.scss
@@ -36,6 +36,7 @@
 @import 'components/selector';
 @import 'components/budget_chart';
 @import 'components/audit_log';
+@import 'components/usa_banner';
 
 @import 'sections/login';
 @import 'sections/request_approval';
diff --git a/styles/components/_usa_banner.scss b/styles/components/_usa_banner.scss
new file mode 100644
index 00000000..51f18864
--- /dev/null
+++ b/styles/components/_usa_banner.scss
@@ -0,0 +1,27 @@
+.usa-banner {
+  display: flex;
+  align-items: center;
+  padding: ($gap / 2) $gap;
+  z-index: 5;
+
+  img {
+    flex-grow: 0;
+    margin-right: $gap;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  button.icon-tooltip {
+    @include small-label;
+    color: $color-blue;
+    padding: 0 ($gap / 2);
+    margin: 0 ($gap / 2);
+    font-weight: normal;
+
+    .icon {
+      @include icon-size(12);
+    }
+  }
+}
diff --git a/templates/base.html b/templates/base.html
index 2c2b4141..31d220df 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -16,6 +16,8 @@
 
     {% block template_vars %}{% endblock %}
 
+    {% include 'components/usa_header.html' %}
+
     {% include 'navigation/topbar.html' %}
 
     <div class='global-layout'>
diff --git a/templates/base_public.html b/templates/base_public.html
index 9ceb400f..2de9d12d 100644
--- a/templates/base_public.html
+++ b/templates/base_public.html
@@ -16,6 +16,8 @@
 
 <div id='app-root'>
 
+  {% include 'components/usa_header.html' %}
+
   <header class="topbar topbar--public">
     <nav class="topbar__navigation">
       <a href="{{ url_for('atst.home') }}" class="topbar__link topbar__link--home">
@@ -61,6 +63,10 @@
 
 </div>
 
+{% assets "js_all" %}
+  <script src="{{ ASSET_URL }}"></script>
+{% endassets %}
+
 </body>
 </html>
 
diff --git a/templates/components/usa_header.html b/templates/components/usa_header.html
new file mode 100644
index 00000000..8c35c69c
--- /dev/null
+++ b/templates/components/usa_header.html
@@ -0,0 +1,10 @@
+{% from "components/tooltip.html" import Tooltip %}
+
+<aside class='usa-banner'>
+  <img src='{{ url_for("static", filename="img/us_flag_small.png") }}' alt='U.S. Flag' />
+  <p>An official website of the United States government</p>
+
+  {{ Tooltip('<p><strong>The .mil means it’s official.</strong> Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.</p><br/><p><strong>The site is secure.</strong><br>The <strong>https://</strong> ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.</p>',
+  title='Heres how you know') }}
+
+</aside>