@webitel/ui-sdk 0.1.7 → 0.1.8-vue3

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,72 @@
+<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',
+    inject: ['$eventBus'],
+    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);
+  });
+});

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

@@ -0,0 +1,142 @@
+<template>
+  <footer class="wt-pagination">
+    <div class="wt-pagination__size">
+      <div class="wt-pagination__size-text">{{ $t('webitelUI.pagination.sizeText') }}</div>
+      <wt-input
+        :number-max="1000"
+        :number-min="1"
+        :value="size"
+        class="wt-pagination__size-input"
+        type="number"
+        @input="inputHandler"
+      ></wt-input>
+    </div>
+    <div class="wt-pagination__page-controls">
+      <wt-tooltip>
+        <template v-slot:activator>
+          <wt-icon-btn
+            :disabled="!prev"
+            class="wt-pagination__page-control"
+            icon="arrow-left"
+            @click="goPrev"
+          ></wt-icon-btn>
+        </template>
+        {{ $t('webitelUI.pagination.prev') }}
+      </wt-tooltip>
+      <wt-tooltip>
+        <template v-slot:activator>
+          <wt-icon-btn
+            :disabled="!next"
+            class="wt-pagination__page-control"
+            icon="arrow-right"
+            @click="goNext"
+          ></wt-icon-btn>
+        </template>
+        {{ $t('webitelUI.pagination.next') }}
+      </wt-tooltip>
+    </div>
+  </footer>
+</template>
+
+<script>
+import debounce from '../../../scripts/debounce';
+
+export default {
+  name: 'wt-pagination',
+  props: {
+    size: {
+      type: [String, Number],
+    },
+    next: {
+      type: Boolean,
+      default: false,
+    },
+    prev: {
+      type: Boolean,
+      default: false,
+    },
+    debounce: {
+      type: Boolean,
+      default: false,
+    },
+    debounceDelay: {
+      type: Number,
+      default: 1000,
+    },
+  },
+  model: {
+    prop: 'size',
+    event: 'change',
+  },
+
+  watch: {
+    size(value) {
+      this.changeSize(value);
+    },
+  },
+
+  data: () => ({
+    defaultSize: '10',
+  }),
+
+  created() {
+    if (this.debounce) this.changeSize = debounce(this.changeSize, this.debounceDelay);
+  },
+
+  methods: {
+    inputHandler(value) {
+      const size = (value >= 0 && value <= 1000)
+        ? value
+        : this.defaultSize;
+      this.$emit('input', size);
+      this.changeSize(size);
+    },
+    changeSize(value) {
+      this.$emit('change', value);
+    },
+    goNext() {
+      this.$emit('next');
+    },
+    goPrev() {
+      this.$emit('prev');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wt-pagination {
+  @extend %typo-body-1;
+
+  display: inline-flex;
+  align-items: center;
+  margin-left: auto;
+}
+
+.wt-pagination__size {
+  display: flex;
+  align-items: center;
+  margin-right: var(--pagination-gap);
+}
+
+.wt-pagination__size-text {
+  margin-right: var(--pagination-gap);
+}
+
+.wt-pagination__size-input {
+  width: var(--pagination-size-input-width);
+}
+
+.wt-pagination__page-controls {
+  display: flex;
+  align-items: center;
+}
+
+.wt-pagination__page-control {
+  margin-left: var(--pagination-gap);
+
+  &:first-child {
+    margin-left: 0;
+  }
+}
+</style>

package/src/components/organisms/wt-player/__tests__/WtPlayer.spec.js

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

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

@@ -0,0 +1,203 @@
+<template>
+  <aside
+    class="wt-player"
+    :class="[`wt-player--position-${position}`]"
+  >
+    <component
+      :is="playerType"
+      class="wt-player__player"
+      ref="player"
+      :src="src"
+      :autoplay="autoplay"
+      controls
+      v-on="listeners"
+    ></component>
+
+    <!-- The "wt-icon-btn" component is append in to "audio" element by "setCloseIcon" method-->
+    <wt-icon-btn
+      v-if="closable"
+      class="wt-player__close-icon"
+      ref="close-icon"
+      icon="close"
+      @click="$emit('close')"
+    ></wt-icon-btn>
+  </aside>
+</template>
+
+<script>
+import Plyr from 'plyr';
+
+export default {
+  name: 'wt-player',
+  props: {
+    src: {},
+    autoplay: {
+      type: Boolean,
+      default: true,
+    },
+    loop: {
+      type: Boolean,
+      default: false,
+    },
+    download: {
+      type: [String, Function, Boolean],
+      default: () => (url) => url.replace('/stream', '/download'),
+    },
+    mime: {
+      type: String,
+      default: 'audio',
+    },
+    // plyr-specific options
+    resetOnEnd: {
+      type: Boolean,
+      default: false,
+    },
+    invertTime: {
+      type: Boolean,
+      default: true,
+    },
+    // plyr is caching volume settings so we should reset them at init
+    resetVolume: {
+      type: Boolean,
+      default: false,
+    },
+    closable: {
+      type: Boolean,
+      default: true,
+    },
+    position: {
+      type: String,
+      default: 'sticky',
+    },
+  },
+  data: () => ({
+    player: null,
+  }),
+
+  watch: {
+    src() {
+      this.setupDownload();
+    },
+    download() {
+      this.setupDownload();
+    },
+  },
+
+  mounted() {
+    this.setupPlayer();
+  },
+
+  computed: {
+    listeners() {
+      return {
+        ...this.$listeners,
+      };
+    },
+    playerType() {
+      return this.mime.includes('video') ? 'video' : 'audio';
+    },
+  },
+
+  methods: {
+    async setupPlayer() {
+      await this.$nextTick(); // test is failing to render component if element is passed to Plyr as Vue $ref
+      const baseURL = this.$baseURL || process.env.BASE_URL;
+      if (this.player) this.player.destroy();
+      const controls = ['play-large', 'play', 'progress', 'current-time',
+        'mute', 'volume', 'captions', 'settings', 'pip',
+        'airplay', 'fullscreen'];
+      if (this.download) controls.push('download');
+      this.player = new Plyr(this.$refs.player, {
+      // this.player = new Plyr('.wt-player__player', {
+        autoplay: this.autoplay,
+        loadSprite: false,
+        resetOnEnd: this.resetOnEnd,
+        invertTime: this.invertTime,
+        iconUrl: `${baseURL}img/plyr.svg`,
+        controls,
+        loop: {
+          active: this.loop,
+        },
+      });
+
+      if (this.resetVolume) this.makeVolumeReset();
+      if (this.download) this.setupDownload();
+
+      if (this.closable) this.appendCloseIcon();
+      this.$emit('initialized', this.player);
+    },
+    makeVolumeReset() {
+      this.player.volume = 1;
+      this.player.muted = false;
+    },
+    setupDownload() {
+      if (!this.download) this.setupPlayer();
+      else if (typeof this.download === 'string') {
+        this.player.download = this.download;
+      } else if (typeof this.download === 'function') {
+        this.player.download = this.download(this.src);
+      }
+    },
+    appendCloseIcon() {
+      const plyrControls = this.$refs.player.plyr?.elements?.controls;
+      const closeIcon = this.$refs['close-icon'].$el;
+      if (plyrControls) {
+        plyrControls.append(closeIcon);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import "~plyr/src/sass/plyr.scss";
+
+.wt-player {
+  @extend %typo-body-2;
+  bottom: 60px;
+
+  &--position {
+    &-sticky {
+      position: sticky;
+    }
+    &-relative {
+      position: relative;
+      bottom: unset;
+    }
+    &-static {
+      position: static;
+    }
+  }
+
+  .plyr {
+    max-width: 100%; // prevents <video> container overflow
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow);
+  }
+
+  &__close-icon {
+    //transform: translate(var(--player-close-icon-transform-translate-x),
+    //  var(--player-close-icon-transform-translate-y));
+  }
+
+  .plyr__control:hover, {
+    background: var(--accent-secondary-color);
+    color: var(--text-primary-color);
+  }
+
+  .plyr__control--overlaid svg {
+    left: 0; // reset plyr style for video "play" button icon
+  }
+
+  //.plyr__control[role='menuitemradio']::before,
+  //.plyr__control[role='menuitemradio']:hover::before {
+  //  border: 2px solid var(--secondary-color);
+  //  background: var(--main-color);
+  //}
+  //
+  //.plyr__control[role='menuitemradio']::after {
+  //  background: var(--secondary-color);
+  //}
+}
+
+</style>

package/src/components/organisms/wt-status-select/__tests__/WtStatusSelect.spec.js

@@ -0,0 +1,25 @@
+import { shallowMount } from '@vue/test-utils';
+import WtStatusSelect from '../wt-status-select.vue';
+import WtSelect from '../../../molecules/wt-select/wt-select.vue';
+
+describe('WtStatusSelect', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtStatusSelect, {
+      stubs: { WtSelect },
+    });
+    expect(wrapper.classes('wt-status-select')).toBe(true);
+  });
+
+  it('correctly represents duration', () => {
+    const wrapper = shallowMount(WtStatusSelect, {
+      stubs: { WtSelect },
+    });
+    expect(wrapper.vm.duration).toBe('00:00:00');
+
+    // wrapper.setProps({ statusDuration: 1 });
+    // expect(wrapper.vm.duration).toBe('00:00:01');
+    //
+    // wrapper.setProps({ statusDuration: '01' });
+    // expect(wrapper.vm.duration).toBe('00:00:01');
+  });
+});

package/src/components/organisms/wt-status-select/_internals/StatusOptions.lookup.js

@@ -0,0 +1,24 @@
+import AgentStatus from '../../../../enums/AgentStatus/AgentStatus.enum';
+
+export default [
+  {
+    locale: 'webitelUI.statusSelect.online',
+    color: 'success',
+    value: AgentStatus.ONLINE,
+  },
+  {
+    locale: 'webitelUI.statusSelect.pause',
+    color: 'primary',
+    value: AgentStatus.PAUSE,
+  },
+  {
+    locale: 'webitelUI.statusSelect.offline',
+    color: 'disabled',
+    value: AgentStatus.OFFLINE,
+  },
+  {
+    locale: 'webitelUI.statusSelect.breakOut',
+    color: 'break-out',
+    value: AgentStatus.BREAK_OUT,
+  },
+];