@webitel/ui-sdk 0.9.63 → 1.0.0

package/src/components/molecules/wt-tabs/wt-tabs.vue

@@ -12,7 +12,7 @@
       @click="open(tab)"
     >
       <slot :name="tab.value" v-bind="{ tab, current }">
-        {{tab.text}}
+        <span style="display: block;">{{ tab.text }}</span>
       </slot>
     </button>
 
@@ -75,10 +75,10 @@
   }
 
   .wt-tab {
-    @extend %typo-body-lg;
+    @extend %typo-body-1;
     position: relative;
     display: inline-block;
-    padding: var(--tab-padding);
+    padding-bottom: var(--tab-padding);
     margin: var(--tab-margin);
     color: var(--tab-color);
     background: transparent;
@@ -92,36 +92,24 @@
 
     &:hover,
     &:focus, {
-      @extend %typo-strong-lg;
       color: var(--tab--hover-color);
+      border-bottom-color: var(--tab--active-border-color);
     }
 
     &.wt-tab--highlight {
-      @extend %typo-strong-lg;
       color: var(--tab--active-color);
       border-bottom-color: var(--tab--active-border-color);
     }
 
-    // disables bold font resize on hover
+    //// disables bold font resize on hover
     &:after {
       display: block;
       content: attr(value);
-      font-family: 'Montserrat Semi', monospace;
+      font-weight: bold;
       height: 0;
       overflow: hidden;
       visibility: hidden;
     }
   }
 
-  // all tabs underline
-  .wt-tabs__underline {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    height: var(--tabs-underiline-height);
-    background: var(--tabs-underiline-color);
-    z-index: 0;
-  }
-
 </style>

package/src/components/molecules/wt-tags-input/wt-tags-input.vue

@@ -147,6 +147,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '../../../css/components/atoms/wt-chip/wt-chip';
+
 .wt-tags-input {
   width: 100%;
 }
