@privyid/persona 1.1.2 → 1.2.0

package/dist/components/breadcrumbs/BreadcrumbItemDropdown.vue

@@ -18,36 +18,31 @@
   </li>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 import {
   computed,
   inject,
-  h,
-} from 'vue-demi'
-import Dropdown from '../dropdown/Dropdown.vue'
-import IconChevron from '@privyid/persona-icon/vue/chevron-right/20.vue'
-
+  h
+} from "vue-demi";
+import Dropdown from "../dropdown/Dropdown.vue";
+import IconChevron from "@privyid/persona-icon/vue/chevron-right/20.vue";
 const props = defineProps({
   text: {
-    type   : String,
-    default: '',
+    type: String,
+    default: ""
   },
   active: {
-    type   : Boolean,
-    default: false,
-  },
-})
-
+    type: Boolean,
+    default: false
+  }
+});
 const classNames = computed(() => {
-  const result: string[] = ['breadcrumbs__item--dropdown']
-
+  const result = ["breadcrumbs__item--dropdown"];
   if (props.active)
-    result.push('breadcrumbs__item--active')
-
-  return result
-})
-
-const divider = inject('divider', () => h(IconChevron))
+    result.push("breadcrumbs__item--active");
+  return result;
+});
+const divider = inject("divider", () => h(IconChevron));
 </script>
 
 <style lang="postcss">

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

