@webitel/ui-sdk 0.1.2 → 0.1.3-vite

package/src/components/transitions/wt-expand-transition.vue

@@ -0,0 +1,72 @@
+<template>
+  <transition
+    name="expand"
+    @after-enter="afterEnter"
+    @enter="enter"
+    @leave="leave"
+  >
+    <slot></slot>
+  </transition>
+</template>
+
+<script>
+/* eslint-disable no-param-reassign */
+// https://markus.oberlehner.net/blog/transition-to-height-auto-with-vue/
+export default {
+  name: 'wt-expand-transition',
+  methods: {
+    afterEnter(element) {
+      element.style.height = 'auto';
+    },
+    enter(element) {
+      const { width } = getComputedStyle(element);
+      element.style.width = width;
+      element.style.position = 'absolute';
+      element.style.visibility = 'hidden';
+      element.style.height = 'auto';
+
+      const { height } = getComputedStyle(element);
+      element.style.width = null;
+      element.style.position = null;
+      element.style.visibility = null;
+      element.style.height = 0;
+
+      // Force repaint to make sure the
+      // animation is triggered correctly.
+      // eslint-disable-next-line no-unused-expressions
+      getComputedStyle(element).height;
+
+      // eslint-disable-next-line no-return-assign
+      requestAnimationFrame(() => element.style.height = height);
+    },
+    leave(element) {
+      const { height } = getComputedStyle(element);
+      element.style.height = height;
+      // eslint-disable-next-line no-unused-expressions
+      getComputedStyle(element).height;
+
+      // eslint-disable-next-line no-return-assign
+      requestAnimationFrame(() => element.style.height = 0);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.expand-enter-active,
+.expand-leave-active {
+  transition: height var(--transition);
+  overflow: hidden;
+}
+
+.expand-enter,
+.expand-leave-to {
+  height: 0;
+}
+/*
+  // expand animation optimization
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  perspective: 1000px;
+ */
+</style>

package/src/components/wt-app-header/__tests__/WtAppHeader.spec.js

@@ -0,0 +1,19 @@
+import { shallowMount } from '@vue/test-utils';
+import WtAppHeader from '../wt-app-header.vue';
+
+describe('WtAppHeader', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtAppHeader);
+    expect(wrapper.classes('wt-app-header')).toBe(true);
+  });
+
+  it('renders a app-header content via default slot', () => {
+    const content = 'app header content';
+    const wrapper = shallowMount(WtAppHeader, {
+      slots: {
+        default: content,
+      },
+    });
+    expect(wrapper.find('.wt-app-header').text()).toBe(content);
+  });
+});

package/src/components/wt-app-header/__tests__/WtAppNavigator.spec.js

@@ -0,0 +1,23 @@
+import { shallowMount } from '@vue/test-utils';
+import WebitelApplications from '../../../enums/WebitelApplications/WebitelApplications.enum';
+import WtAppNavigator from '../wt-app-navigator.vue';
+
+const apps = [
+  { name: WebitelApplications.ADMIN, href: '' },
+  { name: WebitelApplications.HISTORY, href: '' },
+  { name: WebitelApplications.SUPERVISOR, href: '' },
+];
+describe('WtAppNavigator', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtAppNavigator);
+    expect(wrapper.classes('wt-app-navigator')).toBe(true);
+  });
+  it('renders specified app cards', () => {
+    const wrapper = shallowMount(WtAppNavigator, {
+      props: {
+        apps,
+      },
+    });
+    expect(wrapper.findAll('.wt-app-navigator__card').length).toBe(3);
+  });
+});

package/src/components/wt-app-header/__tests__/WtHeaderActions.spec.js

@@ -0,0 +1,21 @@
+import { shallowMount } from '@vue/test-utils';
+import WtHeaderActions from '../wt-header-actions.vue';
+
+describe('WtHeaderActions', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtHeaderActions);
+    expect(wrapper.classes('wt-header-actions')).toBe(true);
+  });
+
+  it('renders user data', () => {
+    const user = {
+      name: 'user nanme',
+      account: 'acc@ou.nt',
+    };
+    const wrapper = shallowMount(WtHeaderActions, {
+      props: { user },
+    });
+    expect(wrapper.find('.wt-header-actions__name').text()).toBe(user.name);
+    expect(wrapper.find('.wt-header-actions__account').text()).toBe(user.account);
+  });
+});

package/src/components/wt-app-header/_variables.scss

