@appscode/design-system 2.6.22-alpha-0.0.8 → 2.6.22-alpha-0.0.10

package/package.json

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

package/vue-components/styles/components/cards/_all.scss

@@ -6,3 +6,4 @@
 @import "vendor";
 @import "payment-card";
 @import "subscription-card";
+@import "usage-card";

package/vue-components/styles/components/cards/_usage-card.scss

@@ -0,0 +1,44 @@
+.cards-bg {
+  background-color: $primary-light-gray;
+  border: 1px solid $color-border;
+  border-radius: 4px;
+  padding: 16px;
+  h5 {
+    margin-bottom: 8px;
+  }
+}
+
+.card.usage-card {
+  border: 1px solid $color-border;
+  border-radius: 4px;
+  background-color: #fff;
+  box-shadow: none;
+  flex-grow: 1;
+  flex-basis: 240px;
+  .card-heading {
+    padding: 8px 16px;
+    min-height: 40px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid $color-border;
+  }
+
+  .card-body {
+    padding: 8px 16px;
+    p {
+      margin-bottom: 8px;
+      strong {
+        font-size: 16px;
+        font-weight: 500;
+        color: $color-heading;
+      }
+
+      span {
+        font-size: 13px;
+        font-weight: 400;
+        color: $color-text;
+      }
+    }
+  }
+}

package/vue-components/styles/components/form-fields/_check-radio-switch.scss

