@webitel/ui-sdk 0.1.13 → 0.1.100

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

@@ -0,0 +1,342 @@
+<template>
+  <div
+    class="wt-input"
+    :class="{
+      'wt-input--outline': outline,
+      'wt-input--disabled': disabled,
+      'wt-input--invalid': invalid,
+    }"
+  >
+    <wt-label
+      v-if="hasLabel"
+      :for="name"
+      :outline="outline"
+      :disabled="disabled"
+      :invalid="invalid"
+      v-bind="labelProps"
+    >
+      <!-- @slot Custom input label -->
+      <slot name="label" v-bind="{ label }">{{ requiredLabel }}</slot>
+    </wt-label>
+    <div class="wt-input__wrapper">
+      <input
+        :id="name"
+        class="wt-input__input"
+        :class="{
+          'wt-input--is-password': isPassword,
+        }"
+        ref="wt-input"
+        :value="value"
+        :type="inputType"
+        :placeholder="placeholder || label"
+        :disabled="disabled"
+        :min="numberMin"
+        :max="numberMax"
+        v-on="listeners"
+      >
+      <div
+        class="wt-input__after-wrapper"
+        ref="after-wrapper"
+      >
+        <slot
+          name="after-input"
+        ></slot>
+        <slot
+          v-if="isPassword"
+          name="show-password"
+          v-bind="{
+          isPasswordVisible,
+          switchVisibilityPassword,
+        }"
+        >
+          <wt-icon-btn
+            class="wt-input__password-button"
+            :icon="showPasswordIcon"
+            @click.native="switchVisibilityPassword"
+          ></wt-icon-btn>
+        </slot>
+      </div>
+    </div>
+    <wt-input-info
+      v-if="isValidation"
+      :invalid="invalid"
+    >{{ validationText }}
+    </wt-input-info>
+  </div>
+</template>
+
+<script>
+import validationMixin from '../../../mixins/validationMixin/validationMixin';
+
+export default {
+    name: 'wt-input',
+    mixins: [validationMixin],
+    props: {
+      /**
+       * Current input value (`v-model`)
+       */
+      value: {
+        type: [String, Number],
+        default: '',
+      },
+      /**
+       * Form input label
+       */
+      label: {
+        type: String,
+        default: '',
+      },
+      /**
+       * Form input placeholder
+       */
+      placeholder: {
+        type: String,
+      },
+      /**
+       * Form input name
+       */
+      name: {
+        type: String,
+        default: '',
+      },
+      /**
+       * Form input type
+       */
+      type: {
+        type: String,
+        default: 'text',
+      },
+      /**
+       * Native input required attribute
+       */
+      required: {
+        type: Boolean,
+        default: false,
+        description: 'Native input required attribute',
+      },
+      /**
+       * Native input disabled attribute
+       */
+      disabled: {
+        type: Boolean,
+        default: false,
+        description: 'Native input disabled attribute',
+      },
+      /**
+       * Status of show password icon display
+       */
+      hasShowPassword: {
+        type: Boolean,
+        default: false,
+      },
+
+      /**
+       * Native number input restrictions
+       */
+      numberMin: {
+        type: Number,
+        default: 0,
+      },
+
+      /**
+       * Native number input restrictions
+       */
+      numberMax: {
+        type: Number,
+      },
+
+      outline: {
+        type: Boolean,
+        default: false,
+      },
+
+      labelProps: {
+        type: Object,
+        description: 'Object with props, passed down to wt-label as props',
+      },
+    },
+
+    data: () => ({
+      inputType: '',
+      isPasswordVisible: false,
+    }),
+
+    watch: {
+      type: {
+        immediate: true,
+        handler(type) {
+          let inputType = type;
+          // Safari has bug for number input
+          if (typeof window !== 'undefined' || typeof document !== 'undefined') {
+            const ua = navigator.userAgent.toLocaleLowerCase();
+            if (
+              ua.indexOf('safari') !== -1
+              && ua.indexOf('chrome') === -1
+              && type === 'number'
+            ) {
+              this.isNumberTypeSafari = true;
+              inputType = 'text';
+            }
+          }
+          this.inputType = inputType;
+        },
+      },
+    },
+
+    computed: {
+      hasLabel() {
+        return !!(this.label || this.$slots.label);
+      },
+
+      requiredLabel() {
+        return this.required ? `${this.label}*` : this.label;
+      },
+
+      isPassword() {
+        return this.type === 'password' && this.hasShowPassword;
+      },
+
+      showPasswordIcon() {
+        return this.isPasswordVisible ? 'eye--closed' : 'eye--opened';
+      },
+
+      listeners() {
+        return {
+          ...this.$listeners,
+          input: this.inputHandler,
+        };
+      },
+    },
+    methods: {
+      inputHandler(event) {
+        this.$emit('input', event.target.value.trim());
+      },
+
+      switchVisibilityPassword() {
+        this.isPasswordVisible = !this.isPasswordVisible;
+        this.inputType = this.isPasswordVisible ? 'text' : 'password';
+      },
+
+      updateInputPaddings() {
+        // cant test this thing cause vue test utils doesnt render elements width :/
+        const afterWrapperWidth = this.$refs['after-wrapper'].offsetWidth;
+        const inputEl = this.$refs['wt-input'];
+        const defaultInputPadding = parseInt(getComputedStyle(document.documentElement)
+          .getPropertyValue('--input-padding'), 10);
+        inputEl.style.paddingRight = `${defaultInputPadding + afterWrapperWidth + defaultInputPadding}px`;
+      },
+    },
+    mounted() {
+      this.updateInputPaddings();
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+  .wt-input {
+    cursor: text;
+
+    &--disabled {
+      pointer-events: none;
+    }
+  }
+
+  .wt-input__wrapper {
+    position: relative;
+  }
+
+  .wt-label {
+    margin-bottom: var(--label-margin);
+    cursor: text;
+
+    .wt-input:hover &,
+    .wt-input:focus-within & {
+      color: var(--form-label--hover-color);
+    }
+
+    .wt-input--invalid:hover &,
+    .wt-input--invalid:focus-within & {
+      color: var(--label--invalid-color);
+    }
+  }
+
+  .wt-input__input {
+    @extend %typo-body-lg;
+
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+    padding: var(--input-padding);
+    color: var(--form-input-color);
+    border: var(--input-border);
+    border-color: var(--form-border-color);
+    border-radius: var(--border-radius);
+    transition: var(--transition);
+
+    &::placeholder {
+      color: var(--form-placeholder-color);
+    }
+
+    .wt-input:hover &,
+    &:focus {
+      border-color: var(--form-border--hover-color);
+
+      &::placeholder {
+        color: var(--form-placeholder--hover-color)
+      }
+    }
+
+    .wt-input--outline & {
+      border-color: var(--form-outline-border-color);
+
+      &::placeholder {
+        color: var(--form-outline-placeholder-color);
+      }
+    }
+
+    .wt-input--outline:hover &,
+    .wt-input--outline &:focus {
+      border-color: var(--form-outline-border--hover-color);
+
+      &::placeholder {
+        color: var(--form-outline-placeholder--hover-color)
+      }
+    }
+
+    .wt-input--invalid &,
+    .wt-input--invalid:hover & {
+      border-color: var(--false-color);
+      outline: none; // prevent outline overlapping false color
+    }
+
+    .wt-input--disabled & {
+      background: var(--form-border--disabled-color);
+      border-color: var(--form-border--disabled-color);
+
+      &::placeholder {
+        color: var(--form-placeholder--disabled-color);
+      }
+    }
+  }
+
+  .wt-input__after-wrapper {
+    display: flex;
+    gap: var(--input-after-wrapper-gap);
+    align-items: center;
+    position: absolute;
+    top: 50%;
+    right: var(--input-icon-margin);
+    transform: translateY(-50%);
+
+    .wt-input__password-button {
+      .wt-input--disabled & ::v-deep .wt-icon__icon {
+        fill: var(--icon-color-disabled);
+      }
+
+      .wt-input:hover & ::v-deep .wt-icon__icon,
+      .wt-input:focus-within & ::v-deep .wt-icon__icon {
+        fill: var(--icon-color--hover);
+      }
+    }
+  }
+</style>

package/src/components/molecules/wt-label/__tests__/WtLabel.spec.js

@@ -0,0 +1,9 @@
+import { shallowMount } from '@vue/test-utils';
+import WtLabel from '../wt-label.vue';
+
+describe('WtLabel', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtLabel);
+    expect(wrapper.classes('wt-label')).toBe(true);
+  });
+});

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

