@webitel/ui-sdk 0.1.6 → 0.1.7-vue3

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

@@ -0,0 +1,133 @@
+<template>
+  <div
+    :class="{ 'wt-popup--overflow': overflow }"
+    class="wt-popup"
+  >
+    <aside
+      :style="popupStyle"
+      class="wt-popup__popup"
+    >
+      <header class="wt-popup__header">
+        <slot name="header">
+          <h3 class="wt-popup__title">
+            <slot name="title"></slot>
+          </h3>
+        </slot>
+        <wt-icon-btn
+          class="wt-popup__close-btn"
+          icon="close"
+          @click="$emit('close')"
+        ></wt-icon-btn>
+      </header>
+      <section v-if="$slots.main" class="wt-popup__main">
+        <slot name="main"></slot>
+      </section>
+      <footer v-if="$slots.actions" class="wt-popup__actions">
+        <slot name="actions"></slot>
+      </footer>
+    </aside>
+  </div>
+</template>
+
+<script>
+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;
+  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);
+}
+
+.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__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);
+
+  .wt-popup__title {
+    flex-grow: 1;
+    font: inherit;
+  }
+
+  .wt-popup__close-btn {
+    flex: 0 0 var(--icon-md-size);
+  }
+}
+
+.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__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

@@ -0,0 +1,170 @@
+<template>
+  <div
+    class="wt-radio"
+    :class="{
+      'wt-radio--active': isChecked,
+      'wt-radio--outline': outline,
+      'wt-radio--disabled': disabled,
+    }"
+  >
+    <wt-label class="wt-radio__wrapper">
+      <input
+        class="wt-radio__input"
+        type="radio"
+        :value="value"
+        :checked="isChecked"
+        :disabled="disabled"
+        @input="inputHandler"
+      >
+      <wt-icon :icon="radioIcon"></wt-icon>
+      <!-- @slot Custom input label -->
+      <slot name="label" v-bind="{ label, isChecked, disabled }">
+        <div v-if="label" class="wt-radio__label">{{ label }}</div>
+      </slot>
+    </wt-label>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'wt-radio',
+    props: {
+      // value, set by radio
+      value: {
+        type: [String, Number, Boolean],
+        default: '',
+      },
+      // currently selected value
+      selected: {
+        type: [String, Number, Boolean],
+        default: '',
+      },
+      label: {
+        type: String,
+        default: '',
+      },
+      required: {
+        type: Boolean,
+        default: false,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      outline: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    model: {
+      prop: 'selected',
+      event: 'input',
+    },
+    computed: {
+      isChecked() {
+        return this.value === this.selected;
+      },
+      radioIcon() {
+        return this.isChecked ? 'radio--checked' : 'radio';
+      },
+    },
+    methods: {
+      inputHandler() {
+        this.$emit('input', this.value);
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  /* Customize the label (the container) */
+  .wt-radio {
+    @include width-fit-content;
+    box-sizing: border-box;
+
+    .wt-label {
+      cursor: pointer;
+    }
+  }
+
+  .wt-radio__wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    user-select: none;
+    cursor: pointer;
+  }
+
+  .wt-radio__label {
+    margin-left: var(--radio-icon-margin);
+    transition: var(--transition);
+  }
+
+  /* Hide the browser's default radio button */
+  .wt-radio__input {
+    position: absolute;
+    width: 0;
+    height: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .wt-radio:hover {
+    .wt-radio__label {
+      color: var(--form-label--hover-color);
+    }
+
+    ::v-deep .wt-icon__icon {
+      fill: var(--icon-color--hover);
+    }
+  }
+
+  .wt-radio--active {
+    .wt-radio__label {
+      color: var(--form-label--active-color);
+    }
+
+    ::v-deep .wt-icon__icon {
+      fill: var(--icon-color-active);
+    }
+  }
+
+  .wt-radio--outline {
+    .wt-radio__label {
+      color: var(--form-outline-label-color);
+    }
+
+    ::v-deep .wt-icon__icon {
+      fill: var(--icon-outline-color);
+    }
+
+    &.wt-radio--active {
+      .wt-radio__label {
+        color: var(--form-label--active-color);
+      }
+
+      ::v-deep .wt-icon__icon {
+        fill: var(--icon-outline--active-color);
+      }
+    }
+
+    &:hover {
+
+      ::v-deep .wt-icon__icon {
+        fill: var(--icon-outline--hover-color);
+      }
+    }
+  }
+
+  .wt-radio--disabled {
+    pointer-events: none;
+
+    .wt-radio__label {
+      color: var(--form-label--disabled-color);
+    }
+
+    ::v-deep .wt-icon__icon {
+      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);
+  });
+});

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

@@ -0,0 +1,194 @@
+<template>
+  <div
+    :class="{
+      'wt-search-bar--outline': outline,
+    }"
+    class="wt-search-bar"
+  >
+    <div class="wt-search-bar__wrapper">
+      <input
+        :placeholder="searchBarPlaceholder"
+        :value="value"
+        class="wt-search-bar__input"
+        type="search"
+        v-on="listeners"
+      >
+      <div class="wt-search-bar__search-icon">
+        <slot name="search-icon">
+          <wt-icon
+            icon="search"
+          ></wt-icon>
+        </slot>
+      </div>
+      <wt-icon-btn
+        :class="{ 'hidden': !value }"
+        class="wt-search-bar__reset-icon-btn"
+        icon="close"
+        @click="$emit('input', '')"
+      ></wt-icon-btn>
+    </div>
+  </div>
+</template>
+
+<script>
+import debounce from '../../../scripts/debounce';
+
+export default {
+  name: 'wt-search-bar',
+  props: {
+    /**
+     * Current search-bar value (`v-model`)
+     */
+    value: {
+      type: String,
+      default: '',
+    },
+    /**
+     * search-bar placeholder
+     */
+    placeholder: {
+      type: String,
+    },
+    debounce: {
+      type: Boolean,
+      default: false,
+    },
+    debounceDelay: {
+      type: Number,
+      default: 1000,
+    },
+    outline: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  watch: {
+    value() {
+      this.search.call(this);
+    },
+  },
+
+  created() {
+    if (this.debounce) {
+      this.search = debounce(this.search, this.debounceDelay);
+    }
+  },
+
+  computed: {
+    listeners() {
+      return {
+        ...this.$listeners,
+        input: (event) => this.$emit('input', event.target.value),
+        keyup: this.handleKeyup,
+      };
+    },
+    searchBarPlaceholder() {
+      return this.placeholder || this.$t('webitelUI.searchBar.placeholder');
+    },
+  },
+
+  methods: {
+    search() {
+      this.$emit('search', this.value);
+    },
+    handleKeyup(event) {
+      if (event.key === 'Enter') {
+        this.$emit('enter');
+        event.preventDefault();
+      } else if (event.key === 'Esc') {
+        this.$emit('input', '');
+        event.preventDefault();
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wt-search-bar {
+  cursor: text;
+
+
+  .wt-search-bar__wrapper {
+    position: relative;
+  }
+
+  .wt-search-bar__search-icon {
+    position: absolute;
+    top: 50%;
+    left: var(--input-icon-margin);
+    transform: translateY(-50%);
+    line-height: 0;
+    pointer-events: none;
+  }
+
+  .wt-search-bar__reset-icon-btn {
+    position: absolute;
+    top: 50%;
+    right: var(--input-icon-margin);
+    transform: translateY(-50%);
+
+    .wt-search-bar:not(:focus-within) & {
+      pointer-events: none;
+      opacity: 0;
+    }
+  }
+
+  .wt-search-bar__input {
+    @extend %typo-body-1;
+    @include wt-placeholder;
+
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+    padding: var(--search-bar-padding);
+    transition: var(--transition);
+    color: var(--form-input-color);
+    border: var(--input-border);
+    border-color: var(--form-border-color);
+    border-radius: var(--border-radius);
+
+    &:focus {
+      @include wt-placeholder('focus');
+      border-color: var(--form-border--hover-color);
+    }
+
+    .wt-search-bar--outline & {
+      border-color: var(--form-outline-border-color);
+    }
+
+    .wt-search-bar--outline:hover &,
+    .wt-search-bar--outline &:focus {
+      border-color: var(--form-outline-border--hover-color);
+    }
+  }
+
+  /* make icons black */
+  .wt-search-bar:hover ::v-deep .wt-icon__icon,
+  .wt-search-bar:focus-within ::v-deep .wt-icon__icon {
+    fill: var(--icon-color--hover);
+  }
+
+  /* clears the 'X' from Internet Explorer */
+  .wt-search-bar__input::-ms-clear {
+    display: none;
+    width: 0;
+    height: 0;
+  }
+
+  .wt-search-bar__input::-ms-reveal {
+    display: none;
+    width: 0;
+    height: 0;
+  }
+
+  /* clears the 'X' from Chrome */
+  .wt-search-bar__input::-webkit-search-decoration,
+  .wt-search-bar__input::-webkit-search-cancel-button,
+  .wt-search-bar__input::-webkit-search-results-button,
+  .wt-search-bar__input::-webkit-search-results-decoration {
+    display: none;
+  }
+}
+</style>

package/src/components/molecules/wt-select/__tests__/WtSelect.spec.js

@@ -0,0 +1,27 @@
+import { shallowMount } from '@vue/test-utils';
+import WtSelect from '../wt-select.vue';
+import WtLabel from '../../wt-label/wt-label.vue';
+
+describe('WtSelect', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtSelect, {
+      stubs: {
+        WtLabel,
+        WtIcon: true,
+      },
+    });
+    expect(wrapper.classes('wt-select')).toBe(true);
+  });
+
+  it('renders label text when passed', () => {
+    const label = 'Hello there';
+    const wrapper = shallowMount(WtSelect, {
+      stubs: {
+        WtLabel,
+        WtIcon: true,
+      },
+      propsData: { label },
+    });
+    expect(wrapper.find('.wt-label').text()).toBe(label);
+  });
+});