From c78a56810b0901cf2af1d5d9426a19fb3942320e Mon Sep 17 00:00:00 2001
From: victor <viktor.generalov@nlogic.ai>
Date: Thu, 8 Dec 2022 10:20:54 +0400
Subject: [PATCH] feat: added option to pass classes to header and content

---
 .../accordion/examples/AccordionExample.vue      |  2 +-
 src/components/Accordion/Accordion.vue           | 16 +++++++++++++---
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/docs/components/accordion/examples/AccordionExample.vue b/docs/components/accordion/examples/AccordionExample.vue
index 8cfe988..d5f98bf 100644
--- a/docs/components/accordion/examples/AccordionExample.vue
+++ b/docs/components/accordion/examples/AccordionExample.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="vp-raw flex flex-col">
-    <Accordion :items="items" flush>
+    <Accordion :items="items" content-classes="bg-red-100">
       <div>
         <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
         <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
diff --git a/src/components/Accordion/Accordion.vue b/src/components/Accordion/Accordion.vue
index f8f64ac..ff712b5 100644
--- a/src/components/Accordion/Accordion.vue
+++ b/src/components/Accordion/Accordion.vue
@@ -4,8 +4,11 @@
       <h2>
         <button
           type="button"
+          :class="[
+            { 'rounded-t-xl border-b-0': i === 0 },
+            headerClasses
+          ]"
           class="flex justify-between items-center p-5 w-full font-medium text-left text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
-          :class="{'rounded-t-xl border-b-0': i === 0}"
           @click="toggleItem(item)"
         >
           <span>{{item.header}}</span>
@@ -21,7 +24,10 @@
           </svg>
         </button>
       </h2>
-      <div :class="{hidden: !item.isVisible}" class="p-5 border [&:not(:last-item)]:border-b-0 last:border-t-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
+      <div
+        :class="[ { hidden: !item.isVisible }, contentClasses ]"
+        class="p-5 border [&:not(:last-item)]:border-b-0 last:border-t-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900"
+      >
         <slot />
       </div>
     </template>
@@ -38,7 +44,11 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  arrowIcon: {
+  headerClasses: {
+    type: String,
+    default: '',
+  },
+  contentClasses: {
     type: String,
     default: '',
   },