@webitel/ui-sdk 1.0.23 → 1.0.24

package/package.json

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

package/src/components/atoms/wt-avatar/__tests__/wt-avatar.spec.js

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

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

@@ -0,0 +1,64 @@
+<template>
+  <div
+    class="wt-avatar"
+    :class="[`wt-avatar--size-${size}`]"
+  >
+    <wt-badge
+      v-if="badge"
+      :color-variable="badgeColorVar"
+    ></wt-badge>
+    <img
+      class="wt-avatar__img"
+      src="../../../assets/components/atoms/wt-avatar/default-avatar.svg"
+      alt="avatar"
+    >
+  </div>
+</template>
+
+<script>
+import AbstractUserStatus from '../../../../../cc-workspaces/src/components/agent-workspace/workspace-section/chat/chat-transfer-container/webitel-ui/enums/AbstractUserStatus.enum';
+
+export default {
+  name: 'wt-avatar',
+  props: {
+    size: {
+      type: String,
+      default: 'md',
+      options: ['md'],
+    },
+    badge: {
+      type: Boolean,
+      default: false,
+    },
+    status: {
+      type: String,
+      options: AbstractUserStatus,
+      default: AbstractUserStatus.OFFLINE,
+    },
+  },
+  computed: {
+    badgeColorVar() {
+      switch (this.status) {
+        case AbstractUserStatus.ACTIVE: return 'online-color';
+        case AbstractUserStatus.DND: return 'dnd-color';
+        case AbstractUserStatus.BUSY: return 'busy-color';
+        case AbstractUserStatus.OFFLINE: return 'offline-color';
+        default: return 'offline-color';
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+  .wt-avatar {
+    position: relative;
+    width: var(--avatar-size);
+    height: var(--avatar-size);
+
+    &__img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+</style>

package/src/components/atoms/wt-badge/__tests__/wt-badge.spec.js

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

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

@@ -0,0 +1,39 @@
+<template>
+  <aside
+    class="wt-badge"
+    :class="{ 'wt-badge--outside': outside }"
+    :style="{ background: `var(--${colorVariable})` }"
+  ></aside>
+</template>
+
+<script>
+export default {
+  name: 'wt-badge',
+  props: {
+    colorVariable: {
+      type: String,
+      default: 'false-color',
+      description: 'see all available colors in webitel-ui docs',
+    },
+    outside: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+  .wt-badge {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: var(--wt-badge-size);
+    height: var(--wt-badge-size);
+    border-radius: 50%;
+
+    &--outside {
+      transform: translate(-100%, -100%);
+    }
+  }
+</style>

package/src/components/index.js

@@ -1,4 +1,6 @@
 import Vue from 'vue';
+import WtAvatar from './atoms/wt-avatar/wt-avatar.vue';
+import WtBadge from './atoms/wt-badge/wt-badge.vue';
 import WtIcon from './atoms/wt-icon/wt-icon.vue';
 import WtIndicator from './atoms/wt-indicator/wt-indicator.vue';
 import WtInputInfo from './atoms/wt-input-info/wt-input-info.vue';
@@ -48,6 +50,8 @@ import WtTableActions from './organisms/wt-table-actions/wt-table-actions.vue';
 import WtTableColumnSelect from './organisms/wt-table-column-select/wt-table-column-select.vue';
 
 const Components = {
+  WtAvatar,
+  WtBadge,
   WtIcon,
   WtIndicator,
   WtInputInfo,

package/src/css/components/_components.scss

@@ -1,3 +1,5 @@
+@import 'atoms/wt-avatar/variables';
+@import 'atoms/wt-badge/variables';
 @import 'atoms/wt-chip/variables';
 @import "atoms/wt-button/variables";
 @import "atoms/wt-icon/variables";

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

@@ -0,0 +1,9 @@
+:root {
+  --avatar-size--md: var(--spacing-md);
+  --avatar-size: var(--avatar-size--md);
+
+  --online-color: var(--true-color);
+  --dnd-color: var(--accent-color);
+  --busy-color: var(--false-color);
+  --offline-color: var(--secondary-color);
+}

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

@@ -0,0 +1,3 @@
+:root {
+  --wt-badge-size: var(--spacing-xs);
+}