@avakhula/ui 0.0.10

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

@@ -0,0 +1,48 @@
+<template>
+  <ib-cell :fixed="fixed" class="ib-checkbox-cell">
+    <ib-checkbox :is-checked="isChecked"></ib-checkbox>
+  </ib-cell>
+</template>
+
+<script>
+import IbCell from "./Cell.vue";
+import IbCheckbox from "../../Form/Checkbox/Checkbox.vue";
+export default {
+  name: "IbCheckboxCell",
+  props: {
+    isChecked: {
+      type: Boolean,
+      default: false,
+    },
+    fixed: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  components: {
+    IbCell,
+    IbCheckbox,
+  },
+};
+</script>
+
+<style lang="scss">
+.ib-checkbox-cell {
+  width: 50px;
+  max-width: 50px;
+
+  .ib-checkbox {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  + .ib-cell {
+    padding-left: 0;
+
+    .cell {
+      justify-content: flex-start;
+    }
+  }
+}
+</style>

package/src/components/Table/Row.vue

@@ -0,0 +1,26 @@
+<template>
+  <tr class="ib-tr">
+    <slot ref="row"></slot>
+  </tr>
+</template>
+
+<script>
+export default {
+  name: "IbRow",
+};
+</script>
+
+<style lang="scss">
+@import "../../assets/scss/variables/colors.scss";
+.ib-tr {
+  .ib-cell {
+    background-color: $white;
+  }
+
+  &:nth-child(even) {
+    .ib-cell {
+      background-color: $gray-50;
+    }
+  }
+}
+</style>

package/src/components/Table/Table.stories.js

@@ -0,0 +1,59 @@
+import IbTable from "./Table.vue";
+import IbRow from "./Row.vue";
+import IbCell from "./Cells/Cell.vue";
+import IbCheckboxCell from "./Cells/CheckboxCell.vue";
+
+export default {
+  title: "Table/Table",
+  component: IbTable,
+};
+
+const Template = (args) => ({
+  components: { IbTable, IbRow, IbCell, IbCheckboxCell },
+  setup() {
+    const users = ["user1", "user2", "user3", "user4", "user5"];
+    return { users, args };
+  },
+  template: `
+  <ib-table v-bind="args">
+    <template #tbody>
+      <ib-row v-for="(user, index) in users">
+        <ib-checkbox-cell />
+        <ib-cell>{{user}}</ib-cell>
+        <ib-cell>
+          <a href="#" class="ib-standalone-link">{{user}}@email.com</a>
+        </ib-cell>
+        <ib-cell>Teacher</ib-cell>
+        <ib-cell>2021-11-16</ib-cell>
+      </ib-row>
+    </template>
+  </ib-table>`,
+});
+
+export const Default = Template.bind({});
+
+const TemplateWithFreeze = (args) => ({
+  components: { IbTable, IbRow, IbCell, IbCheckboxCell },
+  setup() {
+    const users = ["user1", "user2", "user3", "user4", "user5"];
+    return { users, args };
+  },
+  template: `
+  <ib-table v-bind="args">
+    <template #tbody>
+      <ib-row v-for="(user, index) in users">
+        <ib-checkbox-cell fixed/>
+        <ib-cell fixed>{{user}}</ib-cell>
+        <ib-cell>
+          <a href="#" class="ib-standalone-link">{{user}}@email.com</a>
+        </ib-cell>
+        <ib-cell>Teacher</ib-cell>
+        <ib-cell>Synced</ib-cell>
+        <ib-cell>Non editing teacher</ib-cell>
+        <ib-cell>2021-11-16</ib-cell>
+      </ib-row>
+    </template>
+  </ib-table>`,
+});
+
+export const DefaultWithFixedCol = TemplateWithFreeze.bind({});

package/src/components/Table/Table.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="ib-table-wrapper">
+    <table class="ib-table">
+      <template v-if="hasThead">
+        <slot name="thead"></slot>
+      </template>
+
+      <tbody>
+        <slot name="tbody"></slot>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "IbTable",
+  computed: {
+    hasThead() {
+      return !!this.$slots.thead;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.ib-table-wrapper {
+  overflow: auto;
+}
+.ib-table {
+  overflow: auto;
+  width: 100%;
+  border-collapse: unset;
+  border-spacing: 0;
+}
+</style>

package/src/components/Tabs/Tab.vue

@@ -0,0 +1,37 @@
+<template>
+  <div v-show="isTabActive">
+    <slot></slot>
+  </div>
+</template>
+<script>
+export default {
+  name: "IbTab",
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    id: {
+      type: String,
+      required: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    initialized: {
+      type: Boolean,
+      default: false,
+    },
+    name: {
+      type: String,
+      default: null,
+    },
+  },
+  computed: {
+    isTabActive() {
+      return this.$parent.selectedTab === this.id;
+    },
+  },
+};
+</script>

package/src/components/Tabs/TabDropdown.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="wrapper-tab-link dropdown-tab">
+    <ib-dropdown-list :disabled="isDisabledDropdown" :close-on-click="true">
+      <template #trigger>
+        <span
+          class="tab-link"
+          :class="{
+            active: selectedTabByDropdown === selectedTab || isActive,
+            disabled: isDisabledDropdown,
+          }"
+          :tabindex="isDisabledDropdown ? -1 : 0"
+        >
+          {{ tabs.name }}
+          <ib-icon name="chevron-down"></ib-icon>
+        </span>
+      </template>
+
+      <template #body>
+        <ib-dropdown-item
+          v-for="(tab, index) in tabs.tabs"
+          :key="index"
+          :checked="tab.id === selectedTab"
+          :href="createHref(tab.id)"
+          :tabindex="tab.disabled ? -1 : 0"
+          :class="{
+            disabled: tab.disabled,
+          }"
+          class="dropdown-tab-item"
+          target="_self"
+          @click="selectTab(tab.id)"
+        >
+          {{ tab.title }}
+        </ib-dropdown-item>
+      </template>
+    </ib-dropdown-list>
+  </div>
+</template>
+<script>
+import IbDropdownList from "../Dropdown/DropdownList.vue";
+import IbDropdownItem from "../Dropdown/DropdownItem.vue";
+import IbIcon from "../Icon.vue";
+import getHrefFromId from "../../helpers/getHrefFromID";
+
+export default {
+  name: "IbTabDropdown",
+  props: {
+    tabs: {
+      rype: Object,
+      default: {},
+    },
+    selectedTab: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      selectedTabByDropdown: "",
+      isDisabledDropdown: this.setDisabledTab(),
+    };
+  },
+  methods: {
+    createHref(id) {
+      return getHrefFromId(id);
+    },
+    selectTab(id) {
+      this.selectedTabByDropdown = id;
+      this.$emit("select-tab", id);
+    },
+    setDisabledTab() {
+      return this.tabs.tabs.every((item) => item.disabled);
+    },
+  },
+  computed: {
+    isActive() {
+      for (let tab of this.tabs.tabs) {
+        if (tab.id === this.selectedTab) {
+          return true;
+        }
+      }
+      return false;
+    },
+  },
+  components: {
+    IbDropdownList,
+    IbDropdownItem,
+    IbIcon,
+  },
+};
+</script>
+<style lang="scss">
+@import "./tabs.scss";
+</style>

package/src/components/Tabs/Tabs.stories.js

@@ -0,0 +1,57 @@
+import IbTabs from "./Tabs.vue";
+import IbTab from "./Tab.vue";
+
+export default {
+  title: "Tabs",
+  component: IbTab,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "We must paste our component with content in our tabs wrapper - <ib-tabs>, if there value props name - than tab creted dobdown item",
+      },
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { IbTabs, IbTab },
+  setup() {
+    return { args };
+  },
+  template: `
+  <ib-tabs>
+    <ib-tab v-bind="args" id="my-profile" title="My profile">
+      <p>My profile content</p>
+    </ib-tab>
+    <ib-tab
+      id="account-settings"
+      title="Account settings"
+    >
+      <p>Account settings content</p>
+    </ib-tab>
+    <ib-tab id="connections" title="Connections" disabled="true">
+      <p>Connections</p>
+    </ib-tab>
+    <ib-tab
+      name="Users and Roles"
+      id="users"
+      title="Users"
+      dropdown="true"
+    >
+      <p>Users content</p>
+    </ib-tab>
+    <ib-tab
+      name="Users and Roles"
+      id="roles"
+      title="Roles"
+      dropdown="true"
+      disabled="true"
+    >
+    <p>Roles content 2</p>
+  </ib-tab>
+</ib-tabs>
+  `,
+});
+
+export const Default = Template.bind({});