@@ -0,0 +1,25 @@
+
+:root {
+  --wt-app-header-min-height: 56px;
+  --wt-app-header-padding: var(--spacing-sm);
+  --wt-app-header-background: var(--dp-9-surface-color);
+
+  --wt-app-header-content-gap: var(--spacing-sm);
+  --wt-app-header-content-panel-margin: var(--spacing-2xs);
+  --wt-app-header-content-bg-color: var(--main-color);
+  --wt-app-header-content-z-index: 11;
+
+  --wt-app-navigator-max-height: 80vh;
+  --wt-app-navigator-padding: var(--wt-app-header-content-gap);
+  --wt-app-navigator-item-size: 120px;
+  --wt-app-navigator-item-gap: var(--wt-app-header-content-gap);
+  --wt-app-navigator-item-border: 1px solid;
+  --wt-app-navigator-item-border-color: var(--secondary-color);
+  --wt-app-navigator-item-border-color--hover: var(--primary-color);
+
+  --wt-header-actions-min-width: 120px;
+  --wt-header-actions-content-sections-gap: var(--spacing-lg);
+  --wt-header-actions-padding: var(--wt-app-header-content-gap);
+  --wt-header-actions-action-bg-color--hover: var(--secondary-color);
+  --wt-header-actions-action-link-padding: var(--spacing-xs);
+}

package/src/components/wt-app-header/wt-app-header.vue

@@ -0,0 +1,29 @@
+<template>
+  <header class="wt-app-header">
+    <slot></slot>
+  </header>
+</template>
+
+<script>
+export default {
+  name: 'wt-app-header',
+};
+</script>
+
+<style lang="scss">
+@import './variables.scss';
+</style>
+
+<style lang="scss" scoped>
+
+.wt-app-header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--wt-app-header-content-gap);
+  min-height: var(--wt-app-header-min-height); // fixed height because anything can be put inside slot, so padding won't work properly
+  padding: var(--wt-app-header-padding);
+  box-sizing: border-box;
+  background: var(--wt-app-header-background);
+}
+</style>

package/src/components/wt-app-header/wt-app-navigator.vue

