@appscode/design-system 2.2.49 → 2.2.50

package/package.json

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

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

@@ -1,16 +1,7 @@
 .single-accordion-item {
   background-color: $white-100;
-  padding: 15px 20px;
   margin-bottom: 15px;
   border-radius: 4px;
-  border: 1px solid $color-border;
-  box-shadow: $ac-shadow-1;
-
-  &.open {
-    .accordion-heading {
-      margin-bottom: 10px;
-    }
-  }
 
   &:last-child {
     margin-bottom: 0;
@@ -20,7 +11,10 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    min-height: 34px;
+    min-height: 50px;
+    background-color: $secondary-light-gray;
+    padding: 8px 16px;
+    border-radius: 4px;
 
     h3 {
       cursor: pointer;
@@ -54,6 +48,7 @@
   }
 
   .accordion-body {
+    padding-top: 8px;
     max-height: 0;
     overflow: hidden;
     // transition: max-height 0.3s ease-in-out;

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

@@ -1,41 +1,35 @@
 <script setup lang="ts">
-import { ref } from "vue";
 
-const isActive = ref(true);
+withDefaults(defineProps<{ isActive: boolean, bodyInside: boolean }>(), {
+  isActive: false,
+  bodyInside: false
+})
+
 </script>
 
 <template>
-  <div class="single-accordion-item closed">
-    <div class="accordion-heading is-clickable" @click="isActive = !isActive">
+  <div class="single-accordion-item">
+    <div class="accordion-heading is-clickable">
       <slot name="title" />
       <div class="accordion-right is-flex is-align-items-center gap-8">
-        <div
-          v-show="!isActive"
-          class="accordion-description is-justify-content-flex-end has-text-right is-flex-direction-column"
-        >
+        <div v-show="!isActive"
+          class="accordion-description is-justify-content-flex-end has-text-right is-flex-direction-column">
           <slot name="description" />
         </div>
         <button class="icon">
-          <svg
-            :style="{ transform: isActive ? 'rotate(-180deg)' : 'rotate(0deg)' }"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
-            class="size-6"
-          >
+          <svg :style="{ transform: isActive ? 'rotate(-180deg)' : 'rotate(0deg)' }" xmlns="http://www.w3.org/2000/svg"
+            fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
             <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
           </svg>
         </button>
       </div>
     </div>
 
-    <div class="accordion-body" :style="{ 'max-height': isActive ? '100%' : 0 }">
-      <slot />
+    <div v-if="bodyInside" class="accordion-body" :style="{ 'max-height': isActive ? '100%' : 0 }">
+      <slot name="body" />
     </div>
   </div>
 </template>
 <style lang="scss" scoped>
 @import "../../../vue-components/styles/components/accordion";
-</style>
+</style>