@privyid/persona 1.1.2 → 1.2.0

package/dist/components/banner/index.md

@@ -0,0 +1,279 @@
+---
+title: Banner · Components
+description: Alert to convey information or actions
+---
+
+<script setup>
+  import pBanner from './Banner.vue'
+  import pButton from '../button/Button.vue'
+  import pCaption from '../caption/Caption.vue'
+  import pSubheading from '../subheading/Subheading.vue'
+  import IconCheck from '@privyid/persona-icon/vue/checkmark-circle-solid/20.vue'
+  import { withBase } from 'vitepress'
+
+  const IMG_BG = withBase('/assets/images/img-banner-bg.svg')
+</script>
+
+# Banner
+
+> Alert to convey information or actions
+
+## Usage
+
+### Simple usage
+
+<preview class="flex-col">
+  <p-banner>
+    Every sign will requires privy balance.
+    Please make sure you have enough privy balance
+    before sign the document(s)
+  </p-banner>
+</preview>
+
+```vue
+<template>
+  <p-banner>
+    Every sign will requires privy balance.
+    Please make sure you have enough privy balance
+    before sign the document(s)
+  </p-banner>
+</template>
+```
+
+### With title
+
+<preview class="flex-col">
+  <p-banner>
+    <p-subheading>
+      Your enterprise Privy Balance is running out.
+    </p-subheading>
+    <div class="text-sm">
+      Every sign will requires privy balance. Please make sure you have enough privy balance before sign the document(s)
+    </div>
+  </p-banner>
+</preview>
+
+```vue
+<template>
+  <p-banner>
+    <p-subheading>
+      Your enterprise Privy Balance is running out.
+    </p-subheading>
+    <div class="text-sm">
+      Every sign will requires privy balance. Please make sure you have enough privy balance before sign the document(s)
+    </div>
+  </p-banner>
+</template>
+```
+
+### With title and button
+
+<preview class="flex-col">
+  <p-banner>
+    <p-subheading>
+      Your enterprise Privy Balance is running out.
+    </p-subheading>
+    <div class="text-sm">
+      Every sign will requires privy balance.
+      Please make sure you have enough privy balance
+      before sign the document(s)
+    </div>
+    <div class="mt-3">
+      <p-button variant="outline" size="sm">Top Up Balance</p-button>
+      <p-button variant="link">Learn More</p-button>
+    </div>
+  </p-banner>
+</preview>
+
+```vue
+<template>
+  <p-banner>
+    <p-subheading>
+      Your enterprise Privy Balance is running out.
+    </p-subheading>
+    <div class="text-sm">
+      Every sign will requires privy balance.
+      Please make sure you have enough privy balance
+      before sign the document(s)
+    </div>
+    <div class="mt-3">
+      <p-button variant="outline" size="sm">Top Up Balance</p-button>
+      <p-button variant="link">Learn More</p-button>
+    </div>
+  </p-banner>
+</template>
+```
+
+### Custom Icon
+
+<preview class="flex-col">
+  <p-banner>
+    <template #icon>
+      <IconCheck class="text-success" />
+    </template>
+    <span>
+      Great! Your Privy ID and NPWP are verified.
+    </span>
+  </p-banner>
+</preview>
+
+```vue
+<template>
+  <p-banner>
+    <template #icon>
+      <IconCheck class="text-success" />
+    </template>
+    <span>
+      Great! Your Privy ID and NPWP are verified.
+    </span>
+  </p-banner>
+
+  <script setup>
+  import IconCheck from '@privyid/persona-icon/vue/checkmark-circle-solid/20.vue'
+  </script>
+</template>
+```
+
+## Variants
+
+Banner have 3 variants: `info`, `warning` and `danger`, default is `info`
+
+<preview class="flex-col space-y-3">
+  <p-banner variant="info">
+    Every sign will requires privy balance.
+    Please make sure you have enough privy balance
+    before sign the document(s)
+  </p-banner>
+  <p-banner variant="warning">
+    Every sign will requires privy balance.
+    Please make sure you have enough privy balance
+    before sign the document(s)
+  </p-banner>
+  <p-banner variant="danger">
+    Every sign will requires privy balance.
+    Please make sure you have enough privy balance
+    before sign the document(s)
+  </p-banner>
+</preview>
+
+```vue
+<template>
+  <p-banner variant="info">
+    Every sign will requires privy balance.
+    Please make sure you have enough privy balance
+    before sign the document(s)
+  </p-banner>
+  <p-banner variant="warning">
+    Every sign will requires privy balance.
+    Please make sure you have enough privy balance
+    before sign the document(s)
+  </p-banner>
+  <p-banner variant="danger">
+    Every sign will requires privy balance.
+    Please make sure you have enough privy balance
+    before sign the document(s)
+  </p-banner>
+</template>
+```
+
+## Hide close button
+
+You can hide close button with `dismissable` set to `false`
+
+<preview class="flex-col">
+  <p-banner :dismissable="false">
+    Every sign will requires privy balance.
+    Please make sure you have enough privy balance
+    before sign the document(s)
+  </p-banner>
+</preview>
+
+```vue
+<template>
+  <p-banner :dismissable="false">
+    Every sign will requires privy balance.
+    Please make sure you have enough privy balance
+    before sign the document(s)
+  </p-banner>
+</template>
+```
+
+## No Icon
+<preview class="flex-col">
+  <p-banner variant="danger" :dismissable="false" noIcon>
+    <p-subheading>
+      Your e-Meterai balance is sufficient only for 2 placements
+    </p-subheading>
+    <span>
+      You can continue with 2 e-Meterai or contact admin to top up then retry the process
+    </span>
+  </p-banner>
+</preview>
+
+```vue
+<template>
+  <p-banner variant="danger" :dismissable="false" noIcon>
+    <p-subheading>
+      Your e-Meterai balance is sufficient only for 2 placements
+    </p-subheading>
+    <span>
+      You can continue with 2 e-Meterai or contact admin to top up then retry the process
+    </span>
+  </p-banner>
+</template>
+```
+
+## Custom background image
+
+<preview class="flex-col">
+  <p-banner :dismissable="false" noIcon :background-url="IMG_BG">
+    <span class="text-default dark:text-dark-default">Buy and activate your Personal plan in <strong>Privy mobile app</strong></span>
+  </p-banner>
+</preview>
+
+```vue
+<template>
+  <p-banner
+    :dismissable="false"
+    noIcon
+    background-url="../assets/images/img-banner-bg.svg">
+    <span class="text-default dark:text-dark-default">
+      Buy and activate your Personal plan in
+      <strong>Privy mobile app</strong>
+    </span>
+  </p-banner>
+</template>
+```
+
+## Variables
+Banner use local CSS variables on `.banner` for enhanced real-time customization.
+
+```sass
+--p-banner-padding-x: theme(spacing.4);
+--p-banner-padding-y: theme(spacing.4);
+```
+
+## API
+
+### Props
+
+| Props               |   Type    | Default | Description                                     |
+|---------------------|:---------:|:-------:|-------------------------------------------------|
+| `variant`           | `String`  | `info`  | Banner variant, valid value is `info`, `warning` & `danger` |
+| `dismissable`       | `Boolean` | `true`  | Show / Hide dismiss button                      |
+| `backgroundUrl`     | `String`  |    -    | Custom background image of banner               |
+| `backgroundDarkUrl` | `String`  |    -    | Custom background image of banner in Dark Mode  |
+| `backgroundOverlay` | `Boolean` | `false` | Activate background overlay of banner           |
+
+### Slots
+
+| Name      | Description                     |
+|-----------|---------------------------------|
+| `default` | Content to place in banner      |
+| `icon`    | Content to place icon in banner |
+
+### Events
+
+| Name        | Arguments | Description                     |
+|-------------|-----------|---------------------------------|
+| `dismissed` | -         | Event when close button clicked |

