@webitel/ui-sdk 0.9.65 → 1.0.2

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

@@ -16,11 +16,33 @@
       :maximum-view="maximumView"
       :disabled="disabled"
       :disabled-dates="disabledDates"
+      :placeholder="label || placeholder"
       :lang="lang"
-      calendar-button
       monday-first
       @input="$emit('change', $event.getTime())"
     >
+      <template slot="afterDateInput">
+        <wt-icon
+          class="wt-datepicker__calendar-icon"
+          icon="calendar"
+          :color="disabled ? 'disabled' : 'default'"
+        ></wt-icon>
+        <wt-icon
+          class="wt-datepicker__arrow-icon"
+          icon="arrow-down"
+          :color="disabled ? 'disabled' : 'default'"
+        ></wt-icon>
+      </template>
+      <template slot="beforeCalendarHeader">
+        <wt-icon
+          class="wt-datepicker__month-arrow wt-datepicker__month-arrow--left"
+          icon="arrow-left"
+        ></wt-icon>
+        <wt-icon
+          class="wt-datepicker__month-arrow wt-datepicker__month-arrow--right"
+          icon="arrow-right"
+        ></wt-icon>
+      </template>
     </vue-datepicker>
   </div>
 </template>
@@ -45,6 +67,10 @@
         type: String,
         default: '',
       },
+      placeholder: {
+        type: String,
+        default: '',
+      },
       format: {
         type: [String, Function],
       },
@@ -76,9 +102,32 @@
 </script>
 
 <style lang="scss" scoped>
-  .wt-label {
-    margin-bottom: var(--label-margin);
-    cursor: text;
+  .wt-datepicker__calendar-icon {
+    position: absolute;
+    top: var(--spacing-xs);
+    left: var(--input-padding);
+    pointer-events: none;
+  }
+
+  .wt-datepicker__arrow-icon {
+    position: absolute;
+    top: var(--spacing-xs);
+    right: var(--input-padding);
+    pointer-events: none;
+  }
+
+  .wt-datepicker__month-arrow{
+    position: absolute;
+    top: var(--spacing-xs);
+    pointer-events: none;
+
+    &--right {
+      right: var(--spacing-xs);
+    }
+
+    &--left {
+      left: var(--spacing-xs);
+    }
   }
 
   ::v-deep .vdp-datepicker {
@@ -89,52 +138,22 @@
       position: relative;
 
       input {
-        @extend %typo-body-lg;
+        @extend %typo-body-1;
+        @include wt-placeholder;
         box-sizing: border-box;
         width: 100%;
         padding: var(--datepicker-padding);
         border: var(--datepicker-border);
         border-color: var(--form-border-color);
         border-radius: var(--border-radius);
-      }
 
-      // arrow down icon
-      .vdp-datepicker__calendar-button {
-        position: absolute;
-        top: 50%;
-        right: var(--datepicker-icon-margin);
-        width: 24px;
-        height: 24px;
-        transform: translateY(-50%);
-
-        &:before {
-          content: '';
-          position: absolute;
-          width: 24px;
-          height: 24px;
-          background: url("../../../assets/icons/arrow-down--md.svg") center center;
-          background-size: contain;
-          transition: var(--transition);
-        }
-
-        // hide defaults
-        span {
-          display: none;
+        &:focus {
+          @include wt-placeholder('focus');
         }
       }
 
-      // calendar icon
-      &:before {
-        content: '';
-        position: absolute;
-        top: 50%;
-        left: var(--datepicker-icon-margin);
-        width: 24px;
-        height: 24px;
-        background: url("../../../assets/icons/calendar--md.svg") center center;
-        background-size: contain;
-        transform: translateY(-50%);
-        pointer-events: none;
+      .vdp-datepicker__calendar-button {
+        display: none;
       }
     }
     @import '../../../css/components/molecules/wt-datepicker/datepicker-calendar';
@@ -155,17 +174,6 @@
         input {
           border-color: var(--form-border--hover-color);
         }
-
-        // arrow down icon
-        .vdp-datepicker__calendar-button:before {
-          background: url("../../../assets/icons/arrow-down--active--md.svg") center center;
-          background-size: contain;
-        }
-
-        // calendar icon
-        &:before {
-          background: url("../../../assets/icons/calendar--active--md.svg") center center;
-        }
       }
     }
   }
@@ -192,17 +200,6 @@
           background: var(--form-border--disabled-color);
           border-color: var(--form-border--disabled-color);
         }
-
-        // arrow down icon
-        .vdp-datepicker__calendar-button:before {
-          background: url("../../../assets/icons/arrow-down--disabled--md.svg") center center;
-          background-size: contain;
-        }
-
-        // calendar icon
-        &:before {
-          background: url("../../../assets/icons/calendar--disabled--md.svg") center center;
-        }
       }
     }
   }

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

