@appscode/design-system 1.1.0-alpha.2 → 1.1.0-alpha.20

package/base/utilities/_all.scss

@@ -1,6 +1,7 @@
 @import "initial-variables";
 @import "derived-variables";
 @import "mixin";
+@import "extended";
 @import "typography";
 @import "default";
 @import "grid";

package/base/utilities/_extended.scss

@@ -0,0 +1,38 @@
+.has-hover-style{
+  cursor: pointer;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border-top: solid 1px;
+    border-bottom: solid 1px;
+    transition: 0.3s;
+    transform: scaleX(0);
+    border-color: #1971bd;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border-left: solid 1px;
+    border-right: solid 1px;
+    transition: 0.3s;
+    transform: scaleY(0);
+    border-color: #1971bd;
+  }
+
+  &:hover {
+    &::before,
+    &::after {
+      transform: scale(1);
+    }
+  }
+}

package/base/utilities/_initial-variables.scss

@@ -47,7 +47,7 @@ $swift-primary: #3f51b6;
   --ac-gray-dark: #5f5f5f;
   --ac-gray-light: #8d8d8d;
   --ac-gray-lightest: #d1d1d1;
-  --ac-white-light: #e7e7e7;
+  --ac-white-light: #d2e7f9;
   --ac-white-lighter: #f2f5f8;
   --ac-white-lightest: #f8f9fb;
 

package/components/_ac-alert-box.scss

@@ -13,7 +13,7 @@
   justify-content: flex-start;
   position: relative;
   z-index: 1;
-  min-width: 280px;
+  justify-content: flex-start;
 
   p {
     color: $ac-primary;
@@ -55,7 +55,6 @@
   }
 }
 
-
 .toast {
   box-shadow: $ac-shadow-sm;
   border: 1px solid $ac-white-light;

package/components/_all.scss

@@ -3,6 +3,7 @@
 @import "buttons";
 @import "breadcumb";
 @import "ac-card";
+@import "basic-card";
 @import "ac-multi-select";
 @import "ac-code-highlight";
 @import "navbar";

package/components/_basic-card.scss

@@ -0,0 +1,118 @@
+.card-details {
+  border: 1px solid #d2e7f9;
+  padding: 30px 20px;
+  width: calc(33.3% - 8px);
+  min-width: 400px;
+  max-width: 525px;
+  // border-radius: 4px;
+  transition: 0.3s ease-in-out;
+  position: relative;
+  z-index: 1;
+
+  .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;
+      }
+    }
+  }
+}
+
+// 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-header {
+    .c-title {
+
+      h4 {
+        font-size: 18px;
+        color: #061b2d;
+      }
+    }
+  }
+
+  .c-body {
+    p {
+      color: #0C365A;
+    }
+  }
+}

package/components/ui-builder/_ui-builder.scss

@@ -17,7 +17,7 @@
     margin-bottom: 10px;
   }
 
-  p {
+  p :not(.ac-notification *){
     font-size: 13px;
     margin-bottom: 10px;
     color: $ac-color-value;
@@ -237,6 +237,12 @@
   }
 }
 
