@webitel/ui-sdk 0.1.2-vue3 → 0.1.3-vite

package/src/{css/components/organisms → components}/wt-app-header/_variables.scss

@@ -2,6 +2,7 @@
 :root {
   --wt-app-header-min-height: 56px;
   --wt-app-header-padding: var(--spacing-sm);
+  --wt-app-header-background: var(--dp-9-surface-color);
 
   --wt-app-header-content-gap: var(--spacing-sm);
   --wt-app-header-content-panel-margin: var(--spacing-2xs);
@@ -14,11 +15,11 @@
   --wt-app-navigator-item-gap: var(--wt-app-header-content-gap);
   --wt-app-navigator-item-border: 1px solid;
   --wt-app-navigator-item-border-color: var(--secondary-color);
-  --wt-app-navigator-item-border-color--hover: var(--accent-color);
+  --wt-app-navigator-item-border-color--hover: var(--primary-color);
 
   --wt-header-actions-min-width: 120px;
   --wt-header-actions-content-sections-gap: var(--spacing-lg);
   --wt-header-actions-padding: var(--wt-app-header-content-gap);
   --wt-header-actions-action-bg-color--hover: var(--secondary-color);
   --wt-header-actions-action-link-padding: var(--spacing-xs);
-}
+}

package/src/components/wt-app-header/wt-app-header.vue

@@ -0,0 +1,29 @@
+<template>
+  <header class="wt-app-header">
+    <slot></slot>
+  </header>
+</template>
+
+<script>
+export default {
+  name: 'wt-app-header',
+};
+</script>
+
+<style lang="scss">
+@import './variables.scss';
+</style>
+
+<style lang="scss" scoped>
+
+.wt-app-header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--wt-app-header-content-gap);
+  min-height: var(--wt-app-header-min-height); // fixed height because anything can be put inside slot, so padding won't work properly
+  padding: var(--wt-app-header-padding);
+  box-sizing: border-box;
+  background: var(--wt-app-header-background);
+}
+</style>

package/src/components/{organisms/wt-app-header → wt-app-header}/wt-app-navigator.vue

@@ -36,7 +36,7 @@
               <img
                 :alt="`${[WebitelApplications.AGENT]}-pic`"
                 class="wt-app-navigator__card__img"
-                src="../../../assets/components/organisms/wt-app-header/app-navigator/app-agent.svg"
+                src="../../assets/components/organisms/wt-app-header/app-navigator/app-agent.svg"
               >
             </a>
           </li>
@@ -55,7 +55,7 @@
               <img
                 :alt="`${[WebitelApplications.SUPERVISOR]}-pic`"
                 class="wt-app-navigator__card__img"
-                src="../../../assets/components/organisms/wt-app-header/app-navigator/app-supervisor.svg"
+                src="../../assets/components/organisms/wt-app-header/app-navigator/app-supervisor.svg"
               >
             </a>
           </li>
@@ -74,7 +74,7 @@
               <img
                 :alt="`${[WebitelApplications.HISTORY]}-pic`"
                 class="wt-app-navigator__card__img"
-                src="../../../assets/components/organisms/wt-app-header/app-navigator/app-history.svg"
+                src="../../assets/components/organisms/wt-app-header/app-navigator/app-history.svg"
               >
             </a>
           </li>
@@ -93,7 +93,7 @@
               <img
                 :alt="`${[WebitelApplications.AUDIT]}-pic`"
                 class="wt-app-navigator__card__img"
-                src="../../../assets/components/organisms/wt-app-header/app-navigator/app-audit.svg"
+                src="../../assets/components/organisms/wt-app-header/app-navigator/app-audit.svg"
               >
             </a>
           </li>
@@ -112,7 +112,7 @@
               <img
                 :alt="`${[WebitelApplications.ADMIN]}-pic`"
                 class="wt-app-navigator__card__img"
-                src="../../../assets/components/organisms/wt-app-header/app-navigator/app-admin.svg"
+                src="../../assets/components/organisms/wt-app-header/app-navigator/app-admin.svg"
               >
             </a>
           </li>
@@ -131,7 +131,45 @@
               <img
                 :alt="`${[WebitelApplications.ANALYTICS]}-pic`"
                 class="wt-app-navigator__card__img"
