@fiscozen/card 0.1.4 → 0.1.5

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@fiscozen/card",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Design System Card component",
   "main": "src/index.ts",
   "type": "module",
   "keywords": [],
   "author": "Cristian Barraco",
   "dependencies": {
-    "@fiscozen/icons": "^0.1.19",
-    "@fiscozen/button": "^0.1.9"
+    "@fiscozen/button": "^0.1.9",
+    "@fiscozen/icons": "^0.1.19"
   },
   "peerDependencies": {
     "tailwindcss": "^3.4.1",
@@ -34,8 +34,8 @@
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/vue-fontawesome": "^3.0.6",
     "@fiscozen/eslint-config": "^0.1.0",
-    "@fiscozen/tsconfig": "^0.1.0",
-    "@fiscozen/prettier-config": "^0.1.0"
+    "@fiscozen/prettier-config": "^0.1.0",
+    "@fiscozen/tsconfig": "^0.1.0"
   },
   "license": "MIT",
   "scripts": {

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,10 +24,18 @@
       </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="(slots.footer || atLeastOneButton) && isAlive" :class="[footerStaticClass, borderColor]" v-show="showContent">
+    <footer
+      v-if="(slots.footer || atLeastOneButton) && isAlive"
+      :class="[footerStaticClass, borderColor]"
+      v-show="showContent"
+    >
       <slot name="footer">
         <FzIconButton
           v-if="tertiaryAction"
@@ -67,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" : "",
@@ -106,8 +121,7 @@ const atLeastOneButton = computed(
 );
 
 function toggleOpen() {
-  if (props.collapsible) 
-    isOpen.value = !isOpen.value;
+  if (props.collapsible) isOpen.value = !isOpen.value;
 }
 
 onMounted(() => {
@@ -121,10 +135,10 @@ onMounted(() => {
     );
 });
 
-defineExpose({ 
+defineExpose({
   /**
    * Method to toggle the card open/closed state
    */
-  toggleOpen
+  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

@@ -2,7 +2,7 @@ export type FzCardProps = {
   /**
    * The title of the card
    */
-  title: string;
+  title?: string;
   /**
    * The background color of the card
    */
@@ -52,34 +52,34 @@ export interface FzCardEvents {
    * Event emitted when the primary action is clicked
    * @type {() => void}
    */
-  (event: 'fzprimary:click'): void
+  (event: "fzprimary:click"): void;
   /**
    * Event emitted when the secondary action is clicked
    * @type {() => void}
    */
-  (event:'fzsecondary:click'): void,
+  (event: "fzsecondary:click"): void;
   /**
    * Event emitted when the tertiary action is clicked
    * @type {() => void}
    */
-  (event:'fztertiary:click'): void,
+  (event: "fztertiary:click"): void;
 }
 
 export interface FzCardSlots {
   /**
    * Slot for the content of the card
    */
-  default(props:{}): any;
+  default(props: {}): any;
   /**
    * Slot for the header, it will be displayed on the left of the title
    */
-  header(props:{}): any;
+  header(props: {}): any;
   /**
    * Slot for the header content, it will be displayed below the title
    */
-  'header-content'(props:{}): any;
+  "header-content"(props: {}): any;
   /**
    * Slot for the footer of the card
    */
-  footer(props:{}): any;
+  footer(props: {}): any;
 }