@code-coaching/vuetiful 0.20.0 → 0.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code-coaching/vuetiful",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "license": "MIT",
   "scripts": {
     "dev": "onchange 'src/**/*.vue' 'src/**/*.ts' 'src/**/*.css' -- npm run build",

package/src/components/molecules/VCard/VCard.test.ts

@@ -0,0 +1,47 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, test } from "vitest";
+import { VCard } from "..";
+
+describe("VCard", () => {
+  test("defaults", async () => {
+    const wrapper = mount(VCard);
+    expect(wrapper.props()).toEqual({
+      background: "bg-surface-200-700-token",
+      clickable: false,
+      hideSeparator: false,
+      horizontal: false,
+      text: "text-surface-900-50-token",
+    });
+  });
+
+  describe("given the card is clicked", () => {
+    describe("given the card is not clickable", () => {
+      test("should not emit click", async () => {
+        const wrapper = mount(VCard, { props: { clickable: false } });
+        expect(wrapper.attributes()['tabindex']).toBeUndefined();
+        await wrapper.trigger("click");
+        expect(wrapper.emitted()["click"]).toBeUndefined();
+
+        await wrapper.trigger("keydown", { key: "Enter" });
+        expect(wrapper.emitted()["click"]).toBeUndefined();
+
+        await wrapper.trigger("keydown", { key: " " });
+        expect(wrapper.emitted()["click"]).toBeUndefined();
+      });
+    });
+    describe("given the card is clickable", () => {
+      test("should emit click", async () => {
+        const wrapper = mount(VCard, { props: { clickable: true } });
+        expect(wrapper.attributes()['tabindex']).toEqual("0");
+        await wrapper.trigger("click");
+        expect(wrapper.emitted()["click"].length).toEqual(1);
+
+        await wrapper.trigger("keydown", { key: "Enter" });
+        expect(wrapper.emitted()["click"].length).toEqual(2);
+
+        await wrapper.trigger("keydown", { key: " " });
+        expect(wrapper.emitted()["click"].length).toEqual(3);
+      });
+    });
+  });
+});

