@code-coaching/vuetiful 0.19.0 → 0.21.0

package/package.json

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

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

@@ -0,0 +1,90 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, test } from "vitest";
+import { VAlert } from "..";
+
+describe("VAlert", () => {
+  test("types", () => {
+    const wrapper = mount({
+      template: /*html*/ `
+          <v-alert data-test="default"></v-alert>
+          <v-alert data-test="info" type="info"></v-alert>
+          <v-alert data-test="success" type="success"></v-alert>
+          <v-alert data-test="warning" type="warning"></v-alert>
+          <v-alert data-test="error" type="error"></v-alert>
+        `,
+      components: {
+        "v-alert": VAlert,
+      },
+    });
+
+    const defaultAlert = wrapper.find("[data-test=default]");
+    expect(defaultAlert.classes()).toContain("variant-filled-primary");
+
+    const infoAlert = wrapper.find("[data-test=info]");
+    expect(infoAlert.classes()).toContain("variant-filled");
+
+    const successAlert = wrapper.find("[data-test=success]");
+    expect(successAlert.classes()).toContain("variant-filled-success");
+
+    const warningAlert = wrapper.find("[data-test=warning]");
+    expect(warningAlert.classes()).toContain("variant-filled-warning");
+  });
+
+  describe("given close icon is clicked", () => {
+    test("should emit close", async () => {
+      const wrapper = mount(VAlert);
+      await wrapper.find("[data-test=close]").trigger("click");
+      expect(wrapper.emitted()["close"][0]).toEqual([]);
+
+      await wrapper.find("[data-test=close]").trigger("keydown", { key: "Enter" });
+      expect(wrapper.emitted()["close"][0]).toEqual([]);
+
+      await wrapper.find("[data-test=close]").trigger("keydown", { key: " " });
+      expect(wrapper.emitted()["close"][0]).toEqual([]);
+    });
+  });
+
+  describe("given a pre slot is provided", () => {
+    test("should render the pre slot", () => {
+      const wrapper = mount(VAlert, {
+        slots: {
+          pre: "John Duck",
+        },
+      });
+      expect(wrapper.text()).toContain("John Duck");
+    });
+  })
+
+  describe("given a actions slot is provided", () => {
+    test("should render the actions slot", () => {
+      const wrapper = mount(VAlert, {
+        slots: {
+          actions: "John Duck",
+        },
+      });
+      expect(wrapper.text()).toContain("John Duck");
+    });
+  })
+
+  describe("given hide-icon prop is present", () => {
+    test("should not render an icon", () => {
+      const wrapper = mount(VAlert, {
+        props: {
+          hideIcon: true,
+        },
+      });
+      expect(wrapper.findAll(".icon").length).toBe(1);
+    });
+  })
+
+  describe("given hide-close prop is present", () => {
+    test("should not render a close icon", () => {
+      const wrapper = mount(VAlert, {
+        props: {
+          hideClose: true,
+        },
+      });
+      expect(wrapper.find("[data-test=close]").exists()).toBe(false);
+    });
+  })
+});

package/src/components/molecules/VAlert.vue

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import { PropType, computed } from "vue";
+
+const emit = defineEmits(["close"]);
+const props = defineProps({
+  hideIcon: {
+    type: Boolean,
+    default: false,
+  },
+  hideClose: {
+    type: Boolean,
+    default: false,
+  },
+
+  show: {
+    type: Boolean,
+    default: true,
+  },
+  type: {
+    type: String as PropType<"info" | "success" | "warning" | "error">,
+    default: "",
+  },
+});
+
+const typeBackground = computed(() => {
+  switch (props.type) {
+    case "info":
+      return "variant-filled";
+    case "success":
+      return "variant-filled-success";
+    case "warning":
+      return "variant-filled-warning";
+    case "error":
+      return "variant-filled-error";
+    default:
+      return "variant-filled-primary";
+  }
+});
+
+const close = () => emit("close");
+const handleKeydown = (event: KeyboardEvent) => {
+  if (event.key === "Enter" || event.key === " ") {
+    close();
+  }
+};
+</script>
+
+<template>
+  <aside
+    v-if="show"
+    :class="`vuetiful-alert flex w-full flex-row items-center gap-4 p-4 border-token rounded-container-token ${typeBackground}`"
+  >
+    <div v-if="!hideIcon">
+      <slot v-if="$slots.pre" name="pre" />
+      <template v-if="!$slots.pre">
+        <!-- https://fontawesome.com/icons/circle-info?f=classic&s=solid -->
+        <svg
+          v-if="type === 'info'"
+          class="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 512 512"
+        >
+          <path
+            d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"
+          />
+        </svg>
+
+        <!-- https://fontawesome.com/icons/circle-check?f=classic&s=solid -->
+        <svg
+          v-if="type === 'success'"
+          class="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 512 512"
+        >
+          <path
+            d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"
+          />
+        </svg>
+
+        <!-- https://fontawesome.com/icons/circle-exclamation?f=classic&s=solid -->
+        <svg
+          v-if="type === 'warning'"
+          class="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 512 512"
+        >
+          <path
+            d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"
+          />
+        </svg>
+
+        <!-- https://fontawesome.com/icons/triangle-exclamation?f=classic&s=solid -->
+        <svg
+          v-if="type === 'error'"
+          class="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 512 512"
+        >
+          <path
+            d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"
+          />
+        </svg>
+      </template>
+    </div>
+
+    <div class="vuetiful-alert-message flex-auto">
+      <slot />
+    </div>
+
+    <slot name="actions"> </slot>
+    <!-- https://fontawesome.com/icons/xmark?f=classic&s=solid -->
+    <svg
+      data-test="close"
+      v-if="!hideClose"
+      tabindex="0"
+      @keydown="handleKeydown"
+      @click="close"
+      class="icon hover:cursor-pointer"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 384 512"
+    >
+      <path
+        d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"
+      />
+    </svg>
+  </aside>
+</template>
+
+<style scoped>
+.icon {
+  @apply my-1 h-6 min-h-[1.5rem] w-6 min-w-[1.5rem] fill-current;
+}
+</style>

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/VListbox/VListbox.vue

@@ -101,7 +101,9 @@ const showText = computed(() => {
     v-model="parentModelValue"
   >
     <v-listbox-label v-if="labelText" :class="labelClasses">{{ labelText }}</v-listbox-label>
-    <v-listbox-button data-test="v-listbox-button">{{ showText }}</v-listbox-button>
+    <v-listbox-button data-test="v-listbox-button" :class="`${background} ${text}`">
+      {{ showText }}
+    </v-listbox-button>
     <!-- TODO: Add configurable transition -->
     <transition
       enter-active-class="transition duration-150 ease-in-out"

package/src/components/molecules/index.ts

@@ -17,9 +17,21 @@ import VTabs from "./VTabs/VTabs.vue";
 import VAccordion from "./VAccordion/VAccordion.vue";
 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,