@privyid/persona 1.2.1 → 1.2.2-dev.2

package/dist/components/badge/Badge.vue

@@ -0,0 +1,210 @@
+<template>
+  <span
+    data-testid="badge"
+    :class="classNames">
+    <slot />
+  </span>
+</template>
+
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  color: {
+    type: String,
+    default: "default"
+  },
+  variant: {
+    type: String,
+    default: "default"
+  }
+});
+const classNames = computed(() => {
+  const result = ["badge"];
+  if (props.color)
+    result.push(`badge--${props.color}`);
+  if (props.variant)
+    result.push(`badge--variant-${props.variant}`);
+  return result;
+});
+</script>
+
+<style lang="postcss">
+/**
+* Component Name: Badge
+* Component URI : https://www.figma.com/file/JIYmbyRYZHc9bnVp6Npm9K/B-A-S-E-%2F-Components?node-id=278%3A3456
+* Date Created  : May 30, 2022
+* Last Update   : May 31, 2022
+*/
+.badge {
+  /**
+  * Set global style
+  * of badge
+  */
+  --p-color-primary-light: lighten(theme(colors.brand.accent.DEFAULT), 40%);
+  --p-color-dark-primary-light: darken(theme(colors.dark.brand.accent.DEFAULT), 40%);
+
+  @apply inline-block font-bold text-xs px-2 py-0.5 rounded-full space-x-1 align-middle;
+
+  > .persona-icon,
+  > svg {
+    @apply inline-block;
+  }
+
+  &:not(&--variant-default&--default) {
+    @apply text-state-emphasis;
+    @apply dark:text-dark-state-emphasis
+  }
+
+  /**
+  * Provide colors variant
+  * 4 colors variant available
+  * primary, success, warning
+  * & danger
+  */
+  &&--variant-default {
+    &.badge {
+      &--default {
+        --p-bg-variant-default: theme(backgroundColor.inverse);
+        --p-bg-dark-variant-default: theme(backgroundColor.dark.inverse);
+
+        &:not([class^='bg-'], [class*='bg-']) {
+          @apply bg-[color:var(--p-bg-variant-default)];
+          @apply dark:bg-[color:var(--p-bg-dark-variant-default)];
+        }
+
+        &:not([class^='text-'], [class*='text-']) {
+          @apply text-state-emphasis;
+          @apply dark:text-dark-on-emphasis;
+        }
+      }
+
+      &--primary {
+        @apply bg-brand-accent;
+        @apply dark:bg-dark-brand-accent;
+      }
+
+      &--info {
+        @apply bg-info-emphasis;
+        @apply dark:bg-dark-info-emphasis;
+      }
+
+      &--success {
+        @apply bg-success-emphasis;
+        @apply dark:bg-dark-success-emphasis;
+      }
+
+      &--warning {
+        @apply bg-warning-emphasis;
+        @apply dark:bg-dark-warning-emphasis;
+      }
+
+      &--danger {
+        @apply bg-danger-emphasis;
+        @apply dark:bg-dark-danger-emphasis;
+      }
+    }
+  }
+
+  /**
+  * Set color of Badge
+  * in light and inverse variant
+  */
+  &&--variant-light,
+  &&--variant-inverse {
+    &.badge {
+      &--default {
+        --p-color-variant-inverse: theme(textColor.subtle);
+        --p-color-dark-variant-inverse: theme(textColor.dark.subtle);
+        @apply text-[color:var(--p-color-variant-inverse)];
+        @apply dark:text-[color:var(--p-color-dark-variant-inverse)];
+      }
+
+      &--primary {
+        @apply text-brand-accent;
+        @apply dark:text-dark-brand-accent;
+      }
+
+      &--info {
+        @apply text-info;
+        @apply dark:text-dark-info;
+      }
+
+      &--success {
+        @apply text-success;
+        @apply dark:text-dark-success;
+      }
+
+      &--warning {
+        @apply text-warning;
+        @apply dark:text-dark-warning;
+      }
+
+      &--danger {
+        @apply text-danger;
+        @apply dark:text-dark-danger;
+      }
+    }
+  }
+
+  /**
+  * Set background
+  * in light variant
+  */
+  &--variant-light {
+    &.badge {
+      &--default {
+        --p-bg-variant-light: theme(backgroundColor.emphasis-alpha);
+        --p-bg-dark-variant-light: theme(backgroundColor.dark.emphasis-alpha);
+        @apply bg-[color:var(--p-bg-variant-light)];
+        @apply dark:bg-[color:var(--p-bg-dark-variant-light)];
+      }
+
+      &--primary {
+        @apply bg-[color:var(--p-color-primary-light)];
+        @apply dark:bg-[color:var(--p-color-dark-primary-light)];
+      }
+
+      &--info {
+        @apply bg-info;
+        @apply dark:bg-dark-info;
+      }
+
+      &--success {
+        @apply bg-success;
+        @apply dark:bg-dark-success;
+      }
+
+      &--warning {
+        @apply bg-warning;
+        @apply dark:bg-dark-warning;
+      }
+
+      &--danger {
+        @apply bg-danger;
+        @apply dark:bg-dark-danger;
+      }
+    }
+  }
+
+  /**
+  * Remove background
+  * in inverse and dot variant
+  */
+  &:where(.badge--variant-inverse, .badge--dot) {
+    @apply bg-default;
+    @apply dark:bg-dark-default;
+  }
+
+  /**
+  * Reset box-model of
+  * dot variant
+  */
+  &&--dot {
+    @apply p-0 m-0 tracking-[0];
+
+    .dot {
+      @apply align-middle;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,41 @@
+import type { PropType } from 'vue';
+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").DefineComponent<import("vue").ExtractPropTypes<{
+    color: {
+        type: PropType<ColorVariant>;
+        default: string;
+    };
+    variant: {
+        type: PropType<StyleVariant>;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    color: {
+        type: PropType<ColorVariant>;
+        default: string;
+    };
+    variant: {
+        type: PropType<StyleVariant>;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    variant: StyleVariant;
+    color: ColorVariant;
+}, {}, {}, {}, string, import("vue").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.d.ts

@@ -0,0 +1 @@
+export type StyleVariant = 'default' | 'light' | 'inverse';

package/dist/components/banner/Banner.vue

@@ -0,0 +1,183 @@
+<template>
+  <div
+    v-if="show"
+    data-testid="banner"
+    :class="classNames"
+    :style="styleBg">
+    <div
+      v-if="!noIcon"
+      class="banner__icon"
+      data-testid="banner-icon"
+      :class="{ 'banner__icon--custom': $slots.icon }">
+      <slot name="icon">
+        <component
+          :is="icon"
+          v-if="icon" />
+      </slot>
+    </div>
+    <div class="banner__body">
+      <slot :close="close" />
+    </div>
+    <div
+      v-if="dismissable"
+      data-testid="banner-close"
+      class="banner__close"
+      @click="close()">
+      <IconClose />
+    </div>
+  </div>
+</template>
+
+<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";
+const BannerIcons = {
+  danger: IconDanger,
+  info: IconInfo,
+  warning: IconWarning
+};
+const props = defineProps({
+  variant: {
+    type: String,
+    default: "info"
+  },
+  dismissable: {
+    type: Boolean,
+    default: true
+  },
+  noIcon: {
+    type: Boolean,
+    default: false
+  },
+  backgroundUrl: {
+    type: String,
+    default: void 0
+  },
+  backgroundDarkUrl: {
+    type: String,
+    default: void 0
+  },
+  backgroundOverlay: {
+    type: Boolean,
+    default: false
+  }
+});
+const emit = defineEmits(["dismissed"]);
+const show = ref(true);
+const classNames = computed(() => {
+  const result = ["banner"];
+  if (props.variant)
+    result.push(`banner--${props.variant}`);
+  if (props.backgroundUrl)
+    result.push("banner--custom-background");
+  if (props.backgroundOverlay)
+    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}")`;
+  }
+  return result;
+});
+const icon = computed(() => {
+  return BannerIcons[props.variant];
+});
+function close() {
+  show.value = false;
+  emit("dismissed");
+}
+defineExpose({ close });
+defineSlots();
+</script>
+
+<style lang="postcss">
+.banner {
+  --p-banner-bg-image: none;
+  --p-banner-bg-dark-image: none;
+  --p-banner-padding-x: theme(spacing.4);
+  --p-banner-padding-y: theme(spacing.4);
+
+  @apply px-[var(--p-banner-padding-x)] py-[var(--p-banner-padding-y)] flex space-x-2 rounded text-subtle;
+  @apply dark:text-dark-subtle;
+
+  a {
+    &:not(.btn) {
+      @apply underline decoration-solid text-info;
+      @apply dark:text-dark-info;
+    }
+  }
+
+  .subheading {
+    &:not(&--md) {
+      @apply mb-1;
+    }
+
+    @apply mb-2;
+  }
+
+  &&--custom-background {
+    @apply bg-cover bg-no-repeat bg-center overflow-hidden bg-[image:var(--p-banner-bg-image)];
+    @apply dark:bg-[image:var(--p-banner-bg-dark-image)]
+  }
+
+  &&--overlay {
+    @apply after:content-[''] relative after:w-full after:h-full overflow-hidden after:absolute after:top-0 after:left-0 after:bg-base-black after:opacity-20;
+
+    .banner__body,
+    .banner__icon,
+    .banner-close {
+      @apply z-1;
+    }
+  }
+
+  &&--info {
+    @apply bg-ground;
+    @apply dark:bg-dark-ground;
+
+    .banner__icon {
+      @apply text-info;
+      @apply dark:text-dark-info;
+    }
+  }
+
+  &&--danger {
+    @apply bg-danger;
+    @apply dark:bg-dark-danger;
+
+    .banner__icon {
+      @apply text-danger;
+      @apply dark:text-dark-danger;
+    }
+  }
+
+  &&--warning {
+    @apply bg-warning;
+    @apply dark:bg-dark-warning;
+
+    .banner__icon {
+      @apply text-warning;
+      @apply dark:text-dark-warning;
+    }
+  }
+
+  &__body {
+    @apply grow text-sm;
+  }
+
+  &__icon,
+  &__close {
+    @apply shrink-0;
+  }
+
+  &__close {
+    @apply cursor-pointer text-default/30 hover:text-default/50;
+    @apply dark:text-dark-default/30 hover:dark:text-dark-default/50;
+  }
+}
+</style>

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

@@ -0,0 +1,91 @@
+import type { PropType, VNode } from 'vue';
+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").DefineComponent<import("vue").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").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    dismissed: () => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").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").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/banner/index.d.ts