@@ -176,6 +176,17 @@
 }
 
 .ac-switch {
+  &.is-fullwidth {
+    background-color: $primary-light-gray;
+    padding: 16px;
+    border-radius: 4px;
+    display: flex;
+    justify-content: space-between;
+    border: 1px solid $color-border;
+    label {
+      color: $color-heading;
+    }
+  }
   .switch {
     position: relative;
     display: inline-block;

package/vue-components/styles/components/inbox/all.scss

@@ -1,10 +1,10 @@
 .mail-details {
   display: grid;
-  grid-template-columns: 460px calc(100% - 460px);
+  grid-template-columns: 360px calc(100% - 360px);
 }
 
 .inbox-sidebar {
-  width: 460px;
+  width: 360px;
   border-right: 1px solid $color-border;
   // padding: 20px;
   // box-shadow: 2px 0px 6px 2px rgba(0, 0, 0, 0.04);
@@ -33,7 +33,7 @@
 .single-message {
   transition: 0.2s ease-in-out;
   padding: 10px 20px;
-  border-radius: 4px;
+  // border-radius: 4px;
   position: relative;
   z-index: 9;
   width: calc(100% + 40px);
@@ -41,7 +41,16 @@
   border-bottom: 1px solid $color-border;
 
   &.is-unread {
+    background-color: $secondary-light-gray;
+  }
+  &.is-active {
     background-color: $primary-light-gray;
+    border-top: 1px solid $ac-primary;
+    border-bottom: 1px solid $ac-primary;
+
+    h6 {
+      color: $ac-primary;
+    }
   }
   &:hover {
     background-color: hsla(var(--secondary-hue), 12%, 95%);
@@ -60,9 +69,9 @@
 
 .message-details {
   max-width: 768px;
-  margin: 16px 64px 16px 64px;
+  margin: 0;
   @include until-widescreen {
-    margin: 16px 32px 16px 64px;
+    margin: 0;
   }
 }
 
@@ -110,7 +119,7 @@ body:not(.message-details) .inbox-sidebar {
 
 body:has(.message-details) {
   .inbox-sidebar {
-    width: 460px;
+    width: 360px;
     border-right: 1px solid #e2e8f0;
   }
   .ac-system-content {
@@ -124,9 +133,11 @@ body:has(.message-details) {
   overflow: hidden;
   transition: 0.2s ease-in-out;
   &.is-open {
-    background-color: $primary-light-gray;
+    // background-color: $primary-light-gray;
     padding: 16px;
     border: 2px solid $ac-primary;
+    border-radius: 8px;
+    margin: 8px;
   }
   pre {
     max-width: 100%;
@@ -134,3 +145,15 @@ body:has(.message-details) {
     max-height: 300px;
   }
 }
+
+// transition css
+/* we will explain what these classes do next! */
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}

package/vue-components/types/previewYaml.ts

@@ -1,3 +1,7 @@
+type SpecType = {
+  values: Record<string, unknown>;
+};
+
 export interface PreviewYamlType {
   content: string;
   initContent: string;
@@ -7,4 +11,5 @@ export interface PreviewYamlType {
   uid: string;
   key?: string;
   gvr?: string;
+  spec?: SpecType;
 }

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

@@ -20,6 +20,7 @@ withDefaults(defineProps<Props>(), {
     <div class="overview-cards b-t-1">
       <slot />
     </div>
+    <slot name="body" />
   </div>
 </template>
 <style lang="scss" scoped>

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

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    title: string;
+    usages: Array<{ value: unknown; unit: string }>;
+  }>(),
+  {
+    title: "title",
+    usages: () => [],
+  },
+);
+</script>
+<template>
+  <div class="card usage-card">
+    <div class="card-heading">
+      <p>{{ title }}</p>
+      <slot name="icon" />
+    </div>
+    <div class="card-body">
+      <p v-for="(usage, idx) in usages" :key="idx">
+        <strong>{{ usage.value }}</strong
+        ><span>/{{ usage.unit }}</span>
+      </p>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import "../../styles/components/cards/usage-card";
+</style>

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

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    title?: string;
+  }>(),
+  {
+    title: "Total Usage Data",
+  },
+);
+</script>
+<template>
+  <div class="cards-bg is-flex-wrap-wrap">
+    <h5>{{ title }}</h5>
+    <div class="is-flex gap-16">
+      <slot name="usage-card" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import "../../styles/components/cards/usage-card";
+</style>

package/vue-components/v3/{upcoming → form-fields}/SimpleSelect.vue

@@ -24,7 +24,7 @@ const props = withDefaults(defineProps<prop>(), {
   optionType: "simple",
 });
 
-defineEmits(["onRefreshClick"]);
+const emit = defineEmits(["select", "remove", "onRefreshClick"]);
 
 const selectedValue = ref<Option>();
 const labelHoisted = ref(false);
@@ -50,6 +50,7 @@ const filteredOptions = computed(() => {
 const onLabelClick = (op: Option) => {
   selectedValue.value = op;
   isOpen.value = false;
+  emit("select", op);
 };
 
 // handle label click
@@ -62,6 +63,7 @@ const selectClick = () => {
 const handleClear = () => {
   selectedValue.value = undefined;
   searchText.value = "";
+  emit("remove");
 };
 
 // handle depend on selected data
@@ -104,7 +106,7 @@ watch(isOpen, (n) => {
 
     <ac-buttons>
       <button class="button ac-button is-white" @click="handleClear">
-        <ArrowIcon />
+        <CloseIcon />
       </button>
 
       <ac-button modifier-classes="is-white" @click="$emit('onRefreshClick')">
@@ -112,7 +114,7 @@ watch(isOpen, (n) => {
       </ac-button>
 
       <ac-button modifier-classes="is-white" @click="isOpen = !isOpen">
-        <CloseIcon :direction="isOpen ? 'down' : 'up'" />
+        <ArrowIcon :direction="isOpen ? 'down' : 'up'" />
       </ac-button>
     </ac-buttons>
 

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

@@ -18,7 +18,7 @@ const model = defineModel({ type: Boolean });
 </script>
 
 <template>
-  <div class="ac-switch is-flex is-align-items-center gap-8">
+  <div class="ac-switch is-flex is-align-items-center gap-8" :class="modifierClasses">
     <label :for="name">{{ label }}</label>
     <label class="switch">
       <input
@@ -27,7 +27,6 @@ const model = defineModel({ type: Boolean });
         type="checkbox"
         :name="name"
         class="switch is-rounded is-primary"
-        :class="modifierClasses"
         :data-testid="dataTestId"
       />
       <span class="slider round"></span>