Merge pull request #111 from dod-ccpo/ui/empty-states

Ui/empty states

atst/ui_modules.py

@@ -46,3 +46,12 @@ class SidenavItem(UIModule):
           active=active,
           icon=icon,
           subnav=subnav)
+
+class EmptyState(UIModule):
+    def render(self, message, actionLabel, actionHref, icon=None):
+        return self.render_string(
+          "components/empty_state.html.to",
+          message=message,
+          actionLabel=actionLabel,
+          actionHref=actionHref,
+          icon=icon)

scss/components/_empty_state.scss

@@ -1,15 +1,27 @@
 .empty-state {
   text-align: center;
-  padding-top: 10rem;
+  padding: 6rem ($gap * 2) 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  @include media($medium-screen) {
+    padding: 8rem ($gap * 4) 0;
+  }
+
+  .icon {
+     @include icon-size(50);
+     @include icon-color($color-gray-light);
+  }
 
   p {
-    font-family: $font-sans;
-    font-weight: 300;
-    line-height: 10rem;
-    font-size: 44px;
-    line-height: 5rem;
-    margin: 0 auto;
-    padding-bottom: 2rem;
-    max-width: 40%;
+    @include h2;
+    line-height: 1.2;
+    max-width: 15em;
+    color: $color-gray;
+
+    @include media($large-screen) {
+      @include h1;
+    }
   }
 }

templates/components/empty_state.html.to

@@ -0,0 +1,9 @@
+<div class='empty-state'>
+  <p>{{ message }}</p>
+
+  {% if icon %}
+    {% module Icon(icon) %}
+  {% end %}
+
+  <a href='{{ actionHref }}' class='usa-button usa-button-big'>{{ actionLabel }}</a>
+</div>

templates/requests.html.to

@@ -31,6 +31,16 @@
 
 {% block content %}
 
+{% if not requests %}
+
+  {% module EmptyState(
+    'There are currently no active requests for you to see.',
+    actionLabel='Create a new JEDI Cloud Request',
+    actionHref='/requests/new',
+    icon='document'
+  )%}
+
+{% else %}
 
   {% module Alert('Pending Financial Verification',
     message="<p>Your next step is to create a Task Order (T.O.) associated with JEDI Cloud. Please consult a Contracting Officer (KO) or Contracting Officer Representative (COR) to help with this step.</p>"
@@ -95,3 +105,5 @@
 
 {% end %}
 
+{% end %}
+

templates/workspace_members.html.to

@@ -2,6 +2,17 @@
 
 {% block workspace_content %}
 
+{% if not members %}
+
+  {% module EmptyState(
+    'There are currently no members in this Workspace.',
+    actionLabel='Invite a new Member',
+    actionHref='/members/new',
+    icon='avatar'
+  )%}
+
+
+{% else %}
 
   <form class='search-bar'>
     <div class='usa-input search-input'>
@@ -33,36 +44,6 @@
     </div>
   </form>
 
-{# <div class='panel panel__actions'>
-  <div class='row'>
-    <div class='col col--grow col--pad'>
-      <form class="usa-search usa-search-small">
-        <label class="usa-sr-only" for="search-field-small">Search small</label>
-        <input id="search-field-small" type="search" name="search" placeholder="Search by name">
-        <button type="submit">
-          <span class="usa-sr-only">Search</span>
-        </button>
-      </form>
-    </div>
-    <div class='col col--grow col--pad'>
-      <select id="filter_status" name="filter_status" required="">
-        <option value="" selected disabled>Filter by status</option>
-        <option value="">Active</option>
-        <option value="">Pending</option>
-        <option value="">Denied</option>
-      </select>
-    </div>
-    <div class='col col--grow col--pad'>
-      <select id="filter_role" name="filter_role" required="">
-        <option value="" selected disabled>Filter by role</option>
-        <option value="">Admin</option>
-        <option value="">CCPO</option>
-        <option value="">Developer</option>
-      </select>
-    </div>
-  </div>
-</div> #}
-
 
   <div class='responsive-table-wrapper'>
     <table>
@@ -87,6 +68,7 @@
     </table>
   </div>
 
+{% end %}
 
 
 {% end %}

templates/workspace_projects.html.to

@@ -2,6 +2,17 @@
 
 {% block workspace_content %}
 
+{% if not projects %}
+
+  {% module EmptyState(
+    'There are currently no projects set up for this Workspace.',
+    actionLabel='Create a new Project',
+    actionHref='/project/new',
+    icon='cloud'
+  )%}
+
+{% else %}
+
   {% for project in projects %}
     <div class='block-list project-list-item'>
       <header class='block-list__header'>
@@ -31,3 +42,5 @@
 
 {% end %}
 
+{% end %}
+