@avakhula/ui 0.0.32 → 0.0.34-4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avakhula/ui",
-  "version": "0.0.32",
+  "version": "0.0.344.1",
   "main": "dist/index.js",
   "module": "dist/index.umd.cjs",
   "source": "src/index.js",
@@ -15,8 +15,8 @@
     "build": "vite build",
     "preview": "vite preview",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --ignore-path .gitignore",
-    "test:unit": "vitest",
-    "test:unit:coverage": "vitest run --coverage",
+    "test": "vitest",
+    "test:coverage": "vitest run --coverage",
     "storybook": "storybook dev 6006",
     "build-storybook": "storybook build"
   },
@@ -29,23 +29,23 @@
     "@babel/core": "^7.20.7",
     "@babel/preset-env": "^7.21.4",
     "@rushstack/eslint-patch": "^1.1.4",
-    "@storybook/addon-a11y": "^7.0.11",
-    "@storybook/addon-actions": "^7.0.11",
-    "@storybook/addon-docs": "^7.0.11",
-    "@storybook/addon-essentials": "^7.0.11",
-    "@storybook/addon-interactions": "^7.0.11",
-    "@storybook/addon-links": "^7.0.11",
-    "@storybook/addon-mdx-gfm": "^7.0.11",
-    "@storybook/testing-library": "^0.1.0",
-    "@storybook/vue3": "^7.0.11",
-    "@storybook/vue3-vite": "^7.0.11",
+    "@storybook/addon-a11y": "^7.1.0",
+    "@storybook/addon-actions": "^7.1.0",
+    "@storybook/addon-docs": "^7.1.0",
+    "@storybook/addon-essentials": "^7.1.0",
+    "@storybook/addon-interactions": "^7.1.0",
+    "@storybook/addon-links": "^7.1.0",
+    "@storybook/addon-mdx-gfm": "^7.1.0",
+    "@storybook/testing-library": "^0.2.0",
+    "@storybook/vue3": "^7.1.0",
+    "@storybook/vue3-vite": "^7.1.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitest/coverage-c8": "^0.28.4",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/test-utils": "^2.2.10",
     "babel-loader": "^8.3.0",
     "eslint": "^8.22.0",
-    "eslint-plugin-storybook": "^0.6.12",
+    "eslint-plugin-storybook": "^0.6.13",
     "eslint-plugin-vue": "^9.3.0",
     "flatpickr": "^4.6.13",
     "jsdom": "^21.1.0",
@@ -56,7 +56,7 @@
     "react-dom": "^18.2.0",
     "sass": "^1.57.1",
     "sass-loader": "^13.2.0",
-    "storybook": "^7.0.11",
+    "storybook": "^7.1.0",
     "vite": "^4.0.0",
     "vitest": "^0.28.4",
     "vue-loader": "^16.8.3",

package/src/App.vue

@@ -1,32 +1,145 @@
 <template>
-  test
-  <ib-panel>
-    <template #title>
-      Some title
+  <ib-select :options="opt">
+    <template v-slot:triggerContent="{ selectedCount }">
+        {{ selectedCount }}
     </template>
-    <template #head-content>Some long long description</template>
-    <template #body>
-      <p>tests</p>
-      <p>tests</p>
-      <p>tests</p>
-      <p>tests</p>
-      <p>tests</p>
-      <p>tests</p>
-      <p>tests</p>
-      <p>tests</p>
-      <p>tests</p>
-    </template>
-  </ib-panel>
+  </ib-select>
+
+
 </template>
 
 <script>
