@webitel/ui-sdk 0.1.13 → 0.1.100

package/src/components/organisms/wt-filters-panel-wrapper/wt-filters-panel-wrapper.vue

@@ -0,0 +1,146 @@
+<template>
+  <article class="filters-panel-wrapper" :class="{ 'filters-panel-wrapper--opened': isOpened }">
+    <div class="filters-wrap">
+      <slot></slot>
+    </div>
+    <div class="actions-wrap">
+      <wt-table-actions
+        :icons="['filter-reset', 'settings']"
+        @input="tableActionsHandler"
+      ></wt-table-actions>
+    </div>
+  </article>
+</template>
+
+<script>
+export default {
+  name: 'filters-panel-wrapper',
+  data: () => ({
+    isOpened: false,
+    filtersCount: 0,
+  }),
+  methods: {
+    tableActionsHandler(eventName) {
+      switch (eventName) {
+        case 'filterReset':
+          this.resetFilters();
+          break;
+        case 'settings':
+          this.toggleFiltersExpansion();
+          break;
+        default:
+      }
+    },
+    toggleFiltersExpansion() {
+      this.isOpened = !this.isOpened;
+    },
+    resetFilters() {
+      this.$emit('reset');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+$actions-width: calc(2 * (24px + var(--table-actions-icon-gap)));
+
+.filters-panel-wrapper {
+  display: flex;
+
+  .filters-wrap {
+    flex: 1;
+  }
+
+  .actions-wrap {
+    display: flex;
+    margin-left: auto;
+    margin-top: 24px;
+    flex: 0 0 $actions-width;
+
+    .wt-table-actions {
+      height: fit-content;
+    }
+  }
+}
+
+// 30px*2 outer paddings, 30px*2 inner paddings, table actions var value
+// -- sass doesnt work with css variables :(
+$width-except-filters: 60px + 60px + 88px;
+$filter-width: 230px;
+$filter-gap: 10px; // var(--component-spacing)
+@function filters-width($num) {
+  // 1px corrects max width
+  @return ($filter-width * $num) + $filter-gap * $num + $width-except-filters - 1px;
+}
+
+.filters-wrap {
+  display: grid;
+  flex-wrap: wrap;
+  grid-gap: var(--component-spacing);
+
+  .filters-panel-wrapper & > * {
+  }
+
+  & {
+    grid-template-columns: repeat(6, 1fr);
+
+    > *:nth-child(n+7) {
+      display: none;
+    }
+  }
+
+  @media (max-width: filters-width(6)) {
+    & {
+      grid-template-columns: repeat(5, 1fr);
+
+      > *:nth-child(n+6) {
+        display: none;
+      }
+    }
+  }
+
+  @media (max-width: filters-width(5)) {
+    & {
+      grid-template-columns: repeat(4, 1fr);
+
+      > *:nth-child(n+5) {
+        display: none;
+      }
+    }
+  }
+
+  @media (max-width: filters-width(4)) {
+    & {
+      grid-template-columns: repeat(3, 1fr);
+
+      > *:nth-child(n+4) {
+        display: none;
+      }
+    }
+  }
+
+  @media (max-width: filters-width(3)) {
+    & {
+      grid-template-columns: repeat(2, 1fr);
+
+      > *:nth-child(n+3) {
+        display: none;
+      }
+    }
+  }
+
+  @media (max-width: filters-width(2)) {
+    & {
+      grid-template-columns: repeat(1, 1fr);
+
+      > *:nth-child(n+2) {
+        display: none;
+      }
+    }
+  }
+}
+
+.filters-panel-wrapper--opened .filters-wrap > * {
+  display: block;
+}
+</style>

package/src/components/organisms/wt-headline/__tests__/WtHeadline.spec.js

@@ -0,0 +1,47 @@
+import { shallowMount } from '@vue/test-utils';
+import WtHeadline from '../wt-headline.vue';
+
+describe('WtHeadline', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtHeadline, {
+      stubs: { WtIconBtn: true },
+    });
+    expect(wrapper.classes('wt-headline')).toBe(true);
+  });
+
+  it('renders headline main content via title-wrapper slot', () => {
+    const content = 'Headline title';
+    const wrapper = shallowMount(WtHeadline, {
+      stubs: { WtIconBtn: true },
+      slots: { 'title-wrapper': content },
+    });
+    expect(wrapper.find('.wt-headline').text()).toBe(content);
+  });
+
+  it('renders headline title via title slot', () => {
+    const content = 'Headline title';
+    const wrapper = shallowMount(WtHeadline, {
+      stubs: { WtIconBtn: true },
+      slots: { title: content },
+    });
+    expect(wrapper.find('.wt-headline__title').text()).toBe(content);
+  });
+
+  it('renders headline search via search slot', () => {
+    const content = 'Headline search content';
+    const wrapper = shallowMount(WtHeadline, {
+      stubs: { WtIconBtn: true },
+      slots: { search: content },
+    });
+    expect(wrapper.find('.wt-headline__actions-wrapper').text()).toBe(content);
+  });
+
+  it('renders headline actions via actions slot', () => {
+    const content = 'Headline actions';
+    const wrapper = shallowMount(WtHeadline, {
+      stubs: { WtIconBtn: true },
+      slots: { actions: content },
+    });
+    expect(wrapper.find('.wt-headline__actions-wrapper').text()).toBe(content);
+  });
+});

