@webitel/ui-sdk 3.2.124 → 3.2.126

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

@@ -0,0 +1,24 @@
+<template>
+  <span class="wt-chip" :class="`wt-chip--${color}-color`">
+    <slot></slot>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'wt-chip',
+  props: {
+    color: {
+      type: String,
+      default: 'main',
+      options: ['main', 'outline', 'accent', 'secondary', 'secondary-50', 'success', 'danger', 'transfer'],
+      notes: '"main" and "outline" are chip-specific colors',
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import './wt-chip.scss';
+@import './variables.scss';
+</style>

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

@@ -74,6 +74,8 @@ function handleOptionClick({ option, index, hide }) {
 </script>
 
 <style lang="scss" scoped>
+@import './variables.scss';
+
 .wt-context-menu {
   line-height: 0;
 

package/src/components/{molecules/wt-datepicker → wt-datepicker}/__tests__/WtDatepicker.spec.js

@@ -1,7 +1,7 @@
 import { shallowMount, mount } from '@vue/test-utils';
 import WtDatepicker from '../wt-datepicker.vue';
 import WtLabel from '../../wt-label/wt-label.vue';
-import WtIcon from '../../../atoms/wt-icon/wt-icon.vue';
+import WtIcon from '../../wt-icon/wt-icon.vue';
 
 describe('WtDatepicker', () => {
   it('renders a component', () => {

package/src/components/{molecules/wt-datepicker → wt-datepicker}/wt-datepicker.vue

@@ -132,6 +132,8 @@ const isDateTime = props.mode === 'datetime';
 </script>
 
 <style lang="scss" scoped>
+@import './variables.scss';
+
 .wt-datepicker :deep(.dp__main) {
   .dp__input_icon {
     left: var(--spacing-xs);

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

@@ -0,0 +1,27 @@
+<template>
+  <hr class="wt-divider">
+</template>
+
+<script>
+export default {
+  name: 'wt-divider',
+};
+</script>
+
+<style lang="scss" scoped>
+@import './variables.scss';
+
+.wt-divider {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  height: 0;
+  max-height: 0;
+  padding: 0;
+  margin: 0;
+  border: var(--divider-border);
+  border-color: var(--divider-border-color);
+  border-top-width: thin;
+}
+</style>

package/src/components/{molecules/wt-dummy → wt-dummy}/wt-dummy.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script setup>
-import dummy from '../../../assets/components/molecules/wt-dummy/dummy.svg';
+import dummy from '../../assets/components/molecules/wt-dummy/dummy.svg';
 
 const props = defineProps({
   src: {

package/src/components/{organisms/wt-error-page → wt-error-page}/wt-error-page.vue

@@ -19,8 +19,8 @@
 </template>
 
 <script>
-import pic403 from '../../../assets/components/organisms/wt-error-page/403.svg';
-import pic404 from '../../../assets/components/organisms/wt-error-page/404.svg';
+import pic403 from '../../assets/components/organisms/wt-error-page/403.svg';
+import pic404 from '../../assets/components/organisms/wt-error-page/404.svg';
 
 export default {
   name: 'wt-error-page',

package/src/components/{organisms/wt-headline → wt-headline}/wt-headline.vue

@@ -21,6 +21,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import './variables.scss';
+
 .wt-headline {
   display: flex;
   align-items: center;

package/src/components/{organisms/wt-headline-nav → wt-headline-nav}/wt-headline-nav.vue

@@ -38,6 +38,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import './variables.scss';
+
 .wt-headline-nav {
   display: flex;
   align-items: center;

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

@@ -29,7 +29,21 @@ export default {
     color: {
       type: String,
       default: 'default',
-      options: ['default', 'contrast', 'active', 'accent', 'secondary', 'disabled', 'success', 'danger', 'transfer', 'job', 'hold', 'secondary-50', 'icon-secondary'],
+      options: [
+        'default',
+        'contrast',
+        'active',
+        'accent',
+        'secondary',
+        'disabled',
+        'success',
+        'danger',
+        'transfer',
+        'job',
+        'hold',
+        'secondary-50',
+        'icon-secondary',
+      ],
     },
     iconPrefix: {
       type: String,
@@ -51,6 +65,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import './variables.scss';
+
 .wt-icon {
   display: inline-flex;
   justify-content: center;

package/src/components/{molecules/wt-icon-btn → wt-icon-btn}/__tests__/WtIconBtn.spec.js

@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import WtIconBtn from '../wt-icon-btn.vue';
-import WtIcon from '../../../atoms/wt-icon/wt-icon.vue';
+import WtIcon from '../../wt-icon/wt-icon.vue';
 
 describe('WtIconBtn', () => {
   it('renders a component', () => {

package/src/components/{molecules/wt-icon-btn → wt-icon-btn}/wt-icon-btn.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import WtIcon from '../../atoms/wt-icon/wt-icon.vue';
+import WtIcon from '../wt-icon/wt-icon.vue';
 
 export default {
   name: 'wt-icon-btn',

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

@@ -45,6 +45,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import './variables.scss';
+
 .wt-indicator {
   display: flex;
   align-items: center;

package/src/components/{molecules/wt-input → wt-input}/wt-input.vue

@@ -68,7 +68,7 @@
 </template>
 
 <script>
-import validationMixin from '../../../mixins/validationMixin/validationMixin';
+import validationMixin from '../../mixins/validationMixin/validationMixin';
 
 /*
 * IMPORTANT: WT-INPUT SHOULD SUPPORT VUE 3 AND VUE 2 V-MODEL INTERFACES SO THAT THERE'S
@@ -246,6 +246,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import './variables.scss';
+
 .wt-input {
   cursor: text;
 

package/src/components/wt-input-info/wt-input-info.vue

@@ -0,0 +1,37 @@
+<template>
+  <div
+    class="wt-input-info"
+    :class="{
+      'wt-input-info--invalid': invalid,
+    }"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'wt-input-info',
+  props: {
+    invalid: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import './variables.scss';
+
+.wt-input-info {
+  @extend %typo-caption;
+  margin-top: var(--input-info-margin);
+  color: var(--input-info-color);
+  min-height: var(--input-info-min-height);
+
+  &--invalid {
+    color: var(--input-info--invalid-color);
+  }
+}
+</style>

package/src/components/{molecules/wt-label → wt-label}/wt-label.vue

@@ -44,6 +44,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import './variables.scss';
+
 .wt-label {
   @extend %typo-body-1;
 

package/src/components/{molecules/wt-load-bar → wt-load-bar}/wt-load-bar.vue

@@ -29,6 +29,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import './variables.scss';
+
 .wt-load-bar {
   position: relative;
   box-sizing: border-box;

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

@@ -7,26 +7,28 @@
 import WtLoaderSm from './_internals/wt-loader--sm.vue';
 import WtLoaderMd from './_internals/wt-loader--md.vue';
 
-  export default {
-    name: 'wt-loader',
-    components: {
-      WtLoaderSm,
-      WtLoaderMd,
+export default {
+  name: 'wt-loader',
+  components: {
+    WtLoaderSm,
+    WtLoaderMd,
+  },
+  props: {
+    size: {
+      type: String,
+      default: 'md',
+      description: '["sm", "md"]',
     },
-    props: {
-      size: {
-        type: String,
-        default: 'md',
-        description: '["sm", "md"]',
-      },
-      color: {
-        type: String,
-        default: 'contrast',
-        description: '["main", "contrast"]',
-      },
+    color: {
+      type: String,
+      default: 'contrast',
+      description: '["main", "contrast"]',
     },
-  };
+  },
+};
 </script>
 
 <style lang="scss" scoped>
+@import './variables.scss';
+
 </style>

package/src/components/{organisms/wt-navigation-bar → wt-navigation-bar}/wt-navigation-bar.vue

@@ -14,31 +14,31 @@
             v-if="currentApp === 'admin'"
             alt="admin"
             class="wt-navigation-bar__app-pic"
-            src="../../../assets/components/organisms/wt-navigation-bar/logo-admin-app.svg"
+            src="../../assets/components/organisms/wt-navigation-bar/logo-admin-app.svg"
           >
           <img
             v-if="currentApp === 'agent'"
             alt="agent"
             class="wt-navigation-bar__app-pic"
-            src="../../../assets/components/organisms/wt-navigation-bar/logo-agent-app.svg"
+            src="../../assets/components/organisms/wt-navigation-bar/logo-agent-app.svg"
           >
           <img
             v-if="currentApp === 'audit'"
             alt="audit"
             class="wt-navigation-bar__app-pic"
-            src="../../../assets/components/organisms/wt-navigation-bar/logo-audit-app.svg"
+            src="../../assets/components/organisms/wt-navigation-bar/logo-audit-app.svg"
           >
           <img
             v-if="currentApp === 'history'"
             alt="history"
             class="wt-navigation-bar__app-pic"
-            src="../../../assets/components/organisms/wt-navigation-bar/logo-history-app.svg"
+            src="../../assets/components/organisms/wt-navigation-bar/logo-history-app.svg"
           >
           <img
             v-if="currentApp === 'supervisor'"
             alt="supervisor"
             class="wt-navigation-bar__app-pic"
-            src="../../../assets/components/organisms/wt-navigation-bar/logo-supervisor-app.svg"
+            src="../../assets/components/organisms/wt-navigation-bar/logo-supervisor-app.svg"
           >
           <wt-icon-btn
             class="wt-navigation-bar__nav-close"
@@ -109,7 +109,7 @@
 </template>
 
 <script>
-import ExpandTransition from '../../transitions/wt-expand-transition.vue';
+import ExpandTransition from '../transitions/wt-expand-transition.vue';
 
 export default {
   name: 'wt-navigation-bar',
@@ -133,14 +133,14 @@ export default {
     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));
+      .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);
+      .filter((nav) => nav.subNav)
+      .find((nav) => nav.subNav.indexOf(currentNav) !== -1);
       return {
         nav: currentNav?.value,
         expansion: currentExpansion?.value,
@@ -165,6 +165,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import './variables.scss';
+
 .wt-navigation-bar__menu-btn {
   display: block;
   width: fit-content;

package/src/components/{molecules/wt-notification → wt-notification}/__tests__/WtNotification.spec.js

@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import WtNotification from '../wt-notification.vue';
-import WtIcon from '../../../atoms/wt-icon/wt-icon.vue';
+import WtIcon from '../../wt-icon/wt-icon.vue';
 
 describe('WtNotification', () => {
   it('renders a component', () => {

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

@@ -0,0 +1,83 @@
+<template>
+  <article
+    class="wt-notification"
+    @click="$emit('close')"
+  >
+    <wt-icon
+      class="wt-notification__icon"
+      :icon="notificationIcon"
+      :color="notificationIconColor"
+    ></wt-icon>
+
+    <p class="wt-notification__text">
+      <slot></slot>
+    </p>
+  </article>
+</template>
+
+<script>
+
+export default {
+  name: 'wt-notification',
+  props: {
+    type: {
+      type: String,
+      default: 'info',
+    },
+  },
+  computed: {
+    notificationIcon() {
+      switch (this.type) {
+        case 'info':
+          return 'done';
+        case 'error':
+          return 'attention';
+        default:
+          return '';
+      }
+    },
+    notificationIconColor() {
+      switch (this.type) {
+        case 'info':
+          return 'success';
+        case 'error':
+          return 'danger';
+        default:
+          return '';
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import './variables.scss';
+
+.wt-notification {
+  @extend %typo-body-1;
+  @include width-fit-content;
+
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  min-width: var(--notification-min-width);
+  max-width: var(--notification-max-width);
+  padding: var(--notification-padding);
+  color: var(--notification-text-color);
+  background: var(--notification-bg-color);
+  border-radius: var(--border-radius);
+  box-shadow: var(--elevation-1);
+  cursor: pointer;
+}
+
+.wt-notification__icon {
+  flex: 0 0 var(--icon-md-size);
+  margin-right: var(--notification-icon-margin);
+}
+
+.wt-notification__text {
+  flex-grow: 1;
+  align-self: center;
+  margin: 0;
+}
+</style>

package/src/components/{organisms/wt-notifications-bar → wt-notifications-bar}/__tests__/WtNotificationsBar.spec.js

@@ -1,7 +1,7 @@
 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';
+import WtNotification from '../../wt-notification/wt-notification.vue';
+import eventBus from '../../../scripts/eventBus';
 
 describe('WtNotificationsBar', () => {
   it('renders a component', () => {

package/src/components/{organisms/wt-notifications-bar → wt-notifications-bar}/wt-notifications-bar.vue

@@ -44,6 +44,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import './variables.scss';
+
 .wt-notifications-bar {
   @extend %wt-scrollbar;
 

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

@@ -70,6 +70,7 @@ const emptySecondary = computed(() => !(props.secondaryAction || props.secondary
 </script>
 
 <style lang="scss" scoped>
+
 .wt-headline {
   .wt-button {
     margin-left: var(--spacing-sm);

package/src/components/{organisms/wt-page-wrapper → wt-page-wrapper}/wt-page-wrapper.vue

@@ -25,6 +25,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import './variables.scss';
+
 .wt-page-wrapper {
   display: flex;
   flex-direction: column;

package/src/components/{organisms/wt-pagination → wt-pagination}/wt-pagination.vue

@@ -39,7 +39,7 @@
 </template>
 
 <script>
-import debounce from '../../../scripts/debounce';
+import debounce from '../../scripts/debounce';
 
 export default {
   name: 'wt-pagination',
@@ -106,6 +106,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import './variables.scss';
+
 .wt-pagination {
   @extend %typo-body-1;
 

package/src/components/{organisms/wt-player → wt-player}/wt-player.vue

@@ -103,12 +103,14 @@ export default {
       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',
+      const controls = [
+        'play-large', 'play', 'progress', 'current-time',
         'mute', 'volume', 'captions', 'settings', 'pip',
-        'airplay', 'fullscreen'];
+        'airplay', 'fullscreen',
+      ];
       if (this.download) controls.push('download');
       this.player = new Plyr(this.$refs.player, {
-      // this.player = new Plyr('.wt-player__player', {
+        // this.player = new Plyr('.wt-player__player', {
         autoplay: this.autoplay,
         loadSprite: false,
         resetOnEnd: this.resetOnEnd,
@@ -150,7 +152,8 @@ export default {
 </script>
 
 <style lang="scss">
-@import "~plyr/src/sass/plyr.scss";
+@import '../../../node_modules/plyr/src/sass/plyr';
+@import './variables.scss';
 
 .wt-player {
   @extend %typo-body-2;
@@ -160,10 +163,12 @@ export default {
     &-sticky {
       position: sticky;
     }
+
     &-relative {
       position: relative;
       bottom: unset;
     }
+
     &-static {
       position: static;
     }

package/src/components/{molecules/wt-popup → wt-popup}/wt-popup.vue

@@ -56,6 +56,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import './variables.scss';
+
 .wt-popup {
   position: fixed;
   z-index: var(--popup-wrapper-z-index);

package/src/components/{molecules/wt-progress-bar → wt-progress-bar}/wt-progress-bar.vue

@@ -1,9 +1,11 @@
 <template>
-  <div class="wt-progress-bar" :class="[{
+  <div
+    class="wt-progress-bar" :class="[{
       'wt-progress-bar--overflow': isOverflow,
      },
      `wt-progress-bar--${color}`
-     ]">
+     ]"
+  >
     <span class="wt-progress-bar__progress" :style="`width: ${this.progressWidth}%;`"></span>
   </div>
 </template>
@@ -41,6 +43,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import './variables.scss';
+
 .wt-progress-bar {
   box-sizing: border-box;
   width: 100%;
@@ -63,12 +67,15 @@ export default {
 .wt-progress-bar--primary .wt-progress-bar__progress {
   background: var(--progress-bar-bg-color--primary);
 }
+
 .wt-progress-bar--secondary .wt-progress-bar__progress {
   background: var(--progress-bar-bg-color--secondary);
 }
+
 .wt-progress-bar--success .wt-progress-bar__progress {
   background: var(--progress-bar-bg-color--success);
 }
+
 .wt-progress-bar--danger .wt-progress-bar__progress {
   background: var(--progress-bar-bg-color--danger);
 }

package/src/components/{molecules/wt-radio → wt-radio}/__tests__/WtRadio.spec.js

@@ -1,7 +1,7 @@
 import { mount, shallowMount } from '@vue/test-utils';
 import WtRadio from '../wt-radio.vue';
 import WtLabel from '../../wt-label/wt-label.vue';
-import WtIcon from '../../../atoms/wt-icon/wt-icon.vue';
+import WtIcon from '../../wt-icon/wt-icon.vue';
 
 describe('WtRadio', () => {
   it('renders a component', () => {