@webitel/ui-sdk 0.1.2 → 0.1.3-vite

package/src/components/{atoms/wt-loader/wt-loader.vue → wt-loader/_internals/wt-loader--md.vue}

@@ -1,20 +1,19 @@
 <template>
-  <div class="wt-loader">
-    <svg class="wt-loader__svg" viewBox="0 0 80 80">
-      <rect class="wt-loader__svg__rect" x="8" y="8" width="64" height="64"></rect>
+  <div class="wt-loader wt-loader--md">
+    <svg class="wt-loader--md__svg" viewBox="0 0 80 80">
+      <rect class="wt-loader--md__svg__rect" x="8" y="8" width="64" height="64"></rect>
     </svg>
   </div>
 </template>
 
 <script>
   export default {
-    name: 'wt-loader',
   };
 </script>
 
 <style lang="scss" scoped>
   // https://codepen.io/aaroniker/pen/omvYNZ
-  .wt-loader {
+  .wt-loader--md {
     position: relative;
     width: var(--loader-size);
     height: var(--loader-size);
@@ -34,7 +33,7 @@
       animation: dotRect var(--loader-animation-duration) linear infinite;
     }
 
-    .wt-loader__svg {
+    .wt-loader--md__svg {
       display: block;
       width: 100%;
       height: 100%;

package/src/components/wt-loader/_internals/wt-loader--sm.vue

@@ -0,0 +1,73 @@
+<!--https://codepen.io/zapdev/pen/MYJRaj-->
+
+<template>
+  <div class="wt-loader--sm" :class="`wt-loader--sm--${color}`">
+    <svg viewBox="0 0 24 24">
+      <circle cx="12" cy="12" r="8" />
+    </svg>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    color: {
+      type: String,
+      default: 'contrast',
+      description: '["main", "contrast", "icon"]',
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wt-loader--sm {
+  width: 24px;
+  height: 24px;
+
+  svg {
+    animation: rotate 1.5s linear infinite;
+    height: 100%;
+    width: 100%;
+  }
+
+  circle {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+    animation: dash 1.5s ease-in-out infinite 0s;
+    //color 6s ease-in-out infinite -0.75s
+    stroke-linecap: round;
+    fill: none;
+    stroke: var(--contrast-color);
+    stroke-width: 3;
+  }
+  &--main circle {
+    stroke: var(--main-color);
+  }
+  &--icon circle {
+    stroke: var(--icon-color);
+  }
+}
+
+@keyframes rotate {
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -124;
+  }
+}
+</style>

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

@@ -0,0 +1,8 @@
+
+:root {
+  --loader-size: 44px;
+  --loader-dot-size: 6px;
+  --loader-path-color: var(--contrast-color);
+  --loader-dot-color: var(--primary-color);
+  --loader-animation-duration: 3s;
+}

package/src/components/wt-loader/wt-loader.vue

@@ -0,0 +1,37 @@
+<template>
+  <wt-loader-sm class="wt-loader" v-if="size === 'sm'" :color="color"></wt-loader-sm>
+  <wt-loader-md class="wt-loader" v-else-if="size === 'md'"></wt-loader-md>
+</template>
+
+<script>
+import WtLoaderSm from './_internals/wt-loader--sm.vue';
+import WtLoaderMd from './_internals/wt-loader--md.vue';
+
+export default {
+  name: 'wt-loader',
+  components: {
+    WtLoaderSm,
+    WtLoaderMd,
+  },
+  props: {
+    size: {
+      type: String,
+      default: 'md',
+      description: '["sm", "md"]',
+    },
+    color: {
+      type: String,
+      default: 'contrast',
+      description: '["main", "contrast"]',
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import './variables.scss';
+</style>
+
+<style lang="scss" scoped>
+
+</style>

package/src/components/wt-navigation-bar/__tests__/WtNavigationBar.spec.js

@@ -0,0 +1,68 @@
+import { shallowMount, mount } from '@vue/test-utils';
+import { createRouter, createWebHistory } from 'vue-router';
+import WtNavigationBar from '../wt-navigation-bar.vue';
+
+const nav = [
+  { value: '1', route: '/1' },
+  {
+    value: '2',
+    route: '/2',
+    subNav: [
+      { value: '3', route: '3' },
+    ],
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [],
+});
+
+describe('WtNavigationBar', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtNavigationBar);
+    expect(wrapper.classes('wt-navigation-bar')).toBe(true);
+  });
+
+  it('renders navigation links', () => {
+    const wrapper = shallowMount(WtNavigationBar, {
+      global: {
+        plugins: [router],
+      },
+      props: { nav },
+    });
+    const navLinksLen = nav.filter((nav) => !nav.subNav).length;
+    expect(wrapper.findAll('.wt-navigation-bar__nav-item-link').length).toBe(navLinksLen);
+  });
+
+  it('renders navigation expansions with subNav inside it', async () => {
+    const wrapper = mount(WtNavigationBar, {
+      global: {
+        plugins: [router],
+      },
+      props: { nav },
+    });
+    wrapper.find('.wt-navigation-bar__nav-expansion').trigger('click');
+    await wrapper.vm.$nextTick();
+    const navExpansion = nav
+      .find((nav) => nav.subNav)
+      .subNav.length;
+    expect(wrapper
+        .findAll('.wt-navigation-bar__nav-item-link--subnav')
+        .length)
+      .toBe(navExpansion);
+  });
+
+  it('correctly computes subNav nested routes', async () => {
+    const wrapper = mount(WtNavigationBar, {
+      global: {
+        plugins: [router],
+      },
+      props: { nav },
+    });
+    await wrapper.find('.wt-navigation-bar__nav-expansion').trigger('click');
+    await wrapper.vm.$nextTick();
+    expect(wrapper.findComponent('.wt-navigation-bar__nav-item-link--subnav').attributes('href'))
+      .toBe('/2/3');
+  });
+});

package/src/components/wt-navigation-bar/_variables.scss

@@ -0,0 +1,16 @@
+:root {
+  --navigation-bar-width: 340px;
+  --navigation-bar-z-index: 10;
+  --navigation-bar-bg-color: var(--main-color);
+  --navigation-bar-padding: var(--spacing-sm);
+
+  --navigation-bar-header-padding: var(--spacing-xs);
+  --navigation-bar-app-pic-width: 200px;
+  --navigation-bar-app-pic-height: 30px;
+
+  --navigation-bar-list-padding: var(--navigation-bar-padding);
+  --navigation-bar-link-padding: var(--navigation-bar-padding);
+  --navigation-bar-subnav-padding-left: var(--spacing-lg);
+  --navigation-bar-active-expansion-flag-width: 5px;
+  --navigation-bar-active-expansion-name-max-width: calc(100% - var(--icon-md-size) - var(--spacing-xs));
+}

package/src/components/wt-navigation-bar/wt-navigation-bar.vue

@@ -0,0 +1,282 @@
+<template>
+  <aside v-clickaway="close" class="wt-navigation-bar">
+    <wt-icon-btn
+      :class="{'active': isOpened}"
+      class="wt-navigation-bar__menu-btn"
+      icon="menu"
+      @click="isOpened = !isOpened"
+    ></wt-icon-btn>
+    <transition name="fade">
+      <nav v-show="isOpened" class="wt-navigation-bar__nav">
+        <header class="wt-navigation-bar__nav-header">
+          <!--        vue cli build target lib cant handle dynamic require :( -->
+          <img
+            v-if="currentApp === 'admin'"
+            alt="admin"
+            class="wt-navigation-bar__app-pic"
+            src="../../assets/components/organisms/wt-navigation-bar/logo-admin-app.svg"
+          >
+          <img
+            v-if="currentApp === 'agent'"
+            alt="agent"
+            class="wt-navigation-bar__app-pic"
+            src="../../assets/components/organisms/wt-navigation-bar/logo-agent-app.svg"
+          >
+          <img
+            v-if="currentApp === 'audit'"
+            alt="audit"
+            class="wt-navigation-bar__app-pic"
+            src="../../assets/components/organisms/wt-navigation-bar/logo-audit-app.svg"
+          >
+          <img
+            v-if="currentApp === 'history'"
+            alt="history"
+            class="wt-navigation-bar__app-pic"
+            src="../../assets/components/organisms/wt-navigation-bar/logo-history-app.svg"
+          >
+          <img
+            v-if="currentApp === 'supervisor'"
+            alt="supervisor"
+            class="wt-navigation-bar__app-pic"
+            src="../../assets/components/organisms/wt-navigation-bar/logo-supervisor-app.svg"
+          >
+          <img
+            v-if="currentApp === 'crm'"
+            alt="crm"
+            class="wt-navigation-bar__app-pic"
+            src="../../assets/components/organisms/wt-navigation-bar/logo-crm-app.svg"
+          >
+          <wt-icon-btn
+            class="wt-navigation-bar__nav-close"
+            icon="close"
+            @click="isOpened = false"
+          ></wt-icon-btn>
+        </header>
+        <wt-divider />
+        <ul class="wt-navigation-bar__nav-list">
+          <li
+            v-for="(navItem, key) of nav"
+            :key="key"
+            class="wt-navigation-bar__nav-item"
+          >
+            <div v-if="!navItem.subNav">
+              <div class="wt-navigation-bar__nav-item-wrapper">
+                <router-link
+                  :class="{'wt-navigation-bar__nav-item-link--active': currentNav.nav === navItem.value}"
+                  :to="navItem.route"
+                  class="wt-navigation-bar__nav-item-link"
+                  @click="close"
+                > {{ navItem.name || navItem.value }}
+                </router-link>
+              </div>
+            </div>
+            <div v-else>
+              <button
+                :class="{
+                  'wt-navigation-bar__nav-expansion--expanded': isExpanded(navItem),
+                  'wt-navigation-bar__nav-expansion--active': currentNav.expansion === navItem.value,
+                }"
+                class="wt-navigation-bar__nav-expansion"
+                type="button"
+                @click="expand(navItem)"
+              >
+                <span class="wt-navigation-bar__nav-expansion-name">{{ navItem.name || navItem.value }}</span>
+                <wt-icon
+                  class="wt-navigation-bar__expansion-arrow"
+                  color="active"
+                  icon="arrow-right"
+                ></wt-icon>
+              </button>
+              <expand-transition>
+                <ul v-if="isExpanded(navItem)">
+                  <li
+                    v-for="(subNavItem, subNavKey) of navItem.subNav"
+                    :key="subNavKey"
+                    class="wt-navigation-bar__nav-item"
+                  >
+                    <div class="wt-navigation-bar__nav-item-wrapper">
+                      <router-link
+                        :class="{'wt-navigation-bar__nav-item-link--active': currentNav.nav === subNavItem.value}"
+                        :to="nestedRoute(subNavItem, navItem)"
+                        class="wt-navigation-bar__nav-item-link wt-navigation-bar__nav-item-link--subnav"
+                        @click="close"
+                      >{{ subNavItem.name || subNavItem.value }}
+                      </router-link>
+                    </div>
+                  </li>
+                </ul>
+              </expand-transition>
+            </div>
+          </li>
+        </ul>
+      </nav>
+    </transition>
+  </aside>
+</template>
+
+<script>
+import ExpandTransition from '../transitions/wt-expand-transition.vue';
+
+export default {
+  name: 'wt-navigation-bar',
+  components: { ExpandTransition },
+  props: {
+    currentApp: {
+      type: String,
+      default: 'admin',
+    },
+    nav: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data: () => ({
+    isOpened: false,
+    expandedName: '',
+  }),
+
+  computed: {
+    currentNav() {
+      const path = this.$route.fullPath;
+      const currentNav = this.nav
+      .reduce((flatNav, currentNavItem) => {
+        if (currentNavItem.subNav) return flatNav.concat(currentNavItem.subNav);
+        return [...flatNav, currentNavItem];
+      }, [])
+      .find((navItem) => path.includes(navItem.route));
+      const currentExpansion = this.nav
+      .filter((nav) => nav.subNav)
+      .find((nav) => nav.subNav.indexOf(currentNav) !== -1);
+      return {
+        nav: currentNav?.value,
+        expansion: currentExpansion?.value,
+      };
+    },
+  },
+  methods: {
+    nestedRoute(subNavItem, navItem) {
+      return navItem.route ? `${navItem.route}/${subNavItem.route}` : subNavItem.route;
+    },
+    expand(navItem) {
+      this.expandedName = this.expandedName !== navItem.value ? navItem.value : '';
+    },
+    isExpanded(navItem) {
+      return this.expandedName === navItem.value;
+    },
+    close() {
+      this.isOpened = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import './variables.scss';
+</style>
+
+<style lang="scss" scoped>
+
+.wt-navigation-bar__menu-btn {
+  display: block;
+  width: fit-content;
+  width: -moz-fit-content;
+}
+
+.wt-navigation-bar__nav {
+  @extend %wt-scrollbar;
+  position: fixed;
+  z-index: var(--navigation-bar-z-index);
+  top: 0;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+  width: var(--navigation-bar-width);
+  padding: var(--navigation-bar-padding);
+  border-radius: var(--border-radius);
+  background: var(--navigation-bar-bg-color);
+  box-shadow: var(--elevation-10);
+
+  // expand animation optimization
+  * {
+    transform: translateZ(0);
+    will-change: height;
+    backface-visibility: hidden;
+    perspective: 1000px;
+  }
+}
+
+.wt-navigation-bar__nav-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--navigation-bar-header-padding);
+}
+
+.wt-navigation-bar__app-pic {
+  width: var(--navigation-bar-app-pic-width);
+  height: var(--navigation-bar-app-pic-height);
+}
+
+.wt-navigation-bar__nav-item-link {
+  @extend %typo-body-1;
+  display: block;
+  padding: var(--navigation-bar-link-padding);
+  transition: var(--transition);
+  word-wrap: break-word;
+
+  &:hover {
+    background: var(--accent-secondary-color);
+  }
+
+  &--active {
+    background: var(--accent-secondary-color);
+  }
+}
+
+.wt-navigation-bar__nav-expansion {
+  @extend %typo-subtitle-1;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: var(--navigation-bar-link-padding);
+  outline: none;
+
+  &:before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: var(--navigation-bar-active-expansion-flag-width);
+    content: '';
+    transition: var(--transition);
+    opacity: 0;
+    border-radius: var(--border-radius);
+    background: var(--primary-color);
+  }
+
+  .wt-navigation-bar__expansion-arrow {
+    transition: var(--transition);
+  }
+
+  &--expanded:before,
+  &--active:before {
+    opacity: 1;
+  }
+
+  &--expanded .wt-navigation-bar__expansion-arrow {
+    transform: rotate(90deg);
+  }
+}
+
+.wt-navigation-bar__nav-expansion-name {
+  display: block;
+  max-width: var(--navigation-bar-active-expansion-name-max-width);
+  word-wrap: break-word;
+}
+
+.wt-navigation-bar__nav-item-link--subnav {
+  padding-left: var(--navigation-bar-subnav-padding-left);
+}
+</style>

package/src/components/wt-notification/__tests__/WtNotification.spec.js

@@ -0,0 +1,21 @@
+import { shallowMount } from '@vue/test-utils';
+import WtNotification from '../wt-notification.vue';
+import WtIcon from '../../wt-icon/wt-icon.vue';
+
+describe('WtNotification', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtNotification, {
+      stubs: { WtIcon },
+    });
+    expect(wrapper.classes('wt-notification')).toBe(true);
+  });
+
+  it('renders message via default slot', () => {
+    const content = 'Hello there';
+    const wrapper = shallowMount(WtNotification, {
+      stubs: { WtIcon },
+      slots: { default: content },
+    });
+    expect(wrapper.find('.wt-notification__text').text()).toBe(content);
+  });
+});

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

