@eturnity/eturnity_reusable_components 8.22.4 → 8.22.5

package/dist/main.es96.js

@@ -2,27 +2,22 @@ import "./main.es3.js";
 import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
 const _hoisted_1 = {
   xmlns: "http://www.w3.org/2000/svg",
-  width: "20",
-  height: "14",
+  width: "16",
+  height: "6",
   fill: "none"
 };
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#263238",
-  d: "M20 16c2.829 0 4.976 1.278 6.69 4.003C24.975 22.724 22.827 24 20 24s-4.975-1.276-6.69-3.997C15.024 17.278 17.171 16 20 16m0-2c-4.273 0-7.094 2.43-9 6.005C12.906 23.57 15.727 26 20 26s7.094-2.43 9-5.995C27.094 16.43 24.273 14 20 14"
+  fill: "#B2B9C5",
+  d: "M16.5 19.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.75 19.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M27 19.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0"
 }, null, -1);
-const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#263238",
-  d: "M20 22a2 2 0 1 0 0-4 2 2 0 0 0 0 4"
-}, null, -1);
-const _hoisted_4 = [
-  _hoisted_2,
-  _hoisted_3
+const _hoisted_3 = [
+  _hoisted_2
 ];
 function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
 }
-const current_variant = { render };
+const context_menu_tabs = { render };
 export {
-  current_variant as default,
+  context_menu_tabs as default,
   render
 };

package/dist/main.es97.js

@@ -2,13 +2,14 @@ import "./main.es3.js";
 import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
 const _hoisted_1 = {
   xmlns: "http://www.w3.org/2000/svg",
-  width: "18",
-  height: "18",
-  fill: "none"
+  width: "800",
+  height: "800",
+  viewBox: "0 0 512 512"
 };
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#fff",
-  d: "M0 10h8V0H0zm0 8h8v-6H0zm10 0h8V8h-8zm0-18v6h8V0z"
+  fill: "none",
+  "fill-rule": "evenodd",
+  d: "M426.667 128v320h-256V128zM384 170.667H213.333v234.666H384zm-64-128v42.666H128v256H85.333V42.667z"
 }, null, -1);
 const _hoisted_3 = [
   _hoisted_2
@@ -16,8 +17,8 @@ const _hoisted_3 = [
 function render(_ctx, _cache) {
   return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
 }
-const dashboard = { render };
+const copy = { render };
 export {
-  dashboard as default,
+  copy as default,
   render
 };

package/dist/main.es98.js

@@ -2,22 +2,27 @@ import "./main.es3.js";
 import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
 const _hoisted_1 = {
   xmlns: "http://www.w3.org/2000/svg",
-  width: "18",
-  height: "18",
+  width: "10",
+  height: "10",
   fill: "none"
 };
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#263238",
-  d: "M16 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h4v-2H2V2h14v14h-4v2h4c1.1 0 2-.9 2-2V2a2 2 0 0 0-2-2M9 6l-4 4h3v8h2v-8h3z"
+  fill: "#000",
+  d: "m9.879 8.479-1.4 1.4L.12 1.52l1.4-1.4L5.7 4.3z"
 }, null, -1);
-const _hoisted_3 = [
-  _hoisted_2
+const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#000",
+  d: "m1.521 9.879-1.4-1.4L8.48.12l1.4 1.4z"
+}, null, -1);
+const _hoisted_4 = [
+  _hoisted_2,
+  _hoisted_3
 ];
 function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
 }
-const data_transfer = { render };
+const cross = { render };
 export {
-  data_transfer as default,
+  cross as default,
   render
 };

package/dist/main.es99.js

@@ -2,17 +2,17 @@ import "./main.es3.js";
 import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
 const _hoisted_1 = {
   xmlns: "http://www.w3.org/2000/svg",
-  width: "12",
-  height: "16",
+  width: "20",
+  height: "14",
   fill: "none"
 };
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
   fill: "#263238",
-  d: "M15 13h2v14h-2z"
+  d: "M20 16c2.829 0 4.976 1.278 6.69 4.003C24.975 22.724 22.827 24 20 24s-4.975-1.276-6.69-3.997C15.024 17.278 17.171 16 20 16m0-2c-4.273 0-7.094 2.43-9 6.005C12.906 23.57 15.727 26 20 26s7.094-2.43 9-5.995C27.094 16.43 24.273 14 20 14"
 }, null, -1);
 const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
   fill: "#263238",