-                src="../../../assets/components/organisms/wt-app-header/app-navigator/app-analytics.svg"
+                src="../../assets/components/organisms/wt-app-header/app-navigator/app-analytics.svg"
+              >
+            </a>
+          </li>
+
+          <li
+            v-if="formattedApps[WebitelApplications.AUDIT]"
+            :class="{'active': formattedApps[WebitelApplications.AUDIT].currentApp }"
+            class="wt-app-navigator__card"
+          >
+            <a
+              :href="formattedApps[WebitelApplications.AUDIT].href"
+              :title="$t(`webitelUI.appNavigator.${[WebitelApplications.AUDIT]}`)"
+              class="wt-app-navigator__card__link"
+              target="_blank"
+            >
+              <img
+                :alt="`${[WebitelApplications.AUDIT]}-pic`"
+                class="wt-app-navigator__card__img"
+                src="../../assets/components/organisms/wt-app-header/app-navigator/app-audit.svg"
+              >
+            </a>
+          </li>
+
+          <li
+            v-if="formattedApps[WebitelApplications.CRM]"
+            :class="{'active': formattedApps[WebitelApplications.CRM].currentApp }"
+            class="wt-app-navigator__card"
+          >
+            <a
+              :href="formattedApps[WebitelApplications.CRM].href"
+              :title="$t(`webitelUI.appNavigator.${[WebitelApplications.CRM]}`)"
+              class="wt-app-navigator__card__link"
+              target="_blank"
+            >
+              <img
+                :alt="`${[WebitelApplications.CRM]}-pic`"
+                class="wt-app-navigator__card__img"
+                src="../../assets/components/organisms/wt-app-header/app-navigator/app-crm.svg"
               >
             </a>
           </li>
@@ -142,44 +180,34 @@
   </div>
 </template>
 
