@appscode/design-system 1.1.0-beta.5 → 1.1.0-beta.51

package/vue-components/v3/sidebar/Sidebar.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 interface Props {
-  type: string;
+  type?: string;
+  isCollapsible?: boolean;
 }
 
 withDefaults(defineProps<Props>(), {
@@ -49,7 +50,7 @@ withDefaults(defineProps<Props>(), {
       height: calc(100vh - 80px);
       overflow-y: auto;
       padding-top: 4px;
-      scrollbar-color: $white-100-light transparent;
+      scrollbar-color: $white-100 transparent;
 
       /* width */
       &::-webkit-scrollbar {
@@ -196,34 +197,6 @@ withDefaults(defineProps<Props>(), {
       }
     }
   }
-
-  // .ac-options.is-right {
-  //   .option-dots {
-  //     transition: 0.3s;
-
-  //     i.fa {
-  //       &.fa-angle-left {
-  //         font-size: 18px;
-  //       }
-  //     }
-
-  //     &:active {
-  //       i.fa {
-  //         background-color: $white-100-lighter;
-  //         width: 25px;
-  //         height: 25px;
-  //         text-align: center;
-  //         line-height: 25px;
-  //         border-radius: 50%;
-  //       }
-  //     }
-
-  //     &:hover {
-  //       color: $primary !important;
-  //       transform: scale(1.2);
-  //     }
-  //   }
-  // }
 }
 
 .sidebar-collapsed {

package/vue-components/v3/sidebar/SidebarFooter.vue

@@ -73,8 +73,11 @@ const AccentColorPicker = defineAsyncComponent(
   .accent-color-picker {
     display: none;
   }
-  .sidebar-footer .back-button {
-    width: 100%;
+  .sidebar-footer {
+    .back-button {
+      width: 100%;
+      transform: rotate(180deg);
+    }
   }
 }
 </style>

package/vue-components/v3/sidebar/Steps.vue

@@ -1,65 +1,69 @@
 <script lang="ts" setup>
 import FeCheck from "~icons/fe/check";
+import type { Step } from "../../types/importFlow";
+
+interface Props {
+  steps?: Step[];
+  activeStepIdentifier?: number;
+  activeSubStepIdentifier?: number;
+}
+
+withDefaults(defineProps<Props>(), {
+  steps: () => [],
+  activeStepIdentifier: 1,
+  activeSubStepIdentifier: 1,
+});
 </script>
 
 <template>
-  <!-- steps  01-->
-  <li>
+  <li
+    v-for="step in steps"
+    :key="step.identifier"
+    :class="{
+      'is-hidden': !step.isVisible,
+    }"
+  >
     <strong
-      ><span class="step-count is-active">1</span>
-      <span class="label-text">CLUSTER SELECTION</span></strong
+      :class="{
+        'is-active': step.identifier <= activeStepIdentifier,
+      }"
     >
-    <ul>
-      <li class="is-active">
-        <strong
-          ><span class="step-count"><FeCheck /></span>
-          <span class="label-text">Select Provider</span></strong
-        >
-      </li>
-      <li>
-        <strong
-          ><span class="step-count"><FeCheck /></span>
-          <span class="label-text">Select Credential</span></strong
-        >
-      </li>
-      <li>
-        <strong
-          ><span class="step-count"> <FeCheck /> </span>
-          <span class="label-text">Select Cluster</span></strong
-        >
-      </li>
-    </ul>
-  </li>
-  <!-- steps  01-->
-
-  <!-- steps  02-->
-  <li>
-    <strong
-      ><span class="step-count">2</span>
-      <span class="label-text">IMPORT</span></strong
+      <span
+        :class="{
+          'step-count': true,
+          'is-active': step.identifier <= activeStepIdentifier,
+        }"
+        >{{ step.identifier }}</span
+      >
+      <span class="label-text">{{ step.title }}</span>
+    </strong>
+    <ul
+      :class="{
+        'is-hidden': step.identifier !== activeStepIdentifier,
+      }"
     >
-    <ul>
-      <li>
-        <strong
-          ><span class="step-count"><FeCheck /></span>
-          <span class="label-text">Select Provider</span></strong
-        >
-      </li>
-      <li>
-        <strong
-          ><span class="step-count"><FeCheck /></span>
-          <span class="label-text">Select Credential</span></strong
-        >
-      </li>
-      <li>
-        <strong
-          ><span class="step-count"> <FeCheck /> </span>
-          <span class="label-text">Select Cluster</span></strong
-        >
+      <li
+        v-for="substep in step.substeps"
+        :key="substep?.identifier"
+        :class="{
+          'is-hidden': !substep.isVisible,
+          'is-active': substep.identifier < activeSubStepIdentifier,
+        }"
+      >
+        <strong>
+          <span class="step-count"><FeCheck /></span>
+          <span
+            :class="{
+              'label-text': true,
+              'has-text-weight-semibold':
+                substep.identifier <= activeSubStepIdentifier,
+            }"
+            >{{ substep.title }}</span
+          >
+        </strong>
       </li>
     </ul>
   </li>
