@webitel/ui-sdk 0.1.2 → 0.1.3-vue3

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

@@ -0,0 +1,64 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import VueRouter 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 localVue = createLocalVue();
+localVue.use(VueRouter);
+const router = new VueRouter();
+
+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, {
+      localVue,
+      router,
+      propsData: { 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 = shallowMount(WtNavigationBar, {
+      localVue,
+      router,
+      propsData: { 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 = shallowMount(WtNavigationBar, {
+      localVue,
+      router,
+      propsData: { nav },
+    });
+    wrapper.find('.wt-navigation-bar__nav-expansion').trigger('click');
+    await wrapper.vm.$nextTick();
+    expect(wrapper.find('.wt-navigation-bar__nav-item-link--subnav').attributes('to'))
+      .toBe('/2/3');
+  });
+});

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

@@ -0,0 +1,271 @@
+<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"
+          >
+          <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.native="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.native="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" 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(--accent-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/organisms/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 '../../../molecules/wt-notification/wt-notification.vue';
+import eventBus from '../../../../scripts/eventBus';
+
+describe('WtNotificationsBar', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtNotificationsBar, {
+      mocks: { $eventBus: eventBus },
+    });
+    expect(wrapper.classes('wt-notifications-bar')).toBe(true);
+  });
+
+  it('shows notification at event bus event', async () => {
+    const wrapper = shallowMount(WtNotificationsBar, {
+      mocks: { $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, {
+      mocks: { $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, {
+      mocks: { $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/organisms/wt-notifications-bar/wt-notifications-bar.vue

@@ -0,0 +1,71 @@
+<template>
+  <aside class="wt-notifications-bar">
+    <transition-group name="wt-notifications-transition" tag="div">
+      <wt-notification
+        v-for="(notification, key) of notifications"
+        :type="notification.type"
+        :key="key+notification.text"
+        @close="closeNotification(notification)"
+      >{{notification.text}}
+      </wt-notification>
+    </transition-group>
+  </aside>
+</template>
+
+<script>
+  export default {
+    name: 'wt-notifications-bar',
+    data: () => ({
+      notificationDuration: 4000,
+      notifications: [],
+    }),
+    created() {
+      try {
+        this.$eventBus.$on('notification', this.showNotification);
+      } catch (err) {
+        console.error('wt-notifications-bar cannot work without globally registered eventBus', err);
+      }
+    },
+    destroyed() {
+      this.$eventBus.$off('notification', this.showNotification);
+    },
+    methods: {
+      showNotification(notification) {
+        this.notifications.unshift(notification);
+        setTimeout(() => this.closeNotification(notification), this.notificationDuration);
+      },
+      closeNotification(notification) {
+        const index = this.notifications.indexOf(notification);
+        this.notifications.splice(index, 1);
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .wt-notifications-bar {
+    @extend %wt-scrollbar;
+
+    position: fixed;
+    top: var(--notifications-bar-corner-margin);
+    right: var(--notifications-bar-corner-margin);
+    max-height: var(--notifications-bar-max-height);
+    overflow-y: auto;
+    overflow-x: hidden;
+    z-index: var(--notifications-bar-z-index);
+
+    .wt-notification {
+      margin: var(--notifications-bar-notifications-margin);
+    }
+  }
+
+  .wt-notifications-transition-enter-active,
+  .wt-notifications-transition-leave-active {
+    transition: all var(--transition);
+  }
+  .wt-notifications-transition-enter,
+  .wt-notifications-transition-leave-to {
+    opacity: 0;
+    transform: translateX(60px);
+  }
+</style>

package/src/components/organisms/wt-page-wrapper/__tests__/WtPageWrapper.spec.js

@@ -0,0 +1,33 @@
+import { shallowMount } from '@vue/test-utils';
+import WtPageWrapper from '../wt-page-wrapper.vue';
+
+describe('WtPageWrapper', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtPageWrapper);
+    expect(wrapper.classes('wt-page-wrapper')).toBe(true);
+  });
+
+  it('renders page wrapper header via header slot', () => {
+    const content = 'Page Wrapper header';
+    const wrapper = shallowMount(WtPageWrapper, {
+      slots: { header: content },
+    });
+    expect(wrapper.find('.wt-page-wrapper__header').text()).toBe(content);
+  });
+
+  it('renders page wrapper actions panel via actions panel slot', () => {
+    const content = 'Page Wrapper actions panel content';
+    const wrapper = shallowMount(WtPageWrapper, {
+      slots: { 'actions-panel': content },
+    });
+    expect(wrapper.find('.wt-page-wrapper__actions-panel').text()).toBe(content);
+  });
+
+  it('renders page wrapper main content via main slot', () => {
+    const content = 'Page Wrapper main';
+    const wrapper = shallowMount(WtPageWrapper, {
+      slots: { main: content },
+    });
+    expect(wrapper.find('.wt-page-wrapper__main').text()).toBe(content);
+  });
+});

package/src/components/organisms/wt-page-wrapper/wt-page-wrapper.vue

@@ -0,0 +1,52 @@
+<template>
+  <section class="wt-page-wrapper">
+    <div class="wt-page-wrapper__header">
+      <slot name="header"></slot>
+    </div>
+    <div v-if="actionsPanel" class="wt-page-wrapper__actions-panel">
+      <slot name="actions-panel"></slot>
+    </div>
+    <div class="wt-page-wrapper__main">
+      <slot name="main"></slot>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'wt-page-wrapper',
+  props: {
+    actionsPanel: {
+      type: Boolean,
+      default: true,
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wt-page-wrapper {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-height: 100%;
+  padding: var(--page-wrapper-padding);
+  gap: var(--page-wrapper-section-gap);
+}
+
+.wt-page-wrapper__header,
+.wt-page-wrapper__actions-panel,
+.wt-page-wrapper__main {
+  box-sizing: border-box;
+  padding: var(--page-wrapper-section-padding);
+  border-radius: var(--border-radius);
+  background: var(--main-color);
+}
+
+.wt-page-wrapper__main {
+  display: flex;
+  flex: 1;
+  width: 100%;
+}
+
+</style>

package/src/components/organisms/wt-pagination/__tests__/WtPagination.spec.js

@@ -0,0 +1,37 @@
+import { shallowMount, mount } from '@vue/test-utils';
+import WtPagination from '../wt-pagination.vue';
+
+describe('WtPagination', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtPagination);
+    expect(wrapper.classes('wt-pagination')).toBe(true);
+  });
+
+  it('debounces size change event when debounce prop is true', async () => {
+    const props = {
+      size: '10',
+      debounce: true,
+      debounceDelay: 100,
+    };
+    const wrapper = shallowMount(WtPagination, {
+      props,
+    });
+    props.size = '20';
+    wrapper.setProps(props);
+    expect(wrapper.emitted().change).toBeFalsy();
+    await setTimeout(() => {
+      expect(wrapper.emitted().change[0].length).toBe(1);
+    }, 1000);
+  });
+
+  it('changes pages at icon btn click', async () => {
+    const wrapper = mount(WtPagination, {
+      props: { isNext: true, page: 2 },
+    });
+    const pageControls = wrapper.findAll('.wt-pagination__page-control');
+    pageControls.at(0).vm.$emit('click');
+    pageControls.at(1).vm.$emit('click');
+    expect(wrapper.emitted().prev.length).toBe(1);
+    expect(wrapper.emitted().next.length).toBe(1);
+  });
+});