npm - @fiscozen/card - Versions diffs - 0.1.5 → 1.0.0-beta.1 - Mend

@fiscozen/card 0.1.5 → 1.0.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/dist/card.js +169 -0
package/dist/card.umd.cjs +1 -0
package/dist/index.d.ts +1 -0
package/dist/src/FzCard.vue.d.ts +48 -0
package/dist/src/__test__/FzCard.test.d.ts +1 -0
package/dist/src/index.d.ts +2 -0
package/dist/src/types.d.ts +117 -0
package/package.json +5 -5
package/src/FzCard.vue +168 -70
package/src/__test__/FzCard.test.ts +518 -135
package/src/__test__/__snapshots__/FzCard.test.ts.snap +9 -6
package/src/types.ts +38 -1
package/tsconfig.tsbuildinfo +1 -0

package/dist/card.js ADDED Viewed

@@ -0,0 +1,169 @@
+import { defineComponent as O, useSlots as j, ref as M, watch as T, computed as n, onMounted as V, createElementBlock as i, openBlock as r, normalizeClass as a, createCommentVNode as t, withDirectives as A, createElementVNode as f, renderSlot as m, toDisplayString as Y, createBlock as s, unref as c, withModifiers as q, vShow as C } from "vue";
+import { FzIconButton as k, FzButton as h } from "@fiscozen/button";
+const x = { class: "flex flex-row gap-12 items-center" }, H = ["title"], L = { class: "flex flex-row gap-8 items-center" }, P = "border-1 border-solid border-grey-100 rounded flex flex-col", G = "border-solid pt-16 px-16 flex flex-row justify-between", J = "border-solid pt-0 px-16 pb-16 flex justify-end gap-12 items-center", R = /* @__PURE__ */ O({
+  __name: "FzCard",
+  props: {
+    title: {},
+    color: {},
+    primaryAction: {},
+    secondaryAction: {},
+    tertiaryAction: {},
+    contentClass: {},
+    collapsible: { type: Boolean },
+    defaultExpanded: { type: Boolean },
+    alwaysAlive: { type: Boolean },
+    hasInfoIcon: { type: Boolean },
+    environment: { default: "frontoffice" }
+  },
+  emits: ["fzprimary:click", "fzsecondary:click", "fztertiary:click", "fzcard:click-info"],
+  setup(z, { expose: B, emit: S }) {
+    const o = z, u = S, v = j(), d = M(o.defaultExpanded ?? !1);
+    T(
+      () => o.color === "aliceblue",
+      (e) => {
+        e && console.warn(
+          "[FzCard] The color prop value 'aliceblue' is deprecated and will be removed in a future version. Please use 'blue' instead. The component will automatically map 'aliceblue' to 'blue' for now."
+        );
+      },
+      { immediate: !0 }
+    );
+    const y = n(() => o.color === "aliceblue" ? "blue" : o.color), p = n(() => d.value || !o.collapsible), g = n(() => o.alwaysAlive || p.value), $ = n(
+      () => o.title || v.header || v["header-content"]
+    ), F = n(() => [
+      o.collapsible ? "cursor-pointer" : ""
+    ]), N = n(() => {
+      switch (y.value) {
+        case "blue":
+          return "bg-background-alice-blue";
+        case "orange":
+          return "bg-background-seashell";
+        case "purple":
+          return "bg-background-pale-purple";
+        case "grey":
+          return "bg-background-white-smoke";
+        default:
+          return "bg-core-white";
+      }
+    }), I = n(() => "text-core-black"), D = n(() => {
+      switch (y.value) {
+        case "blue":
+          return "border-background-alice-blue";
+        case "orange":
+          return "border-orange-200";
+        case "purple":
+          return "border-purple-200";
+        case "grey":
+          return "border-grey-200";
+        default:
+          return "border-grey-100";
+      }
+    });
+    n(() => {
+      switch (y.value) {
+        case "blue":
+        case "orange":
+        case "purple":
+        case "grey":
+          return "border-0";
+        default:
+          return "border-1";
+      }
+    });
+    const E = n(
+      () => o.primaryAction !== void 0 || o.secondaryAction !== void 0 || o.tertiaryAction !== void 0
+    );
+    function w() {
+      o.collapsible && (d.value = !d.value);
+    }
+    return V(() => {
+      o.tertiaryAction && !o.secondaryAction && !o.primaryAction ? console.warn(
+        "[Fiscozen Design System]: You should set primaryAction and secondaryAction if you want to set tertiaryAction"
+      ) : o.secondaryAction && !o.primaryAction && console.warn(
+        "[Fiscozen Design System]: You should set primaryAction if you want to set secondaryAction"
+      );
+    }), B({
+      /**
+       * Method to toggle the card open/closed state
+       */
+      toggleOpen: w
+    }), (e, l) => (r(), i("section", {
+      class: a([P, N.value, I.value, D.value, { "pb-16": !p.value }])
+    }, [
+      $.value ? (r(), i("header", {
+        key: 0,
+        class: a([F.value]),
+        onClick: w
+      }, [
+        f("div", {
+          class: a(G)
+        }, [
+          f("div", x, [
+            e.title ? (r(), i("h2", {
+              key: 0,
+              class: "text-core-black font-medium text-xl m-0 p-0 break-words",
+              title: e.title
+            }, Y(e.title), 9, H)) : t("", !0),
+            m(e.$slots, "header")
+          ]),
+          f("div", L, [
+            e.hasInfoIcon ? (r(), s(c(k), {
+              key: 0,
+              iconName: "circle-question",
+              variant: "invisible",
+              environment: e.environment,
+              onClick: l[0] || (l[0] = q((b) => u("fzcard:click-info"), ["stop"]))
+            }, null, 8, ["environment"])) : t("", !0),
+            e.collapsible ? (r(), s(c(k), {
+              key: 1,
+              iconName: d.value ? "chevron-up" : "chevron-down",
+              variant: "invisible",
+              environment: e.environment
+            }, null, 8, ["iconName", "environment"])) : t("", !0)
+          ])
+        ]),
+        m(e.$slots, "header-content")
+      ], 2)) : t("", !0),
+      g.value ? A((r(), i("article", {
+        key: 1,
+        class: a(["p-20", e.contentClass])
+      }, [
+        m(e.$slots, "default")
+      ], 2)), [
+        [C, p.value]
+      ]) : t("", !0),
+      (v.footer || E.value) && g.value ? A((r(), i("footer", {
+        key: 2,
+        class: a([J])
+      }, [
+        m(e.$slots, "footer", {}, () => [
+          e.tertiaryAction ? (r(), s(c(k), {
+            key: 0,
+            onClick: l[1] || (l[1] = (b) => u("fztertiary:click")),
+            iconName: e.tertiaryAction.icon,
+            variant: "invisible",
+            environment: e.environment
+          }, null, 8, ["iconName", "environment"])) : t("", !0),
+          e.secondaryAction ? (r(), s(c(h), {
+            key: 1,
+            onClick: l[2] || (l[2] = (b) => u("fzsecondary:click")),
+            label: e.secondaryAction.label,
+            variant: "secondary",
+            environment: e.environment
+          }, null, 8, ["label", "environment"])) : t("", !0),
+          e.primaryAction ? (r(), s(c(h), {
+            key: 2,
+            onClick: l[3] || (l[3] = (b) => u("fzprimary:click")),
+            label: e.primaryAction.label,
+            variant: "primary",
+            environment: e.environment
+          }, null, 8, ["label", "environment"])) : t("", !0)
+        ])
+      ], 2)), [
+        [C, p.value]
+      ]) : t("", !0)
+    ], 2));
+  }
+});
+export {
+  R as FzCard
+};