package/src/components/organisms/wt-headline/wt-headline.vue

@@ -0,0 +1,46 @@
+<template>
+  <header class="wt-headline">
+    <slot>
+      <slot name="title-wrapper">
+        <h1 class="wt-headline__title">
+          <slot name="title"></slot>
+        </h1>
+      </slot>
+      <div class="wt-headline__actions-wrapper">
+        <slot name="search"></slot>
+        <slot name="actions"></slot>
+      </div>
+    </slot>
+  </header>
+</template>
+
+<script>
+export default {
+  name: 'wt-headline',
+};
+</script>
+
+<style lang="scss" scoped>
+.wt-headline {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  min-height: var(--headline-min-height);
+  padding: var(--headline-padding);
+  box-sizing: border-box;
+  background: var(--headline-background);
+  border-radius: var(--border-radius);
+}
+
+.wt-headline__title {
+  @extend %typo-heading-md;
+  margin-right: var(--headline-title-margin);
+}
+
+.wt-headline__actions-wrapper {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+</style>

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,249 @@
+<template>
+  <aside class="wt-navigation-bar" v-clickaway="close">
+    <wt-icon-btn
+      class="wt-navigation-bar__menu-btn"
+      icon="menu"
+      :class="{'active': isOpened}"
+      @click="isOpened = !isOpened"
+    ></wt-icon-btn>
+    <transition name="fade">
+      <nav class="wt-navigation-bar__nav" v-show="isOpened">
+        <header class="wt-navigation-bar__nav-header">
+          <!--        vue cli build target lib cant handle dynamic require :( -->
+          <img v-if="currentApp === 'admin'"
+               src="../../../assets/components/organisms/wt-navigation-bar/logo-admin-app.svg" alt="admin">
+          <img v-if="currentApp === 'agent'"
+               src="../../../assets/components/organisms/wt-navigation-bar/logo-agent-app.svg" alt="agent">
+          <img v-if="currentApp === 'audit'"
+               src="../../../assets/components/organisms/wt-navigation-bar/logo-audit-app.svg" alt="audit">
+          <img v-if="currentApp === 'history'"
+               src="../../../assets/components/organisms/wt-navigation-bar/logo-history-app.svg" alt="history">
+          <img v-if="currentApp === 'supervisor'"
+               src="../../../assets/components/organisms/wt-navigation-bar/logo-supervisor-app.svg" alt="supervisor">
+          <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"
+            class="wt-navigation-bar__nav-item"
+            :key="key"
+          >
+            <div v-if="!navItem.subNav">
+              <div class="wt-navigation-bar__nav-item-wrapper">
+                <router-link
+                  class="wt-navigation-bar__nav-item-link"
+                  :class="{'wt-navigation-bar__nav-item-link--active': currentNav.nav === navItem.value}"
+                  :to="navItem.route"
+                  @click.native="close"
+                > {{ navItem.name || navItem.value }}
+                </router-link>
+              </div>
+            </div>
+            <div v-else>
+              <button
+                class="wt-navigation-bar__nav-expansion"
+                :class="{
+                  'wt-navigation-bar__nav-expansion--expanded': isExpanded(navItem),
+                  'wt-navigation-bar__nav-expansion--active': currentNav.expansion === navItem.value,
+                }"
+                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"
+                  icon="arrow-right"
+                  color="active"
+                ></wt-icon>
+              </button>
+              <expand-transition>
+                <ul v-if="isExpanded(navItem)">
+                  <li
+                    v-for="(subNavItem, subNavKey) of navItem.subNav"
+                    class="wt-navigation-bar__nav-item"
+                    :key="subNavKey"
+                  >
+                    <div class="wt-navigation-bar__nav-item-wrapper">
+                      <router-link
+                        class="wt-navigation-bar__nav-item-link wt-navigation-bar__nav-item-link--subnav"
+                        :class="{'wt-navigation-bar__nav-item-link--active': currentNav.nav === subNavItem.value}"
+                        :to="nestedRoute(subNavItem, navItem)"
+                        @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/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;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: var(--navigation-bar-width);
+  overflow: auto;
+  z-index: var(--navigation-bar-z-index);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+  background: var(--navigation-bar-bg-color);
+
+  // expand animation optimization
+  * {
+    will-change: height;
+    transform: translateZ(0);
+    backface-visibility: hidden;
+    perspective: 1000px;
+  }
+}
+
+.wt-navigation-bar__nav-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--navigation-bar-header-padding);
+}
+
+.wt-navigation-bar__nav-list {
+  padding: var(--navigation-bar-list-padding);
+}
+
+.wt-navigation-bar__nav-item-link {
+  @extend %typo-body-lg;
+  display: block;
+  padding: var(--navigation-bar-link-padding);
+  transition: var(--transition);
+  word-wrap: break-word;
+
+  &:hover {
+    background: var(--main-option-hover-color);
+  }
+
+  &--active {
+    background: var(--main-option-hover-color);
+  }
+}
+
+.wt-navigation-bar__nav-expansion {
+  @extend %typo-heading-sm;
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: var(--navigation-bar-link-padding);
+  outline: none;
+
+  &:before {
+    opacity: 0;
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: calc(var(--navigation-bar-horizontal-padding) * -1);
+    width: var(--navigation-bar-active-expansion-flag-width);
+    border-radius: var(--border-radius);
+    background: var(--main-accent-color);
+    transition: var(--transition);
+  }
+
+  .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>