@privyid/persona 1.2.1 → 1.2.2-dev.1

package/dist/components/nav/Nav.vue

@@ -0,0 +1,403 @@
+<template>
+  <ul
+    data-testid="nav"
+    :class="classNames">
+    <li
+      class="nav__title">
+      <span
+        class="nav__title__item"
+        :class="[!title && titleActionLabel ? 'justify-end' : 'justify-between']">
+        <Caption
+          v-if="title"
+          weight="bold"
+          transform="capitalize">
+          {{ title }}
+        </Caption>
+        <Text
+          v-if="titleActionLabel && titleActionUrl"
+          data-testid="nav-action"
+          variant="caption"
+          :href="titleActionUrl">
+          {{ titleActionLabel }}
+        </Text>
+      </span>
+    </li>
+    <slot />
+  </ul>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import Caption from "../caption/Caption.vue";
+import Text from "../text/Text.vue";
+const props = defineProps({
+  fill: {
+    type: Boolean,
+    default: false
+  },
+  justified: {
+    type: Boolean,
+    default: false
+  },
+  variant: {
+    type: String,
+    default: "pills"
+  },
+  align: {
+    type: String,
+    default: "left"
+  },
+  vertical: {
+    type: Boolean,
+    default: false
+  },
+  title: {
+    type: String,
+    default: void 0
+  },
+  titleActionLabel: {
+    type: [String, Object],
+    default: void 0
+  },
+  titleActionUrl: {
+    type: [String, Object],
+    default: void 0
+  },
+  condensed: {
+    type: Boolean,
+    default: false
+  }
+});
+const classNames = computed(() => {
+  const result = ["nav"];
+  if (props.fill)
+    result.push("nav--fill");
+  if (props.justified)
+    result.push("nav--justified");
+  if (props.variant)
+    result.push(`nav--${props.variant}`);
+  if (props.align)
+    result.push(`nav--align-${props.align}`);
+  if (props.vertical)
+    result.push("nav--vertical");
+  if (props.title || props.titleActionLabel)
+    result.push("nav--has-title");
+  if (props.condensed)
+    result.push("nav--condensed");
+  return result;
+});
+</script>
+
+<style lang="postcss">
+/**
+* Component Name: Navigation
+* Component URI : https://www.figma.com/file/tVQNwXeQkMtZlX1x3qjJu8/B-A-S-E-%2F-Style-Guide?node-id=262%3A2160
+* Date Created  : Aug 01, 2022
+* Last Update   : Aug 03, 2022
+*/
+.nav {
+  --p-border-nav-link-active: theme(borderColor.brand.accent.DEFAULT);
+  --p-border-dark-nav-link-active: theme(borderColor.dark.brand.accent.DEFAULT);
+
+  --p-bg-nav-tabs-active: theme(backgroundColor.default.DEFAULT);
+  --p-bg-dark-nav-tabs-active: theme(backgroundColor.dark.default.DEFAULT);
+
+  --p-bg-nav-pills-active: theme(backgroundColor.default.alpha);
+  --p-bg-dark-nav-pills-active: theme(backgroundColor.default.alpha);
+
+  /**
+  * Default navigation
+  * is horizontal
+  */
+  @apply pl-2 list-none flex flex-wrap mb-0;
+
+  &:not(.nav--vertical):not(.navbar__nav) .nav__item {
+    @apply first:ml-2 mr-2 last:mr-0;
+  }
+
+  &__item > &__link {
+    @apply no-underline transition-colors duration-150 ease-out;
+  }
+
+  & > &__item {
+    .nav__link {
+      @apply text-subtle;
+      @apply dark:text-dark-subtle;
+
+      &:hover,
+      &--active,
+      &.router-link-active:not(.nav__link--exact),
+      &.router-link-exact-active.nav__link--exact {
+        @apply text-default;
+        @apply dark:text-dark-default;
+      }
+
+      &--disabled {
+        @apply text-muted hover:text-muted focus:text-muted active:text-muted;
+        @apply dark:text-dark-muted hover:dark:text-dark-muted focus:dark:text-dark-muted active:dark:text-dark-muted;
+      }
+    }
+  }
+
+  /*
+  * Navigation variant:
+  * Lines
+  */
+  &&--lines {
+    @apply text-center;
+
+    &:not(.nav--vertical) {
+      .nav__link {
+        @apply border-x-0;
+      }
+    }
+    /**
+    * Set active state
+    * with border-bottom
+    */
+    .nav__link {
+      &--active,
+      &.router-link-active:not(.nav__link--exact),
+      &.router-link-exact-active.nav__link--exact {
+        &:not(.nav__link--disabled) {
+          @apply border-b-[color:var(--p-border-nav-link-active)];
+          @apply dark:border-b-[color:var(--p-border-dark-nav-link-active)];
+        }
+      }
+    }
+
+    /**
+    * Active state of Lines
+    * in vertical
+    */
+    &.nav--vertical {
+      .nav__link {
+        @apply border-y-0;
+
+        &--active,
+        &.router-link-active:not(.nav__link--exact),
+        &.router-link-exact-active.nav__link--exact {
+          &:not(.nav__link--disabled) {
+            @apply border-r border-r-[color:var(--p-border-nav-link-active)] rounded-tr-none;
+            @apply dark:border-r-[color:var(--p-border-dark-nav-link-active)];
+          }
+        }
+      }
+
+      &.nav--align-right {
+        .nav__link {
+          @apply border-r-0;
+
+          &--active,
+          &.router-link-active:not(.nav__link--exact),
+          &.router-link-exact-active.nav__link--exact {
+            &:not(.nav__link--disabled) {
+              @apply border-l border-l-[color:var(--p-border-nav-link-active)] rounded-tl-none;
+              @apply dark:border-l-[color:var(--p-border-dark-nav-link-active)];
+            }
+          }
+        }
+      }
+    }
+  }
+
+  /*
+  * Navigation variant:
+  * Tabs
+  */
+  &&--tabs {
+    /**
+    * Set active state
+    * with bordered item
+    * except in bottom-side
+    */
+    .nav__link {
+      &--active,
+      &.router-link-active:not(.nav__link--exact),
+      &.router-link-exact-active.nav__link--exact {
+        &:not(.nav__link--disabled) {
+          @apply border-t-default border-x-default bg-[color:var(--p-bg-nav-tabs-active)];
+          @apply dark:border-t-dark-default dark:border-x-dark-default dark:bg-[color:var(--p-bg-dark-nav-tabs-active)];
+        }
+      }
+    }
+
+    /**
+    * Active state of Tabs
+    * in vertical
+    */
+    &.nav--vertical {
+      .nav__link {
+        &--active,
+        &.router-link-active:not(.nav__link--exact),
+        &.router-link-exact-active.nav__link--exact {
+          &:not(.nav__link--disabled) {
+            @apply border-l-default border-y-default border-r-transparent bg-[color:var(--p-bg-nav-tabs-active)] rounded-l rounded-r-none;
+            @apply dark:border-l-dark-default dark:border-y-dark-default dark:border-r-transparent dark:bg-[color:var(--p-bg-dark-nav-tabs-active)];
+          }
+        }
+      }
+
+      &.nav--align-right {
+        .nav__link {
+          &--active,
+          &.router-link-active:not(.nav__link--exact),
+          &.router-link-exact-active.nav__link--exact {
+            &:not(.nav__link--disabled) {
+              @apply border-r-default border-y-default border-l-transparent rounded-r rounded-l-none;
+              @apply dark:border-r-dark-default dark:border-y-dark-default dark:border-l-transparent;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  /*
+  * Navigation variant:
+  * Pills
+  */
+  &&--pills {
+    @apply pb-2;
+
+    /**
+    * Set active state
+    * with background
+    */
+    .nav__link {
+      &--active,
+      &.router-link-active:not(.nav__link--exact),
+      &.router-link-exact-active.nav__link--exact {
+        &:not(.nav__link--disabled) {
+          @apply bg-[color:var(--p-bg-nav-pills-active)] rounded-b;
+          @apply dark:bg-[color:var(--p-bg-dark-nav-pills-active)];
+        }
+      }
+    }
+
+    /**
+    * Remove background of
+    * active state in
+    * condensed mode
+    */
+    &.nav--condensed {
+      .nav__link {
+        &--active,
+        &.router-link-active:not(.nav__link--exact),
+        &.router-link-exact-active.nav__link--exact {
+          @apply bg-transparent;
+          @apply dark:bg-transparent;
+        }
+      }
+    }
+
+    &.nav--vertical {
+      @apply pb-0 pr-2;
+    }
+  }
+
+  /*
+  * Navigation alignment
+  */
+  &&--align {
+    &-left {
+      @apply justify-start;
+    }
+
+    &-right {
+      @apply justify-end;
+    }
+
+    &-center {
+      @apply justify-center;
+    }
+  }
+
+  /*
+  * Navigation fullwidth
+  */
+  &&--fill,
+  &&--justified {
+    .nav__item {
+      .nav__link {
+        @apply w-full;
+      }
+    }
+  }
+
+  /**
+  * Proportionately fill
+  */
+  &&--fill {
+    .nav {
+      &__item {
+        @apply flex-auto;
+      }
+    }
+  }
+
+  /**
+  * Same width every item
+  */
+  &&--justified {
+    .nav {
+      &__item {
+        @apply basis-0 grow;
+      }
+    }
+  }
+
+  /**
+  * Vertical Navigation
+  */
+  &&--vertical {
+    @apply pt-2 flex-col;
+
+    .nav {
+      @apply flex-col;
+
+      .nav__item {
+        @apply first:mx-0;
+      }
+
+      &__link {
+        @apply mb-0;
+      }
+
+      &__title {
+        @apply left-3;
+      }
+    }
+
+    &.nav--align-right {
+      @apply pl-0 ml-auto;
+
+      .nav {
+        &__link {
+          @apply -ml-[1px] mr-0;
+        }
+      }
+    }
+  }
+
+  /**
+  * Navigation Title
+  */
+  &&--has-title {
+    @apply relative pt-7 mt-5;
+  }
+
+  &__title {
+    @apply absolute left-5 top-0 text-base w-[calc(100%-1.75rem)]; /* 1.25rem + 0.75rem (padding) */
+
+    &__item {
+      @apply flex items-center w-full space-x-2;
+    }
+
+    .caption {
+      @apply text-subtle;
+      @apply dark:text-dark-subtle;
+    }
+  }
+}
+</style>

package/dist/components/nav/Nav.vue.d.ts

@@ -0,0 +1,104 @@
+import type { PropType } from 'vue';
+import type { AlignVariant, StyleVariant } from '.';
+import type { RouteLocationRaw } from 'vue-router';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLUListElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    fill: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    justified: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    variant: {
+        type: PropType<StyleVariant>;
+        default: string;
+    };
+    align: {
+        type: PropType<AlignVariant>;
+        default: string;
+    };
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    titleActionLabel: {
+        type: PropType<RouteLocationRaw>;
+        default: undefined;
+    };
+    titleActionUrl: {
+        type: PropType<RouteLocationRaw>;
+        default: undefined;
+    };
+    condensed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    fill: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    justified: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    variant: {
+        type: PropType<StyleVariant>;
+        default: string;
+    };
+    align: {
+        type: PropType<AlignVariant>;
+        default: string;
+    };
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    titleActionLabel: {
+        type: PropType<RouteLocationRaw>;
+        default: undefined;
+    };
+    titleActionUrl: {
+        type: PropType<RouteLocationRaw>;
+        default: undefined;
+    };
+    condensed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    fill: boolean;
+    title: string;
+    variant: StyleVariant;
+    vertical: boolean;
+    align: AlignVariant;
+    justified: boolean;
+    titleActionLabel: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;
+    titleActionUrl: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;
+    condensed: 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/nav/NavCollapse.vue

@@ -0,0 +1,60 @@
+<template>
+  <NavItem
+    ref="root"
+    class="nav__collapse"
+    :class="{ 'nav__collapse--expand': isExpand }"
+    data-testid="nav-collapse"
+    v-bind="$attrs"
+    @click.prevent="toggleExpand">
+    <template #icon>
+      <IconMore class="nav__collapse__icon" />
+    </template>
+    {{ isExpand ? showLessText : showMoreText }}
+  </NavItem>
+  <Collapse :model-value="isExpand">
+    <slot />
+  </Collapse>
+</template>
+
+<script setup>
+import Collapse from "../collapse/Collapse.vue";
+import NavItem from "../nav/NavItem.vue";
+import IconMore from "@privyid/persona-icon/vue/chevron-down/20.vue";
+import { onMounted, ref } from "vue";
+defineProps({
+  showMoreText: {
+    type: String,
+    default: "More"
+  },
+  showLessText: {
+    type: String,
+    default: "Less"
+  }
+});
+const root = ref();
+const isExpand = ref(false);
+function toggleExpand() {
+  isExpand.value = !isExpand.value;
+}
+onMounted(() => {
+  if (root.value.$el) {
+    isExpand.value = root.value.$el.querySelectorAll(".router-link-active:not(.nav__link--exact),.router-link-exact-active.nav__link--exact").length > 0;
+  }
+});
+</script>
+
+<style lang="postcss">
+.nav__collapse {
+  @apply select-none;
+
+  &__icon {
+    @apply transition-transform duration-150 ease-in-out;
+  }
+
+  &--expand {
+    .nav__collapse__icon {
+      @apply rotate-180;
+    }
+  }
+}
+</style>