@@ -0,0 +1,87 @@
+<template>
+  <label
+    class="wt-label"
+    :class="{
+      'wt-label--outline': outline,
+      'wt-label--invalid': invalid,
+      'wt-label--disabled': disabled,
+    }"
+    :for="this.for"
+  >
+    <slot></slot>
+    <wt-icon-btn
+      v-if="hint"
+      class="wt-label__hint"
+      icon="rounded-info"
+      color="outline"
+      :tooltip="hint"
+      :tooltip-position="hintPosition"
+    ></wt-icon-btn>
+  </label>
+</template>
+
+<script>
+export default {
+  name: 'wt-label',
+  props: {
+    for: {
+      type: String,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    outline: {
+      type: Boolean,
+      default: false,
+    },
+    invalid: {
+      type: Boolean,
+      default: false,
+    },
+    hint: {
+      type: String,
+      description: 'Adds hint icon + tooltip with text, passed as "hint" prop',
+    },
+    hintPosition: {
+      type: String,
+      description: 'See wt-icon-btn tooltip-position prop',
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wt-label {
+  @extend %typo-body-lg;
+
+  display: flex;
+  align-items: center;
+  color: var(--form-label-color);
+  transition: var(--transition);
+
+  &--outline {
+    color: var(--form-outline-label-color);
+  }
+
+  &--invalid {
+    color: var(--label--invalid-color);
+  }
+
+  &--disabled {
+    color: var(--form-label--disabled-color);
+  }
+}
+
+.wt-label__hint {
+  margin-left: var(--component-spacing);
+  ::v-deep {
+    .wt-tooltip {
+      width: max-content; // experimental css property
+      width: -moz-max-content; // experimental css property
+      min-width: 120px;
+      max-width: 280px;
+    }
+  }
+}
+</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

@@ -0,0 +1,74 @@
+<template>
+  <article
+    class="wt-notification"
+    @click="$emit('close')"
+  >
+    <wt-icon
+      class="wt-notification__icon"
+      :icon="notificationIcon"
+      :color="notificationIconColor"
+    ></wt-icon>
+
+    <p class="wt-notification__text">
+      <slot></slot>
+    </p>
+  </article>
+</template>
+
+<script>
+
+  export default {
+    name: 'wt-notification',
+    props: {
+      type: {
+        type: String,
+        default: 'info',
+      },
+    },
+    computed: {
+      notificationIcon() {
+        switch (this.type) {
+          case 'info': return 'done';
+          case 'error': return 'attention';
+          default: return '';
+        }
+      },
+      notificationIconColor() {
+        switch (this.type) {
+          case 'info': return 'success';
+          case 'error': return 'danger';
+          default: return '';
+        }
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .wt-notification {
+    @extend %typo-body-lg;
+    @include width-fit-content;
+
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    min-width: var(--notification-min-width);
+    max-width: var(--notification-max-width);
+    padding: var(--notification-padding);
+    color: var(--notification-text-color);
+    background: var(--notification-bg-color);
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow);
+    cursor: pointer;
+  }
+
+  .wt-notification__icon {
+    margin-right: var(--notification-icon-margin);
+  }
+
+  .wt-notification__text {
+    flex-grow: 1;
+    align-self: center;
+    margin: 0;
+  }
+</style>

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__header__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

@@ -0,0 +1,130 @@
+<template>
+  <div class="wt-popup">
+    <div class="wt-popup__shadow"></div>
+    <aside
+      class="wt-popup__popup"
+      :class="{'wt-popup__popup--overflow': overflow}"
+      :style="popupStyle"
+    >
+      <header class="wt-popup__header">
+        <slot name="header">
+          <h3 class="wt-popup__header__title">
+            <slot name="title"></slot>
+          </h3>
+        </slot>
+        <wt-icon-btn
+          class="wt-popup__close-btn"
+          icon="close--filled"
+          size="sm"
+          color="active"
+          @click.native="$emit('close')"
+        ></wt-icon-btn>
+      </header>
+      <section class="wt-popup__main" v-if="$slots.main">
+        <slot name="main"></slot>
+      </section>
+      <footer class="wt-popup__actions" v-if="$slots.actions">
+        <slot name="actions"></slot>
+      </footer>
+    </aside>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'wt-popup',
+  props: {
+    minWidth: {
+      type: [Number, String],
+    },
+    overflow: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    popupStyle() {
+      return this.minWidth ? `min-width: ${this.minWidth}px;` : '';
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wt-popup {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: var(--popup-wrapper-z-index);
+
+  &__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 {
+  @extend %wt-scrollbar;
+
+  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;
+
+  &--overflow {
+    overflow: visible;
+  }
+}
+
+.wt-popup__header {
+  position: relative;
+  padding: var(--popup-header-padding);
+
+  .wt-popup__header__title {
+    @extend %typo-strong-lg;
+    text-align: center;
+    padding: var(--popup-header-title-padding);
+  }
+
+  .wt-popup__close-btn {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+}
+
+.wt-popup__main {
+  @extend %typo-body-lg;
+  padding: var(--popup-main-padding);
+}
+
+.wt-popup__actions {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--popup-actions-padding);
+
+  .wt-button {
+    margin-left: 20px;
+
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+}
+</style>