package/dist/components/breadcrumbs/Breadcrumb.spec.d.ts

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

package/dist/components/breadcrumbs/Breadcrumb.spec.mjs

@@ -0,0 +1,65 @@
+import { render } from "@testing-library/vue";
+import Breadcrumb from "./Breadcrumb.vue";
+import { defineNavigation } from "./index.mjs";
+const items = defineNavigation([
+  {
+    text: "Dashboard",
+    href: "#"
+  },
+  {
+    text: "Setting",
+    href: "#",
+    subitem: [
+      {
+        text: "User",
+        href: "#"
+      }
+    ]
+  }
+]);
+it("should render properly without any props", () => {
+  const screen = render({
+    components: { Breadcrumb },
+    template: `
+      <Breadcrumb />
+    `
+  });
+  const breadcrumbs = screen.queryByTestId("breadcrumbs");
+  expect(breadcrumbs).toBeInTheDocument();
+  expect(breadcrumbs).toHaveClass("breadcrumbs");
+});
+it("should be able to render navigation", () => {
+  const screen = render({
+    components: { Breadcrumb },
+    template: `
+      <Breadcrumb :items="items" />
+    `,
+    setup() {
+      return { items };
+    }
+  });
+  const breadcrumbs = screen.queryByTestId("breadcrumbs");
+  const text = screen.getAllByText("Dashboard");
+  const dropdown = screen.getByTestId("breadcrumbs-dropdown");
+  expect(breadcrumbs).toBeInTheDocument();
+  expect(breadcrumbs).toContainElement(dropdown);
+  expect(text).toHaveLength(1);
+});
+it("should be able to custom divider via slot `divider`", () => {
+  const screen = render({
+    components: { Breadcrumb },
+    template: `
+    <Breadcrumb :items="items">
+      <template #divider>Custom divider</template>
+    </Breadcrumb>
+    `,
+    setup() {
+      return { items };
+    }
+  });
+  const breadcrumbs = screen.queryByTestId("breadcrumbs");
+  const dividers = screen.queryAllByTestId("breadcrumbs-divider");
+  expect(breadcrumbs).toBeInTheDocument();
+  expect(dividers.length).toBe(2);
+  expect(dividers.at(0).textContent).toEqual("Custom divider");
+});