-// import IbPanel from "./components/Panel/Panel.vue"
-import { IbPanel } from "./index";
+import IbSelect from "./components/TreeSelect/Select.vue";
+import label from "@/components/Form/Label/Label.vue";
+import {IbCheckboxGroup} from "./index.js";
+import {IbRadio} from "./index.js";
+const testData1 = [
+  {
+    id: "1",
+    title: "A Education",
+    is_category: true,
+    initiallyVisible: true,
+    visible: true,
+    isDisabled: true,
+    checked: false,
+    isChildrenVisible: false,
+  },
+  {
+    id: "2",
+    title: "Education 2",
+    is_category: true,
+    initiallyVisible: true,
+    visible: true,
+    isDisabled: true,
+    checked: false,
+    isChildrenVisible: true,
+  },
+  {
+    id: "3",
+    title: "Education 3",
+    is_category: true,
+    initiallyVisible: true,
+    visible: true,
+    isDisabled: false,
+    checked: false,
+    isChildrenVisible: true,
+  },
+  {
+    id: "4",
+    title: "Education 4",
+    is_category: true,
+    initiallyVisible: true,
+    visible: true,
+    isDisabled: false,
+    checked: false,
+    isChildrenVisible: true,
+  },
+  {
+    id: "5",
+    title: "Education 5",
+    is_category: true,
+    initiallyVisible: true,
+    visible: true,
+    isDisabled: true,
+    checked: false,
+    isChildrenVisible: true,
+  },
+
+  {
+    id: "6",
+    title: "Education 6",
+    is_category: true,
+    initiallyVisible: true,
+    visible: true,
+    isDisabled: false,
+    checked: false,
+    isChildrenVisible: true,
+  },
+
+  {
+    id: "7",
+    title: "Education 7",
+    is_category: true,
+    initiallyVisible: true,
+    visible: true,
+    isDisabled: false,
+    checked: false,
+    isChildrenVisible: true,
+  },
+
+  {
+    id: "8",
+    title: "Education 8",
+    is_category: true,
+    initiallyVisible: true,
+    visible: true,
+    isDisabled: false,
+    checked: false,
+    isChildrenVisible: true,
+  },
+  {
+    id: "9",
+    title: "Education 9",
+    is_category: true,
+    initiallyVisible: true,
+    visible: true,
+    isDisabled: false,
+    checked: false,
+    isChildrenVisible: true,
+  },
+  {
+    id: "10",
+    title: "Education 10",
+    is_category: true,
+    initiallyVisible: true,
+    visible: true,
+    isDisabled: false,
+    checked: false,
+    isChildrenVisible: true,
+  },
+  {
+    id: "11",
+    title: "Education 11",
+    is_category: true,
+    initiallyVisible: true,
+    visible: true,
+    isDisabled: true,
+    checked: false,
+    isChildrenVisible: true,
+  },
+];
 export default {
-  components: {
-    IbPanel,
+  computed: {
+    label() {
+      return label
+    }
+  },
+  data() {
+    return {
+      opt: testData1,
+      checked: '1'
+    }
   },
-};
-</script>
-<style lang="scss">
-</style>
+  components: {IbSelect, IbCheckboxGroup, IbRadio}
+}
+</script>

package/src/assets/scss/mixins/dropdown-list-item.scss

@@ -20,7 +20,14 @@
     cursor: pointer;
     transition: background-color 0.3s, border-color 0.3s;
     @include lineClamp(1);
-    
+    display: flex;
+    align-items: center;
+
+    ion-icon {
+      font-size: 16px;
+      margin-right: 15px;
+    }
+
     p {
       @include lineClamp(1);
     }

package/src/assets/scss/mixins/tooltip-position.scss

