@webitel/ui-sdk 23.9.2 → 23.12.2

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

@@ -1,11 +1,10 @@
-<!-- eslint-disable -->
 <template>
   <i
     class="wt-icon"
     :class="[
        `wt-icon--size-${size}`,
        `wt-icon--color-${color}`,
-       { 'wt-icon--disabled': disabled }
+       { 'wt-icon--disabled': disabled },
      ]"
   >
     <svg class="wt-icon__icon">
@@ -14,54 +13,53 @@
   </i>
 </template>
 
-<script>
-export default {
-  name: 'wt-icon',
-  props: {
-    icon: {
-      type: String,
-      required: true,
-    },
-    size: {
-      type: String,
-      default: 'md',
-    },
-    color: {
-      type: String,
-      default: 'default',
-      options: [
-        'default',
-        'contrast',
-        'active',
-        'accent',
-        'secondary',
-        'disabled',
-        'success',
-        'danger',
-        'transfer',
-        'job',
-        'hold',
-        'secondary-50',
-        'icon-secondary',
-      ],
-    },
-    iconPrefix: {
-      type: String,
-      default: '',
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
+<script setup>
+
+import { computed } from 'vue';
+
+const props = defineProps({
+  /**
+   * Icon name
+   * @example '<wt-icon icon="close"></wt-icon>'
+   */
+  icon: {
+    type: String,
+    required: true,
+  },
+  /**
+   * @values xs, sm (16px), md (24px), lg (32px), xl (40px), 2xl, 3xl
+   * @example '<wt-icon icon="close" size="sm"></wt-icon>'
+   */
+  size: {
+    type: String,
+    default: 'md',
+  },
+  /**
+   * @values 'default', 'disabled', 'error', 'success', 'warning', 'on-dark', 'on-light', 'on-primary', 'info', 'chat', 'transfer'
+   */
+  color: {
+    type: String,
+    default: 'default',
   },
-  computed: {
-    iconName() {
-      let name = '#';
-      if (this.iconPrefix) name += `${this.iconPrefix}-`;
-      return `${name}${this.icon}`;
-    },
+  /**
+   * inserts icon name prefix between "icon" and actual icon name ("icon" prop).
+   * Useful for library icons extension with project-level icons with this prefix in name
+   */
+  iconPrefix: {
+    type: String,
+    default: '',
   },
-};
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const iconName = computed(() => {
+  let name = '#';
+  if (props.iconPrefix) name += `${props.iconPrefix}-`;
+  return `${name}${props.icon}`;
+});
 </script>
 
 <style lang="scss">
@@ -90,58 +88,40 @@ svg {
   &-default .wt-icon__icon {
     fill: var(--icon-color);
   }
-
-  &-accent .wt-icon__icon {
-    fill: var(--icon-color-accent);
-  }
-
-  &-contrast .wt-icon__icon {
-    fill: var(--icon-color-contrast);
-  }
-
-  &-active .wt-icon__icon {
-    fill: var(--icon-color-active);
-  }
-
-  &-secondary .wt-icon__icon {
-    fill: var(--secondary-color);
+  &-error .wt-icon__icon {
+    fill: var(--icon-error-color);
   }
-
   &-success .wt-icon__icon {
-    fill: var(--icon-color-success);
+    fill: var(--icon-success-color);
   }
-
-  &-danger .wt-icon__icon {
-    fill: var(--icon-color-danger);
+  &-warning .wt-icon__icon {
+    fill: var(--icon-warning-color);
   }
-
-  &-transfer .wt-icon__icon {
-    fill: var(--icon-color-transfer);
+  &-on-dark .wt-icon__icon {
+    fill: var(--icon-on-dark-color);
   }
-
-  &-job .wt-icon__icon {
-    fill: var(--job-color);
+  &-on-light .wt-icon__icon {
+    fill: var(--icon-on-light-color);
   }
-
-  &-hold .wt-icon__icon {
-    fill: var(--icon-color-hold);
+  &-on-primary .wt-icon__icon {
+    fill: var(--icon-on-primary-color);
   }
-
-  &-secondary-50 .wt-icon__icon {
-    fill: var(--icon-color-secondary-50);
+  &-info .wt-icon__icon {
+    fill: var(--icon-info-color);
   }
-
-  &-icon-secondary .wt-icon__icon {
-    fill: var(--icon-color-secondary);
+  &-chat .wt-icon__icon {
+    fill: var(--icon-chat-color);
+  }
+  &-transfer .wt-icon__icon {
+    fill: var(--icon-transfer-color);
   }
-
   &-disabled .wt-icon__icon {
-    fill: var(--icon-color-disabled);
+    fill: var(--icon-disabled-color);
   }
 }
 
-.wt-icon.wt-icon--disabled .wt-icon__icon {
-  fill: var(--icon-color-disabled);
+.wt-icon--disabled .wt-icon__icon {
+  fill: var(--icon-disabled-color);
 }
 
 .wt-icon--size {
@@ -174,5 +154,10 @@ svg {
     width: var(--icon-sm-size);
     height: var(--icon-sm-size);
   }
+
+  &-xs {
+    width: var(--icon-xs-size);
+    height: var(--icon-xs-size);
+  }
 }
 </style>

package/src/components/wt-icon-action/_internals/wt-edit-icon-action.vue

@@ -2,7 +2,6 @@
   <wt-tooltip>
     <template v-slot:activator>
       <wt-icon-btn
-        class="table-action"
         icon="edit"
         :disabled="disabled"
         @click="emit('click')"

package/src/components/wt-icon-btn/Readme.md

@@ -0,0 +1,10 @@
+### Note: all wt=icon props are passed as "$attrs"
+
+```vue
+const callAlert = () => window.alert('wt-icon-btn clicked');
+
+<wt-icon-btn
+  icon="edit"
+  @click="this.callAlert"
+></wt-icon-btn>
+```

package/src/components/wt-icon-btn/_variables.scss

@@ -0,0 +1,9 @@
+
+:root {
+  --icon-btn-hover-color: var(--grey-darken-5);
+}
+
+:root.theme--dark {
+  --icon-btn-hover-color: var(--grey-lighten-5);
+}
+

package/src/components/wt-icon-btn/wt-icon-btn.vue

@@ -1,81 +1,46 @@
 <template>
-  <div :class="{ 'wt-icon-btn--disabled': disabled }" class="wt-icon-btn">
-    <button class="wt-icon-btn__button" type="button">
-      <wt-icon
-        :color="iconColor"
-        :icon="icon"
-        :icon-prefix="iconPrefix"
-        :size="size"
-        @click="$emit('click', $event)"
-        @click.native="$emit('click', $event)"
-      ></wt-icon>
-<!--      @click for vue3, @click.native for v2-compatible -->
-    </button>
-  </div>
+  <button
+    class="wt-icon-btn"
+    :class="{ 'wt-icon-btn--disabled': disabled }"
+    type="button"
+    @click="emit('click', $event)"
+  >
+    <wt-icon
+      v-bind="$attrs"
+      :disabled="disabled"
+    ></wt-icon>
+  </button>
 </template>
 
-<script>
+<script setup>
 import WtIcon from '../wt-icon/wt-icon.vue';
 
-export default {
-  name: 'wt-icon-btn',
-  components: { WtIcon },
-  props: {
-    icon: {
-      type: String,
-      required: true,
-    },
-    iconPrefix: {
-      type: String,
-      default: '',
-    },
-    size: {
-      type: String,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    color: {
-      type: String,
-    },
+const props = defineProps({
+  disabled: {
+    type: Boolean,
+    default: false,
   },
-  emits: ['click'],
-  computed: {
-    iconColor() {
-      if (this.disabled) return 'disabled';
-      return this.color;
-    },
-  },
-};
+});
+
+const emit = defineEmits(['click']);
 </script>
 
+<style lang="scss">
+@import './variables.scss';
+</style>
+
 <style lang="scss" scoped>
 .wt-icon-btn {
   position: relative;
-  display: inline-block;
-
-  .wt-icon {
-    display: flex;
-  }
-
-  // add hover style only for "default" icon color cause non-default already may have opacity 1
-  &:hover ::v-deep .wt-icon__icon.wt-icon__icon--color-default {
-    fill: var(--icon-color--hover);
-  }
+  display: block;
+  line-height: 0;
 
-  &:hover ::v-deep .wt-icon--color-icon-secondary .wt-icon__icon {
-    fill: var(--icon-color);
+  &:hover .wt-icon--color-default :deep .wt-icon__icon {
+    fill: var(--icon-btn-hover-color);
   }
 
-  // icon "disabled" color is set from iconColor computed
   &--disabled {
     pointer-events: none;
   }
 }
-
-.wt-icon-btn,
-.wt-icon-btn__button {
-  line-height: 0;
-}
 </style>

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

@@ -8,21 +8,24 @@
     class="wt-input"
   >
     <wt-label
+      v-bind="labelProps"
       v-if="hasLabel"
       :disabled="disabled"
       :for="name"
       :invalid="invalid"
       :outline="outline"
-      v-bind="labelProps"
     >
       <!-- @slot Custom input label -->
-      <slot name="label" v-bind="{ label }">{{ requiredLabel }}</slot>
+      <slot
+        v-bind="{ label }"
+        name="label"
+      >{{ requiredLabel }}</slot>
     </wt-label>
     <div class="wt-input__wrapper">
       <input
+        v-bind="$attrs"
         :id="name"
         ref="wt-input"
-        v-bind="$attrs"
         :class="{
           'wt-input--is-password': isPassword,
         }"
@@ -44,12 +47,12 @@
           name="after-input"
         ></slot>
         <slot
-          v-if="isPassword"
-          name="show-password"
           v-bind="{
           isPasswordVisible,
           switchVisibilityPassword,
         }"
+          v-if="isPassword"
+          name="show-password"
         >
           <wt-icon-btn
             :icon="showPasswordIcon"

package/src/components/wt-navigation-bar/wt-navigation-bar.vue

@@ -65,7 +65,7 @@
                   :class="{'wt-navigation-bar__nav-item-link--active': currentNav.nav === navItem.value}"
                   :to="navItem.route"
                   class="wt-navigation-bar__nav-item-link"
-                  @click.native="close"
+                  @click="close"
                 > {{ navItem.name || navItem.value }}
                 </router-link>
               </div>
@@ -99,7 +99,7 @@
                         :class="{'wt-navigation-bar__nav-item-link--active': currentNav.nav === subNavItem.value}"
                         :to="nestedRoute(subNavItem, navItem)"
                         class="wt-navigation-bar__nav-item-link wt-navigation-bar__nav-item-link--subnav"
-                        @click.native="close"
+                        @click="close"
                       >{{ subNavItem.name || subNavItem.value }}
                       </router-link>
                     </div>

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

@@ -2,11 +2,11 @@
   <wt-headline>
     <template v-slot:title-wrapper>
       <slot>
-        <template slot="title">
-          <slot name="title"></slot>
-        </template>
       </slot>
     </template>
+    <template v-slot:title>
+      <slot name="title"></slot>
+    </template>
     <template v-slot:actions>
       <slot name="actions"></slot>
       <slot

package/src/components/wt-pagination/__tests__/WtPagination.spec.js

@@ -28,9 +28,10 @@ describe('WtPagination', () => {
     const wrapper = mount(WtPagination, {
       props: { isNext: true, page: 2 },
     });
-    const pageControls = wrapper.findAllComponents('.wt-pagination__page-control');
+    const pageControls = wrapper.findAllComponents({ name: 'wt-icon-btn' });
     pageControls.at(0).vm.$emit('click');
     pageControls.at(1).vm.$emit('click');
+    console.info(wrapper.emitted());
     expect(wrapper.emitted().prev.length).toBe(1);
     expect(wrapper.emitted().next.length).toBe(1);
   });

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

@@ -18,7 +18,10 @@
       >
       <wt-icon class="wt-radio__icon" :icon="radioIcon"></wt-icon>
       <!-- @slot Custom input label -->
-      <slot name="label" v-bind="{ label, isChecked, disabled }">
+      <slot
+        v-bind="{ label, isChecked, disabled }"
+        name="label"
+      >
         <div v-if="label" class="wt-radio__label">{{ label }}</div>
       </slot>
     </wt-label>

package/src/components/wt-rounded-action/Readme.md

@@ -0,0 +1,68 @@
+### Different colors
+
+```vue
+<div class="example-wrapper" style="display: flex; gap: var(--spacing-xs);">
+<wt-rounded-action icon="call" color="primary"></wt-rounded-action>
+<wt-rounded-action icon="call" color="secondary"></wt-rounded-action>
+<wt-rounded-action icon="call" disabled></wt-rounded-action>
+<wt-rounded-action icon="call" color="success"></wt-rounded-action>
+<wt-rounded-action icon="call" color="error"></wt-rounded-action>
+<wt-rounded-action icon="call" color="transfer"></wt-rounded-action>
+</div>
+```
+
+### Active (pressed) buttons
+```vue
+<div class="example-wrapper" style="display: flex; gap: var(--spacing-xs);">
+<wt-rounded-action active icon="call" color="primary"></wt-rounded-action>
+<wt-rounded-action active icon="call" color="secondary"></wt-rounded-action>
+<wt-rounded-action active icon="call" disabled></wt-rounded-action>
+<wt-rounded-action active icon="call" color="success"></wt-rounded-action>
+<wt-rounded-action active icon="call" color="error"></wt-rounded-action>
+<wt-rounded-action active icon="call" color="transfer"></wt-rounded-action>
+</div>
+```
+
+### Wide buttons
+```vue
+<div class="example-wrapper" style="display: flex; gap: var(--spacing-xs);">
+<wt-rounded-action wide icon="call" color="secondary"></wt-rounded-action>
+<wt-rounded-action wide rounded icon="call" color="secondary"></wt-rounded-action>
+</div>
+```
+
+### Rounded buttons
+```vue
+<div class="example-wrapper" style="display: flex; gap: var(--spacing-xs);">
+<wt-rounded-action rounded icon="call" color="primary"></wt-rounded-action>
+<wt-rounded-action rounded icon="call" color="secondary"></wt-rounded-action>
+<wt-rounded-action rounded icon="call" disabled></wt-rounded-action>
+<wt-rounded-action rounded icon="call" color="success"></wt-rounded-action>
+<wt-rounded-action rounded icon="call" color="error"></wt-rounded-action>
+<wt-rounded-action rounded icon="call" color="transfer"></wt-rounded-action>
+</div>
+```
+
+### Small (sm) buttons
+```vue
+<div class="example-wrapper" style="display: flex; gap: var(--spacing-xs);">
+<wt-rounded-action size="sm" icon="call" color="primary"></wt-rounded-action>
+<wt-rounded-action size="sm" icon="call" color="secondary"></wt-rounded-action>
+<wt-rounded-action size="sm" icon="call" disabled></wt-rounded-action>
+<wt-rounded-action size="sm" icon="call" color="success"></wt-rounded-action>
+<wt-rounded-action size="sm" icon="call" color="error"></wt-rounded-action>
+<wt-rounded-action size="sm" icon="call" color="transfer"></wt-rounded-action>
+</div>
+```
+
+### Loading-state buttons
+```vue
+<div class="example-wrapper" style="display: flex; gap: var(--spacing-xs);">
+<wt-rounded-action size="sm" icon="call" color="primary" loading></wt-rounded-action>
+<wt-rounded-action size="sm" icon="call" color="secondary" loading></wt-rounded-action>
+<wt-rounded-action size="sm" icon="call" disabled loading></wt-rounded-action>
+<wt-rounded-action size="sm" icon="call" color="success" loading></wt-rounded-action>
+<wt-rounded-action size="sm" icon="call" color="error" loading></wt-rounded-action>
+<wt-rounded-action size="sm" icon="call" color="transfer" loading></wt-rounded-action>
+</div>
+```

package/src/components/wt-rounded-action/_variables.scss

@@ -1,7 +1,45 @@
 :root {
-  --rounded-action-padding: calc(var(--spacing-xs) - var(--btn-border-size));
+  --rounded-action-border-size: 1px;
+  --rounded-action-padding: calc(var(--spacing-xs) - var(--rounded-action-border-size));
 
-  --rounded-action-padding--outline: calc(var(--spacing-xs) - var(--btn-border-size));
+  --rounded-action-rounded-border-radius: var(--border-radius--pill);
 
-  --rounded-action-bg-color: var(--main-color);
-}
+  --rounded-action-primary-color: var(--primary-color);
+  --rounded-action-primary-hover-color: var(--primary-hover-color);
+
+  --rounded-action-secondary-color: var(--dp-20-surface-color);
+  --rounded-action-secondary-hover-color: var(--dp-18-surface-color);
+  --rounded-action-secondary-active-color: var(--grey-lighten-1);
+
+  --rounded-action-success-color: var(--success-color);
+  --rounded-action-success-hover-color: var(--success-hover-color);
+
+  --rounded-action-error-color: var(--error-color);
+  --rounded-action-error-hover-color: var(--error-hover-color);
+
+  --rounded-action-transfer-color: var(--transfer-color);
+  --rounded-action-transfer-hover-color: var(--transfer-hover-color);
+
+  --rounded-action-disabled-color: var(--dp-18-surface-color);
+}
+
+:root.theme--dark {
+  --rounded-action-primary-color: var(--primary-color);
+  --rounded-action-primary-hover-color: var(--primary-hover-color);
+
+  --rounded-action-secondary-color: var(--dp-20-surface-color);
+  --rounded-action-secondary-hover-color: var(--dp-18-surface-color);
+  --rounded-action-secondary-active-color: var(--grey-darken-1);
+
+  --rounded-action-success-color: var(--success-color);
+  --rounded-action-success-hover-color: var(--success-hover-color);
+
+  --rounded-action-error-color: var(--error-color);
+  --rounded-action-error-hover-color: var(--error-hover-color);
+
+  --rounded-action-transfer-color: var(--transfer-color);
+  --rounded-action-transfer-hover-color: var(--transfer-hover-color);
+
+  --rounded-action-disabled-color: var(--dp-18-surface-color);
+
+}