@avakhula/ui 0.0.10

package/src/components/Pagination/Pagination.vue

@@ -0,0 +1,227 @@
+<template>
+  <div class="report-controls">
+    <ib-limit-selector
+      @select="changeLimit"
+      :value="limitValue"
+      :label-select="labelSelect"
+    ></ib-limit-selector>
+
+    <div class="repot-pagination">
+      <ib-label>{{ labelInput }}</ib-label>
+      <div class="pagination-input">
+        <ib-input type="number" :debounce="500" @input="onInput"></ib-input>
+      </div>
+      <div class="row-count">
+        {{ setCountOfRows + " of " + countRows }}
+      </div>
+      <ib-icon-button
+        kind="tertiary"
+        size="m"
+        class="toggle-children button-prev"
+        :disabled="currentPage === 1"
+        @click="onSelect(currentPage - 1)"
+      >
+        <ib-icon name="chevron-back-outline"></ib-icon>
+        <ib-tooltip v-if="tooltipTextPrev" :text="tooltipTextPrev"></ib-tooltip>
+      </ib-icon-button>
+
+      <ul class="pagination-wrapper">
+        <li
+          v-for="(item, index) of countPagePagination"
+          v-show="showItem(index + 1)"
+          :key="index"
+          class="pagination-item"
+          :class="{
+            active: index + 1 === currentPage,
+            'dots-left': indexSpaceLeft === index + 1,
+            'dots-right': indexSpaceRight === index + 1,
+          }"
+          @click="onSelect(index + 1)"
+        >
+          <button>
+            {{ index + 1 }}
+          </button>
+        </li>
+      </ul>
+
+      <ib-icon-button
+        kind="tertiary"
+        size="m"
+        class="toggle-children button-next"
+        :disabled="currentPage === countPagePagination"
+        @click="onSelect(currentPage + 1)"
+      >
+        <ib-icon name="chevron-forward-outline"></ib-icon>
+        <ib-tooltip v-if="tooltipTextNext" :text="tooltipTextNext"></ib-tooltip>
+      </ib-icon-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import IbLimitSelector from "./LimitSelector.vue";
+import IbIconButton from "../IconButton/IconButton.vue";
+import IbInput from "../Form/Input/Input.vue";
+import IbLabel from "../Form/Label/Label.vue";
+import IbIcon from "../Icon.vue";
+import IbTooltip from "../Tooltip/Tooltip.vue";
+export default {
+  name: "IbPagination",
+  props: {
+    tooltipTextPrev: {
+      type: String,
+    },
+    tooltipTextNext: {
+      type: String,
+    },
+    labelInput: {
+      type: String,
+      required: true,
+    },
+    labelSelect: {
+      type: String,
+      required: true,
+    },
+    countRows: {
+      type: Number,
+      required: true,
+    },
+    pageCount: {
+      type: Number,
+      default: null,
+    },
+    current: {
+      type: Number,
+      default: 1,
+    },
+    limitSelector: {
+      type: Number,
+      default: 10,
+    },
+  },
+  data() {
+    return {
+      currentPage: this.current,
+      indexSpaceLeft: null,
+      indexSpaceRight: null,
+      limitValue: this.limitSelector,
+    };
+  },
+  watch: {
+    current(newVal) {
+      this.currentPage = newVal;
+    },
+    currentPage(newVal) {
+      this.onSelect(newVal);
+    },
+    limitValue() {
+      this.currentPage = 1;
+      this.onSelect(this.currentPage);
+    },
+  },
+  methods: {
+    changeLimit(val) {
+      if (Number.isInteger(val)) {
+        this.limitValue = val;
+        this.$emit("set-limit", val);
+      }
+    },
+    onInput(val) {
+      if (val && val <= this.countPagePagination) {
+        this.currentPage = Number(val);
+      }
+    },
+    onSelect(page) {
+      if (Number.isInteger(page)) {
+        this.currentPage = page;
+        this.$emit("select", page);
+      }
+    },
+    showItem(index) {
+      if (this.countPagePagination <= 5) {
+        this.indexSpaceLeft = null;
+        this.indexSpaceRight = null;
+        return true;
+      }
+
+      if (index === 1) {
+        return true;
+      }
+
+      if (index === this.countPagePagination) {
+        return true;
+      }
+
+      if (this.countPagePagination >= 7) {
+        if (this.currentPage <= 3 && index <= 5 ) {
+          this.indexSpaceLeft = this.countPagePagination;
+          this.indexSpaceRight = null;
+          return true;
+        }
+
+        if (
+          this.currentPage >= this.countPagePagination - 2 &&
+          index >= this.countPagePagination - 4
+        ) {
+          this.indexSpaceLeft = null;
+          this.indexSpaceRight = 1;
+          return true;
+        }
+
+        if (
+          3 < this.currentPage < this.countPagePagination - 3 &&
+          (index === this.currentPage + 1 ||
+            index === this.currentPage - 1 ||
+            index === this.currentPage)
+        ) {
+          this.indexSpaceLeft = this.countPagePagination;
+          this.indexSpaceRight = 1;
+
+          return true;
+        }
+      } else {
+        return true;
+      }
+
+      return false;
+    },
+  },
+  computed: {
+    setCountOfRows() {
+      if (this.currentPage === 1 || this.countPagePagination === 1) {
+        return (
+          "1 - " +
+          (this.countPagePagination > 1 ? this.limitValue : this.countRows)
+        );
+      }
+
+      if (this.countPagePagination === this.currentPage) {
+        return (
+          (this.currentPage - 1) * this.limitValue + " - " + this.countRows
+        );
+      }
+
+      return (
+        (this.currentPage - 1) * this.limitValue +
+        1 +
+        " - " +
+        this.currentPage * this.limitValue
+      );
+    },
+    countPagePagination() {
+      return Math.ceil(this.countRows / this.limitValue);
+    },
+  },
+  components: {
+    IbIconButton,
+    IbIcon,
+    IbInput,
+    IbLabel,
+    IbLimitSelector,
+    IbTooltip,
+  },
+};
+</script>
+<style lang="scss">
+@import "./pagination.scss";
+</style>

