@webitel/ui-sdk 23.12.41 → 23.12.44

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

@@ -1,8 +1,11 @@
 <template>
-  <div class="wt-timepicker" :class="{'wt-timepicker--invalid': invalid}">
+  <div
+    class="wt-timepicker"
+    :class="{'wt-timepicker--invalid': invalid}"
+  >
     <wt-label
-      v-bind="labelProps"
       v-if="label"
+      v-bind="labelProps"
       :invalid="invalid"
     >
       {{ `${label} (${format})` }}
@@ -13,36 +16,37 @@
         :value="hour"
         :v="v"
         :label="label ? null : $t('webitelUI.timepicker.hour') "
-        :maxValue="dateMode ? null : 23"
+        :max-value="dateMode ? null : 23"
         :disabled="disabled"
         hide-input-info
         @input="hour = $event"
-      ></wt-time-input>
+      />
       <wt-time-input
         v-if="isMin"
         :value="min"
         :v="v"
         :label="label ? null : $t('webitelUI.timepicker.min')"
-        :maxValue="59"
+        :max-value="59"
         :disabled="disabled"
         hide-input-info
         @input="min = $event"
-      ></wt-time-input>
+      />
       <wt-time-input
         v-if="isSec"
         :value="sec"
         :v="v"
-        :label="label ? null :  $t('webitelUI.timepicker.sec')"
-        :maxValue="59"
+        :label="label ? null : $t('webitelUI.timepicker.sec')"
+        :max-value="59"
         :disabled="disabled"
         hide-input-info
         @input="sec = $event"
-      ></wt-time-input>
+      />
     </div>
     <wt-input-info
       v-if="isValidation"
       :invalid="invalid"
-    >{{ validationText }}
+    >
+      {{ validationText }}
     </wt-input-info>
   </div>
 </template>
@@ -54,8 +58,12 @@ const SEC_IN_HOUR = 60 * 60;
 const SEC_IN_MIN = 60;
 
 export default {
-  name: 'wt-timepicker',
+  name: 'WtTimepicker',
   mixins: [validationMixin],
+  model: {
+    prop: 'value',
+    event: 'input',
+  },
   props: {
     value: {
       type: [String, Number],
@@ -82,10 +90,6 @@ export default {
       description: 'Object with props, passed down to wt-label as props',
     },
   },
-  model: {
-    prop: 'value',
-    event: 'input',
-  },
 
   computed: {
     isHour() {
@@ -153,18 +157,6 @@ export default {
   flex-direction: column;
 }
 
-.wt-label {
-  .wt-timepicker:hover &,
-  .wt-timepicker:focus-within & {
-    color: var(--form-label--hover-color);
-  }
-
-  .wt-timepicker--invalid:hover &,
-  .wt-timepicker--invalid:focus-within & {
-    color: var(--label--invalid-color);
-  }
-}
-
 .wt-timepicker__wrapper {
   display: flex;
 }

package/src/components/wt-tooltip/__tests__/WtTooltip.spec.js

@@ -17,14 +17,4 @@ describe('WtTooltip', () => {
     });
     expect(wrapper.find('.wt-tooltip').text()).toEqual(content);
   });
-
-  it('changed tooltip color, if prop is passed', () => {
-    const wrapper = shallowMount(WtTooltip, {
-      props: {
-        contrast: true,
-      },
-    });
-    expect(wrapper.find('.wt-tooltip').classes())
-      .toContain('wt-tooltip--contrast');
-  });
 });

package/src/components/wt-tooltip/_internals/wt-tooltip-floating.vue

@@ -1,9 +1,9 @@
 <template>
   <aside
-    class="wt-tooltip-floating"
     ref="floating"
+    class="wt-tooltip-floating"
   >
-    <slot></slot>
+    <slot />
   </aside>
 </template>
 

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

@@ -2,10 +2,8 @@
 :root {
   --tooltip-padding: var(--spacing-2xs) var(--spacing-xs);
 
-  --tooltip-light-text-color: var(--text-primary-color);
-  --tooltip-light-bg-color: var(--main-color);
-  --tooltip-dark-text-color: var(--text-contrast-color);
-  --tooltip-dark-bg-color: var(--contrast-color);
+  --wt-tooltip-text-color: var(--text-main-color);
+  --wt-tooltip-background-color: var(--dp-24-surface-color);
 
   --tooltip-elevation: var(--elevation-10);
 }

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

@@ -1,29 +1,28 @@
 <template>
   <div
     :class="{
