@privyid/persona 0.3.0

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

@@ -0,0 +1,32 @@
+import { PropType } from 'vue-demi';
+declare type StyleVariant = 'info' | 'danger';
+declare const _default: import("vue-demi").DefineComponent<{
+    variant: {
+        type: PropType<StyleVariant>;
+        default: string;
+    };
+    dismissable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    classNames: import("vue-demi").ComputedRef<string[]>;
+    show: import("vue-demi").Ref<boolean>;
+    icon: import("vue-demi").ComputedRef<any>;
+    close: () => void;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "dismissed"[], "dismissed", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    variant: {
+        type: PropType<StyleVariant>;
+        default: string;
+    };
+    dismissable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onDismissed?: (...args: any[]) => any;
+}, {
+    variant: StyleVariant;
+    dismissable: boolean;
+}>;
+export default _default;

package/dist/components/button/Button.vue

@@ -0,0 +1,247 @@
+<template>
+  <button
+    data-testid="btn"
+    :class="classNames">
+    <slot />
+  </button>
+</template>
+
+<script>
+import {
+  computed,
+  defineComponent
+} from "vue-demi";
+export default defineComponent({
+  props: {
+    variant: {
+      type: String,
+      default: "solid"
+    },
+    color: {
+      type: String,
+      default: "primary"
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    icon: {
+      type: Boolean,
+      default: false
+    },
+    pill: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props) {
+    const classNames = computed(() => {
+      const result = ["btn"];
+      if (props.color)
+        result.push(`btn--${props.color}`);
+      if (props.variant)
+        result.push(`btn--${props.variant}`);
+      if (props.size)
+        result.push(`btn--${props.size}`);
+      if (props.icon)
+        result.push("btn--icon");
+      if (props.pill)
+        result.push("btn--pill");
+      return result;
+    });
+    return { classNames };
+  }
+});
+</script>
+
+<style lang="postcss">
+/**
+* Component Name: Button
+* Component URI : https://www.figma.com/file/JIYmbyRYZHc9bnVp6Npm9K/B-A-S-E-%2F-Components?node-id=291%3A3945
+* Date Created  : Feb 01, 2022
+* Last Update   : June 20, 2022
+*/
+.btn {
+  @apply inline-flex font-medium disabled:opacity-50 disabled:pointer-events-none;
+
+  > svg {
+    @apply self-baseline;
+  }
+
+  /*
+  * Button has 4 different sizing
+  * eg: xs, sm, md, and lg
+  */
+  &--xs {
+    @apply px-2 py-1 gap-1 text-sm rounded-xs;
+  }
+
+  &--sm {
+    @apply px-4 py-2 gap-2 text-base rounded-sm;
+  }
+
+  &--md {
+    @apply px-5 py-3 gap-3 text-base rounded;
+  }
+
+  &--lg {
+    @apply px-8 py-5 gap-4 text-base rounded;
+  }
+
+  /*
+  * Button solid is the
+  * default style variant
+  */
+  &--solid {
+    @apply border border-solid hover:shadow-lg focus:shadow-none active:shadow-none text-white;
+
+    &.btn {
+      &--primary {
+        @apply bg-primary-100 hover:bg-primary-hovered focus:bg-primary-focused active:bg-primary-focused;
+      }
+
+      &--secondary {
+        @apply bg-secondary-100 hover:bg-secondary-hovered focus:bg-secondary-focused active:bg-secondary-focused;
+      }
+
+      &--success {
+        @apply bg-success-100 hover:bg-success-hovered focus:bg-success-focused active:bg-success-focused;
+      }
+
+      &--info {
+        @apply bg-info-100 hover:bg-info-hovered focus:bg-info-focused active:bg-info-focused;
+      }
+
+      &--warning {
+        @apply bg-warning-100 hover:bg-warning-hovered focus:bg-warning-focused active:bg-warning-focused;
+      }
+
+      &--danger {
+        @apply bg-danger-100 hover:bg-danger-hovered focus:border-danger-focused active:bg-danger-focused;
+      }
+
+      &--gold {
+        @apply bg-gold-100 hover:bg-gold-hovered focus:bg-gold-focused active:bg-gold-focused;
+      }
+    }
+  }
+
+  &--outline,
+  &--ghost {
+    @apply border border-solid text-body-75 hover:text-body-100 hover:shadow-lg focus:shadow-none active:shadow-none focus:text-body-100 active:text-body-100;
+  }
+
+  /**
+  * Provide colors in
+  * button outline variant
+  * and border colors for
+  * solid variant
+  */
+  &--solid,
+  &--outline {
+    &.btn {
+      &--primary {
+        @apply border-primary-100 hover:border-primary-hovered active:border-primary-focused focus:border-primary-focused;
+      }
+
+      &--secondary {
+        @apply border-secondary-100 hover:border-secondary-hovered active:border-secondary-focused focus:border-secondary-focused;
+      }
+
+      &--success {
+        @apply border-success-100 hover:border-success-hovered active:border-success-focused focus:border-success-focused;
+      }
+
+      &--info {
+        @apply border-info-100 hover:border-info-hovered active:border-info-focused focus:border-info-focused;
+      }
+
+      &--warning {
+        @apply border-warning-100 hover:border-warning-hovered active:border-warning-focused focus:border-warning-focused;
+      }
+
+      &--danger {
+        @apply border-danger-100 hover:border-danger-hovered active:border-danger-focused focus:border-danger-focused;
+      }
+
+      &--gold {
+        @apply border-gold-100 hover:border-gold-hovered active:border-gold-focused focus:border-gold-focused;
+      }
+    }
+  }
+
+  /**
+  * Button ghost variant
+  */
+  &--ghost {
+    @apply border-transparent bg-transparent hover:border-black hover:border-opacity-5 hover:bg-black hover:bg-opacity-5 active:bg-black active:bg-opacity-5 active:border-black active:border-opacity-5 focus:bg-black focus:bg-opacity-5 focus:border-black focus:border-opacity-5;
+  }
+
+  /**
+  * Provide text colors
+  * in button link variant
+  */
+  &--link {
+    @apply border border-transparent underline hover:underline;
+
+    &.btn {
+      &--primary {
+        @apply text-primary-100 hover:text-primary-hovered active:text-primary-focused focus:text-primary-focused;
+      }
+
+      &--secondary {
+        @apply text-secondary-100 hover:text-secondary-hovered active:text-secondary-focused focus:text-secondary-focused;
+      }
+
+      &--success {
+        @apply text-success-100 hover:text-success-hovered active:text-success-focused focus:text-success-focused;
+      }
+
+      &--info {
+        @apply text-info-100 hover:text-info-hovered active:text-info-focused focus:text-info-focused;
+      }
+
+      &--warning {
+        @apply text-warning-100 hover:text-warning-hovered active:text-warning-focused focus:text-warning-focused;
+      }
+
+      &--danger {
+        @apply text-danger-100 hover:text-danger-hovered active:text-danger-focused focus:text-danger-focused;
+      }
+
+      &--gold {
+        @apply text-gold-100 hover:text-gold-hovered active:text-gold-focused focus:text-gold-focused;
+      }
+    }
+  }
+
+  &--input {
+    @apply border border-solid border-secondary-25 text-subtext-75 bg-white hover:bg-secondary-25 hover:text-body-75 focus:bg-secondary-25 focus:text-body-75 active:border-secondary-75 active:ring active:ring-secondary-25 active:ring-opacity-30;
+  }
+
+  /**
+  * Button icon variant
+  */
+  &--icon {
+    &.btn--xs {
+      @apply p-1;
+    }
+
+    &.btn--sm {
+      @apply p-2;
+    }
+
+    &.btn--md {
+      @apply p-3;
+    }
+
+    &.btn--lg {
+      @apply p-4;
+    }
+  }
+
+  &--pill {
+    @apply rounded-full;
+  }
+}
+</style>

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

@@ -0,0 +1,56 @@
+import { PropType } from 'vue-demi';
+export declare type StyleVariant = 'solid' | 'outline' | 'ghost' | 'link' | 'input';
+export declare type ColorVariant = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'gold';
+export declare type SizeVariant = 'xs' | 'sm' | 'md' | 'lg';
+declare const _default: import("vue-demi").DefineComponent<{
+    variant: {
+        type: PropType<StyleVariant>;
+        default: string;
+    };
+    color: {
+        type: PropType<ColorVariant>;
+        default: string;
+    };
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+    icon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    pill: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    classNames: import("vue-demi").ComputedRef<string[]>;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    variant: {
+        type: PropType<StyleVariant>;
+        default: string;
+    };
+    color: {
+        type: PropType<ColorVariant>;
+        default: string;
+    };
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+    icon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    pill: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    icon: boolean;
+    variant: StyleVariant;
+    size: SizeVariant;
+    color: ColorVariant;
+    pill: boolean;
+}>;
+export default _default;

package/dist/components/button-group/ButtonGroup.vue

@@ -0,0 +1,161 @@
+<template>
+  <div
+    data-testid="btn-group"
+    :class="classNames">
+    <slot />
+  </div>
+</template>
+
+<script>
+import {
+  defineComponent,
+  computed
+} from "vue-demi";
+export default defineComponent({
+  props: {
+    size: {
+      type: String,
+      default: "md"
+    },
+    pill: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props) {
+    const classNames = computed(() => {
+      const result = ["btn-group"];
+      if (props.size)
+        result.push(`btn-group--${props.size}`);
+      if (props.pill)
+        result.push("btn-group--pill");
+      return result;
+    });
+    return { classNames };
+  }
+});
+</script>
+
+<style lang="postcss">
+.btn-group {
+  @apply inline-flex items-center;
+
+  &--xs {
+    .btn {
+      &:not(.btn--icon),
+      .dropdown > & {
+        @apply px-2 py-1 gap-1 text-sm;
+      }
+
+      &:first-child,
+      .dropdown:first-child {
+        @apply rounded-l-xs;
+      }
+
+      &:last-child {
+        @apply rounded-r-xs;
+      }
+    }
+  }
+
+  &--sm {
+    .btn {
+      &:not(.btn--icon),
+      .dropdown .btn {
+        @apply px-4 py-2 gap-2 text-base;
+
+        &:first-child {
+          @apply rounded-l-sm;
+        }
+
+        &:last-child {
+          @apply rounded-r-sm;
+        }
+      }
+    }
+  }
+
+  &--md {
+    .btn {
+      &:not(.btn--icon),
+      .dropdown > .btn {
+        @apply px-5 py-3 gap-3 text-base;
+      }
+    }
+  }
+
+  &--lg {
+    .btn {
+      &:not(.btn--icon),
+      .dropdown .btn {
+        @apply px-8 py-5 gap-4 text-base;
+      }
+    }
+  }
+
+  &--md,
+  &--lg {
+    .btn {
+      &:first-child {
+        @apply rounded-l;
+      }
+
+      &:last-child {
+        @apply rounded-r;
+      }
+    }
+
+    .dropdown {
+      &:first-child > .btn {
+        @apply rounded-l;
+      }
+
+      &:last-child > .btn {
+        @apply rounded-r;
+      }
+    }
+  }
+
+  &--pill {
+    .btn,
+    .dropdown .btn {
+      &:first-child {
+        @apply rounded-l-full;
+      }
+
+      &:last-child {
+        @apply rounded-r-full;
+      }
+    }
+  }
+
+  .btn {
+    @apply rounded-none;
+
+    &--solid,
+    &--ghost {
+      &:not(:last-child) {
+        &.btn--primary,
+        &.btn--secondary,
+        &.btn--success,
+        &.btn--warning,
+        &.btn--info,
+        &.btn--danger,
+        &.btn--gold {
+          @apply border-r-black border-opacity-10;
+        }
+      }
+    }
+
+    &--outline,
+    &--ghost {
+      @apply ml-[-1px];
+    }
+  }
+
+  .dropdown > .btn {
+    @apply rounded-none;
+  }
+
+}
+</style>

package/dist/components/button-group/ButtonGroup.vue.d.ts

@@ -0,0 +1,26 @@
+import { PropType } from 'vue-demi';
+declare const _default: import("vue-demi").DefineComponent<{
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+    pill: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    classNames: import("vue-demi").ComputedRef<string[]>;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+    pill: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    size: SizeVariant;
+    pill: boolean;
+}>;
+export default _default;