package/src/components/Pagination/pagination.scss

@@ -0,0 +1,189 @@
+@import "../../assets/scss/variables/colors.scss";
+@import "../../assets/scss/typography.scss";
+@import "../../assets/scss/mixins.scss";
+
+.report-limit-selector {
+  display: flex;
+  align-items: center;
+}
+
+.report-limit-selector {
+
+  label {
+    margin-bottom: 0;
+    margin-right: 5px;
+    @include Ib-H4-regular;
+    color: $neutral-900;
+  }
+
+  .dropdown-list-wrapper {
+    display: flex;
+    &:hover input {
+      cursor: pointer;
+    }
+  }
+}
+
+.report-controls {
+     display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+  .row-count {
+    margin-right: 10px;
+    @include Ib-H4-regular;
+    color: $gray-600;
+  }
+
+  .repot-pagination {
+    display: flex;
+    align-items: center;
+
+    .ib-label {
+      margin-right: 5px;
+      white-space: nowrap;
+      margin-bottom: 0;
+      @include Ib-H4-regular;
+      color: $neutral-900;
+    }
+
+    .pagination-input{
+      width: 64px;
+      margin-right: 10px;
+
+      /* Chrome, Safari, Edge, Opera */
+      input::-webkit-outer-spin-button,
+      input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+
+      /* Firefox */
+      input[type=number] {
+        -moz-appearance: textfield;
+      }
+
+    }
+
+    .button-prev {
+      margin-right: 5px;
+    }
+
+    .button-next {
+      margin-left: 5px;
+    }
+
+    .ib-icon-button.ib-btn-disabled.ib-icon-btn-tertiary:hover {
+      cursor: not-allowed;
+      border-color: transparent;
+    }
+
+    .ib-icon-button.ib-btn-disabled.ib-icon-btn-tertiary:active {
+      background-color: $gray-100;
+      color: $neutral-500;
+    }
+
+    .icon-button-wrapper.button-next,
+    .icon-button-wrapper.button-prev {
+      &.disabled {
+        pointer-events: none;
+        
+        button {
+          color: $neutral-500;
+        }
+      }
+    }
+    
+
+    .pagination-wrapper {
+      display: flex;
+      padding-left: 0;
+      margin: 0;
+      position: relative;
+
+      
+
+      .pagination-item {
+        list-style: none;
+        @include Ib-H4-medium;
+        margin: 0 5px;
+        height: 36px;
+        width: 36px;
+        background: $gray-100;
+        border-radius: 4px;
+        @include Ib-H4-medium;
+        color: $neutral-900;
+
+        &.dots-left {
+          position: relative;
+          margin-left: 29px;
+  
+          &::before {
+            content: '...';
+            position: absolute;
+            bottom: 0;
+            @include Ib-H4-medium;
+            color: $neutral-900;
+            left: -17px;
+            transform: translateX(-50%);
+            width: 14px;
+          }
+  
+        }
+
+        &.dots-right {
+          position: relative;
+          margin-right: 29px;
+  
+          &::after {
+            content: '...';
+            position: absolute;
+            right: -17px;
+            bottom: 0;
+            @include Ib-H4-medium;
+            color: $neutral-900;
+            transform: translateX(50%);
+            width: 14px;
+          }
+  
+        }
+
+        &.active button {
+          color: $blue-800;
+          background-color: $blue-200;
+        }
+
+        button {
+          height: inherit;
+          width: inherit;
+          border: none;
+          background: $gray-100;
+          border-radius: 4px;
+          border: 2px solid transparent;
+          transition: border 0.3s;
+          color: $neutral-900;
+          @include Ib-H4-regular;
+
+
+          &:hover {
+            border-color: $blue-300;
+            cursor: pointer;
+            color: $blue-700;
+            background: $blue-100;
+          }
+    
+          &:active {
+            border-color: transparent;
+            color: $blue-900;
+            background-color: $blue-200;
+          }
+
+          &:focus {
+            @include focus(2px);
+          }
+
+        }
+      }
+    }
+  }
+}

