Create reusable StickyCTA component

js/index.js

@@ -5,6 +5,7 @@ import ally from 'ally.js'
 import classes from '../styles/atat.scss'
 import Vue from 'vue/dist/vue'
 import VTooltip from 'v-tooltip'
+import VueSticky from 'vue-sticky'
 
 import dodlogin from './components/dodlogin'
 import levelofwarrant from './components/levelofwarrant'
@@ -113,4 +114,6 @@ const app = new Vue({
     })
   },
   delimiters: ['!{', '}'],
+
+  directives: {'sticky': VueSticky}
 })

package.json

@@ -24,6 +24,7 @@
     "uswds": "^1.6.9",
     "v-tooltip": "^2.0.0-rc.33",
     "vue": "2.5.15",
+    "vue-sticky": "^3.3.4",
     "vue-text-mask": "^6.1.2"
   },
   "devDependencies": {

styles/atat.scss

@@ -43,6 +43,7 @@
 @import "components/usa_banner";
 @import "components/checklist";
 @import "components/dod_login_notice.scss";
+@import "components/sticky_cta.scss";
 
 @import "sections/login";
 @import "sections/home";

styles/components/_global_layout.scss

@@ -24,7 +24,6 @@ body {
   .global-panel-container {
     margin: $gap;
     max-width: $site-max-width;
-    overflow-x: auto;
     flex-grow: 1;
     -ms-flex-negative: 1;
 

styles/components/_sticky_cta.scss

@@ -0,0 +1,40 @@
+.sticky-cta {
+  @include media($small-screen) {
+    margin-left: -$gap * 4;
+  }
+
+  @include media($medium-screen) {
+    margin-left: -$gap * 5;
+  }
+
+  background-color: $color-gray-lightest;
+
+  border-top: 1px solid $color-gray-lighter;
+  border-bottom: 1px solid $color-gray-lighter;
+
+  padding: 0 40px 0 40px;
+  box-shadow: $box-shadow;
+
+  margin-bottom: 20px;
+}
+
+.sticky-cta-container {
+  display: flex;
+  justify-content: center;
+}
+
+.sticky-cta-text {
+  flex-grow: 1;
+}
+
+.sticky-cta-buttons {
+  display: flex;
+  justify-content: center;
+
+  button {
+    margin-top: auto;
+    margin-bottom: auto;
+    width: 144px;
+    margin-left: 33px;
+  }
+}

styles/core/_grid.scss

@@ -42,6 +42,5 @@
   &.col--grow {
     flex: 1;
     flex-grow: 1;
-    overflow: auto;
   }
 }

templates/components/sticky_cta.html

@@ -0,0 +1,12 @@
+{% macro StickyCTA(text) -%}
+    <div class="sticky-cta" v-sticky="{ zIndex: 1, stickyTop: 10 }">
+        <div class="sticky-cta-container">
+            <div class="sticky-cta-text">
+                <h3>{{ text }}</h3>
+            </div>
+            <div class="sticky-cta-buttons">
+                {{ caller() }}
+            </div>
+        </div>
+    </div>
+{%- endmacro %}

templates/portfolios/add_funding_cta.html

@@ -0,0 +1,6 @@
+{% from "components/sticky_cta.html" import StickyCTA %}
+{% from 'components/save_button.html' import SaveButton %}
+
+{% call StickyCTA(text="Funding") %}
+    MEOW
+{% endcall %}

templates/portfolios/applications/index.html

@@ -7,6 +7,8 @@
 
 {% block portfolio_content %}
 
+{% include "portfolios/add_funding_cta.html" %}
+
 <div class='portfolio-applications'>
   {% include "fragments/flash.html" %}
   <div class='portfolio-applications__header row'>

templates/task_orders/_new.html

@@ -1,3 +1,5 @@
+{% from "components/sticky_cta.html" import StickyCTA %}
+{% from "components/save_button.html" import SaveButton %}
 {% extends "base.html" %}
 
 {% block content %}

yarn.lock

@@ -9295,6 +9295,11 @@ vue-resize@^0.4.3:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-0.4.4.tgz#dee9b8dd1b189e7e3f6ec47f86c60694a241bb17"
 
+vue-sticky@^3.3.4:
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/vue-sticky/-/vue-sticky-3.3.4.tgz#d06288c4d28cfefdc7037e90b2ce51e5b51585c9"
+  integrity sha512-7Hcvw7MjzyQo3/rb2R2LvuxiIymJv49Gg6pXslFDjTr7UZoFxFvp8QYG1WFfKuk8V8eZHRKi1QD5dxRMQkm2OQ==
+
 vue-template-compiler@2.5.15:
   version "2.5.15"
   resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.5.15.tgz#cc004097e37167be8b85ea22ab2840d8e8cca1c0"