@@ -0,0 +1,38 @@
+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<{
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    text: string;
+    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/index.md

@@ -0,0 +1,289 @@
+---
+title: Breadcrumbs · Components
+description: The current page's location within a navigational hierarchy
+---
+
+<script setup>
+  import pBreadcrumb from './Breadcrumb.vue'
+  import pBreadcrumbItem from './BreadcrumbItem.vue'
+  import pBreadcrumbItemDropdown from './BreadcrumbItemDropdown.vue'
+  import { defineNavigation } from '.'
+  import pDropdownItem from '../dropdown/DropdownItem.vue'
+  import PiArrowRight16 from '@privyid/persona-icon/vue/arrow-right/16.vue'
+
+  const items = defineNavigation([
+    {
+      text: 'Dashboard',
+      href: '/'
+    },
+    {
+      text: 'All Documents',
+      active: true
+    }
+  ])
+
+  const itemsB = defineNavigation([
+    {
+      text: 'Dashboard',
+      href: '#',
+    },
+    {
+      text   : 'Document',
+      active : true,
+      subitem: [
+        {
+          text  : 'Waiting',
+          href  : '#',
+          active: true,
+        },
+        {
+          text: 'Done',
+          href: '#'
+        },
+        {
+          text: 'Archived',
+          href: '#'
+        }
+      ]
+    },
+  ])
+</script>
+
+# Breadcrumbs
+
+> The current page's location within a navigational hierarchy
+
+## Usage
+
+### Simple Usage
+
+Items of breadcrumbs are rendered using `items` prop. It can be an array of object to provide text, link and active state.
+
+<preview>
+  <p-breadcrumb :items="items" />
+</preview>
+
+```vue
+<script>
+  import { defineNavigation } from '@privyid/persona/core'
+
+  const items = defineNavigation([
+    {
+      text: 'Dashboard',
+      href: '/'
+    },
+    {
+      text  : 'All Documents',
+      active: true
+    }
+  ])
+</script>
+
+<template>
+  <p-breadcrumb :items="items" />
+</template>
+```
+
+### Breadcrumb with / Divider
+
+<preview>
+  <p-breadcrumb :items="items">
+    <template #divider>
+      /
+    </template>
+  </p-breadcrumb>
+</preview>
+
+```vue
+<template>
+  <p-breadcrumb :items="items">
+    <template #divider>
+      /
+    </template>
+  </p-breadcrumb>
+</template>
+```
+
+## Breadcrumb Item
+Individual `<p-breadcrumb-item>` can be placed manually in the default slot of `<p-breadcrumb>`. The permalink can be set with `href` prop, then `active` prop for active state.
+
+<preview>
+  <p-breadcrumb>
+    <p-breadcrumb-item href="#dashboard">
+      Dashboard
+    </p-breadcrumb-item>
+    <p-breadcrumb-item href="#user">
+      User Profile
+    </p-breadcrumb-item>
+    <p-breadcrumb-item active>
+      Change Password
+    </p-breadcrumb-item>
+  </p-breadcrumb>
+</preview>
+
+```vue
+<template>
+  <p-breadcrumb>
+    <p-breadcrumb-item href="#dashboard">
+      Dashboard
+    </p-breadcrumb-item>
+    <p-breadcrumb-item href="#user">
+      User Profile
+    </p-breadcrumb-item>
+    <p-breadcrumb-item active>
+      Change Password
+    </p-breadcrumb-item>
+  </p-breadcrumb>
+</template>
+```
+
+## Breadcrumb Dropdown
+
+<preview>
+  <p-breadcrumb :items="itemsB" />
+</preview>
+
+```vue
+<template>
+  <script>
+    import { defineNavigation } from '@privyid/persona/core'
+
+    const items = defineNavigation([
+      {
+        text: 'Dashboard',
+        href: '#',
+      },
+      {
+        text: 'Document',
+        active: true,
+        subitem: [
+          {
+            text: 'Waiting',
+            href: '#',
+            active: true,
+          },
+          {
+            text: 'Done',
+            href: '#'
+          },
+          {
+            text: 'Archived',
+            href: '#'
+          }
+        ]
+      },
+    ])
+  </script>
+
+  <p-breadcrumb :items="items" />
+</template>
+```
+
+`<p-breadcrumb-item-dropdown>` also can be placed manually in the default slot of `<p-breadcrumb>` with the combination of `<p-dropdown-item>` child component.
+
+<preview>
+  <p-breadcrumb>
+    <p-breadcrumb-item href="#dashboard">
+      Dashboard
+    </p-breadcrumb-item>
+    <p-breadcrumb-item href="#settings">
+      Settings
+    </p-breadcrumb-item>
+    <p-breadcrumb-item-dropdown text="Account" active>
+      <p-dropdown-item href="#">
+        Change Password
+      </p-dropdown-item>
+      <p-dropdown-item href="#" active>
+        Create Signature
+      </p-dropdown-item>
+      <p-dropdown-item href="#">
+        Change OTP Method
+      </p-dropdown-item>
+    </p-breadcrumb-item-dropdown>
+  </p-breadcrumb>
+</preview>
+
+```vue
+<template>
+  <p-breadcrumb>
+    <p-breadcrumb-item href="#dashboard">
+      Dashboard
+    </p-breadcrumb-item>
+    <p-breadcrumb-item href="#settings">
+      Settings
+    </p-breadcrumb-item>
+    <p-breadcrumb-item-dropdown text="Account" active>
+      <p-dropdown-item href=#>
+        Change Password
+      </p-dropdown-item>
+      <p-dropdown-item href="#" active>
+        Create Signature
+      </p-dropdown-item>
+      <p-dropdown-item href="#">
+        Change OTP Method
+      </p-dropdown-item>
+    </p-breadcrumb-item-dropdown>
+  </p-breadcrumb>
+</template>
+```
+
+
+## API
+
+### Props `<p-breadcrumb>`
+
+| Props   |  Type   | Default | Description                        |
+|---------|:-------:|:-------:|------------------------------------|
+| `items` | `Array` |   `-`   | Breadcrumb items (array of object) |
+
+### Slots `<p-breadcrumb>`
+
+| Name      | Description                                         |
+|-----------|-----------------------------------------------------|
+| `default` | Content to place breadcrumb item                    |
+| `divider` | Specifies the dividing character/icon between items |
+
+### Props `<p-breadcrumb-item>`
+
+| Props    |   Type    | Default | Description                            |
+|----------|:---------:|:-------:|----------------------------------------|
+| `text`   | `String`  |   `-`   | Breadcrumb item label                  |
+| `active` | `Boolean` | `false` | Breadcrumb item active state           |
+| `href`   | `String`  |   `-`   | Target URL of the breadcrumb item link |
+
+### Slots `<p-breadcrumb-item>`
+
+| Name      | Description                            |
+|-----------|----------------------------------------|
+| `default` | Content to place breadcrumb item label |
+
+### Props `<p-breadcrumb-item-dropdown>`
+
+| Props    |   Type    | Default | Description                                               |
+|----------|:---------:|:-------:|-----------------------------------------------------------|
+| `text`   | `String`  |   `-`   | Breadcrumb item dropdown activator label                  |
+| `active` | `Boolean` | `false` | Breadcrumb item dropdown activator active state           |
+| `href`   | `String`  |   `-`   | Target URL of the breadcrumb item dropdown activator link |
+
+### Slots `<p-breadcrumb-item-dropdown>`
+
+| Name      | Description                    |
+|-----------|--------------------------------|
+| `default` | Content to place dropdown item |
+
+### Events
+
+<table>
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Arguments</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td colspan="3" class="text-center">There no event here</td>
+    </tr>
+  </tbody>
+</table>

package/dist/components/button/Button.spec.d.ts

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

package/dist/components/button/Button.spec.mjs

@@ -0,0 +1,197 @@
+import { vi } from "vitest";
+import { fireEvent, render } from "@testing-library/vue";
+import Button from "./Button.vue";
+import ButtonGroup from "../button-group/ButtonGroup.vue";
+import InputGroup from "../input-group/InputGroup.vue";
+it("should render properly without any props", () => {
+  const screen = render({
+    components: { Button },
+    template: `
+      <Button>
+        Hello
+      </Button>
+    `
+  });
+  const button = screen.queryByTestId("btn");
+  const text = screen.queryByText("Hello");
+  expect(button).toBeInTheDocument();
+  expect(button).toHaveClass("btn", "btn--variant-solid", "btn--md", "btn--default");
+  expect(text).toBeInTheDocument();
+});
+it('should have style "outline" if variant props set to "outline"', () => {
+  const screen = render({
+    components: { Button },
+    template: `
+      <Button variant="outline">
+        Hello
+      </Button>
+    `
+  });
+  const button = screen.queryByTestId("btn");
+  expect(button).toBeInTheDocument();
+  expect(button).toHaveClass("btn", "btn--variant-outline", "btn--default");
+  expect(button).not.toHaveClass("btn--solid");
+});
+it('should have style "secondary" if color props set to "secondary"', () => {
+  const screen = render({
+    components: { Button },
+    template: `
+      <Button color="secondary">
+        Hello
+      </Button>
+    `
+  });
+  const button = screen.queryByTestId("btn");
+  expect(button).toBeInTheDocument();
+  expect(button).toHaveClass("btn", "btn--variant-solid", "btn--secondary");
+  expect(button).not.toHaveClass("btn--primary");
+});
+it('should have style "lg" if size props set to "lg"', () => {
+  const screen = render({
+    components: { Button },
+    template: `
+      <Button size="lg">
+        Hello
+      </Button>
+    `
+  });
+  const button = screen.queryByTestId("btn");
+  expect(button).toBeInTheDocument();
+  expect(button).toHaveClass("btn", "btn--variant-solid", "btn--lg");
+  expect(button).not.toHaveClass("btn--md");
+});
+it('should have style "icon" if icon is provided', () => {
+  const screen = render({
+    components: { Button },
+    template: `
+      <Button icon>
+        Hello
+      </Button>
+    `
+  });
+  const button = screen.queryByTestId("btn");
+  expect(button).toBeInTheDocument();
+  expect(button).toHaveClass("btn--icon");
+});
+it('should have style "pill" if pill is provided', () => {
+  const screen = render({
+    components: { Button },
+    template: `
+      <Button pill>
+        Hello
+      </Button>
+    `
+  });
+  const button = screen.queryByTestId("btn");
+  expect(button).toBeInTheDocument();
+  expect(button).toHaveClass("btn--pill");
+});
+it("should have loading if prop loading was provided", () => {
+  const screen = render({
+    components: { Button },
+    template: `
+      <Button loading>
+        Hello
+      </Button>
+    `
+  });
+  const button = screen.queryByTestId("btn");
+  const spinner = screen.queryByTestId("spinner");
+  expect(button).toBeInTheDocument();
+  expect(button).toHaveClass("btn--loading");
+  expect(button).toBeDisabled();
+  expect(spinner).toBeInTheDocument();
+});
+it('should emit "click" when button is clicked', async () => {
+  const spy = vi.fn();
+  const screen = render({
+    components: { Button },
+    template: `
+      <Button @click="onClick">
+        Hello
+      </Button>
+    `,
+    methods: { onClick: spy }
+  });
+  const button = screen.queryByTestId("btn");
+  await fireEvent.click(button);
+  expect(spy).toBeCalled();
+});
+it("should be an anchor when button have `href` props", async () => {
+  const screen = render({
+    components: { Button },
+    template: `
+      <Button href="#">
+        Hello
+      </Button>
+    `
+  });
+  const button = screen.queryByTestId("btn");
+  expect(button).toHaveAttribute("href", "#");
+  expect(button).toContainHTML("a");
+});
+it("should be an router-link when button have `href` props without http", async () => {
+  const screen = render({
+    components: { Button },
+    template: `
+      <Button href="/">
+        Hello
+      </Button>
+    `
+  });
+  const button = screen.queryByTestId("btn");
+  expect(button).toHaveAttribute("href", "/");
+  expect(button).toContainHTML("nuxt-link");
+});
+it("should be an anchor when button have `href` props and with http", async () => {
+  const screen = render({
+    components: { Button },
+    template: `
+      <Button href="https://privy.id">
+        Hello
+      </Button>
+    `
+  });
+  const button = screen.queryByTestId("btn");
+  expect(button).toHaveAttribute("href", "https://privy.id");
+  expect(button).toContainHTML("a");
+});
+it("should automatically set size of each button via `size` props of button-group", () => {
+  const screen = render({
+    components: { ButtonGroup, Button },
+    template: `
+      <ButtonGroup size="lg">
+        <Button>Text</Button>
+      </ButtonGroup>
+    `
+  });
+  const buttonGroup = screen.queryByTestId("btn-group");
+  const button = screen.queryByTestId("btn");
+  expect(buttonGroup).toBeInTheDocument();
+  expect(button).toHaveClass("btn--lg");
+});
+it("should automatically set size of button via `size` props of input-group", () => {
+  const screen = render({
+    components: { InputGroup, Button },
+    template: `
+      <InputGroup size="sm">
+        <Button variant="input">Text</Button>
+      </InputGroup>
+    `
+  });
+  const inputGroup = screen.queryByTestId("input-group");
+  const button = screen.queryByTestId("btn");
+  expect(inputGroup).toBeInTheDocument();
+  expect(button).toHaveClass("btn--sm");
+});
+it("should have type properties with value button if the element is button", () => {
+  const screen = render({
+    components: { Button },
+    template: `
+        <Button >Text</Button>
+    `
+  });
+  const button = screen.queryByTestId("btn");
+  expect(button).toBeInTheDocument();
+  expect(button).toHaveProperty("type", "button");
+});