WIP: update tabs component

Author: ofrankowska

src/molecules/tabs/Tabs.html

@@ -7,8 +7,8 @@
     :key="`${tab.id}-tab-trigger`"
     :id="`${tab.id}-tab-trigger`"
     :aria-controls="`${tab.id}-tab`"
-    :aria-selected="tab.isActive || 'false'"
-    :aria-expanded="tab.isActive || 'false'"
+    :aria-selected="`${tab.isActive}`"
+    :aria-expanded="`${tab.isActive}`"
     type="button"
     role="tab"
     :ref="`button_${i}`"
@@ -21,20 +21,24 @@
       name="button"
       :tab="tab"
     >
-      {{ tab.name }}
+      <span class="">
+        {{ tab.name }}
+      </span>
     </slot>
     <!-- @slot Custom accordion tab icon (Named slot) -->
     <slot name="icon">
-
+      <a-icon :class="getClass(tab.isActive ? 'tabs__nav-icon--active' : 'tabs__nav-icon')">
+        <a-icon-expand-more />
+      </a-icon>
     </slot>
   </button>
   <div
     ref="content"
-    class="a-tabs__content"
     :class="getClass('tabs__content')"
+    role="tabpanel"
     tabindex="-1"
   >
     <!-- @slot Tab components -->
-    <slot/>
+    <slot />
   </div>
 </div>

src/molecules/tabs/Tabs.js

@@ -10,13 +10,27 @@ export default {
       config: {
         base: {
           tabs: [
-            'lg:flex', 'lg:flex-wrap', 'justify-center'
+            'flex', 'flex-wrap'
           ],
           'tabs__nav-button': [
-            'text-gray-600', 'py-4', 'px-6', 'block', 'hover:text-blue-500'
+            'relative',
+            'flex', 'w-full', 'items-center',
+            'text-gray-600', 'py-4', 'px-6', 'hover:text-blue-500'
           ],
           'tabs__nav-button--active': [
-            'text-gray-600', 'py-4', 'px-6', 'block', 'hover:text-blue-500', 'text-blue-500', 'border-b-2', 'font-medium', 'border-blue-500'
+            'relative',
+            'flex', 'w-full', 'items-center',
+            'py-4', 'px-6',
+            'text-gray-600', 'hover:text-blue-500', 'text-blue-500', 'border-b-2', 'font-medium', 'border-blue-500'
+          ],
+          'tabs__nav-icon': [
+            'relative',
+            'ml-auto'
+          ],
+          'tabs__nav-icon--active': [
+            'relative',
+            'ml-auto',
+            'transform rotate-180'
           ],
           tabs__content: [
             'py-4'

src/molecules/tabs/Tabs.vue

@@ -3,10 +3,16 @@
 <script>
 import ATabs from './Tabs.js'
 
-import AButton from '../../atoms/button/Button.vue'
+import AButton from '@atoms/button/Button.vue'
+import AIcon from '@atoms/icon/Icon.vue'
+import AIconExpandMore from '@atoms/icon/templates/IconExpandMore.vue'
 
 export default {
-  components: { AButton },
+  components: {
+    AButton,
+    AIcon,
+    AIconExpandMore
+  },
   mixins: [ATabs]
 }
 </script>