@privyid/persona 1.2.0 → 1.2.1-rc.0

package/dist/components/popover/index.spec.mjs

@@ -1,130 +0,0 @@
-import { fireEvent, render } from "@testing-library/vue";
-import pPopover from "./Popover.vue";
-import { usePopoverPromise } from "./index.mjs";
-import { delay } from "nanodelay";
-import { vi } from "vitest";
-describe("usePopoverPromise", () => {
-  it("should open and wait the result", async () => {
-    const popoverPromise = usePopoverPromise();
-    const screen = render({
-      components: { pPopover },
-      template: `
-        <p-popover v-bind="popoverPromise.bind()">
-          <template #activator>
-            <a href="javascript:void" data-testid="ask">
-              Remove?
-            </a>
-          </template>
-          <template #default>
-            <div class="flex items-center space-x-2">
-              <span>Are you sure?</span>
-              <p-button data-testid="confirm" @click="popoverPromise.finish(true)">
-                Yes
-              </p-button>
-              <p-button data-testid="cancel" @click="popoverPromise.finish(false)">
-                Cancel
-              </p-button>
-            </div>
-          </template>
-        </p-popover>
-      `,
-      setup() {
-        return { popoverPromise };
-      }
-    });
-    const popover = screen.queryByTestId("popover");
-    const tooltip = screen.queryByTestId("popover-tooltip");
-    expect(popover).toBeInTheDocument();
-    expect(tooltip).not.toBeVisible();
-    const spy = vi.fn();
-    popoverPromise.start().then(spy);
-    await delay(1);
-    expect(tooltip).toBeVisible();
-    await fireEvent.click(screen.queryByTestId("confirm"));
-    expect(tooltip).not.toBeVisible();
-    expect(spy).toBeCalledWith(true);
-  });
-  it("should reject the promise if popoverPromise finished with an Error", async () => {
-    const popoverPromise = usePopoverPromise();
-    const screen = render({
-      components: { pPopover },
-      template: `
-        <p-popover v-bind="popoverPromise.bind()">
-          <template #activator>
-            <a href="javascript:void" data-testid="ask">
-              Remove?
-            </a>
-          </template>
-          <template #default>
-            <div class="flex items-center space-x-2">
-              <span>Are you sure?</span>
-              <p-button data-testid="confirm" @click="popoverPromise.finish(true)">
-                Yes
-              </p-button>
-              <p-button data-testid="cancel" @click="sendError">
-                Cancel
-              </p-button>
-            </div>
-          </template>
-        </p-popover>
-      `,
-      setup() {
-        function sendError() {
-          popoverPromise.finish(new Error("this is error"));
-        }
-        return { popoverPromise, sendError };
-      }
-    });
-    const popover = screen.queryByTestId("popover");
-    const tooltip = screen.queryByTestId("popover-tooltip");
-    expect(popover).toBeInTheDocument();
-    expect(tooltip).not.toBeVisible();
-    const promise = popoverPromise.start();
-    await delay(1);
-    expect(tooltip).toBeVisible();
-    await fireEvent.click(screen.queryByTestId("cancel"));
-    expect(tooltip).not.toBeVisible();
-    await expect(promise).toReject();
-  });
-  it("should return empty result if click outside", async () => {
-    const popoverPromise = usePopoverPromise();
-    const screen = render({
-      components: { pPopover },
-      template: `
-        <p-popover v-bind="popoverPromise.bind()">
-          <template #activator>
-            <a href="javascript:void" data-testid="ask">
-              Remove?
-            </a>
-          </template>
-          <template #default>
-            <div class="flex items-center space-x-2">
-              <span>Are you sure?</span>
-              <p-button data-testid="confirm" @click="popoverPromise.finish(true)">
-                Yes
-              </p-button>
-              <p-button data-testid="cancel" @click="popoverPromise.finish(false)">
-                Cancel
-              </p-button>
-            </div>
-          </template>
-        </p-popover>
-      `,
-      setup() {
-        return { popoverPromise };
-      }
-    });
-    const popover = screen.queryByTestId("popover");
-    const tooltip = screen.queryByTestId("popover-tooltip");
-    expect(popover).toBeInTheDocument();
-    expect(tooltip).not.toBeVisible();
-    const spy = vi.fn();
-    popoverPromise.start().then(spy);
-    await delay(1);
-    expect(tooltip).toBeVisible();
-    await fireEvent.click(window);
-    await delay(0);
-    expect(tooltip).not.toBeVisible();
-    expect(spy).toBeCalledWith(void 0);
-  });
-});

