Explorar o código

HUE-9485 [frontend] Style the Tabs component

Johan Ahlen %!s(int64=5) %!d(string=hai) anos
pai
achega
89590d2000

+ 45 - 4
desktop/core/src/desktop/js/components/Tabs.vue

@@ -17,13 +17,20 @@
 -->
 
 <template>
-  <div>
+  <div class="hue-tabs">
     <ul>
-      <li v-for="tab in tabs" :key="tab.title" @click="selectTab(tab)">
+      <li
+        v-for="tab in tabs"
+        :key="tab.title"
+        :class="{ active: tab.isActive }"
+        @click="selectTab(tab)"
+      >
         {{ tab.title }}
       </li>
     </ul>
-    <slot />
+    <div class="hue-tab-container">
+      <slot />
+    </div>
   </div>
 </template>
 
@@ -64,4 +71,38 @@
   }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+  @import './styles/colors';
+
+  .hue-tabs {
+    ul {
+      border-bottom: 1px solid $hue-border-color;
+      list-style: none;
+      margin: 20px 12px;
+
+      li {
+        display: inline-block;
+        font-size: 14px;
+        padding: 10px;
+        border-bottom: 3px solid transparent;
+        cursor: pointer;
+        margin-right: 10px;
+        color: $fluid-gray-700;
+
+        &:hover {
+          color: $fluid-blue-500;
+        }
+
+        &.active {
+          color: $fluid-blue-500;
+          border-bottom: 3px solid $fluid-blue-400;
+        }
+      }
+    }
+    .hue-tab-container {
+      position: relative;
+      margin: 12px;
+      background-color: $fluid-white;
+    }
+  }
+</style>

+ 26 - 11
desktop/core/src/desktop/js/components/__snapshots__/Tabs.test.ts.snap

@@ -1,21 +1,32 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Tabs.vue should render empty tabs 1`] = `
-<div>
+<div
+  class="hue-tabs"
+>
   <ul />
    
+  <div
+    class="hue-tab-container"
+  />
 </div>
 `;
 
 exports[`Tabs.vue should render tabs 1`] = `
-<div>
+<div
+  class="hue-tabs"
+>
   <ul>
-    <li>
+    <li
+      class="active"
+    >
       
       foo
     
     </li>
-    <li>
+    <li
+      class=""
+    >
       
       bar
     
@@ -23,14 +34,18 @@ exports[`Tabs.vue should render tabs 1`] = `
   </ul>
    
   <div
-    style=""
-  >
-    foo
-  </div>
-  <div
-    style="display: none;"
+    class="hue-tab-container"
   >
-    bar
+    <div
+      style=""
+    >
+      foo
+    </div>
+    <div
+      style="display: none;"
+    >
+      bar
+    </div>
   </div>
 </div>
 `;