@webitel/ui-sdk 2.0.10 → 2.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "2.0.10",
+  "version": "2.0.11",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",

package/src/components/atoms/wt-button/wt-button.vue

@@ -32,7 +32,7 @@ export default {
     color: {
       type: String,
       default: 'accent',
-      options: ['accent', 'secondary', 'success', 'danger', 'transfer'],
+      options: ['accent', 'secondary', 'success', 'danger', 'transfer', 'task'],
     },
     disabled: {
       type: Boolean,
@@ -71,7 +71,7 @@ export default {
       return '';
     },
     loaderColor() {
-      if (['success', 'transfer', 'danger'].includes(this.color)) return 'main';
+      if (['success', 'transfer', 'danger', 'task'].includes(this.color)) return 'main';
       return 'contrast';
     },
   },
@@ -159,6 +159,18 @@ export default {
     }
   }
 
+  &.task {
+    color: var(--btn-light-font-color);
+    background-color: var(--btn-task-color);
+    border-color: var(--btn-task-color);
+
+    &:hover,
+    &:active {
+      background-color: var(--btn-task--hover-color);
+      border-color: var(--btn-task--hover-color);
+    }
+  }
+
   &.danger {
     color: var(--btn-light-font-color);
     background-color: var(--btn-false-color);
@@ -230,6 +242,18 @@ export default {
       }
     }
 