-  d: "M17 21a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h8l-2.857 4L25 21z"
+  d: "M20 22a2 2 0 1 0 0-4 2 2 0 0 0 0 4"
 }, null, -1);
 const _hoisted_4 = [
   _hoisted_2,
@@ -21,8 +21,8 @@ const _hoisted_4 = [
 function render(_ctx, _cache) {
   return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
 }
-const deadline = { render };
+const current_variant = { render };
 export {
-  deadline as default,
+  current_variant as default,
   render
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.22.4",
+  "version": "8.22.5",
   "files": [
     "dist",
     "src"
@@ -17,7 +17,8 @@
     "prettier": "prettier --write 'src/**/*.{js,vue}'",
     "test": "jest",
     "test-coverage": "jest --coverage",
-    "merge-remote-master": "node scripts/merge-remote-master.js"
+    "merge-remote-master": "node scripts/merge-remote-master.js",
+    "prepublishOnly": "npm run test && npm run build"
   },
   "dependencies": {
     "@originjs/vite-plugin-commonjs": "1.0.3",

package/src/components/banner/actionBanner/actionBanner.spec.js

@@ -1,58 +1,70 @@
 /* eslint-disable */
-import { h } from 'vue'
 import { mount } from '@vue/test-utils'
 import ActionBanner from '@/components/banner/actionBanner'
 import theme from '@/assets/theme'
 
+// Mock Modal component
+jest.mock('@/components/modals/modal', () => ({
+  name: 'Modal',
+  template: `
+    <div v-if="isOpen" data-test-id="action_banner_wrapper">
+      <slot></slot>
+      <button class="close" @click="$emit('on-close')"></button>
+    </div>
+  `,
+  props: ['isOpen'],
+}))
+
 describe('Action Banner Component', () => {
-  it('action banner is shown when isOpen props is true', async () => {
-    const wrapper = mount(ActionBanner, {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = mount(ActionBanner, {
       props: {
         isOpen: false,
       },
+      slots: {
+        title: 'Test Title',
+        body: 'Test Body',
+        buttons: 'Test Buttons',
+      },
       global: {
         provide: {
           theme,
         },
       },
     })
+  })
 
+  it('action banner is shown when isOpen props is true', async () => {
+    // Initially, the banner should not exist because isOpen is false
     const bannerWrapper = wrapper.find('[data-test-id="action_banner_wrapper"]')
-    expect(bannerWrapper.exists()).toBe(true)
-    expect(bannerWrapper.classes()).not.toContain('visible')
-    expect(bannerWrapper.classes()).toContain('hidden')
+    expect(bannerWrapper.exists()).toBe(false)
+
+    // After setting isOpen to true, the banner should exist
     await wrapper.setProps({ isOpen: true })
-    expect(bannerWrapper.classes()).toContain('visible')
-    expect(bannerWrapper.classes()).not.toContain('hidden')
+    await wrapper.vm.$nextTick()
+
+    const updatedBannerWrapper = wrapper.find(
+      '[data-test-id="action_banner_wrapper"]'
+    )
+    expect(updatedBannerWrapper.exists()).toBe(true)
   })
 
-  it('action banner slots is display when user passed slots content', async () => {
-    const titleText = 'Sample title'
-    const bodyText = 'Sample body text'
-    const buttonText = 'Sample button'
+  it('renders slots correctly when banner is open', async () => {
+    await wrapper.setProps({ isOpen: true })
+    await wrapper.vm.$nextTick()
 
-    const wrapper = mount(ActionBanner, {
-      props: {
-        isOpen: false,
-      },
-      slots: {
-        title: titleText,
-        body: bodyText,
-        buttons: h('button', {}, buttonText),
-      },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
+    const title = wrapper.find('[data-test-id="modal_title"]')
+    const body = wrapper.find('[data-test-id="modal_body"]')
+    const buttons = wrapper.find('[data-test-id="modal_buttons"]')
 
-    const modalTitleEl = wrapper.find('[data-test-id="modal_title"]')
-    expect(modalTitleEl.text()).toBe(titleText)
-    const modalBodyEl = wrapper.find('[data-test-id="modal_body"]')
-    expect(modalBodyEl.text()).toBe(bodyText)
-    const modalButtonsEl = wrapper.find('[data-test-id="modal_buttons"]')
-    expect(modalButtonsEl.text()).toBe(buttonText)
+    expect(title.exists()).toBe(true)
+    expect(title.text()).toBe('Test Title')
+    expect(body.exists()).toBe(true)
+    expect(body.text()).toBe('Test Body')
+    expect(buttons.exists()).toBe(true)
+    expect(buttons.text()).toBe('Test Buttons')
   })
 
   it('action banner on-close event is emitted when modal close button is clicked', async () => {

package/src/components/buttons/buttonIcon/ButtonIcon.stories.js

@@ -112,12 +112,6 @@ Cancel.args = {
   variant: 'cancel',
 }
 
-export const Danger = Template.bind({})
-Danger.args = {
-  ...Default.args,
-  variant: 'danger',
-}
-
 export const Disabled = Template.bind({})
 Disabled.args = {
   ...Default.args,
@@ -151,7 +145,7 @@ CustomColor.args = {
 export const CustomIconColor = Template.bind({})
 CustomIconColor.args = {
   ...Default.args,
-  iconColor: '#FFFFFF',
+  iconColor: '#000',
 }
 
 export const DarkTheme = Template.bind({})

package/src/components/buttons/buttonIcon/buttonIcon.spec.js

@@ -0,0 +1,152 @@
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+import ButtonIcon from '@/components/buttons/buttonIcon'
+import theme from '@/assets/theme'
+
+// Mock the Icon component
+const Icon = {
+  name: 'Icon',
+  template: '<div class="mock-icon"></div>',
+  props: {
+    name: String,
+    color: String,
+    size: String,
+    fillType: String,
+    disableHover: Boolean,
+    hoveredColor: String,
+  },
+}
+
+jest.mock('@/components/icon/iconCache.mjs', () => ({
+  fetchIcon: jest.fn(() => Promise.resolve('mocked-icon-url.svg')),
+}))
+
+describe('ButtonIcon.vue', () => {
+  let wrapper
+
+  const defaultProps = {
+    type: 'primary',
+    variant: 'main',
+    appTheme: 'light',
+    buttonSize: 'medium',
+    isDisabled: false,
+    text: 'Click Me',
+    minWidth: '200px',
+    customColor: null,
+    iconName: 'settings',
+    iconColor: null,
+    fontSize: '14px',
+    isActive: false,
+    fillType: 'fill',
+    height: 'auto',
+  }
+
+  beforeEach(() => {
+    wrapper = mount(ButtonIcon, {
+      props: defaultProps,
+      global: {
+        provide: {
+          theme,
+        },
+        components: {
+          Icon,
+        },
+      },
+    })
+  })
+
+  it('renders button with correct text', () => {
+    const textContainer = wrapper.find('[data-test-id="button-icon-text"]')
+    expect(textContainer.exists()).toBe(true)
+    expect(textContainer.text()).toBe('Click Me')
+  })
+
+  it('renders icon with correct name', () => {
+    const icon = wrapper.findComponent({ name: 'Icon' })
+    expect(icon.exists()).toBe(true)
+    expect(icon.props('name')).toBe('settings')
+  })
+
+  it('applies disabled state correctly', async () => {
+    await wrapper.setProps({ isDisabled: true })
+    const buttonWrapper = wrapper.find('[data-test-id="button-icon-wrapper"]')
+    expect(buttonWrapper.exists()).toBe(true)
+    expect(wrapper.props('isDisabled')).toBe(true)
+  })
+
+  it('applies custom color when provided', async () => {
+    const customColor = '#FF5733'
+    await wrapper.setProps({ customColor })
+    const buttonWrapper = wrapper.find('[data-test-id="button-icon-wrapper"]')
+    expect(buttonWrapper.exists()).toBe(true)
+    expect(wrapper.props('customColor')).toBe(customColor)
+  })
+
+  it('applies custom icon color when provided', async () => {
+    const iconColor = '#000000'
+    await wrapper.setProps({ iconColor })
+    const icon = wrapper.findComponent({ name: 'Icon' })
+    expect(icon.exists()).toBe(true)
+    expect(icon.props('color')).toBe(iconColor)
+  })
+
+  it('applies active state correctly', async () => {
+    await wrapper.setProps({ isActive: true })
+    const buttonWrapper = wrapper.find('[data-test-id="button-icon-wrapper"]')
+    expect(buttonWrapper.exists()).toBe(true)
+    expect(wrapper.props('isActive')).toBe(true)
+  })
+
+  it('renders number count when provided', async () => {
+    const numberCount = 5
+    await wrapper.setProps({ numberCount })
+    const numberContainer = wrapper.find(
+      '[data-test-id="button-icon-number-container"]'
+    )
+    const numberText = wrapper.find('[data-test-id="button-icon-number"]')
+    expect(numberContainer.exists()).toBe(true)
+    expect(numberText.exists()).toBe(true)
+    expect(numberText.text()).toBe(numberCount.toString())
+  })
+
+  it('applies different button sizes correctly', async () => {
+    const sizes = ['small', 'medium', 'large']
+    for (const size of sizes) {
+      await wrapper.setProps({ buttonSize: size })
+      const buttonWrapper = wrapper.find('[data-test-id="button-icon-wrapper"]')
+      expect(buttonWrapper.exists()).toBe(true)
+      expect(wrapper.props('buttonSize')).toBe(size)
+    }
+  })
+
+  it('applies different button types correctly', async () => {
+    const types = ['primary', 'secondary', 'tertiary']
+    for (const type of types) {
+      await wrapper.setProps({ type })
+      const buttonWrapper = wrapper.find('[data-test-id="button-icon-wrapper"]')
+      expect(buttonWrapper.exists()).toBe(true)
+      expect(wrapper.props('type')).toBe(type)
+    }
+  })
+
+  it('applies different variants correctly', async () => {
+    // Only test variants that exist in the theme
+    const variants = ['main']
+    for (const variant of variants) {
+      await wrapper.setProps({ variant })
+      const buttonWrapper = wrapper.find('[data-test-id="button-icon-wrapper"]')
+      expect(buttonWrapper.exists()).toBe(true)
+      expect(wrapper.props('variant')).toBe(variant)
+    }
+  })
+
+  it('applies different themes correctly', async () => {
+    const themes = ['light', 'dark']
+    for (const theme of themes) {
+      await wrapper.setProps({ appTheme: theme })
+      const buttonWrapper = wrapper.find('[data-test-id="button-icon-wrapper"]')
+      expect(buttonWrapper.exists()).toBe(true)
+      expect(wrapper.props('appTheme')).toBe(theme)
+    }
+  })
+})

package/src/components/buttons/buttonIcon/index.vue

@@ -1,9 +1,10 @@
 <template>
-  <PageContainer>
+  <PageContainer data-test-id="button-icon-container">
     <ButtonWrapper
       :app-theme="appTheme"
       :button-size="buttonSize"
       :custom-color="customColor"
+      data-test-id="button-icon-wrapper"
       :height="height"
       :is-active="isActive"
       :is-disabled="isDisabled"
@@ -14,6 +15,7 @@
       <IconContainer
         :app-theme="appTheme"
         :button-size="buttonSize"
+        data-test-id="button-icon-icon-container"
         :height="height"
         :type="type"
         :variant="variant"
@@ -33,11 +35,20 @@
           size="14px"
         />
       </IconContainer>
-      <ButtonContainer :button-size="buttonSize" :height="height">
+      <ButtonContainer
+        :button-size="buttonSize"
+        data-test-id="button-icon-text"
+        :height="height"
+      >
         {{ text }}
       </ButtonContainer>
-      <NumberContainer v-if="numberCount">
-        <NumberText>{{ numberCount }}</NumberText>
+      <NumberContainer
+        v-if="numberCount"
+        data-test-id="button-icon-number-container"
+      >
+        <NumberText data-test-id="button-icon-number">{{
+          numberCount
+        }}</NumberText>
       </NumberContainer>
     </ButtonWrapper>
   </PageContainer>

package/src/components/buttons/mainButton/MainButton.stories.js

@@ -2,7 +2,7 @@ import MainButton from './index.vue'
 import theme from '../../../assets/theme'
 
 export default {
-  title: 'Buttons/MainButton',
+  title: 'Components/Buttons/MainButton',
   component: MainButton,
   tags: ['autodocs'],
   argTypes: {
@@ -133,13 +133,3 @@ DarkTheme.args = {
   buttonSize: 'medium',
   appTheme: 'dark',
 }
-
-export const IconAltDesignButton = {
-  args: {
-    text: 'Click me',
-    icon: 'bell',
-    type: 'primary',
-    iconAltStyle: true,
-    iconAltStyleColor: '#f2f2f2',
-  },
-}