package/dist/components/breadcrumbs/Breadcrumb.vue

@@ -32,27 +32,20 @@
   </ul>
 </template>
 
-<script lang="ts" setup>
-import type { VNode } from 'vue-demi'
-import { provide } from 'vue-demi'
-import type { BreadcrumbItems } from '.'
-import BreadcrumbItem from './BreadcrumbItem.vue'
-import BreadcrumbItemDropdown from './BreadcrumbItemDropdown.vue'
-import DropdownItem from '../dropdown/DropdownItem.vue'
-
+<script setup>
+import { provide } from "vue-demi";
+import BreadcrumbItem from "./BreadcrumbItem.vue";
+import BreadcrumbItemDropdown from "./BreadcrumbItemDropdown.vue";
+import DropdownItem from "../dropdown/DropdownItem.vue";
 defineProps({
   items: {
-    type   : Array<BreadcrumbItems>,
-    default: () => ([]),
-  },
-})
-
-const slots = defineSlots<{
-  'divider'(): VNode[],
-}>()
-
+    type: Array,
+    default: () => []
+  }
+});
+const slots = defineSlots();
 if (slots.divider)
-  provide('divider', slots.divider)
+  provide("divider", slots.divider);
 </script>
 
 <style lang="postcss">

package/dist/components/breadcrumbs/Breadcrumb.vue.d.ts

@@ -0,0 +1,59 @@
+import type { VNode } from 'vue-demi';
+import type { BreadcrumbItems } from '.';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        divider(): VNode[];
+    }> & {
+        divider(): VNode[];
+    };
+    refs: {};
+    rootEl: HTMLUListElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
+    items: {
+        type: {
+            (arrayLength: number): BreadcrumbItems[];
+            (...items: BreadcrumbItems[]): BreadcrumbItems[];
+            new (arrayLength: number): BreadcrumbItems[];
+            new (...items: BreadcrumbItems[]): BreadcrumbItems[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
+            from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            of<T>(...items: T[]): T[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        default: () => never[];
+    };
+}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    items: {
+        type: {
+            (arrayLength: number): BreadcrumbItems[];
+            (...items: BreadcrumbItems[]): BreadcrumbItems[];
+            new (arrayLength: number): BreadcrumbItems[];
+            new (...items: BreadcrumbItems[]): BreadcrumbItems[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
+            from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            of<T>(...items: T[]): T[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        default: () => never[];
+    };
+}>> & Readonly<{}>, {
+    items: BreadcrumbItems[];
+}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/breadcrumbs/BreadcrumbItem.spec.d.ts

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

package/dist/components/breadcrumbs/BreadcrumbItem.spec.mjs

@@ -0,0 +1,44 @@
+import { render } from "@testing-library/vue";
+import BreadcrumbItem from "./BreadcrumbItem.vue";
+it("should rendered properly without any props", () => {
+  const screen = render({
+    components: { BreadcrumbItem },
+    template: `
+      <BreadcrumbItem />
+    `
+  });
+  const breadcrumbItem = screen.getByTestId("breadcrumbs-item");
+  const breadcrumbDivider = screen.queryByTestId("breadcrumbs-divider");
+  expect(breadcrumbItem).toBeInTheDocument();
+  expect(breadcrumbItem).toHaveClass("breadcrumbs__item");
+  expect(breadcrumbDivider).toBeInTheDocument();
+});
+it("should be able to set active via prop `active`", () => {
+  const screen = render({
+    components: { BreadcrumbItem },
+    template: `
+      <BreadcrumbItem active />
+    `
+  });
+  const breadcrumbItem = screen.getByTestId("breadcrumbs-item");
+  const dropdownDivider = screen.queryByTestId("dropdown-divider");
+  expect(breadcrumbItem).toHaveClass("breadcrumbs__item--active");
+  expect(breadcrumbItem).toContainHTML('<span class="" />');
+  expect(breadcrumbItem).not.toContainHTML("<a />");
+  expect(dropdownDivider).not.toBeInTheDocument();
+});
+it("should be able to set url permalink via prop `href`", () => {
+  const screen = render({
+    components: { BreadcrumbItem },
+    template: `
+      <BreadcrumbItem href="/home">
+        Home
+      </BreadcrumbItem>
+    `
+  });
+  const breadcrumbItem = screen.getByTestId("breadcrumbs-item");
+  const text = screen.queryByText("Home");
+  expect(breadcrumbItem).toContainHTML("a");
+  expect(breadcrumbItem).not.toContainHTML("<span />");
+  expect(text).toBeInTheDocument();
+});

package/dist/components/breadcrumbs/BreadcrumbItem.vue

@@ -6,7 +6,7 @@
     <component
       :is="tagName"
       :href="permalink"
-      :class="{ 'breadcrumbs__item__link' : permalink }">
+      :class="{ 'breadcrumbs__item__link': permalink }">
       <slot />
     </component>
     <div
@@ -18,51 +18,39 @@
   </li>
 </template>
 
-<script lang="ts" setup>
-import type { PropType } from 'vue-demi'
+<script setup>
 import {
   computed,
   inject,
   h,
-  resolveComponent,
-} from 'vue-demi'
-import IconChevron from '@privyid/persona-icon/vue/chevron-right/20.vue'
-import type { RouteLocationRaw } from 'vue-router'
-
+  resolveComponent
+} from "vue-demi";
+import IconChevron from "@privyid/persona-icon/vue/chevron-right/20.vue";
 const props = defineProps({
   href: {
-    type   : [String, Object] as PropType<RouteLocationRaw>,
-    default: '#' as RouteLocationRaw,
+    type: [String, Object],
+    default: "#"
   },
   active: {
-    type   : Boolean,
-    default: false,
-  },
-})
-
+    type: Boolean,
+    default: false
+  }
+});
 const classNames = computed(() => {
-  const result: string[] = ['']
-
+  const result = [""];
   if (props.active)
-    result.push('breadcrumbs__item--active')
-
-  return result
-})
-
+    result.push("breadcrumbs__item--active");
+  return result;
+});
 const tagName = computed(() => {
-  return props.active
-    ? 'span'
-    : resolveComponent('nuxt-link')
-})
-
+  return props.active ? "span" : resolveComponent("nuxt-link");
+});
 const permalink = computed(() => {
   if (props.active)
-    return
-
-  return props.href
-})
-
-const divider = inject('divider', () => h(IconChevron))
+    return;
+  return props.href;
+});
+const divider = inject("divider", () => h(IconChevron));
 </script>
 
 <style lang="postcss">

