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

package/vue-components/v3/button/Button.vue

@@ -55,10 +55,25 @@ const handleClick = (e: Event) => {
 <style lang="scss" scoped>
 .button {
   &.ac-button {
-    padding: 8px 18px;
+    padding: 8px 16px;
     font-weight: 500;
     line-height: 1;
+    &.is-primary {
+      &.is-light {
+        color: $primary;
+      }
+    }
+    &.is-warning {
+      &.is-light {
+        color: $yellow-30;
+      }
+    }
 
+    &.is-success {
+      &.is-light {
+        color: $green-30;
+      }
+    }
     &.is-light {
       &.is-loading {
         &::after {
@@ -66,16 +81,23 @@ const handleClick = (e: Event) => {
         }
       }
     }
+    &.is-ghost {
+      border-color: transparent !important;
+    }
     &.is-square {
       border: 1px solid $primary-95;
     }
     &.is-small {
       padding: 4px 9px;
     }
+    &.is-medium {
+      font-size: 1rem;
+      height: 36px;
+    }
   }
 }
 button.is-primary {
-  background-color: $ac-primary;
+  background-color: $primary;
 }
 // .button {
 //   transition: 86ms ease-in-out;
@@ -248,19 +270,19 @@ button.is-primary {
 //         color: $black-40;
 
 //         &:hover {
-//           background-color: $white-100-lighter;
-//           color: $ac-black;
+//           background-color: $primary-90;
+//           color: $black-5;
 //         }
 
 //         &:focus {
-//           background-color: $white-100-lighter;
-//           color: $ac-black;
+//           background-color: $primary-90;
+//           color: $black-5;
 //         }
 //       }
 
 //       &.transparent-bg {
 //         background-color: transparent;
-//         border: 1px solid $ac-label-text;
+//         border: 1px solid $primary-10;
 
 //         img {
 //           &:hover {
@@ -536,7 +558,7 @@ button.is-primary {
 // // counter button start
 // .ac-counter-button {
 //   background-color: transparent;
-//   border: 1px solid $ac-label-text;
+//   border: 1px solid $primary-10;
 //   border-radius: 4px;
 //   height: 46px;
 //   overflow: hidden;
@@ -583,13 +605,13 @@ button.is-primary {
 //   .ac-counter-arrow-wrapper {
 //     height: 100%;
 //     color: $primary-10;
-//     border-left: 1px solid $ac-label-text;
+//     border-left: 1px solid $primary-10;
 
 //     .ac-counter-arrow {
 //       background-color: transparent;
 //       border: none;
 //       cursor: pointer;
-//       color: $ac-label-text;
+//       color: $primary-10;
 //       height: 23px;
 
 //       &:hover {
@@ -597,7 +619,7 @@ button.is-primary {
 //       }
 
 //       &:first-child {
-//         border-bottom: 1px solid $ac-label-text;
+//         border-bottom: 1px solid $primary-10;
 //       }
 //     }
 //   }

package/vue-components/v3/cards/Cluster.vue

@@ -28,14 +28,14 @@ const OptionDots = defineAsyncComponent(
 </script>
 
 <template>
-  <div class="card-details" :class="modifierClasses">
+  <div class="card-details" :class="modifierClasses" data-testid="cluster-item-navigate">
     <div class="c-header">
       <div class="c-logo">
         <img :src="clusterData.providerIcon" alt="" />
       </div>
       <div class="c-content">
         <div class="is-flex is-justify-content-space-between">
-          <h4>{{ clusterData.name }}</h4>
+          <h4 data-testid="cluster-title-text">{{ clusterData.name }}</h4>
           <option-dots v-if="showOptions" :position="'is-right'">
             <slot name="options" />
           </option-dots>
@@ -45,6 +45,7 @@ const OptionDots = defineAsyncComponent(
             v-for="(tag, idx) in clusterData.tags"
             :key="idx + tag.value"
             :class="tag.class"
+            :data-testid="idx===0 ? 'cluster-status-text' : undefined"
             >{{ tag.value }}</span
           >
         </div>
@@ -65,6 +66,9 @@ const OptionDots = defineAsyncComponent(
   transition: 0.3s ease-in-out;
   position: relative;
   z-index: 1;
+  width: calc(33% - 7px);
+  min-width: 430px;
+  max-width: 530px;
 
   .c-header {
     display: flex;

package/vue-components/v3/cards/FeatureCard.vue

@@ -12,7 +12,7 @@ withDefaults(
 </script>
 <template>
   <!-- single card wrapper start  -->
-  <div class="card-basic b-1">
+  <div class="card-basic b-1" data-testid="simple-feature-card">
     <div class="c-header is-flex is-justify-content-space-between">
       <div
         v-if="isRequired"

package/vue-components/v3/cards/FeatureCards.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts"></script>
 <template>
-  <div class="is-flex is-flex-wrap-wrap" style="gap: 16px">
+  <div class="is-flex is-flex-wrap-wrap" data-testid="simple-feature-sets" style="gap: 16px">
     <slot />
   </div>
 </template>

package/vue-components/v3/cards/InfoCard.vue

@@ -166,9 +166,8 @@ const OptionDots = defineAsyncComponent(
   .header {
     display: flex;
     align-items: center;
-    padding: 8px 16px;
+    padding: 12px 16px;
     border-bottom: 1px dashed $primary-90;
-    background-color: $primary-97;
 
     .logo {
       display: flex;

package/vue-components/v3/cards/OverviewCard.vue

@@ -20,5 +20,9 @@
   border: 1px solid $primary-90;
   padding: 8px 16px;
   border-radius: 2px;
+  strong {
+    min-width: 30px;
+    font-size: 14px;
+  }
 }
 </style>

package/vue-components/v3/cards/OverviewCards.vue

@@ -4,12 +4,20 @@ import { defineAsyncComponent } from "vue";
 const ContentHeader = defineAsyncComponent(
   () => import("./../content/ContentHeader.vue")
 );
+
+interface Props {
+  headerTitle: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  headerTitle: "",
+});
 </script>
 
 <template>
   <div class="overview-cards-wrapper">
     <!-- title  -->
-    <content-header headerTitle="Resource Usage"></content-header>
+    <content-header :headerTitle="headerTitle"></content-header>
     <!-- title  -->
     <div class="overview-cards b-t-1">
       <slot />
@@ -20,7 +28,7 @@ const ContentHeader = defineAsyncComponent(
 .overview-cards-wrapper {
   border: 1px solid $primary-90;
   margin-right: 20px;
-  height: 100%;
+  height: calc(100% - 16px);
 }
 .overview-cards {
   display: grid;

package/vue-components/v3/cards/Vendor.vue

@@ -3,26 +3,31 @@ interface Props {
   title?: string;
   subTitle?: string;
   logo?: string;
+  link?: string;
 }
 
 withDefaults(defineProps<Props>(), {
   title: "no title",
   subTitle: "",
   logo: "https://bb-developer-v1.web.app/_nuxt/img/azure-logo.4fa9281.svg",
+  link: "#",
 });
 </script>
+
 <template>
   <!-- use "is-selected" for select item  -->
-  <a class="ac-single-card has-text-centered">
+  <RouterLink :to="link" class="ac-single-card has-text-centered">
     <div class="ac-card-logo">
-      <div class="card-status"></div>
+      <div class="card-status" />
       <img :src="logo" alt="vendor logo" />
     </div>
     <div class="ac-card-name">
       <p>{{ title }}</p>
-      <p class="has-text-weight-normal mt-8" v-if="subTitle">{{ subTitle }}</p>
+      <p v-if="subTitle" class="has-text-weight-normal mt-8">
+        {{ subTitle }}
+      </p>
     </div>
-  </a>
+  </RouterLink>
 </template>
 
 <style lang="scss" scoped>
@@ -34,7 +39,7 @@ withDefaults(defineProps<Props>(), {
   flex-direction: column;
   justify-content: space-between;
   background-color: $primary-97;
-  min-width: 220px;
+  min-width: 215px;
   padding: 30px 20px 20px;
   cursor: pointer;
 

package/vue-components/v3/content/ContentTable.vue

@@ -54,7 +54,7 @@ const updateSearchText = (text: string) => {
           <search-bar
             v-if="searchable"
             @search="updateSearchText"
-            :id="acInuptId"
+            :ac-input-id="acInuptId"
           />
         </header-item>
         <slot name="content-right-controls" />

package/vue-components/v3/editor/FilteredFileEditor.vue

@@ -137,7 +137,7 @@ watch(
         </strong>
         <template v-else>
           <div v-if="!isPreviewLoading && previewYamls" class="left-content">
-            <div class="ac-files ac-hscrollbar pt-0">
+            <div class="ac-files ac-hscrollbar ac-vscrollbar pt-0">
               <ul v-if="!isPreviewLoading">
                 <li
                   v-for="(previewYaml, idx) in filteredYamls"
@@ -288,6 +288,10 @@ watch(
 
         .ac-files {
           ul {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+
             li {
               &.is-active {
                 a {

package/vue-components/v3/footer/FooterArea.vue

@@ -21,8 +21,9 @@
   min-height: 30px;
   padding: 0 20px;
   background: $primary-20;
-  border-top: 1px solid $primary-90;
-  z-index: 99;
+  border-top: 1px solid #3d5e7c;
+  z-index: 9999;
+  transition: 0.3s ease-in-out;
 }
 
 .footer-left,
@@ -31,4 +32,9 @@
   align-items: center;
   gap: 32px;
 }
+.sidebar-collapsed {
+  .footer-area {
+    width: calc(100% - 60px);
+  }
+}
 </style>

package/vue-components/v3/footer/Info.vue

@@ -1,20 +1,22 @@
 <script lang="ts" setup>
-import { ref, defineAsyncComponent } from "vue";
+import { defineAsyncComponent } from "vue";
 
 const FooterItems = defineAsyncComponent(() => import("./FooterItems.vue"));
 const FooterItem = defineAsyncComponent(() => import("./FooterItem.vue"));
 
-const dataObj = ref([
-  { key: "VERSION:", value: "10.5.8" },
-  { key: "NAMESPACE:", value: "demo" },
-  { key: "MODE:", value: "Standalone" },
-]);
+interface Props {
+  infoData?: Array<Record<string, string>>;
+}
+
+withDefaults(defineProps<Props>(), {
+  infoData: () => [],
+});
 </script>
 
 <template>
   <footer-items>
-    <footer-item v-for="(data, idx) in dataObj" :key="idx">
-      <span class="">{{ data.key }}</span>
+    <footer-item v-for="(data, idx) in infoData" :key="idx + data.key">
+      <span class="">{{ data.key }}:</span>
       <span>{{ data.value }}</span>
     </footer-item>
   </footer-items>

package/vue-components/v3/footer/Status.vue

@@ -5,36 +5,37 @@ const FooterItem = defineAsyncComponent(() => import("./FooterItem.vue"));
 const HeroiconsCheckBadge = defineAsyncComponent(
   () => import("~icons/heroicons/check-badge")
 );
+const HeroiconsCrossBadge = defineAsyncComponent(
+  () => import("~icons/heroicons/x-circle")
+);
+const HeroiconsLoadingBadge = defineAsyncComponent(
+  () => import("~icons/heroicons/arrow-path")
+);
+interface Props {
+  statusInfo?: Array<Record<string, string>>;
+}
 
-const status = ref([
-  {
-    icon: "HeroiconsCheckCircle",
-    label: "Not Exposed",
-    classType: "has-text-warning",
-  },
-  { icon: "HeroiconsXCircle", label: "TLS", classType: "has-text-danger" },
-  {
-    icon: "HeroiconsCheckBadge",
-    label: "Backup",
-    classType: "has-text-success",
-  },
-  {
-    icon: "HeroiconsXCircle",
-    label: "Monitoring",
-    classType: "has-text-danger",
-  },
-]);
+withDefaults(defineProps<Props>(), {
+  statusInfo: () => [],
+});
 </script>
 
 <template>
   <footer-items>
     <footer-item
-      v-for="(item, idx) in status"
-      :key="idx"
-      :modifier-classes="item.classType"
+      v-for="(item, idx) in statusInfo"
+      :key="idx + item.label"
+      :modifier-classes="item.color"
     >
-      <span class="icon"><HeroiconsCheckBadge :size="20" /></span
-      ><span>{{ item.label }}</span>
+      <span class="icon">
+        <HeroiconsCheckBadge v-if="item.color === `has-text-success`" />
+        <i
+          v-else-if="item.color === `has-text-warning`"
+          class="fa fa-refresh fa-spin fa-fw"
+        ></i>
+        <HeroiconsCrossBadge v-else />
+      </span>
+      <span>{{ item.label }}</span>
     </footer-item>
   </footer-items>
 </template>

package/vue-components/v3/footer/Usage.vue

@@ -1,42 +1,32 @@
 <script lang="ts" setup>
-import { defineAsyncComponent, ref } from "vue";
+import { defineAsyncComponent } from "vue";
 const FooterItems = defineAsyncComponent(() => import("./FooterItems.vue"));
 const FooterItem = defineAsyncComponent(() => import("./FooterItem.vue"));
 
-const HeroiconsCpuChip = defineAsyncComponent(
-  () => import("~icons/heroicons/cpu-chip")
-);
+interface Props {
+  usages?: Array<{
+    icon?: string;
+    useData?: {
+      limit?: string;
+      request?: string;
+    };
+  }>;
+}
 
-const usages = ref([
-  {
-    icon: "HeroiconsCpuChip",
-    useData: {
-      limit: "500m",
-      usage: "500m",
-    },
-  },
-  {
-    icon: "HeroiconsCpuChip",
-    useData: {
-      limit: "1G",
-      usage: "1G",
-    },
-  },
-  {
-    icon: "HeroiconsCpuChip",
-    useData: {
-      limit: "10Gi",
-      usage: "10Gi",
-    },
-  },
-]);
+withDefaults(defineProps<Props>(), {
+  usages: () => [],
+});
 </script>
 
 <template>
   <footer-items>
-    <footer-item v-for="(type, idx) in usages" :key="idx">
-      <span class="icon"><HeroiconsCpuChip :size="20" /></span
-      ><span>{{ type.useData.limit }}/{{ type.useData.usage }}</span>
+    <footer-item v-for="(info, idx) in usages" :key="idx">
+      <span class="icon"><img :src="info.icon" /></span
+      ><span
+        >{{ info.useData?.limit || "N" }}/{{
+          info.useData?.request || "A"
+        }}</span
+      >
     </footer-item>
   </footer-items>
 </template>

package/vue-components/v3/form/Form.vue

@@ -22,9 +22,6 @@ withDefaults(defineProps<Props>(), {
   <div class="form-wrapper">
     <div
       :class="{
-        'pt-20': !reducePaddingTop,
-        'pt-10': reducePaddingTop,
-        'pl-20': !isContainer,
         'form-content': !isContainer,
         container: isContainer,
       }"

package/vue-components/v3/form-fields/AcSingleInput.vue

@@ -142,7 +142,7 @@ withDefaults(defineProps<Props>(), {
 
       &.show-label {
         font-size: 12px;
-        color: $black-40;
+        color: $primary-20;
         top: -9px;
         font-weight: 500;
         background-color: $white-100;
@@ -394,12 +394,7 @@ withDefaults(defineProps<Props>(), {
           transition: 0.3s;
 
           &:hover {
-            background-color: hsla(
-              var(--hsl-hue),
-              var(--hsl-saturation),
-              var(--hsl-lightness),
-              0.2
-            );
+            background-color: $primary-30;
             color: $primary;
           }
         }
@@ -494,7 +489,7 @@ withDefaults(defineProps<Props>(), {
 
   span.eye {
     i.fa {
-      color: $primary-80;
+      color: $primary-70;
       position: absolute;
       cursor: pointer;
       padding: 15px;

package/vue-components/v3/header/Header.vue

@@ -26,7 +26,7 @@ withDefaults(defineProps<Props>(), {
       <header-items>
         <header-item>
           <transition name="fade" mode="out-in" appear>
-            <h5 :key="title">{{ title }}</h5>
+            <h4 :key="title">{{ title }}</h4>
           </transition>
         </header-item>
         <slot name="header-left-controls" />
@@ -41,7 +41,7 @@ withDefaults(defineProps<Props>(), {
 <style lang="scss" scoped>
 .inner-header {
   padding: 6px 20px;
-  border-bottom: 1px solid $primary-90;
+  border-bottom: 1px solid $primary-93;
   position: sticky;
   background: $white-100;
   z-index: 99;

package/vue-components/v3/loaders/InfoCardLoader.vue

@@ -1,65 +1,23 @@
-<script setup lang="ts">
+<script>
 import { ContentLoader } from "vue-content-loader";
+
+export default {
+  components: { ContentLoader },
+};
 </script>
 
 <template>
-  <div>
-    <svg
-      role="img"
-      width="230"
-      height="115"
-      aria-labelledby="loading-aria"
-      viewBox="0 0 230 115"
-      preserveAspectRatio="none"
-    >
-      <title id="loading-aria">Loading...</title>
-      <rect
-        x="0"
-        y="0"
-        width="100%"
-        height="100%"
-        clip-path="url(#clip-path)"
-        style="fill: url('#fill')"
-      ></rect>
-      <defs>
-        <clipPath id="clip-path">
-          <rect x="150" y="40" rx="3" ry="3" width="60" height="50" />
-          <rect x="10" y="70" rx="3" ry="3" width="120" height="11" />
-          <rect x="10" y="100" rx="3" ry="3" width="120" height="11" />
-          <rect x="150" y="100" rx="3" ry="3" width="60" height="11" />
-          <rect x="10" y="1" rx="3" ry="3" width="200" height="22" />
-          <rect x="10" y="40" rx="3" ry="3" width="120" height="11" />
-        </clipPath>
-        <linearGradient id="fill">
-          <stop offset="0.599964" stop-color="#cfcfcf" stop-opacity="1">
-            <animate
-              attributeName="offset"
-              values="-2; -2; 1"
-              keyTimes="0; 0.25; 1"
-              dur="2s"
-              repeatCount="indefinite"
-            ></animate>
-          </stop>
-          <stop offset="1.59996" stop-color="#ecebeb" stop-opacity="1">
-            <animate
-              attributeName="offset"
-              values="-1; -1; 2"
-              keyTimes="0; 0.25; 1"
-              dur="2s"
-              repeatCount="indefinite"
-            ></animate>
-          </stop>
-          <stop offset="2.59996" stop-color="#cfcfcf" stop-opacity="1">
-            <animate
-              attributeName="offset"
-              values="0; 0; 3"
-              keyTimes="0; 0.25; 1"
-              dur="2s"
-              repeatCount="indefinite"
-            ></animate>
-          </stop>
-        </linearGradient>
-      </defs>
-    </svg>
-  </div>
+  <content-loader
+    viewBox="0 0 230 115"
+    :speed="2"
+    primaryColor="#f5f5f5"
+    secondaryColor="#ecebeb"
+  >
+    <rect x="0" y="0" rx="0" ry="0" />
+    <rect x="10" y="70" rx="3" ry="3" width="120" height="11" />
+    <rect x="10" y="100" rx="3" ry="3" width="120" height="11" />
+    <rect x="150" y="100" rx="3" ry="3" width="60" height="11" />
+    <rect x="10" y="1" rx="3" ry="3" width="216" height="22" />
+    <rect x="10" y="40" rx="3" ry="3" width="120" height="11" />
+  </content-loader>
 </template>

package/vue-components/v3/loaders/SingleInfoCardLoader.vue

@@ -0,0 +1,24 @@
+<script>
+import { ContentLoader } from "vue-content-loader";
+
+export default {
+  components: { ContentLoader },
+};
+</script>
+
+<template>
+  <content-loader
+    viewBox="0 0 1540 90"
+    :speed="2"
+    primaryColor="#f5f5f5"
+    secondaryColor="#ecebeb"
+  >
+    <rect x="0" y="0" rx="0" ry="0" />
+    <circle cx="47" cy="52" r="21" />
+    <rect x="86" y="64" rx="0" ry="0" width="95" height="11" />
+    <rect x="86" y="29" rx="0" ry="0" width="146" height="22" />
+    <rect x="1240" y="57" rx="0" ry="0" width="64" height="12" />
+    <rect x="1340" y="57" rx="0" ry="0" width="64" height="12" />
+    <rect x="1440" y="56" rx="0" ry="0" width="64" height="12" />
+  </content-loader>
+</template>