@appscode/design-system 1.1.0 → 2.0.0

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

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from "vue";
+import downloadFunc from "downloadjs";
+
+interface Props {
+  fileData?: string;
+  fileName?: string;
+  isFetching?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  fileData: "",
+  fileName: "",
+  isFetching: false,
+});
+
+const AcButton = defineAsyncComponent(() => import("../button/Button.vue"));
+
+const download = () => {
+  downloadFunc(props.fileData, props.fileName);
+};
+</script>
+
+<template>
+  <ac-button
+    modifier-classes="is-primary is-square"
+    icon-class="download"
+    :is-loader-active="isFetching"
+    @click="download()"
+  />
+</template>

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

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+interface Props {
+  isSelected?: boolean;
+  hasLogo?: boolean;
+  hasName?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  isSelected: false,
+  hasLogo: true,
+  hasName: true,
+});
+</script>
+
+<template>
+  <div
+    class="ac-single-card has-text-centered vendor-card"
+    :class="{ 'is-selected': isSelected }"
+    @click="$emit('click', $event)"
+    data-testid="card-list-item"
+  >
+    <div class="ac-card-logo" v-if="hasLogo">
+      <slot name="card-logo" />
+    </div>
+    <div class="ac-card-name" v-if="hasName">
+      <p>
+        <slot name="card-name" />
+      </p>
+    </div>
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="ac-card-content b-1 b-t-n">
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,14 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div
+    class="is-flex is-justify-content-space-between pt-8 pb-8 pl-20 pr-20 b-1"
+  >
+    <div class="header-left-content">
+      <slot name="card-header-left" />
+    </div>
+    <div class="header-right-content">
+      <slot name="card-header-right" />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="ac-card-wrapper">
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from "vue";
+interface Props {
+  clusterData?: {
+    name?: string;
+    providerIcon?: string;
+    tags?: Array<{ value: string; class: string }>;
+    details?: Array<{ title: string; value: string }>;
+  };
+  modifierClasses?: string;
+  showOptions?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  clusterData: () => ({
+    name: "",
+    providerIcon: "",
+    tags: [],
+    details: [],
+  }),
+  modifierClasses: "",
+  showOptions: false,
+});
+
+const OptionDots = defineAsyncComponent(
+  () => import("../option-dots/Options.vue")
+);
+</script>
+
+<template>
+  <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="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 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>
+
+<style lang="scss" scoped>
+.card-details {
+  border: 1px solid $primary-90;
+  padding: 30px 20px;
+  transition: 0.3s ease-in-out;
+  position: relative;
+  z-index: 1;
+  width: 100%;
+
+  .ac-options {
+    position: absolute;
+    right: 20px;
+    top: 30px;
+    z-index: 999;
+  }
+  .c-header {
+    display: flex;
+    margin-bottom: 20px;
+
+    .c-logo {
+      width: 54px;
+      height: 54px;
+      background: #e8f3fc;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 24px;
+
+      img {
+        height: 24px;
+      }
+    }
+
+    .c-content {
+      width: calc(100% - 78px);
+      h4 {
+        font-size: 18px;
+        line-height: 130%;
+        color: #030d17;
+      }
+      .icon {
+        color: #0c365a;
+        cursor: pointer;
+        position: relative;
+        z-index: 1;
+        &:after {
+          position: absolute;
+          content: "";
+          border-radius: 50%;
+          width: 32px;
+          height: 32px;
+          background: #e8f3fc;
+          opacity: 0;
+          visibility: hidden;
+          transition: 0.3s ease-in-out;
+          z-index: -1;
+        }
+        &:hover {
+          &:after {
+            opacity: 1;
+            visibility: visible;
+          }
+        }
+      }
+      .tags {
+        margin-top: 12px;
+      }
+    }
+  }
+
+  .c-body {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    justify-content: space-between;
+    p {
+      width: calc(25% - 16px);
+
+      span {
+        font-size: 11px;
+        color: #666666;
+        display: block;
+      }
+      strong {
+        color: #061b2d;
+        font-size: 13px;
+        font-weight: 400;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,39 @@
+<script setup lang="ts"></script>
+
+<template>
+  <a class="ac-single-card has-text-centered card-counter">
+    <!-- header start  -->
+    <div class="card-header">
+      <h3>Clusters</h3>
+      <div class="logo">
+        <img
+          src="https://bb-developer-v1.web.app/_nuxt/img/cluster-icon.f68a1b6.svg"
+          alt=""
+        />
+      </div>
+    </div>
+    <!-- header end -->
+    <div class="card-body">
+      <div class="count cluster">072</div>
+    </div>
+  </a>
+</template>
+<style lang="scss" scoped>
+.ac-single-card {
+  width: calc(25% - 8px);
+  max-width: 390px;
+  min-width: 290px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 200px;
+
+  border: 1px solid $primary-90;
+
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+</style>

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

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    isRequired?: boolean;
+    statusClass?: string;
+  }>(),
+  {
+    isRequired: false,
+    statusClass: "has-background-primary-light has-text-primary",
+  }
+);
+</script>
+<template>
+  <!-- single card wrapper start  -->
+  <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"
+        class="tag has-background-warning has-text-secondary is-rounded required"
+      >
+        Required
+      </div>
+
+      <div class="c-title is-flex gap-8 is-fullwidth is-align-items-center">
+        <div class="icon">
+          <slot name="card-logo" />
+        </div>
+        <h5><slot name="card-title" /></h5>
+      </div>
+      <!-- <span class="tag has-background-dark-light has-text-dark is-rounded"
+        >Dark</span
+      > -->
+      <slot name="card-status" />
+    </div>
+    <div class="c-body">
+      <p><slot name="card-sub-title" /></p>
+    </div>
+  </div>
+  <!-- single card wrapper end  -->
+</template>
+
+<style lang="scss" scoped>
+// ac card
+.card-basic {
+  padding: 20px;
+  width: calc(25% - 8px);
+  max-width: 390px;
+  min-width: 290px;
+  position: relative;
+
+  .required {
+    position: absolute;
+    left: 20px;
+    top: -9px;
+  }
+  .c-title {
+    h5 {
+      width: calc(100% - 28px);
+    }
+  }
+  .c-body {
+    p {
+      color: #0c365a;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,6 @@
+<script setup lang="ts"></script>
+<template>
+  <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

@@ -0,0 +1,242 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from "vue";
+import type { AcTableRow } from "../../types/table";
+interface Props {
+  title?: string;
+  modifierClasses?: string;
+  rowData?: AcTableRow;
+}
+
+withDefaults(defineProps<Props>(), {
+  title: "no-title",
+  modifierClasses: "",
+  rowData: () => ({ cells: [] }),
+});
+
+const OptionDots = defineAsyncComponent(
+  () => import("../option-dots/Options.vue")
+);
+</script>
+
+<template>
+  <div class="info-card" :class="modifierClasses">
+    <div class="header">
+      <div class="logo">
+        <img :src="rowData.cells[0].icon" alt="icon" />
+      </div>
+      <div class="content">
+        <div class="is-flex is-justify-content-space-between">
+          <h5>{{ rowData.cells[0].data }}</h5>
+          <option-dots :position="'is-right is-hidden'" />
+        </div>
+      </div>
+    </div>
+    <div class="body">
+      <div class="left-content">
+        <p title="CPU (request/limit)">
+          <span class="icon">
+            <svg
+              width="21"
+              height="19"
+              viewBox="0 0 21 19"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6.63471 1V2.45659M2.60992 6.09807H1M20.319 6.09807H18.7091M2.60992 9.73955H1M20.319 9.73955H18.7091M2.60992 13.381H1M20.319 13.381H18.7091M6.63471 17.0225V18.4791M10.6595 1V2.45659M10.6595 17.0225V18.4791M14.6843 1V2.45659M14.6843 17.0225V18.4791M5.02479 17.0225H16.2942C16.9347 17.0225 17.5489 16.7923 18.0018 16.3826C18.4547 15.9728 18.7091 15.4171 18.7091 14.8376V4.64148C18.7091 4.06201 18.4547 3.50628 18.0018 3.09653C17.5489 2.68679 16.9347 2.45659 16.2942 2.45659H5.02479C4.38433 2.45659 3.7701 2.68679 3.31722 3.09653C2.86434 3.50628 2.60992 4.06201 2.60992 4.64148V14.8376C2.60992 15.4171 2.86434 15.9728 3.31722 16.3826C3.7701 16.7923 4.38433 17.0225 5.02479 17.0225ZM5.82975 5.36978H15.4893V14.1093H5.82975V5.36978Z"
+                stroke="#5C5C5C"
+                stroke-width="0.979443"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </span>
+          <strong>
+            {{ rowData.cells[2].data ? rowData.cells[2].data : "-" }}
+          </strong>
+        </p>
+        <p title="Memory (request/limit)">
+          <span class="icon">
+            <svg
+              width="20"
+              height="13"
+              viewBox="0 0 20 13"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect
+                x="0.489721"
+                y="0.489721"
+                width="18.6094"
+                height="11.7533"
+                rx="1.46916"
+                stroke="#5C5C5C"
+                stroke-width="0.979443"
+              />
+              <rect
+                x="3.10105"
+                y="2.91453"
+                width="2.50302"
+                height="7.2059"
+                rx="1.25151"
+                stroke="#5C5C5C"
+                stroke-width="0.979443"
+              />
+              <rect
+                x="8.54246"
+                y="2.91453"
+                width="2.50302"
+                height="7.2059"
+                rx="1.25151"
+                stroke="#5C5C5C"
+                stroke-width="0.979443"
+              />
+              <rect
+                x="13.9839"
+                y="2.91453"
+                width="2.50302"
+                height="7.2059"
+                rx="1.25151"
+                stroke="#5C5C5C"
+                stroke-width="0.979443"
+              />
+            </svg>
+          </span>
+          <strong>
+            {{ rowData.cells[3].data ? rowData.cells[3].data : "-" }}
+          </strong>
+        </p>
+        <p title="Storage (request/limit)">
+          <span class="icon">
+            <svg
+              width="21"
+              height="16"
+              viewBox="0 0 21 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M20.3189 7.76208H1"
+                stroke="#5C5C5C"
+                stroke-width="0.979443"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M4.3325 1.93817L1 7.76161V12.8328C1 13.2811 1.20354 13.7111 1.56584 14.0281C1.92814 14.3451 2.41952 14.5232 2.93189 14.5232H18.387C18.8994 14.5232 19.3907 14.3451 19.753 14.0281C20.1153 13.7111 20.3189 13.2811 20.3189 12.8328V7.76161L16.9864 1.93817C16.8264 1.65654 16.5799 1.41953 16.2744 1.2538C15.969 1.08806 15.6167 1.00017 15.2573 1H6.06154C5.70213 1.00017 5.3499 1.08806 5.04445 1.2538C4.739 1.41953 4.49244 1.65654 4.3325 1.93817Z"
+                stroke="#5C5C5C"
+                stroke-width="0.979443"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M4.86426 11.1421H4.87333"
+                stroke="#5C5C5C"
+                stroke-width="1.27328"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M8.72754 11.1421H8.73661"
+                stroke="#5C5C5C"
+                stroke-width="1.27328"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </span>
+          <strong>
+            {{ rowData.cells[4].data ? rowData.cells[4].data : "-" }}
+          </strong>
+        </p>
+      </div>
+      <div class="right-content">
+        <h2>{{ rowData.cells[1].data }}</h2>
+        <p>Instance</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.info-card {
+  border: 1px solid $primary-90;
+  position: relative;
+  border-radius: 2px;
+  .header {
+    display: flex;
+    align-items: center;
+    padding: 12px 16px;
+    border-bottom: 1px dashed $primary-90;
+
+    .logo {
+      display: flex;
+      align-items: center;
+      margin-right: 12px;
+      img {
+        width: 16px;
+      }
+    }
+
+    .content {
+      width: 100%;
+      h5 {
+        color: $primary-10;
+        font-weight: 500;
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .body {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    padding: 16px;
+    p {
+      display: flex;
+      align-items: center;
+      margin-bottom: 8px;
+      span.icon {
+        padding-right: 8px;
+        width: 22px;
+      }
+
+      strong {
+        font-size: 13px;
+        font-weight: 400;
+        color: $primary-10;
+      }
+    }
+  }
+}
+
+.line-color {
+  position: relative;
+  z-index: 1;
+  overflow: hidden;
+  &::after {
+    position: absolute;
+    content: "";
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 1px;
+    background: linear-gradient(-45deg, $primary, $success, $warning, $danger);
+    background-size: 400% 400%;
+    animation: gradient 3s ease infinite;
+  }
+}
+
+@keyframes gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+</style>

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

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+interface Props {
+  title?: string;
+  modifierClasses?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  title: "no title",
+  modifierClasses: "",
+});
+</script>
+
+<template>
+  <div class="card-basic b-1 mb-12 has-hover-style">
+    <div class="c-header is-flex is-justify-content-space-between">
+      <div
+        class="tag has-background-danger-light has-text-danger is-rounded required"
+      >
+        REQUIRED
+      </div>
+      <div class="c-title is-flex gap-8 is-fullwidth is-align-items-center">
+        <div class="icon">
+          <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M20 3H4C2.89543 3 2 3.89543 2 5V15C2 16.1046 2.89543 17 4 17H20C21.1046 17 22 16.1046 22 15V5C22 3.89543 21.1046 3 20 3Z"
+              stroke="#808080"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            ></path>
+            <path
+              d="M8 21H16"
+              stroke="#808080"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            ></path>
+            <path
+              d="M12 17V21"
+              stroke="#808080"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            ></path>
+          </svg>
+        </div>
+        <h5>{{ title }}</h5>
+      </div>
+      <div class="tag has-background-success-light has-text-success is-rounded">
+        ENABLED
+      </div>
+    </div>
+    <div class="c-body">
+      <p>Monitor your kubernetes resources with Prometheus and Grafana.</p>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+// ac card
+.card-basic {
+  padding: 20px;
+  width: calc(25% - 8px);
+  max-width: 390px;
+  min-width: 290px;
+  position: relative;
+
+  .required {
+    position: absolute;
+    left: 20px;
+    top: -9px;
+  }
+  .c-title {
+    h5 {
+      width: calc(100% - 28px);
+    }
+  }
+  .c-body {
+    p {
+      color: #0c365a;
+    }
+  }
+}
+</style>