feat: add dark-theme accordion

solfacil · Jun 3, 2022 · b16d7b9 · b16d7b9
1 parent a178709
commit b16d7b9
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 4 deletions.
diff --git a/src/assets/img/icon/arrow-down-white.svg b/src/assets/img/icon/arrow-down-white.svg
diff --git 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
@@ -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,13 +42,15 @@
 <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',
 
   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>