@appscode/design-system 1.1.0-beta.6 → 1.1.0-beta.60

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,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

@@ -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,7 @@ 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"

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

@@ -91,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

@@ -77,6 +77,9 @@ const handleScroller = (value: number) => {
   emit("scroller", value);
 };
 
+const headerWidths = ref<number[]>([]);
+const totalWidth = ref<number>(0);
+
 const onWindowResize = () => {
   if (ac_table.value && props.isDynamicWidthTable) {
     const tableWidth = ac_table.value.clientWidth;
@@ -108,6 +111,26 @@ const emitSortEvent = (index: number) => {
 watch(
   () => props.tableHeaders,
   (n) => {
+    // calculated column width based on percentages
+    headerWidths.value = n.map((th) => th.width || 1);
+    totalWidth.value = headerWidths.value.reduce((p, c) => p + c, 0);
+    let collapsibleWidth = 0;
+    let actionsWidth = 0;
+    const collapsibleWidthPercent = 70 / (ac_table.value?.clientWidth || 0);
+    const actionsWidthPercent = 140 / (ac_table.value?.clientWidth || 0);
+    if (props.collapsible) {
+      collapsibleWidth =
+        (totalWidth.value * collapsibleWidthPercent) /
+        (1 - collapsibleWidthPercent);
+      headerWidths.value = [collapsibleWidth, ...headerWidths.value];
+    }
+    if (props.actionable) {
+      actionsWidth =
+        (totalWidth.value * actionsWidthPercent) / (1 - actionsWidthPercent);
+      headerWidths.value = [...headerWidths.value, actionsWidth];
+    }
+    totalWidth.value += collapsibleWidth + actionsWidth;
+
     if (headerSortables.value.length === n.length) {
       n.forEach((th, idx) => {
         if (headerSortables.value[idx].enabled !== !!th?.sort?.enable) {
@@ -156,6 +179,13 @@ onUpdated(() => {
         // 'is-bordered': columnStriped,
       }"
     >
+      <colgroup>
+        <col
+          v-for="(hw, idx) in headerWidths"
+          :key="`${hw}-${idx}`"
+          :width="`${(hw / totalWidth) * 100}%`"
+        />
+      </colgroup>
       <thead>
         <table-row v-if="isFullTableLoaderActive">
           <th v-for="i in loaderCols" :key="i">
@@ -199,11 +229,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 +298,7 @@ onUpdated(() => {
   margin-bottom: 0;
 
   thead {
-    background-color: $white-100-lighter;
+    background-color: $primary-90;
     font-size: 13px;
     line-height: initial;
 
@@ -334,11 +360,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 +374,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 +492,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 +516,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 +541,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 +562,7 @@ onUpdated(() => {
           .ac-single-checkbox {
             .is-checkradio[type="checkbox"] {
               &.ac-checkbox + label {
-                color: $ac-link-black;
+                color: $primary-20;
 
                 &::before {
                   height: 16px;
@@ -559,7 +585,7 @@ onUpdated(() => {
               }
 
               &:checked + label::after {
-                border-color: $white-100-lighter;
+                border-color: $primary-90;
               }
             }
           }
@@ -652,7 +678,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/table/table-cell/ArrayCell.vue

@@ -53,8 +53,8 @@ const indexOfCharacterLengthExceed = computed(() => {
   let idx = -1;
   let cumulativeLen = 0;
   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 + 2 > props.maxCharacterLength) {
       idx = index;
       break;
     }

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

@@ -50,7 +50,7 @@ const valueType = computed(() => {
 });
 
 const maxCharacterLength = computed(() => {
-  return Math.ceil(computedCellWidth.value / 8);
+  return Math.ceil(computedCellWidth.value / 10);
 });
 
 const primaryColor = computed(() => {

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

@@ -48,8 +48,8 @@ const indexOfCharacterLengthExceed = computed(() => {
   let idx = -1;
   let cumulativeLen = 0;
   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 + 2 > props.maxCharacterLength) {
       idx = index;
       break;
     }
@@ -68,7 +68,7 @@ const indexOfCharacterLengthExceed = computed(() => {
         indexOfCharacterLengthExceed
       )"
       :key="printableStringOb.key"
-      modifierClasses="is-info is-light"
+      modifierClasses="is-primary is-light"
     >
       <value-with-modal
         v-if="printableStringOb.exceededLength"

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>