@@ -0,0 +1 @@
+export type StyleVariant = 'info' | 'danger' | 'warning';

package/dist/components/breadcrumbs/Breadcrumb.vue

@@ -0,0 +1,55 @@
+<template>
+  <ul
+    class="breadcrumbs"
+    data-testid="breadcrumbs">
+    <slot>
+      <template
+        v-for="(item, i) in items"
+        :key="i">
+        <BreadcrumbItemDropdown
+          v-if="item.subitem"
+          :text="item.text"
+          :active="item.active"
+          :href="item.href">
+          <template
+            v-for="(subitem, j) in item.subitem"
+            :key="j">
+            <DropdownItem
+              :active="subitem.active"
+              :href="subitem.href">
+              {{ subitem.text }}
+            </DropdownItem>
+          </template>
+        </BreadcrumbItemDropdown>
+        <BreadcrumbItem
+          v-else
+          :active="item.active"
+          :href="item.href">
+          {{ item.text }}
+        </BreadcrumbItem>
+      </template>
+    </slot>
+  </ul>
+</template>
+
+<script setup>
+import { provide } from "vue";
+import BreadcrumbItem from "./BreadcrumbItem.vue";
+import BreadcrumbItemDropdown from "./BreadcrumbItemDropdown.vue";
+import DropdownItem from "../dropdown/DropdownItem.vue";
+defineProps({
+  items: {
+    type: Array,
+    default: () => []
+  }
+});
+const slots = defineSlots();
+if (slots.divider)
+  provide("divider", slots.divider);
+</script>
+
+<style lang="postcss">
+.breadcrumbs {
+  @apply flex space-x-3 items-center;
+}
+</style>

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

@@ -0,0 +1,59 @@
+import type { VNode } from 'vue';
+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").DefineComponent<import("vue").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").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").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").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;
+    };
+};