package/dist/components/popup/Popup.spec.d.ts

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

package/dist/components/popup/Popup.spec.mjs

@@ -1,164 +0,0 @@
-import { fireEvent, render } from "@testing-library/vue";
-import { vi } from "vitest";
-import { markRaw } from "vue-demi";
-import Popup from "./Popup.vue";
-import IconFailed from "@privyid/persona-icon/vue/trash/24.vue";
-import { SVGElement } from "happy-dom";
-it("should render title and text properly", () => {
-  const screen = render({
-    components: { Popup },
-    template: `
-      <Popup
-        title="This is title"
-        text="this is text body" />
-    `
-  });
-  const popup = screen.queryByTestId("popup");
-  const title = screen.queryByText("This is title");
-  const text = screen.queryByText("this is text body");
-  expect(popup).toBeInTheDocument();
-  expect(popup).toHaveClass("popup", "popup--info", "popup--simple");
-  expect(title).toBeInTheDocument();
-  expect(text).toBeInTheDocument();
-});
-it('should have class "success" if type prop set to "success"', () => {
-  const screen = render({
-    components: { Popup },
-    template: `
-      <Popup
-        type="success"
-        title="This is title"
-        text="this is text body" />
-    `
-  });
-  const popup = screen.queryByTestId("popup");
-  expect(popup).toBeInTheDocument();
-  expect(popup).toHaveClass("popup", "popup--success", "popup--simple");
-  expect(popup).not.toHaveClass("popup--info");
-});
-it('should have class "filled" if variant prop set to "filled"', () => {
-  const screen = render({
-    components: { Popup },
-    template: `
-      <Popup
-        variant="filled"
-        title="This is title"
-        text="this is text body" />
-    `
-  });
-  const popup = screen.queryByTestId("popup");
-  expect(popup).toBeInTheDocument();
-  expect(popup).toHaveClass("popup", "popup--info", "popup--filled");
-  expect(popup).not.toHaveClass("popup--simple");
-});
-it("should dismiss if close button clicked", async () => {
-  const spy = vi.fn();
-  const screen = render({
-    components: { Popup },
-    template: `
-      <Popup
-        title="This is title"
-        text="this is text body"
-        @dismissed="onDismissed" />
-    `,
-    methods: { onDismissed: spy }
-  });
-  const popup = screen.queryByTestId("popup");
-  const close = screen.queryByTestId("popup-close");
-  expect(popup).toBeInTheDocument();
-  expect(close).toBeInTheDocument();
-  expect(spy).not.toBeCalled();
-  await fireEvent.click(close);
-  expect(spy).toBeCalled();
-});
-it("should render title and text properly", () => {
-  const screen = render({
-    components: { Popup },
-    template: `
-      <Popup
-        title="Popup title" />
-    `
-  });
-  const popup = screen.queryByTestId("popup");
-  const title = screen.queryByText("Popup title");
-  const text = screen.queryByTestId("popup-text");
-  expect(popup).toBeInTheDocument();
-  expect(title).toBeInTheDocument();
-  expect(text).not.toBeInTheDocument();
-});
-it("should be able to custom icon color via `iconColor` props", () => {
-  const screen = render({
-    components: { Popup },
-    template: `
-      <Popup
-        title="Popup title"
-        icon-color="warning" />
-    `
-  });
-  const popup = screen.queryByTestId("popup");
-  const title = screen.queryByText("Popup title");
-  const icon = screen.queryByTestId("popup-icon");
-  expect(popup).toBeInTheDocument();
-  expect(title).toBeInTheDocument();
-  expect(icon).toHaveClass("popup__icon--warning");
-});
-it("should be able to custom icon using url", () => {
-  const screen = render({
-    components: { Popup },
-    template: `
-      <Popup
-        title="Popup title"
-        icon="http://lorem-picsum.com" />
-    `
-  });
-  const popup = screen.queryByTestId("popup");
-  const icon = screen.queryByTestId("popup-icon-image");
-  expect(popup).toBeInTheDocument();
-  expect(icon).toBeInTheDocument();
-  expect(icon).toBeInstanceOf(HTMLImageElement);
-  expect(icon).toHaveAttribute("src", "http://lorem-picsum.com");
-});
-it("should be able to custom icon using component", () => {
-  const screen = render({
-    components: { Popup },
-    template: `
-      <Popup
-        title="Popup title"
-        :icon="icon" />
-    `,
-    setup() {
-      return { icon: markRaw(IconFailed) };
-    }
-  });
-  const popup = screen.queryByTestId("popup");
-  const icon = screen.queryByTestId("popup-icon").firstChild;
-  expect(popup).toBeInTheDocument();
-  expect(icon).toBeInTheDocument();
-  expect(icon).toBeInstanceOf(SVGElement);
-  expect(icon).toHaveClass("persona-icon");
-});
-it("should able to add action button", async () => {
-  const onClick = vi.fn();
-  const screen = render({
-    components: { Popup },
-    template: `
-      <Popup
-        title="Popup title"
-        :actions="actions" />
-    `,
-    setup() {
-      return {
-        actions: [
-          {
-            text: "View Doc",
-            onClick
-          }
-        ]
-      };
-    }
-  });
-  const action = screen.queryByText("View Doc");
-  expect(action).toBeInTheDocument();
-  await fireEvent.click(action);
-  expect(onClick).toBeCalled();
-});