package/src/components/Tabs/Tabs.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="tabs">
+    <ul class="tabs-list">
+      <li class="tab-item" v-for="(tab, index) in tabs" :key="index">
+        <div v-if="!tab.name" class="wrapper-tab-link">
+          <a
+            class="tab-link"
+            :class="{
+              active: selectedTab === tab.id,
+              disabled: tab.disabled,
+            }"
+            :href="createHref(tab.id)"
+            :tabindex="tab.disabled ? -1 : 0"
+            @click="selectTab(tab.id)"
+            target="_self"
+          >
+            {{ tab.title }}
+          </a>
+        </div>
+        <ib-tab-dropdown
+          v-else
+          :selected-tab="selectedTab"
+          :tabs="tab"
+          @select-tab="selectTab"
+        >
+        </ib-tab-dropdown>
+      </li>
+    </ul>
+    <div class="tabs-content" ref="tabHandler">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script>
+import IbTabDropdown from "./TabDropdown.vue";
+import getHrefFromId from "../../helpers/getHrefFromID";
+export default {
+  name: "IbTabs",
+  data() {
+    return {
+      tabs: [],
+      selectedTab: "",
+    };
+  },
+  created() {
+    this.$slots.default().forEach((item) => {
+      if (!item.props.name) {
+        this.tabs.push(item.props);
+      } else {
+        const findIndex = this.tabs.findIndex(
+          (tab) => tab.name === item.props.name
+        );
+
+        if (findIndex !== -1) {
+          this.tabs[findIndex].tabs.push(item.props);
+        } else {
+          const itemProps = { name: item.props.name, tabs: [item.props] };
+          this.tabs.push(itemProps);
+        }
+      }
+    });
+
+    for (let tab of this.tabs) {
+      if (!tab.disabled) {
+        if (tab.tabs) {
+          for (let tabItem of tab.tabs) {
+            if (!tabItem.disabled) {
+              this.selectTab(tabItem.id);
+              return;
+            }
+          }
+        } else {
+          this.selectTab(tab.id);
+          return;
+        }
+      }
+    }
+  },
+  methods: {
+    createHref(id) {
+      return getHrefFromId(id);
+    },
+    selectTab(id) {
+      this.selectedTab = id;
+    },
+  },
+  components: {
+    IbTabDropdown,
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "./tabs.scss";
+</style>

package/src/components/Tabs/tabs.scss

@@ -0,0 +1,157 @@
+@import "../../assets/scss/variables/colors.scss";
+@import "../../assets/scss/typography.scss";
+@import "../../assets/scss/mixins.scss";
+@import "../../assets/scss/reset.scss";
+
+.tabs {
+
+  .tabs-list {
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    @include Ib-H4-medium;
+    position: relative;
+    margin-bottom: 100px;
+
+    &::after {
+      content: '';
+      width: 100%;
+      height: 1px;
+      bottom: 0;
+      position: absolute;
+      background-color: $gray-300;
+      z-index: -1;
+    }
+    
+    .tab-item {
+      position: relative;
+      margin: 0 15px;
+
+      .ib-dropdown-item.disabled.dropdown-tab-item {
+        color: $neutral-500;
+        pointer-events: none;
+        opacity: 0.5;
+      }
+
+      &:nth-child(1) {
+        margin-left: 0;
+      }
+      &:nth-last-child(1) {
+        margin-right: 0;
+      }
+
+      .tab-link:not(.dropdown-tab-item) {
+        height: 36px;
+      }
+
+      .tab-link:not(.dropdown-tab-item) {
+        color: $neutral-600;
+      }
+
+      .tab-link {
+        color: inherit;
+      }
+
+      .tab-link {
+        text-decoration: none;
+        position: relative;
+        transition: color .3s;
+        display: flex;
+        align-items: center;
+        position: relative;
+
+        .ib-icon {
+          color: $neutral-900;
+        }
+
+        &::after {
+          content: '';
+          width: 100%;
+          height: 3px;
+          bottom: 0;
+          z-index: 2;
+          left: 50%;
+          transform: translateX(-50%);
+          position: absolute;
+          background-color: transparent;
+          border-radius: 2px 2px 0px 0px;
+          transition: background-color .3s;
+        }
+
+        &:hover{
+          cursor: pointer;
+          color: $blue-700;
+          transition: all .3s;
+
+          .ib-icon {
+            color: $blue-700;
+            transition: color .3s;
+          }
+        }
+
+        &:active {
+          color: $blue-900;
+          transition: color .3s;
+
+          .ib-icon {
+            color: $blue-900;
+            transition: color .3s;
+          }
+        }
+
+        &.active{
+          color: $neutral-900;
+
+          &::after {
+            background-color: $blue-700;
+            transition: color .3s;
+          }
+
+          .ib-icon {
+            transition: color .3s;
+          }
+        }
+
+        &.disabled {
+          color: $neutral-500;
+          pointer-events: none;
+          opacity: 0.5;
+        }
+
+        &:focus {
+          @include focus(2px, $blue-700);
+          border-radius: 4px;
+
+          .tab-link .ib-icon {
+            .ib-icon {
+              color: $blue-700;
+              transition: color .3s;
+            }
+          }
+        }
+      }
+
+      .wrapper-tab-link.dropdown-tab {
+
+        .dropdown-trigger {
+          display: flex;
+          align-items: center;
+
+          &.active {
+            .tab-link .ib-icon {
+              transform: rotate(-180deg);
+              transition: all .3s;
+            }
+          }
+
+          .tab-link .ib-icon {
+            margin-top: 3px;
+            margin-left: 6px;
+            transition: all .3s;
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/TagPill/TagPill.stories.js

@@ -0,0 +1,30 @@
+import ibTagPill from "./TagPill.vue";
+import { tagPillSTatuses } from "./constants";
+import readme from "./readme.mdx";
+
+export default {
+  title: "Tag Pill",
+  component: ibTagPill,
+  argTypes: {
+    status: {
+      control: { type: "select" },
+      options: Object.values(tagPillSTatuses),
+    },
+  },
+  parameters: {
+    docs: {
+      page: readme,
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { ibTagPill },
+  setup() {
+    return { args };
+  },
+  template: '<ib-tag-pill v-bind="args">Signs with</ib-tag-pill>',
+});
+
+export const Default = Template.bind({});
+Default.args = {};