@privyid/persona 1.1.2 → 1.2.1-rc.0

package/dist/components/badge/Badge.vue

@@ -1,218 +0,0 @@
-<template>
-  <span
-    data-testid="badge"
-    :class="classNames">
-    <slot />
-  </span>
-</template>
-
-<script lang="ts" setup>
-import type { PropType } from 'vue-demi'
-import { computed } from 'vue-demi'
-import type { StyleVariant } from '.'
-import type { ColorVariant } from '../button'
-
-const props = defineProps({
-  color: {
-    type   : String as PropType<ColorVariant>,
-    default: 'default',
-  },
-  variant: {
-    type   : String as PropType<StyleVariant>,
-    default: 'default',
-  },
-})
-
-const classNames = computed(() => {
-  const result: string[] = ['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/index.d.ts

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

package/dist/components/banner/Banner.vue

@@ -1,213 +0,0 @@
-<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 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 '.'
-
-const BannerIcons = {
-  danger : IconDanger,
-  info   : IconInfo,
-  warning: IconWarning,
-}
-
-const props = defineProps({
-  variant: {
-    type   : String as PropType<StyleVariant>,
-    default: 'info',
-  },
-  dismissable: {
-    type   : Boolean,
-    default: true,
-  },
-  noIcon: {
-    type   : Boolean,
-    default: false,
-  },
-  backgroundUrl: {
-    type   : String,
-    default: undefined,
-  },
-  backgroundDarkUrl: {
-    type   : String,
-    default: undefined,
-  },
-  backgroundOverlay: {
-    type   : Boolean,
-    default: false,
-  },
-})
-
-const emit = defineEmits<{
-  'dismissed': [],
-}>()
-
-const show = ref(true)
-
-const classNames = computed(() => {
-  const result: string[] = ['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<StyleValue>(() => {
-  const result: StyleValue = {}
-
-  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 (): void {
-  show.value = false
-
-  emit('dismissed')
-}
-
-defineExpose({ close })
-
-defineSlots<{
-  'icon'(): VNode[],
-  'default'(props: { close: () => void }): VNode[],
-}>()
-</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/index.d.ts

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

package/dist/components/breadcrumbs/Breadcrumb.vue

@@ -1,62 +0,0 @@
-<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 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'
-
-defineProps({
-  items: {
-    type   : Array<BreadcrumbItems>,
-    default: () => ([]),
-  },
-})
-
-const slots = defineSlots<{
-  'divider'(): VNode[],
-}>()
-
-if (slots.divider)
-  provide('divider', slots.divider)
-</script>
-
-<style lang="postcss">
-.breadcrumbs {
-  @apply flex space-x-3 items-center;
-}
-</style>

package/dist/components/breadcrumbs/BreadcrumbItem.vue

@@ -1,95 +0,0 @@
-<template>
-  <li
-    data-testid="breadcrumbs-item"
-    class="breadcrumbs__item"
-    :class="classNames">
-    <component
-      :is="tagName"
-      :href="permalink"
-      :class="{ 'breadcrumbs__item__link' : permalink }">
-      <slot />
-    </component>
-    <div
-      v-if="!active"
-      data-testid="breadcrumbs-divider"
-      class="breadcrumbs__item__divider">
-      <component :is="divider" />
-    </div>
-  </li>
-</template>
-
-<script lang="ts" setup>
-import type { PropType } from 'vue-demi'
-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'
-
-const props = defineProps({
-  href: {
-    type   : [String, Object] as PropType<RouteLocationRaw>,
-    default: '#' as RouteLocationRaw,
-  },
-  active: {
-    type   : Boolean,
-    default: false,
-  },
-})
-
-const classNames = computed(() => {
-  const result: string[] = ['']
-
-  if (props.active)
-    result.push('breadcrumbs__item--active')
-
-  return result
-})
-
-const tagName = computed(() => {
-  return props.active
-    ? 'span'
-    : resolveComponent('nuxt-link')
-})
-
-const permalink = computed(() => {
-  if (props.active)
-    return
-
-  return props.href
-})
-
-const divider = inject('divider', () => h(IconChevron))
-</script>
-
-<style lang="postcss">
-.breadcrumbs {
-  &__item {
-    @apply inline-flex text-sm items-center;
-
-    &:last-child {
-      & > .breadcrumbs__item__divider {
-        @apply hidden;
-      }
-    }
-
-    &:not(:last-child) {
-      & > .breadcrumbs__item__divider {
-        @apply inline-flex ml-3;
-      }
-    }
-
-    & > .breadcrumbs__item__link {
-      @apply text-subtle cursor-pointer underline decoration-solid hover:no-underline;
-      @apply dark:text-dark-subtle;
-    }
-
-    & > span {
-      @apply font-bold cursor-default;
-    }
-  }
-}
-</style>

package/dist/components/breadcrumbs/BreadcrumbItemDropdown.vue

@@ -1,78 +0,0 @@
-<template>
-  <li
-    data-testid="breadcrumbs-dropdown"
-    class="breadcrumbs__item"
-    :class="classNames">
-    <Dropdown
-      :text="text"
-      placement="bottom-end"
-      size="xs">
-      <slot />
-    </Dropdown>
-    <div
-      v-if="!active"
-      data-testid="breadcrumbs-divider"
-      class="breadcrumbs__item__divider">
-      <component :is="divider" />
-    </div>
-  </li>
-</template>
-
-<script lang="ts" 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'
-
-const props = defineProps({
-  text: {
-    type   : String,
-    default: '',
-  },
-  active: {
-    type   : Boolean,
-    default: false,
-  },
-})
-
-const classNames = computed(() => {
-  const result: string[] = ['breadcrumbs__item--dropdown']
-
-  if (props.active)
-    result.push('breadcrumbs__item--active')
-
-  return result
-})
-
-const divider = inject('divider', () => h(IconChevron))
-</script>
-
-<style lang="postcss">
-.breadcrumbs__item {
-  &&--dropdown {
-    .dropdown__activator {
-      &.btn.btn--default.btn--variant-solid {
-        @apply px-0 text-subtle bg-transparent border-transparent hover:shadow-none hover:border-transparent hover:bg-transparent focus:shadow-none focus:border-transparent focus:bg-transparent;
-        @apply dark:text-dark-subtle dark:bg-transparent dark:border-transparent hover:dark:border-transparent hover:dark:bg-transparent focus:dark:border-transparent focus:dark:bg-transparent;
-      }
-    }
-  }
-
-  &&--active {
-    .dropdown__activator {
-      &.btn.btn--default.btn--variant-solid {
-        @apply text-default;
-        @apply dark:text-dark-default;
-      }
-
-      & > .dropdown__caret {
-        @apply text-subtle;
-        @apply dark:text-dark-subtle;
-      }
-    }
-  }
-}
-</style>

package/dist/components/breadcrumbs/index.d.ts

@@ -1,11 +0,0 @@
-import type { RouteLocationRaw } from 'vue-router';
-interface Breadcrumb {
-    text: string;
-    href?: RouteLocationRaw;
-    active?: boolean;
-}
-export interface BreadcrumbItems extends Breadcrumb {
-    subitem?: Breadcrumb[];
-}
-export declare function defineNavigation(navigation: BreadcrumbItems[]): BreadcrumbItems[];
-export {};

package/dist/components/breadcrumbs/index.mjs

@@ -1,3 +0,0 @@
-export function defineNavigation(navigation) {
-  return navigation;
-}