@@ -163,18 +163,13 @@
     position: relative;
   }
 
-  .wt-label {
-    margin-bottom: var(--label-margin);
-    cursor: text;
-  }
-
   .wt-datetimepicker__preview {
     position: relative;
     cursor: text;
     outline: none;
 
     &__input {
-      @extend %typo-body-lg;
+      @extend %typo-body-1;
       display: block;
       width: 100%;
       box-sizing: border-box;
@@ -222,7 +217,7 @@
   }
 
   .wt-datetimepicker__quick-filter {
-    @extend %typo-body-sm;
+    @extend %typo-caption;
     text-decoration: underline;
     cursor: pointer;
   }

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

@@ -246,9 +246,6 @@ export default {
   }
 
   .wt-label {
-    margin-bottom: var(--label-margin);
-    cursor: text;
-
     .wt-input:hover &,
     .wt-input:focus-within & {
       color: var(--form-label--hover-color);
@@ -261,7 +258,8 @@ export default {
   }
 
   .wt-input__input {
-    @extend %typo-body-lg;
+    @extend %typo-body-1;
+    @include wt-placeholder;
 
     display: block;
     width: 100%;
@@ -273,34 +271,18 @@ export default {
     border-radius: var(--border-radius);
     transition: var(--transition);
 
-    &::placeholder {
-      color: var(--form-placeholder-color);
-    }
-
-    .wt-input:hover &,
     &:focus {
+      @include wt-placeholder('focus');
       border-color: var(--form-border--hover-color);
-
-      &::placeholder {
-        color: var(--form-placeholder--hover-color)
-      }
     }
 
     .wt-input--outline & {
       border-color: var(--form-outline-border-color);
-
-      &::placeholder {
-        color: var(--form-outline-placeholder-color);
-      }
     }
 
     .wt-input--outline:hover &,
     .wt-input--outline &:focus {
       border-color: var(--form-outline-border--hover-color);
-
-      &::placeholder {
-        color: var(--form-outline-placeholder--hover-color)
-      }
     }
 
     .wt-input--invalid &,
@@ -310,12 +292,9 @@ export default {
     }
 
     .wt-input--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-label/wt-label.vue

@@ -53,12 +53,13 @@ export default {
 
 <style lang="scss" scoped>
 .wt-label {
-  @extend %typo-body-lg;
+  @extend %typo-body-1;
 
   display: flex;
   align-items: center;
   color: var(--form-label-color);
   transition: var(--transition);
+  cursor: text;
 
   &--outline {
     color: var(--form-outline-label-color);
@@ -74,7 +75,9 @@ export default {
 }
 
 .wt-label__hint {
-  margin-left: var(--component-spacing);
+  cursor: pointer;
+  margin-left: var(--spacing-xs);
+
   ::v-deep {
     .wt-tooltip {
       width: max-content; // experimental css property

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

@@ -46,7 +46,7 @@
 
 <style lang="scss" scoped>
   .wt-notification {
-    @extend %typo-body-lg;
+    @extend %typo-body-1;
     @include width-fit-content;
 
     position: relative;
@@ -58,11 +58,12 @@
     color: var(--notification-text-color);
     background: var(--notification-bg-color);
     border-radius: var(--border-radius);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--elevation-1);
     cursor: pointer;
   }
 
   .wt-notification__icon {
+    flex: 0 0 var(--icon-md-size);
     margin-right: var(--notification-icon-margin);
   }
 

package/src/components/molecules/wt-popup/__tests__/WtPopup.spec.js

@@ -24,7 +24,7 @@ describe('WtPopup', () => {
       stubs: { WtIconBtn: true },
       slots: { title: content },
     });
-    expect(wrapper.find('.wt-popup__header__title').text()).toBe(content);
+    expect(wrapper.find('.wt-popup__title').text()).toBe(content);
   });
 
   it('renders popup main via main slot', () => {

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

@@ -8,16 +8,14 @@
     >
       <header class="wt-popup__header">
         <slot name="header">
-          <h3 class="wt-popup__header__title">
+          <h3 class="wt-popup__title">
             <slot name="title"></slot>
           </h3>
         </slot>
         <wt-icon-btn
           class="wt-popup__close-btn"
-          icon="close--filled"
-          size="sm"
-          color="active"
-          @click.native="$emit('close')"
+          icon="close"
+          @click="$emit('close')"
         ></wt-icon-btn>
       </header>
       <section class="wt-popup__main" v-if="$slots.main">
@@ -65,25 +63,24 @@ export default {
     right: 0;
     bottom: 0;
     left: 0;
-    background: var(--main-primary-accent-color);
-    opacity: var(--popup-shadow-opacity);
+    background: var(--popup-shadow-color);
     z-index: 0;
   }
 }
 
 .wt-popup__popup {
-  @extend %wt-scrollbar;
-
   position: absolute;
   top: 50%;
   left: 50%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--popup-sections-gap);
   max-height: var(--popup-max-height);
   padding: var(--popup-padding);
   background: var(--popup-bg-color);
   transform: translate(-50%, -50%);
   border-radius: var(--border-radius);
-  box-shadow: var(--box-shadow);
-  overflow-y: auto;
+  box-shadow: var(--elevation-10);
   z-index: 1;
 
   &--overflow {
@@ -92,39 +89,40 @@ export default {
 }
 
 .wt-popup__header {
+  @extend %typo-subtitle-1;
   position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--popup-header-padding);
   padding: var(--popup-header-padding);
+  background: var(--popup-header-bg-color);
+  border-radius: var(--border-radius);
 
-  .wt-popup__header__title {
-    @extend %typo-strong-lg;
-    text-align: center;
-    padding: var(--popup-header-title-padding);
+  .wt-popup__title {
+    font: inherit;
+    flex-grow: 1;
   }
 
   .wt-popup__close-btn {
-    position: absolute;
-    top: 0;
-    right: 0;
+    flex: 0 0 var(--icon-md-size);
   }
 }
 
 .wt-popup__main {
-  @extend %typo-body-lg;
-  padding: var(--popup-main-padding);
+  @extend %wt-scrollbar;
+  @extend %typo-body-1;
+  min-height: 0;
+  flex-grow: 1;
+  overflow-y: auto;
+  padding-right: var(--popup-main-section-padding-right);
 }
 
 .wt-popup__actions {
   display: flex;
   justify-content: center;
   align-items: center;
+  gap: var(--popup-actions-padding);
   padding: var(--popup-actions-padding);
-
-  .wt-button {
-    margin-left: 20px;
-
-    &:first-child {
-      margin-left: 0;
-    }
-  }
 }
 </style>

package/src/components/molecules/wt-progress-bar/wt-progress-bar.vue

@@ -48,7 +48,7 @@ export default {
   padding: var(--progress-bar-padding);
   line-height: 0;
   border-radius: var(--border-radius);
-  box-shadow: var(--progress-bar-box-shadow);
+  box-shadow: var(--elevation-2);
 }
 
 .wt-progress-bar__progress {
@@ -56,9 +56,8 @@ export default {
   height: var(--progress-bar-height);
   will-change: width;
   background: var(--accent-color);
-  border-radius: var(--border-radius) 0 0 var(--border-radius);
+  border-radius: var(--progress-bar-border-radius) 0 0 var(--progress-bar-border-radius);
   transition: var(--transition);
-  box-shadow: var(--progress-bar-box-shadow);
 }
 
 .wt-progress-bar--primary .wt-progress-bar__progress {
@@ -75,6 +74,6 @@ export default {
 }
 
 .wt-progress-bar--overflow .wt-progress-bar__progress {
-  border-radius: var(--border-radius);
+  border-radius: var(--progress-bar-border-radius);
 }
 </style>

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

@@ -16,9 +16,7 @@
         :disabled="disabled"
         @input="inputHandler"
       >
-      <span class="wt-radio__checkmark">
       <wt-icon :icon="radioIcon"></wt-icon>
-    </span>
       <!-- @slot Custom input label -->
       <slot name="label" v-bind="{ label, isChecked, disabled }">
         <div v-if="label" class="wt-radio__label">{{ label }}</div>

package/src/components/molecules/wt-search-bar/wt-search-bar.vue

@@ -20,8 +20,7 @@
       <wt-icon-btn
         class="wt-search-bar__reset-icon-btn"
         :class="{ 'hidden': !value }"
-        icon="close--filled"
-        size="sm"
+        icon="close"
         @click="$emit('input', '')"
       ></wt-icon-btn>
     </div>
@@ -133,7 +132,8 @@
   }
 
   .wt-search-bar__input {
-    @extend %typo-body-lg;
+    @extend %typo-body-1;
+    @include wt-placeholder;
 
     display: block;
     width: 100%;
@@ -145,34 +145,18 @@
     border-radius: var(--border-radius);
     transition: var(--transition);
 
-    &::placeholder {
-      color: var(--form-placeholder-color)
-    }
-
-    .wt-search-bar:hover &,
     &:focus {
+      @include wt-placeholder('focus');
       border-color: var(--form-border--hover-color);
-
-      &::placeholder {
-        color: var(--form-placeholder--hover-color)
-      }
     }
 
     .wt-search-bar--outline & {
       border-color: var(--form-outline-border-color);
-
-      &::placeholder {
-        color: var(--form-outline-placeholder-color)
-      }
     }
 
     .wt-search-bar--outline:hover &,
     .wt-search-bar--outline &:focus {
       border-color: var(--form-outline-border--hover-color);
-
-      &::placeholder {
-        color: var(--form-outline-placeholder--hover-color)
-      }
     }
   }