@webitel/ui-sdk 0.1.13 → 0.1.100

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

@@ -0,0 +1,175 @@
+<!-- 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"
+    :class="{
+        'wt-slider--disabled': disabled,
+        'wt-slider--vertical': vertical,
+      }"
+    :style="{ height: verticalHeight }"
+  >
+    <div
+      class="wt-slider__wrapper"
+      :style="{ width: verticalHeight }"
+    >
+      <!-- The row above is needed in order to set correct component width when slider is vertical -->
+      <input
+        type="range"
+        class="wt-slider__slider"
+        :style="{ background: progressStyle }"
+        :min="min"
+        :max="max"
+        :step="step"
+        :value="value"
+        :disabled="disabled"
+        @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 {
+  width: var(--wt-slider-width)
+}
+
+.wt-slider__slider {
+  box-sizing: var(--wt-slider-box-sizing);
+  width: var(--wt-slider-width);
+  height: var(--wt-slider-height);
+  border: var(--wt-slider-border);
+  border-radius: var(--border-radius);
+  cursor: pointer;
+  -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-vertical-container-width);
+  transform: var(--wt-slider-vertical-container-translation);
+
+  .wt-slider__wrapper {
+    transform: var(--wt-slider-vertical-transform);
+    transform-origin: var(--wt-slider-vertical-transform-origin);
+
+    .wt-slider__slider {
+      margin: 0;
+    }
+  }
+}
+</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__wrapper').trigger('click');
+    expect(wrapper.emitted().change.pop()).toEqual([!value]);
+  });
+});

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

@@ -0,0 +1,177 @@
+<template>
+  <div
+    class="wt-switcher"
+    :class="{
+      '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"
+        type="checkbox"
+        :checked="value"
+        :disabled="disabled"
+        @change="inputHandler"
+      >
+      <span class="wt-switcher__checkmark"></span>
+      <!-- @slot Custom input label -->
+      <slot name="label" v-bind="{ label, value, disabled }">
+        <div v-if="label" class="wt-switcher__label">{{ label }}</div>
+      </slot>
+    </wt-label>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'wt-switcher',
+    props: {
+      value: {
+        type: Boolean,
+        default: false,
+      },
+      label: {
+        type: String,
+        default: '',
+      },
+      labelLeft: {
+        type: Boolean,
+        default: false,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      labelProps: {
+        type: Object,
+        description: 'Object with props, passed down to wt-label as props',
+      },
+    },
+    model: {
+      prop: 'value',
+      event: 'change',
+    },
+    methods: {
+      inputHandler() {
+        this.$emit('change', !this.value);
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .wt-switcher {
+    @include width-fit-content;
+    position: relative;
+    box-sizing: border-box;
+  }
+
+  .wt-switcher__wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    user-select: none;
+    cursor: pointer;
+
+    &.wt-switcher__wrapper--label-left {
+      flex-direction: row-reverse;
+    }
+  }
+
+  .wt-switcher__label {
+    margin-left: var(--switcher-icon-margin);
+    transition: var(--transition);
+
+    .wt-switcher__wrapper--label-left & {
+      margin-left: 0;
+      margin-right: var(--switcher-icon-margin);
+    }
+    .wt-switcher:hover & {
+      color: var(--form-label--hover-color);
+    }
+  }
+
+  .wt-switcher__input {
+    position: absolute;
+    width: 0;
+    height: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .wt-switcher__checkmark {
+    position: relative;
+    display: block;
+    width: var(--switcher-width);
+    height: var(--switcher-height);
+    border-radius: var(--switcher-border-radius);
+    transition: var(--transition);
+
+    &:before {
+      content: '';
+      position: absolute;
+      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--off {
+    .wt-switcher__checkmark {
+      background: var(--switcher-bg-color--off);
+    }
+
+    &:hover {
+      .wt-switcher__checkmark {
+        background: var(--switcher-bg-color--off--hover);
+      }
+    }
+
+    &.wt-switcher--disabled {
+      .wt-switcher__checkmark {
+        background: var(--switcher-bg-color--off--disabled);
+      }
+    }
+  }
+
+  .wt-switcher--on {
+    .wt-switcher__checkmark {
+      background: var(--switcher-bg-color--on);
+
+      /* Show the indicator (dot/circle) when checked */
+      &:before {
+        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);
+      }
+    }
+  }
+
+  .wt-switcher--disabled {
+    pointer-events: none;
+
+    .wt-switcher__label {
+      color: var(--form-label--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

@@ -0,0 +1,127 @@
+<template>
+  <nav class="wt-tabs">
+    <button
+      class="wt-tab"
+      :class="{
+        'wt-tab--highlight': tab.value === current.value
+      }"
+      v-for="(tab) in tabs"
+      :value="tab.text"
+      :key="tab.value"
+      type="button"
+      @click="open(tab)"
+    >
+      <slot :name="tab.value" v-bind="{ tab, current }">
+        {{tab.text}}
+      </slot>
+    </button>
+
+    <div class="wt-tabs__underline">
+      <div
+        class="wt-tab__underline--highlight"
+        :style="{
+          width: `${activeLineWidth}px`,
+          transform: `translateX(${activeLineOffset}px)`
+        }"
+      ></div>
+    </div>
+  </nav>
+</template>
+
+<script>
+  export default {
+    name: 'wt-tabs',
+    props: {
+      current: {
+        type: Object,
+        default: () => ({}),
+      },
+      tabs: {
+        type: Array,
+        default: () => [],
+      },
+    },
+
+    model: {
+      prop: 'current',
+      event: 'change',
+    },
+
+    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;
+      },
+    },
+  };
+</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);
+    outline: none;
+
+    &:hover,
+    &:focus, {
+      @extend %typo-strong-lg;
+      color: var(--tab--hover-color);
+    }
+
+    &.wt-tab--highlight {
+      @extend %typo-strong-lg;
+      color: var(--tab--active-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;
+    }
+  }
+
+  // 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;
+  }
+
+</style>

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

@@ -0,0 +1,45 @@
+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('emits "input" event at native "tags-changed" event', () => {
+    const tags = [{ text: '123' }];
+    const wrapper = shallowMount(WtTagsInput);
+    wrapper.findComponent({ name: 'vue-tags-input' }).vm.$emit('tags-changed', tags);
+    expect(wrapper.emitted().input[0][0]).toEqual(tags);
+  });
+
+  it('correctly computes autocomplete options', () => {
+    const autocompleteItems = [{ name: '123' }, { name: '321' }];
+    const autocompleteOptions = [{ name: '123', text: '123' }, { name: '321', text: '321' }];
+    const wrapper = shallowMount(WtTagsInput, {
+      propsData: { autocompleteItems },
+    });
+    expect(wrapper.vm.autocompleteOptions).toEqual(autocompleteOptions);
+  });
+
+  it('correctly filters autocomplete options with search', () => {
+    const autocompleteItems = [{ name: '123' }, { name: '456' }];
+    const filteredAutocompleteOptions = [{ name: '123', text: '123' }];
+    const wrapper = shallowMount(WtTagsInput, {
+      data: () => ({ input: '1' }),
+      propsData: { autocompleteItems },
+    });
+    expect(wrapper.vm.autocompleteOptions).toEqual(filteredAutocompleteOptions);
+  });
+});