Style and refactor components for expired funding

- modify Accordion component to be able to customize classes and tags
that it uses to build markup
- modify the shape of the object that the mock CSP returns for data that
builds this section.
 - Also ensures that the CLINs TOs and CLINS are sorted
- add appropriate css for styling

templates/components/accordion.html

@@ -1,23 +1,30 @@
-{% macro Accordion(title, id, heading_level="h2") %}
-<accordion inline-template>
-  <div>
-    <{{heading_level}}>
-      <button
-        v-on:click="toggle($event)" 
-        class="usa-accordion-button"
-        aria-controls="{{ id }}"
-        v-bind:aria-expanded= "isVisible ? 'true' : 'false'"
-      >
-        {{ title }}
-      </button>
-    </{{heading_level}}>
-    <div 
-      id="{{ id }}" 
-      class="usa-accordion-content" 
-      v-bind:aria-hidden="isVisible ? 'false' : 'true'"
-    >
-      {{ caller() }}
-    </div>
-  </div>
-</accordion>
+{% macro Accordion(
+  title, 
+  id, 
+  wrapper_tag="div", 
+  wrapper_classes="",
+  heading_tag="h2",
+  heading_classes="",
+  content_tag="div",
+  content_classes="") %}
+  <accordion v-cloak inline-template>
+    <{{wrapper_tag}} class="{{ wrapper_classes }}">
+      <{{heading_tag}} class="{{ heading_classes }}">
+        <button
+          v-on:click="toggle($event)" 
+          class="usa-accordion-button"
+          aria-controls="{{ id }}"
+          v-bind:aria-expanded= "isVisible ? 'true' : 'false'"
+        >
+          {{ title }}
+        </button>
+      </{{heading_tag}}>
+      <{{content_tag}}
+        id="{{ id }}" 
+        class="usa-accordion-content {{ content_classes }}"  
+        v-bind:aria-hidden="isVisible ? 'false' : 'true'">
+        {{ caller() }}
+      </{{content_tag}}>
+    </{{wrapper_tag}}>
+  </accordion>
 {% endmacro %}