@avakhula/ui 0.0.32 → 0.0.34-4.1

package/src/components/ProgressBar/progressBar.scss

@@ -102,6 +102,13 @@ $progress-bar-canceled-bg: $gray-500;
       }
     }
 
+    &.progress-bar-canceling {
+      .gradient {
+        display: block;
+      }
+    }
+
+    &.progress-bar-canceling,
     &.progress-bar-canceled {
       .progress {
         min-width: 100%;

package/src/components/Sorting/Sorting.stories.js

@@ -1,5 +1,6 @@
 import IbSorting from "./Sorting.vue";
 import { typesSorting, typesSortingView } from "./constants.js";
+import { popoverPosition } from "../Popover/constants";
 
 export default {
   title: "Sorting",
@@ -9,10 +10,18 @@ export default {
       control: { type: "select" },
       options: Object.values(typesSorting),
     },
-    viewSorting: {
+    view: {
       control: { type: "select" },
       options: Object.values(typesSortingView),
     },
+    tooltipPosition: {
+      control: { type: "select" },
+      options: Object.keys(popoverPosition),
+    },
+    tooltipIconPosition: {
+      control: { type: "select" },
+      options: Object.keys(popoverPosition),
+    },
   },
 };
 
@@ -30,6 +39,7 @@ const Template = (args) => ({
 
 export const Default = Template.bind({});
 Default.args = {
-  viewSorting: typesSortingView.TABLE_VIEW,
+  view: typesSortingView.TABLE_VIEW,
   title: "sorting",
+  tableName: "test",
 };

package/src/components/Sorting/Sorting.vue

@@ -4,43 +4,63 @@
       class="table-sorting-wrapper"
       :class="{
         active: currentTypeSort,
-        disabled: disableSorting,
+        disabled: disable,
       }"
-      v-if="viewSorting === sortingTypesView.TABLE_VIEW"
+      v-if="view === sortingTypesView.TABLE_VIEW"
     >
-      <button class="sorting-label" type="button">
-        {{ title }}
-        <ib-tooltip v-if="tooltipTextSorting" :text="tooltipTextSorting">
-        </ib-tooltip>
-      </button>
-      <ib-icon-button kind="white" size="s" @click="clickHandler">
+      <div>
+        <button
+          class="sorting-label"
+          v-tooltip:[sortingTooltipPosition]="sortingTooltipContent"
+          :class="{
+            'sorting-label-active': isOpenToggleTip && hasToggleTip,
+            'has-action': tooltipText?.length || hasToggleTip
+          }"
+          type="button"
+          @click="isOpenToggleTip = !isOpenToggleTip"
+        >
+          {{ title }}
+        </button>
+
+        <ib-toggle-tip
+          v-if="hasToggleTip"
+          position="bottom-center"
+          :is-open="isOpenToggleTip"
+          :title="toggleTipTitle"
+          @close="isOpenToggleTip = false"
+        >
+          <slot name="toggleTipBody"></slot>
+          <template #buttons>
+            <slot name="toggleTipButtons"></slot>
+          </template>
+        </ib-toggle-tip>
+      </div>
+
+      <ib-icon-button
+        v-if="!hideSortingButton"
+        v-tooltip:[tooltipIconPosition]="tooltipIconText"
+        kind="white"
+        size="s"
+        @click="clickHandler"
+      >
         <ion-icon :name="iconType"></ion-icon>
-        <ib-tooltip v-if="tooltipIconSorting" :text="tooltipIconSorting">
-        </ib-tooltip>
       </ib-icon-button>
     </div>
 
     <button
       v-else
+      v-tooltip:[tooltipPosition]="tooltipText"
       class="sorting-button"
       type="button"
-      :aria-label="sort"
       @click="clickHandler"
+      :aria-label="sort"
       :class="{
         active: currentTypeSort,
-        disabled: disableSorting,
+        disabled: disable,
       }"
     >
       {{ title }}
-      <ib-icon
-        v-if="iconType"
-        :name="iconType"
-        :style="{
-          fontSize: iconSize + 'px',
-        }"
-      ></ib-icon>
-      <ib-tooltip v-if="tooltipTextSorting" :text="tooltipTextSorting">
-      </ib-tooltip>
+      <ib-icon v-if="iconType" :name="iconType"></ib-icon>
     </button>
   </div>
 </template>
