Add accordion macro

js/components/accordion.js

@@ -0,0 +1,14 @@
+import ToggleMixin from '../mixins/toggle'
+
+export default {
+  name: 'accordion',
+
+  mixins: [ToggleMixin],
+
+  props: {
+    defaultVisible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+}

js/index.js

@@ -30,6 +30,7 @@ import SemiCollapsibleText from './components/semi_collapsible_text'
 import ToForm from './components/forms/to_form'
 import ClinFields from './components/clin_fields'
 import PopDateRange from './components/pop_date_range'
+import Accordion from './components/accordion'
 
 Vue.config.productionTip = false
 
@@ -40,6 +41,7 @@ Vue.mixin(Modal)
 const app = new Vue({
   el: '#app-root',
   components: {
+    Accordion,
     dodlogin,
     toggler,
     optionsinput,

templates/components/accordion.html

@@ -0,0 +1,36 @@
+{% macro Accordion(title, id) %}
+<accordion inline-template>
+  <li>
+    <template v-if="isVisible">
+      <button
+        v-on:click="toggle($event)" 
+        class="usa-accordion-button"
+        aria-controls="{{ id }}"
+        aria-expanded="true"
+      >
+        {{ title }}
+      </button>
+    </template>
+    <template v-else>
+      <button
+        v-on:click="toggle($event)" 
+        class="usa-accordion-button"
+        aria-expanded="false"
+        aria-controls="{{ id }}"
+      >
+        {{ title }}
+      </button>
+    </template>
+    <template v-if="isVisible">
+      <div id="{{ id }}" class="usa-accordion-content" aria-hidden="false">
+        {{ caller() }}
+      </div>
+    </template>
+    <template v-else>
+      <div id="{{ id }}" class="usa-accordion-content" aria-hidden="true">
+        {{ caller() }}
+      </div>
+    </template>
+  </li>
+</accordion>
+{% endmacro %}