@webitel/ui-sdk 2.1.21 → 2.1.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "2.1.21",
+  "version": "2.1.23",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",

package/src/components/index.js

@@ -34,6 +34,7 @@ import WtLabel from './molecules/wt-label/wt-label.vue';
 import WtButtonSelect from './molecules/wt-button-select/wt-button-select.vue';
 import WtHint from './molecules/wt-hint/wt-hint.vue';
 import WtCopyAction from './molecules/wt-copy-action/wt-copy-action.vue';
+import WtLoadBar from './molecules/wt-load-bar/wt-load-bar.vue';
 
 import WtAppHeader from './organisms/wt-app-header/wt-app-header.vue';
 import WtAppNavigator from './organisms/wt-app-header/wt-app-navigator.vue';
@@ -103,6 +104,7 @@ const Components = {
   WtButtonSelect,
   WtContextMenu,
   WtCopyAction,
+  WtLoadBar,
 };
 
 Object.keys(Components).forEach((name) => {

package/src/components/molecules/wt-load-bar/__tests__/WtLoadBar.spec.js

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

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

@@ -0,0 +1,50 @@
+<template>
+  <div class="wt-load-bar">
+    <span :style="`width: ${this.progressWidth}%;`" class="wt-load-bar__progress"></span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'wt-load-bar',
+  props: {
+    max: {
+      type: [Number, String],
+      default: 100,
+    },
+    value: {
+      type: [Number, String],
+      default: 0,
+    },
+  },
+  computed: {
+    progress() {
+      return (this.value * 100) / this.max;
+    },
+    progressWidth() {
+      return this.isOverflow ? 100 : this.progress;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wt-load-bar {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--load-bar-padding);
+  line-height: 0;
+  border: 1px solid var(--accent-color);
+  border-radius: var(--border-radius);
+}
+
+.wt-load-bar__progress {
+  display: inline-block;
+  height: var(--load-bar-height);
+  transition: var(--transition);
+  border-radius: var(--load-bar-border-radius);
+  background: var(--accent-color);
+  will-change: width;
+}
+</style>

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

@@ -13,11 +13,11 @@ export default {
   name: 'wt-progress-bar',
   props: {
     max: {
-      type: Number,
+      type: [Number, String],
       default: 100,
     },
     value: {
-      type: Number,
+      type: [Number, String],
       default: 0,
     },
     color: {

package/src/css/components/_components.scss

@@ -30,6 +30,7 @@
 @import "molecules/wt-textarea/variables";
 @import "molecules/wt-timepicker/variables";
 @import "molecules/wt-button-select/variables";
+@import "molecules/wt-load-bar/variables";
 
 @import "organisms/wt-headline/variables";
 @import "organisms/wt-headline-nav/variables";

package/src/css/components/molecules/wt-load-bar/_variables.scss

@@ -0,0 +1,6 @@
+
+:root {
+  --load-bar-height: 6px;
+  --load-bar-padding: 1px;
+  --load-bar-border-radius: 50px;
+}

package/src/css/styleguide/colors/_colors.scss

@@ -83,6 +83,9 @@
   --job-color: hsla(var(--_job-color), var(--_opacity--default));
   --job--hover-color: hsla(var(--_job-color), var(--_opacity--hover));
 
+  --link-color: hsla(205, 90%, 45%, 1);
+  --link--hover-color: hsla(205, 90%, 60%, 1);
+
   // SUBORDINATE COLORS
   --tag-bg-color: var(--accent-secondary-color);