@webitel/ui-sdk 0.1.3 → 0.1.4-vue3

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

@@ -0,0 +1,50 @@
+<template>
+  <div class="wt-load-bar">
+    <span :style="`width: ${this.progressWidth}%;`" class="wt-load-bar__progress"></span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'wt-load-bar',
+  props: {
+    max: {
+      type: [Number, String],
+      default: 100,
+    },
+    value: {
+      type: [Number, String],
+      default: 0,
+    },
+  },
+  computed: {
+    progress() {
+      return (this.value * 100) / this.max;
+    },
+    progressWidth() {
+      return this.isOverflow ? 100 : this.progress;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wt-load-bar {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--load-bar-padding);
+  line-height: 0;
+  border: 1px solid var(--accent-color);
+  border-radius: var(--border-radius);
+}
+
+.wt-load-bar__progress {
+  display: inline-block;
+  height: var(--load-bar-height);
+  transition: var(--transition);
+  border-radius: var(--load-bar-border-radius);
+  background: var(--accent-color);
+  will-change: width;
+}
+</style>

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

@@ -0,0 +1,21 @@
+import { shallowMount } from '@vue/test-utils';
+import WtNotification from '../wt-notification.vue';
+import WtIcon from '../../../atoms/wt-icon/wt-icon.vue';
+
+describe('WtNotification', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtNotification, {
+      stubs: { WtIcon },
+    });
+    expect(wrapper.classes('wt-notification')).toBe(true);
+  });
+
+  it('renders message via default slot', () => {
+    const content = 'Hello there';
+    const wrapper = shallowMount(WtNotification, {
+      stubs: { WtIcon },
+      slots: { default: content },
+    });
+    expect(wrapper.find('.wt-notification__text').text()).toBe(content);
+  });
+});

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

@@ -10,7 +10,7 @@
     ></wt-icon>
 
     <p class="wt-notification__text">
-      {{notification.text}}
+      <slot></slot>
     </p>
   </article>
 </template>
