@webitel/ui-sdk 0.1.3-vue3 → 0.1.4-vite

package/src/components/{organisms/wt-notifications-bar → wt-notifications-bar}/__tests__/WtNotificationsBar.spec.js

@@ -1,19 +1,19 @@
 import { shallowMount } from '@vue/test-utils';
 import WtNotificationsBar from '../wt-notifications-bar.vue';
-import WtNotification from '../../../molecules/wt-notification/wt-notification.vue';
-import eventBus from '../../../../scripts/eventBus';
+import WtNotification from '../../wt-notification/wt-notification.vue';
+import eventBus from '../../../scripts/eventBus';
 
 describe('WtNotificationsBar', () => {
   it('renders a component', () => {
     const wrapper = shallowMount(WtNotificationsBar, {
-      mocks: { $eventBus: eventBus },
+      global: { provide: { $eventBus: eventBus } },
     });
     expect(wrapper.classes('wt-notifications-bar')).toBe(true);
   });
 
   it('shows notification at event bus event', async () => {
     const wrapper = shallowMount(WtNotificationsBar, {
-      mocks: { $eventBus: eventBus },
+      global: { provide: { $eventBus: eventBus } },
     });
     wrapper.vm.$eventBus.$emit('notification', {
       type: 'error', text: 'error',
@@ -24,7 +24,7 @@ describe('WtNotificationsBar', () => {
 
   it('closes notification manually', async () => {
     const wrapper = shallowMount(WtNotificationsBar, {
-      mocks: { $eventBus: eventBus },
+      global: { provide: { $eventBus: eventBus } },
     });
     wrapper.vm.$eventBus.$emit('notification', {
       type: 'error', text: 'error',
@@ -37,7 +37,7 @@ describe('WtNotificationsBar', () => {
 
   it('closes notification automatically', async () => {
     const wrapper = shallowMount(WtNotificationsBar, {
-      mocks: { $eventBus: eventBus },
+      global: { provide: { $eventBus: eventBus } },
       data: () => ({ notificationDuration: 100 }),
     });
     wrapper.vm.$eventBus.$emit('notification', {

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

@@ -0,0 +1,78 @@
+<template>
+  <aside class="wt-notifications-bar">
+    <transition-group name="wt-notifications-transition" tag="div">
+      <wt-notification
+        v-for="(notification, key) of notifications"
+        :type="notification.type"
+        :key="key+notification.text"
+        @close="closeNotification(notification)"
+      >{{ notification.text }}
+      </wt-notification>
+    </transition-group>
+  </aside>
+</template>
+
+<script>
+export default {
+  name: 'wt-notifications-bar',
+  inject: ['$eventBus'],
+  data: () => ({
+    notificationDuration: 4000,
+    notifications: [],
+  }),
+  created() {
+    try {
+      this.$eventBus.$on('notification', this.showNotification);
+    } catch (err) {
+      console.error('wt-notifications-bar cannot work without globally registered eventBus', err);
+    }
+  },
+  destroyed() {
+    this.$eventBus.$off('notification', this.showNotification);
+  },
+  methods: {
+    showNotification(notification) {
+      this.notifications.unshift(notification);
+      setTimeout(() => this.closeNotification(notification), this.notificationDuration);
+    },
+    closeNotification(notification) {
+      const index = this.notifications.indexOf(notification);
+      this.notifications.splice(index, 1);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import './variables.scss';
+</style>
+
+<style lang="scss" scoped>
+
+.wt-notifications-bar {
+  @extend %wt-scrollbar;
+
+  position: fixed;
+  top: var(--notifications-bar-corner-margin);
+  right: var(--notifications-bar-corner-margin);
+  max-height: var(--notifications-bar-max-height);
+  overflow-y: auto;
+  overflow-x: hidden;
+  z-index: var(--notifications-bar-z-index);
+
+  .wt-notification {
+    margin: var(--notifications-bar-notifications-margin);
+  }
+}
+
+.wt-notifications-transition-enter-active,
+.wt-notifications-transition-leave-active {
+  transition: all var(--transition);
+}
+
+.wt-notifications-transition-enter,
+.wt-notifications-transition-leave-to {
+  opacity: 0;
+  transform: translateX(60px);
+}
+</style>

package/src/components/wt-page-header/__tests__/wt-page-header.spec.js

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

package/src/components/wt-page-header/wt-page-header.vue

@@ -0,0 +1,83 @@
+<template>
+  <wt-headline>
+    <template v-slot:title-wrapper>
+      <slot>
+      </slot>
+    </template>
+    <template v-slot:title>
+      <slot name="title"></slot>
+    </template>
+    <template v-slot:actions>
+      <slot name="actions"></slot>
+      <slot
+        name="primary-action"
+        v-if="!hidePrimary"
+      >
+        <wt-button
+          :disabled="primaryDisabled"
+          @click="primaryAction"
+        >
+          {{ primaryText || $t('reusable.add') }}
+        </wt-button>
+      </slot>
+      <wt-button
+        v-if="!hideSecondary && !emptySecondary"
+        color="secondary"
+        :disabled="secondaryDisabled"
+        @click="secondaryAction"
+      >
+        {{ secondaryText || $t('reusable.close') }}
+      </wt-button>
+    </template>
+  </wt-headline>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  hidePrimary: {
+    type: Boolean,
+    default: false,
+  },
+  hideSecondary: {
+    type: Boolean,
+    default: false,
+  },
+  primaryText: {
+    type: String,
+  },
+  primaryAction: {
+    type: Function,
+  },
+  primaryDisabled: {
+    type: Boolean,
+    default: false,
+  },
+  secondaryDisabled: {
+    type: Boolean,
+    default: false,
+  },
+  secondaryText: {
+    type: String,
+  },
+  secondaryAction: {
+    type: Function,
+  },
+});
+
+const emptySecondary = computed(() => !(props.secondaryAction || props.secondaryText));
+</script>
+
+<style lang="scss" scoped>
+
+.wt-headline {
+  .wt-button {
+    margin-left: var(--spacing-sm);
+
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+}
+</style>

package/src/components/{organisms/wt-page-wrapper → wt-page-wrapper}/wt-page-wrapper.vue

@@ -24,12 +24,18 @@ export default {
 };
 </script>
 
+<style lang="scss">
+@import './variables.scss';
+</style>
+
 <style lang="scss" scoped>
+
 .wt-page-wrapper {
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
   min-height: 100%;
+  max-width: 100%;
   padding: var(--page-wrapper-padding);
   gap: var(--page-wrapper-section-gap);
 }

package/src/components/{organisms/wt-pagination → wt-pagination}/__tests__/WtPagination.spec.js

@@ -28,9 +28,10 @@ describe('WtPagination', () => {
     const wrapper = mount(WtPagination, {
       props: { isNext: true, page: 2 },
     });
-    const pageControls = wrapper.findAll('.wt-pagination__page-control');
+    const pageControls = wrapper.findAllComponents({ name: 'wt-icon-btn' });
     pageControls.at(0).vm.$emit('click');
     pageControls.at(1).vm.$emit('click');
+    console.info(wrapper.emitted());
     expect(wrapper.emitted().prev.length).toBe(1);
     expect(wrapper.emitted().next.length).toBe(1);
   });

package/src/components/{organisms/wt-pagination → wt-pagination}/wt-pagination.vue

@@ -39,7 +39,7 @@
 </template>
 
 <script>
-import debounce from '../../../scripts/debounce';
+import debounce from '../../scripts/debounce';
 
 export default {
   name: 'wt-pagination',
@@ -64,6 +64,7 @@ export default {
       default: 1000,
     },
   },
+  emits: ['change', 'input', 'prev', 'next'],
   model: {
     prop: 'size',
     event: 'change',
@@ -104,7 +105,12 @@ export default {
 };
 </script>
 
+<style lang="scss">
+@import './variables.scss';
+</style>
+
 <style lang="scss" scoped>
+
 .wt-pagination {
   @extend %typo-body-1;
 

package/src/{css/components/organisms → components}/wt-player/_variables.scss

@@ -1,5 +1,5 @@
 .wt-player {
-  --plyr-color-main: var(--accent-color);
+  --plyr-color-main: var(--primary-color);
   --plyr-audio-control-color: var(--icon-primary-color);
   // --plyr-control-toggle-checked-background: var(--main-color);
   --player-close-icon-transform-translate-x: var(--spacing-md);

package/src/components/{organisms/wt-player → wt-player}/wt-player.vue

@@ -101,14 +101,16 @@ export default {
   methods: {
     async setupPlayer() {
       await this.$nextTick(); // test is failing to render component if element is passed to Plyr as Vue $ref
-      const baseURL = this.$baseURL || process.env.BASE_URL;
+      const baseURL = this.$baseURL || (process || import.meta).env.BASE_URL;
       if (this.player) this.player.destroy();
-      const controls = ['play-large', 'play', 'progress', 'current-time',
+      const controls = [
+        'play-large', 'play', 'progress', 'current-time',
         'mute', 'volume', 'captions', 'settings', 'pip',
-        'airplay', 'fullscreen'];
+        'airplay', 'fullscreen',
+      ];
       if (this.download) controls.push('download');
       this.player = new Plyr(this.$refs.player, {
-      // this.player = new Plyr('.wt-player__player', {
+        // this.player = new Plyr('.wt-player__player', {
         autoplay: this.autoplay,
         loadSprite: false,
         resetOnEnd: this.resetOnEnd,
@@ -150,7 +152,8 @@ export default {
 </script>
 
 <style lang="scss">
-@import "~plyr/src/sass/plyr.scss";
+@import '../../../node_modules/plyr/src/sass/plyr';
+@import './variables.scss';
 
 .wt-player {
   @extend %typo-body-2;
@@ -160,10 +163,12 @@ export default {
     &-sticky {
       position: sticky;
     }
+
     &-relative {
       position: relative;
       bottom: unset;
     }
+
     &-static {
       position: static;
     }

package/src/components/{molecules/wt-popup → wt-popup}/wt-popup.vue

@@ -55,7 +55,12 @@ export default {
 };
 </script>
 
+<style lang="scss">
+@import './variables.scss';
+</style>
+
 <style lang="scss" scoped>
+
 .wt-popup {
   position: fixed;
   z-index: var(--popup-wrapper-z-index);

package/src/components/{molecules/wt-progress-bar → wt-progress-bar}/__tests__/WtProgressBar.spec.js

@@ -7,11 +7,11 @@ describe('WtProgressBar', () => {
     expect(wrapper.exists()).toBe(true);
   });
   it('isOverflow correctly computes overflow=true', () => {
-    const wrapper = shallowMount(WtProgressBar, { propsData: { value: 2, max: 1 } });
+    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, { propsData: { value: 0.99, max: 1 } });
+    const wrapper = shallowMount(WtProgressBar, { props: { value: 0.99, max: 1 } });
     expect(wrapper.vm.isOverflow).toBe(false);
   });
 });

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

@@ -4,8 +4,8 @@
   --progress-bar-padding: var(--spacing-3xs);
   --progress-bar-border-radius: var(--progress-bar-padding);
 
-  --progress-bar-bg-color--primary: var(--accent-color);
+  --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/{molecules/wt-progress-bar → wt-progress-bar}/wt-progress-bar.vue

@@ -1,9 +1,11 @@
 <template>
-  <div class="wt-progress-bar" :class="[{
+  <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>
@@ -40,7 +42,12 @@ export default {
 };
 </script>
 
+<style lang="scss">
+@import './variables.scss';
+</style>
+
 <style lang="scss" scoped>
+
 .wt-progress-bar {
   box-sizing: border-box;
   width: 100%;
@@ -55,7 +62,7 @@ export default {
   display: inline-block;
   height: var(--progress-bar-height);
   will-change: width;
-  background: var(--accent-color);
+  background: var(--primary-color);
   border-radius: var(--progress-bar-border-radius) 0 0 var(--progress-bar-border-radius);
   transition: var(--transition);
 }
@@ -63,12 +70,15 @@ export default {
 .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);
 }

package/src/components/{molecules/wt-radio → wt-radio}/__tests__/WtRadio.spec.js

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

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>