@fiscozen/card 0.1.3 → 0.1.5

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@fiscozen/card",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Design System Card component",
   "main": "src/index.ts",
   "type": "module",
   "keywords": [],
   "author": "Cristian Barraco",
   "dependencies": {
-    "@fiscozen/icons": "^0.1.5",
-    "@fiscozen/button": "^0.1.4"
+    "@fiscozen/button": "^0.1.9",
+    "@fiscozen/icons": "^0.1.19"
   },
   "peerDependencies": {
     "tailwindcss": "^3.4.1",

package/src/FzCard.vue

@@ -1,6 +1,10 @@
 <template>
   <section :class="[sectionStaticClass, backgroundColor]">
-    <header :class="[headerContainerComputedClass, borderColor]" @click="toggleOpen">
+    <header
+      v-if="existHeader"
+      :class="[headerContainerComputedClass, borderColor]"
+      @click="toggleOpen"
+    >
       <div :class="headerStaticClass">
         <div class="flex flex-row gap-12 items-center">
           <h2
@@ -20,38 +24,50 @@
       </div>
       <slot name="header-content"></slot>
     </header>
-    <article v-if="isAlive" :class="['p-20', contentClass]" v-show="showContent">
+    <article
+      v-if="isAlive"
+      :class="['p-20', contentClass]"
+      v-show="showContent"
+    >
       <slot></slot>
     </article>
-    <footer v-if="atLeastOneButton && isAlive" :class="[footerStaticClass, borderColor]" v-show="showContent">
-      <FzIconButton
-        v-if="tertiaryAction"
-        @click="$emit('fztertiary:click')"
-        :iconName="tertiaryAction.icon"
-        variant="invisible"
-      />
-      <FzButton
-        v-if="secondaryAction"
-        @click="$emit('fzsecondary:click')"
-        :label="secondaryAction.label"
-        variant="secondary"
-      />
-      <FzButton
-        v-if="primaryAction"
-        @click="$emit('fzprimary:click')"
-        :label="primaryAction.label"
-        variant="primary"
-      />
+    <footer
+      v-if="(slots.footer || atLeastOneButton) && isAlive"
+      :class="[footerStaticClass, borderColor]"
+      v-show="showContent"
+    >
+      <slot name="footer">
+        <FzIconButton
+          v-if="tertiaryAction"
+          @click="emit('fztertiary:click')"
+          :iconName="tertiaryAction.icon"
+          variant="invisible"
+        />
+        <FzButton
+          v-if="secondaryAction"
+          @click="emit('fzsecondary:click')"
+          :label="secondaryAction.label"
+          variant="secondary"
+        />
+        <FzButton
+          v-if="primaryAction"
+          @click="emit('fzprimary:click')"
+          :label="primaryAction.label"
+          variant="primary"
+        />
+      </slot>
     </footer>
   </section>
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from "vue";
-import { FzCardProps } from "./types";
+import { FzCardEvents, FzCardProps, FzCardSlots } from "./types";
 import { FzButton, FzIconButton } from "@fiscozen/button";
 
 const props = defineProps<FzCardProps>();
+const emit = defineEmits<FzCardEvents>();
+const slots = defineSlots<FzCardSlots>();
 const isOpen = ref(props.defaultExpanded ?? false);
 
 const sectionStaticClass =
@@ -63,6 +79,9 @@ const footerStaticClass =
 
 const showContent = computed(() => isOpen.value || !props.collapsible);
 const isAlive = computed(() => props.alwaysAlive || showContent.value);
+const existHeader = computed(
+  () => props.title || slots["header"] || slots["header-content"],
+);
 const headerContainerComputedClass = computed(() => [
   showContent.value ? "border-b-1" : "border-b-0",
   props.collapsible ? "cursor-pointer" : "",
@@ -102,8 +121,7 @@ const atLeastOneButton = computed(
 );
 
 function toggleOpen() {
-  if (props.collapsible) 
-    isOpen.value = !isOpen.value;
+  if (props.collapsible) isOpen.value = !isOpen.value;
 }
 
 onMounted(() => {
@@ -117,5 +135,10 @@ onMounted(() => {
     );
 });
 
-defineExpose({ toggleOpen });
+defineExpose({
+  /**
+   * Method to toggle the card open/closed state
+   */
+  toggleOpen,
+});
 </script>

package/src/__test__/FzCard.test.ts

@@ -159,4 +159,35 @@ describe("FzCard", () => {
     await wrapper.find("header").find("button").trigger("click");
     expect(wrapper.find("article").exists()).toBeTruthy();
   });
+
+  it("should hide the header when no title is defined", async () => {
+    const wrapper = mount(FzCard, {
+      props: {},
+    });
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.find("header").exists()).toBeFalsy();
+  });
+
+  it("should show the header when no title is defined but header slot is", async () => {
+    const wrapper = mount(FzCard, {
+      slots: {
+        header: "<div>Header</div>",
+      },
+    });
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.find("header").exists()).toBeTruthy();
+  });
+
+  it("should show the header when no title is defined but header-content slot is", async () => {
+    const wrapper = mount(FzCard, {
+      slots: {
+        "header-content": "<div>Header</div>",
+      },
+    });
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.find("header").exists()).toBeTruthy();
+  });
 });

package/src/types.ts

@@ -1,12 +1,39 @@
 export type FzCardProps = {
-  title: string;
+  /**
+   * The title of the card
+   */
+  title?: string;
+  /**
+   * The background color of the card
+   */
   color?: FzCardColor;
+  /**
+   * The primary action button
+   */
   primaryAction?: FzCardButton;
+  /**
+   * The secondary action button
+   */
   secondaryAction?: FzCardButton;
+  /**
+   * The tertiary action button
+   */
   tertiaryAction?: FzCardIconButton;
+  /**
+   * Custom css class to apply to the content
+   */
   contentClass?: string;
+  /**
+   * Whether the card is collapsible
+   */
   collapsible?: boolean;
+  /**
+   * Whether the card is expanded by default (only if collapsible)
+   */
   defaultExpanded?: boolean;
+  /**
+   * Whether the card content is always alive (never destroyed) when collapsed
+   */
   alwaysAlive?: boolean;
 };
 
@@ -19,3 +46,40 @@ type FzCardIconButton = {
 };
 
 export type FzCardColor = "purple" | "orange" | "blue";
+
+export interface FzCardEvents {
+  /**
+   * Event emitted when the primary action is clicked
+   * @type {() => void}
+   */
+  (event: "fzprimary:click"): void;
+  /**
+   * Event emitted when the secondary action is clicked
+   * @type {() => void}
+   */
+  (event: "fzsecondary:click"): void;
+  /**
+   * Event emitted when the tertiary action is clicked
+   * @type {() => void}
+   */
+  (event: "fztertiary:click"): void;
+}
+
+export interface FzCardSlots {
+  /**
+   * Slot for the content of the card
+   */
+  default(props: {}): any;
+  /**
+   * Slot for the header, it will be displayed on the left of the title
+   */
+  header(props: {}): any;
+  /**
+   * Slot for the header content, it will be displayed below the title
+   */
+  "header-content"(props: {}): any;
+  /**
+   * Slot for the footer of the card
+   */
+  footer(props: {}): any;
+}