@webitel/ui-sdk 0.1.1 → 0.1.2-vite

package/src/components/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/wt-popup/_variables.scss

@@ -0,0 +1,20 @@
+
+:root {
+  --popup-wrapper-z-index: 11;
+
+  --popup-shadow-opacity: 0.8;
+  --popup-shadow-color: hsla(var(--_contrast-color), var(--popup-shadow-opacity));
+
+  --popup-max-height: 90%;
+
+  --popup-bg-color: var(--main-color);
+  --popup-sections-gap: var(--spacing-sm);
+  --popup-padding: var(--popup-sections-gap);
+
+  --popup-header-padding: var(--spacing-xs);
+  --popup-header-bg-color: var(--secondary-color);
+
+  --popup-main-section-padding-right: var(--spacing-xs); // scroll offset
+
+  --popup-actions-padding: var(--spacing-xs);
+}

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

@@ -0,0 +1,138 @@
+<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">
+@import './variables.scss';
+</style>
+
+<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/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, { props: { value: 2, max: 1 } });
+    expect(wrapper.vm.isOverflow).toBe(true);
+  });
+  it('isOverflow correctly computes overflow=false', () => {
+    const wrapper = shallowMount(WtProgressBar, { props: { value: 0.99, max: 1 } });
+    expect(wrapper.vm.isOverflow).toBe(false);
+  });
+});

package/src/components/wt-progress-bar/_variables.scss

@@ -0,0 +1,11 @@
+
+:root {
+  --progress-bar-height: 12px;
+  --progress-bar-padding: var(--spacing-3xs);
+  --progress-bar-border-radius: var(--progress-bar-padding);
+
+  --progress-bar-bg-color--primary: var(--primary-color);
+  --progress-bar-bg-color--secondary: var(--secondary-color);
+  --progress-bar-bg-color--success: var(--true-color);
+  --progress-bar-bg-color--danger: var(--false-color);
+}

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

@@ -0,0 +1,89 @@
+<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">
+@import './variables.scss';
+</style>
+
+<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(--primary-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/wt-radio/__tests__/WtRadio.spec.js

@@ -0,0 +1,42 @@
+import { mount, shallowMount } from '@vue/test-utils';
+import WtRadio from '../wt-radio.vue';
+import WtLabel from '../../wt-label/wt-label.vue';
+import WtIcon from '../../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 = mount(WtRadio, {
+      stubs: {
+        WtLabel,
+        WtIcon,
+      },
+      props: { label },
+    });
+    expect(wrapper.find('.wt-radio__label').text()).toBe(label);
+  });
+
+  it('toggles passed value at click', () => {
+    const selected = '';
+    const value = 'jest';
+    const wrapper = mount(WtRadio, {
+      stubs: {
+        WtLabel,
+        WtIcon,
+      },
+      props: { selected, value },
+    });
+    wrapper.find('.wt-radio__input').trigger('input');
+    expect(wrapper.emitted().input[0]).toEqual([value]);
+  });
+});

package/src/{css/components/molecules → components}/wt-radio/_variables.scss

