@webitel/ui-sdk 0.1.2 → 0.1.3-vue3

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

@@ -0,0 +1,174 @@
+<!-- We were trying to draw our own slider using <div> tags, but realizing all the limitations decided to use
+the native input of type 'range', styling it as per Webitel needs for every of the most popular web browsers.
+
+The biggest issue to solve was the vertical input. At the moment browsers do not support vertical input range having
+custom styling, so we are using css rotation.
+Dealing with rotation we realized rotated element is very hard to position correctly with no fixed height of the parent element.
+Considering the fact parent height is always relative to it's childs height, we are manipulating the child width/height on rotation.
+To achieve correct slider height we:
+ 1. Rotate slider by 90deg, so the width of slider becomes 'heigth' of the parent.
+ 2. Set the new slider width (which is now positioned from bottom to top) using fixed number of pixels, received with props.
+ 3. Set the container element height to 100% so it is always calculated correctly depending on it`s child dimensions.
+
+Until there are no possibility to style input range and position it vertically, we are rotating our slider with css
+and swapping height/width of this component in order to have the correct output.
+-->
+
+<template>
+  <div
+    :class="{
+        'wt-slider--disabled': disabled,
+        'wt-slider--vertical': vertical,
+      }"
+    :style="{ height: verticalHeight }"
+    class="wt-slider"
+  >
+    <div
+      :style="{ width: verticalHeight }"
+      class="wt-slider__wrapper"
+    >
+      <!-- The row above is needed in order to set correct component width when slider is vertical -->
+      <input
+        :disabled="disabled"
+        :max="max"
+        :min="min"
+        :step="step"
+        :style="{ background: progressStyle }"
+        :value="value"
+        class="wt-slider__slider"
+        type="range"
+        @input="inputHandler"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'wt-slider',
+  props: {
+    value: {
+      type: Number,
+      default: 0,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    vertical: {
+      type: Boolean,
+      default: false,
+    },
+    min: {
+      type: Number,
+      default: 0,
+    },
+    max: {
+      type: Number,
+      default: 100,
+    },
+    step: {
+      type: Number,
+      default: 1,
+    },
+    // Height of vertical slider (px):
+    height: {
+      type: Number,
+      default: 100,
+    },
+  },
+  computed: {
+    progressStyle() { // To achieve the correct color styling:
+      const progressPercent = ((this.value - this.min) / (this.max - this.min)) * 100;
+      return `linear-gradient(to right, var(--accent-color) ${progressPercent}%, var(--secondary-color) 0%)`;
+    },
+    verticalHeight() { // in order to have correct parent height after slider rotation
+      return this.vertical ? `${this.height}px` : '100%';
+    },
+  },
+  methods: {
+    inputHandler(event) {
+      this.$emit('input', +event.target.value);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wt-slider__wrapper {
+  display: flex;
+  align-items: center;
+  width: var(--wt-slider-width);
+  height: var(--wt-slider-height);
+}
+
+.wt-slider__slider {
+  box-sizing: border-box;
+  width: var(--wt-slider-width);
+  height: var(--wt-slider-input-height);
+  margin: 0;
+  cursor: pointer;
+  border: var(--wt-slider-border);
+  border-radius: var(--border-radius);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+
+  &::-webkit-slider-thumb {
+    width: var(--wt-slider-pointer-size);
+    height: var(--wt-slider-pointer-size);
+    border: var(--wt-slider-border);
+    border-radius: var(--wt-slider-pointer-radius);
+    background: var(--main-color);
+    -webkit-appearance: none;
+  }
+
+  &::-webkit-slider-runnable-track {
+    -webkit-appearance: none;
+  }
+
+  &::-moz-range-thumb {
+    width: var(--wt-slider-pointer-size);
+    height: var(--wt-slider-pointer-size);
+    border: var(--wt-slider-border);
+    border-radius: var(--wt-slider-pointer-radius);
+    background: var(--main-color);
+    -moz-appearance: none;
+  }
+
+  &::-moz-range-track {
+    -moz-appearance: none;
+  }
+
+  &::-ms-thumb {
+    appearance: none;
+  }
+
+  &::-ms-track {
+    appearance: none;
+  }
+}
+
+.wt-slider--disabled {
+  .wt-slider__slider {
+    pointer-events: none;
+
+    &::-webkit-slider-thumb {
+      display: none;
+    }
+
+    &::-moz-range-thumb {
+      display: none;
+    }
+  }
+}
+
+.wt-slider--vertical {
+  width: var(--wt-slider-height);
+  transform: var(--wt-slider-vertical-container-translation);
+
+  .wt-slider__wrapper {
+    transform: var(--wt-slider-vertical-transform);
+    transform-origin: var(--wt-slider-vertical-transform-origin);
+  }
+}
+</style>

package/src/components/molecules/wt-switcher/__tests__/WtSwitcher.spec.js

@@ -0,0 +1,31 @@
+import { shallowMount } from '@vue/test-utils';
+import WtSwitcher from '../wt-switcher.vue';
+import WtLabel from '../../wt-label/wt-label.vue';
+
+describe('WtSwitcher', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtSwitcher, {
+      stubs: { WtLabel },
+    });
+    expect(wrapper.classes('wt-switcher')).toBe(true);
+  });
+
+  it('renders label text when passed', () => {
+    const label = 'Hello there';
+    const wrapper = shallowMount(WtSwitcher, {
+      stubs: { WtLabel },
+      propsData: { label },
+    });
+    expect(wrapper.find('.wt-switcher__label').text()).toBe(label);
+  });
+
+  it('toggles passed value at click', () => {
+    const value = true;
+    const wrapper = shallowMount(WtSwitcher, {
+      stubs: { WtLabel },
+      propsData: { value },
+    });
+    wrapper.find('.wt-switcher__input').trigger('change');
+    expect(wrapper.emitted().change[0]).toEqual([!value]);
+  });
+});

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

@@ -2,13 +2,15 @@
   <div
     class="wt-switcher"
     :class="{
-      'wt-switcher--active': value,
+      'wt-switcher--off': !value,
+      'wt-switcher--on': value,
       'wt-switcher--disabled': disabled,
     }"
   >
     <wt-label
       class="wt-switcher__wrapper"
       :class="{'wt-switcher__wrapper--label-left': labelLeft}"
+      v-bind="labelProps"
     >
       <input
         class="wt-switcher__input"
@@ -46,6 +48,10 @@
         type: Boolean,
         default: false,
       },
+      labelProps: {
+        type: Object,
+        description: 'Object with props, passed down to wt-label as props',
+      },
     },
     model: {
       prop: 'value',
@@ -64,6 +70,10 @@
     @include width-fit-content;
     position: relative;
     box-sizing: border-box;
+
+    .wt-label {
+      cursor: pointer;
+    }
   }
 
   .wt-switcher__wrapper {
@@ -86,6 +96,9 @@
       margin-left: 0;
       margin-right: var(--switcher-icon-margin);
     }
+    .wt-switcher:hover & {
+      color: var(--form-label--hover-color);
+    }
   }
 
   .wt-switcher__input {
@@ -99,46 +112,62 @@
   .wt-switcher__checkmark {
     position: relative;
     display: block;
+    flex: 0 0 var(--switcher-width);
     width: var(--switcher-width);
     height: var(--switcher-height);
-    background: var(--switcher-bg-color);
     border-radius: var(--switcher-border-radius);
     transition: var(--transition);
 
     &:before {
       content: '';
       position: absolute;
-      bottom: var(--switcher-checkmark-margin);
-      left: var(--switcher-checkmark-margin);
-      height: var(--switcher-checkmark-size);
-      width: var(--switcher-checkmark-size);
-      background: var(--switcher-checkmark-color);
+      bottom: var(--switcher-cicle-margin);
+      left: var(--switcher-cicle-margin);
+      height: var(--switcher-cicle-size);
+      width: var(--switcher-cicle-size);
+      background: var(--switcher-circle-bg-color);
       border-radius: 50%;
       transition: var(--transition);
     }
   }
 
-  .wt-switcher:hover {
-    .wt-switcher__label {
-      color: var(--form-label--hover-color);
+  .wt-switcher--off {
+    .wt-switcher__checkmark {
+      background: var(--switcher-bg-color--off);
     }
 
-    .wt-switcher__checkmark {
-      background: var(--switcher-checkmark--hover-color);
+    &:hover {
+      .wt-switcher__checkmark {
+        background: var(--switcher-bg-color--off--hover);
+      }
     }
-  }
 
-  .wt-switcher--active, .wt-switcher--active:hover {
-    .wt-switcher__label {
-      color: var(--form-label--active-color);
+    &.wt-switcher--disabled {
+      .wt-switcher__checkmark {
+        background: var(--switcher-bg-color--off--disabled);
+      }
     }
+  }
 
+  .wt-switcher--on {
     .wt-switcher__checkmark {
-      background: var(--switcher-checkmark--active-color);
+      background: var(--switcher-bg-color--on);
 
       /* Show the indicator (dot/circle) when checked */
       &:before {
-        transform: translateX(var(--switcher-checkmark-translateX));
+        transform: translateX(var(--switcher-cicle-translateX));
+      }
+    }
+
+    &:hover {
+      .wt-switcher__checkmark {
+        background: var(--switcher-bg-color--on--hover);
+      }
+    }
+
+    &.wt-switcher--disabled {
+      .wt-switcher__checkmark {
+        background: var(--switcher-bg-color--on--disabled);
       }
     }
   }
@@ -149,9 +178,5 @@
     .wt-switcher__label {
       color: var(--form-label--disabled-color);
     }
-
-    .wt-switcher__checkmark {
-      background: var(--icon--disabled-color);
-    }
   }
 </style>

package/src/components/molecules/wt-tabs/__tests__/WtTabs.spec.js

@@ -0,0 +1,36 @@
+import { shallowMount } from '@vue/test-utils';
+import WtTabs from '../wt-tabs.vue';
+
+const tabs = [{ value: 'tab1', text: 'default' }];
+describe('WtTabs', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtTabs);
+    expect(wrapper.classes('wt-tabs')).toBe(true);
+  });
+
+  it('component emits change at tab click', () => {
+    const wrapper = shallowMount(WtTabs, {
+      propsData: { tabs },
+    });
+    wrapper.find('.wt-tab').trigger('click');
+    expect(wrapper.emitted().change.pop()).toEqual([tabs[0]]);
+  });
+
+  it('renders tab default content', () => {
+    const wrapper = shallowMount(WtTabs, {
+      propsData: { tabs },
+    });
+    expect(wrapper.find('.wt-tab').text()).toBe(tabs[0].text);
+  });
+
+  it('renders tab custom content via default slot', () => {
+    const custom = 'custom name';
+    const wrapper = shallowMount(WtTabs, {
+      propsData: { tabs },
+      slots: {
+        tab1: custom,
+      },
+    });
+    expect(wrapper.find('.wt-tab').text()).toBe(custom);
+  });
+});

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

@@ -1,125 +1,117 @@
 <template>
   <nav class="wt-tabs">
     <button
-      class="wt-tab"
+      v-for="(tab) in tabs"
+      :key="tab.value"
       :class="{
         'wt-tab--highlight': tab.value === current.value
       }"
-      v-for="(tab) in tabs"
       :value="tab.text"
-      :key="tab.value"
+      class="wt-tab"
       type="button"
       @click="open(tab)"
     >
       <slot :name="tab.value" v-bind="{ tab, current }">
-        {{tab.text}}
+        <span style="display: block;">{{ tab.text }}</span>
       </slot>
     </button>
 
     <div class="wt-tabs__underline">
       <div
-        class="wt-tab__underline--highlight"
         :style="{
           width: `${activeLineWidth}px`,
           transform: `translateX(${activeLineOffset}px)`
         }"
+        class="wt-tab__underline--highlight"
       ></div>
     </div>
   </nav>
 </template>
 
 <script>
-  export default {
-    name: 'wt-tabs',
-    props: {
-      current: {
-        type: Object,
-        default: () => {},
-      },
-      tabs: {
-        type: Array,
-        default: () => [],
-      },
+export default {
+  name: 'wt-tabs',
+  props: {
+    current: {
+      type: Object,
+      default: () => ({}),
     },
-
-    model: {
-      prop: 'current',
-      event: 'change',
+    tabs: {
+      type: Array,
+      default: () => [],
     },
+  },
 
-    data: () => ({
-      activeLineWidth: 0,
-      activeLineOffset: 0,
-    }),
+  model: {
+    prop: 'current',
+    event: 'change',
+  },
 
-    methods: {
-      open(value) {
-        this.$emit('change', value);
-        this.moveActiveLine(value);
-      },
+  data: () => ({
+    activeLineWidth: 0,
+    activeLineOffset: 0,
+  }),
+
+  methods: {
+    open(value) {
+      this.$emit('change', value);
+      this.moveActiveLine(value);
+    },
 
-      moveActiveLine(newValue) {
-        if (!this.current) return;
-        if (!this.$refs || !this.$refs[newValue] || !this.$refs[newValue][0]) return;
-        const element = this.$refs[newValue][0];
-        this.activeLineWidth = element.clientWidth;
-        this.activeLineOffset = element.offsetLeft;
-      },
+    moveActiveLine(newValue) {
+      if (!this.current) return;
+      if (!this.$refs || !this.$refs[newValue] || !this.$refs[newValue][0]) return;
+      const element = this.$refs[newValue][0];
+      this.activeLineWidth = element.clientWidth;
+      this.activeLineOffset = element.offsetLeft;
     },
-  };
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .wt-tabs {
-    position: relative;
-  }
-
-  .wt-tab {
-    @extend %typo-body-lg;
-    position: relative;
-    display: inline-block;
-    padding: var(--tab-padding);
-    margin: var(--tab-margin);
-    color: var(--tab-color);
-    background: transparent;
-    border: none;
-    border-bottom: var(--tab-border);
-    border-bottom-color: transparent;
-    transition: var(--transition);
-    cursor: pointer;
-    z-index: var(--tab-z-index);
+.wt-tabs {
+  position: relative;
+  display: flex;
+  flex-wrap: nowrap;
+  gap: var(--tab-gap);
+}
 
-    &:hover {
-      @extend %typo-strong-lg;
-      color: var(--tab--hover-color);
-    }
+.wt-tab {
+  @extend %typo-body-1;
+  position: relative;
+  z-index: var(--tab-z-index);
+  display: inline-block;
+  padding-bottom: var(--tab-padding);
+  cursor: pointer;
+  transition: var(--transition);
+  color: var(--tab-color);
+  border: none;
+  border-bottom: var(--tab-border);
+  border-bottom-color: transparent;
+  outline: none;
+  background: transparent;
 
-    &.wt-tab--highlight {
-      @extend %typo-strong-lg;
-      color: var(--tab--active-color);
-      border-bottom-color: var(--tab--active-border-color);
-    }
+  &:hover,
+  &:focus, {
+    color: var(--tab--hover-color);
+    border-bottom-color: var(--tab--active-border-color);
+  }
 
-    // disables bold font resize on hover
-    &:after {
-      display: block;
-      content: attr(value);
-      font-family: 'Montserrat Semi', monospace;
-      height: 0;
-      overflow: hidden;
-      visibility: hidden;
-    }
+  &.wt-tab--highlight {
+    color: var(--tab--active-color);
+    border-bottom-color: var(--tab--active-border-color);
   }
 
-  // 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;
+  //// disables bold font resize on hover
+  &:after {
+    display: block;
+    visibility: hidden;
+    overflow: hidden;
+    height: 0;
+    content: attr(value);
+    font-weight: bold;
   }
+}
 
 </style>

package/src/components/molecules/wt-tags-input/__tests__/WtTagsInput.spec.js

@@ -0,0 +1,42 @@
+import { shallowMount } from '@vue/test-utils';
+import WtTagsInput from '../wt-tags-input.vue';
+import WtLabel from '../../wt-label/wt-label.vue';
+
+describe('WtTagsInput', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtTagsInput);
+    expect(wrapper.classes('wt-tags-input')).toBe(true);
+  });
+
+  it('renders label text when passed', () => {
+    const label = 'Hello there';
+    const wrapper = shallowMount(WtTagsInput, {
+      stubs: { WtLabel },
+      propsData: { label },
+    });
+    expect(wrapper.find('.wt-label').text()).toBe(label);
+  });
+
+  it('by default emits "input" event at native "tag" event', () => {
+    const tag = '123';
+    const wrapper = shallowMount(WtTagsInput, {
+      propsData: {
+        value: [],
+      },
+    });
+    wrapper.findComponent({ name: 'vue-multiselect' }).vm.$emit('tag', tag);
+    expect(wrapper.emitted().input[0][0]).toEqual([tag]);
+  });
+
+  it('in manual mode doesnt emit "input" event at native "tag" event', () => {
+    const tag = '123';
+    const wrapper = shallowMount(WtTagsInput, {
+      propsData: {
+        value: [],
+        manualTagging: true,
+      },
+    });
+    wrapper.findComponent({ name: 'vue-multiselect' }).vm.$emit('tag', tag);
+    expect(wrapper.emitted().input).toBeFalsy();
+  });
+});