+    &.task {
+      color: var(--btn-task-color);
+      border-color: var(--btn-task-color);
+
+      &:hover,
+      &:active {
+        color: var(--btn-task--hover-color);
+        border-color: var(--btn-task--hover-color);
+        background-color: transparent;
+      }
+    }
+
     &.danger {
       color: var(--btn-false-color);
       border-color: var(--btn-false-color);

package/src/components/atoms/wt-icon/wt-icon.vue

@@ -29,7 +29,7 @@ export default {
     color: {
       type: String,
       default: 'default',
-      options: ['default', 'contrast', 'active', 'accent', 'disabled', 'success', 'danger', 'transfer', 'hold', 'secondary-50'],
+      options: ['default', 'contrast', 'active', 'accent', 'disabled', 'success', 'danger', 'transfer', 'task', 'hold', 'secondary-50'],
     },
     iconPrefix: {
       type: String,
@@ -97,6 +97,10 @@ svg {
     fill: var(--icon-color-transfer);
   }
 
+  &-task .wt-icon__icon {
+    fill: var(--task-color);
+  }
+
   &-hold .wt-icon__icon {
     fill: var(--icon-color-hold);
   }

package/src/css/components/atoms/wt-button/_variables.scss

@@ -41,4 +41,7 @@
 
   --btn-transfer-color: var(--transfer-color);
   --btn-transfer--hover-color: var(--transfer--hover-color);
-}
+
+  --btn-task-color: var(--task-color);
+  --btn-task--hover-color: var(--task--hover-color);
+}

package/src/css/styleguide/colors/_colors.scss

@@ -9,6 +9,7 @@
 
   --_hold-color-hue: 54;
   --_transfer-color-hue: 227;
+  --_task-color-hue: 227;
 
   // DEFAULT STATES OPACITY
   --_opacity--default: 0.8;
@@ -31,6 +32,7 @@
 
   --_hold-color: var(--_hold-color-hue), 80%, 50%;
   --_transfer-color: var(--_transfer-color-hue), 80%, 50%;
+  --_task-color: var(--_task-color-hue), 80%, 50%;
 
   // MAIN COLORS
   --accent-color: hsla(var(--_accent-color), 1);
@@ -78,6 +80,9 @@
   --transfer-color: hsla(var(--_transfer-color), var(--_opacity--default));
   --transfer--hover-color: hsla(var(--_transfer-color), var(--_opacity--hover));
 
+  --task-color: hsla(var(--_task-color), var(--_opacity--default));
+  --task--hover-color: hsla(var(--_task-color), var(--_opacity--hover));
+
   // SUBORDINATE COLORS
   --tag-bg-color: var(--accent-secondary-color);
 

package/src/modules/Notifications/store/__tests__/{notifications.spec.js → NotificationsStoreModule.actions.spec.js}

@@ -1,4 +1,3 @@
-import { ChatActions } from 'webitel-sdk';
 import audio from '../../assets/audio/new-message.wav';
 import NotificationsStoreModule from '../NotificationsStoreModule';
 import '../../../../../tests/mocks/broadcastChannelMock';
@@ -13,8 +12,6 @@ const state = {
   wtIsPlaying: false,
 };
 
-const chat = { id: '1', messages: [{ member: { name: 'name' } }] };
-
 describe('features/notifications store: actions', () => {
   const context = {
     dispatch: jest.fn(),
@@ -44,11 +41,21 @@ describe('features/notifications store: actions', () => {
     expect(context.dispatch.mock.calls[1][0]).toContain('_SETUP_UNREAD_COUND_BROADCAST_LISTENING');
   });
 
-  it('INITIALIZE action commits _SETUP_THIS_TAB_ID action', () => {
+  it('INITIALIZE action dispatches _SETUP_THIS_TAB_ID action', () => {
     notificationsModule.actions.INITIALIZE(context);
     expect(context.dispatch).toHaveBeenCalledWith('_SETUP_THIS_TAB_ID');
   });
 
+  it('DESTROY action dispatches STOP_SOUND action', () => {
+    notificationsModule.actions.DESTROY(context);
+    expect(context.dispatch).toHaveBeenCalledWith('STOP_SOUND');
+  });
+
+  it('DESTROY action dispatches _REMOVE_CURRENT_TAB_ID action', () => {
+    notificationsModule.actions.DESTROY(context);
+    expect(context.dispatch).toHaveBeenCalledWith('_REMOVE_CURRENT_TAB_ID');
+  });
+
   it('INCREMENT_UNREAD_COUNT action dispatches _SET_UNREAD_COUNT and increases unreadCount', () => {
     notificationsModule.actions.INCREMENT_UNREAD_COUNT(context);
     expect(context.dispatch).toHaveBeenCalledWith('_SET_UNREAD_COUNT', context.state.unreadCount + 1);
@@ -59,6 +66,12 @@ describe('features/notifications store: actions', () => {
     expect(context.commit.mock.calls[0][0]).toContain('SET_BROADCAST_CHANNEL');
   });
 
+  it('_SUBSCRIBE_TAB_CLOSING action commits SET_CURRENT_TAB_ID mutation', async () => {
+    await notificationsModule.actions._SUBSCRIBE_TAB_CLOSING(context);
+    window.dispatchEvent(new Event('storage'));
+    expect(context.commit).toHaveBeenCalledWith('SET_CURRENT_TAB_ID', 'null');
+  });
+
   it('PLAY_SOUND action commits SET_CURRENTLY_PLAIYNG mutation with sound', async () => {
     const sound = new Audio(audio);
     await notificationsModule.actions.PLAY_SOUND(context, { sound });
@@ -71,6 +84,16 @@ describe('features/notifications store: actions', () => {
     expect(context.dispatch).toHaveBeenCalledWith('_SET_TAB_TITLE');
   });
 
+  it('_SETUP_THIS_TAB_ID commits SET_THIS_TAB_ID mutation', () => {
+    notificationsModule.actions._SETUP_THIS_TAB_ID(context);
+    expect(context.commit.mock.calls[0][0]).toBe('SET_THIS_TAB_ID');
+  });
+
+  it('_SETUP_THIS_TAB_ID commits SET_CURRENT_TAB_ID mutation', () => {
+    notificationsModule.actions._SETUP_THIS_TAB_ID(context);
+    expect(context.commit.mock.calls[1][0]).toBe('SET_CURRENT_TAB_ID');
+  });
+
   it('_SET_UNREAD_COUNT action commits _SET_UNREAD_COUNT mutation with count', () => {
     const unreadCount = 5;
     notificationsModule.actions._SET_UNREAD_COUNT(context, unreadCount);
@@ -105,35 +128,3 @@ describe('features/notifications store: actions', () => {
     expect(localStorage.getItem('wtIsPlaying')).toBeFalsy();
   });
 });
-
-describe('features/notifications store: mutations', () => {
-  it('SET_THIS_TAB_ID sets window id to state', () => {
-    const thisTabId = 'thisTabId';
-    notificationsModule.mutations.SET_THIS_TAB_ID(state, thisTabId);
-    expect(state.thisTabId).toBe(thisTabId);
-  });
-
-  it('SET_BROADCAST_CHANNEL sets broadcastChannel to state', () => {
-    const state = { broadcastChannel: null };
-    const channel = new BroadcastChannel('test channel');
-    notificationsModule.mutations.SET_BROADCAST_CHANNEL(state, channel);
-    expect(state.broadcastChannel).toEqual(channel);
-  });
-
-  it('SET_CURRENTLY_PLAIYNG mutation sets currentlyPlaying to state', () => {
-    const wtIsPlaying = true;
-    notificationsModule.mutations.SET_CURRENTLY_PLAYING(state, wtIsPlaying);
-    expect(state.currentlyPlaying).toBe(true);
-  });
-
-  it('RESET_CURRENTLY_PLAYING mutation sets currentlyPlaying to false in state', () => {
-    notificationsModule.mutations.RESET_CURRENTLY_PLAYING(state);
-    expect(state.currentlyPlaying).toBe(false);
-  });
-
-  it('_SET_UNREAD_COUNT mutation sets unreadCount to state', () => {
-    const unreadCount = 15;
-    notificationsModule.mutations.SET_UNREAD_COUNT(state, unreadCount);
-    expect(state.unreadCount).toEqual(unreadCount);
-  });
-});

package/src/modules/Notifications/store/__tests__/NotificationsStoreModule.mutations.spec.js

@@ -0,0 +1,49 @@
+import NotificationsStoreModule from '../NotificationsStoreModule';
+import '../../../../../tests/mocks/broadcastChannelMock';
+
+const notificationsModule = new NotificationsStoreModule().getModule();
+
+const state = {
+  thisTabId: null,
+  broadcastChannel: new BroadcastChannel('WtAppNotifications'),
+  unreadCount: 0,
+  currentlyPlaying: false,
+  wtIsPlaying: false,
+};
+
+describe('features/notifications store: mutations', () => {
+  it('SET_THIS_TAB_ID sets thisTabId to state', () => {
+    const thisTabId = 'thisTabId';
+    notificationsModule.mutations.SET_THIS_TAB_ID(state, thisTabId);
+    expect(state.thisTabId).toBe(thisTabId);
+  });
+  it('SET_CURRENT_TAB_ID sets currentTabId to state', () => {
+    const currentTabId = 'currentTabId';
+    notificationsModule.mutations.SET_CURRENT_TAB_ID(state, currentTabId);
+    expect(state.currentTabId).toBe(currentTabId);
+  });
+
+  it('SET_BROADCAST_CHANNEL sets broadcastChannel to state', () => {
+    const state = { broadcastChannel: null };
+    const channel = new BroadcastChannel('test channel');
+    notificationsModule.mutations.SET_BROADCAST_CHANNEL(state, channel);
+    expect(state.broadcastChannel).toEqual(channel);
+  });
+
+  it('SET_CURRENTLY_PLAIYNG mutation sets currentlyPlaying to state', () => {
+    const wtIsPlaying = true;
+    notificationsModule.mutations.SET_CURRENTLY_PLAYING(state, wtIsPlaying);
+    expect(state.currentlyPlaying).toBe(true);
+  });
+
+  it('RESET_CURRENTLY_PLAYING mutation sets currentlyPlaying to false in state', () => {
+    notificationsModule.mutations.RESET_CURRENTLY_PLAYING(state);
+    expect(state.currentlyPlaying).toBe(false);
+  });
+
+  it('_SET_UNREAD_COUNT mutation sets unreadCount to state', () => {
+    const unreadCount = 15;
+    notificationsModule.mutations.SET_UNREAD_COUNT(state, unreadCount);
+    expect(state.unreadCount).toEqual(unreadCount);
+  });
+});