-  <!-- steps  02-->
 </template>
 
 <style lang="scss" scoped>

package/vue-components/v3/sidebar/sidebar-tabs/SidebarTabs.vue

@@ -16,7 +16,7 @@
       a {
         display: flex;
         align-items: center;
-        color: $black-40;
+        color: $primary-10;
         position: relative;
         z-index: 1;
         padding: 8px 16px;
@@ -59,8 +59,84 @@
             opacity: 1;
             visibility: visible;
           }
+          &.is-danger {
+            color: $danger;
+            &:hover {
+              &::after {
+                background-color: $red-90;
+              }
+            }
+            &:after {
+              opacity: 1;
+              visibility: visible;
+              background-color: $red-95;
+            }
+          }
+          &.is-success {
+            color: $success;
+            &:hover {
+              &::after {
+                background-color: $green-90;
+              }
+            }
+            &:after {
+              opacity: 1;
+              visibility: visible;
+              background-color: $green-95;
+            }
+          }
+          &.is-warning {
+            color: $warning;
+            &:hover {
+              &::after {
+                background-color: $yellow-90;
+              }
+            }
+            &:after {
+              opacity: 1;
+              visibility: visible;
+              background-color: $yellow-95;
+            }
+          }
         }
-        span {
+        &.is-danger {
+          color: $danger;
+          &:hover {
+            &::after {
+              background-color: $red-90;
+            }
+          }
+          &:after {
+            opacity: 1;
+            visibility: visible;
+            background-color: transparent;
+          }
+        }
+        &.is-success {
+          color: $success;
+          &:hover {
+            &::after {
+              background-color: $green-90;
+            }
+          }
+          &:after {
+            opacity: 1;
+            visibility: visible;
+            background-color: transparent;
+          }
+        }
+        &.is-warning {
+          color: $warning;
+          &:hover {
+            &::after {
+              background-color: $yellow-90;
+            }
+          }
+          &:after {
+            opacity: 1;
+            visibility: visible;
+            background-color: transparent;
+          }
         }
       }
       &.is-open {

package/vue-components/v3/sidebar/sidebar-tabs/SidebarTabsLayout.vue

@@ -1,4 +1,11 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+interface Props {
+  isSidebarVisible: boolean;
+}
+withDefaults(defineProps<Props>(), {
+  isSidebarVisible: true,
+});
+</script>
 
 <template>
   <div class="sidebar-tabs-layout is-flex">
@@ -8,7 +15,7 @@
     </div>
     <!-- sidebar tabs  -->
 
-    <div class="content-wrapper">
+    <div class="content-wrapper" :class="isSidebarVisible ? 'pl-220' : 'pl-0'">
       <!-- sidebar content  -->
       <slot name="tabs-content" />
       <!-- sidebar content  -->
@@ -21,8 +28,10 @@
   position: fixed;
   background-color: $white-100;
 }