package/src/components/Popover/Popover.stories.js

@@ -0,0 +1,46 @@
+import IbPopover from "./Popover.vue";
+import IbButton from "../Button/Button.vue";
+import IbTagPill from "../TagPill/TagPill.vue";
+import { popoverPosition } from "./constants";
+import readme from "./readme.mdx";
+
+export default {
+  title: "Popover",
+  component: IbPopover,
+  argTypes: {
+    position: {
+      control: { type: "select" },
+      options: Object.values(popoverPosition),
+    },
+  },
+  parameters: {
+    docs: {
+      page: readme,
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { IbPopover, IbButton, IbTagPill },
+  setup() {
+    return { args };
+  },
+  template: `
+  <ib-button>
+    Test
+    <ib-popover v-bind="args">
+        <p class="ib-H4-medium" style="margin-bottom: 7px;">Learner success and progress. Title in two lines</p>
+        <ib-tag-pill style="margin-bottom: 5px;">Assignments</ib-tag-pill>
+        <p class="ib-H4-regular">Test of "participation" data focusing on</p>
+    </ib-popover>
+  </ib-button>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.decorators = [
+  () => ({
+    template:
+      '<div style="display: flex; align-items:center; justify-content: center; width: 400px; height: 400px; margin: 0 auto"><story /></div>',
+  }),
+];

package/src/components/Popover/Popover.vue

@@ -0,0 +1,81 @@
+<template>
+  <Transition>
+    <div v-show="isVisible" :class="classes">
+      <slot></slot>
+    </div>
+  </Transition>
+</template>
+
+<script>
+import { popoverPosition } from "./constants";
+
+export default {
+  name: "IbPopover",
+  props: {
+    position: {
+      type: String,
+      default: popoverPosition.topCenter,
+    },
+  },
+  data() {
+    return {
+      parentNode: null,
+      isVisible: false,
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.parentNode = this.$el.parentNode;
+
+      if (getComputedStyle(this.parentNode).position !== "absolute") {
+        this.parentNode.style.position = "relative";
+      }
+
+      this.parentNode.addEventListener("focus", this.showPopover, true);
+      this.parentNode.addEventListener("blur", this.hidePopover, true);
+      this.parentNode.addEventListener("mouseover", this.showPopover, true);
+      this.parentNode.addEventListener("mouseleave", this.hidePopover, true);
+    });
+  },
+  methods: {
+    showPopover() {
+      this.isVisible = true;
+    },
+    hidePopover() {
+      this.isVisible = false;
+    },
+  },
+  computed: {
+    classes() {
+      const classList = ["ib-popover"];
+      classList.push(`ib-${this.position}`);
+
+      if (this.isVisible) {
+        classList.push("active");
+      }
+
+      return classList;
+    },
+  },
+  beforeUnmount() {
+    this.parentNode.removeEventListener("focus", this.showPopover, true);
+    this.parentNode.removeEventListener("blur", this.hidePopover, true);
+    this.parentNode.removeEventListener("mouseover", this.showPopover, true);
+    this.parentNode.removeEventListener("mouseleave", this.hidePopover, true);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+// Transition
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+@import "./popover.scss";
+</style>

package/src/components/Popover/constants.js

@@ -0,0 +1,14 @@
+export const popoverPosition = {
+  topLeft: "top-Left",
+  topCenter: "top-center",
+  topRight: "top-right",
+  rightTop: "right-top",
+  rightCenter: "right-center",
+  rightBottom: "right-bottom",
+  bottomLeft: "bottom-left",
+  bottomCenter: "bottom-center",
+  bottomRight: "bottom-right",
+  leftTop: "left-top",
+  leftCenter: "left-center",
+  leftBottom: "left-bottom",
+};

package/src/components/Popover/popover.scss

@@ -0,0 +1,26 @@
+@import "../../assets/scss/typography.scss";
+@import "../../assets/scss/mixins/tooltip-position.scss";
+@import "../../assets/scss/variables/colors.scss";
+@import "../../assets/scss/variables/shadows.scss";
+
+$background: $white;
+$textColor: $neutral-900;
+$shadow: $ib-shadow-4;
+
+.ib-popover {
+  position: absolute;
+  padding: 20px;
+  max-width: 300px;
+  width: max-content;
+  background-color: $background;
+  color: $textColor;
+  border-radius: 4px;
+  box-shadow: $shadow;
+  top: auto;
+  bottom: auto;
+  left: auto;
+  right: auto;
+  @include TooltipPosition;
+  z-index: 100;
+  text-align: start;
+}

package/src/components/Popover/readme.mdx

@@ -0,0 +1,42 @@
+# IbPopover
+import { Story, Canvas } from "@storybook/addon-docs";
+
+A popover is a layer that pops up over all other elements on a page and has wide variation of passive content to display.
+
+## Overview
+
+A popover is a layer that appears above all other content on the page. Only one popover can appear at a time and can contain varying text and interactive elements. Popovers are used as an expanded version of Large tooltip but also can depict other visual information like Gif's, Images, Badges, etc.
+This component appears on Hover, therefore it can't hold clickable components. Clickable components can be placed in [Toggletip](?path=/story/toggletip--default) only (this rule is specific for IntelliBord Next system, other systems put different rules for this component).
+
+### When to use
+
+- Use when placing interactive elements, like links, buttons, or rich media to make the component more accessible. Disclosures that contain interactive elements use popovers as a base container layer to achieve this accessibility standard.
+- Use when you need to display additional details for specific elements on a page.
+
+### Popover with trigger button
+
+A popover is controlled by a trigger button. By default, we use an icon button to trigger a popover to open. However, as long as the trigger button is interactive it can visually change its shape and size depending on the usecase.
+
+
+### Usage
+For correct use component `<ib-popover>`, need to insert inside the element that should show this `<ib-popover>` when hovering and focusing.
+<Canvas>
+  <Story id="popover--default" />
+</Canvas>
+
+
+### Props
+
+| Name     | type   | Default Value  | required | Description                                                                                                                                                                                                                                         |
+| -------- | ------ | -------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| position | String | '`top-center`' | No       | The position of tooltip. Possible values are: '`top-left`', '`top-center`', '`top-right`', '`right-top`', '`right-center`', '`right-bottom`', '`bottom-left`', '`bottom-center`', '`bottom-right`', '`left-top`', '`left-center`', '`left-bottom`'. |
+
+### Events
+
+This component not suports events.
+
+### Slots
+
+| Slot name | Description                                 |
+| --------- | ------------------------------------------- |
+| default   | Content to be displayed inside the popover. |