1559 Add informational modal to ZAP Search homepage

client/app/components/info-modal.js

@@ -0,0 +1,16 @@
+import Component from '@ember/component';
+import { action } from '@ember/object';
+
+export default class InfoModalComponent extends Component {
+  open = !window.localStorage.hideMessage;
+
+  dontShowModalAgain = false;
+
+  @action
+  closeModal() {
+    this.set('open', false);
+    if (this.dontShowModalAgain) {
+      window.localStorage.hideMessage = true;
+    }
+  }
+}

client/app/styles/app.scss

@@ -64,6 +64,7 @@ $completed-color: #a6cee3;
 @import 'modules/_m-noui';
 @import 'modules/_m-project-filters';
 @import 'modules/_m-reveal-modal';
+@import 'modules/_m-info-modal';
 @import 'modules/_m-search';
 @import 'modules/_m-site-header';
 @import 'modules/_m-statuses';

client/app/styles/modules/_m-info-modal.scss

@@ -0,0 +1,44 @@
+// --------------------------------------------------
+// Module: Info Modal
+// --------------------------------------------------
+
+#info-modal-container {
+  z-index: 3;
+}
+
+.info-overlay {
+  padding: 1rem;
+
+  @include breakpoint(medium) {
+    padding: 4rem 1rem;
+    position: absolute;
+  }
+}
+
+.info-overlay-target {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.info-modal {
+  border: 3px solid $dcp-orange;
+  border-radius: 10px;
+  box-shadow: 0 4px 4px 0 rgba(0,0,0,0.1);
+  top: 50%;
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+  background-color: #FBF0E9;
+  height: unset;
+  min-height: unset;
+  @include breakpoint(medium) {
+    height: unset;
+    padding: 4rem;
+  }
+
+  &:focus {
+    outline: none;
+  }
+}

client/app/templates/application.hbs

@@ -53,8 +53,15 @@
   {{/if}}
 </div>
 
+
+<div id="info-modal-container">
+</div>
 <div id="reveal-modal-container">
 </div>
+{{#ember-wormhole to="info-modal-container"}}
+  {{info-modal}}
+{{/ember-wormhole}}
+
 
 {{#if (string-includes currentRouteName "my-projects")}}
   <script type="text/javascript">!function(e,t,n){function a(){var e=t.getElementsByTagName("script")[0],n=t.createElement("script");n.type="text/javascript",n.async=!0,n.src="https://beacon-v2.helpscout.net",e.parentNode.insertBefore(n,e)}if(e.Beacon=n=function(t,n,a){e.Beacon.readyQueue.push({method:t,options:n,data:a})},n.readyQueue=[],"complete"===t.readyState)return a();e.attachEvent?e.attachEvent("onload",a):e.addEventListener("load",a,!1)}(window,document,window.Beacon||function(){});</script><script type="text/javascript">window.Beacon('init', '9a027170-0976-46ac-afba-8d1322ef19d6')</script>

client/app/templates/components/info-modal.hbs

@@ -0,0 +1,23 @@
+{{#if open}}
+  <div class="reveal-overlay" style="display:block; background-color: rgba(241, 242, 244, 0.45)">
+    <div class="reveal-overlay-target" {{action closeModal}}></div>
+    <div
+      class="reveal info-modal"
+      role="dialog"
+      aria-hidden="false"
+      tabindex="-1"
+      style="display:block;"
+      data-test-info-modal
+    >
+      <h1>Subscribe and Get Notified.</h1>
+
+      <h4>Subscribe to <LinkTo @route="subscribe">ZAP Email notifications</LinkTo>. Get updates about community district and citywide projects.</h4>
+
+      {{input type="checkbox" checked=this.dontShowModalAgain}}
+      Don't show this message again
+      <button {{action closeModal}} class="close-button" aria-label="Close modal" type="button">
+        <span aria-hidden="true">&times;</span>
+      </button>
+    </div>
+  </div>
+{{/if}}