@@ -0,0 +1,10 @@
+
+:root {
+  --notification-min-width: 30vw;
+  --notification-max-width: 40vw;
+  --notification-padding: var(--spacing-xs);
+  --notification-icon-margin: var(--spacing-xs);
+
+  --notification-text-color: var(--text-primary-color);
+  --notification-bg-color: var(--main-color);
+}

package/src/components/wt-notification/wt-notification.vue

@@ -0,0 +1,86 @@
+<template>
+  <article
+    class="wt-notification"
+    @click="$emit('close')"
+  >
+    <wt-icon
+      class="wt-notification__icon"
+      :icon="notificationIcon"
+      :color="notificationIconColor"
+    ></wt-icon>
+
+    <p class="wt-notification__text">
+      <slot></slot>
+    </p>
+  </article>
+</template>
+
+<script>
+
+export default {
+  name: 'wt-notification',
+  props: {
+    type: {
+      type: String,
+      default: 'info',
+    },
+  },
+  computed: {
+    notificationIcon() {
+      switch (this.type) {
+        case 'info':
+          return 'done';
+        case 'error':
+          return 'attention';
+        default:
+          return '';
+      }
+    },
+    notificationIconColor() {
+      switch (this.type) {
+        case 'info':
+          return 'success';
+        case 'error':
+          return 'danger';
+        default:
+          return '';
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import './variables.scss';
+</style>
+
+<style lang="scss" scoped>
+
+.wt-notification {
+  @extend %typo-body-1;
+  @include width-fit-content;
+
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  min-width: var(--notification-min-width);
+  max-width: var(--notification-max-width);
+  padding: var(--notification-padding);
+  color: var(--notification-text-color);
+  background: var(--notification-bg-color);
+  border-radius: var(--border-radius);
+  box-shadow: var(--elevation-1);
+  cursor: pointer;
+}
+
+.wt-notification__icon {
+  flex: 0 0 var(--icon-md-size);
+  margin-right: var(--notification-icon-margin);
+}
+
+.wt-notification__text {
+  flex-grow: 1;
+  align-self: center;
+  margin: 0;
+}
+</style>

package/src/components/wt-notifications-bar/__tests__/WtNotificationsBar.spec.js

@@ -0,0 +1,50 @@
+import { shallowMount } from '@vue/test-utils';
+import WtNotificationsBar from '../wt-notifications-bar.vue';
+import WtNotification from '../../wt-notification/wt-notification.vue';
+import eventBus from '../../../scripts/eventBus';
+
+describe('WtNotificationsBar', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtNotificationsBar, {
+      global: { provide: { $eventBus: eventBus } },
+    });
+    expect(wrapper.classes('wt-notifications-bar')).toBe(true);
+  });
+
+  it('shows notification at event bus event', async () => {
+    const wrapper = shallowMount(WtNotificationsBar, {
+      global: { provide: { $eventBus: eventBus } },
+    });
+    wrapper.vm.$eventBus.$emit('notification', {
+      type: 'error', text: 'error',
+    });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.findAllComponents(WtNotification).length).toBe(1);
+  });
+
+  it('closes notification manually', async () => {
+    const wrapper = shallowMount(WtNotificationsBar, {
+      global: { provide: { $eventBus: eventBus } },
+    });
+    wrapper.vm.$eventBus.$emit('notification', {
+      type: 'error', text: 'error',
+    });
+    await wrapper.vm.$nextTick();
+    wrapper.findComponent(WtNotification).vm.$emit('close');
+    await wrapper.vm.$nextTick();
+    expect(wrapper.findAllComponents(WtNotification).length).toBe(0);
+  });
+
+  it('closes notification automatically', async () => {
+    const wrapper = shallowMount(WtNotificationsBar, {
+      global: { provide: { $eventBus: eventBus } },
+      data: () => ({ notificationDuration: 100 }),
+    });
+    wrapper.vm.$eventBus.$emit('notification', {
+      type: 'error', text: 'error',
+    });
+    setTimeout(() => {
+      expect(wrapper.findAllComponents(WtNotification).length).toBe(0);
+    }, 101);
+  });
+});

package/src/components/wt-notifications-bar/_variables.scss

@@ -0,0 +1,7 @@
+
+:root {
+  --notifications-bar-max-height: 60%;
+  --notifications-bar-corner-margin: var(--spacing-sm);
+  --notifications-bar-notifications-margin: 0 0 var(--spacing-xs) auto;
+  --notifications-bar-z-index: 101;
+}