1535 Add "Definitions of ZAP Updates" page to ZAP Search

client/app/router.js

@@ -28,6 +28,7 @@
   this.route('show-project', { path: '/projects/:id' });
   this.route('show-geography', { path: '/projects' });
   this.route('disclaimer');
+  config.showAlerts && this.route('statuses');
   this.route('not-found', { path: '/*path' });
   this.route('oops');
   this.route('my-projects', function() {

client/app/routes/statuses.js

@@ -0,0 +1,4 @@
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+});

client/app/styles/app.scss

@@ -66,6 +66,7 @@ $completed-color: #a6cee3;
 @import 'modules/_m-reveal-modal';
 @import 'modules/_m-search';
 @import 'modules/_m-site-header';
+@import 'modules/_m-statuses';
 @import 'modules/_m-tabs';
 @import 'modules/_m-project-summary-cards';
 @import 'modules/_m-tooltipster';

client/app/styles/modules/_m-statuses.scss

@@ -0,0 +1,38 @@
+// --------------------------------------------------
+// Module: Statuses
+// --------------------------------------------------
+
+.status-options {
+  counter-reset: statusoption;
+  list-style: none;
+  padding-left: 40px;
+}
+
+.status-options .numbered-option {
+  counter-increment: statusoption;
+  margin: 0 0 0.5rem 0;
+  position: relative;
+}
+
+.status-options li::before {
+  content: counter(statusoption);
+  font-weight: bold;
+  position: absolute;
+  --size: 2rem;
+  left: calc(-1 * var(--size) - 10px);
+  line-height: var(--size);
+  width: var(--size);
+  height: var(--size);
+  top: 0;
+  background: #FBF0E9;
+  border-radius: 50%;
+  text-align: center;
+}
+
+.numbered-option h4 {
+  margin-bottom: 0.25rem;
+}
+
+.status-updates {
+  font-size: 1.5rem;
+}

client/app/templates/statuses.hbs

@@ -0,0 +1,38 @@
+<div class="cell">
+  <div class="grid-container">
+    <div class="grid-x grid-padding-x grid-padding-y align-middle" style="justify-content: center;">
+      <div class="cell large-8">
+          <h1 class="header-xxl dcp-orange">Definition of ZAP Updates</h1>
+          <p>Below outlines 4 major status for a Zoning Application milestone:</p>
+          <ol class="status-options">
+            <li class="numbered-option">
+              <h4>Filed</h4>
+              <p>A Land Use Application has been submitted to DCP. The minimum fees have been paid.</p>
+            </li>
+            <li class="numbered-option">
+              <h4>Noticed</h4>
+              <p>An application is notified that it will be certified within 30 days per City Charter requirements.</p>
+            </li>
+            <li class="numbered-option">
+              <h4>In Public Review</h4>
+              <p>Applications are now in public review.</p>
+            </li>
+            <li class="numbered-option">
+              <h4>Completed</h4>
+              <p>An application has reached one of the following:</p>
+              <ul>
+                <li>Approved</li>
+                <li>Disapproved</li>
+                <li>Withdrawn</li>
+                <li>Terminated</li>
+              </ul>
+            </li>
+          </ol>
+          <p>When you sign up for ZAP updates, you will only be notified when a project's public status is changed to "<b>Filed</b>" or "<b>In public review</b>"</p>
+          <p class="status-updates">To sign up for ZAP updates, please visit <LinkTo @route="subscribe">here</LinkTo>.</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+{{outlet}}

client/tests/unit/routes/statuses-test.js

@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Route | statuses', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    const route = this.owner.lookup('route:statuses');
+    assert.ok(route);
+  });
+});