-.content-wrapper {
+.pl-220 {
   padding-left: 220px;
+}
+.content-wrapper {
   padding-bottom: 40px;
   width: 100%;
 }

package/vue-components/v3/table/InfoTable.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineAsyncComponent, ref, computed } from "vue";
+import { computed, defineAsyncComponent, ref } from "vue";
 
 interface Props {
   isLoaderActive?: boolean;
@@ -67,8 +67,10 @@ const isFullTableLoaderActive = computed(() => {
             :key="(tableHeader as string)"
           >
             <table-cell>
-              <slot :name="`table-cell-icon-${idx}`" />
-              {{ tableHeader }}
+              <span class="is-flex is-align-items-center">
+                <slot :name="`table-cell-icon-${idx}`" />
+                {{ tableHeader }}
+              </span>
             </table-cell>
             <table-cell v-if="isLoaderActive">
               <cell-value :is-loader-active="true" />
@@ -89,7 +91,7 @@ const isFullTableLoaderActive = computed(() => {
 // INFO TABLE START
 .table.ac-info-table {
   background-color: transparent;
-  border-top: 1px solid $primary-95;
+  border-top: 1px solid $primary-93;
 
   &.is-fullwidth {
     tbody {

package/vue-components/v3/table/Table.vue

@@ -272,7 +272,7 @@ onUpdated(() => {
   margin-bottom: 0;
 
   thead {
-    background-color: $white-100-lighter;
+    background-color: $primary-90;
     font-size: 13px;
     line-height: initial;
 
@@ -334,11 +334,11 @@ onUpdated(() => {
       box-shadow: inset 0 0 0 1px $primary;
       border-radius: 4px;
       border-bottom: none;
-      color: $ac-black;
+      color: $black-5;
     }
 
     tr {
-      border-bottom: 1px solid var(--ac-white-light);
+      border-bottom: 1px solid $primary-90;
       &.is-link {
         cursor: pointer;
       }
@@ -348,10 +348,10 @@ onUpdated(() => {
         box-shadow: inset 0 0 0 1.2px $primary;
         border-radius: 4px;
         border-bottom: none;
-        color: $ac-black;
+        color: $black-5;
         transition: 0.3s ease-in-out;
         .tag {
-          background-color: $primary-90;
+          background-color: $primary;
         }
         &:hover {
           background-color: $primary-95 !important;
@@ -466,15 +466,15 @@ onUpdated(() => {
     width: 36px;
 
     .increase-innner {
-      border-bottom: 1px solid var(--ac-white-light);
-      border-top: 1px solid var(--ac-white-light);
+      border-bottom: 1px solid $primary-90;
+      border-top: 1px solid $primary-90;
       bottom: -1px;
       left: 0;
       position: absolute;
       right: -451px;
       top: -1px;
       visibility: visible;
-      background-color: $white-100-lighter;
+      background-color: $primary-90;
     }
   }
 
@@ -490,9 +490,9 @@ onUpdated(() => {
     thead {
       tr {
         th {
-          border-top: 1px solid $primary-95;
-          border-bottom: 1px solid $primary-95;
-          border-right: 1px solid $primary-95;
+          border-top: 1px solid $primary-93;
+          border-bottom: 1px solid $primary-93;
+          border-right: 1px solid $primary-93;
           background-color: $primary-97;
 
           &:first-child {
@@ -515,8 +515,8 @@ onUpdated(() => {
           font-size: 13px;
           color: $primary-20;
           background-color: transparent;
-          border-bottom: 1px solid $primary-95;
-          border-right: 1px solid $primary-95;
+          border-bottom: 1px solid $primary-93;
+          border-right: 1px solid $primary-93;
           &:last-child {
             border-right: 1px solid transparent;
           }
@@ -536,7 +536,7 @@ onUpdated(() => {
           .ac-single-checkbox {
             .is-checkradio[type="checkbox"] {
               &.ac-checkbox + label {
-                color: $ac-link-black;
+                color: $primary-20;
 
                 &::before {
                   height: 16px;
@@ -559,7 +559,7 @@ onUpdated(() => {
               }
 
               &:checked + label::after {
-                border-color: $white-100-lighter;
+                border-color: $primary-90;
               }
             }
           }
@@ -652,7 +652,7 @@ onUpdated(() => {
 // table inner shadow
 .table-inner-shadow {
   border-radius: 0px;
-  background: $white-100-lighter;
+  background: $primary-90;
   box-shadow: inset 5px 5px 10px #e3e6e9, inset -5px -5px 10px #ffffff;
 }
 

package/vue-components/v3/table/TableRow.vue

@@ -77,7 +77,7 @@ const toggleCollapse = () => {
     >
       <table-cell v-if="collapsible">
         <collapsible-button
-          modifier-classes="is-square is-light height-20 width-20 is-rounded is-size-7"
+          modifier-classes="is-square is-light height-20 width-20 is-rounded is-size-7 p-0"
           :icon-class="isCollapsed ? 'chevron-right' : 'chevron-down'"
           @click.stop="toggleCollapse"
         />
@@ -102,7 +102,7 @@ const toggleCollapse = () => {
   >
     <table-cell v-if="collapsible">
       <collapsible-button
-        modifier-classes="is-square is-light height-20 width-20 is-rounded is-size-7"
+        modifier-classes="is-square is-light height-20 width-20 is-rounded is-size-7 p-0"
         :icon-class="isCollapsed ? 'chevron-right' : 'chevron-down'"
         @click.stop="toggleCollapse"
       />

package/vue-components/v3/tag/Tag.vue

@@ -16,5 +16,6 @@ withDefaults(defineProps<Props>(), {
 <style lang="scss" scoped>
 .tag {
   line-height: 1;
+  font-size: 11px;
 }
 </style>