package/dist/components/breadcrumbs/BreadcrumbItem.vue.d.ts

@@ -0,0 +1,40 @@
+import type { PropType } from 'vue-demi';
+import type { RouteLocationRaw } from 'vue-router';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLLIElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
+    href: {
+        type: PropType<RouteLocationRaw>;
+        default: RouteLocationRaw;
+    };
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    href: {
+        type: PropType<RouteLocationRaw>;
+        default: RouteLocationRaw;
+    };
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    href: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;
+    active: boolean;
+}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/breadcrumbs/BreadcrumbItemDropdown.spec.d.ts

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

package/dist/components/breadcrumbs/BreadcrumbItemDropdown.spec.mjs

@@ -0,0 +1,36 @@
+import { render } from "@testing-library/vue";
+import BreadcrumbItemDropdown from "./BreadcrumbItemDropdown.vue";
+it("should rendered properly without any props", () => {
+  const screen = render({
+    components: { BreadcrumbItemDropdown },
+    template: `
+      <BreadcrumbItemDropdown />
+    `
+  });
+  const breadcrumbDropdown = screen.queryByTestId("breadcrumbs-dropdown");
+  const breadcrumbDivider = screen.queryByTestId("breadcrumbs-divider");
+  expect(breadcrumbDropdown).toBeInTheDocument();
+  expect(breadcrumbDropdown).toHaveClass("breadcrumbs__item--dropdown");
+  expect(breadcrumbDivider).toBeInTheDocument();
+});
+it("should be able to set active via prop `active`", () => {
+  const screen = render({
+    components: { BreadcrumbItemDropdown },
+    template: `
+      <BreadcrumbItemDropdown active />
+    `
+  });
+  const breadcrumbDropdown = screen.queryByTestId("breadcrumbs-dropdown");
+  expect(breadcrumbDropdown).toBeInTheDocument();
+  expect(breadcrumbDropdown).toHaveClass("breadcrumbs__item--active");
+});
+it("should be able to set dropdown activator via prop `text`", () => {
+  const screen = render({
+    components: { BreadcrumbItemDropdown },
+    template: `
+      <BreadcrumbItemDropdown text="Document" />
+    `
+  });
+  const breadcrumbDropdown = screen.queryByTestId("breadcrumbs-dropdown");
+  expect(breadcrumbDropdown).toHaveTextContent("Document");
+});