package/dist/card.umd.cjs ADDED Viewed

@@ -0,0 +1 @@

package/dist/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from './src/index'

package/dist/src/FzCard.vue.d.ts ADDED Viewed

@@ -0,0 +1,48 @@
+import { FzCardProps, FzCardSlots } from './types';
+declare function toggleOpen(): void;
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<FzCardProps>, {
+    environment: string;
+}>>, {
+    /**
+     * Method to toggle the card open/closed state
+     */
+    toggleOpen: typeof toggleOpen;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "fzprimary:click": () => void;
+    "fzsecondary:click": () => void;
+    "fztertiary:click": () => void;
+    "fzcard:click-info": () => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<FzCardProps>, {
+    environment: string;
+}>>> & Readonly<{
+    "onFzprimary:click"?: (() => any) | undefined;
+    "onFzsecondary:click"?: (() => any) | undefined;
+    "onFztertiary:click"?: (() => any) | undefined;
+    "onFzcard:click-info"?: (() => any) | undefined;
+}>, {
+    environment: import('./types').FzCardEnvironment;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, Readonly<FzCardSlots> & FzCardSlots>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/src/__test__/FzCard.test.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/dist/src/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { default as FzCard } from './FzCard.vue';
2	+ export * from './types';

package/dist/src/types.d.ts ADDED Viewed

@@ -0,0 +1,117 @@
+export type FzCardProps = {
+    /**
+     * 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;
+    /**
+     * Whether to show an info icon in the header
+     * @default false
+     */
+    hasInfoIcon?: boolean;
+    /**
+     * The environment context for the card buttons
+     * @default 'frontoffice'
+     */
+    environment?: FzCardEnvironment;
+};
+type FzCardButton = {
+    label: string;
+};
+type FzCardIconButton = {
+    icon: string;
+};
+/**
+ * Card background color variants.
+ *
+ * @remarks
+ * - 'default' renders a white background
+ * - 'blue' renders an alice-blue background
+ * - 'orange' renders a seashell background
+ * - 'purple' renders a pale-purple background
+ * - 'grey' renders a white-smoke background
+ *
+ * @deprecated 'aliceblue' is deprecated and will be removed in a future version. Use 'blue' instead.
+ */
+export type FzCardColor = "default" | "blue" | "orange" | "purple" | "grey" | "aliceblue";
+/**
+ * Card environment context for buttons
+ *
+ * @remarks
+ * Determines the visual style context for all buttons within the card
+ * - 'backoffice' for internal/admin interfaces
+ * - 'frontoffice' for public-facing interfaces
+ */
+export type FzCardEnvironment = "backoffice" | "frontoffice";
+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;
+    /**
+     * Event emitted when the info icon is clicked
+     * @type {() => void}
+     */
+    (event: "fzcard:click-info"): 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;
+}
+export {};

package/package.json CHANGED Viewed

@@ -1,14 +1,14 @@
 {
   "name": "@fiscozen/card",
-  "version": "0.1.5",
+  "version": "1.0.0-beta.1",
   "description": "Design System Card component",
   "main": "src/index.ts",
   "type": "module",
   "keywords": [],
   "author": "Cristian Barraco",
   "dependencies": {
-    "@fiscozen/button": "^0.1.9",
-    "@fiscozen/icons": "^0.1.19"
+    "@fiscozen/button": "^1.0.0",
+    "@fiscozen/icons": "^0.1.35"
   },
   "peerDependencies": {
     "tailwindcss": "^3.4.1",
@@ -33,9 +33,9 @@
     "@awesome.me/kit-8137893ad3": "^1.0.65",
     "@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/tsconfig": "^0.1.0"
+    "@fiscozen/eslint-config": "^0.1.0"
   },
   "license": "MIT",
   "scripts": {

package/src/FzCard.vue CHANGED Viewed

@@ -1,81 +1,82 @@
-<template>
-  <section :class="[sectionStaticClass, backgroundColor]">
-    <header
-      v-if="existHeader"
-      :class="[headerContainerComputedClass, borderColor]"
-      @click="toggleOpen"
-    >
-      <div :class="headerStaticClass">
-        <div class="flex flex-row gap-12 items-center">
-          <h2
-            v-if="title"
-            class="text-core-black font-medium text-2xl m-0 p-0 break-words"
-            :title="title"
-          >
-            {{ title }}
-          </h2>
-          <slot name="header"></slot>
-        </div>
-        <FzIconButton
-          v-if="collapsible"
-          :iconName="isOpen ? 'chevron-up' : 'chevron-down'"
-          variant="invisible"
-        />
-      </div>
-      <slot name="header-content"></slot>
-    </header>
-    <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"
-    >
-      <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";
+/**
+ * FzCard Component
+ *
+ * A flexible container used to group related content and actions. Cards can include
+ * elements like text, images or tables. It also has a set of buttons related to the
+ * content, but other can be added inside the main area.
+ *
+ * Supports multiple color variants, collapsible functionality, and customizable actions.
+ * The card can be divided into header, main content area, and footer sections.
+ *
+ * @component
+ * @example
+ * <FzCard title="Card Title" color="default">
+ *   <p>Card content goes here</p>
+ * </FzCard>
+ *
+ * @example
+ * <FzCard
+ *   title="Collapsible Card"
+ *   collapsible
+ *   :primaryAction="{ label: 'Save' }"
+ * >
+ *   <p>This card can be collapsed</p>
+ * </FzCard>
+ */
+import { computed, onMounted, ref, watch } from "vue";
 import { FzCardEvents, FzCardProps, FzCardSlots } from "./types";
 import { FzButton, FzIconButton } from "@fiscozen/button";
-const props = defineProps<FzCardProps>();
+const props = withDefaults(defineProps<FzCardProps>(), {
+  environment: 'frontoffice'
+});
 const emit = defineEmits<FzCardEvents>();
 const slots = defineSlots<FzCardSlots>();
 const isOpen = ref(props.defaultExpanded ?? false);
+/**
+ * Deprecation warning for 'aliceblue' color prop value.
+ *
+ * Watches for 'aliceblue' color usage and logs warning once on mount or when color changes.
+ * Using watch with immediate:true ensures the warning only fires once per component instance.
+ */
+watch(
+  () => props.color === "aliceblue",
+  (isAliceblue) => {
+    if (isAliceblue) {
+      console.warn(
+        "[FzCard] The color prop value 'aliceblue' is deprecated and will be removed in a future version. " +
+        "Please use 'blue' instead. The component will automatically map 'aliceblue' to 'blue' for now."
+      );
+    }
+  },
+  { immediate: true }
+);
+/**
+ * Normalizes deprecated color values to their replacements.
+ *
+ * Maps deprecated colors to their replacements:
+ * - 'aliceblue' → 'blue'
+ *
+ * This ensures backward compatibility while encouraging migration to new values.
+ * Deprecation warnings are handled separately via watch hooks.
+ */
+const normalizedColor = computed(() => {
+  if (props.color === "aliceblue") {
+    return "blue";
+  }
+  return props.color;
+});
 const sectionStaticClass =
   "border-1 border-solid border-grey-100 rounded flex flex-col";
 const headerStaticClass =
-  "h-64 border-solid p-16 flex flex-row justify-between";
+  "border-solid pt-16 px-16 flex flex-row justify-between";
 const footerStaticClass =
-  "h-64 border-t-1 border-solid p-16 flex justify-end gap-8 items-center";
+  "border-solid pt-0 px-16 pb-16 flex justify-end gap-12 items-center";
 const showContent = computed(() => isOpen.value || !props.collapsible);
 const isAlive = computed(() => props.alwaysAlive || showContent.value);
@@ -83,36 +84,58 @@ 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" : "",
 ]);
 const backgroundColor = computed(() => {
-  switch (props.color) {
+  switch (normalizedColor.value) {
     case "blue":
       return "bg-background-alice-blue";
     case "orange":
       return "bg-background-seashell";
     case "purple":
       return "bg-background-pale-purple";
+    case "grey":
+      return "bg-background-white-smoke";
     default:
       return "bg-core-white";
   }
 });
+const textColor = computed(() => {
+  // Note: Based on Figma designs, all color variants use black text
+  // The blue-500 background variant was previously using white text but
+  // the new alice-blue background uses black text
+  return "text-core-black";
+});
 const borderColor = computed(() => {
-  switch (props.color) {
+  switch (normalizedColor.value) {
     case "blue":
-      return "border-blue-200";
+      return "border-background-alice-blue";
     case "orange":
       return "border-orange-200";
     case "purple":
       return "border-purple-200";
+    case "grey":
+      return "border-grey-200";
     default:
       return "border-grey-100";
   }
 });
+const borderWidth = computed(() => {
+  switch (normalizedColor.value) {
+    case "blue":
+    case "orange":
+    case "purple":
+    case "grey":
+      return "border-0";
+    default:
+      return "border-1";
+  }
+});
 const atLeastOneButton = computed(
   () =>
     props.primaryAction !== undefined ||
@@ -142,3 +165,78 @@ defineExpose({
   toggleOpen,
 });
 </script>
+<template>
+  <section :class="[sectionStaticClass, backgroundColor, textColor, borderColor, {'pb-16': !showContent}]">
+    <header
+      v-if="existHeader"
+      :class="[headerContainerComputedClass]"
+      @click="toggleOpen"
+    >
+      <div :class="headerStaticClass">
+        <div class="flex flex-row gap-12 items-center">
+          <h2
+            v-if="title"
+            class="text-core-black font-medium text-xl m-0 p-0 break-words"
+            :title="title"
+          >
+            {{ title }}
+          </h2>
+          <slot name="header"></slot>
+        </div>
+        <div class="flex flex-row gap-8 items-center">
+          <FzIconButton
+            v-if="hasInfoIcon"
+            iconName="circle-question"
+            variant="invisible"
+            :environment="environment"
+            @click.stop="emit('fzcard:click-info')"
+          />
+          <FzIconButton
+            v-if="collapsible"
+            :iconName="isOpen ? 'chevron-up' : 'chevron-down'"
+            variant="invisible"
+            :environment="environment"
+          />
+        </div>
+      </div>
+      <slot name="header-content"></slot>
+    </header>
+    <article
+      v-if="isAlive"
+      :class="['p-16', contentClass]"
+      v-show="showContent"
+    >
+      <slot></slot>
+    </article>
+    <footer
+      v-if="(slots.footer || atLeastOneButton) && isAlive"
+      :class="[footerStaticClass]"
+      v-show="showContent"
+    >
+      <slot name="footer">
+        <FzIconButton
+          v-if="tertiaryAction"
+          @click="emit('fztertiary:click')"
+          :iconName="tertiaryAction.icon"
+          variant="invisible"
+          :environment="environment"
+        />
+        <FzButton
+          v-if="secondaryAction"
+          @click="emit('fzsecondary:click')"
+          :label="secondaryAction.label"
+          variant="secondary"
+          :environment="environment"
+        />
+        <FzButton
+          v-if="primaryAction"
+          @click="emit('fzprimary:click')"
+          :label="primaryAction.label"
+          variant="primary"
+          :environment="environment"
+        />
+      </slot>
+    </footer>
+  </section>
+</template>