@@ -48,18 +68,35 @@
 <script>
 import IbIcon from "../Icon.vue";
 import IbIconButton from "../IconButton/IconButton.vue";
-import IbTooltip from "../Tooltip/Tooltip.vue";
+import IbToggleTip from "../ToggleTip/ToggleTip.vue";
 import { typesSorting, typesSortingView } from "./constants.js";
-
+import { TooltipDirective as Tooltip } from "../../directives/tooltip/tooltip";
 export default {
   name: "IbSorting",
   props: {
-    tooltipTextSorting: {
+    tooltipTitle: {
+      type: String,
+      default: ''
+    },
+    hideSortingButton: {
+      type: Boolean,
+      default: false,
+    },
+    tooltipText: {
+      type: String,
+    },
+    tooltipPosition: {
+      type: String,
+    },
+    tooltipIconPosition: {
       type: String,
     },
     tooltipIconSorting: {
       type: String,
     },
+    toggleTipTitle: {
+      type: String,
+    },
     title: {
       type: String,
       default: "",
@@ -68,40 +105,49 @@ export default {
       type: String,
       default: null,
     },
-    viewSorting: {
+    view: {
       type: String,
       required: true,
     },
-    disableSorting: {
+    disable: {
       type: Boolean,
       default: false,
     },
+    tableName: {
+      type: String,
+      required: true,
+    },
+  },
+  mounted() {
+    this.$globalEvents.$on(`sorting:update:${this.tableName}`, (e) => {
+      if (!this.$el.contains(e.$el)) {
+        this.currentTypeSort = null;
+      }
+    });
   },
   data() {
     return {
+      isOpenToggleTip: false,
       sortingTypes: typesSorting,
       sortingTypesView: typesSortingView,
       currentTypeSort: this.sort,
     };
   },
-  watch: {
-    currentTypeSort: function () {
-      this.updateTypeSorting();
-    },
-  },
   methods: {
     clickHandler() {
       if (!this.currentTypeSort) {
         this.currentTypeSort = this.sortingTypes.TYPE_ASC;
-        return;
       } else if (this.currentTypeSort === this.sortingTypes.TYPE_ASC) {
         this.currentTypeSort = this.sortingTypes.TYPE_DESC;
-        return;
+      } else {
+        this.currentTypeSort = null;
       }
-      this.currentTypeSort = null;
+
+      this.updateTypeSorting();
     },
     updateTypeSorting() {
-      this.$emit("update-sorting", this.typeSort);
+      this.$globalEvents.$emit(`sorting:update:${this.tableName}`, this);
+      this.$emit("update-sorting", this.currentTypeSort);
     },
   },
   computed: {
@@ -110,16 +156,58 @@ export default {
         return "arrow-up";
       } else if (this.currentTypeSort === this.sortingTypes.TYPE_DESC) {
         return "arrow-down";
-      } else if (this.viewSorting !== this.sortingTypesView.GRID_VIEW) {
+      } else if (this.view !== this.sortingTypesView.GRID_VIEW) {
         return "swap-vertical";
       }
       return null;
     },
+    sortingTooltipPosition() {
+      if (this.hasToggleTip) {
+        return 'bottomCenter'
+      }
+
+      return this.tooltipPosition;
+    },
+    sortingTooltipContent() {
+      if (this.hasToggleTip) {
+        return lang('click_to_view_details', this.langComponents?.COMPONENT_SYSTEM);
+      }
+
+      return this.tooltipContent;
+    },
+    tooltipIconText() {
+      if (this.currentTypeSort === this.sortingTypes.TYPE_ASC) {
+        return lang("sort_descending", this.langComponents?.COMPONENT_SELECT);
+      } else if (this.currentTypeSort === this.sortingTypes.TYPE_DESC) {
+        return lang("reset_sorting", this.langComponents?.COMPONENT_SELECT);
+      } else if (this.view !== this.sortingTypesView.GRID_VIEW) {
+        return lang("sort_ascending", this.langComponents?.COMPONENT_SELECT);
+      }
+      return "";
+    },
+    tooltipContent() {
+      if (this.tooltipTitle.length) {
+        return {
+          title: this.tooltipTitle,
+          text: this.tooltipText
+        }
+      }
+
+      return this.tooltipText;
+    },
+    hasToggleTip() {
+      return (
+        this.toggleTipTitle &&
+        this.$slots.toggleTipBody &&
+        this.$slots.toggleTipButtons
+      );
+    },
   },
+  directives: { Tooltip },
   components: {
     IbIcon,
     IbIconButton,
-    IbTooltip,
+    IbToggleTip,
   },
 };
 </script>

package/src/components/Sorting/sorting.scss

@@ -22,10 +22,10 @@ button {
 
     .sorting-label {
       border: solid 2px transparent;
-      padding: 0 4px;
+      padding: 0 2px;
       border-radius: 4px;
       margin-right: 2px;
-      @include Ib-H4-regular;
+      @include Ib-H4-medium;
       color: $neutral-900;
       height: 24px;
       display: flex;
@@ -33,19 +33,22 @@ button {
       transition: background-color .3s;
       transition: color .3s;
 
-      &:hover {
-        color: $blue-700;
-        border-color: $blue-300;
-        cursor: pointer;
-        background-color: $blue-100;
-      }
+      &.has-action {
+        &:hover {
+          color: $blue-700;
+          border-color: $blue-300;
+          cursor: pointer;
+          background-color: $blue-100;
+        }
 
-      &:active {
-        border-color: transparent;
-        color: $blue-900;
-        background-color: $blue-200;
-        transition: background-color .3s;
-        transition: color .3s;
+        &.sorting-label-active,
+        &:active {
+          border-color: transparent;
+          color: $blue-900;
+          background-color: $blue-200;
+          transition: background-color .3s;
+          transition: color .3s;
+        }
       }
 
       &:focus {

package/src/components/SplitButton/SplitButton.vue

@@ -11,10 +11,11 @@
 
     <a
       v-else
-      :disabled="disabled"
       class="split-button-main"
       :class="{ disabled }"
+      :disabled="disabled"
       v-bind="mainButtonAttrs"
+      @click="onClickLink"
     >
       {{ content }}
     </a>
@@ -110,6 +111,12 @@ export default {
       this.childList[this.activeElemIdx].classList.add("active");
       this.content = this.childList[this.activeElemIdx].textContent;
     },
+    onClickLink(e) {
+      if (this.disabled) {
+        e.preventDefault();
+        return;
+      }
+    }
   },
   computed: {
     classes() {

package/src/components/SplitButton/splitButton.scss

@@ -111,6 +111,7 @@ $danger-split-button-active-bg: $red-900;
       &:disabled {
         background-color: $split-button-disabled-bg;
         color: $split-button-disabled-color;
+        cursor: not-allowed;
       }
     }
   }
@@ -134,6 +135,7 @@ $danger-split-button-active-bg: $red-900;
       &:disabled {
         background-color: $split-button-disabled-bg;
         color: $split-button-disabled-color;
+        cursor: not-allowed;
       }
     }
 
@@ -155,6 +157,7 @@ $danger-split-button-active-bg: $red-900;
       &:disabled{
         background-color: $split-button-disabled-bg;
         color: $split-button-disabled-color;
+        cursor: not-allowed;
       }
     }
   }

package/src/components/StatusIndicator/icons.js

@@ -1,25 +1,25 @@
 export const icons = {
-  new: `<svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <circle cx="4.5" cy="4.5" r="4" fill="#0369E8"/>
-    </svg>
+  new: `<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle id="Ellipse" cx="5.5" cy="5.5" r="5" fill="#0369E8"/>
+  </svg>
   `,
 
   success: `
-  <svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="4.5" cy="4.5" r="4" fill="#0D7F39"/>
-  </svg>
+  <svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle id="Ellipse" cx="5.5" cy="5.5" r="5" fill="#0D7F39"/>
+  </svg>  
   `,
 
   error: `
-  <svg width="8" height="9" viewBox="0 0 8 9" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.30688 6.75114C7.74427 6.10987 8 5.3348 8 4.5C8 2.29086 6.20914 0.5 4 0.5C3.1652 0.5 2.39013 0.755729 1.74885 1.19312L7.30688 6.75114ZM0.693121 2.24885C0.255729 2.89013 0 3.6652 0 4.5C0 6.70914 1.79086 8.5 4 8.5C4.8348 8.5 5.60987 8.24427 6.25114 7.80688L0.693121 2.24885Z" fill="#C8182E"/>
+  <svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path id="Subtract" fill-rule="evenodd" clip-rule="evenodd" d="M9.1336 8.31393C9.68034 7.51234 10 6.5435 10 5.5C10 2.73858 7.76142 0.5 5 0.5C3.9565 0.5 2.98766 0.819661 2.18607 1.3664L9.1336 8.31393ZM0.866401 2.68607C0.319661 3.48766 0 4.4565 0 5.5C0 8.26142 2.23858 10.5 5 10.5C6.0435 10.5 7.01234 10.1803 7.81393 9.6336L0.866401 2.68607Z" fill="#C8182E"/>
   </svg>
   `,
 
   warning: `
-  <svg width="10" height="9" viewBox="0 0 10 9" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M5 0.5L10 8.5H0L5 0.5Z" fill="#F1BC19"/>
-  </svg>
+  <svg width="12" height="11" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M6 0.5L12 10.5H0L6 0.5Z" fill="#F1BC19"/>
+  </svg>  
   `,
 
   incomplete: `

package/src/components/Tabs/Tabs.vue

@@ -36,14 +36,34 @@ import IbTabDropdown from "./TabDropdown.vue";
 import getHrefFromId from "../../helpers/getHrefFromID";
 export default {
   name: "IbTabs",
+  props: {
+    selectedTabId: {
+      type: String,
+      default: "",
+    },
+  },
   data() {
     return {
       tabs: [],
-      selectedTab: "",
+      selectedTab: this.selectTabId,
     };
   },
+  watch: {
+    selectedTabId(newId) {
+      this.selectTab(newId);
+    }
+  },
   created() {
-    this.$slots.default().forEach((item) => {
+    const slotItems = [];
+    this.$slots.default().forEach(item => {
+      if (item.type === Symbol.for('v-fgt')) {
+        return slotItems.push(...item.children);
+      }
+
+      return slotItems.push(item);
+    });
+
+    slotItems.forEach((item) => {
       if (!item.props.name) {
         this.tabs.push(item.props);
       } else {
@@ -75,18 +95,21 @@ export default {
         }
       }
     }
+
   },
   methods: {
     createHref(id) {
       return getHrefFromId(id);
     },
     selectTab(id) {
+      this.$emit('changeTab', id);
       this.selectedTab = id;
     },
   },
   components: {
     IbTabDropdown,
   },
+  emits: ["changeTab"]
 };
 </script>
 <style lang="scss" scoped>

package/src/components/Tabs/tabs.scss

@@ -12,7 +12,7 @@
     padding: 0;
     @include Ib-H4-medium;
     position: relative;
-    margin-bottom: 100px;
+    margin-bottom: 15px;
 
     &::after {
       content: '';

package/src/components/ToggleTip/constants.js

@@ -1,5 +1,5 @@
 export const toggleTipPosition = {
-  topLeft: "top-Left",
+  topLeft: "top-left",
   topCenter: "top-center",
   topRight: "top-right",
   rightTop: "right-top",

package/src/components/ToggleTip/toggleTip.scss

@@ -5,8 +5,7 @@
 
 $background: $white;
 $textColor: $neutral-900;
-$shadow: $ib-shadow-4;
-
+$shadow: $ib-shadow-3;
 
 .ib-toggle-tip {
   position: absolute;
@@ -20,6 +19,7 @@ $shadow: $ib-shadow-4;
   bottom: auto;
   left: auto;
   right: auto;
+  z-index: 100; 
   @include TooltipPosition;
 
   &-head {

package/src/components/Tooltip/Tooltip.vue

@@ -1,5 +1,9 @@
 <template>
-  <ib-popover :position="position" class="ib-tooltip">
+  <ib-popover
+    :position="position"
+    :always-visible="alwaysVisible"
+    :class="classList"
+  >
     <b v-if="title">{{ title }}</b>
     <p>{{ text }}</p>
   </ib-popover>
@@ -20,6 +24,21 @@ export default {
     text: {
       type: String,
     },
+    alwaysVisible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    classList() {
+      const classList = ["ib-tooltip"];
+
+      if (this.title) {
+        classList.push("ib-tooltip-large");
+      }
+
+      return classList;
+    },
   },
   components: { IbPopover },
 };
@@ -27,15 +46,17 @@ export default {
 
 <style lang="scss" scoped>
 @import "../../assets/scss/typography.scss";
+@import "../../assets/scss/variables/shadows.scss";
 @import "../../assets/scss/mixins.scss";
 
 .ib-tooltip {
   padding: 10px;
   max-width: 240px;
+  box-shadow: $ib-shadow-1;
+  z-index: 10002;
 
-  b,
-  p {
-    @include lineClamp;
+  &.ib-tooltip-large {
+    box-shadow: $ib-shadow-2;
   }
 
   b {
@@ -43,7 +64,102 @@ export default {
   }
 
   p {
+    word-break: break-word;
     @include Ib-H4-regular;
   }
+
+  &::before {
+    content: "";
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 4px 4px 0 4px;
+    border-color: #fff transparent transparent transparent;
+    position: absolute;
+    transform: none !important;
+  }
+
+  &.top-left {
+    &::before {
+      bottom: -4px;
+      right: 10px;
+    }
+  }
+  &.top-center {
+    &::before {
+      bottom: -4px;
+      right: 50%;
+      transform: translateX(50%) !important;
+    }
+  }
+  &.top-right {
+    &::before {
+      bottom: -4px;
+      left: 10px;
+    }
+  }
+  &.right-top {
+    &::before {
+      left: -6px;
+      bottom: 10px;
+      transform: rotate(90deg) !important;
+    }
+  }
+  &.right-center {
+    &::before {
+      left: -8px;
+      top: 50%;
+      transform: rotate(90deg) translateY(-50%) !important;
+    }
+  }
+  &.right-bottom {
+    &::before {
+      top: 10px;
+      left: -6px;
+      transform: rotate(90deg) !important;
+    }
+  }
+  &.bottom-left {
+    &::before {
+      top: -4px;
+      right: 10px;
+      transform: rotate(180deg) !important;
+    }
+  }
+  &.bottom-center {
+    &::before {
+      top: -4px;
+      right: 50%;
+      transform: rotate(180deg) translateX(-50%) !important;
+    }
+  }
+  &.bottom-right {
+    &::before {
+      top: -4px;
+      left: 10px;
+      transform: rotate(180deg) !important;
+    }
+  }
+  &.left-top {
+    &::before {
+      right: -6px;
+      bottom: 10px;
+      transform: rotate(-90deg) !important;
+    }
+  }
+  &.left-center {
+    &::before {
+      right: -8px;
+      top: 50%;
+      transform: rotate(-90deg) translateY(-50%) !important;
+    }
+  }
+  &.left-bottom {
+    &::before {
+      top: 10px;
+      right: -6px;
+      transform: rotate(-90deg) !important;
+    }
+  }
 }
 </style>