@appscode/design-system 1.1.0-alpha.9 → 1.1.0-beta.3

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

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+interface Props {
+  modifierClasses?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  modifierClasses: "",
+});
+</script>
+
+<template>
+  <!--use "is-marginless" class for remove margin -->
+  <div class="ac-accordion-wrapper" :class="modifierClasses">
+    <!-- single accordion item start  -->
+    <div class="single-accordion-item closed">
+      <!-- accordion heading start  -->
+      <div class="accordion-heading">
+        <h6 class="is-small">Hello Accordion title</h6>
+        <button class="icon">
+          <i class="fa fa-plus" aria-hidden="true"></i>
+        </button>
+      </div>
+      <!-- accordion heading end -->
+      <!-- accordion body start  -->
+      <div class="accordion-body">
+        <slot />
+      </div>
+      <!-- accordion body end -->
+    </div>
+    <!-- single accordion item end  -->
+  </div>
+</template>
+<style lang="scss" scoped>
+.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: $primary;
+        }
+      }
+    }
+  }
+
+  .single-accordion-item {
+    background-color: $white-100;
+    padding: 15px 20px;
+    margin-bottom: 15px;
+    border-radius: 4px;
+    border: 1px solid $primary-90;
+
+    &.open {
+      .accordion-heading {
+        margin-bottom: 10px;
+      }
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    .accordion-heading {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      h3 {
+        cursor: pointer;
+      }
+
+      button {
+        font-size: 12px;
+        letter-spacing: 0.1px;
+      }
+
+      .icon {
+        width: 20px;
+        height: 20px;
+        border: 1px solid $primary-90;
+        line-height: 20px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 10px;
+        border-radius: 50%;
+        cursor: pointer;
+      }
+    }
+
+    .accordion-body {
+      max-height: 0;
+      transition: max-height 0.2s ease-out;
+      overflow: hidden;
+
+      p {
+        font-size: 13px;
+        color: $primary-20;
+        line-height: 1.6;
+      }
+    }
+  }
+}
+
+.overview-body {
+  .ac-accordion-wrapper {
+    &.is-marginless {
+      .single-accordion-item {
+        .accordion-heading {
+          padding-bottom: 0;
+        }
+      }
+    }
+  }
+}
+
+/****************************************
+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) {
+}
+</style>

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

@@ -0,0 +1,238 @@
+<script setup lang="ts">
+interface Props {
+  modifierClasses?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  modifierClasses: "",
+});
+</script>
+
+<template>
+  <div :class="modifierClasses" class="ac-notification">
+    <p>
+      <slot />
+    </p>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+// for alert message
+.ac-notification {
+  background-color: #dee7f5;
+  font-size: 13;
+  color: $primary;
+  min-height: 36px;
+  display: flex;
+  align-items: center;
+  padding: 8px 16px;
+  overflow: hidden;
+  border: 1px solid $primary;
+  border-radius: 4px;
+  justify-content: flex-start;
+  position: relative;
+  z-index: 1;
+  min-width: 280px;
+
+  p {
+    color: $primary;
+
+    .close-icon {
+      padding-right: 10px;
+      font-size: 15px;
+    }
+
+    a {
+      text-decoration: underline;
+      color: $primary;
+
+      &:hover {
+        color: hsla(
+          var(--hsl-hue),
+          var(--hsl-saturation),
+          calc(var(--hsl-lightness) - 10%),
+          1
+        );
+      }
+    }
+  }
+
+  button.close {
+    background-color: transparent;
+    cursor: pointer;
+    right: 0px;
+    position: absolute;
+    box-shadow: none;
+    border: none;
+    font-size: 14px;
+    color: $danger;
+    width: 40px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+// mixin for .ac-notification
+@mixin acNotification($colorName) {
+  background-color: scale-color($color: $colorName, $lightness: 80%);
+  color: $white-100;
+  border-color: $colorName;
+
+  p {
+    color: $colorName;
+
+    a {
+      color: $colorName;
+
+      &:hover {
+        color: $colorName;
+        opacity: 0.8;
+      }
+    }
+  }
+}
+@mixin acPrimaryNotification() {
+  background-color: hsla(
+    var(--hsl-hue),
+    var(--hsl-saturation),
+    var(--hsl-lightness),
+    0.2
+  );
+  color: $white-100;
+  border-color: $primary;
+
+  p {
+    color: $primary;
+
+    a {
+      color: $primary;
+
+      &:hover {
+        color: $primary;
+        opacity: 0.8;
+      }
+    }
+  }
+}
+
+// is-primary
+.ac-notification.is-primary {
+  @include acPrimaryNotification();
+}
+
+// is.info
+.ac-notification.is-info {
+  @include acNotification($info);
+}
+
+// is.success
+.ac-notification.is-success {
+  @include acNotification($success);
+}
+
+// is-error
+.ac-notification.is-error {
+  @include acNotification($danger);
+}
+
+// is-warning
+.ac-notification.is-warning {
+  @include acNotification($warning);
+}
+
+/*====================================
+AC Toast
+=====================================*/
+
+.ac-toast {
+  width: 350px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 13px;
+  border-radius: 4px;
+  position: relative;
+  padding-right: 30px;
+  margin-bottom: 10px;
+
+  * {
+    color: $white-100;
+  }
+
+  p {
+    padding-left: 16px;
+
+    i.fa {
+      padding-right: 0 !important;
+      margin-right: 4px;
+    }
+  }
+
+  a {
+    font-weight: 500;
+    text-decoration: underline;
+    padding: 0 15px;
+
+    &:hover {
+      color: $black-70;
+    }
+  }
+
+  button.close-button {
+    border-radius: 0px;
+    background-color: transparent;
+    border: none;
+    color: $white-100;
+    position: absolute;
+    right: 0;
+    top: 0;
+    padding: 5px;
+    height: 100%;
+    width: 30px;
+    z-index: 1;
+    cursor: pointer;
+    border-left: 1px solid #dddddd;
+  }
+}
+
+// mixin for .ac-toast
+@mixin acToast($colorName) {
+  background-color: $colorName;
+  color: $white-100;
+  border-color: $colorName;
+}
+
+// is-primary
+.ac-toast.is-primary {
+  @include acToast($primary);
+}
+
+// is-info
+.ac-toast.is-info {
+  @include acToast($info);
+}
+
+// is.success
+.ac-toast.is-success {
+  @include acToast($success);
+}
+
+// is-error
+.ac-toast.is-error {
+  @include acToast($danger);
+}
+
+// is-warning
+.ac-toast.is-warning {
+  @include acToast($warning);
+}
+
+// dark theme start
+// .is-dark-theme {
+//   .ac-notification.is-error {
+//     background-color: $dark-bg-light;
+//   }
+// }
+</style>

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

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+interface Props {
+  modifierClasses?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  modifierClasses: "",
+});
+</script>
+
+<template>
+  <div class="toast" :class="modifierClasses">
+    <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>
+    </div>
+    <div class="toast-body">
+      <slot />
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.ac-toast {
+  width: 350px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 13px;
+  border-radius: 4px;
+  position: relative;
+  padding-right: 30px;
+  margin-bottom: 10px;
+
+  * {
+    color: $white-100;
+  }
+
+  p {
+    padding-left: 16px;
+
+    i.fa {
+      padding-right: 0 !important;
+      margin-right: 4px;
+    }
+  }
+
+  a {
+    font-weight: 500;
+    text-decoration: underline;
+    padding: 0 15px;
+
+    &:hover {
+      color: $black-90;
+    }
+  }
+
+  button.close-button {
+    border-radius: 0px;
+    background-color: transparent;
+    border: none;
+    color: $white-100;
+    position: absolute;
+    right: 0;
+    top: 0;
+    padding: 5px;
+    height: 100%;
+    width: 30px;
+    z-index: 1;
+    cursor: pointer;
+    border-left: 1px solid #dddddd;
+  }
+}
+</style>