@@ -20,23 +20,23 @@
   export default {
     name: 'wt-notification',
     props: {
-      notification: {
-        type: Object,
-        required: true,
+      type: {
+        type: String,
+        default: 'info',
       },
     },
     computed: {
       notificationIcon() {
-        switch (this.notification.type) {
-          case 'info': return 'rounded_tick';
+        switch (this.type) {
+          case 'info': return 'done';
           case 'error': return 'attention';
           default: return '';
         }
       },
       notificationIconColor() {
-        switch (this.notification.type) {
-          case 'info': return 'true';
-          case 'error': return 'false';
+        switch (this.type) {
+          case 'info': return 'success';
+          case 'error': return 'danger';
           default: return '';
         }
       },
@@ -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

@@ -0,0 +1,47 @@
+import { shallowMount } from '@vue/test-utils';
+import WtPopup from '../wt-popup.vue';
+
+describe('WtPopup', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtPopup, {
+      stubs: { WtIconBtn: true },
+    });
+    expect(wrapper.classes('wt-popup')).toBe(true);
+  });
+
+  it('renders popup header via header slot', () => {
+    const content = 'Popup header';
+    const wrapper = shallowMount(WtPopup, {
+      stubs: { WtIconBtn: true },
+      slots: { header: content },
+    });
+    expect(wrapper.find('.wt-popup__header').text()).toBe(content);
+  });
+
+  it('renders popup header via title slot', () => {
+    const content = 'Popup title';
+    const wrapper = shallowMount(WtPopup, {
+      stubs: { WtIconBtn: true },
+      slots: { title: content },
+    });
+    expect(wrapper.find('.wt-popup__title').text()).toBe(content);
+  });
+
+  it('renders popup main via main slot', () => {
+    const content = 'Popup main content';
+    const wrapper = shallowMount(WtPopup, {
+      stubs: { WtIconBtn: true },
+      slots: { main: content },
+    });
+    expect(wrapper.find('.wt-popup__main').text()).toBe(content);
+  });
+
+  it('renders popup actions via actions slot', () => {
+    const content = 'Popup actions';
+    const wrapper = shallowMount(WtPopup, {
+      stubs: { WtIconBtn: true },
+      slots: { actions: content },
+    });
+    expect(wrapper.find('.wt-popup__actions').text()).toBe(content);
+  });
+});

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

@@ -1,21 +1,28 @@
 <template>
-  <div class="wt-popup">
-    <div class="wt-popup__shadow"></div>
-    <aside class="wt-popup__popup">
+  <div
+    :class="{ 'wt-popup--overflow': overflow }"
+    class="wt-popup"
+  >
+    <aside
+      :style="popupStyle"
+      class="wt-popup__popup"
+    >
       <header class="wt-popup__header">
-        <slot name="header"></slot>
+        <slot name="header">
+          <h3 class="wt-popup__title">
+            <slot name="title"></slot>
+          </h3>
+        </slot>
         <wt-icon-btn
           class="wt-popup__close-btn"
-          icon="remove-rounded"
-          size="sm"
-          color="outline"
-          @click.native="$emit('close')"
+          icon="close"
+          @click="$emit('close')"
         ></wt-icon-btn>
       </header>
-      <section class="wt-popup__main">
+      <section v-if="$slots.main" class="wt-popup__main">
         <slot name="main"></slot>
       </section>
-      <footer class="wt-popup__actions">
+      <footer v-if="$slots.actions" class="wt-popup__actions">
         <slot name="actions"></slot>
       </footer>
     </aside>
@@ -23,67 +30,104 @@
 </template>
 
 <script>
-  export default {
-    name: 'wt-popup',
-  };
+export default {
+  name: 'wt-popup',
+  props: {
+    minWidth: {
+      type: [Number, String],
+    },
+    width: {
+      type: [Number, String],
+    },
+    overflow: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    popupStyle() {
+      let style = '';
+      style += this.minWidth ? `min-width: ${this.minWidth}px;` : '';
+      style += this.width ? `width: ${this.width}px;` : '';
+      return style;
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .wt-popup {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: var(--popup-wrapper-z-index);
+.wt-popup {
+  position: fixed;
+  z-index: var(--popup-wrapper-z-index);
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--popup-shadow-color);
+}
 
-    &__shadow {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      background: var(--main-primary-accent-color);
-      opacity: var(--popup-shadow-opacity);
-      z-index: 0;
-    }
-  }
+.wt-popup__popup {
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  max-height: var(--popup-max-height);
+  margin: var(--popup-padding);
+  padding: var(--popup-padding);
+  border-radius: var(--border-radius);
+  background: var(--popup-bg-color);
+  box-shadow: var(--elevation-10);
+  gap: var(--popup-sections-gap);
+}
 
-  .wt-popup__popup {
-    @extend %wt-scrollbar;
+.wt-popup__header {
+  @extend %typo-subtitle-1;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--popup-header-padding);
+  border-radius: var(--border-radius);
+  background: var(--popup-header-bg-color);
+  gap: var(--popup-header-padding);
 
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    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;
-    z-index: 1;
+  .wt-popup__title {
+    flex-grow: 1;
+    font: inherit;
   }
 
-  .wt-popup__header {
-    position: relative;
-    padding: var(--popup-header-padding);
-
-    .wt-popup__close-btn {
-      position: absolute;
-      top: 0;
-      right: 0;
-    }
+  .wt-popup__close-btn {
+    flex: 0 0 var(--icon-md-size);
   }
+}
 
-  .wt-popup__main {
-    padding: var(--popup-main-padding);
+.wt-popup__main {
+  @extend %wt-scrollbar;
+  @extend %typo-body-1;
+  overflow-y: auto;
+  flex-grow: 1;
+  min-height: 0;
+  padding-right: var(--popup-main-section-padding-right);
+}
+
+.wt-popup__actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--popup-actions-padding);
+  gap: var(--popup-actions-padding);
+}
+
+.wt-popup--overflow {
+  .wt-popup__popup {
+    overflow: visible;
   }
 
-  .wt-popup__actions {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: var(--popup-actions-padding);
+  .wt-popup__main {
+    overflow: visible;
+    padding-right: 0;
   }
+}
 </style>

package/src/components/molecules/wt-progress-bar/__tests__/WtProgressBar.spec.js

@@ -0,0 +1,17 @@
+import { shallowMount } from '@vue/test-utils';
+import WtProgressBar from '../wt-progress-bar.vue';
+
+describe('WtProgressBar', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtProgressBar);
+    expect(wrapper.exists()).toBe(true);
+  });
+  it('isOverflow correctly computes overflow=true', () => {
+    const wrapper = shallowMount(WtProgressBar, { propsData: { value: 2, max: 1 } });
+    expect(wrapper.vm.isOverflow).toBe(true);
+  });
+  it('isOverflow correctly computes overflow=false', () => {
+    const wrapper = shallowMount(WtProgressBar, { propsData: { value: 0.99, max: 1 } });
+    expect(wrapper.vm.isOverflow).toBe(false);
+  });
+});

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