@@ -10,7 +10,7 @@
   }
 
   &.ib {
-    &-top-Left {
+    &-top-left {
       bottom: calc(100% + 5px);
       right: calc(50% - 14px);
 

package/src/assets/scss/variables/shadows.json

@@ -1,58 +1,42 @@
 [
-  {
-    "name": "$ib-shadow-m1",
-    "value": "0px 0px 1px rgba(0, 0, 0, 0.2)"
-  },
-  {
-    "name": "$ib-shadow-m2",
-    "value": "0px 0px 1px rgba(0, 0, 0, 0.25)"
-  },
-  {
-    "name": "$ib-shadow-m3",
-    "value": "0px 0px 1px rgba(0, 0, 0, 0.15), 0px 1px 5px rgba(0, 0, 0, 0.1)"
-  },
   {
     "name": "$ib-shadow-1",
-    "value": "0px 0px 10px rgba(49, 63, 80, 0.05)"
+    "value": "0px 0px 4px 0px rgba(49, 63, 80, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.15)"
   },
   {
     "name": "$ib-shadow-2",
-    "value": "0px 4px 4px rgba(49, 63, 80, 0.1)"
+    "value": "0px 1px 8px 0px rgba(49, 63, 80, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.15)"
   },
   {
     "name": "$ib-shadow-3",
-    "value": "0px 3px 10px rgba(49, 63, 80, 0.14)"
+    "value": "0px 2px 10px 0px rgba(49, 63, 80, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.15)"
   },
   {
     "name": "$ib-shadow-4",
-    "value": "0px 1px 10px rgba(49, 63, 80, 0.25)"
+    "value": "0px 4px 15px 0px rgba(49, 63, 80, 0.15), 0px 2px 3px 0px rgba(0, 0, 0, 0.15)"
   },
   {
     "name": "$ib-shadow-5",
-    "value": "0px 5px 15px rgba(80, 80, 80, 0.15)"
+    "value": "0px 8px 20px 0px rgba(49, 63, 80, 0.15), 0px 4px 4px 0px rgba(0, 0, 0, 0.15)"
   },
   {
     "name": "$ib-shadow-6",
-    "value": "0px 7px 20px rgba(49, 63, 80, 0.15)"
-  },
-  {
-    "name": "$ib-shadow-7",
-    "value": "0px 15px 25px rgba(49, 63, 80, 0.05)"
-  },
-  {
-    "name": "$ib-shadow-r",
-    "value": "-2px 0px 7px rgba(80, 80, 80, 0.1)"
+    "value": "0px 12px 25px 0px rgba(49, 63, 80, 0.15), 0px 6px 5px 0px rgba(0, 0, 0, 0.15)"
   },
   {
     "name": "$ib-shadow-r1",
-    "value": "-4px 0px 14px rgba(80, 80, 80, 0.1)"
+    "value": "-2px 0px 7px 0px rgba(80, 80, 80, 0.10)"
   },
   {
-    "name": "$ib-shadow-l",
-    "value": "2px 0px 7px rgba(80, 80, 80, 0.1)"
+    "name": "$ib-shadow-r2",
+    "value": "-4px 0px 14px 0px rgba(80, 80, 80, 0.10)"
   },
   {
     "name": "$ib-shadow-l1",
-    "value": "4px 0px 14px rgba(80, 80, 80, 0.1)"
+    "value": "2px 0px 7px 0px rgba(80, 80, 80, 0.10)"
+  },
+  {
+    "name": "$ib-shadow-l2",
+    "value": "4px 0px 14px 0px rgba(80, 80, 80, 0.10)"
   }
 ]

package/src/assets/scss/variables/shadows.scss

@@ -1,17 +1,12 @@
-$ib-shadow-m1: 0px 0px 1px rgba(0, 0, 0, 0.2);
-$ib-shadow-m2: 0px 0px 1px rgba(0, 0, 0, 0.25);
-$ib-shadow-m3: 0px 0px 1px rgba(0, 0, 0, 0.15), 0px 1px 5px rgba(0, 0, 0, 0.1);
+$ib-shadow-1: 0px 0px 4px 0px rgba(49, 63, 80, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
+$ib-shadow-2: 0px 1px 8px 0px rgba(49, 63, 80, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
+$ib-shadow-3: 0px 2px 10px 0px rgba(49, 63, 80, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
+$ib-shadow-4: 0px 4px 15px 0px rgba(49, 63, 80, 0.15), 0px 2px 3px 0px rgba(0, 0, 0, 0.15);
+$ib-shadow-5: 0px 8px 20px 0px rgba(49, 63, 80, 0.15), 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
+$ib-shadow-6: 0px 12px 25px 0px rgba(49, 63, 80, 0.15), 0px 6px 5px 0px rgba(0, 0, 0, 0.15);
 
-$ib-shadow-1: 0px 0px 10px rgba(49, 63, 80, 0.05);
-$ib-shadow-2: 0px 4px 4px rgba(49, 63, 80, 0.1);
-$ib-shadow-3: 0px 3px 10px rgba(49, 63, 80, 0.14);
-$ib-shadow-4: 0px 1px 10px rgba(49, 63, 80, 0.25);
-$ib-shadow-5: 0px 5px 15px rgba(80, 80, 80, 0.15);
-$ib-shadow-6: 0px 7px 20px rgba(49, 63, 80, 0.15);
-$ib-shadow-7: 0px 15px 25px rgba(49, 63, 80, 0.05);
+$ib-shadow-r1: -2px 0px 7px 0px rgba(80, 80, 80, 0.10);
+$ib-shadow-r2: -4px 0px 14px 0px rgba(80, 80, 80, 0.10);
 
-$ib-shadow-r: -2px 0px 7px rgba(80, 80, 80, 0.1);
-$ib-shadow-r1: -4px 0px 14px rgba(80, 80, 80, 0.1);
-
-$ib-shadow-l: 2px 0px 7px rgba(80, 80, 80, 0.1);
-$ib-shadow-l1: 4px 0px 14px rgba(80, 80, 80, 0.1);
+$ib-shadow-l1: 2px 0px 7px 0px rgba(80, 80, 80, 0.10);
+$ib-shadow-l2: 4px 0px 14px 0px rgba(80, 80, 80, 0.10);

package/src/components/Accordion/Accordion.scss

@@ -76,10 +76,13 @@ $content-bg: $gray-50;
   .accordion-content {
     border-radius: 0 0 4px 4px;
     border: 1px solid $content-border-color;
-    padding:10px 15px 15px;
     overflow: hidden;
     transition: height 0.3s, padding-top 0.3s, padding-bottom 0.3s;
     background-color: $content-bg;
+    
+    .accordion-content-wrapper {
+      padding: 10px 15px 15px;
+    }
   }
 
   &.active {

package/src/components/Accordion/Accordion.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="ib-accordion" :class="{ active: isActive }">
-    <button class="accordion-title" @click="onClick">
+    <button
+      class="accordion-title"
+      :id="'accordion' + uuid"
+      :aria-controls="'accordion-section-' + uuid"
+      :aria-expanded="isActive"
+      type="button"
+      @click.prevent="onClick"
+    >
       <slot name="title"></slot>
 
       <ib-icon class="chevron-icon" name="chevron-down-outline" />
@@ -12,14 +19,23 @@
       @after-enter="afterEnter"
       @leave="leave"
     >
-      <div v-show="isActive" class="accordion-content">
-        <slot name="content"></slot>
+      <div
+        v-show="isActive"
+        role="region"
+        class="accordion-content"
+        :id="'accordion-section-' + uuid"
+        :aria-labelledby="'accordion' + uuid"
+      >
+        <div class="accordion-content-wrapper">
+          <slot></slot>
+        </div>
       </div>
     </Transition>
   </div>
 </template>
 
 <script>
+import generateUID from "../../helpers/generateUID";
 import expandAnimation from "../../mixins/expandAnimation";
 import IbIcon from "../Icon.vue";
 
@@ -40,6 +56,7 @@ export default {
   data() {
     return {
       isActive: this.isOpen,
+      uuid: generateUID(),
     };
   },
   methods: {

package/src/components/Accordion/Acordion.spec.js

@@ -0,0 +1,75 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+import Accordion from "./Accordion.vue";
+
+const ROOT_CLASS = "ib-accordion";
+const ROOT_ACTIVE_CLASS = "active";
+
+let wrapper;
+const createComponent = (props = {}, slots = {}) => {
+  return mount(Accordion, {
+    propsData: props,
+    slots,
+  });
+};
+
+const findContent = () => wrapper.find(".accordion-content");
+const findTitle = () => wrapper.find(".accordion-title");
+
+describe("Accordion", () => {
+  it("Default render", () => {
+    wrapper = createComponent();
+
+    expect(wrapper.classes()).toContain(ROOT_CLASS);
+    expect(wrapper.classes()).not.toContain(ROOT_ACTIVE_CLASS);
+    expect(findContent().isVisible()).toBe(false);
+  });
+
+  it("Opened accordion render", () => {
+    wrapper = createComponent({
+      isOpen: true,
+    });
+
+    expect(wrapper.classes()).toContain(ROOT_CLASS);
+    expect(wrapper.classes()).toContain(ROOT_ACTIVE_CLASS);
+    expect(findContent().isVisible()).toBe(true);
+  });
+
+  it("Accordion with correct slot render", () => {
+    const TITLE_CONTENT = "Some title";
+    const BODY_CONTENT = "Some content";
+
+    wrapper = createComponent(
+      {},
+      {
+        title: TITLE_CONTENT,
+        content: BODY_CONTENT,
+      }
+    );
+    expect(findTitle().html()).toContain(TITLE_CONTENT);
+    expect(findContent().html()).toContain(BODY_CONTENT);
+  });
+
+  it("toggles and emits 'open' / 'close' events the accordion content when the title button is clicked", async () => {
+    wrapper = createComponent(
+      {},
+      {
+        title: "Some title",
+        content: "Some content",
+      }
+    );
+
+    expect(wrapper.classes()).not.toContain(ROOT_ACTIVE_CLASS);
+    expect(findContent().isVisible()).toBe(false);
+
+    await findTitle().trigger("click");
+    expect(wrapper.classes()).toContain(ROOT_ACTIVE_CLASS);
+    expect(wrapper.emitted().open[0]).toBeTruthy();
+    expect(wrapper.emitted().open[0]).toEqual([true]);
+
+    await findTitle().trigger("click");
+    expect(wrapper.classes()).not.toContain(ROOT_ACTIVE_CLASS);
+    expect(wrapper.emitted().close[0]).toBeTruthy();
+    expect(wrapper.emitted().close[0]).toEqual([false]);
+  });
+});

package/src/components/Alert/Alert.spec.js

@@ -0,0 +1,69 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+import Alert from "./Alert.vue";
+import { alertTypeOptions } from "./constants";
+
+let wrapper;
+const createComponent = (props = {}, slots = {}) => {
+  return mount(Alert, {
+    propsData: props,
+    slots,
+  });
+};
+
+const findIcon = () => wrapper.find(".ib-alert-icon");
+const findCloseButton = () => wrapper.find(".close-button");
+const findTitle = () => wrapper.find(".ib-alert-title");
+
+describe("Alert", () => {
+  it("Default render", () => {
+    wrapper = createComponent();
+
+    expect(wrapper).toBeDefined();
+    expect(wrapper.attributes("role")).toBe("alert");
+    expect(findIcon().exists()).toBe(false);
+    expect(findCloseButton().exists()).toBe(false);
+  });
+
+  it("Renders correctly with custom props", () => {
+    const TITLE = "Success Alert";
+    wrapper = createComponent({
+      type: alertTypeOptions.success,
+      showIcon: true,
+      showCloseButton: true,
+      title: TITLE,
+    });
+
+    expect(wrapper.classes()).contain(`ib-alert-${alertTypeOptions.success}`);
+    expect(findIcon().exists()).toBe(true);
+    expect(findCloseButton().exists()).toBe(true);
+    expect(findTitle().text()).toBe(TITLE);
+  });
+
+  it("emits close event when close button is clicked", async () => {
+    wrapper = createComponent({
+      showCloseButton: true,
+    });
+    const closeButton = wrapper.find(".close-button");
+    await closeButton.trigger("click");
+
+    expect(wrapper.emitted("close")).toBeTruthy();
+  });
+
+  it("renders correctly with custom props and slot content", () => {
+    wrapper = createComponent(
+      {
+        showIcon: true,
+        showCloseButton: true,
+        title: "Success Alert",
+      },
+      {
+        default: "<span>Default slot content</span>",
+        link: '<a href="#">Link slot content</a>',
+      }
+    );
+
+    expect(wrapper.find(".text-content").text()).toBe("Default slot content");
+    expect(wrapper.find(".link").html()).toContain("Link slot content");
+  });
+});

package/src/components/Alert/Alert.stories.js

@@ -54,10 +54,7 @@ const LargeTemplate = (args) => ({
   },
   template: `
     <ib-alert v-bind="args">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-      <template #link>
-        <a href="#" class="ib-standalone-link">View Server</a>
-      </template>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
     </ib-alert>`,
 });
 

package/src/components/Alert/Alert.vue

@@ -19,9 +19,10 @@
 
     <ib-icon-button
       class="close-button"
+      kind="ghost"
       v-if="showCloseButton"
+      :prevent-default="true"
       @click="close"
-      kind="ghost"
     >
       <ib-icon class="close-button-icon" name="close-outline" />
     </ib-icon-button>
@@ -56,8 +57,21 @@ export default {
   },
   mounted() {
     this.checkHeight();
+
+    if (this.$refs.content) {
+      this.contentObserver = new ResizeObserver(() => {
+        this.checkHeight();
+      });
+
+      this.contentObserver.observe(this.$refs.content);
+    }
     window.addEventListener("resize", () => this.checkHeight());
   },
+  data() {
+    return {
+      contentObserver: null,
+    };
+  },
   methods: {
     close() {
       this.$emit("close");
@@ -76,8 +90,12 @@ export default {
         this.$refs.content.classList.remove("large");
       }
 
-      if (parseInt(contentStyle.height) > 37) {
-        this.$refs.content.classList.add("large");
+      if (parseInt(contentStyle.height) > 37 && this.showIcon) {
+        if (this.title.length) {
+          this.$refs.content.classList.add("large");
+        } else {
+          this.$refs.content.classList.add("medium");
+        }
       }
     },
   },
@@ -117,6 +135,7 @@ export default {
     },
   },
   beforeUnmount() {
+    this.contentObserver?.disconnect();
     window.removeEventListener("resize", () => this.checkHeight());
   },
   components: {

package/src/components/Alert/alert.scss

@@ -95,6 +95,27 @@ $alert-success-secondary-color: $green-50;
         margin-top: 5px;
         margin-bottom: 5px;
         padding-left: 0;
+        word-break: break-word;
+      }
+    }
+
+    &.medium {
+      align-items: start;
+      padding-left: 3px;
+      padding-right: 5px;
+
+      .text-content {
+        @include Ib-P1-regular;
+        margin-bottom: 5px;
+        padding-left: 0!important;
+        word-break: break-word;
+      }
+
+      & + .close-button {
+        position: absolute;
+        right: 10px;
+        top: 10px;
+        transform: translateY(0);
       }
     }
   }
@@ -128,6 +149,7 @@ $alert-success-secondary-color: $green-50;
     margin-right: 5px;
   }
 
+  &-error,
   &-alert {
     border-left-color: $alert-alert-primary-color;
     background-color: $alert-alert-secondary-color;

package/src/components/Alert/constants.js

@@ -1,5 +1,6 @@
 export const alertTypeOptions = {
   alert: "alert",
+  error: "error",
   warning: "warning",
   info: "info",
   success: "success",