package/dist/components/popup/Popup.vue

@@ -1,400 +0,0 @@
-<template>
-  <div
-    data-testid="popup"
-    :class="[classNames, popupClass]"
-    v-bind="popupAttrs">
-    <div
-      class="popup__icon"
-      data-testid="popup-icon"
-      :class="classIcon">
-      <component
-        :is="toastIcon"
-        v-if="toastIcon" />
-    </div>
-    <div class="popup__body">
-      <div
-        v-if="title"
-        v-p-md.inline="title"
-        class="popup__title" />
-      <div
-        v-if="text"
-        v-p-md.inline="text"
-        class="popup__text"
-        data-testid="popup-text" />
-      <div
-        v-if="actions.length > 0"
-        class="popup__actions">
-        <template
-          v-for="(action, i) in actions"
-          :key="i">
-          <a
-            v-p-md.inline="action.text"
-            data-testid="popup-action"
-            href="javascript:void"
-            class="popup__action"
-            v-bind="action.attrs"
-            @click.prevent="onActionClick(action)" />
-        </template>
-      </div>
-    </div>
-    <div
-      v-if="dismissable"
-      data-testid="popup-close"
-      class="popup__close"
-      @click="close">
-      <IconClose />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import {
-  computed,
-  h
-} from "vue-demi";
-import IconClose from "@privyid/persona-icon/vue/close/16.vue";
-import { vPMd } from "../markdown";
-import { useNotifyItem } from "../notify";
-import { PopupIcons } from ".";
-const props = defineProps({
-  title: {
-    type: String,
-    default: ""
-  },
-  text: {
-    type: String,
-    default: ""
-  },
-  type: {
-    type: String,
-    default: "info"
-  },
-  variant: {
-    type: String,
-    default: "simple"
-  },
-  icon: {
-    type: [
-      String,
-      Object,
-      Function
-    ],
-    default: void 0
-  },
-  iconColor: {
-    type: String,
-    default: void 0
-  },
-  popupAttrs: {
-    type: Object,
-    default: void 0
-  },
-  popupClass: {
-    type: [
-      String,
-      Array,
-      Object
-    ],
-    default: void 0
-  },
-  actions: {
-    type: Array,
-    default: () => []
-  },
-  dismissable: {
-    type: Boolean,
-    default: true
-  }
-});
-const notify = useNotifyItem();
-const emit = defineEmits(["dismissed"]);
-const classNames = computed(() => {
-  const result = ["popup"];
-  if (props.type)
-    result.push(`popup--${props.type}`);
-  if (props.variant)
-    result.push(`popup--${props.variant}`);
-  return result;
-});
-const classIcon = computed(() => {
-  const result = ["default"];
-  if (props.iconColor)
-    result.push(`popup__icon--${props.iconColor}`);
-  return result;
-});
-const toastIcon = computed(() => {
-  if (!props.icon)
-    return PopupIcons[props.type];
-  if (typeof props.icon === "string") {
-    return () => h("img", {
-      "src": props.icon,
-      "width": 20,
-      "height": 20,
-      "data-testid": "popup-icon-image"
-    });
-  }
-  return props.icon;
-});
-function close() {
-  notify.close();
-  emit("dismissed");
-}
-async function onActionClick(action) {
-  const event = new MouseEvent("click");
-  if (typeof action.onClick === "function")
-    await action.onClick(Object.assign(event, { close }));
-  if (!event.defaultPrevented)
-    close();
-}
-</script>
-
-<style lang="postcss">
-.popup {
-  --p-popup-icon-color-primary: theme(textColor.brand.accent.DEFAULT);
-  --p-popup-icon-color-primary-dark: theme(textColor.dark.brand.accent.DEFAULT);
-
-  /**
-  * global style
-  * of popup
-  */
-  @apply flex shadow-xl rounded w-72 md:w-96 overflow-hidden;
-
-  .popup__icon,
-  .popup__close {
-    @apply shrink-0 p-4;
-  }
-
-  .popup__icon {
-    @apply flex items-center justify-center;
-  }
-
-  .popup__close {
-    @apply cursor-pointer text-muted hover:text-default;
-    @apply dark:text-dark-muted dark:hover:text-dark-default;
-  }
-
-  .popup__body {
-    @apply py-4 grow space-y-2 flex flex-col overflow-hidden justify-center;
-  }
-
-  .popup__title {
-    @apply text-sm font-medium leading-[1.75] truncate;
-  }
-
-  .popup__text {
-    @apply text-xs line-clamp-2;
-  }
-
-  .popup__actions {
-    @apply space-x-2;
-  }
-
-  .popup__action {
-    @apply text-xs truncate hover:underline;
-  }
-
-  /**
-  * Give padding-left when
-  * popup variant is not filled
-  */
-  &:not(.popup--filled) {
-    .popup__body {
-      @apply pl-4;
-    }
-  }
-
-  /**
-  * set popup info title
-  * and text color
-  */
-  &:is(.popup--info) {
-    .popup__title {
-      @apply text-default;
-      @apply dark:text-dark-default;
-    }
-
-    .popup__text {
-      @apply text-subtle;
-      @apply dark:text-dark-subtle;
-    }
-  }
-
-  /**
-  * set popup info icon color.
-  * provide background when
-  * variant is filled
-  */
-  &&--info {
-    &:is(.popup--simple) {
-      .popup__icon {
-        @apply bg-ground text-info;
-        @apply dark:bg-dark-ground dark:text-dark-info;
-
-        &--default {
-          @apply text-default;
-          @apply dark:text-dark-default;
-        }
-
-        &--warning {
-          @apply text-warning;
-          @apply dark:text-dark-warning;
-        }
-
-        &--success {
-          @apply text-success;
-          @apply dark:text-dark-success;
-        }
-
-        &--primary {
-          @apply text-[color:var(--p-toast-icon-color-primary)];
-          @apply dark:text-[color:var(--p-toast-icon-color-primary-dark)];
-        }
-
-        &--danger {
-          @apply text-danger;
-          @apply dark:text-danger;
-        }
-      }
-      .popup__title {
-        @apply text-default;
-        @apply dark:text-dark-default;
-      }
-    }
-    &.popup--filled {
-      @apply bg-ground text-info;
-      @apply dark:bg-dark-ground dark:text-dark-info;
-    }
-  }
-
-  /**
-  * provide title color
-  * in simple variant.
-  * set popup icon color and background.
-  * provide background color when
-  * variant is filled
-  */
-  &&--error {
-    &.popup--simple {
-      .popup__title {
-        @apply text-danger;
-        @apply dark:text-dark-danger;
-      }
-    }
-
-    .popup__icon,
-    &.popup--filled {
-      @apply bg-danger-emphasis;
-      @apply dark:bg-dark-danger-emphasis;
-    }
-  }
-
-  &&--success {
-    &.popup--simple {
-      .popup__title {
-        @apply text-success;
-        @apply dark:text-dark-success;
-      }
-    }
-
-    .popup__icon,
-    &.popup--filled {
-      @apply bg-success-emphasis;
-      @apply dark:bg-dark-success-emphasis;
-    }
-  }
-
-  &&--warning {
-    &.popup--simple {
-      .popup__title {
-        @apply text-warning;
-        @apply dark:text-dark-warning;
-      }
-    }
-
-    .popup__icon,
-    &.popup--filled {
-      @apply bg-warning-emphasis;
-      @apply dark:bg-dark-warning-emphasis;
-    }
-  }
-
-  /**
-  * set global style
-  * of popup in simple
-  * variant
-  */
-  &&--simple {
-    @apply bg-default;
-    @apply dark:bg-dark-default;
-
-    .popup__text {
-      @apply text-subtle;
-      @apply dark:text-dark-subtle;
-    }
-
-    &:not(.popup--info) {
-      .popup__icon {
-        @apply text-state-emphasis;
-        @apply dark:text-dark-state-emphasis;
-      }
-    }
-
-    .popup__action {
-      @apply text-info;
-      @apply dark:text-dark-info;
-    }
-  }
-
-  /**
-  * aligning popup icon
-  * when variant is filled.
-  * provide text color
-  * when popup color isn't info
-  */
-  &&--filled {
-    .popup__icon {
-      @apply items-start;
-
-      > svg {
-        @apply h-[24.56px];
-      }
-
-      &--default {
-        @apply text-on-emphasis;
-        @apply dark:text-dark-on-emphasis;
-      }
-
-      &--warning {
-        @apply text-warning;
-        @apply dark:text-dark-warning;
-      }
-
-      &--success {
-        @apply text-success;
-        @apply dark:text-dark-success;
-      }
-
-      &--primary {
-        @apply text-[color:var(--p-popup-icon-color-primary)];
-        @apply dark:text-[color:var(--p-popup-icon-color-primary-dark)];
-      }
-
-      &--danger {
-        @apply text-danger;
-        @apply dark:text-danger;
-      }
-    }
-
-    &:not(.popup--info),
-    &:not(.popup--info) .popup__action {
-      @apply text-state-emphasis;
-      @apply dark:text-dark-state-emphasis;
-    }
-
-    &:not(.popup--info) .popup__close {
-      @apply text-on-emphasis/70 hover:text-on-emphasis;
-      @apply dark:text-dark-on-emphasis/70 dark:hover:text-dark-on-emphasis;
-    }
-  }
-}
-</style>