Merge pull request #1335 from MITLibraries/pw102-nps-banner

Adds panel for NPS surveys

Author: JPrevost

README.md

@@ -85,6 +85,12 @@ to construct thumbnail URLs.
 - `TACOS_URL`: The GraphQL endpoint for the [TACOS](https://github.com/mitlibraries/tacos/) application.
 - `TIMDEX_TIMEOUT`: value to override the 6 second default for TIMDEX timeout.
 
+### NPS Survey Environment Variables (optional)
+
+- `NPS_BLURB`: Text to display before the survey link. Survey link will still display if not provided.
+- `NPS_LINK_TEXT`: Survey link text. If not present, survey does not display.
+- `NPS_URL`: Survey link URL. If not present, survey does not display.
+
 ## Confirming functionality after updating dependencies
 
 This application has good code coverage, so most issues are detected by just running tests normally:

app/assets/stylesheets/_survey.scss

@@ -0,0 +1,23 @@
+.nps-feedback {
+  margin-top: 1em;
+  padding: 20px 10px;
+  background-color: $gray-d1;
+  color: $white;
+  text-align: center;
+  font-size: $fs-large;
+  display: block;
+
+  a {
+    color: $blue-bright;
+    &:hover {
+      color: $green;
+    }
+    &:active {
+      color: $magenta;
+    }
+  }
+
+  @media (max-width: $bp-screen-md) {
+    font-size: $fs-base;
+  }
+}

app/assets/stylesheets/application.scss

@@ -7,4 +7,5 @@
 @import "_search";
 @import "_results";
 @import "_hint";
+@import "_survey";
 @import "_print";

app/views/search/_nps_feedback.html.erb

@@ -0,0 +1,7 @@
+<% return unless ENV.fetch('NPS_URL', false).present? %>
+<% return unless ENV.fetch('NPS_LINK_TEXT', false).present? %>
+
+<div class="nps-feedback">
+  <span class="nps-blurb"><%= ENV.fetch('NPS_BLURB', nil) %></span>
+  <a class="nps-link" href="<%= ENV.fetch('NPS_URL')%>"><%= ENV.fetch('NPS_LINK_TEXT') %></a>
+</div>

app/views/search/bento.html.erb

@@ -23,6 +23,8 @@
   <p>Not finding what you need? <%= link_to('Ask us', 'https://libraries.mit.edu/ask/') %></p>
 </div>
 
+<%= render partial: "nps_feedback" if ENV.fetch('NPS_URL', false).present? %>
+
 <div id="hint"></div>
 
 <div class="gridband layout-2c">