+.pass-strength {
+  position: absolute;
+  right: 30px;
+  top: 7px;
+}
+
 // dark theme end
 /****************************************
 Responsive Classes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "1.1.0-alpha.2",
+  "version": "1.1.0-alpha.20",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

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

@@ -5,6 +5,7 @@
         v-if="!hideHeader"
         :header-title="tableTitle"
         :header-sub-title="tableSubTitle"
+        :remove-border-bottom="removeBorderBottom"
         :class="{ 'pl-0 pr-0': removeTableHeaderPadding }"
       >
         <header-item>
@@ -22,36 +23,40 @@ export default {
   props: {
     removeTableHeaderPadding: {
       type: Boolean,
-      default: false
+      default: false,
     },
     tableTitle: {
       type: String,
-      default: "Table"
+      default: "Table",
     },
     tableSubTitle: {
       type: String,
-      default: ""
+      default: "",
     },
     searchable: {
       type: Boolean,
-      default: true
+      default: true,
     },
     hideHeader: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
+    removeBorderBottom: {
+      type: Boolean,
+      default: false,
+    },
   },
   components: {
     ContentLayout: () => import("./ContentLayout.vue"),
     ContentHeader: () => import("./ContentHeader.vue"),
     HeaderItem: () => import("../header/HeaderItem.vue"),
-    SearchBar: () => import("../searchbars/SearchBar.vue")
+    SearchBar: () => import("../searchbars/SearchBar.vue"),
   },
 
   data() {
     return {
-      searchText: ""
+      searchText: "",
     };
-  }
+  },
 };
 </script>

package/vue-components/v2/modal/Modal.vue

@@ -32,6 +32,7 @@
         <!-- modal body start  -->
         <div
           class="ac-modal-body ac-vscrollbar"
+          :class="modifierBodyClasses"
           data-testid="ac-modal-content-with-scroll"
         >
           <div class="ac-modal-content">
@@ -45,11 +46,7 @@
         <!-- modal footer start -->
         <div
           v-if="!hideActionFooter"
-          class="
-            ac-modal-footer
-            action-footer
-            is-flex is-align-items-center is-justify-content-space-between
-          "
+          class="ac-modal-footer action-footer is-flex is-align-items-center is-justify-content-space-between"
         >
           <div>
             <slot name="modal-footer-left" />
@@ -91,6 +88,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    modifierBodyClasses: {
+      type: String,
+      default: "",
+    },
   },
 
   components: {

package/vue-components/v2/table/Table.vue

@@ -110,6 +110,11 @@
         </tbody>
       </template>
     </table>
+
+    <!-- table footer info start -->
+    <slot name="table-footer-info" />
+    <!-- table footer info end -->
+
     <!-- pagination start -->
     <slot name="table-pagination" />
     <!-- pagination end -->

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

@@ -0,0 +1,40 @@
+<template>
+  <!-- single card wrapper start  -->
+  <div class="card-basic b-1">
+    <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 is-align-items-center">
+        <div class="icon mr-8">
+          <slot name="card-logo" />
+        </div>
+        <h4><slot name="card-title" /></h4>
+      </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>
+<script setup lang="ts">
+  withDefaults(
+    defineProps<{
+      isRequired: boolean
+      statusClass: string
+    }>(),
+    {
+      isRequired: false,
+      statusClass: 'has-background-primary-light has-text-primary',
+    }
+  )
+</script>

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

@@ -0,0 +1,5 @@
+<template>
+  <div class="is-flex is-flex-wrap-wrap" style="gap: 16px">
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+  const { hasOptionButtons } = withDefaults(
+    defineProps<{ hasOptionButtons: boolean }>(),
+    { hasOptionButtons: false }
+  )
+</script>
+<template>
+  <div class="card-details">
+    <div class="c-header">
+      <div class="c-logo">
+        <slot name="card-logo" />
+      </div>
+      <div class="c-content">
+        <div class="is-flex is-justify-content-space-between">
+          <h4><slot name="card-title" /></h4>
+          <slot v-if="hasOptionButtons" name="option-buttons" />
+        </div>
+        <div class="tags">
+          <slot name="card-tags" />
+        </div>
+      </div>
+    </div>
+    <div class="c-body">
+      <slot name="card-body" />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,6 @@
+<template>
+  <p>
+    <span><slot name="row-title" /></span>
+    <strong><slot name="row-value" /></strong>
+  </p>
+</template>

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

@@ -0,0 +1,5 @@
+<template>
+  <div class="is-flex is-flex-wrap-wrap" style="gap: 8px">
+    <slot />
+  </div>
+</template>

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

@@ -5,6 +5,7 @@
         v-if="!hideHeader"
         :header-title="tableTitle"
         :header-sub-title="tableSubTitle"
+        :remove-border-bottom="removeBorderBottom"
         :class="{ 'pl-0 pr-0': removeTableHeaderPadding }"
       >
         <template #title-right-actions>
@@ -50,6 +51,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    removeBorderBottom: {
+      type: Boolean,
+      default: false,
+    },
   },
   components: {
     ContentLayout: defineAsyncComponent(() =>

package/vue-components/v3/modal/Modal.vue

@@ -30,6 +30,7 @@
         <!-- modal body start  -->
         <div
           class="ac-modal-body ac-vscrollbar"
+          :class="modifierBodyClasses"
           data-testid="ac-modal-content-with-scroll"
         >
           <div class="ac-modal-content">
@@ -92,6 +93,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    modifierBodyClasses: {
+      type: String,
+      default: "",
+    },
   },
   emits: ["closemodal"],
 

package/vue-components/v3/modals/LongRunningTasksModal.vue

@@ -110,7 +110,6 @@ import {
   Ref,
   toRefs,
   watch,
-  watchEffect,
 } from "vue";
 import { defineAsyncComponent, ref } from "vue";
 import { Task, TaskLog } from "../../../typings/long-running-tasks.ts";
@@ -173,7 +172,7 @@ const activeStepId: Ref<string> = ref("");
 // to find active task faster
 const idToStepIndex: Ref<Record<string, number>> = ref({});
 const activeTask = computed(() => {
-  const task = tasks.value.find((task) => task.id === activeStepId.value);
+  const task = tasks.value[idToStepIndex.value[activeStepId.value]];
   return task;
 });
 
@@ -207,6 +206,7 @@ function handleTaskLog(log: TaskLog) {
       task.status = log.status;
       if (log.status === "Failed") {
         task.logs.push(log.error || "");
+        errorCtx.value?.onError(log.error);
       } else {
         task.logs.push(log.msg || "");
       }
@@ -252,12 +252,36 @@ onBeforeUnmount(() => {
   subscription && subscription.unsubscribe();
 });
 
+const longRunningTaskStatus = computed(() => {
+  let successTaskCount = 0;
+  let failedTaskCount = 0;
+
+  // get count of success and failed task
+  tasks.value.forEach((task) => {
+    if (task?.status === "Success") successTaskCount++;
+    else if (task?.status === "Failed") failedTaskCount++;
+  });
+
+  if (tasks.value.length === 0) return "NotStarted";
+  // if all the task has been successful
+  else if (successTaskCount === tasks.value.length) {
+    return "Success";
+  }
+  // if all the task has been completed and some tasks are failed
+  else if (
+    failedTaskCount &&
+    successTaskCount + failedTaskCount === tasks.value.length
+  ) {
+    return "Failed";
+  } else return "Pending";
+});
+
 // modal close / footer feature
 const enableModalClose = computed(() => {
   return (
     connectionError.value ||
-    activeTask.value?.status === "Failed" ||
-    activeTask.value?.status === "Success"
+    longRunningTaskStatus.value === "Failed" ||
+    longRunningTaskStatus.value === "Success"
   );
 });
 const enableModalFooter = computed(() => {
@@ -265,47 +289,50 @@ const enableModalFooter = computed(() => {
 });
 
 // generate report issue title with error step title
-const getReportIssueTitle = (): string => {
+const getReportIssueInfo = (): { title: string; body: string } => {
   const stepTitlesFromErrorTasks: Array<string> = [];
+  const stepLogsFromErrorTasks: Array<string> = [];
   tasks.value.forEach((task) => {
     // if this taskLog is error task, push it to array
     if (task.error) {
-      stepTitlesFromErrorTasks.push(task.step);
+      stepTitlesFromErrorTasks.push(task?.step);
+      stepLogsFromErrorTasks.push(task?.logs[task?.logs?.length - 1] || "");
     }
   });
-  // return final string
-  return stepTitlesFromErrorTasks.join(", ");
+  // return final object
+  return {
+    title: stepTitlesFromErrorTasks.join(", "),
+    body: stepLogsFromErrorTasks.join(", "),
+  };
 };
 
 // report button
-const showReportButton = computed(() => activeTask.value?.status === "Failed");
+const showReportButton = computed(
+  () => longRunningTaskStatus.value === "Failed"
+);
 function onReportIssueClick() {
-  const url = `https://github.com/bytebuilders/community/issues/new?title=Chart Install: ${getReportIssueTitle()}&labels[]=bug&body=${
-    window.location.href
-  } %0A%0A %60%60%60 %0A  ${
-    activeTask.value?.logs[activeTask.value?.logs.length - 1 || 0]
+  const url = `https://github.com/bytebuilders/community/issues/new?title=Chart Install: ${
+    getReportIssueInfo().title
+  }&labels[]=bug&body=${window.location.href} %0A%0A %60%60%60 %0A  ${
+    getReportIssueInfo().body
   } %0A %60%60%60`;
   window.open(url, "_blank");
 }
 
 // success button
 const showSuccessButton = computed(
-  () => activeTask.value?.status === "Success" && successCtx.value?.btnTitle
+  () =>
+    longRunningTaskStatus.value === "Success" && !!successCtx.value?.btnTitle
 );
 
 // execute on success and on error functions
-watch(
-  () => activeTask.value?.status,
-  (n) => {
-    if (n === "Success") {
-      successCtx.value.onSuccess();
-    } else if (n === "Failed") {
-      errorCtx.value.onError(
-        activeTask.value?.logs[activeTask.value?.logs.length - 1 || 0] || ""
-      );
-    }
+watch(longRunningTaskStatus, (n) => {
+  if (n === "Success") {
+    successCtx.value.onSuccess();
+  } else if (n === "Failed") {
+    errorCtx.value?.onError("Operation Failed");
   }
-);
+});
 </script>
 
 <style scoped lang="scss">

package/vue-components/v3/notification/AlertBox.vue

@@ -0,0 +1,61 @@
+<template>
+  <!-- alert-message area start  -->
+  <!-- plsease, use this class name ('.is-info' 'is-success', 'is-error', 'is-warning') -->
+  <div :class="`ac-notification is-${notificationType} mb-15`">
+    <p>
+      <i v-if="!hideIcon" :class="`fa ${iconClass} mr-5`"></i
+      ><span v-html="getSanitizedHtml(content)"></span>
+      <ac-button
+        v-if="actionButton?.show"
+        :title="actionButton?.title"
+        :icon-class="actionButton?.iconClass"
+        data-testid="notification-action-button"
+        @click.prevent="actionButton?.action()"
+      >
+      </ac-button>
+    </p>
+  </div>
+  <!-- alert-message area end -->
+</template>
+
+<script setup lang="ts">
+import { toRefs, computed, defineAsyncComponent } from "vue";
+import DOMPurify from "dompurify";
+
+const AcButton = defineAsyncComponent(
+  () => import("@appscode/design-system/vue-components/v3/button/Button.vue")
+);
+
+const props = withDefaults(
+  defineProps<{
+    notificationType: string;
+    content: string;
+    hideIcon: boolean;
+    actionButton?: {
+      show: boolean;
+      title: string;
+      iconClass: string;
+      action: (...args: any) => void | undefined;
+    };
+  }>(),
+  {
+    notificationType: "",
+    content: "",
+    hideIcon: false,
+    actionButton: undefined,
+  }
+);
+
+const { notificationType, content, hideIcon, actionButton } = toRefs(props);
+
+const iconClass = computed(() => {
+  if (notificationType.value === "success") return "fa-check-circle";
+  else if (notificationType.value === "info") return "fa-info-circle";
+  else if (notificationType.value === "error") return "fa-times-circle";
+  else return "fa-info-circle";
+});
+
+const getSanitizedHtml = (content: string) => {
+  return DOMPurify.sanitize(content || "");
+};
+</script>

package/vue-components/v3/table/Table.vue

@@ -109,6 +109,11 @@
         </tbody>
       </template>
     </table>
+
+    <!-- table footer info start -->
+    <slot name="table-footer-info" />
+    <!-- table footer info end -->
+
     <!-- pagination start -->
     <slot name="table-pagination" />
     <!-- pagination end -->