@@ -0,0 +1,79 @@
+<template>
+  <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>
+
+<script>
+export default {
+  name: 'wt-progress-bar',
+  props: {
+    max: {
+      type: [Number, String],
+      default: 100,
+    },
+    value: {
+      type: [Number, String],
+      default: 0,
+    },
+    color: {
+      type: String,
+      default: 'primary',
+      options: ['primary', 'secondary', 'success', 'danger'],
+    },
+  },
+  computed: {
+    progress() {
+      return (this.value * 100) / this.max;
+    },
+    isOverflow() {
+      return this.progress >= 100;
+    },
+    progressWidth() {
+      return this.isOverflow ? 100 : this.progress;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wt-progress-bar {
+  box-sizing: border-box;
+  width: 100%;
+  position: relative;
+  padding: var(--progress-bar-padding);
+  line-height: 0;
+  border-radius: var(--border-radius);
+  box-shadow: var(--elevation-1);
+}
+
+.wt-progress-bar__progress {
+  display: inline-block;
+  height: var(--progress-bar-height);
+  will-change: width;
+  background: var(--accent-color);
+  border-radius: var(--progress-bar-border-radius) 0 0 var(--progress-bar-border-radius);
+  transition: var(--transition);
+}
+
+.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);
+}
+
+.wt-progress-bar--overflow .wt-progress-bar__progress {
+  border-radius: var(--progress-bar-border-radius);
+}
+</style>

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

@@ -0,0 +1,42 @@
+import { 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';
+
+describe('WtRadio', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtRadio, {
+      stubs: {
+        WtLabel,
+        WtIcon,
+      },
+    });
+    expect(wrapper.classes('wt-radio')).toBe(true);
+  });
+
+  it('renders label text when passed', () => {
+    const label = 'Hello there';
+    const wrapper = shallowMount(WtRadio, {
+      stubs: {
+        WtLabel,
+        WtIcon,
+      },
+      propsData: { label },
+    });
+    expect(wrapper.find('.wt-radio__label').text()).toBe(label);
+  });
+
+  it('toggles passed value at click', () => {
+    const selected = '';
+    const value = 'jest';
+    const wrapper = shallowMount(WtRadio, {
+      stubs: {
+        WtLabel,
+        WtIcon,
+      },
+      propsData: { selected, value },
+    });
+    wrapper.find('.wt-radio__input').trigger('input');
+    expect(wrapper.emitted().input[0]).toEqual([value]);
+  });
+});

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>
@@ -33,12 +31,12 @@
     props: {
       // value, set by radio
       value: {
-        type: String,
+        type: [String, Number, Boolean],
         default: '',
       },
       // currently selected value
       selected: {
-        type: String,
+        type: [String, Number, Boolean],
         default: '',
       },
       label: {
@@ -83,6 +81,10 @@
   .wt-radio {
     @include width-fit-content;
     box-sizing: border-box;
+
+    .wt-label {
+      cursor: pointer;
+    }
   }
 
   .wt-radio__wrapper {
@@ -113,7 +115,7 @@
     }
 
     ::v-deep .wt-icon__icon {
-      fill: var(--icon--hover-color);
+      fill: var(--icon-color--hover);
     }
   }
 
@@ -123,7 +125,7 @@
     }
 
     ::v-deep .wt-icon__icon {
-      fill: var(--icon--active-color);
+      fill: var(--icon-color-active);
     }
   }
 
@@ -162,7 +164,7 @@
     }
 
     ::v-deep .wt-icon__icon {
-      fill: var(--icon--disabled-color);
+      fill: var(--icon-color-disabled);
     }
   }
 </style>

package/src/components/molecules/wt-search-bar/__tests__/WtSearchBar.spec.js

@@ -0,0 +1,35 @@
+import { shallowMount } from '@vue/test-utils';
+import WtSearchBar from '../wt-search-bar.vue';
+
+describe('WtSearchBar', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtSearchBar, {
+      stubs: {
+        WtIcon: true,
+        WtIconBtn: true,
+      },
+    });
+    expect(wrapper.classes('wt-search-bar')).toBe(true);
+  });
+
+  it('debounces search event when debounce prop is true', async () => {
+    const props = {
+      value: '',
+      debounce: true,
+      debounceDelay: 100,
+    };
+    const wrapper = shallowMount(WtSearchBar, {
+      stubs: {
+        WtIcon: true,
+        WtIconBtn: true,
+      },
+      props,
+    });
+    props.value = 'val';
+    wrapper.setProps(props);
+    expect(wrapper.emitted().search).toBeFalsy();
+    await setTimeout(() => {
+      expect(wrapper.emitted().search[0].length).toBe(1);
+    }, 1000);
+  });
+});