@avakhula/ui 0.0.10

package/src/components/SplitButton/SplitButton.vue

@@ -0,0 +1,132 @@
+<template>
+  <div :class="classes">
+    <button
+      :disabled="disabled"
+      v-if="!isLink"
+      class="split-button-main"
+      v-bind="mainButtonAttrs"
+    >
+      {{ content }}
+    </button>
+
+    <a
+      v-else
+      :disabled="disabled"
+      class="split-button-main"
+      :class="{ disabled }"
+      v-bind="mainButtonAttrs"
+    >
+      {{ content }}
+    </a>
+
+    <ib-dropdown-list :disabled="disabled" :closeOnClick="true">
+      <template #trigger>
+        <button :disabled="disabled" class="split-button-menu-trigger">
+          <ib-icon name="chevron-down-outline" />
+        </button>
+      </template>
+
+      <template #body>
+        <div ref="list">
+          <slot></slot>
+        </div>
+      </template>
+    </ib-dropdown-list>
+  </div>
+</template>
+
+<script>
+import { splitButtonKindOptions } from "./constants";
+import generateUID from "../../helpers/generateUID"
+import IbDropdownList from "../Dropdown/DropdownList.vue";
+import IbIcon from "../Icon.vue";
+
+export default {
+  name: "IbSplitButton",
+  props: {
+    id: {
+      type: String,
+      default: () => generateUID(),
+    },
+    kind: {
+      type: String,
+      default: splitButtonKindOptions.common,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    saveSelected: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  mounted() {
+    this.childList = Array.from(this.$refs.list.children);
+
+    this.childList?.forEach((element, idx) => {
+      element.addEventListener("click", () => {
+        this.childList[this.activeElemIdx].classList.remove("active");
+
+        if (this.saveSelected) {
+          this.activeElemIdx = idx;
+          localStorage.setItem(`split-button-${this.id}`, idx);
+        }
+      });
+    });
+
+    if (this.saveSelected) {
+      const activeItemIdx = localStorage.getItem(`split-button-${this.id}`);
+      if (activeItemIdx) {
+        this.activeElemIdx = activeItemIdx;
+      }
+    }
+
+    this.setActiveItem();
+  },
+  data() {
+    return {
+      activeElemIdx: 0,
+      content: "",
+      mainButtonAttrs: {},
+      isLink: false,
+      childList: [],
+    };
+  },
+  components: {
+    IbIcon,
+    IbDropdownList,
+  },
+  methods: {
+    setActiveItem() {
+      this.mainButtonAttrs = this.$slots.default()[this.activeElemIdx].props;
+
+      if (this.mainButtonAttrs && "href" in this.mainButtonAttrs) {
+        this.isLink = true;
+      } else {
+        this.isLink = false;
+      }
+
+      this.childList[this.activeElemIdx].classList.add("active");
+      this.content = this.childList[this.activeElemIdx].textContent;
+    },
+  },
+  computed: {
+    classes() {
+      const classList = ["split-button"];
+      classList.push(`split-button-${this.kind}`);
+
+      return classList;
+    },
+  },
+  watch: {
+    activeElemIdx() {
+      this.setActiveItem();
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import "./splitButton.scss";
+</style>

package/src/components/SplitButton/SplitButtonItem.vue

@@ -0,0 +1,34 @@
+<template>
+  <component
+    :is="href.length ? 'a' : 'button'"
+    v-bind="attrs"
+    class="ib-dropdown-item"
+  >
+    <slot></slot>
+  </component>
+</template>
+
+<script>
+export default {
+  props: {
+    href: {
+      type: String,
+      default: "",
+    },
+  },
+  computed: {
+    attrs() {
+      const attrsList = {};
+      if (this.href.length) {
+        attrsList.href = this.href;
+      }
+
+      return attrsList;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "../../assets/scss/mixins/dropdown-list-item.scss";
+@include DropdownListItem;
+</style>

package/src/components/SplitButton/constants.js

@@ -0,0 +1,4 @@
+export const splitButtonKindOptions = {
+  common: "common",
+  danger: "danger",
+};

package/src/components/SplitButton/readme.mdx

@@ -0,0 +1,77 @@
+# IbSplitButton
+
+import { Story, Canvas } from "@storybook/addon-docs";
+
+Split buttons are for presenting several related tools if one option is used most frequently. Making the most commonly accessed option a default lowers the interaction cost to use that option since it removes the need to open the menu before selecting the item.
+
+A split button is a button with two components: a label and an arrow; clicking on the label selects a default action, and clicking on the arrow opens up a list of other possible actions.
+
+It is a hybrid between a [button](?path=/docs/button--default) and a [drop-down menu](?path=/docs/dropdown--default): it groups related commands together into a dropdown, but also offers one-click access to a default choice that doesn’t require opening the menu.
+
+### When to use
+
+- Use Split Button for grouping commands and tools.
+
+### When not to use
+
+- A Split Buttons should not be used for navigation.
+
+### Default
+
+<Canvas>
+  <Story id="splitbutton--default" />
+</Canvas>
+
+### Props
+
+| Name         | type    | Default Value            | Description                                                                                         |
+| ------------ | ------- | ------------------------ | --------------------------------------------------------------------------------------------------- |
+| kind         | String  | primary                  | The kind of button to be displayed. Possible values are: `common` or `danger`.                      |
+| disabled     | Boolean | false                    | Whether the button is disabled or not.                                                              |
+| saveSelected | Boolean | false                    | Change main button to last clicked options. Vety import set unique id                               |
+| id           | String  | auto-generated unique ID | It is necessary that the button has a unique identifier, it's very important to save Selected logic |
+
+### Slots
+
+| Slot name | Description                                  |
+| --------- | -------------------------------------------- |
+| default   | This slot accepts `<ib-split-button-item>`-s |
+
+### Events
+
+This component not suports events.
+
+## IbSplitButtonItem
+
+This component need used inside of Split-button.
+
+### Props
+
+| Name | type   | Default Value | Description                                                          |
+| ---- | ------ | ------------- | -------------------------------------------------------------------- |
+| href | String | ''            | Defines the element type as a link and adds the href attribute to it. |
+
+### Example 
+```html
+<script>
+  export default {
+    methods: {
+      onClick(event) {
+        console.log("click on first item");
+      },
+      onClick2(event) {
+        console.log("click on second item");
+      },
+    },
+    components: { IbSplitButton, IbSplitButtonItem}
+  };
+</script>
+
+<template>
+ <ib-split-button>
+    <ib-split-button-item @click="onClick">Button 1</ib-split-button-item>
+    <ib-split-button-item @click="onClick2">Button 2</ib-split-button-item>
+    <ib-split-button-item href="#">Link 3</ib-split-button-item>
+  </ib-split-button>`,
+</template>
+```

package/src/components/SplitButton/splitButton.scss

@@ -0,0 +1,161 @@
+@import "../../assets/scss/variables/colors.scss";
+@import "../../assets/scss/typography.scss";
+@import "../../assets/scss/mixins.scss";
+
+$split-button-color: $white;
+$split-button-disabled-color: $neutral-500;
+$split-button-disabled-bg: $gray-100;
+
+// Common styles
+$common-split-button-bg: $blue-800;
+$common-split-button-focus-bg: $blue-800;
+$common-split-button-hover-bg: $blue-700;
+$common-split-button-active-bg: $blue-900;
+
+$danger-split-button-bg: $red-800;
+$danger-split-button-focus-bg: $red-800;
+$danger-split-button-hover-bg: $red-700;
+$danger-split-button-active-bg: $red-900;
+
+.split-button {
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: fit-content;
+
+  .ib-dropdown {
+    position: initial;
+  }
+
+  &-menu-trigger {
+    border: none;
+    border-radius: 0 4px 4px 0;
+    cursor: pointer;
+    height: 36px;
+    width: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    margin: 0;
+    margin-left: 1px;
+    color: $split-button-color;
+    font-size: 16px;
+    transition: background-color 0.3s;
+
+     &:focus {
+      @include focus(1px);
+      position: relative;
+      z-index: 100;
+     }
+  }
+
+
+  &-main {
+    @include Ib-H4-medium;
+    color: $split-button-color;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    padding: 0 15px;
+    border-radius: 4px 0 0 4px;
+    border: none;
+    transition: background-color 0.3s;
+
+    &:focus {
+      @include focus(2px);
+      position: relative;
+      z-index: 100;
+    }
+  }
+
+  &.split-button-common {
+    .split-button-main {
+      background-color: $common-split-button-bg;
+
+      &:hover {
+        background-color: $common-split-button-hover-bg;
+      }
+
+      &:active {
+        background-color: $common-split-button-active-bg;
+      }
+
+      &:focus {
+        background-color: $common-split-button-focus-bg;
+      }
+
+      &.disabled,
+      &:disabled {
+        background-color: $split-button-disabled-bg;
+        color: $split-button-disabled-color;
+      }
+    }
+
+    .split-button-menu-trigger {
+      background-color: $common-split-button-bg;
+
+      &:hover {
+        background-color: $common-split-button-hover-bg;
+      }
+
+      &:active {
+        background-color: $common-split-button-active-bg;
+      }
+
+      &:focus {
+        background-color: $common-split-button-focus-bg;
+      }
+      &.disabled,
+      &:disabled {
+        background-color: $split-button-disabled-bg;
+        color: $split-button-disabled-color;
+      }
+    }
+  }
+
+  &.split-button-danger {
+    .split-button-main {
+      background-color: $danger-split-button-bg;
+
+      &:hover {
+        background-color: $danger-split-button-hover-bg;
+      }
+
+      &:active {
+        background-color: $danger-split-button-active-bg;
+      }
+
+      &:focus {
+        background-color: $danger-split-button-focus-bg;
+      }
+      &.disabled,
+      &:disabled {
+        background-color: $split-button-disabled-bg;
+        color: $split-button-disabled-color;
+      }
+    }
+
+    .split-button-menu-trigger {
+      background-color: $danger-split-button-bg;
+
+      &:hover {
+        background-color: $danger-split-button-hover-bg;
+      }
+
+      &:active {
+        background-color: $danger-split-button-active-bg;
+      }
+
+      &:focus {
+        background-color: $danger-split-button-focus-bg;
+      }
+
+      &:disabled{
+        background-color: $split-button-disabled-bg;
+        color: $split-button-disabled-color;
+      }
+    }
+  }
+}

package/src/components/StatusIndicator/StatusIndicator.stories.js

@@ -0,0 +1,40 @@
+import IbStatusIndicator from "./StatusIndicator.vue";
+import { StatusIndicatorType } from "./constants";
+import readme from "./readme.mdx";
+
+export default {
+  title: "Status Indicator",
+  component: IbStatusIndicator,
+  argTypes: {
+    type: {
+      control: { type: "select" },
+      options: Object.values(StatusIndicatorType),
+      description:
+        'The type of status indicator to display. This prop determines the color and icon of the status indicator. Possible values are "new", "success", "error", "warning", "incomplete", "inProgress", "loading" and "disconnect".',
+    },
+    default: {
+      description:
+        "The component includes a default slot that can be used to provide additional content to display alongside the status indicator.",
+    },
+  },
+  parameters: {
+    docs: {
+      page: readme,
+    },
+  },
+};
+
+export const Default = {
+  render: (args) => ({
+    components: { IbStatusIndicator },
+    setup() {
+      return { args };
+    },
+    template: `<ib-status-indicator v-bind="args">
+    <span v-html="args.default"></span>
+    </ib-status-indicator>`,
+  }),
+  args: {
+    default: "default",
+  },
+};

package/src/components/StatusIndicator/StatusIndicator.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="status-indicator">
+    <div class="status-indicator-icon" :class="type" v-html="icons[type]"></div>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import { icons } from "./icons";
+
+export default {
+  props: {
+    type: {
+      type: String,
+      default: "success",
+    },
+  },
+  data() {
+    return {
+      icons: icons,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/scss/variables/colors.scss";
+@import "../../assets/scss//typography.scss";
+
+@keyframes loader {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(-360deg);
+  }
+}
+
+.status-indicator {
+  @include Ib-H4-regular;
+  display: inline-flex;
+  align-items: center;
+
+  .status-indicator-icon {
+    margin-right: 5px;
+
+    &.loading {
+      animation: loader 1.5s linear infinite;
+    }
+  }
+}
+</style>

package/src/components/StatusIndicator/constants.js

@@ -0,0 +1,10 @@
+export const StatusIndicatorType = {
+  new: "new",
+  success: "success",
+  error: "error",
+  warning: "warning",
+  incomplete: "incomplete",
+  inProgress: "inProgress",
+  loading: "loading",
+  disconnect: "disconnect",
+};

package/src/components/StatusIndicator/icons.js

@@ -0,0 +1,48 @@
+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>
+  `,
+
+  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>
+  `,
+
+  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>
+  `,
+
+  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>
+  `,
+
+  incomplete: `
+  <svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.5 2.5C3.84315 2.5 2.5 3.84315 2.5 5.5C2.5 7.15685 3.84315 8.5 5.5 8.5C7.15685 8.5 8.5 7.15685 8.5 5.5C8.5 3.84315 7.15685 2.5 5.5 2.5ZM0.5 5.5C0.5 2.73858 2.73858 0.5 5.5 0.5C8.26142 0.5 10.5 2.73858 10.5 5.5C10.5 8.26142 8.26142 10.5 5.5 10.5C2.73858 10.5 0.5 8.26142 0.5 5.5Z" fill="#677788"/>
+  </svg>
+  `,
+
+  inProgress: `
+  <svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.5 0.5C2.73858 0.5 0.5 2.73858 0.5 5.5C0.5 8.26142 2.73858 10.5 5.5 10.5C8.26142 10.5 10.5 8.26142 10.5 5.5C10.5 2.73858 8.26142 0.5 5.5 0.5ZM2.5 5.5C2.5 3.84315 3.84315 2.5 5.5 2.5V5.5L7.62132 7.62132C7.07843 8.16421 6.32843 8.5 5.5 8.5C3.84315 8.5 2.5 7.15685 2.5 5.5Z" fill="#0060D6"/>
+  </svg>
+  `,
+
+  loading: `
+  <svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M5 2.5C3.34315 2.5 2 3.84315 2 5.5C2 7.15685 3.34315 8.5 5 8.5C6.65685 8.5 8 7.15685 8 5.5H10C10 8.26142 7.76142 10.5 5 10.5C2.23858 10.5 0 8.26142 0 5.5C0 2.73858 2.23858 0.5 5 0.5V2.5Z" fill="#0060D6"/>
+  </svg>
+  `,
+
+  disconnect: `
+    <svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M4.20658 2.79237C4.59822 2.60495 5.03685 2.5 5.5 2.5C7.15685 2.5 8.5 3.84315 8.5 5.5C8.5 5.96315 8.39505 6.40178 8.20763 6.79342L9.6716 8.25739C10.1951 7.46696 10.5 6.51908 10.5 5.5C10.5 2.73858 8.26142 0.5 5.5 0.5C4.48092 0.5 3.53304 0.804877 2.74261 1.3284L4.20658 2.79237ZM2.79237 4.20658L1.3284 2.74261C0.804877 3.53304 0.5 4.48092 0.5 5.5C0.5 8.26142 2.73858 10.5 5.5 10.5C6.51908 10.5 7.46696 10.1951 8.25739 9.6716L6.79342 8.20763C6.40178 8.39505 5.96315 8.5 5.5 8.5C3.84315 8.5 2.5 7.15685 2.5 5.5C2.5 5.03685 2.60495 4.59822 2.79237 4.20658Z" fill="#677788"/>
+  </svg>
+  `,
+};

package/src/components/StatusIndicator/readme.mdx

@@ -0,0 +1,21 @@
+import { Story, Canvas, Controls } from "@storybook/addon-docs";
+import * as StatusIndicatorStories from "./StatusIndicator.stories";
+
+# IbStatusIndicator
+
+Shape indicators combine color shape and text to indicate the status. The shape depends on the status type.
+
+### Same shape, different color
+
+The status shapes naturally allow more room for interpretation than the status icons. Certain shapes can take on different colors for different circumstances. However, NEVER use the same shape, in different colors, within the same experience.
+
+### Best practice
+
+- Do place shape indicators before labels. Do not place shape indicators after the labels to avoid pushing them out of alignment.
+- Do use shape, color, and status labels to improve scannability. Avoid using only color and status labels to differentiate your content.
+
+
+### Default
+<Canvas of={StatusIndicatorStories.Default} />
+
+<Controls />

package/src/components/Table/Cells/Cell.vue

@@ -0,0 +1,71 @@
+<template>
+  <td
+    @resize="freezeCol"
+    class="ib-cell"
+    v-bind="this.attr"
+  >
+    <div class="cell">
+      <slot></slot>
+    </div>
+  </td>
+</template>
+
+<script>
+export default {
+  name: "IbCell",
+  props: {
+    fixed: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      attr: {},
+    };
+  },
+  mounted() {
+    if (this.fixed) {
+      this.freezeCol();
+    }
+  },
+  methods: {
+    freezeCol() {
+      const elRect = this.$el.getBoundingClientRect();
+      const trRect = this.$el.closest("tr").getBoundingClientRect();
+      if (!this.attr.style) this.attr.style = {};
+      this.attr.style.minWidth = `${elRect.width}px`;
+      this.attr.style.left = `${elRect.left - trRect.left}px`;
+      this.attr.class += " fixed";
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../../assets/scss/typography.scss";
+@import "../../../assets/scss/variables/colors.scss";
+
+.ib-cell {
+  @include Ib-H4-regular;
+  padding: 0 15px;
+  height: 60px;
+  color: $neutral-900;
+  border-bottom: 1px solid $gray-200;
+  &.fixed {
+    position: sticky;
+    box-shadow: 2px 0px 2px rgba(80, 80, 80, 0.1);
+  }
+
+  &:last-child {
+    &.fixed {
+      box-shadow: -2px 0px 2px rgba(80, 80, 80, 0.1);
+    }
+  }
+  .cell {
+    display: flex;
+    justify-content: center;
+    width: max-content;
+  }
+}
+</style>