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

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

@@ -1,6 +1,22 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    isMaxWidth?: boolean;
+  }>(),
+  { isMaxWidth: false }
+);
+</script>
 <template>
-  <div class="buttons">
+  <div v-if="isMaxWidth" :style="{ width: 'max-content' }" class="buttons">
     <slot />
   </div>
+  <div v-else class="buttons"><slot /></div>
 </template>
+
+<!-- <style lang="scss">
+.buttons {
+  .button {
+    margin-bottom: 16px;
+  }
+}
+</style> -->

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

@@ -28,32 +28,38 @@ const OptionDots = defineAsyncComponent(
 </script>
 
 <template>
-  <div class="card-details" :class="modifierClasses">
-    <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>
-          <option-dots v-if="showOptions" :position="'is-right'">
-            <slot name="options" />
-          </option-dots>
+  <div class="card-details" data-testid="cluster-item-navigate">
+    <option-dots v-if="showOptions" :position="'is-right'">
+      <slot name="options" />
+    </option-dots>
+    <div class="card-details-inner" :class="modifierClasses">
+      <div class="c-header">
+        <div class="c-logo">
+          <img :src="clusterData.providerIcon" alt="" />
         </div>
-        <div class="tags">
-          <span
-            v-for="(tag, idx) in clusterData.tags"
-            :key="idx + tag.value"
-            :class="tag.class"
-            >{{ tag.value }}</span
-          >
+        <div class="c-content">
+          <div class="is-flex is-justify-content-space-between pr-32">
+            <h4 data-testid="cluster-title-text">{{ clusterData.name }}</h4>
+          </div>
+          <div class="tags">
+            <span
+              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>
         </div>
       </div>
-    </div>
-    <div class="c-body">
-      <p v-for="(detail, idx) in clusterData.details" :key="idx + detail.title">
-        <span>{{ detail.title }}</span> <strong>{{ detail.value }}</strong>
-      </p>
+      <div class="c-body">
+        <p
+          v-for="(detail, idx) in clusterData.details"
+          :key="idx + detail.title"
+        >
+          <span>{{ detail.title }}</span> <strong>{{ detail.value }}</strong>
+        </p>
+      </div>
     </div>
   </div>
 </template>
@@ -65,10 +71,15 @@ const OptionDots = defineAsyncComponent(
   transition: 0.3s ease-in-out;
   position: relative;
   z-index: 1;
-  width: calc(33% - 6px);
-  min-width: 455px;
+  width: calc(33% - 7px);
+  min-width: 430px;
   max-width: 530px;
-
+  .ac-options {
+    position: absolute;
+    right: 20px;
+    top: 30px;
+    z-index: 999;
+  }
   .c-header {
     display: flex;
     margin-bottom: 20px;

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"
@@ -21,11 +21,11 @@ withDefaults(
         Required
       </div>
 
-      <div class="c-title is-flex is-align-items-center">
-        <div class="icon mr-8">
+      <div class="c-title is-flex gap-8 is-fullwidth is-align-items-center">
+        <div class="icon">
           <slot name="card-logo" />
         </div>
-        <h4><slot name="card-title" /></h4>
+        <h5><slot name="card-title" /></h5>
       </div>
       <!-- <span class="tag has-background-dark-light has-text-dark is-rounded"
         >Dark</span
@@ -53,15 +53,11 @@ withDefaults(
     left: 20px;
     top: -9px;
   }
-  .c-header {
-    .c-title {
-      h4 {
-        font-size: 18px;
-        color: #061b2d;
-      }
+  .c-title {
+    h5 {
+      width: calc(100% - 28px);
     }
   }
-
   .c-body {
     p {
       color: #0c365a;

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

@@ -18,8 +18,8 @@ withDefaults(defineProps<Props>(), {
       >
         REQUIRED
       </div>
-      <div class="c-title is-flex is-align-items-center">
-        <div class="icon mr-8">
+      <div class="c-title is-flex gap-8 is-fullwidth is-align-items-center">
+        <div class="icon">
           <svg
             width="24"
             height="24"
@@ -50,7 +50,7 @@ withDefaults(defineProps<Props>(), {
             ></path>
           </svg>
         </div>
-        <h4>{{ title }}</h4>
+        <h5>{{ title }}</h5>
       </div>
       <div class="tag has-background-success-light has-text-success is-rounded">
         ENABLED
@@ -76,15 +76,11 @@ withDefaults(defineProps<Props>(), {
     left: 20px;
     top: -9px;
   }
-  .c-header {
-    .c-title {
-      h4 {
-        font-size: 18px;
-        color: #061b2d;
-      }
+  .c-title {
+    h5 {
+      width: calc(100% - 28px);
     }
   }
-
   .c-body {
     p {
       color: #0c365a;

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

@@ -11,18 +11,21 @@ withDefaults(defineProps<Props>(), {
   logo: "https://bb-developer-v1.web.app/_nuxt/img/azure-logo.4fa9281.svg",
 });
 </script>
+
 <template>
   <!-- use "is-selected" for select item  -->
-  <a class="ac-single-card has-text-centered">
+  <div 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>
+  </div>
 </template>
 
 <style lang="scss" scoped>
@@ -34,7 +37,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;
 
@@ -54,13 +57,14 @@ withDefaults(defineProps<Props>(), {
     width: 70px;
     height: 70px;
     border: 1px solid $primary-90;
-    background-color: #fff;
+    background-color: $white-100;
     border-radius: 50%;
     padding: 16px;
     margin-inline: auto;
     margin-bottom: 20px;
     display: flex;
     align-items: center;
+    overflow: hidden;
 
     img {
       width: 100%;

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

@@ -24,7 +24,7 @@ withDefaults(defineProps<Props>(), {
     <div class="ac-cheader-left">
       <!-- title  -->
       <div class="ac-content-title">
-        <h5 class="is-flex is-align-items-center">
+        <h5 class="is-flex is-align-items-center gap-8">
           <slot name="header-icon" />
           {{ headerTitle }}
           <slot name="title-right-actions" />

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/dropdown/DropdownAction.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { defineAsyncComponent, ref } from "vue";
+import HeroiconsChevronDown from "~icons/heroicons/chevron-down";
+import HeroiconsChevronUp from "~icons/heroicons/chevron-up";
+import { onClickOutside } from "@vueuse/core";
+
+const AcButton = defineAsyncComponent(() => import("../button/Button.vue"));
+interface Props {
+  modelValue: boolean;
+  title?: string;
+  buttonModifierClass?: string;
+  disabled?: boolean;
+  iconClass: string;
+}
+withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  title: "",
+  buttonModifierClass: "",
+  disabled: false,
+  iconClass: "",
+});
+const actionDropdown = ref<HTMLElement | null>(null);
+const emit = defineEmits(["update:modelValue"]);
+
+onClickOutside(actionDropdown, () => emit("update:modelValue", false));
+</script>
+
+<template>
+  <!-- dropdown start  -->
+  <div
+    ref="actionDropdown"
+    class="dropdown-action"
+    :class="{ 'dropdown is-active': modelValue }"
+  >
+    <div class="dropdown-trigger">
+      <ac-button
+        :modifier-classes="buttonModifierClass"
+        aria-haspopup="true"
+        aria-controls="dropdown-menu3"
+        :disabled="disabled"
+        :icon-class="iconClass"
+        @click="emit('update:modelValue', !modelValue)"
+      >
+        <template #icon>
+          <slot name="icon" />
+        </template>
+        <span>{{ title }}</span>
+        <span class="icon is-small">
+          <HeroiconsChevronDown v-if="!modelValue" />
+          <HeroiconsChevronUp v-else />
+        </span>
+      </ac-button>
+    </div>
+    <div class="dropdown-menu" id="dropdown-menu3" role="menu">
+      <div class="dropdown-content">
+        <slot name="list" />
+      </div>
+    </div>
+  </div>
+  <!-- dropdown end -->
+</template>
+<style lang="scss">
+.dropdown-group {
+  margin-bottom: 16px;
+}
+.dropdown-action {
+  .dropdown-content {
+    min-width: 220px;
+    border: 1px solid $primary-90;
+
+    label {
+      padding: 8px 16px;
+      display: flex;
+      border-bottom: 1px solid $primary-95;
+      color: $primary-20;
+      font-weight: 500;
+    }
+    .dropdown-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 13px;
+      padding: 8px 16px;
+      color: $primary-20;
+      &:hover {
+        background-color: $primary-97;
+        color: $primary;
+      }
+    }
+  }
+}
+</style>

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

@@ -20,7 +20,7 @@ const props = withDefaults(defineProps<Props>(), {
   showMinimap: false,
   editorHeight: 40,
   editorTheme: "",
-  wordWrap: "off",
+  wordWrap: "on",
 });
 
 const emit = defineEmits(["update:modelValue"]);

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

@@ -10,6 +10,7 @@ interface Props {
   previewYamls?: Array<PreviewYamlType>;
   showMinimap?: boolean;
   editorHeight?: number;
+  wordWrap?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -20,6 +21,7 @@ const props = withDefaults(defineProps<Props>(), {
   previewYamls: () => [],
   showMinimap: false,
   editorHeight: 60,
+  wordWrap: "on",
 });
 
 const emit = defineEmits(["setActiveKey"]);
@@ -174,6 +176,7 @@ watch(
               :read-only="isEditorReadOnly"
               :editor-height="editorHeight"
               :show-minimap="showMinimap"
+              :word-wrap="wordWrap"
             />
           </div>
         </template>
@@ -288,6 +291,10 @@ watch(
 
         .ac-files {
           ul {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+
             li {
               &.is-active {
                 a {

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

@@ -14,6 +14,7 @@ interface Props {
   deleteModalStatus?: string;
   editorHeight?: number;
   hideHeader?: boolean;
+  editorWordWrap?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -28,6 +29,7 @@ const props = withDefaults(defineProps<Props>(), {
   deleteModalStatus: "closed",
   editorHeight: 60,
   hideHeader: false,
+  editorWordWrap: "on",
 });
 
 const emit = defineEmits(["activeKey"]);
@@ -95,6 +97,7 @@ watch(
         :show-minimap="showMinimap"
         :editor-height="editorHeight"
         @setActiveKey="setActiveKey"
+        :word-wrap="editorWordWrap"
       />
     </template>
   </content-table>

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