package/vue-components/v3/banner/Banner.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="sign-up-notification mb-20">
+    <div class="notification-inner has-text-centered">
+      <h3><slot name="banner-title">Error!</slot></h3>
+      <slot><p>Oops!! There was an error while loading!</p></slot>
+    </div>
+  </div>
+</template>

package/vue-components/v3/breadcrumbs/Breadcrumb.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { watch, ref } from "vue";
+import { useRoute } from "vue-router";
+
+interface BreadCrumbType {
+  name: string;
+  path: string;
+}
+
+const list = ref<Array<BreadCrumbType>>([]);
+
+const route = useRoute();
+
+const pathReplaceWithParam = (path: string) => {
+  //Split the path and remove the first and last empty block
+  let splitPath = path.split("/").filter((element) => element !== "");
+
+  //Replace all element with query params where the element start with ":"
+  // Then again add them wthi "/" and return the path value
+  return splitPath.reduce((pval, cval) => {
+    if (cval[0] === ":") {
+      const cutIndex =
+        cval.indexOf("?") !== -1 ? cval.indexOf("?") : cval.length;
+      return (pval += route.params[cval.slice(1, cutIndex)] + "/");
+    } else return (pval += cval + "/");
+  }, "/");
+};
+
+const createVal = (startIdx: number, paths: Array<string>) => {
+  return paths.reduce((prev, curr, idx) => {
+    if (idx >= startIdx) {
+      if (idx + 1 === paths.length) return (prev += curr);
+      else return (prev += curr + " / ");
+    } else return prev + "";
+  }, "");
+};
+
+const createList = (paths: Array<string>) => {
+  //Split all the path and remove all empty block
+  let spath = paths.map((element) => {
+    return element.split("/").filter((word) => word !== "");
+  });
+
+  // Convert all the path arry in one arry where each element is the  different fo previous element
+  return spath.reduce((prev, curr, currentIdx) => {
+    if (currentIdx === 0) return prev.concat([createVal(0, curr)]);
+    else return prev.concat([createVal(spath[currentIdx - 1].length, curr)]);
+  }, []);
+};
+
+const createBreadcrumbs = () => {
+  //Adding dynamic path to the route
+  const listPaths = route.matched.map((element) =>
+    pathReplaceWithParam(element.path)
+  );
+
+  //Removing the last duplicate value from the listpaths array
+  listPaths.pop();
+
+  //Createing the breadcrumb name
+  const listName = createList(listPaths);
+
+  //Set the new breadcrumb name and path value to list
+  list.value = listName.map((element, index) => {
+    return {
+      name: element,
+      path: listPaths[index],
+    };
+  });
+};
+
+watch(
+  () => route.path,
+  () => {
+    createBreadcrumbs();
+  },
+  {
+    immediate: true,
+    deep: true,
+  }
+);
+</script>
+
+<template>
+  <div class="ac-breadcrumb">
+    <nav aria-label="breadcrumbs" class="breadcrumb">
+      <ul>
+        <li
+          v-for="(item, idx) in list"
+          :key="idx"
+          :class="{ 'is-active': idx === list.length - 1 }"
+        >
+          <router-link
+            class="router-link-active"
+            :class="{ 'is-active': idx === list.length - 1 }"
+            :to="item.path"
+            >{{ item.name }}
+          </router-link>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</template>
+<style lang="scss"></style>