@appscode/design-system 1.1.0-beta.8 → 1.1.0-beta.80

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 interface Props {
   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,37 +197,9 @@ 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 {
+.sidebar-collapsed:not(.is-hoverable) {
   .ac-left-sidebar-wrapper {
     width: 60px;
     .ac-left-sidebar {

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

@@ -1,7 +1,14 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+defineEmits(["hover"]);
+</script>
 
 <template>
-  <ul class="menu-list ac-menu-list">
+  <ul
+    class="menu-list ac-menu-list"
+    data-testid="cluster-sidebar-menu-list"
+    @mouseenter="$emit('hover', true)"
+    @mouseleave="$emit('hover', false)"
+  >
     <slot />
   </ul>
 </template>

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

@@ -16,7 +16,7 @@ const AccentColorPicker = defineAsyncComponent(
 <template>
   <div class="sidebar-footer">
     <!-- back button  -->
-    <button class="back-button is-transparent" @click="$emit('toggleSidebar')">
+    <button class="back-button is-transparent" data-testid = "sidebar-footer-back-button" @click="$emit('toggleSidebar')">
       <svg
         width="18"
         height="18"
@@ -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/SidebarHeader.vue

@@ -18,7 +18,11 @@ withDefaults(defineProps<Props>(), {
 <template>
   <div class="sidebar-header">
     <!-- hamburger icon  -->
-    <div class="icon hamburger-icon mr-16" @click="$emit('toggleSidebar')">
+    <div
+      class="icon hamburger-icon mr-16"
+      data-testid="sidebar-menu-button"
+      @click="$emit('toggleSidebar')"
+    >
       <svg
         width="18"
         height="18"
@@ -60,7 +64,7 @@ withDefaults(defineProps<Props>(), {
 </template>
 
 <style lang="scss" scoped>
-.sidebar-collapsed .ac-left-sidebar-wrapper {
+.sidebar-collapsed:not(.is-hoverable) .ac-left-sidebar-wrapper {
   .brand-logo {
     display: none !important;
   }

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/Table.vue

@@ -199,11 +199,7 @@ onUpdated(() => {
               <i class="fa fa-exclamation-triangle" />
             </span>
           </th>
-          <th
-            ref="action-section"
-            v-if="actionable"
-            style="min-width: 100px"
-          ></th>
+          <th ref="action-section" v-if="actionable"></th>
           <fake-table-cell
             v-if="fakeCellWidth > 0"
             :is-header-cell="true"
@@ -272,7 +268,7 @@ onUpdated(() => {
   margin-bottom: 0;
 
   thead {
-    background-color: $white-100-lighter;
+    background-color: $primary-95;
     font-size: 13px;
     line-height: initial;
 
@@ -334,11 +330,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 +344,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-80;
         }
         &:hover {
           background-color: $primary-95 !important;
@@ -447,6 +443,8 @@ onUpdated(() => {
             animation: collapse 0.5s ease-in-out;
           }
         }
+
+        white-space: nowrap;
       }
 
       .options-items {
@@ -466,15 +464,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;
     }
   }
 
@@ -536,7 +534,7 @@ onUpdated(() => {
           .ac-single-checkbox {
             .is-checkradio[type="checkbox"] {
               &.ac-checkbox + label {
-                color: $ac-link-black;
+                color: $primary-20;
 
                 &::before {
                   height: 16px;
@@ -559,7 +557,7 @@ onUpdated(() => {
               }
 
               &:checked + label::after {
-                border-color: $white-100-lighter;
+                border-color: $primary-90;
               }
             }
           }
@@ -652,7 +650,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/TableCell.vue

@@ -8,18 +8,10 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   cellWidth: null,
 });
-
-const styleOb = computed(() => {
-  const ob: { width?: string } = {};
-  if (props.cellWidth) {
-    ob.width = `${props.cellWidth}px`;
-  }
-  return ob || {};
-});
 </script>
 
 <template>
-  <td :style="styleOb">
+  <td>
     <slot />
   </td>
 </template>

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/table/table-cell/ArrayCell.vue

@@ -51,10 +51,10 @@ const printableStringObjs = computed(() => {
 
 const indexOfCharacterLengthExceed = computed(() => {
   let idx = -1;
-  let cumulativeLen = 0;
+  let cumulativeLen = 2;
   for (const [index, po] of printableStringObjs.value.entries()) {
-    const newLen = cumulativeLen + po.print.length;
-    if (newLen > props.maxCharacterLength) {
+    const newLen = cumulativeLen + po.print.length + 2;
+    if (newLen + 4 > props.maxCharacterLength) {
       idx = index;
       break;
     }
@@ -66,34 +66,37 @@ const indexOfCharacterLengthExceed = computed(() => {
 </script>
 
 <template>
-  <tags v-if="printableStringObjs.length">
-    <tag
-      v-for="(printableStringOb, idx) in printableStringObjs.slice(
-        0,
-        indexOfCharacterLengthExceed
-      )"
-      :key="`${printableStringOb.print}-${idx}`"
-    >
-      <value-with-modal
-        v-if="printableStringOb.exceededLength"
-        :title="`${cellTitle}: ${idx}`"
-        :value="printableStringOb.value"
-        :print="printableStringOb.print"
-      />
-      <template v-else> {{ printableStringOb.print }} </template>
-    </tag>
-
-    <tag v-if="indexOfCharacterLengthExceed !== printableStringObjs.length">
-      <a @click.prevent.stop="showFullData = true">
-        <ellipsis-icon />
-        <json-show-modal
-          :open="showFullData"
-          @closemodal="showFullData = false"
-          :editor-title="cellTitle"
-          :editor-content="items"
+  <span>
+    <tags v-if="printableStringObjs.length">
+      <tag
+        v-for="(printableStringOb, idx) in printableStringObjs.slice(
+          0,
+          indexOfCharacterLengthExceed
+        )"
+        :key="`${printableStringOb.print}-${idx}`"
+        modifierClasses="is-primary is-light"
+      >
+        <value-with-modal
+          v-if="printableStringOb.exceededLength"
+          :title="`${cellTitle}: ${idx}`"
+          :value="printableStringOb.value"
+          :print="printableStringOb.print"
         />
-      </a>
-    </tag>
-  </tags>
-  <p v-else>-</p>
+        <template v-else> {{ printableStringOb.print }} </template>
+      </tag>
+
+      <tag v-if="indexOfCharacterLengthExceed !== printableStringObjs.length">
+        <a @click.prevent.stop="showFullData = true">
+          <ellipsis-icon />
+          <json-show-modal
+            :open="showFullData"
+            @closemodal="showFullData = false"
+            :editor-title="cellTitle"
+            :editor-content="items"
+          />
+        </a>
+      </tag>
+    </tags>
+    <p v-else>{{ printableStringObjs }}</p>
+  </span>
 </template>

package/vue-components/v3/table/table-cell/CellValue.vue

@@ -1,12 +1,6 @@
 <script setup lang="ts">
-import {
-  computed,
-  defineAsyncComponent,
-  nextTick,
-  onMounted,
-  ref,
-  watch,
-} from "vue";
+import { computed, defineAsyncComponent, ref } from "vue";
+import { useElementSize } from "@vueuse/core";
 
 interface Props {
   isLoaderActive?: boolean;
@@ -37,7 +31,6 @@ const loaderDarkThemePrimaryColor = "#2e323c";
 const loaderLightThemeSecondaryColor = "#ecebeb";
 const loaderDarkThemeSecondaryColor = "#21272e";
 
-const computedCellWidth = ref(50);
 const cellLoaderDiv = ref<HTMLElement | null>(null);
 const cellDiv = ref<HTMLElement | null>(null);
 
@@ -49,8 +42,16 @@ const valueType = computed(() => {
   } else return typeof props.value;
 });
 
+const { width: cellLoaderDivWidth } = useElementSize(cellLoaderDiv, {
+  width: 150,
+  height: 30,
+});
+const { width: cellDivWidth } = useElementSize(cellDiv, {
+  width: 150,
+  height: 30,
+});
 const maxCharacterLength = computed(() => {
-  return Math.ceil(computedCellWidth.value / 8);
+  return Math.ceil(cellDivWidth.value / 6);
 });
 
 const primaryColor = computed(() => {
@@ -64,41 +65,14 @@ const secondaryColor = computed(() => {
     ? loaderDarkThemeSecondaryColor
     : loaderLightThemeSecondaryColor;
 });
-
-const calcCellWidth = () => {
-  if (props.isLoaderActive) {
-    nextTick(() => {
-      if (cellLoaderDiv.value) {
-        computedCellWidth.value = cellLoaderDiv.value.offsetWidth;
-      }
-    });
-  } else {
-    nextTick(() => {
-      if (cellDiv.value) {
-        computedCellWidth.value = cellDiv.value.offsetWidth;
-      }
-    });
-  }
-};
-
-onMounted(() => {
-  calcCellWidth();
-});
-
-watch(
-  () => props.isLoaderActive,
-  () => {
-    calcCellWidth();
-  }
-);
 </script>
 
 <template>
   <div v-if="isLoaderActive" ref="cellLoaderDiv" :style="{ maxWidth: '300px' }">
     <content-loader
-      :view-box="`0 0 ${computedCellWidth || 300} 10`"
+      :view-box="`0 0 ${cellLoaderDivWidth || 300} 10`"
       :speed="2"
-      :key="computedCellWidth"
+      :key="cellLoaderDivWidth"
       :primaryColor="primaryColor"
       :secondaryColor="secondaryColor"
     />
@@ -119,7 +93,7 @@ watch(
       data-testid="array-cell-value"
     />
     <template v-else>
-      <span class="is-ellipsis-1" :title="tooltip" data-testid="cell-value">{{
+      <span :title="tooltip" data-testid="cell-value">{{
         value || (value === 0 ? 0 : "-")
       }}</span>
     </template>