@appscode/design-system 2.0.60 → 2.0.62

package/package.json

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

package/vue-components/styles/base/utilities/_colors.scss

@@ -4,7 +4,7 @@
 
 // white and black
 $white-100: hsl(0, 0%, 100%);
-$gray-100: hsl(0, 0%, 0%);
+$black-100: hsl(0, 0%, 0%);
 
 // primary color guides
 $primary-hue: var(--primary-hue);

package/vue-components/styles/components/_accordion.scss

@@ -1,27 +1,4 @@
 .ac-accordion-wrapper {
-  &.is-marginless {
-    .single-accordion-item {
-      margin: 0;
-      padding: 0;
-
-      .accordion-heading {
-        padding: 10px 20px;
-        position: relative;
-        z-index: 1;
-
-        &::after {
-          position: absolute;
-          content: "";
-          left: 0;
-          top: 0;
-          width: 4px;
-          height: 100%;
-          background-color: $ac-primary;
-        }
-      }
-    }
-  }
-
   .single-accordion-item {
     background-color: $white-100;
     padding: 15px 20px;
@@ -69,7 +46,6 @@
 
     .accordion-body {
       max-height: 0;
-      transition: max-height 0.2s ease-out;
       overflow: hidden;
 
       p {
@@ -92,26 +68,3 @@
     }
   }
 }
-
-/****************************************
-Responsive Classes
-*****************************************/
-// Extra small devices (portrait phones, less than 576px)
-@media (max-width: 575.98px) {
-}
-
-// Small devices (landscape phones, 576px and up)
-@media (min-width: 576px) and (max-width: 767.98px) {
-}
-
-// Medium devices (tablets, 768px and up)
-@media (min-width: 768px) and (max-width: 991.98px) {
-}
-
-// Large devices (desktops, 992px and up)
-@media (min-width: 992px) and (max-width: 1199.98px) {
-}
-
-// Extra large devices (large desktops, 1200px and up)
-@media (min-width: 1200px) {
-}

package/vue-components/styles/components/_table.scss

@@ -1,6 +1,31 @@
 // INFO TABLE END
-
 // GENERAL TABLE START
+
+.table-container {
+  &.ac-table-container {
+    &::-webkit-scrollbar {
+      height: 7px;
+    }
+
+    /* Track */
+    &::-webkit-scrollbar-track {
+      background-color: #d1d4de;
+      border-radius: 10px;
+    }
+
+    /* Handle */
+    &::-webkit-scrollbar-thumb {
+      background-color: $gray-60;
+      border-radius: 10px;
+    }
+
+    /* Handle on hover */
+    &::-webkit-scrollbar-thumb:hover {
+      background-color: $secondary-95;
+    }
+  }
+}
+
 .table.ac-table {
   background-color: transparent;
   margin-bottom: 0;

package/vue-components/styles/components/_terminal.scss

@@ -15,7 +15,7 @@
 
   .terminal-body {
     font-family: "Inconsolata", monospace;
-    background-color: $gray-100;
+    background-color: $black-100;
     height: 100%;
     color: $white-100;
 

package/vue-components/styles/components/form-fields/_input.scss

@@ -3,6 +3,19 @@
   z-index: 1;
   margin-bottom: 16px;
 
+  .prepend {
+    position: absolute;
+    left: 1px;
+    top: 1px;
+    width: 32px;
+    height: 34px;
+    display: flex;
+    align-items: center;
+    border-radius: 4px 0 0 4px;
+    justify-content: center;
+    border-right: 1px solid $color-border-dark;
+    background-color: $white-100;
+  }
   &.is-disable {
     opacity: 0.5;
 
@@ -497,35 +510,35 @@
   }
 }
 
-.is-checkradio[type="radio"] + label::after,
-.is-checkradio[type="radio"] + label:after {
-  background: $ac-primary;
-}
-
-.is-checkradio[type="checkbox"]:checked + label::before,
-.is-checkradio[type="checkbox"]:checked + label:before,
-.is-checkradio[type="radio"]:checked + label::before,
-.is-checkradio[type="radio"]:checked + label:before {
-  border: 0.2rem solid $ac-primary;
-}
-
-.is-checkradio[type="checkbox"]:hover:not([disabled]) + label::before,
-.is-checkradio[type="checkbox"]:hover:not([disabled]) + label:before,
-.is-checkradio[type="radio"]:hover:not([disabled]) + label::before,
-.is-checkradio[type="radio"]:hover:not([disabled]) + label:before {
-  border-color: $primary-30 !important;
-}
-
-.switch[type="checkbox"].is-primary:checked + label::before,
-.switch[type="checkbox"].is-primary:checked + label:before {
-  background-color: $ac-primary;
-}
-
-.is-checkradio[type="checkbox"] + label::after,
-.is-checkradio[type="checkbox"] + label:after {
-  border-width: 0.2rem;
-  border-color: $ac-primary;
-}
+// .is-checkradio[type="radio"] + label::after,
+// .is-checkradio[type="radio"] + label:after {
+//   background: $ac-primary;
+// }
+
+// .is-checkradio[type="checkbox"]:checked + label::before,
+// .is-checkradio[type="checkbox"]:checked + label:before,
+// .is-checkradio[type="radio"]:checked + label::before,
+// .is-checkradio[type="radio"]:checked + label:before {
+//   border: 0.2rem solid $ac-primary;
+// }
+
+// .is-checkradio[type="checkbox"]:hover:not([disabled]) + label::before,
+// .is-checkradio[type="checkbox"]:hover:not([disabled]) + label:before,
+// .is-checkradio[type="radio"]:hover:not([disabled]) + label::before,
+// .is-checkradio[type="radio"]:hover:not([disabled]) + label:before {
+//   border-color: $primary-30 !important;
+// }
+
+// .switch[type="checkbox"].is-primary:checked + label::before,
+// .switch[type="checkbox"].is-primary:checked + label:before {
+//   background-color: $ac-primary;
+// }
+
+// .is-checkradio[type="checkbox"] + label::after,
+// .is-checkradio[type="checkbox"] + label:after {
+//   border-width: 0.2rem;
+//   border-color: $ac-primary;
+// }
 
 // file upload
 .file.ac-file {

package/vue-components/styles/theme/_dark.scss

@@ -32,7 +32,7 @@
 
 // // white and black
 // $white-100: hsl($primary-hue, 50%, 5%);
-// $gray-100: hsl(0, 0%, 90%);
+// $black-100: hsl(0, 0%, 90%);
 
 // $color-text: hsl($primary-hue, 10%, 80%);
 // $color-heading: hsl($primary-hue, 10%, 90%);

package/vue-components/v3/accordion/Accordion.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { ref } from "vue";
+
 interface Props {
   modifierClasses?: string;
 }
@@ -6,6 +8,8 @@ interface Props {
 withDefaults(defineProps<Props>(), {
   modifierClasses: "",
 });
+
+const isActive = ref(true);
 </script>
 
 <template>
@@ -16,13 +20,13 @@ withDefaults(defineProps<Props>(), {
       <!-- accordion heading start  -->
       <div class="accordion-heading">
         <h6 class="is-small">Hello Accordion title</h6>
-        <button class="icon">
+        <button class="icon" @click="isActive = !isActive">
           <i class="fa fa-plus" aria-hidden="true"></i>
         </button>
       </div>
       <!-- accordion heading end -->
       <!-- accordion body start  -->
-      <div class="accordion-body">
+      <div class="accordion-body" :style="{ 'max-height': isActive ? '100%' : 0 }">
         <slot />
       </div>
       <!-- accordion body end -->

package/vue-components/v3/alert/Toast.vue

@@ -13,8 +13,19 @@ withDefaults(defineProps<Props>(), {
     <div class="toast-header is-flex is-align-items-center">
       <h6 class="mr-auto">Toast Header</h6>
       <small>2 hours ago</small>
-      <button type="button" class="button ac-button is-transparent w-18 h-18 flex ml-8">
-        <span class="material-icons close-icon is-size-5">close</span>
+      <button type="button" class="button ac-button is-white ml-8">
+        <span class="icon">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            class="w-6 h-6"
+          >
+            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+          </svg>
+        </span>
       </button>
     </div>
     <div class="toast-body">

package/vue-components/v3/avatar/Avatar.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+interface Props {
+  size?: string;
+  imgUrl?: string;
+  rounded?: boolean;
+  roundedClass?: string;
+  dots?: boolean;
+  isInitial?: boolean;
+  dotBgColor?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  size: "32x32",
+  imgUrl: "https://bulma.io/images/placeholders/32x32.png",
+  rounded: false,
+  roundedClass: "",
+  dots: false,
+  isInitial: false,
+  dotBgColor: "",
+});
+</script>
+
+<template>
+  <figure class="image" :class="`is-${size}`">
+    <span v-if="dots" class="dots" :class="dotBgColor"></span>
+    <div v-if="isInitial" class="is-initial" :class="[rounded ? 'is-rounded' : '', roundedClass]">jd</div>
+    <img v-else :class="[rounded ? 'is-rounded' : '', roundedClass]" :src="imgUrl" alt="avatar-image" />
+  </figure>
+</template>
+
+<style lang="scss">
+figure {
+  position: relative;
+  z-index: 1;
+
+  .dots {
+    position: absolute;
+    right: calc(5% - 6px);
+    top: calc(30% - 6px);
+    width: 12px;
+    height: 12px;
+    background-color: $info;
+    border-radius: 50%;
+    border: 2px solid $white-100;
+    box-shadow: 2px 2px 2px rgba(5, 5, 5, 0.16);
+    z-index: 2;
+    &.is-not-active {
+      background-color: $gray-60;
+    }
+  }
+  .is-initial {
+    position: relative;
+    z-index: 1;
+    background-color: $gray-90;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    font-weight: 500;
+    color: $color-heading;
+    border: 1px solid $color-border;
+    &.is-rounded {
+      border-radius: 50%;
+    }
+  }
+}
+</style>

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

@@ -14,8 +14,8 @@ interface Props {
 
 withDefaults(defineProps<Props>(), {
   clusterData: () => ({
-    name: "",
-    providerIcon: "",
+    name: "Cluster Name",
+    providerIcon: "https://via.placeholder.com/100/dddddd/808080",
     tags: [],
     details: [],
   }),
@@ -34,7 +34,7 @@ const OptionDots = defineAsyncComponent(() => import("../option-dots/Options.vue
     <div class="card-details-inner" :class="modifierClasses">
       <div class="c-header">
         <div class="c-logo">
-          <img :src="clusterData.providerIcon" alt="" />
+          <img :src="clusterData.providerIcon" :alt="clusterData.name" />
         </div>
         <div class="c-content">
           <div class="is-flex is-justify-content-space-between pr-32">

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

@@ -1,6 +1,22 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+interface Props {
+  modifierClasses?: string;
+  cardNumber?: number;
+  expire?: string;
+  name?: string;
+  cardType?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  modifierClasses: "",
+  cardNumber: 2296,
+  expire: "12/23",
+  name: "John Smith",
+  cardType: "VISA",
+});
+</script>
 <template>
-  <div class="ac-payment-card-wrapper">
+  <div class="ac-payment-card-wrapper" :class="modifierClasses">
     <!-- single card start -->
     <div class="ac-payment-card payment-bg-2">
       <div class="payment-card-inner">
@@ -36,7 +52,7 @@
           <p class="p-card-number is-star">****</p>
           <p class="p-card-number is-star">****</p>
           <p class="p-card-number is-star">****</p>
-          <p class="p-card-number">2296</p>
+          <p class="p-card-number">{{ cardNumber }}</p>
         </div>
         <!-- card body end -->
         <!-- card footer start  -->
@@ -45,10 +61,14 @@
             <div class="p-card-expiry">
               <p>Expiry Date <span>12/20</span></p>
             </div>
-            <p class="user-name">John Smith</p>
+            <p class="user-name">{{ name }}</p>
           </div>
           <div class="p-card-logo">
-            <img src="https://bb-developer-v1.web.app/_nuxt/img/visa-card-logo.6a56d8c.svg" alt="visa-card" />
+            <img
+              v-if="cardType === 'VISA'"
+              src="https://bb-developer-v1.web.app/_nuxt/img/visa-card-logo.6a56d8c.svg"
+              alt="visa-card"
+            />
           </div>
         </div>
         <!-- card footer end -->

package/vue-components/v3/divider/Divider.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+interface Props {
+  modifierClasses?: string;
+  label?: boolean;
+  horizontal?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  modifierClasses: "",
+  label: false,
+  horizontal: false,
+});
+</script>
+
+<template>
+  <div class="divider" :class="[horizontal ? 'is-horizontal' : '', modifierClasses]">
+    <span v-if="label">OR</span>
+  </div>
+</template>
+<style lang="scss">
+.divider {
+  height: 1px;
+  width: 100%;
+  background-color: $color-border;
+  margin: 16px 0;
+  position: relative;
+  &.is-horizontal {
+    width: 1px;
+    min-height: 32px;
+    margin: 0 16px;
+    span {
+      top: 50%;
+      margin-top: -8px;
+    }
+  }
+  span {
+    position: absolute;
+    right: 50%;
+    margin-right: -16px;
+    background: $white-100;
+    top: -10px;
+    padding-inline: 8px;
+  }
+}
+</style>

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

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+interface Props {
+  modifierClasses?: string;
+  name: string;
+  label?: string;
+  type?: string;
+  check?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  modifierClasses: "",
+  name: "checkbox",
+  label: "Checkbox",
+  type: "checkbox",
+  check: false,
+});
+</script>
+
+<template>
+  <div class="field">
+    <input
+      class="is-checkradio"
+      :class="[type === 'checkbox' ? 'has-background-color' : '', modifierClasses]"
+      :id="name"
+      :type="type"
+      :name="name"
+      :checked="check"
+    />
+    <label :for="name">{{ label }}</label>
+  </div>
+</template>
+
+<style lang="scss">
+.is-checkradio[type="checkbox"].is-primary:checked.has-background-color + label::before,
+.is-checkradio[type="checkbox"].is-primary:checked.has-background-color + label:before,
+.is-checkradio[type="checkbox"].is-primary:checked.has-background-color + label::after,
+.is-checkradio[type="checkbox"].is-primary:checked.has-background-color + label:after {
+  background-color: $ac-primary !important;
+}
+</style>

package/vue-components/v3/messages/Message.vue

@@ -12,10 +12,12 @@ withDefaults(defineProps<Props>(), {
     <div class="thumbnail">
       <slot name="thumbnail" />
     </div>
-    <p>
-      {{ message }}
-    </p>
+    <div class="is-flex is-align-items-center gap-4">
+      <span>
+        {{ message }}
+      </span>
 
-    <slot name="details" />
+      <slot name="details" />
+    </div>
   </div>
 </template>

package/vue-components/v3/skeleton/Skeleton.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+interface Props {
+  modifierClasses?: string;
+  height?: string;
+  width?: string;
+  rounded?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  modifierClasses: "",
+  height: "16px",
+  width: "100%",
+  rounded: false,
+});
+</script>
+
+<template>
+  <div class="skeleton" :class="[rounded ? 'is-rounded' : '', modifierClasses]"></div>
+</template>
+
+<style lang="scss">
+.skeletons {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.skeleton {
+  background: linear-gradient(90deg, $secondary-95 25%, $secondary-90 50%, $secondary-95 75%);
+  background-size: 200% 100%;
+  animation: loading 2s infinite ease-in-out;
+  border-radius: 4px;
+  display: flex;
+  height: v-bind(height);
+  width: v-bind(width);
+  &.is-rounded {
+    border-radius: 50%;
+  }
+}
+@keyframes loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+</style>

package/vue-components/v3/skeleton/Skeletons.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+interface Props {
+  modifierClasses?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  modifierClasses: "",
+});
+</script>
+
+<template>
+  <div class="skeletons" :class="modifierClasses">
+    <slot></slot>
+  </div>
+</template>

package/vue-components/v3/steps/ColoredSteps.vue

@@ -1,5 +1,15 @@
+<script setup lang="ts">
+interface Props {
+  modifierClasses?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  modifierClasses: "",
+});
+</script>
+
 <template>
-  <div class="colored-steps">
+  <div class="colored-steps" :class="modifierClasses">
     <ol class="steps">
       <li class="step">
         <div class="step-header bg-primary"></div>

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

@@ -24,30 +24,3 @@ onMounted(() => {
     <slot />
   </div>
 </template>
-
-<style lang="scss">
-.table-container {
-  &.ac-table-container {
-    &::-webkit-scrollbar {
-      height: 7px;
-    }
-
-    /* Track */
-    &::-webkit-scrollbar-track {
-      background-color: #d1d4de;
-      border-radius: 10px;
-    }
-
-    /* Handle */
-    &::-webkit-scrollbar-thumb {
-      background-color: $primary-95;
-      border-radius: 10px;
-    }
-
-    /* Handle on hover */
-    &::-webkit-scrollbar-thumb:hover {
-      background-color: $primary-95;
-    }
-  }
-}
-</style>