From 1503a519ed17f830160eaf89822bda8bb5ca851f Mon Sep 17 00:00:00 2001
From: Luis Cielak <luis+dds@promptworks.com>
Date: Tue, 24 Jul 2018 14:18:04 -0400
Subject: [PATCH] Handle styles for a panel subtitle

---
 scss/elements/_panels.scss          |  8 ++++++++
 scss/elements/_typography.scss      | 11 ++++++++++-
 templates/requests/screen-1.html.to |  5 ++++-
 templates/requests/screen-2.html.to |  6 ++++--
 templates/requests/screen-3.html.to |  5 ++++-
 templates/requests/screen-4.html.to |  6 ++++--
 templates/requests_new.html.to      |  1 +
 7 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/scss/elements/_panels.scss b/scss/elements/_panels.scss
index e45ee1ec..ba88cd48 100644
--- a/scss/elements/_panels.scss
+++ b/scss/elements/_panels.scss
@@ -43,4 +43,12 @@
       padding: 0 ($gap * 4);
     }
   }
+
+  .panel__heading {
+    margin: ($gap * 2) 0;
+
+    h1, h2, h3, h4, h5, h6 {
+      margin: 0;
+    }
+  }
 }
\ No newline at end of file
diff --git a/scss/elements/_typography.scss b/scss/elements/_typography.scss
index facba32b..e97b8216 100644
--- a/scss/elements/_typography.scss
+++ b/scss/elements/_typography.scss
@@ -4,7 +4,7 @@
  * @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_typography.scss
  */
 
-* {
+ * {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -17,6 +17,11 @@ p {
 h1, h2, h3, h4, h5, h6 {
   font-family: $font-sans;
   margin: ($gap * 2) 0;
+
+  + .subtitle * {
+    margin-top: 0;
+  }
+
 }
 
 a,
@@ -36,3 +41,7 @@ dt {
   display: inline;
   font-weight: bold;
 }
+
+.subtitle {
+  color: $color-gray;
+}
diff --git a/templates/requests/screen-1.html.to b/templates/requests/screen-1.html.to
index e9cc5ca8..61d94528 100644
--- a/templates/requests/screen-1.html.to
+++ b/templates/requests/screen-1.html.to
@@ -1,7 +1,10 @@
 {% extends '../requests_new.html.to' %}
 
+{% block subtitle %}
+  <h2>Details of Use</h2>
+{% end %}
+
 {% block form %}
-<h2>Details of Use</h2>
 
 {% autoescape None %}
 {% if f.errors %}
diff --git a/templates/requests/screen-2.html.to b/templates/requests/screen-2.html.to
index 951cfe6f..af1dbb74 100644
--- a/templates/requests/screen-2.html.to
+++ b/templates/requests/screen-2.html.to
@@ -1,5 +1,9 @@
 {% extends '../requests_new.html.to' %}
 
+{% block subtitle %}
+  <h2>Information About You</h2>
+{% end %}
+
 {% block form %}
 
 {% autoescape None %}
@@ -7,8 +11,6 @@
   <b class="usa-input-error-message">There were some errors, see below.</b>
 {% end %}
 
-
-<h2 id="Information About You">Information About You</h2>
 <p class="usa-font-lead">Please tell us more about yourself.</p>
 
 {{ f.fname_request.label }}
diff --git a/templates/requests/screen-3.html.to b/templates/requests/screen-3.html.to
index 15c26b51..4dbeb3d4 100644
--- a/templates/requests/screen-3.html.to
+++ b/templates/requests/screen-3.html.to
@@ -1,5 +1,9 @@
 {% extends '../requests_new.html.to' %}
 
+{% block subtitle %}
+  <h2>Primary Government/Military <br> Point of Contact (POC)</h2>
+{% end %}
+
 {% block form %}
 
 {% autoescape None %}
@@ -7,7 +11,6 @@
   <b class="usa-input-error-message">There were some errors, see below.</b>
 {% end %}
 
-<h2 id="primary-poc">Primary Government/Military <br> Point of Contact (POC)</h2>
 <p class="usa-font-lead">Please designate a Primary Point of Contact that will be responsible for owning the workspace in the JEDI Cloud.</p>
 <p>The Point of Contact will become the primary owner of the <em>workspace</em> created to use the JEDI Cloud. As a workspace owner, this person will have the ability to:
   <ul>
diff --git a/templates/requests/screen-4.html.to b/templates/requests/screen-4.html.to
index 22da27a0..048795e0 100644
--- a/templates/requests/screen-4.html.to
+++ b/templates/requests/screen-4.html.to
@@ -1,5 +1,9 @@
 {% extends '../requests_new.html.to' %}
 
+{% block subtitle %}
+  <h2>Review &amp; Submit</h2>
+{% end %}
+
 {% block form_action %}
   <form method='POST' action="{{ reverse_url('requests_submit', request_id) }}" autocomplete="off">
 {% end %}
@@ -11,8 +15,6 @@
 <b>There were some errors, see below.</b>
 {% end %}
 
-<h2 id="review-submit">Review &amp; Submit</h2>
-
 <p class="usa-font-lead">Before you can submit your request, please take a moment to review the information entered in the form. You may make changes by clicking the edit link on each section. When all information looks right, go ahead and submit.</p>
 
 <h3>Details of Use <a href="{{ reverse_url('request_form_update', 1, request_id) }}">Edit</a></h3>
diff --git a/templates/requests_new.html.to b/templates/requests_new.html.to
index 39a54f39..8cd9194a 100644
--- a/templates/requests_new.html.to
+++ b/templates/requests_new.html.to
@@ -11,6 +11,7 @@
     <main class="panel__content">
       <div class="panel__heading">
         <h1>New Request</h1>
+        <div class="subtitle">{% block subtitle %}{% end %}</div>
       </div>
 
         {% block form_action %}