package/src/components/molecules/VCard/VCard.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { provide } from "vue";
+
+const emit = defineEmits(["click"]);
+
+const props = defineProps({
+  hideSeparator: {
+    type: Boolean,
+    default: false,
+  },
+  background: {
+    type: String,
+    default: "bg-surface-200-700-token",
+  },
+  text: {
+    type: String,
+    default: "text-surface-900-50-token",
+  },
+  horizontal: {
+    type: Boolean,
+    default: false,
+  },
+  clickable: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+provide("hideSeparator", props.hideSeparator);
+
+const onClick = () => {
+  if (!props.clickable) return;
+  emit("click");
+};
+const onKeydown = (event: KeyboardEvent) => {
+  if (!props.clickable) return;
+  if (event.key === "Enter") {
+    event.preventDefault();
+    emit("click");
+  }
+  if (event.key === " ") {
+    event.preventDefault();
+    emit("click");
+  }
+};
+</script>
+
+<template>
+  <div
+    @click="onClick"
+    @keydown="onKeydown"
+    :tabindex="clickable ? 0 : undefined"
+    :class="`vuetiful-card flex border-token rounded-container-token ring-outline-token ${
+      horizontal ? 'flex-row' : 'flex-col'
+    } ${background} ${text} ${clickable ? 'card-hover hover:cursor-pointer' : ''}`"
+  >
+    <slot />
+  </div>
+</template>
+
+<style>
+.vuetiful-card-header {
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+}
+
+.vuetiful-card-header > * {
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+}
+</style>

package/src/components/molecules/VCard/VCardBody.test.ts

@@ -0,0 +1,21 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, test } from "vitest";
+import { VCard, VCardBody } from "..";
+
+describe("VCardBody", () => {
+  test("defaults", async () => {
+    const wrapper = mount({
+      template: /*html*/ `
+        <v-card>
+          <v-card-body>John Duck</v-card-body>
+        </v-card>
+      `,
+      components: {
+        "v-card": VCard,
+        "v-card-body": VCardBody,
+      },
+    });
+
+    expect(wrapper.text()).toEqual("John Duck");
+  });
+});

package/src/components/molecules/VCard/VCardBody.vue

@@ -0,0 +1,5 @@
+<template>
+  <div data-test="vuetiful-card-body-content" class="vuetiful-card-body p-4">
+    <slot />
+  </div>
+</template>

package/src/components/molecules/VCard/VCardFooter.test.ts

@@ -0,0 +1,45 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, test } from "vitest";
+import { VCard, VCardFooter } from "..";
+
+describe("VCardFooter", () => {
+  test("defaults", async () => {
+    const wrapper = mount({
+      template: /*html*/ `
+        <v-card>
+          <v-card-footer>John Duck</v-card-footer>
+        </v-card>
+      `,
+      components: {
+        "v-card": VCard,
+        "v-card-footer": VCardFooter,
+      },
+    });
+
+    const separator = wrapper.find("[data-test='vuetiful-card-footer-separator']");
+    const content = wrapper.find("[data-test='vuetiful-card-footer-content']");
+    expect(separator.element.tagName).toEqual("HR");
+    expect(content.text()).toEqual("John Duck");
+  });
+
+  describe("given hideSeparator is true", () => {
+    test("should not show separator", async () => {
+      const wrapper = mount({
+        template: /*html*/ `
+          <v-card hide-separator>
+            <v-card-footer>John Duck</v-card-footer>
+          </v-card>
+        `,
+        components: {
+          "v-card": VCard,
+          "v-card-footer": VCardFooter,
+        },
+      });
+  
+      const separator = wrapper.find("[data-test='vuetiful-card-footer-separator']");
+      const content = wrapper.find("[data-test='vuetiful-card-footer-content']");
+      expect(separator.exists()).toEqual(false);
+      expect(content.text()).toEqual("John Duck"); 
+    })
+  })
+});

package/src/components/molecules/VCard/VCardFooter.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { inject } from "vue";
+const hideSeparator = inject("hideSeparator", false);
+</script>
+
+<template>
+  <hr v-if="!hideSeparator" data-test="vuetiful-card-footer-separator" class="opacity-90" />
+  <div data-test="vuetiful-card-footer-content" class="vuetiful-card-footer p-4">
+    <slot />
+  </div>
+</template>

package/src/components/molecules/VCard/VCardHeader.test.ts

@@ -0,0 +1,68 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, test } from "vitest";
+import { VCard, VCardHeader } from "..";
+
+describe("VCardHeader", () => {
+  test("defaults", async () => {
+    const wrapper = mount({
+      template: /*html*/ `
+        <v-card>
+          <v-card-header>John Duck</v-card-header>
+        </v-card>
+      `,
+      components: {
+        "v-card": VCard,
+        "v-card-header": VCardHeader,
+      },
+    });
+
+    const separator = wrapper.find("[data-test='vuetiful-card-header-separator']");
+    const content = wrapper.find("[data-test='vuetiful-card-header-content']");
+    expect(separator.element.tagName).toEqual("HR");
+    expect(content.text()).toEqual("John Duck");
+    expect(content.classes()).toContain("p-4");
+  });
+
+  describe("given hideSeparator is true", () => {
+    test("should not show separator", async () => {
+      const wrapper = mount({
+        template: /*html*/ `
+          <v-card hide-separator>
+            <v-card-header>John Duck</v-card-header>
+          </v-card>
+        `,
+        components: {
+          "v-card": VCard,
+          "v-card-header": VCardHeader,
+        },
+      });
+
+      const separator = wrapper.find("[data-test='vuetiful-card-header-separator']");
+      const content = wrapper.find("[data-test='vuetiful-card-header-content']");
+      expect(separator.exists()).toEqual(false);
+      expect(content.text()).toEqual("John Duck");
+    });
+  });
+
+  describe("given an image is present", () => {
+    test("should not have padding", async () => {
+      const wrapper = mount({
+        template: /*html*/ `
+        <v-card>
+          <v-card-header>
+            <img src="fakeUrl" />
+          </v-card-header>
+        </v-card>
+      `,
+        components: {
+          "v-card": VCard,
+          "v-card-header": VCardHeader,
+        },
+      });
+      await wrapper.vm.$nextTick();
+
+      const content = wrapper.find("[data-test='vuetiful-card-header-content']");
+      expect(content.classes()).not.toContain("p-4");
+    });
+  });
+});

package/src/components/molecules/VCard/VCardHeader.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { Ref, computed, inject, ref } from 'vue';
+
+const headerRef = ref() as Ref<HTMLDivElement>;
+
+const hasImageAsChild = computed(() => {
+  const children = headerRef.value?.children;
+  if (!children) return false;
+  const childrenArray = Array.from(children);
+  return childrenArray.some((child) => child.tagName === 'IMG');
+});
+
+const hideSeparator = inject('hideSeparator', false);
+</script>
+
+<template>
+  <div ref="headerRef" data-test='vuetiful-card-header-content' :class="`vuetiful-card-header ${hasImageAsChild ? '' : 'p-4'}`">
+    <slot />
+  </div>
+  <hr v-if="!hideSeparator" data-test='vuetiful-card-header-separator' class="opacity-90" />
+</template>
+
+<style>
+.vuetiful-card-header {
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+}
+
+.vuetiful-card-header > * {
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+}
+</style>

package/src/components/molecules/index.ts

@@ -19,10 +19,19 @@ import VAccordionItem from "./VAccordion/VAccordionItem.vue";
 
 import VAlert from "./VAlert.vue";
 
+import VCard from "./VCard/VCard.vue";
+import VCardBody from "./VCard/VCardBody.vue";
+import VCardFooter from "./VCard/VCardFooter.vue";
+import VCardHeader from "./VCard/VCardHeader.vue";
+
 export {
   VAccordion,
   VAccordionItem,
   VAlert,
+  VCard,
+  VCardBody,
+  VCardFooter,
+  VCardHeader,
   VDrawer,
   VListbox,
   VListboxButton,