-<script>
-import WebitelApplications from '../../../enums/WebitelApplications/WebitelApplications.enum';
-
-export default {
-  name: 'wt-app-navigator',
-  data: () => ({
-    WebitelApplications,
-    isOpened: false,
-  }),
-
-  props: {
-    currentApp: {
-      type: String,
-    },
-    apps: {
-      type: Array,
-      default: () => [],
-    },
-  },
+<script setup>
+import { computed, ref } from 'vue';
+import WebitelApplications from '../../enums/WebitelApplications/WebitelApplications.enum';
 
-  computed: {
-    formattedApps() {
-      return this.apps.reduce((apps, app) => ({
-        ...apps,
-        [app.name]: {
-          ...app,
-          currentApp: this.currentApp === app.name,
-        },
-      }), {});
-    },
+const props = defineProps({
+  currentApp: {
+    type: String,
+  },
+  apps: {
+    type: Array,
+    default: () => [],
   },
+});
 
-  methods: {
-    close() {
-      this.isOpened = false;
-    },
+const isOpened = ref(false);
+
+const formattedApps = computed(() => props.apps.reduce((apps, app) => ({
+  ...apps,
+  [app.name]: {
+    ...app,
+    currentApp: props.currentApp === app.name,
   },
-};
+}), {}));
+
+function close() {
+  isOpened.value = false;
+}
+
 </script>
 
 <style lang="scss" scoped>
@@ -239,6 +267,7 @@ export default {
   display: inline-block;
   width: 100%;
   height: 100%;
+  cursor: pointer;
 }
 
 // img inside a

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

@@ -0,0 +1,32 @@
+:root {
+  --avatar-size--size-xs: calc(var(--_spacing-multiplicator) * 3);
+  --avatar-size--size-sm: calc(var(--_spacing-multiplicator) * 4);
+  --avatar-size--size-md: calc(var(--_spacing-multiplicator) * 5);
+  --avatar-size--size-lg: calc(var(--_spacing-multiplicator) * 7);
+  --avatar-size--size-xl: calc(var(--_spacing-multiplicator) * 9);
+  --avatar-size--size-2xl: calc(var(--_spacing-multiplicator) * 12);
+  --avatar-size--size-3xl: calc(var(--_spacing-multiplicator) * 16);
+
+  --avatar-size: var(--avatar-size--size-md);
+
+  --online-color: var(--true-color);
+  --dnd-color: var(--primary-color);
+  --busy-color: var(--false-color);
+  --offline-color: var(--secondary-color);
+
+  --avatar-font-color: var(--main-color);
+
+  --avatar-letters-p1-color: var(--red-lighten-2);
+  --avatar-letters-p2-color: var(--purple-lighten-2);
+  --avatar-letters-p3-color: var(--deep-purple-lighten-2);
+  --avatar-letters-p4-color: var(--indigo-lighten-2);
+  --avatar-letters-p5-color: var(--blue-lighten-1);
+  --avatar-letters-p6-color: var(--cyan-lighten-1);
+  --avatar-letters-p7-color: var(--teal-darken-3);
+  --avatar-letters-p8-color: var(--green-darken-2);
+  --avatar-letters-p9-color: var(--lime-darken-3);
+  --avatar-letters-p10-color: var(--yellow-darken-3);
+  --avatar-letters-p11-color: var(--amber-lighten-2);
+  --avatar-letters-p12-color: var(--orange-darken-1);
+  --avatar-letters-p13-color: var(--deep-purple-lighten-1);
+}

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

@@ -0,0 +1,187 @@
+<template>
+  <div
+    class="wt-avatar"
+    :class="[`wt-avatar--size-${size}`]"
+  >
+    <wt-badge
+      v-if="badge"
+      :color-variable="badgeColorVar"
+      :icon-badge="isDnd ? 'dnd' : null"
+    ></wt-badge>
+    <div
+      class="wt-avatar__letters"
+      v-if="isLetterAvatar"
+      :style="{ background: `var(${avatarLettersBackground})` }"
+    >
+      {{ avatarLetters }}
+    </div>
+    <img
+      v-else
+      class="wt-avatar__img"
+      :src="imgSrc"
+      alt="avatar"
+    >
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import defaultAvatar from '../../assets/components/atoms/wt-avatar/default-avatar.svg';
+import AbstractUserStatus from '../../enums/AbstractUserStatus/AbstractUserStatus.enum';
+
+const props = defineProps({
+  src: {
+    type: String,
+  },
+  size: {
+    type: String,
+    default: 'md',
+    options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'],
+  },
+  badge: {
+    type: Boolean,
+    default: false,
+  },
+  username: {
+    type: String,
+    description: 'If passed, avatar is letter-based (if not passed src)',
+  },
+  status: {
+    type: String,
+    options: AbstractUserStatus,
+    default: AbstractUserStatus.OFFLINE,
+  },
+});
+
+const isLetterAvatar = computed(() => !props.src && props.username);
+
+const avatarLetters = computed(() => {
+  if (!props.username) return false;
+  const abbreviation = props.username.split(' ').map((word) => word.at(0).toUpperCase()).join('');
+  return abbreviation.length > 2 ? abbreviation.at(0).concat(abbreviation.at(-1)) : abbreviation;
+});
+
+const avatarLettersBackground = computed(() => {
+  // en.concat(uk)
+  const letterList = [
+    { letters: 'AB'.concat('АБВ'), color: '--avatar-letters-p1-color' },
+    { letters: 'CD'.concat('ГҐД'), color: '--avatar-letters-p2-color' },
+    { letters: 'EF'.concat('ЕЄЖ'), color: '--avatar-letters-p3-color' },
+    { letters: 'GH'.concat('ЗИІ'), color: '--avatar-letters-p4-color' },
+    { letters: 'IJ'.concat('ЇЙК'), color: '--avatar-letters-p5-color' },
+    { letters: 'KL'.concat('ЛМН'), color: '--avatar-letters-p6-color' },
+    { letters: 'MN'.concat('ОПР'), color: '--avatar-letters-p7-color' },
+    { letters: 'OP'.concat('СТУ'), color: '--avatar-letters-p8-color' },
+    { letters: 'QR'.concat('ФХЦ'), color: '--avatar-letters-p9-color' },
+    { letters: 'ST'.concat('ЧШЩ'), color: '--avatar-letters-p10-color' },
+    { letters: 'UV'.concat('ЬЮЯ'), color: '--avatar-letters-p11-color' },
+    { letters: 'WX'.concat(''), color: '--avatar-letters-p12-color' },
+    { letters: 'YZ'.concat(''), color: '--avatar-letters-p13-color' },
+  ];
+  const searchedLetter = letterList.find(({ letters }) => letters.includes(avatarLetters.value.at(0).toUpperCase()));
+  return (searchedLetter && searchedLetter.color) || '--avatar-letters-p1-color';
+});
+
+const imgSrc = computed(() => props.src || defaultAvatar);
+
+const isDnd = computed(() => props.status === AbstractUserStatus.DND);
+
+const badgeColorVar = computed(() => {
+  switch (props.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">
+@import './variables.scss';
+</style>
+
+<style lang="scss" scoped>
+
+%wt-avatar-typo-sm {
+  font-size: 12px;
+}
+
+%wt-avatar-typo-lg {
+  font-size: 20px;
+}
+
+%wt-avatar-typo-2xl {
+  font-size: 36px;
+}
+
+%wt-avatar-typo-3xl {
+  font-size: 48px;
+}
+
+.wt-avatar {
+  position: relative;
+  width: var(--avatar-size);
+  height: var(--avatar-size);
+  user-select: none;
+  border-radius: 50%;
+
+  &__letters {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--avatar-font-color);
+    border-radius: 50%;
+  }
+
+  &__img {
+    width: 100%;
+    height: 100%;
+  }
+
+  &--size-xs {
+    width: var(--avatar-size--size-xs);
+    height: var(--avatar-size--size-xs);
+  }
+
+  &--size-sm {
+    @extend %wt-avatar-typo-sm;
+    width: var(--avatar-size--size-sm);
+    height: var(--avatar-size--size-sm);
+  }
+
+  &--size-md {
+    width: var(--avatar-size--size-md);
+    height: var(--avatar-size--size-md);
+  }
+
+  &--size-lg {
+    @extend %wt-avatar-typo-lg;
+    width: var(--avatar-size--size-lg);
+    height: var(--avatar-size--size-lg);
+  }
+
+  &--size-xl {
+    width: var(--avatar-size--size-xl);
+    height: var(--avatar-size--size-xl);
+  }
+
+  &--size-2xl {
+    @extend %wt-avatar-typo-2xl;
+    width: var(--avatar-size--size-2xl);
+    height: var(--avatar-size--size-2xl);
+  }
+
+  &--size-3xl {
+    @extend %wt-avatar-typo-3xl;
+    width: var(--avatar-size--size-3xl);
+    height: var(--avatar-size--size-3xl);
+  }
+}
+</style>

package/src/components/{atoms/wt-badge → wt-badge}/wt-badge.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import BadgeDnd from '../../../assets/icons/badge-dnd.svg';
+import BadgeDnd from '../../assets/icons/badge-dnd.svg';
 
 export default {
   name: 'wt-badge',
@@ -28,25 +28,32 @@ export default {
   computed: {
     showIconBadge() {
       switch (this.iconBadge) {
-        case 'dnd': return BadgeDnd;
-        default: return null;
+        case 'dnd':
+          return BadgeDnd;
+        default:
+          return null;
       }
     },
   },
 };
 </script>
 
+<style lang="scss">
+@import './variables.scss';
+</style>
+
 <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%);
-    }
+.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/wt-button/Readme.md

@@ -0,0 +1,23 @@
+### Different colors:
+```vue
+<div style="display: grid; grid-template-columns: 140px; gap: var(--spacing-xs);">
+  <wt-button>Primary</wt-button>
+  <wt-button color="secondary">Secondary</wt-button>
+  <wt-button disabled>Disabled</wt-button>
+  <wt-button color="success">Success</wt-button>
+  <wt-button color="error">Error</wt-button>
+  <wt-button color="transfer">Transfer</wt-button>
+  <wt-button color="job">Job</wt-button>
+  <wt-button color="info">info</wt-button>
+</div>
+```
+
+### Small button:
+```vue
+    <wt-button size="sm">Small button</wt-button>
+```
+
+### Wide button:
+```vue
+    <wt-button wide>Wide button</wt-button>
+```

package/src/components/{atoms/wt-button → wt-button}/__tests__/WtButton.spec.js

@@ -20,7 +20,7 @@ describe('WtButton', () => {
 
   it('renders button spinner', () => {
     const wrapper = shallowMount(WtButton, {
-      propsData: {
+      props: {
         loading: true,
       },
     });

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

@@ -0,0 +1,41 @@
+:root {
+  --btn-min-width: 90px;
+  --btn-padding: var(--spacing-xs) var(--spacing-sm);
+  --btn-padding--size-sm: var(--spacing-2xs) var(--spacing-xs);
+
+  // COLORS
+  --btn-primary-color: var(--primary-color);
+  --btn-primary-hover-color: var(--primary-hover-color);
+  --btn-primary-text-color: var(--on-primary-color);
+
+  --btn-secondary-color: var(--dp-10-surface-color);
+  --btn-secondary-hover-color: var(--dp-14-surface-color);
+  --btn-secondary-text-color: var(--grey-darken-4);
+
+  --btn-success-color: var(--success-color);
+  --btn-success-hover-color: var(--success-hover-color);
+  --btn-success-text-color: var(--grey-lighten-5);
+
+  --btn-info-color: var(--info-color);
+  --btn-info-hover-color: var(--info-hover-color);
+  --btn-info-text-color: var(--grey-lighten-5);
+
+  --btn-job-color: var(--job-color);
+  --btn-job-hover-color: var(--job-hover-color);
+  --btn-job-text-color: var(--grey-lighten-5);
+
+  --btn-error-color: var(--error-color);
+  --btn-error-hover-color: var(--error-hover-color);
+  --btn-error-text-color: var(--grey-lighten-5);
+
+  --btn-transfer-color: var(--transfer-color);
+  --btn-transfer-hover-color: var(--transfer-hover-color);
+  --btn-transfer-text-color: var(--on-transfer-color);
+
+  --btn-disabled-color: var(--dp-16-surface-color);
+  --btn-disabled-text-color: var(--grey-darken-1);
+}
+
+:root.theme--dark {
+  --btn-secondary-text-color: var(--grey-lighten-4);
+}