@avakhula/ui 0.0.10

package/src/components/List.vue

@@ -0,0 +1,150 @@
+<template>
+  <ul :class="rootClass" @keydown="onKeydown">
+    <slot></slot>
+  </ul>
+</template>
+
+<script>
+import { ARROW_DOWN_KEY_CODE, ARROW_UP_KEY_CODE } from "../constants/keyCodes";
+
+export default {
+  name: "IbList",
+  data() {
+    return {
+      rootClass: "ib-list",
+    };
+  },
+  methods: {
+    onKeydown(e) {
+      if (e.keyCode === ARROW_DOWN_KEY_CODE) {
+        if (this.$el.parentNode.closest(`.${this.rootClass}`)) return;
+
+        e.preventDefault();
+        const activeElement = document.activeElement;
+        const childList = activeElement.querySelector(`.${this.rootClass}`);
+
+        let nextSibling = activeElement.nextElementSibling
+          ? activeElement.nextElementSibling
+          : activeElement.parentNode.nextElementSibling?.childNodes[0];
+
+        if (
+          childList &&
+          window.getComputedStyle(childList).display !== "none"
+        ) {
+          childList.querySelector('a, button, input, [tabindex="0"]').focus();
+          return;
+        }
+
+        if (nextSibling) {
+          nextSibling.focus();
+          return;
+        }
+
+        const parentNextItem = activeElement.closest(`.${this.rootClass}`)
+          .parentNode?.parentNode?.nextElementSibling.childNodes[0];
+
+        if (parentNextItem && parentNextItem.nodeName !== "#text") {
+          parentNextItem.focus();
+        }
+      }
+
+      if (e.keyCode === ARROW_UP_KEY_CODE) {
+        if (this.$el.parentNode.closest(`.${this.rootClass}`)) return;
+
+        e.preventDefault();
+        const activeElement = document.activeElement;
+        const prevSibling = activeElement.previousElementSibling
+          ? activeElement.previousElementSibling
+          : activeElement.parentNode.previousElementSibling?.childNodes[0];
+
+        if (!prevSibling) {
+          activeElement.closest(`.${this.rootClass}`).parentNode.focus();
+          return;
+        }
+        if (prevSibling && prevSibling.nodeName !== "#text") {
+          const parentNodeList = prevSibling?.querySelector(
+            `.${this.rootClass}`
+          );
+
+          if (
+            parentNodeList &&
+            window.getComputedStyle(parentNodeList).display !== "none"
+          ) {
+            const items = Array.from(parentNodeList.childNodes).filter(
+              (node) => node.nodeName !== "#text"
+            );
+            items[items.length - 1]?.childNodes[0].focus();
+            return;
+          }
+
+          prevSibling.focus();
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import "../assets/scss/variables/colors.scss";
+
+$item-checked-bg: $gray-100;
+$item-hover-bg: $gray-100;
+
+.ib-list {
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  margin: 6.5px 0;
+
+  .ib-toggle-container {
+    padding: 10px 15px 7px;
+    transition: background-color 0.3s;
+
+    &:focus {
+      border-radius: 0;
+      outline-offset: -2px;
+    }
+
+    &:hover {
+      background-color: $item-hover-bg;
+    }
+
+    &.toggle-on {
+      background-color: $item-checked-bg;
+
+      &:hover {
+        background-color: $blue-50;
+      }
+    }
+  }
+
+  .ib-checkbox {
+    transition: background-color 0.3s;
+
+    .ib-checkbox-body {
+      padding: 10px 15px 7px;
+      width: 100%;
+    }
+
+    &:focus {
+      .ib-checkbox-body {
+        border-radius: 0;
+        outline-offset: -2px;
+      }
+    }
+
+    &:hover {
+      background-color: $item-hover-bg;
+    }
+
+    &.ib-checkbox-filled {
+      background-color: $item-checked-bg;
+
+      &:hover {
+        background-color: $blue-50;
+      }
+    }
+  }
+}
+</style>

package/src/components/Modal/Modal.stories.js

@@ -0,0 +1,48 @@
+import IbModal from "./Modal.vue";
+import IbButton from "../Button/Button.vue";
+import IbButtonGroup from "../ButtonGroup/ButtonGroup.vue";
+import readme from "./readme.mdx";
+
+export default {
+  title: "Modal",
+  component: IbModal,
+  argTypes: {
+    onOpen: { action: "open" },
+    onClose: { action: "close" },
+  },
+  parameters: {
+    docs: {
+      page: readme,
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { IbModal, IbButton, IbButtonGroup },
+  setup() {
+    return { args };
+  },
+  template: `
+    <ib-modal v-bind="args">
+      <template #trigger>
+        <ib-button>Show modal</ib-button>
+      </template>
+      <template #header>
+        Remove
+      </template>
+      <template #body>
+        <p style="font-size: 14px;">
+          All data will be lost! Are you sure you want to remove this report?
+        </p>
+      </template>
+      <template #footer>
+        <ib-button-group>
+          <ib-button kind="ghost">Cancel</ib-button>
+          <ib-button kind="danger">Remove report</ib-button>
+        </ib-button-group>
+      </template>
+    </ib-modal>
+  `,
+});
+
+export const Default = Template.bind({});

package/src/components/Modal/Modal.vue

@@ -0,0 +1,231 @@
+<template>
+  <div
+    class="modal-trigger"
+    ref="trigger"
+    @blur.capture="onTriggerBlur"
+    @click="open"
+    v-if="hasTrigger"
+  >
+    <slot name="trigger"></slot>
+  </div>
+
+  <Teleport to="body">
+    <div class="modal" :class="classList" v-show="isActive" ref="modal">
+      <div class="modal-body" v-outside="clickOutside">
+        <ib-icon-button class="modal-close-icon" kind="ghost" @click="close">
+          <ib-icon name="close-outline" />
+        </ib-icon-button>
+
+        <p class="modal-header" v-if="hasHeader">
+          <slot name="header" :showModal="showModal"></slot>
+        </p>
+
+        <div class="modal-content" :class="{ 'without-title': !hasHeader }">
+          <slot name="body" :showModal="showModal"></slot>
+        </div>
+
+        <div class="modal-footer" v-if="hasFooter">
+          <slot name="footer" :showModal="showModal"></slot>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script>
+import IbIconButton from "../IconButton/IconButton.vue";
+import IbIcon from "../Icon.vue";
+import { OutsideDirective as Outside } from "../../directives/outside/outside";
+import { ESC_KEY_CODE, TAB_KEY_CODE } from "../../constants/keyCodes";
+
+export default {
+  name: "IbModal",
+  directives: { Outside },
+  props: {
+    active: {
+      type: Boolean,
+      default: false,
+    },
+    classList: {
+      type: String,
+      default: "",
+    },
+    stopPropagation: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  watch: {
+    active(val) {
+      this.isActive = val;
+    },
+    isActive(val) {
+      if (val) {
+        this.open();
+      } else {
+        this.close();
+      }
+    },
+  },
+  mounted() {
+
+    console.log(this.classList, 'test')
+
+    const focusableItems = this.$refs?.modal?.querySelectorAll(
+      "[tabindex], a, button, input, select, textarea"
+    );
+
+    focusableItems[0].addEventListener("keydown", (e) => {
+      if (e.keyCode === TAB_KEY_CODE && e.shiftKey) {
+        e.preventDefault();
+        focusableItems[focusableItems.length - 1].focus();
+      }
+    });
+
+    focusableItems[focusableItems.length - 1].addEventListener(
+      "keydown",
+      (e) => {
+        if (e.keyCode === TAB_KEY_CODE && !e.shiftKey) {
+          e.preventDefault();
+          focusableItems[0].focus();
+        }
+      }
+    );
+
+    document.addEventListener("keydown", (e) => {
+      if (e.keyCode === ESC_KEY_CODE && !this.stopPropagation) {
+        this.close();
+      }
+    });
+  },
+  data() {
+    return {
+      isActive: this.active,
+    };
+  },
+  methods: {
+    showModal(value) {
+      if (value) {
+        this.open();
+      } else {
+        this.close();
+      }
+    },
+    onTriggerBlur() {
+      this.$refs.modal?.querySelector("a, button, [tabindex]")?.focus();
+    },
+    open() {
+      this.isActive = true;
+      document.body.classList.add("modal-open");
+      this.$emit("open");
+    },
+    close() {
+      this.isActive = false;
+      this.$refs.trigger?.querySelector("a, button, [tabindex]")?.focus();
+      document.body.classList.remove("modal-open");
+      this.$emit("close");
+    },
+    clickOutside(e) {
+      if (this.stopPropagation) {
+        return;
+      }
+
+      if (!this.$refs.trigger?.contains(e.target) && this.isActive) {
+        this.close();
+      }
+    },
+  },
+  computed: {
+    hasTrigger() {
+      return !!this.$slots.trigger;
+    },
+    hasHeader() {
+      return !!this.$slots.header;
+    },
+    hasFooter() {
+      return !!this.$slots.footer;
+    },
+  },
+  components: {
+    IbIconButton,
+    IbIcon,
+  },
+  beforeUnmount() {
+    if (this.isActive) {
+      this.close();
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/scss/variables/colors.scss";
+@import "../../assets/scss/variables/shadows.scss";
+@import "../../assets/scss/typography.scss";
+
+$backdrop-bg: $black-t20;
+$modal-title-color: $neutral-900;
+$modal-bg: $white;
+$modal-shadow: $ib-shadow-6;
+body.modal-open {
+  overflow: hidden;
+}
+
+.modal-open .modal {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.modal {
+  -webkit-backdrop-filter: blur(4px);
+  backdrop-filter: blur(4px);
+  background: $backdrop-bg;
+  z-index: 10050;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.modal-body {
+  background-color: $modal-bg;
+  padding: 20px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  position: relative;
+  width: fit-content;
+  min-width: 380px;
+  border-radius: 8px;
+  max-width: calc(100% - 40px);
+  box-shadow: $modal-shadow;
+
+  .modal-header {
+    @include Ib-H2-medium;
+    color: $modal-title-color;
+    margin-bottom: 15px;
+  }
+
+  .modal-content.without-title {
+    padding-right: 25px;
+    padding-top: 4px;
+  }
+
+  .modal-close-icon {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+
+    ion-icon {
+      font-size: 20px;
+    }
+  }
+
+  .modal-footer {
+    margin-top: 20px;
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+</style>

package/src/components/Modal/readme.mdx

@@ -0,0 +1,76 @@
+# IbModal
+
+import { Story, Canvas } from "@storybook/addon-docs";
+
+Modals focus the user’s attention exclusively on one task or piece of information via a window that sits on top of the page content.
+
+## Overview
+
+Modals used to pr
+sent critical information or request user input needed to complete a user’s workflow. Modals interrupt a user’s workflow by design. When active, a user is blocked from the on-page content and cannot return to their previous workflow until the modal task is completed or the user dismisses the modal. While effective when used correctly, modals should be used sparingly to limit disruption to the user.
+Modal dialogs are commonly used for short and non-frequent tasks, such as editing or management tasks. If a user needs to repeatably preform a task, consider making the task do-able from the main page.
+
+Modal supports close on ESC, close on backdrop click, and the X close button in the header.
+
+### When to use
+
+**Require an immediate response from the user.** Use a dialog to request information that is preventing the system from continuing a user-initiated process.
+
+**Notify the user of urgent information.** Use a modal dialog to notify the user of urgent information concerning their current work. Modal dialogs are commonly used to report system errors or convey a consequence of a user’s action.
+
+**Confirm a user decision.** Use a modal dialog to confirm user decisions. Clearly describe the action being confirmed and explain any potential consequences that it may cause. Both the title and the button should reflect the action that will occur. If the action is destructive or irreversible then use a transactional danger modal.
+
+### Best practices:
+
+- Only display one modal notification at a time.
+- Use modals when you need to immediately interrupt a user’s task.
+- Give users clear steps to resolve and dismiss the notification.
+
+### Sizing
+
+Modal container is a flexible component and its sizing depends on specific usecases. Choose a size that works best for the amount of modal content you have. Modals with short messages should use a small modal size to avoid long single lines; for complex components, like data table a large size will be more accommodating.
+
+**There is no specific size guides for modals on this design stage of IntelliBoard Next New Design. It can be added in the future.**
+
+### Props
+
+| Name            | type    | Default Value | Description                                        |
+| --------------- | ------- | ------------- | -------------------------------------------------- |
+| isActive        | Boolean | false         | Controls the visibility of the modal.              |
+| classList       | String  | ""            | Classes for modal.                                 |
+| stopPropagation | Boolean | false         | Disable modal close on click outside and press ESC |
+
+### Events
+
+| Event name | Parameters | Description                       |
+| ---------- | ---------- | --------------------------------- |
+| open       | null       | Emitted when the modal is opened. |
+| close      | null       | Emitted when the modal is closed. |
+
+### Slots
+
+| Slot name | Description                                                                                                          |
+| --------- | -------------------------------------------------------------------------------------------------------------------- |
+| trigger   | Use this slot to insert a trigger button that opens the modal. The trigger button can be placed anywhere in the DOM. |
+| header    | Use this slot to insert a title.                                                                                     |
+| body      | Use this slot to insert custom body content for the modal.                                                           |
+| footer    | Use this slot to insert custom footer content for the modal.                                                         |
+
+### Content
+
+Main elements
+
+- **Title.** The title should be brief, using a verb plus noun combination that clearly describes the modal’s task or purpose. For short, direct messages the title can include the whole message to add visual clarity to an otherwise repetitive title and body message. When using this style, no other body copy may be included.
+- **Body.** A modal should include only content relevant to completing the current task.
+- **Footer.** Use descriptive words for the actions such as Add, Delete, and Save. Avoid vague words like Done or OK. For a list of approved action labels. If you need to include a “docs” or other non-primary action, include it as a link in the modal’s body.
+
+### Overflow content
+
+When the modal content is longer than the modal height then the body section should scroll vertically with the header and footer remaining fixed in place. The content should visibly fade at the end of the modal body area to indicate there is additional content out of view.
+Modal content should never scroll horizontally; instead, use a larger size modal.
+
+### Default
+
+<Canvas>
+  <Story id="modal--default" />
+</Canvas>

package/src/components/Pagination/LimitSelector.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="report-limit-selector">
+    <ib-label>{{ labelSelect }}</ib-label>
+    <ib-select
+      class="report-limit-selector-select"
+      :value="value"
+      :options="prepareOptions"
+      :is-multiple="false"
+      :show-clear-button="false"
+      @input="selectItem"
+    />
+  </div>
+</template>
+
+<script>
+import IbLabel from "../Form/Label/Label.vue";
+import IbSelect from "../TreeSelect/Select.vue";
+export default {
+  name: "IbLimitSelector",
+  props: {
+    labelSelect: {
+      type: String,
+      required: true,
+    },
+    value: {
+      type: Number,
+    },
+    options: {
+      type: Array,
+      default: () => [10, 25, 50, 100],
+    },
+  },
+  watch(val) {
+    this.selected = val;
+  },
+  data() {
+    return {
+      selected: this.value,
+    };
+  },
+  methods: {
+    selectItem(item) {
+      this.selected = item;
+      this.onChange(item);
+    },
+    onChange(count) {
+      if (Number.isInteger(+count)) {
+        this.$emit("select", +count);
+      }
+    },
+  },
+  computed: {
+    prepareOptions() {
+      return this.options.map((item) => {
+        return { id: item, title: item };
+      });
+    },
+  },
+  components: {
+    IbLabel,
+    IbSelect,
+  },
+};
+</script>
+<style lang="scss">
+.report-limit-selector {
+  .report-limit-selector-select {
+    .tree-choice {
+      width: auto;
+    }
+  }
+}
+</style>

package/src/components/Pagination/Pagination.stories.js

@@ -0,0 +1,54 @@
+import IbPagination from "./Pagination.vue";
+import IbLimitSelector from "./LimitSelector.vue";
+
+export default {
+  title: "Pagination",
+  component: IbPagination, IbLimitSelector,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Pagination has component LimitSelector, and have callback @select and @select-limit to change page with rows",
+      },
+    },
+  },
+  argTypes: {
+    limitSelector: {
+      control: { type: "select" },
+      options: [10, 25, 50, 100],
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { IbPagination },
+  setup() {
+    return { args };
+  },
+  template: '<ib-pagination v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+
+Default.args = {
+  current: 1,
+  countRows: 222,
+  limitSelector: 25,
+  labelInput: "Go to:",
+  labelSelect: "Rows per page:",
+};
+
+const LimitTemplate = (args) => ({
+  components: { IbLimitSelector },
+  setup() {
+    return { args };
+  },
+  template: '<ib-limit-selector v-bind="args" />',
+});
+
+export const LimitSelector = LimitTemplate.bind({});
+
+LimitSelector.args = {
+  value: 25,
+  labelSelect: "Rows per page:",
+};