-      'wt-tooltip--contrast': contrast,
       'wt-tooltip--visible': isVisible,
-     }"
+    }"
     class="wt-tooltip"
   >
     <div
       ref="activator"
       class="wt-tooltip__activator"
     >
-      <slot name="activator"></slot>
+      <slot name="activator" />
     </div>
     <wt-tooltip-floating
       v-if="isVisible"
       ref="floating"
-      class="wt-tooltip__floating"
       v-clickaway="hideTooltip"
+      class="wt-tooltip__floating"
       :class="[popperClass]"
       :style="floatingStyles"
       :triggers="popperTriggers"
       @show="showTooltip"
       @hide="hideTooltip"
     >
-      <slot v-bind="{ hide: hideTooltip }"></slot>
+      <slot v-bind="{ hide: hideTooltip }" />
     </wt-tooltip-floating>
   </div>
 </template>
@@ -43,10 +42,6 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  contrast: {
-    type: Boolean,
-    default: false,
-  },
   placement: {
     type: String,
     default: 'auto',
@@ -133,18 +128,11 @@ onMounted(() => {
   .wt-tooltip-floating {
     @extend %typo-body-2;
     padding: var(--spacing-2xs) var(--spacing-xs);
-    color: var(--contrast-color);
-    background: var(--main-color);
+    color: var(--wt-tooltip-text-color);
+    background: var(--wt-tooltip-background-color);
     border-radius: var(--border-radius);
     box-shadow: var(--elevation-10);
     z-index: 1000;
   }
-
-  &--contrast {
-    .wt-tooltip-floating {
-      color: var(--main-color);
-      background: var(--contrast-color);
-    }
-  }
 }
 </style>

package/src/composables/useCachedInterval/__tests__/useCachedInterval.spec.js

@@ -1,14 +1,14 @@
 import { useCachedInterval } from '../useCachedInterval';
 
 describe('useCachedInterval', () => {
-  it('subscribe', (done) => {
-    const callback = jest.fn();
+  it('subscribe', async () => {
+    const callback = vi.fn();
     const { subscribe } = useCachedInterval({ timeout: 10 });
     subscribe(callback);
     expect(callback).toHaveBeenCalledTimes(1);
-    setTimeout(() => {
+    return await new Promise((resolve, reject) => setTimeout(() => {
       expect(callback).toHaveBeenCalledTimes(2);
-      done();
-    }, 10);
+      resolve();
+    }, 10));
   });
 });

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

@@ -1,5 +1,6 @@
 @import './deprecated';
 @import './palette';
+@import './reusable/text-field';
 
 :root {
   // dp colors
@@ -35,7 +36,7 @@
   --success-color: var(--green-darken-4);
   --success-hover-color: var(--green-darken-3);
   --success-light-color: var(--green-lighten-4);
-  --success-on-color: var(--black);
+  --success-on-color: var(--white);
 
   // warning colors
   --warning-color: var(--orange-accent-2);
@@ -47,7 +48,7 @@
   --error-color: var(--red-accent-2);
   --error-hover-color: var(--red-lighten-2);
   --error-light-color: var(--red-lighten-4);
-  --error-on-color: var(--black);
+  --error-on-color: var(--white);
 
   // info colors
   --info-color: var(--blue-darken-1);
@@ -84,15 +85,15 @@
   --sub-accent-color: var(--indigo-darken-3);
 
   // typography colors
-  --main-text-color: var(--grey-darken-3);
-  --main-text-disabled-color: var(--grey-lighten-1);
-  --negative-text-color: var(--error-color);
-  --link-color: var(--info-color);
+  --text-main-color: var(--grey-darken-3);
+  --text-disabled-color: var(--grey-lighten-1);
+  --text-error-color: var(--error-color);
+  --text-link-color: var(--info-color);
 }
 
 :root.theme--dark {
   // dp colors
-  --dp-24-surface-color: hsl(0, 0%, 25%);
+  --dp-24-surface-color: hsl(225, 20%, 25%);
   --dp-23-surface-color: hsl(225, 20%, 24%);
   --dp-22-surface-color: hsl(225, 20%, 23%);
   --dp-21-surface-color: hsl(225, 20%, 22%);
@@ -124,19 +125,19 @@
   --success-color: var(--green-darken-4);
   --success-hover-color: var(--green-darken-3);
   --success-light-color: var(--green-lighten-3);
-  --success-on-color: var(--white);
+  --success-on-color: var(--black);
 
   // warning colors
   --warning-color: var(--orange-accent-2);
   --warning-hover-color: var(--orange-accent-1);
   --warning-light-color: var(--orange-lighten-3);
-  --warning-on-color: var(--white);
+  --warning-on-color: var(--black);
 
   // error colors
   --error-color: var(--red-accent-2);
   --error-hover-color: var(--red-lighten-2);
   --error-light-color: var(--red-lighten-3);
-  --error-on-color: var(--white);
+  --error-on-color: var(--black);
 
   // info colors
   --info-color: var(--blue-darken-1);
@@ -173,8 +174,8 @@
   --sub-accent-color: var(--indigo-darken-3);
 
   // typography colors
-  --main-text-color: var(--grey-lighten-3);
-  --main-text-disabled-color: var(--grey-darken-1);
-  --negative-text-color: var(--error-color);
-  --link-color: var(--info-color);
+  --text-main-color: var(--grey-lighten-3);
+  --text-disabled-color: var(--grey-darken-1);
+  --text-error-color: var(--error-color);
+  --text-link-color: var(--info-color);
 }

package/src/css/styleguide/colors/reusable/_text-field.scss

@@ -0,0 +1,36 @@
+// shared text field colors
+
+:root {
+  // TODO: move to separate helper-text component
+  // helper
+  --wt-helper-text-color: var(--text-main-color);
+  --wt-helper-text-disabled-color: var(--text-disabled-color);
+
+  // placeholder
+  --wt-text-field-error-text-color: var(--error-color);
+  --wt-text-field-placeholder-color: var(--text-main-color);
+  --wt-text-field-placeholder-error-color: var(--error-color);
+  --wt-text-field-placeholder-disabled-color: var(--text-disabled-color);
+
+  // border
+  --wt-text-field-input-border-color: var(--grey-darken-1);
+  --wt-text-field-input-border-disabled-color: var(--dp-16-surface-color);
+  --wt-text-field-input-border-error-color: var(--error-color);
+
+  // input bg
+  --wt-text-field-input-background-disabled-color: var(--dp-16-surface-color);
+
+  // select
+  --wt-text-field-select-option-text-color: var(--text-main-color);
+  --wt-text-field-select-option-text-hover-color: var(--primary-on-color);
+  --wt-text-field-select-option-text-selected-color: var(--primary-on-color);
+
+  --wt-text-field-select-option-wrapper-border-color: var(--dp-22-surface-color);
+  --wt-text-field-select-option-background-color: var(--dp-22-surface-color);
+  --wt-text-field-select-option-background-hover-color: var(--primary-light-color);
+  --wt-text-field-select-option-background-selected-color: var(--primary-color);
+}
+
+:root.theme--dark {
+  --wt-text-field-input-border-color: var(--grey-lighten-1);
+}

package/src/css/styleguide/placeholder/_placeholder.scss

@@ -15,12 +15,12 @@ $vendors: (':-webkit', '-moz', ':-moz', '-ms');
       font: inherit;
       transition: var(--transition);
 
-      @if ($style == 'focus') {
-        color: var(--form-placeholder-color--focus);
+      @if ($style == 'error') {
+        color: var(--wt-text-field-placeholder-error-color);
       } @else if ($style == 'disabled') {
-        color: var(--form-placeholder-color--disabled);
+        color: var(--wt-text-field-placeholder-disabled-color);
       } @else {
-        color: var(--form-placeholder-color);
+        color: var(--wt-text-field-placeholder-color);
       }
 
       @content;
@@ -35,15 +35,15 @@ $vendors: (':-webkit', '-moz', ':-moz', '-ms');
 %wt-placeholder {
   font: inherit;
   transition: var(--transition);
-  color: var(--form-placeholder-color);
+  color: var(--wt-text-field-placeholder-color);
 }
 
-%wt-placeholder--focus {
+%wt-placeholder--disabled {
   @extend %wt-placeholder;
-  color: var(--form-placeholder-color--focus);
+  color: var(--wt-text-field-placeholder-disabled-color);
 }
 
-%wt-placeholder--disabled {
+%wt-placeholder--error {
   @extend %wt-placeholder;
-  color: var(--form-placeholder-color--disabled);
+  color: var(--wt-text-field-placeholder-error-color);
 }

package/src/locale/i18n.js

@@ -14,7 +14,7 @@ const messages = {
 };
 
 // eslint-disable-next-line new-cap
-export default new createI18n({
+export default createI18n({
   // legacy: false,
   locale: 'en',
   allowComposition: true,