From b16d7b9c4af9aa0cda037126685456fe9bc473c5 Mon Sep 17 00:00:00 2001
From: Antonio Souza <alfsouza708@gmail.com>
Date: Fri, 3 Jun 2022 14:29:29 -0300
Subject: [PATCH] feat: add dark-theme accordion

---
 src/assets/img/icon/arrow-down-white.svg |  3 +++
 src/assets/scss/_accordion.scss          | 22 ++++++++++++++++++++++
 src/components/Accordion/Accordion.vue   | 21 +++++++++++++++++----
 3 files changed, 42 insertions(+), 4 deletions(-)
 create mode 100644 src/assets/img/icon/arrow-down-white.svg

diff --git a/src/assets/img/icon/arrow-down-white.svg b/src/assets/img/icon/arrow-down-white.svg
new file mode 100644
index 00000000..3115c343
--- /dev/null
+++ b/src/assets/img/icon/arrow-down-white.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 1L5 11M5 11L9 7.36364M5 11L1 7.36364" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/scss/_accordion.scss b/src/assets/scss/_accordion.scss
index 8b21ed40..0f6ced5f 100644
--- a/src/assets/scss/_accordion.scss
+++ b/src/assets/scss/_accordion.scss
@@ -50,9 +50,17 @@
         @apply border-none pt-0 mt-0;
       }
 
+      &.dark-theme {
+        @apply text-white;
+      }
+
       .arrow {
         @apply flex items-center justify-center w-6 h-6 border-2 border-solid border-grayPrimary rounded-full duration-200 ease-linear transition-all ml-6;
 
+        &.dark-theme {
+          @apply border-white;
+        }
+
         &.navigator {
           @apply border-none h-3;
         }
@@ -67,6 +75,16 @@
             }
           }
 
+          &.dark-theme {
+            @apply bg-white;
+
+            svg {
+              path {
+                stroke: #666;
+              }
+            }
+          }
+
           &.navigator {
             @apply bg-transparent;
             svg {
@@ -86,6 +104,10 @@
       &.navigator {
         @apply mt-4 mb-4;
       }
+
+      &.dark-theme {
+        @apply text-white;
+      }
     }
   }
 
diff --git a/src/components/Accordion/Accordion.vue b/src/components/Accordion/Accordion.vue
index 70acf506..6acef342 100644
--- a/src/components/Accordion/Accordion.vue
+++ b/src/components/Accordion/Accordion.vue
@@ -4,17 +4,18 @@
       <template v-for="(item, index) in headers">
         <dt
           :key="`title-${index}`"
-          :class="[dynamicSmallClass, variant]"
+          :class="[dynamicSmallClass, variant, darkThemeOn()]"
           @click="handleItem(index)"
         >
           {{ item }}
 
           <span
             class="arrow"
-            :class="[dynamicArrowClass(index), variant]"
+            :class="[dynamicArrowClass(index), variant, darkThemeOn()]"
             :index="index"
           >
-            <ArrowDown v-if="variant === 'content'" />
+            <ArrowDown v-if="variant === 'content' && !darkTheme" />
+            <ArrowDownWhite v-else-if="darkTheme" />
             <HalfArrowDown v-else />
           </span>
         </dt>
@@ -27,7 +28,7 @@
           <dd
             v-show="showContent(index)"
             :key="`description-${index}`"
-            :class="[dynamicSmallClass, variant]"
+            :class="[dynamicSmallClass, variant, darkThemeOn()]"
           >
             <slot :name="`description-${index}`"></slot>
           </dd>
@@ -41,6 +42,7 @@
 <script>
 import HalfArrowDown from '@img/icon/half-arrow-down.svg';
 import ArrowDown from '@img/icon/arrow-down.svg';
+import ArrowDownWhite from '@img/icon/arrow-down-white.svg';
 
 export default {
   name: 'Accordion',
@@ -48,6 +50,7 @@ export default {
   components: {
     HalfArrowDown,
     ArrowDown,
+    ArrowDownWhite,
   },
 
   props: {
@@ -86,6 +89,12 @@ export default {
       default: false,
     },
 
+    /** Specify if the accordion will use the dark theme of components */
+    darkTheme: {
+      type: Boolean,
+      default: false,
+    },
+
     /** Specify which variant should be used */
     variant: {
       type: String,
@@ -168,6 +177,10 @@ export default {
     dynamicArrowClass(el) {
       return ['', 'arrow-down'][Number(this.showContent(el))];
     },
+
+    darkThemeOn() {
+      return ['', 'dark-theme'][Number(this.darkTheme)];
+    },
   },
 };
 </script>