@code-coaching/vuetiful 0.21.0 → 0.21.2

package/package.json

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

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

@@ -32,7 +32,7 @@ describe("VAlert", () => {
 
   describe("given close icon is clicked", () => {
     test("should emit close", async () => {
-      const wrapper = mount(VAlert);
+      const wrapper = mount(VAlert, { props: { showClose: true } });
       await wrapper.find("[data-test=close]").trigger("click");
       expect(wrapper.emitted()["close"][0]).toEqual([]);
 
@@ -53,7 +53,7 @@ describe("VAlert", () => {
       });
       expect(wrapper.text()).toContain("John Duck");
     });
-  })
+  });
 
   describe("given a actions slot is provided", () => {
     test("should render the actions slot", () => {
@@ -64,7 +64,7 @@ describe("VAlert", () => {
       });
       expect(wrapper.text()).toContain("John Duck");
     });
-  })
+  });
 
   describe("given hide-icon prop is present", () => {
     test("should not render an icon", () => {
@@ -73,18 +73,18 @@ describe("VAlert", () => {
           hideIcon: true,
         },
       });
-      expect(wrapper.findAll(".icon").length).toBe(1);
+      expect(wrapper.findAll(".icon").length).toBe(0);
     });
-  })
+  });
 
-  describe("given hide-close prop is present", () => {
-    test("should not render a close icon", () => {
+  describe("given show-close prop is present", () => {
+    test("should render a close icon", () => {
       const wrapper = mount(VAlert, {
         props: {
-          hideClose: true,
+          showClose: true,
         },
       });
-      expect(wrapper.find("[data-test=close]").exists()).toBe(false);
+      expect(wrapper.find("[data-test=close]").exists()).toBe(true);
     });
-  })
+  });
 });

package/src/components/molecules/VAlert.vue

@@ -7,7 +7,7 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  hideClose: {
+  showClose: {
     type: Boolean,
     default: false,
   },
@@ -111,7 +111,7 @@ const handleKeydown = (event: KeyboardEvent) => {
     <!-- https://fontawesome.com/icons/xmark?f=classic&s=solid -->
     <svg
       data-test="close"
-      v-if="!hideClose"
+      v-if="showClose"
       tabindex="0"
       @keydown="handleKeydown"
       @click="close"

package/src/services/dark-mode.service.ts

@@ -1,4 +1,4 @@
-import { readonly, Ref, ref } from "vue";
+import { computed, readonly, Ref, ref } from "vue";
 import { usePlatform } from "../utils/platform/platform.service";
 
 const { isBrowser } = usePlatform();
@@ -11,6 +11,7 @@ const MODE = {
 const modeOsPrefers = ref(MODE.DARK);
 const currentMode = ref(MODE.DARK);
 const modeUserPrefers: Ref<boolean | undefined> = ref(undefined);
+const isDark = computed(() => currentMode.value === MODE.DARK);
 
 const useDarkMode = () => {
   const getModeOsPrefers = (): boolean => {
@@ -78,6 +79,7 @@ const useDarkMode = () => {
     modeOsPrefers: readonly(modeOsPrefers),
     modeUserPrefers: readonly(modeUserPrefers),
     currentMode: readonly(currentMode),
+    isDark: readonly(isDark),
     getModeOsPrefers,
     getModeUserPrefers,
     getModeAutoPrefers,