@fiscozen/card 1.0.0-beta.1 → 1.0.0-beta.3

package/package.json

@@ -1,14 +1,17 @@
 {
   "name": "@fiscozen/card",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.3",
   "description": "Design System Card component",
   "main": "src/index.ts",
   "type": "module",
   "keywords": [],
   "author": "Cristian Barraco",
   "dependencies": {
-    "@fiscozen/button": "^1.0.0",
-    "@fiscozen/icons": "^0.1.35"
+    "@fiscozen/container": "^0.3.1",
+    "@fiscozen/button": "^1.0.1-next.0",
+    "@fiscozen/composables": "^0.1.37",
+    "@fiscozen/icons": "^0.1.35",
+    "@fiscozen/style": "^0.1.7"
   },
   "peerDependencies": {
     "tailwindcss": "^3.4.1",
@@ -33,8 +36,8 @@
     "@awesome.me/kit-8137893ad3": "^1.0.65",
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/vue-fontawesome": "^3.0.6",
-    "@fiscozen/tsconfig": "^0.1.0",
     "@fiscozen/prettier-config": "^0.1.0",
+    "@fiscozen/tsconfig": "^0.1.0",
     "@fiscozen/eslint-config": "^0.1.0"
   },
   "license": "MIT",

package/src/FzCard.vue

@@ -27,6 +27,11 @@
 import { computed, onMounted, ref, watch } from "vue";
 import { FzCardEvents, FzCardProps, FzCardSlots } from "./types";
 import { FzButton, FzIconButton } from "@fiscozen/button";
+import { FzContainer } from "@fiscozen/container";
+import { useMediaQuery } from "@fiscozen/composables";
+import { breakpoints } from "@fiscozen/style";
+
+const smOrSmaller = useMediaQuery(`(max-width: ${breakpoints.sm})`);
 
 const props = withDefaults(defineProps<FzCardProps>(), {
   environment: 'frontoffice'
@@ -72,11 +77,11 @@ const normalizedColor = computed(() => {
 });
 
 const sectionStaticClass =
-  "border-1 border-solid border-grey-100 rounded flex flex-col";
+  "border-1 border-solid rounded flex flex-col";
 const headerStaticClass =
   "border-solid pt-16 px-16 flex flex-row justify-between";
 const footerStaticClass =
-  "border-solid pt-0 px-16 pb-16 flex justify-end gap-12 items-center";
+  "border-solid pt-0 px-16 pb-16 flex gap-12 items-center";
 
 const showContent = computed(() => isOpen.value || !props.collapsible);
 const isAlive = computed(() => props.alwaysAlive || showContent.value);
@@ -87,6 +92,10 @@ const headerContainerComputedClass = computed(() => [
   props.collapsible ? "cursor-pointer" : "",
 ]);
 
+const headerTitleClass = computed(() => {
+  return props.environment === 'backoffice' ? 'py-2' : 'py-8';
+});
+
 const backgroundColor = computed(() => {
   switch (normalizedColor.value) {
     case "blue":
@@ -114,28 +123,16 @@ const borderColor = computed(() => {
     case "blue":
       return "border-background-alice-blue";
     case "orange":
-      return "border-orange-200";
+      return "border-background-seashell";
     case "purple":
-      return "border-purple-200";
+      return "border-background-pale-purple";
     case "grey":
-      return "border-grey-200";
+      return "border-background-white-smoke";
     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 ||
@@ -174,17 +171,17 @@ defineExpose({
       @click="toggleOpen"
     >
       <div :class="headerStaticClass">
-        <div class="flex flex-row gap-12 items-center">
+        <div :class="['flex flex-row gap-12 items-start', headerTitleClass]">
           <h2
             v-if="title"
-            class="text-core-black font-medium text-xl m-0 p-0 break-words"
+            class="text-core-black font-medium text-xl m-0 p-0 break-words overflow-wrap-anywhere min-w-0 flex-shrink"
             :title="title"
           >
             {{ title }}
           </h2>
           <slot name="header"></slot>
         </div>
-        <div class="flex flex-row gap-8 items-center">
+        <div class="flex flex-row gap-8 items-start">
           <FzIconButton
             v-if="hasInfoIcon"
             iconName="circle-question"
@@ -211,31 +208,35 @@ defineExpose({
     </article>
     <footer
       v-if="(slots.footer || atLeastOneButton) && isAlive"
-      :class="[footerStaticClass]"
+      :class="[footerStaticClass, {'justify-end': !smOrSmaller}]"
       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"
-        />
+        <FzContainer horizontal gap="sm" :class="{'w-full': smOrSmaller}">
+          <FzIconButton
+            v-if="tertiaryAction"
+            @click="emit('fztertiary:click')"
+            :iconName="tertiaryAction.icon"
+            variant="invisible"
+            :environment="environment"
+          />
+          <FzButton
+            v-if="secondaryAction"
+            :class="{'flex-grow': smOrSmaller}"
+            @click="emit('fzsecondary:click')"
+            :label="secondaryAction.label"
+            variant="secondary"
+            :environment="environment"
+          />
+          <FzButton
+            v-if="primaryAction"
+            :class="{'flex-grow': smOrSmaller}"
+            @click="emit('fzprimary:click')"
+            :label="primaryAction.label"
+            variant="primary"
+            :environment="environment"
+          />
+        </FzContainer>
       </slot>
     </footer>
   </section>