Merge pull request #538 from dod-ccpo/get-task-order-started

Task order get started page

atst/routes/task_orders/new.py

@@ -187,6 +187,11 @@ class UpdateTaskOrderWorkflow(ShowTaskOrderWorkflow):
         return self.task_order
 
 
+@task_orders_bp.route("/task_orders/new/get_started")
+def get_started():
+    return render_template("task_orders/new/get_started.html")  # pragma: no cover
+
+
 @task_orders_bp.route("/task_orders/new/<int:screen>")
 @task_orders_bp.route("/task_orders/new/<int:screen>/<task_order_id>")
 def new(screen, task_order_id=None):

static/icons/computer.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M15 13H1c-.552 0-1-.447-1-1V1c0-.552.448-1 1-1h14c.553 0 1 .448 1 1v11c0 .553-.447 1-1 1zM2 11h12V2H2v9zm9 5H5c-.552 0-1-.447-1-1s.448-1 1-1h6c.553 0 1 .447 1 1s-.447 1-1 1zm-4-4h2v3H7z"/></svg>

static/icons/dollar-sign.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 15c-3.577 0-4.842-2.448-4.895-2.553-.247-.494-.047-1.095.447-1.342.495-.246 1.095-.047 1.342.447C4.92 11.6 5.702 13 8 13c1.038 0 3-.418 3-2S9.038 9 8 9C5.515 9 3 7.626 3 5s2.515-4 5-4c3.577 0 4.843 2.449 4.895 2.553.247.494.047 1.095-.447 1.342-.489.246-1.085.049-1.336-.436C11.066 4.375 10.278 3 8 3c-1.038 0-3 .418-3 2s1.962 2 3 2c2.484 0 5 1.374 5 4s-2.516 4-5 4zm0 1c-.552 0-1-.447-1-1V1c0-.552.448-1 1-1s1 .448 1 1v14c0 .553-.448 1-1 1z"/></svg>

styles/elements/_typography.scss

@@ -12,6 +12,11 @@
 p {
   margin: 0 0 ($gap * 2) 0;
   @include line-max;
+
+  &.centered {
+    margin-left: auto;
+    margin-right: auto;
+  }
 }
 
 h1, h2, h3, h4, h5, h6 {

styles/sections/_task_order.scss

@@ -1,3 +1,50 @@
+.task-order-get-started {
+  text-align: center;
+  padding: 4rem 6rem;
+
+  .task-order-get-started__list {
+    ul {
+      list-style: none;
+      margin-top: 0;
+      padding: 0;
+
+      li {
+        font-weight: bold;
+        line-height: 2rem;
+      }
+    }
+  }
+
+  .task-order-help__icon {
+    @include icon-size(48);
+  }
+
+  .task-order-needs {
+    .task-order-needs__list {
+      @include media($large-screen) {
+        @include grid-row;
+      }
+    }
+  }
+
+  .task-order-get-started__actions {
+    .task-order-get-started__button-row {
+      position: relative;
+
+      .icon-link {
+        position: absolute;
+        left: 50%;
+        top: 2.5rem;
+        margin-left: -23rem;
+      }
+    }
+
+    p {
+      max-width: 27rem;
+    }
+  }
+}
+
 .task-order-summary {
 
   @include media($medium-screen) {
@@ -101,5 +148,4 @@
       padding: 0 0.5rem;
     }
   }
-
 }

templates/navigation/global_navigation.html

@@ -3,7 +3,7 @@
 <div class="global-navigation sidenav {% if workspace %}global-navigation__context--workspace{% endif %}">
   <ul>
     {{ SidenavItem("New Task Order",
-      href=url_for("task_orders.new", screen=1),
+      href=url_for("task_orders.get_started"),
       icon="plus",
       active=g.matchesPath('/task_orders/new'),
       ) }}

templates/task_orders/new/get_started.html

@@ -0,0 +1,69 @@
+{% from "components/icon.html" import Icon %}
+
+{% extends "base.html" %}
+
+{% macro Help(icon_name="", name="", description="", link_text="") %}
+  <div class="panel__content col">
+    {{ Icon(icon_name, classes="task-order-help__icon") }}
+    <h3>{{ name }}</h3>
+    <p>{{ description }}</p>
+    <a class="icon-link">{{ link_text }}</a>
+  </div>
+{% endmacro %}
+
+{% block content %}
+
+<div class="col col--grow task-order-get-started">
+  <div class="panel task-order-get-started__panel">
+    <h1 class="panel__content">Let's get started</h1>
+    <div class="panel__content">
+      <p class="centered">
+          To create a portfolio of JEDI cloud applications, you'll complete and submit a task order in your organization's system of record. We'll help you complete the necessary pieces of that task order, including your:
+      </p>
+    </div>
+    <span class="task-order-get-started__list panel__content">
+      <ul>
+        <li>Statement of work</li>
+        <li>Market research</li>
+        <li>Security documentation</li>
+        <li>Various approvals</li>
+      </ul>
+    </span>
+
+  </div>
+
+  <div class="panel task-order-needs">
+    <h1 class="panel__content">You'll need help getting a task order</h1>
+    <div class="panel__content task-order-needs__list">
+      {{ Help(
+        name="Development Lead",
+        icon_name="computer",
+        description="Your development lead will decide and estimate what types of cloud offerings your group needs.",
+        link_text="Share cloud estimate link") }}
+      {{ Help(
+        name="Security Lead",
+        icon_name="shield",
+        description="Your security lead will review and approve your security classification needs, as well as a standardized DD-254.",
+        link_text="You'll need their DOD ID number") }}
+      {{ Help(
+        name="Contracting Officer",
+        icon_name="dollar-sign",
+        description="Your contracting officer will review your funding needs and ultimately approve your task order.",
+        link_text="You'll need their DOD ID number") }}
+    </div>
+  </div>
+
+  <div class="task-order-get-started__actions">
+    <div class="task-order-get-started__button-row">
+      <a href="{{ request.referrer or url_for("atst.home") }}" class="icon-link">
+        {{ Icon("caret_left") }}
+        <span>Cancel</span>
+      </a>
+      <a href="{{ url_for("task_orders.new", screen=1) }}" class="usa-button usa-button-big">Let's do cloud!</a>
+    </div>
+    <div>
+      <p class="centered">Create a JEDI cloud application portfolio & start building a task order</p>
+    </div>
+  </div>
+</div>
+{% endblock %}