@@ -154,11 +156,6 @@ export default {
 .wt-label {
   margin-bottom: var(--label-margin);
   cursor: text;
-
-  .wt-tags-input:hover &,
-  .wt-tags-input:focus-within & {
-    color: var(--form-label--hover-color);
-  }
 }
 
 // increase specificity
@@ -179,6 +176,7 @@ export default {
       .ti-tags {
         display: flex;
         align-items: center;
+        gap: var(--tags-input-tags-gap);
         padding: var(--tags-input-padding);
         margin: 0; // reset default
         word-break: break-word; //break long word
@@ -190,23 +188,17 @@ export default {
       }
 
       .ti-new-tag-input {
-        @extend %typo-body-lg;
-        border-radius: var(--border-radius);
+        @extend %typo-body-1;
+        @include wt-placeholder;
 
-        &::placeholder {
-          @extend %typo-body-lg;
-          color: var(--form-placeholder-color);
-        }
+        border-radius: var(--border-radius);
       }
 
       .ti-tag {
-        @extend %typo-body-lg;
+        @extend .wt-chip;
+        display: flex;
         height: fit-content;
-        padding: var(--tags-input-padding);
-        margin: 0 var(--tags-input-tag-spacing-margin) var(--tags-input-tag-spacing-margin) 0;  // reset default
-        color: var(--tags-input-tag-text-color);
-        background: var(--tags-input-tag-bg-color);
-        border-radius: var(--tags-input-tag-border-radius);
+        margin: 0;  // reset default
         transition: var(--transition);
 
         .ti-actions {
@@ -237,7 +229,7 @@ export default {
         background: transparent; // reset default
 
         & > div {
-          @extend %typo-body-lg;
+          @extend %typo-body-1;
           padding: var(--tags-input-autocomplete-option-padding);
           color: var(--tags-input-autocomplete-option--text-color);
           transition: var(--transition);
@@ -252,6 +244,27 @@ export default {
   }
 }
 
+.wt-tags-input:hover,
+.wt-tags-input:focus-within {
+  .wt-label {
+    color: var(--form-label--hover-color);
+  }
+
+  .wt-tags-input__tags-input ::v-deep {
+    .ti-new-tag-input {
+      border-color: var(--form-border--hover-color);
+    }
+  }
+}
+
+.wt-tags-input:focus-within {
+  .wt-tags-input__tags-input ::v-deep {
+    .ti-new-tag-input {
+      @include wt-placeholder('focus');
+    }
+  }
+}
+
 .wt-tags-input--invalid,
 .wt-tags-input--invalid:hover,
 .wt-tags-input--invalid:focus-within, {
@@ -269,8 +282,6 @@ export default {
 }
 
 .wt-tags-input--disabled {
-  pointer-events: none;
-
   .wt-tags-input__tags-input {
     width: 100%;
     max-width: 100%; // reset default

package/src/components/molecules/wt-textarea/wt-textarea.vue

@@ -140,7 +140,8 @@
   }
 
   .wt-textarea__textarea {
-    @extend %typo-body-lg;
+    @extend %typo-body-1;
+    @include wt-placeholder;
 
     display: block;
     width: 100%;
@@ -154,26 +155,17 @@
     transition: var(--transition);
     resize: none;
 
-    &::placeholder {
-      color: var(--form-placeholder-color)
-    }
-
-    .wt-textarea:hover &,
     &:focus {
-      border-color: var(--form-border--hover-color);
+      @include wt-placeholder('focus');
 
-      &::placeholder {
-        color: var(--form-placeholder--hover-color)
-      }
+      border-color: var(--form-border--hover-color);
     }
 
     .wt-textarea--disabled & {
+      @include wt-placeholder('disabled');
+
       background: var(--form-border--disabled-color);
       border-color: var(--form-border--disabled-color);
-
-      &::placeholder {
-        color: var(--form-placeholder--disabled-color);
-      }
     }
   }
 

package/src/components/molecules/wt-time-input/wt-time-input.vue

@@ -152,7 +152,7 @@ import validationMixin from '../../../mixins/validationMixin/validationMixin';
   }
 
   .wt-time-input__input {
-    @extend %typo-body-lg;
+    @extend %typo-body-1;
 
     display: block;
     width: 100%;

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

@@ -15,6 +15,7 @@
     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;

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

@@ -1,16 +1,16 @@
 <template>
-  <div class="wt-app-navigator" v-clickaway="close">
+  <div v-clickaway="close" class="wt-app-navigator">
     <wt-icon-btn
-      class="wt-app-navigator__btn"
       :class="{'active': isOpened}"
       :tooltip="$t('webitelUI.appNavigator.title')"
+      class="wt-app-navigator__btn"
       icon="app-navigator"
       @click="isOpened = !isOpened"
     ></wt-icon-btn>
     <transition name="fade">
       <nav
-        class="wt-app-navigator__nav-wrapper"
         v-show="isOpened"
+        class="wt-app-navigator__nav-wrapper"
       >
         <h3 class="wt-app-navigator__nav-title">
           {{ $t('webitelUI.appNavigator.title') }}
@@ -19,114 +19,114 @@
 
           <li
             v-if="formattedApps[WebitelApplications.AGENT]"
-            class="wt-app-navigator__card"
             :class="{'active': formattedApps[WebitelApplications.AGENT].currentApp }"
+            class="wt-app-navigator__card"
           >
             <a
-              class="wt-app-navigator__card__link"
               :href="formattedApps[WebitelApplications.AGENT].href"
               :title="$t(`webitelUI.appNavigator.${[WebitelApplications.AGENT]}`)"
+              class="wt-app-navigator__card__link"
               target="_blank"
             >
               <img
+                :alt="`${[WebitelApplications.AGENT]}-pic`"
                 class="wt-app-navigator__card__img"
                 src="../../../assets/components/organisms/wt-app-header/app-navigator/app-agent.svg"
-                :alt="`${[WebitelApplications.AGENT]}-pic`"
               >
             </a>
           </li>
 
           <li
             v-if="formattedApps[WebitelApplications.SUPERVISOR]"
-            class="wt-app-navigator__card"
             :class="{'active': formattedApps[WebitelApplications.SUPERVISOR].currentApp }"
+            class="wt-app-navigator__card"
           >
             <a
-              class="wt-app-navigator__card__link"
               :href="formattedApps[WebitelApplications.SUPERVISOR].href"
               :title="$t(`webitelUI.appNavigator.${[WebitelApplications.SUPERVISOR]}`)"
+              class="wt-app-navigator__card__link"
               target="_blank"
             >
               <img
+                :alt="`${[WebitelApplications.SUPERVISOR]}-pic`"
                 class="wt-app-navigator__card__img"
                 src="../../../assets/components/organisms/wt-app-header/app-navigator/app-supervisor.svg"
-                :alt="`${[WebitelApplications.SUPERVISOR]}-pic`"
               >
             </a>
           </li>
 
           <li
             v-if="formattedApps[WebitelApplications.HISTORY]"
-            class="wt-app-navigator__card"
             :class="{'active': formattedApps[WebitelApplications.HISTORY].currentApp }"
+            class="wt-app-navigator__card"
           >
             <a
-              class="wt-app-navigator__card__link"
               :href="formattedApps[WebitelApplications.HISTORY].href"
               :title="$t(`webitelUI.appNavigator.${[WebitelApplications.HISTORY]}`)"
+              class="wt-app-navigator__card__link"
               target="_blank"
             >
               <img
+                :alt="`${[WebitelApplications.HISTORY]}-pic`"
                 class="wt-app-navigator__card__img"
                 src="../../../assets/components/organisms/wt-app-header/app-navigator/app-history.svg"
-                :alt="`${[WebitelApplications.HISTORY]}-pic`"
               >
             </a>
           </li>
 
           <li
             v-if="false && formattedApps[WebitelApplications.AUDIT]"
-            class="wt-app-navigator__card"
             :class="{'active': formattedApps[WebitelApplications.AUDIT].currentApp }"
+            class="wt-app-navigator__card"
           >
             <a
-              class="wt-app-navigator__card__link"
               :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"
-                :alt="`${[WebitelApplications.AUDIT]}-pic`"
               >
             </a>
           </li>
 
           <li
             v-if="formattedApps[WebitelApplications.ADMIN]"
-            class="wt-app-navigator__card"
             :class="{'active': formattedApps[WebitelApplications.ADMIN].currentApp }"
+            class="wt-app-navigator__card"
           >
             <a
-              class="wt-app-navigator__card__link"
               :href="formattedApps[WebitelApplications.ADMIN].href"
               :title="$t(`webitelUI.appNavigator.${[WebitelApplications.ADMIN]}`)"
+              class="wt-app-navigator__card__link"
               target="_blank"
             >
               <img
+                :alt="`${[WebitelApplications.ADMIN]}-pic`"
                 class="wt-app-navigator__card__img"
                 src="../../../assets/components/organisms/wt-app-header/app-navigator/app-admin.svg"
-                :alt="`${[WebitelApplications.ADMIN]}-pic`"
               >
             </a>
           </li>
 
           <li
             v-if="formattedApps[WebitelApplications.ANALYTICS]"
-            class="wt-app-navigator__card"
             :class="{'active': formattedApps[WebitelApplications.ANALYTICS].currentApp }"
+            class="wt-app-navigator__card"
           >
             <a
-              class="wt-app-navigator__card__link"
               :href="formattedApps[WebitelApplications.ANALYTICS].href"
               :title="$t(`webitelUI.appNavigator.${[WebitelApplications.ANALYTICS]}`)"
+              class="wt-app-navigator__card__link"
               target="_blank"
             >
               <img
+                :alt="`${[WebitelApplications.ANALYTICS]}-pic`"
                 class="wt-app-navigator__card__img"
                 src="../../../assets/components/organisms/wt-app-header/app-navigator/app-analytics.svg"
-                :alt="`${[WebitelApplications.ANALYTICS]}-pic`"
               >
             </a>
           </li>
@@ -180,10 +180,9 @@ export default {
 <style lang="scss" scoped>
 .wt-app-navigator {
   position: relative;
+  z-index: var(--wt-app-header-content-z-index);
   display: flex;
   align-items: center;
-  margin-left: var(--wt-app-header-content-gap);
-  z-index: var(--wt-app-header-content-z-index);
 }
 
 // dropdown part
@@ -192,38 +191,38 @@ export default {
   position: absolute;
   top: 100%; // icon
   right: 0;
+  overflow: auto;
   max-height: var(--wt-app-navigator-max-height);
-  padding: var(--wt-app-header-content-gap);
   margin-top: var(--wt-app-header-content-panel-margin);
-  background: var(--wt-app-header-content-bg-color);
-  box-shadow: var(--box-shadow);
-  border-radius: var(--border-radius);
+  padding: var(--wt-app-header-content-gap);
   transition: var(--transition);
-  overflow: auto;
+  border-radius: var(--border-radius);
+  background: var(--wt-app-header-content-bg-color);
+  box-shadow: var(--elevation-1);
 }
 
 .wt-app-navigator__nav-title {
-  @extend %typo-strong-lg;
+  @extend %typo-subtitle-1;
+  margin-bottom: var(--wt-app-header-content-gap);
   text-align: center;
   text-transform: uppercase;
-  margin-bottom: var(--wt-app-header-content-gap);
 }
 
 // ul with li apps
 .wt-app-navigator__nav {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  grid-gap: var(--wt-app-header-content-gap);
+  grid-gap: var(--wt-app-navigator-item-gap);
 }
 
 .wt-app-navigator__card {
+  box-sizing: border-box;
   width: var(--wt-app-navigator-item-size);
   height: var(--wt-app-navigator-item-size);
-  box-sizing: border-box;
+  transition: var(--transition);
   border: var(--wt-app-navigator-item-border);
   border-color: var(--wt-app-navigator-item-border-color);
   border-radius: var(--border-radius);
-  transition: var(--transition);
 
   &.active, &:hover {
     border-color: var(--wt-app-navigator-item-border-color--hover);