@privyid/persona 1.1.2 → 1.2.0

package/dist/components/badge/Badge.vue.d.ts

@@ -0,0 +1,41 @@
+import type { PropType } from 'vue-demi';
+import type { StyleVariant } from '.';
+import type { ColorVariant } from '../button';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLSpanElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
+    color: {
+        type: PropType<ColorVariant>;
+        default: string;
+    };
+    variant: {
+        type: PropType<StyleVariant>;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    color: {
+        type: PropType<ColorVariant>;
+        default: string;
+    };
+    variant: {
+        type: PropType<StyleVariant>;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    variant: StyleVariant;
+    color: ColorVariant;
+}, {}, {}, {}, 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/badge/index.md

@@ -0,0 +1,202 @@
+---
+title: Badge · Components
+description: Label of the thing they're quantifying, such as the number of notification/document received.
+---
+
+<script setup>
+  import pBadge from './Badge.vue'
+  import pBanner from '../banner/Banner.vue'
+  import Icon from '@privyid/persona-icon/vue/persona/16.vue'
+  import IconEmaterai from '@privyid/persona-icon/vue/signature/16.vue'
+</script>
+
+# Badge
+
+> Label of the thing they're quantifying, such as the number of notification/document received.
+
+## Usage
+
+### Basic Usage
+
+Default color of badge are black.
+
+<preview class="flex-col space-y-4">
+  <p-badge>25</p-badge>
+  <p-badge>
+    <IconEmaterai />
+    <span>2</span>
+  </p-badge>
+</preview>
+
+```vue
+<template>
+  <p-badge>25</p-badge>
+  <p-badge>
+    <pi-signature-16 />
+    <span>2</span>
+  </p-badge>
+</template>
+```
+
+## Colors
+
+Badge available in 4 different colors. There are `primary`, `info`, `success`, `warning` and `danger`.
+
+<preview>
+  <div class="flex flex-wrap space-gap-3">
+    <p-badge color="primary">25</p-badge>
+    <p-badge color="info">1</p-badge>
+    <p-badge color="success">999+</p-badge>
+    <p-badge color="warning">7K</p-badge>
+    <p-badge color="danger">6</p-badge>
+  </div>
+</preview>
+
+```vue
+<template>
+  <p-badge color="primary">25</p-badge>
+  <p-badge color="info">1</p-badge>
+  <p-badge color="success">999+</p-badge>
+  <p-badge color="warning">7K</p-badge>
+  <p-badge color="danger">6</p-badge>
+</template>
+```
+
+<p-banner :dismissable="false">
+It's <strong>possible</strong> to make <strong>customizable</strong> and or optional <strong>color</strong> refers to what state the user 
+is in or objects being tagged by using default color Badge with <code>variables</code> or <code>class</code>.
+</p-banner>
+
+### Custom Color
+
+<preview>
+  <div class="flex flex-wrap space-gap-3">
+    <p-badge class="bg-gold-40">25</p-badge>
+    <p-badge class="text-yellow-30">79</p-badge>
+    <p-badge class="bg-purple-0 text-purple-40 dark:bg-purple-50 dark:text-purple-20">999+</p-badge>
+  </div>
+</preview>
+
+```vue
+<template>
+  <p-badge class="bg-gold-40">25</p-badge>
+  <p-badge class="text-yellow-30">79</p-badge>
+  <p-badge 
+    class="bg-purple-0 text-purple-40 dark:bg-purple-50 dark:text-purple-20">
+    999+
+  </p-badge>
+</template>
+```
+
+
+## Variants
+
+Badge has 3 variants namely `default`, `light` and `inverse`. When variant is not set, badge will looks as a `default`
+
+<preview>
+  <div class="flex flex-wrap space-gap-3">
+    <p-badge>25</p-badge>
+    <p-badge variant="light">7K</p-badge>
+    <p-badge variant="inverse">999+</p-badge>
+  </div>
+</preview>
+
+```vue
+<template>
+  <p-badge>25</p-badge>
+  <p-badge variant="light">7K</p-badge>
+  <p-badge variant="inverse">999+</p-badge>
+</template>
+```
+### Sample Light Variant
+
+<preview class="gap-4">
+  <p-badge variant="light" color="primary">25</p-badge>
+  <p-badge variant="light" color="info">1</p-badge>
+  <p-badge variant="light" color="success">7K</p-badge>
+  <p-badge variant="light" color="warning">999+</p-badge>
+  <p-badge variant="light" color="danger">6</p-badge>
+</preview>
+
+```vue
+<template>
+  <p-badge variant="light" color="primary">25</p-badge>
+  <p-badge variant="light" color="info">1</p-badge>
+  <p-badge variant="light" color="success">7K</p-badge>
+  <p-badge variant="light" color="warning">999+</p-badge>
+  <p-badge variant="light" color="danger">6</p-badge>
+</template>
+```
+### Sample Inverse Variant
+
+<preview class="gap-4">
+  <p-badge variant="inverse" color="primary">25</p-badge>
+  <p-badge variant="inverse" color="info">1</p-badge>
+  <p-badge variant="inverse" color="success">7K</p-badge>
+  <p-badge variant="inverse" color="warning">999+</p-badge>
+  <p-badge variant="inverse" color="danger">6</p-badge>
+</preview>
+
+```vue
+<template>
+  <p-badge variant="inverse" color="primary">25</p-badge>
+  <p-badge variant="inverse" color="info">1</p-badge>
+  <p-badge variant="inverse" color="success">7K</p-badge>
+  <p-badge variant="inverse" color="warning">999+</p-badge>
+  <p-badge variant="inverse" color="danger">6</p-badge>
+</template>
+```
+
+## Variables
+Badge use local CSS variables for enhanced real-time customization.
+Use this variable for [level color](/styleguide/badge/#level-color-customizable-and-optional) customization.
+
+### `.badge.badge--default`
+```sass
+--p-bg-variant-default: theme(backgroundColor.inverse);
+--p-bg-dark-variant-default: theme(backgroundColor.dark.inverse);
+```
+
+### `.badge.badge--variant-inverse.badge--default`
+```sass
+--p-color-variant-inverse: theme(textColor.subtle);
+--p-color-dark-variant-inverse: theme(textColor.dark.subtle);
+```
+
+### `.badge.badge--variant-light.badge--default`
+```sass
+--p-bg-variant-light: theme(backgroundColor.emphasis-alpha);
+--p-bg-dark-variant-light: theme(backgroundColor.dark.emphasis-alpha);
+```
+
+## API
+
+### Props
+
+| Props     |   Type   |  Default  | Description                                                                                                                                          |
+|-----------|:--------:|:---------:|------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `color`   | `String` | `-` | Badge color variant, valid value is `primary`, `info`, `success`, `warning` and `danger`                                           |
+| `variant` | `String` | `default` | Badge variant, valid value is `default`, `light` and `inverse`. If need badge in `default` variant, just leave badge without setting up the variant. |
+
+### Slots
+
+| Name      | Description               |
+|-----------|---------------------------|
+| `default` | Content to place in badge |
+
+### Events
+
+<table>
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Arguments</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td colspan="3" class="text-center">There is no event here</td>
+    </tr>
+  </tbody>
+</table>

package/dist/components/banner/Banner.spec.d.ts

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

package/dist/components/banner/Banner.spec.mjs

@@ -0,0 +1,173 @@
+import { vi } from "vitest";
+import { fireEvent, render } from "@testing-library/vue";
+import Banner from "./Banner.vue";
+import IconCheck from "@privyid/persona-icon/vue/checkmark-circle-solid/20.vue";
+it("should rendered properly without any props", () => {
+  const screen = render({
+    components: { Banner },
+    template: `
+      <Banner>
+        Hello
+      </Banner>
+    `
+  });
+  const banner = screen.queryByTestId("banner");
+  const text = screen.queryByText("Hello");
+  expect(banner).toBeInTheDocument();
+  expect(banner).toHaveClass("banner", "banner--info");
+  expect(text).toBeInTheDocument();
+});
+it('should have "danger" style if variant set to "danger"', () => {
+  const screen = render({
+    components: { Banner },
+    template: `
+      <Banner variant="danger">
+        Hello
+      </Banner>
+    `
+  });
+  const banner = screen.queryByTestId("banner");
+  expect(banner).toBeInTheDocument();
+  expect(banner).toHaveClass("banner", "banner--danger");
+  expect(banner).not.toHaveClass("banner--info");
+});
+it("should dismissed when close button clicked", async () => {
+  const screen = render({
+    components: { Banner },
+    template: `
+      <Banner>
+        Hello
+      </Banner>
+    `
+  });
+  const banner = screen.queryByTestId("banner");
+  const text = screen.queryByText("Hello");
+  const close = screen.queryByTestId("banner-close");
+  expect(banner).toBeInTheDocument();
+  expect(text).toBeInTheDocument();
+  await fireEvent.click(close);
+  expect(banner).not.toBeInTheDocument();
+  expect(text).not.toBeInTheDocument();
+});
+it('should emit event "dismissed" if close button clicked', async () => {
+  const spy = vi.fn();
+  const screen = render({
+    components: { Banner },
+    template: `
+      <Banner @dismissed="onDismissed">
+        Hello
+      </Banner>
+    `,
+    methods: { onDismissed: spy }
+  });
+  const banner = screen.queryByTestId("banner");
+  const text = screen.queryByText("Hello");
+  const close = screen.queryByTestId("banner-close");
+  expect(banner).toBeInTheDocument();
+  expect(text).toBeInTheDocument();
+  await fireEvent.click(close);
+  expect(spy).toBeCalled();
+});
+it('should have no close button if props "dismissable" set to false', () => {
+  const screen = render({
+    components: { Banner },
+    template: `
+      <Banner :dismissable="false">
+        Hello
+      </Banner>
+    `
+  });
+  const close = screen.queryByTestId("banner-close");
+  expect(close).not.toBeInTheDocument();
+});
+it('sould be able to dimissed via slot-scope "close" function', async () => {
+  const screen = render({
+    components: { Banner },
+    template: `
+      <Banner :dismissable="false">
+        <template #default="{ close }">
+          Hello
+
+          <span @click="close()">
+            Click Me
+          </span>
+        </template>
+      </Banner>
+    `
+  });
+  const banner = screen.queryByTestId("banner");
+  const text = screen.queryByText("Hello");
+  const close = screen.queryByTestId("banner-close");
+  const clickMe = screen.queryByText("Click Me");
+  expect(banner).toBeInTheDocument();
+  expect(text).toBeInTheDocument();
+  expect(close).not.toBeInTheDocument();
+  await fireEvent.click(clickMe);
+  expect(banner).not.toBeInTheDocument();
+  expect(text).not.toBeInTheDocument();
+});
+it("should be able to add custom icon via slot `icon`", () => {
+  const screen = render({
+    components: { Banner, IconCheck },
+    template: `
+    <Banner>
+      <template #icon>
+        <IconCheck class="text-success" />
+      </template>
+    </Banner>
+    `
+  });
+  const banner = screen.queryByTestId("banner");
+  const icon = screen.queryByTestId("banner-icon");
+  expect(banner).toBeInTheDocument();
+  expect(icon).toBeInTheDocument();
+  expect(icon).toHaveClass("banner__icon--custom");
+});
+it("should be able to add background image via slot `background-url`", () => {
+  const screen = render({
+    components: { Banner },
+    template: `
+    <Banner background-url="assets/images/img-background-banner.svg">
+      Text
+    </Banner>
+    `
+  });
+  const banner = screen.queryByTestId("banner");
+  expect(banner).toBeInTheDocument();
+  expect(banner).toHaveStyle({
+    "--p-banner-bg-image": 'url("assets/images/img-background-banner.svg")',
+    "--p-banner-bg-dark-image": 'url("assets/images/img-background-banner.svg")'
+  });
+});
+it("should be able to add background image for dark mode via slot `background-dark-url`", () => {
+  const screen = render({
+    components: { Banner },
+    template: `
+    <Banner
+      background-url="assets/images/img-background-banner.svg"
+      background-dark-url="assets/images/img-background-banner-dark.svg"
+    >
+      Text
+    </Banner>
+    `
+  });
+  const banner = screen.queryByTestId("banner");
+  expect(banner).toBeInTheDocument();
+  expect(banner).toHaveStyle({
+    "--p-banner-bg-image": 'url("assets/images/img-background-banner.svg")',
+    "--p-banner-bg-dark-image": 'url("assets/images/img-background-banner-dark.svg")'
+  });
+});
+it("should be able to add background overlay via slot `background-overlay`", () => {
+  const screen = render({
+    components: { Banner },
+    template: `
+    <Banner background-overlay>
+      Text
+    </Banner>
+    `
+  });
+  const banner = screen.queryByTestId("banner");
+  expect(banner).toBeInTheDocument();
+  expect(banner).toHaveClass("banner--overlay");
+});

package/dist/components/banner/Banner.vue

@@ -28,102 +28,72 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import IconInfo from '@privyid/persona-icon/vue/information-circle-solid/20.vue'
-import IconDanger from '@privyid/persona-icon/vue/exclamation-triangle-solid/20.vue'
-import IconWarning from '@privyid/persona-icon/vue/exclamation-circle-solid/20.vue'
-import IconClose from '@privyid/persona-icon/vue/close/16.vue'
-import type {
-  PropType,
-  StyleValue,
-  VNode,
-} from 'vue-demi'
-import { ref, computed } from 'vue-demi'
-import type { StyleVariant } from '.'
-
+<script setup>
+import IconInfo from "@privyid/persona-icon/vue/information-circle-solid/20.vue";
+import IconDanger from "@privyid/persona-icon/vue/exclamation-triangle-solid/20.vue";
+import IconWarning from "@privyid/persona-icon/vue/exclamation-circle-solid/20.vue";
+import IconClose from "@privyid/persona-icon/vue/close/16.vue";
+import { ref, computed } from "vue-demi";
 const BannerIcons = {
-  danger : IconDanger,
-  info   : IconInfo,
-  warning: IconWarning,
-}
-
+  danger: IconDanger,
+  info: IconInfo,
+  warning: IconWarning
+};
 const props = defineProps({
   variant: {
-    type   : String as PropType<StyleVariant>,
-    default: 'info',
+    type: String,
+    default: "info"
   },
   dismissable: {
-    type   : Boolean,
-    default: true,
+    type: Boolean,
+    default: true
   },
   noIcon: {
-    type   : Boolean,
-    default: false,
+    type: Boolean,
+    default: false
   },
   backgroundUrl: {
-    type   : String,
-    default: undefined,
+    type: String,
+    default: void 0
   },
   backgroundDarkUrl: {
-    type   : String,
-    default: undefined,
+    type: String,
+    default: void 0
   },
   backgroundOverlay: {
-    type   : Boolean,
-    default: false,
-  },
-})
-
-const emit = defineEmits<{
-  'dismissed': [],
-}>()
-
-const show = ref(true)
-
+    type: Boolean,
+    default: false
+  }
+});
+const emit = defineEmits(["dismissed"]);
+const show = ref(true);
 const classNames = computed(() => {
-  const result: string[] = ['banner']
-
+  const result = ["banner"];
   if (props.variant)
-    result.push(`banner--${props.variant}`)
-
+    result.push(`banner--${props.variant}`);
   if (props.backgroundUrl)
-    result.push('banner--custom-background')
-
+    result.push("banner--custom-background");
   if (props.backgroundOverlay)
-    result.push('banner--overlay')
-
-  return result
-})
-
-const styleBg = computed<StyleValue>(() => {
-  const result: StyleValue = {}
-
+    result.push("banner--overlay");
+  return result;
+});
+const styleBg = computed(() => {
+  const result = {};
   if (props.backgroundUrl) {
-    result['--p-banner-bg-image']      = `url("${props.backgroundUrl}")`
-    result['--p-banner-bg-dark-image'] = props.backgroundDarkUrl
-      ? `url("${props.backgroundDarkUrl}")`
-      : `url("${props.backgroundUrl}")`
+    result["--p-banner-bg-image"] = `url("${props.backgroundUrl}")`;
+    result["--p-banner-bg-dark-image"] = props.backgroundDarkUrl ? `url("${props.backgroundDarkUrl}")` : `url("${props.backgroundUrl}")`;
   }
-
-  return result
-})
-
+  return result;
+});
 const icon = computed(() => {
-  return BannerIcons[props.variant]
-})
-
-function close (): void {
-  show.value = false
-
-  emit('dismissed')
+  return BannerIcons[props.variant];
+});
+function close() {
+  show.value = false;
+  emit("dismissed");
 }
