Styling updates for Task Order index page:

- Removed unused styling from _accordions css.
- Removed references to accordion classes from applications index page
since this will be restyled later.
- Added Accordion macro to the Task Order index page and created
temporary initial
toggle list of All Task Orders.

styles/elements/_accordions.scss

@@ -1,148 +1,14 @@
-.triangle-box {
-  position: relative;
-
-  .triangle-up {
-    $triangle-size: $gap * 1.5;
-
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-left: $triangle-size solid transparent;
-    border-right: $triangle-size solid transparent;
-    border-bottom: $triangle-size solid $color-blue-light;
-    bottom: -4px;
-    right: 50%;
-  }
-}
-
 .accordion {
-  @include block-list;
-
-  box-shadow: 0 4px 10px 0 rgba(193, 193, 193, 0.5);
-  margin-bottom: 6 * $gap;
-
-  .icon-link {
-    margin: (-$gap) 0;
-  }
-
-  .icon-link,
-  .label {
-    &:first-child {
-      margin-left: -$gap;
-    }
-
-    &:last-child {
-      margin-right: -$gap;
-    }
-  }
-
   &__header {
-    @include block-list-header;
-
-    border-top: 3px solid $color-blue;
-    border-bottom: none;
-    box-shadow: 0 2px 4px 0 rgba(216, 218, 222, 0.58);
-
-    &.row {
-      background: $color-white;
-    }
-  }
-
-  &__title {
-    @include block-list__title;
-
-    color: $color-blue;
-
-    @include h3;
-
-    &.icon-link {
     margin: 0;
-      display: block;
-      padding: 0 $gap;
-      text-decoration: none;
-    }
   }
 
-  &__description {
+  ul {
-    @include block-list__description;
+    margin: 0;
+    list-style: none;
 
-    font-style: italic;
+    li {
-    font-size: $small-font-size;
+      background-color: $color-white;
-    color: $color-gray;
-  }
-
-  &__actions {
-    margin-top: $gap;
-    margin-bottom: $gap * 0.5;
-    display: flex;
-    flex-direction: row;
-
-    .icon-link {
-      font-size: $small-font-size;
-
-      svg {
-        width: 1rem;
-      }
-    }
-
-    &__footer {
-      @include block-list__footer;
-
-      border-top: 0;
-    }
-  }
-
-  &__item {
-    @include block-list-item;
-
-    opacity: 0.75;
-    background-color: $color-blue-light;
-    border-bottom: 1px solid rgba($color-gray-light, 0.5);
-
-    &--selectable {
-      > div {
-        display: flex;
-        flex-direction: row-reverse;
-
-        @include ie-only {
-          width: 100%;
-        }
-
-        > label {
-          @include block-list-selectable-label;
-        }
-      }
-
-      > label {
-        @include block-list-selectable-label;
-      }
-
-      input:checked {
-        + label {
-          color: $color-primary;
-        }
-      }
-
-      @include ie-only {
-        dl {
-          width: 100%;
-          padding-left: $gap * 4;
     }
   }
 }
-  }
-
-  .counter {
-    background-color: $color-cool-blue-light;
-    color: $color-white;
-    border-radius: 2px;
-    padding: ($gap / 2) $gap;
-    margin-left: $gap;
-  }
-
-  .separator {
-    border: 1px solid $color-gray-medium;
-    opacity: 0.75;
-    margin: 0 (0.5 * $gap);
-  }
-}

styles/sections/_task_order.scss

@@ -1,25 +1,3 @@
-.task-order-list {
-  margin-top: 6 * $gap;
-}
-
-.task-order-card {
-  &__buttons .usa-button {
-    min-width: 10rem;
-  }
-
-  &__buttons .usa-button-secondary {
-    min-width: 14rem;
-  }
-
-  .label {
-    font-size: $small-font-size;
-    margin-right: 2 * $gap;
-    min-width: 7rem;
-    display: flex;
-    justify-content: space-around;
-  }
-}
-
 .task-order {
   margin-top: $gap * 4;
   width: 900px;
@@ -207,3 +185,8 @@
     padding-bottom: $gap * 2.5;
   }
 }
+
+.task-order__list {
+  margin-top: $gap;
+  margin-bottom: $gap;
+}

templates/applications/index.html

@@ -37,20 +37,20 @@
         {% set section_name = "application-{}".format(application.id) %}
 
         <toggler inline-template>
-          <div class='accordion application-list-item'>
+          <div class='application-list-item'>
-            <header class='accordion__header row'>
+            <header class='row'>
               <div class='col col-grow'>
-                <h3 class='icon-link accordion__title' v-on:click="toggleSection('{{ section_name }}')">{{ application.name }}</h3>
+                <h3 class='icon-link' v-on:click="toggleSection('{{ section_name }}')">{{ application.name }}</h3>
-                <p class='accordion__description'>
+                <p class=''>
                   {{ application.description }}
                 </p>
-                <div class='accordion__actions'>
+                <div class=''>
                   <a class='icon-link' href='{{ url_for("applications.settings", application_id=application.id) }}'>
                     <span>{{ "portfolios.applications.app_settings_text" | translate }}</span>
                   </a>
                   <div class='separator'></div>
                   {% set has_environments = 0 < (application.environments|length) %}
-                  <a class='icon-link triangle-box' v-on:click="toggleSection('{{ section_name }}')" disabled="{{ not has_environments }}">
+                  <a class='icon-link' v-on:click="toggleSection('{{ section_name }}')" disabled="{{ not has_environments }}">
                     <span>Environments ({{ application.environments|length }})</span>
                     {% if has_environments %}
                       <span v-if="selectedSection === '{{ section_name }}'">
@@ -59,7 +59,7 @@
                       <span v-else>
                         {{ Icon('caret_down') }}
                       </span>
-                      <div class="triangle-up" v-if="selectedSection === '{{ section_name }}'"></div>
+                      <div class="" v-if="selectedSection === '{{ section_name }}'"></div>
                     {% endif %}
                   </a>
                 </div>
@@ -67,7 +67,7 @@
             </header>
             <ul v-show="selectedSection === '{{ section_name }}'">
               {% for environment in application.environments %}
-                <li class='accordion__item application-list-item__environment'>
+                <li class='application-list-item__environment'>
                   <div class='application-list-item__environment__name'>
                     <span>{{ environment.displayname }}</span>
                   </div>

templates/task_orders/index.html

@@ -1,3 +1,4 @@
+{% from "components/accordion.html" import Accordion %}
 {% from "components/empty_state.html" import EmptyState %}
 {% from "components/icon.html" import Icon %}
 {% from "components/sticky_cta.html" import StickyCTA %}
@@ -6,90 +7,24 @@
 
 {% block portfolio_content %}
 
-{% macro TaskOrderButton(task_order, route, text="Edit", secondary=False) %}
-<a href="{{ url_for(route, task_order_id=task_order.id) }}" class="usa-button {{ 'usa-button-secondary' if secondary else '' }}">
-  {{ text }}
-</a>
-{% endmacro %}
-
 {% macro TaskOrderDateTime(dt, className="") %}
   <local-datetime timestamp="{{ dt }}" format="MMMM D, YYYY" class="{{ className }}"></local-datetime>
 {% endmacro %}
 
-{% macro TaskOrderDate(task_order) %}
-  <span class="datetime">
-    <!-- Draft: {Begins, Began} start_date -->
-    <!-- Everything else: {Starts, Started} start_date | {Ends, Ended} end_date -->
 
-    {% if task_order.is_draft %}
+{% macro TaskOrderList(task_orders, status) %}
-      {% if task_order.has_begun %}
+  {% set status = "All Task Orders" %}
-        Started on
+  <section class="task-order__list">
-      {% else %}
+    {% call Accordion(title=status, id=status, heading_tag="h4", content_tag="ul") %}
-        Starts on
-      {% endif %}
-      {{ TaskOrderDateTime(task_order.time_created) }}
-    {% else %}
-      {% if task_order.has_begun %}
-        Began
-      {% else %}
-        Begins
-      {% endif %}
-      {{ TaskOrderDateTime(task_order.start_date) }}
-    {% endif %}
-
-    {% if not task_order.is_draft %}
-      &nbsp;&nbsp;|&nbsp;&nbsp;
-
-      {% if task_order.has_ended %}
-        Ended
-      {% else %}
-        Ends
-      {% endif %}
-
-      {{ TaskOrderDateTime(task_order.end_date) }}
-    {% endif %}
-  </span>
-{% endmacro %}
-
-{% macro TaskOrderActions(task_order) %}
-  <div class="task-order-card__buttons">
-    {% if task_order.is_draft and user_can(permissions.EDIT_TASK_ORDER_DETAILS) %}
-      {{ TaskOrderButton(task_order, "task_orders.edit")}}
-    {% elif task_order.is_expired %}
-      {{ TaskOrderButton(task_order, "task_orders.review_task_order", text="View") }}
-    {% elif task_order.is_unsigned %}
-      {% if user_can(permissions.EDIT_TASK_ORDER_DETAILS) %}
-        {{ TaskOrderButton(task_order, "task_orders.form_step_four_review", text="Sign", secondary=True) }}
-      {% endif %}
-      {{ TaskOrderButton(task_order, "task_orders.review_task_order", text="View") }}
-    {% endif %}
-  </div>
-{% endmacro %}
-
-{% macro TaskOrderList(task_orders, label='success') %}
-  <div class="task-order-list">
       {% for task_order in task_orders %}
-      <div class="card task-order-card">
+        <li class="">
-        <div class="card__status">
+          <h4><a href="{{ url_for('task_orders.review_task_order', task_order_id=task_order.id) }}">Task Order #{{ task_order.number }}</a></h4>
-          <span class='label label--{{ label_colors[task_order.status] }}'>{{ task_order.display_status }}</span>
-          {{ TaskOrderDate(task_order) }}
-          <span class="card__status-spacer"></span>
-          <span class="card__button">
-            {{ TaskOrderActions(task_order) }}
-          </span>
-        </div>
-        <div class="card__header">
-          <h3>Task Order #{{ task_order.number }}</h3>
-        </div>
-        <div class="card__body">
           <b>Total amount: </b>{{ task_order.total_contract_amount | dollars }}
-        </div>
-        <div class="card__body">
           <b>Obligated amount: </b>{{ task_order.total_obligated_funds | dollars }}
-        </div>
+        </li>
-      </div>
       {% endfor %}
-  </div>
+    {% endcall %}
+  </section>
 {% endmacro %}