From dc73963cb9003ad843fa4cec7a1c5aaa4790f109 Mon Sep 17 00:00:00 2001
From: graham-dds <graham.beckley-ctr@friends.dds.mil>
Date: Thu, 14 Nov 2019 17:19:29 -0500
Subject: [PATCH] Add accordion macro

---
 js/components/accordion.js          | 14 +++++++++++
 js/index.js                         |  2 ++
 templates/components/accordion.html | 36 +++++++++++++++++++++++++++++
 3 files changed, 52 insertions(+)
 create mode 100644 js/components/accordion.js
 create mode 100644 templates/components/accordion.html

diff --git a/js/components/accordion.js b/js/components/accordion.js
new file mode 100644
index 00000000..d281a9e7
--- /dev/null
+++ b/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,
+    },
+  },
+}
diff --git a/js/index.js b/js/index.js
index 7381c828..390dbe1c 100644
--- a/js/index.js
+++ b/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,
diff --git a/templates/components/accordion.html b/templates/components/accordion.html
new file mode 100644
index 00000000..7bf03c6f
--- /dev/null
+++ b/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 %}
\ No newline at end of file