@@ -1,7 +1,7 @@
-
-:root {
-  --radio-icon-margin: 10px;
-  --radio-checkmark-size: 18px;
-  --radio-bullet-size: 8px;
-  --radio-border: 2px solid;
+
+:root {
+  --radio-icon-margin: var(--spacing-xs);
+  --radio-checkmark-size: 18px;
+  --radio-bullet-size: 8px;
+  --radio-border: 2px solid;
 }

package/src/components/wt-radio/wt-radio.vue

@@ -0,0 +1,180 @@
+<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 class="wt-radio__icon" :icon="radioIcon"></wt-icon>
+      <!-- @slot Custom input label -->
+      <slot
+        v-bind="{ label, isChecked, disabled }"
+        name="label"
+      >
+        <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, Object],
+      default: '',
+    },
+    // currently selected value
+    selected: {
+      type: [String, Number, Boolean, Object],
+      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>
+
+@import './variables.scss';
+
+/* 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__icon {
+  flex: 0 0 var(--icon-md-size);
+}
+
+.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/wt-rounded-action/Readme.md

@@ -0,0 +1,68 @@
+### Different colors
+
+```vue
+<div class="example-wrapper" style="display: flex; gap: var(--spacing-xs);">
+<wt-rounded-action icon="call" color="primary"></wt-rounded-action>
+<wt-rounded-action icon="call" color="secondary"></wt-rounded-action>
+<wt-rounded-action icon="call" disabled></wt-rounded-action>
+<wt-rounded-action icon="call" color="success"></wt-rounded-action>
+<wt-rounded-action icon="call" color="error"></wt-rounded-action>
+<wt-rounded-action icon="call" color="transfer"></wt-rounded-action>
+</div>
+```
+
+### Active (pressed) buttons
+```vue
+<div class="example-wrapper" style="display: flex; gap: var(--spacing-xs);">
+<wt-rounded-action active icon="call" color="primary"></wt-rounded-action>
+<wt-rounded-action active icon="call" color="secondary"></wt-rounded-action>
+<wt-rounded-action active icon="call" disabled></wt-rounded-action>
+<wt-rounded-action active icon="call" color="success"></wt-rounded-action>
+<wt-rounded-action active icon="call" color="error"></wt-rounded-action>
+<wt-rounded-action active icon="call" color="transfer"></wt-rounded-action>
+</div>
+```
+
+### Wide buttons
+```vue
+<div class="example-wrapper" style="display: flex; gap: var(--spacing-xs);">
+<wt-rounded-action wide icon="call" color="secondary"></wt-rounded-action>
+<wt-rounded-action wide rounded icon="call" color="secondary"></wt-rounded-action>
+</div>
+```
+
+### Rounded buttons
+```vue
+<div class="example-wrapper" style="display: flex; gap: var(--spacing-xs);">
+<wt-rounded-action rounded icon="call" color="primary"></wt-rounded-action>
+<wt-rounded-action rounded icon="call" color="secondary"></wt-rounded-action>
+<wt-rounded-action rounded icon="call" disabled></wt-rounded-action>
+<wt-rounded-action rounded icon="call" color="success"></wt-rounded-action>
+<wt-rounded-action rounded icon="call" color="error"></wt-rounded-action>
+<wt-rounded-action rounded icon="call" color="transfer"></wt-rounded-action>
+</div>
+```
+
+### Small (sm) buttons
+```vue
+<div class="example-wrapper" style="display: flex; gap: var(--spacing-xs);">
+<wt-rounded-action size="sm" icon="call" color="primary"></wt-rounded-action>
+<wt-rounded-action size="sm" icon="call" color="secondary"></wt-rounded-action>
+<wt-rounded-action size="sm" icon="call" disabled></wt-rounded-action>
+<wt-rounded-action size="sm" icon="call" color="success"></wt-rounded-action>
+<wt-rounded-action size="sm" icon="call" color="error"></wt-rounded-action>
+<wt-rounded-action size="sm" icon="call" color="transfer"></wt-rounded-action>
+</div>
+```
+
+### Loading-state buttons
+```vue
+<div class="example-wrapper" style="display: flex; gap: var(--spacing-xs);">
+<wt-rounded-action size="sm" icon="call" color="primary" loading></wt-rounded-action>
+<wt-rounded-action size="sm" icon="call" color="secondary" loading></wt-rounded-action>
+<wt-rounded-action size="sm" icon="call" disabled loading></wt-rounded-action>
+<wt-rounded-action size="sm" icon="call" color="success" loading></wt-rounded-action>
+<wt-rounded-action size="sm" icon="call" color="error" loading></wt-rounded-action>
+<wt-rounded-action size="sm" icon="call" color="transfer" loading></wt-rounded-action>
+</div>
+```

package/src/components/wt-rounded-action/__tests__/WtRoundedAction.spec.js

@@ -0,0 +1,9 @@
+import { shallowMount } from '@vue/test-utils';
+import WtRoundedAction from '../wt-rounded-action.vue';
+
+describe('WtRoundedAction', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtRoundedAction, { props: { icon: 'call' } });
+    expect(wrapper.classes('wt-rounded-action')).toBe(true);
+  });
+});

package/src/components/wt-rounded-action/_variables.scss

@@ -0,0 +1,14 @@
+:root {
+  --rounded-action-border-size: 2px;
+  --rounded-action-padding: calc(var(--spacing-xs) - var(--rounded-action-border-size));
+
+  --rounded-action-rounded-border-radius: var(--border-radius--pill);
+
+  --rounded-action-bg-color: var(--dp-20-surface-color);
+  --rounded-action-bg-hover-color: var(--dp-22-surface-color);
+
+  --rounded-action-active-color: var(--dp-10-surface-color);
+}
+
+:root.theme--dark {
+}