-
-defineExpose({ close })
-
-defineSlots<{
-  'icon'(): VNode[],
-  'default'(props: { close: () => void }): VNode[],
-}>()
+defineExpose({ close });
+defineSlots();
 </script>
 
 <style lang="postcss">

package/dist/components/banner/Banner.vue.d.ts

@@ -0,0 +1,91 @@
+import type { PropType, VNode } from 'vue-demi';
+import type { StyleVariant } from '.';
+declare function close(): void;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        icon(): VNode[];
+        default(props: {
+            close: () => void;
+        }): VNode[];
+    }> & {
+        icon(): VNode[];
+        default(props: {
+            close: () => void;
+        }): VNode[];
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
+    variant: {
+        type: PropType<StyleVariant>;
+        default: string;
+    };
+    dismissable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    noIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    backgroundUrl: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    backgroundDarkUrl: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    backgroundOverlay: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    close: typeof close;
+}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
+    dismissed: () => void;
+}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    variant: {
+        type: PropType<StyleVariant>;
+        default: string;
+    };
+    dismissable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    noIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    backgroundUrl: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    backgroundDarkUrl: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    backgroundOverlay: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onDismissed?: (() => any) | undefined;
+}>, {
+    variant: StyleVariant;
+    dismissable: boolean;
+    noIcon: boolean;
+    backgroundUrl: string;
+    backgroundDarkUrl: string;
+    backgroundOverlay: 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;
+    };
+};