Tweak multi-step header for app provisioning

- add "context" option to StickyCTA
 - tweak styles to better-include context
 - add header text to translations

styles/components/_sticky_cta.scss

@@ -2,6 +2,11 @@
   margin-left: -$gap * 4;
   margin-right: -$gap * 5;
   z-index: 10;
+  background-color: $color-gray-lightest;
+  border-top: 1px solid $color-gray-lighter;
+  border-bottom: 1px solid $color-gray-lighter;
+  padding: 0 $gap * 5 0 $gap * 5;
+  box-shadow: $box-shadow;
 
   @include media($medium-screen) {
     margin-right: -$gap * 5;
@@ -16,12 +21,6 @@
     display: flex;
     align-items: center;
 
-    background-color: $color-gray-lightest;
-    border-top: 1px solid $color-gray-lighter;
-    border-bottom: 1px solid $color-gray-lighter;
-    padding: 0 $gap * 5 0 $gap * 5;
-    box-shadow: $box-shadow;
-
     .usa-button {
       margin: $gap $gap * 1.5 $gap 0;
       width: 20rem;
@@ -32,6 +31,12 @@
 
   &-text {
     flex-grow: 1;
+    display: flex;
+    align-items: baseline;
+  }
+  &-context {
+    color: $color-gray;
+    margin-left: $gap;
   }
 
   &-buttons {

templates/applications/new/step_1.html

@@ -14,7 +14,7 @@
 
 {% block portfolio_header %}
   {% include "portfolios/header.html" %}
-  {{ StickyCTA(text="Name and Describe New Application") }}
+  {{ StickyCTA(text="Name and Describe New Application", context="Step 1 of 3") }}
 {% endblock %}
   
 {% block application_content %}

templates/applications/new/step_2.html

@@ -8,7 +8,8 @@
 {% set secondary_breadcrumb = 'portfolios.applications.new_application_title' | translate %}
 
 {% block portfolio_header %}
-  {{ StickyCTA(text=application.name) }}
+  {% include "portfolios/header.html" %}
+  {{ StickyCTA(text=('portfolios.applications.new.step_2_header' | translate({"application_name": application.name}) ), context="Step 2 of 3") }}
 {% endblock %}
 
 {% block application_content %}

templates/applications/new/step_3.html

@@ -6,7 +6,7 @@
 
 {% block portfolio_header %}
   {% include "portfolios/header.html" %}
-  {{ StickyCTA(text=application.name) }}
+  {{ StickyCTA(text=('portfolios.applications.new.step_3_header' | translate({"application_name": application.name}) ), context="Step 3 of 3") }}
 {% endblock %}
 
 {% block application_content %}

templates/components/sticky_cta.html

@@ -1,9 +1,7 @@
 {% from 'components/icon.html' import Icon %}
 
-{% macro StickyCTA(text, return_link_url=None, return_link_text=None) -%}
+{% macro StickyCTA(text, context=None, return_link_url=None, return_link_text=None) -%}
   <div class="sticky-cta" v-sticky='{ "stickyBitStickyOffset": 76 }'>
-        <div class="sticky-cta-container">
-            <div class="sticky-cta-text">
     {% if return_link_url and return_link_text %}
     <div class="sticky-cta-return-link">
       <a href="{{ return_link_url }}">
@@ -11,7 +9,12 @@
       </a>
     </div>
     {% endif %}
+    <div class="sticky-cta-container">
+      <div class="sticky-cta-text">
         <h3>{{ text }}</h3>
+        {% if context %}
+        <span class="sticky-cta-context"> {{ context }} </span>
+        {% endif %}
       </div>
       {% if caller %}
       <div class="sticky-cta-buttons">

translations.yaml

@@ -308,8 +308,11 @@ portfolios:
     add_another_environment: Add another environment
     app_settings_text: App settings
     new:
+      step_1_header: "Name and Describe New Application"
       step_1_button_text: "Save and Add Environments"
+      step_2_header: Add Environments to {application_name}
       step_2_button_text: "Save and Add Members"
+      step_3_header: Invite Members to {application_name}
       step_3_button_text: Save Application
     create_new_env: Create a new environment.
     create_new_env_info: Creating an environment gives you access to the Cloud Service Provider. This environment will function within the constraints of the task order, and any costs will be billed against the portfolio.