@@ -0,0 +1,278 @@
+<template>
+  <div v-clickaway="close" class="wt-app-navigator">
+    <wt-tooltip>
+      <template v-slot:activator>
+        <wt-icon-btn
+          :class="{'active': isOpened}"
+          class="wt-app-navigator__btn"
+          icon="app-navigator"
+          @click="isOpened = !isOpened"
+        ></wt-icon-btn>
+      </template>
+      {{ $t('webitelUI.appNavigator.title') }}
+    </wt-tooltip>
+
+    <transition name="fade">
+      <nav
+        v-show="isOpened"
+        class="wt-app-navigator__nav-wrapper"
+      >
+        <h3 class="wt-app-navigator__nav-title">
+          {{ $t('webitelUI.appNavigator.title') }}
+        </h3>
+        <ul class="wt-app-navigator__nav">
+
+          <li
+            v-if="formattedApps[WebitelApplications.AGENT]"
+            :class="{'active': formattedApps[WebitelApplications.AGENT].currentApp }"
+            class="wt-app-navigator__card"
+          >
+            <a
+              :href="formattedApps[WebitelApplications.AGENT].href"
+              :title="$t(`webitelUI.appNavigator.${[WebitelApplications.AGENT]}`)"
+              class="wt-app-navigator__card__link"
+              target="_blank"
+            >
+              <img
+                :alt="`${[WebitelApplications.AGENT]}-pic`"
+                class="wt-app-navigator__card__img"
+                src="../../assets/components/organisms/wt-app-header/app-navigator/app-agent.svg"
+              >
+            </a>
+          </li>
+
+          <li
+            v-if="formattedApps[WebitelApplications.SUPERVISOR]"
+            :class="{'active': formattedApps[WebitelApplications.SUPERVISOR].currentApp }"
+            class="wt-app-navigator__card"
+          >
+            <a
+              :href="formattedApps[WebitelApplications.SUPERVISOR].href"
+              :title="$t(`webitelUI.appNavigator.${[WebitelApplications.SUPERVISOR]}`)"
+              class="wt-app-navigator__card__link"
+              target="_blank"
+            >
+              <img
+                :alt="`${[WebitelApplications.SUPERVISOR]}-pic`"
+                class="wt-app-navigator__card__img"
+                src="../../assets/components/organisms/wt-app-header/app-navigator/app-supervisor.svg"
+              >
+            </a>
+          </li>
+
+          <li
+            v-if="formattedApps[WebitelApplications.HISTORY]"
+            :class="{'active': formattedApps[WebitelApplications.HISTORY].currentApp }"
+            class="wt-app-navigator__card"
+          >
+            <a
+              :href="formattedApps[WebitelApplications.HISTORY].href"
+              :title="$t(`webitelUI.appNavigator.${[WebitelApplications.HISTORY]}`)"
+              class="wt-app-navigator__card__link"
+              target="_blank"
+            >
+              <img
+                :alt="`${[WebitelApplications.HISTORY]}-pic`"
+                class="wt-app-navigator__card__img"
+                src="../../assets/components/organisms/wt-app-header/app-navigator/app-history.svg"
+              >
+            </a>
+          </li>
+
+          <li
+            v-if="false && formattedApps[WebitelApplications.AUDIT]"
+            :class="{'active': formattedApps[WebitelApplications.AUDIT].currentApp }"
+            class="wt-app-navigator__card"
+          >
+            <a
+              :href="formattedApps[WebitelApplications.AUDIT].href"
+              :title="$t(`webitelUI.appNavigator.${[WebitelApplications.AUDIT]}`)"
+              class="wt-app-navigator__card__link"
+              target="_blank"
+            >
+              <img
+                :alt="`${[WebitelApplications.AUDIT]}-pic`"
+                class="wt-app-navigator__card__img"
+                src="../../assets/components/organisms/wt-app-header/app-navigator/app-audit.svg"
+              >
+            </a>
+          </li>
+
+          <li
+            v-if="formattedApps[WebitelApplications.ADMIN]"
+            :class="{'active': formattedApps[WebitelApplications.ADMIN].currentApp }"
+            class="wt-app-navigator__card"
+          >
+            <a
+              :href="formattedApps[WebitelApplications.ADMIN].href"
+              :title="$t(`webitelUI.appNavigator.${[WebitelApplications.ADMIN]}`)"
+              class="wt-app-navigator__card__link"
+              target="_blank"
+            >
+              <img
+                :alt="`${[WebitelApplications.ADMIN]}-pic`"
+                class="wt-app-navigator__card__img"
+                src="../../assets/components/organisms/wt-app-header/app-navigator/app-admin.svg"
+              >
+            </a>
+          </li>
+
+          <li
+            v-if="formattedApps[WebitelApplications.ANALYTICS]"
+            :class="{'active': formattedApps[WebitelApplications.ANALYTICS].currentApp }"
+            class="wt-app-navigator__card"
+          >
+            <a
+              :href="formattedApps[WebitelApplications.ANALYTICS].href"
+              :title="$t(`webitelUI.appNavigator.${[WebitelApplications.ANALYTICS]}`)"
+              class="wt-app-navigator__card__link"
+              target="_blank"
+            >
+              <img
+                :alt="`${[WebitelApplications.ANALYTICS]}-pic`"
+                class="wt-app-navigator__card__img"
+                src="../../assets/components/organisms/wt-app-header/app-navigator/app-analytics.svg"
+              >
+            </a>
+          </li>
+
+          <li
+            v-if="formattedApps[WebitelApplications.AUDIT]"
+            :class="{'active': formattedApps[WebitelApplications.AUDIT].currentApp }"
+            class="wt-app-navigator__card"
+          >
+            <a
+              :href="formattedApps[WebitelApplications.AUDIT].href"
+              :title="$t(`webitelUI.appNavigator.${[WebitelApplications.AUDIT]}`)"
+              class="wt-app-navigator__card__link"
+              target="_blank"
+            >
+              <img
+                :alt="`${[WebitelApplications.AUDIT]}-pic`"
+                class="wt-app-navigator__card__img"
+                src="../../assets/components/organisms/wt-app-header/app-navigator/app-audit.svg"
+              >
+            </a>
+          </li>
+
+          <li
+            v-if="formattedApps[WebitelApplications.CRM]"
+            :class="{'active': formattedApps[WebitelApplications.CRM].currentApp }"
+            class="wt-app-navigator__card"
+          >
+            <a
+              :href="formattedApps[WebitelApplications.CRM].href"
+              :title="$t(`webitelUI.appNavigator.${[WebitelApplications.CRM]}`)"
+              class="wt-app-navigator__card__link"
+              target="_blank"
+            >
+              <img
+                :alt="`${[WebitelApplications.CRM]}-pic`"
+                class="wt-app-navigator__card__img"
+                src="../../assets/components/organisms/wt-app-header/app-navigator/app-crm.svg"
+              >
+            </a>
+          </li>
+
+        </ul>
+      </nav>
+    </transition>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue';
+import WebitelApplications from '../../enums/WebitelApplications/WebitelApplications.enum';
+
+const props = defineProps({
+  currentApp: {
+    type: String,
+  },
+  apps: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const isOpened = ref(false);
+
+const formattedApps = computed(() => props.apps.reduce((apps, app) => ({
+  ...apps,
+  [app.name]: {
+    ...app,
+    currentApp: props.currentApp === app.name,
+  },
+}), {}));
+
+function close() {
+  isOpened.value = false;
+}
+
+</script>
+
+<style lang="scss" scoped>
+.wt-app-navigator {
+  position: relative;
+  z-index: var(--wt-app-header-content-z-index);
+  display: flex;
+  align-items: center;
+}
+
+// dropdown part
+.wt-app-navigator__nav-wrapper {
+  @extend %wt-scrollbar;
+  position: absolute;
+  top: 100%; // icon
+  right: 0;
+  overflow: auto;
+  max-height: var(--wt-app-navigator-max-height);
+  margin-top: var(--wt-app-header-content-panel-margin);
+  padding: var(--wt-app-header-content-gap);
+  transition: var(--transition);
+  border-radius: var(--border-radius);
+  background: var(--wt-app-header-content-bg-color);
+  box-shadow: var(--elevation-10);
+}
+
+.wt-app-navigator__nav-title {
+  @extend %typo-subtitle-1;
+  margin-bottom: var(--wt-app-header-content-gap);
+  text-align: center;
+  text-transform: uppercase;
+}
+
+// ul with li apps
+.wt-app-navigator__nav {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: var(--wt-app-navigator-item-gap);
+}
+
+.wt-app-navigator__card {
+  box-sizing: border-box;
+  width: var(--wt-app-navigator-item-size);
+  height: var(--wt-app-navigator-item-size);
+  transition: var(--transition);
+  border: var(--wt-app-navigator-item-border);
+  border-color: var(--wt-app-navigator-item-border-color);
+  border-radius: var(--border-radius);
+
+  &.active, &:hover {
+    border-color: var(--wt-app-navigator-item-border-color--hover);
+  }
+}
+
+// a tag
+.wt-app-navigator__card__link {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+
+// img inside a
+.wt-app-navigator__card__img {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/src/components/wt-app-header/wt-header-actions.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="wt-header-actions">
+    <wt-tooltip>
+      <template v-slot:activator>
+        <wt-icon-btn
+          v-clickaway="close"
+          :class="{'active': isOpened}"
+          class="wt-header-actions__btn"
+          icon="account"
+          @click="isOpened = !isOpened"
+        ></wt-icon-btn>
+      </template>
+      {{ $t('webitelUI.headerActions.account') }}
+    </wt-tooltip>
+
+    <transition name="fade">
+      <section v-show="isOpened" class="wt-header-actions__panel-wrapper">
+        <header v-if="isHeader" class="wt-header-actions__header">
+          <h3
+            class="wt-header-actions__name"
+          >{{ userName }}</h3>
+          <p
+            class="wt-header-actions__account"
+          >{{ userAccount }}</p>
+        </header>
+        <ul class="wt-header-actions__actions-wrapper">
+          <li class="wt-header-actions__action">
+            <a
+              class="wt-header-actions__action__link"
+              href="https://docs.webitel.com/display/WEP/Webitel+Elastic+Platform"
+              target="_blank"
+              @click="close"
+            >
+              <wt-icon icon="docs"></wt-icon>
+              <span>{{ $t('webitelUI.headerActions.docs') }}</span>
+            </a>
+          </li>
+          <li class="wt-header-actions__action">
+            <a
+              class="wt-header-actions__action__link"
+              @click.prevent="settings"
+            >
+              <wt-icon icon="settings"></wt-icon>
+              <span>{{ $t('webitelUI.headerActions.settings') }}</span>
+            </a>
+          </li>
+          <li class="wt-header-actions__action wt-header-actions__action--logout">
+            <a
+              class="wt-header-actions__action__link"
+              @click.prevent="logout"
+            >
+              <wt-icon color="danger" icon="logout"></wt-icon>
+              <span>{{ $t('webitelUI.headerActions.logout') }}</span>
+            </a>
+          </li>
+        </ul>
+        <footer v-if="isFooter" class="wt-header-actions__footer">
+          <p class="wt-header-actions__build__version">
+            {{ buildVersion }}
+          </p>
+        </footer>
+      </section>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'wt-header-actions',
+  data: () => ({
+    isOpened: false,
+  }),
+  props: {
+    user: {
+      type: Object,
+      default: () => ({}),
+    },
+    buildInfo: {
+      type: Object,
+    },
+  },
+
+  computed: {
+    isHeader() {
+      return !!(this.userName || this.userAccount);
+    },
+    isFooter() {
+      return this.buildInfo;
+    },
+    userName() {
+      return this.user.name || this.user.username;
+    },
+    userAccount() {
+      return this.user.preferredUsername || this.user.account;
+    },
+    buildVersion() {
+      return `${this.$t('webitelUI.headerActions.buildVersion')}: v${this.buildInfo.release}-${this.buildInfo.build}`;
+    },
+  },
+
+  methods: {
+    settings() {
+      this.$emit('settings');
+      this.close();
+    },
+
+    logout() {
+      this.$emit('logout');
+      this.close();
+    },
+
+    close() {
+      this.isOpened = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wt-header-actions {
+  position: relative;
+  z-index: var(--wt-app-header-content-z-index);
+  display: flex;
+  align-items: center;
+}
+
+.wt-header-actions__panel-wrapper {
+  position: absolute;
+  top: 100%; // icon
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--wt-header-actions-content-sections-gap);
+  min-width: var(--wt-header-actions-min-width);
+  margin-top: var(--wt-app-header-content-panel-margin);
+  padding: var(--wt-header-actions-padding);
+  transition: var(--transition);
+  border-radius: var(--border-radius);
+  background: var(--wt-app-header-content-bg-color);
+  box-shadow: var(--elevation-10);
+}
+
+.wt-header-actions__name {
+  @extend %typo-subtitle-1;
+  white-space: nowrap;
+}
+
+.wt-header-actions__account {
+  @extend %typo-body-1;
+  white-space: nowrap;
+}
+
+.wt-header-actions__action {
+  display: flex;
+  transition: var(--transition);
+
+  &:hover {
+    background: var(--wt-header-actions-action-bg-color--hover);
+  }
+
+  .wt-header-actions__action__link {
+    @extend %typo-body-1;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: var(--wt-header-actions-action-link-padding);
+    cursor: pointer;
+
+    .wt-icon {
+      margin-right: var(--wt-header-actions-action-link-padding);
+    }
+  }
+
+  &--logout .wt-header-actions__action__link {
+    color: var(--false-color);
+  }
+}
+
+.wt-header-actions__build__version {
+  @extend %typo-caption;
+  white-space: nowrap;
+}
+</style>

package/src/components/wt-avatar/__tests__/wt-avatar.spec.js

@@ -0,0 +1,9 @@
+import { shallowMount } from '@vue/test-utils';
+import WtAvatar from '../wt-avatar.vue';
+
+describe('WtAvatar', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtAvatar);
+    expect(wrapper.isVisible()).toBe(true);
+  });
+});

package/src/components/wt-avatar/_variables.scss

@@ -0,0 +1,32 @@
+:root {
+  --avatar-size--size-xs: calc(var(--_spacing-multiplicator) * 3);
+  --avatar-size--size-sm: calc(var(--_spacing-multiplicator) * 4);
+  --avatar-size--size-md: calc(var(--_spacing-multiplicator) * 5);
+  --avatar-size--size-lg: calc(var(--_spacing-multiplicator) * 7);
+  --avatar-size--size-xl: calc(var(--_spacing-multiplicator) * 9);
+  --avatar-size--size-2xl: calc(var(--_spacing-multiplicator) * 12);
+  --avatar-size--size-3xl: calc(var(--_spacing-multiplicator) * 16);
+
+  --avatar-size: var(--avatar-size--size-md);
+
+  --online-color: var(--true-color);
+  --dnd-color: var(--primary-color);
+  --busy-color: var(--false-color);
+  --offline-color: var(--secondary-color);
+
+  --avatar-font-color: var(--main-color);
+
+  --avatar-letters-p1-color: var(--red-lighten-2);
+  --avatar-letters-p2-color: var(--purple-lighten-2);
+  --avatar-letters-p3-color: var(--deep-purple-lighten-2);
+  --avatar-letters-p4-color: var(--indigo-lighten-2);
+  --avatar-letters-p5-color: var(--blue-lighten-1);
+  --avatar-letters-p6-color: var(--cyan-lighten-1);
+  --avatar-letters-p7-color: var(--teal-darken-3);
+  --avatar-letters-p8-color: var(--green-darken-2);
+  --avatar-letters-p9-color: var(--lime-darken-3);
+  --avatar-letters-p10-color: var(--yellow-darken-3);
+  --avatar-letters-p11-color: var(--amber-lighten-2);
+  --avatar-letters-p12-color: var(--orange-darken-1);
+  --avatar-letters-p13-color: var(--deep-purple-lighten-1);
+}