@eturnity/eturnity_reusable_components 7.48.1-qa-elisee-7.51.1 → 7.51.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.48.1-qa-elisee-7.51.1",
+  "version": "7.51.0",
   "files": [
     "dist",
     "src"

package/src/assets/svgIcons/lock.svg

@@ -1,3 +1,3 @@
-<svg fill="none" height="16" viewbox="14 12 12 16" width="16" xmlns="http://www.w3.org/2000/svg">
+<svg fill="none" height="16" viewbox="14 12 12 16" width="12" xmlns="http://www.w3.org/2000/svg">
 <path clip-rule="evenodd" d="M16.5 18.25V16.5C16.5 14.567 18.067 13 20 13C21.933 13 23.5 14.567 23.5 16.5V18.25H25.25V27H14.75V18.25H16.5ZM18.25 16.5C18.25 15.5335 19.0335 14.75 20 14.75C20.9665 14.75 21.75 15.5335 21.75 16.5V18.25H18.25V16.5ZM19.125 24.375V20.875H20.875V24.375H19.125Z" fill="#263238" fill-rule="evenodd"></path>
 </svg>

package/src/components/icon/Icons.stories.js

@@ -3,14 +3,24 @@ import IconCollection from './iconCollection.vue'
 export default {
   title: 'icon',
   component: IconCollection,
+  // argTypes: {},
 }
 
-const Template = (args) => ({
+const Template = (args, { argTypes }) => ({
+  // Components used in your story `template` are defined in the `components` object
   components: { IconCollection },
-  setup() {
-    return { args }
-  },
-  template: '<IconCollection v-bind="args" />',
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  props: Object.keys(argTypes),
+  template: '<IconCollection v-bind="$props" />',
+
+  // import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
+  //  How to use:
+  //<icon
+  //   name="House" //required. a svg file named [name].svg should be present in /assets/svgIcons
+  //   color="red"
+  //   hoveredColor="blue"
+  //   size="60px" by default, this is 30px
+  // />
 })
 
 export const Default = Template.bind({})
@@ -18,14 +28,14 @@ Default.args = {
   size: '30px',
 }
 
-export const WithColor = Template.bind({})
-WithColor.args = {
+export const withColor = Template.bind({})
+withColor.args = {
   size: '30px',
   color: 'red',
   hoveredColor: 'crimson',
 }
 
-export const Large = Template.bind({})
-Large.args = {
+export const large = Template.bind({})
+large.args = {
   size: '60px',
 }

package/src/components/icon/iconCollection.vue

@@ -2,7 +2,6 @@
   <Wrapper>
     <IconWrapper v-for="iconItem in iconList" :key="iconItem.name">
       <div>
-        color:{{ color }}
         <RCIcon
           :color="color"
           :hovered-color="hoveredColor"
@@ -40,9 +39,9 @@
     name: 'CollectionComponent',
     components: { RCIcon, IconWrapper, Wrapper },
     props: {
-      size: { required: false, type: String, default: '30px' },
-      color: { required: false, type: String, default: 'white' },
-      hoveredColor: { required: false, type: String, default: 'grey' },
+      size: { required: false },
+      color: { required: false },
+      hoveredColor: { required: false },
     },
     data() {
       return {

package/src/components/icon/index.vue

@@ -1,24 +1,14 @@
 <template>
-  <Wrapper
-    :cursor="cursor"
-    data-test-id="icon_wrapper"
-    :disabled="disabled"
-    :size="size"
-  >
+  <Wrapper :cursor="cursor" :disabled="disabled" :size="size">
     <IconImage
       :animation="animation"
       :background-color="backgroundColor"
       :color="color"
-      data-test-id="icon_image"
       :hovered-color="hoveredColor"
     >
-      <i data-test-id="icon_svg" v-html="icon.html"></i>
+      <i v-html="icon.html"></i>
     </IconImage>
-    <StrikedLine
-      v-if="isStriked"
-      :color="color"
-      data-test-id="icon_striked_line"
-    />
+    <StrikedLine v-if="isStriked" :color="color" />
   </Wrapper>
 </template>
 

package/src/components/inputs/inputNumber/index.vue

@@ -4,7 +4,6 @@
       v-if="hasLabelSlot"
       :align-items="alignItems"
       :border-color="borderColor"
-      :is-disabled="disabled"
       :is-error="isError"
       :is-interactive="isInteractive"
       :no-border="noBorder"
@@ -274,22 +273,18 @@
         : props.theme.colors.mediumGray};
   `
 
-  const LabelWrapper = styled('div')`
+  const LabelWrapper = styled('div', inputProps)`
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 8px;
+    cursor: ${(props) => (props.isInteractive ? 'ew-resize' : 'auto')};
   `
   const LabelSlotWrapper = styled('div', inputProps)`
     display: flex;
     gap: 10px;
     align-items: center;
-    cursor: ${(props) =>
-      props.isDisabled
-        ? 'not-allowed'
-        : props.isInteractive
-        ? 'ew-resize'
-        : 'auto'};
+    cursor: ${(props) => (props.isInteractive ? 'ew-resize' : 'auto')};
     border: ${(props) =>
       props.alignItems == 'vertical'
         ? 'none'
@@ -765,18 +760,12 @@
         }
       },
       initInteraction(e) {
-        if (this.disabled) {
-          return
-        }
         this.focusInput()
         e.preventDefault()
         window.addEventListener('mousemove', this.interact, false)
         window.addEventListener('mouseup', this.stopInteract, false)
       },
       interact(e) {
-        if (this.disabled) {
-          return
-        }
         e.preventDefault()
         let value = parseFloat(this.value || 0)
         value += parseFloat(this.interactionStep) * parseInt(e.movementX)

package/src/components/inputs/select/index.vue

@@ -43,7 +43,6 @@
             buttonBgColor || colorMode == 'dark' ? 'transparentBlack1' : 'white'
           "
           class="select-button"
-          :color-mode="colorMode"
           :data-id="dataId"
           :disabled="disabled"
           :font-color="
@@ -275,7 +274,6 @@
     noRelative: Boolean,
     tablePaddingLeft: String,
     showDisabledBackground: Boolean,
-    colorMode: String,
   }
   const SelectButton = styled('div', selectButtonAttrs)`
     position: ${(props) => (props.noRelative ? 'static' : 'relative')};
@@ -313,16 +311,12 @@
   `}
     background-color:${(props) =>
       props.disabled && props.showDisabledBackground
-        ? props.colorMode == 'dark'
-          ? props.theme.transparentBlack1
-          : props.theme.colors.grey5
+        ? props.theme.colors.grey5
         : props.theme.colors[props.bgColor]
         ? props.theme.colors[props.bgColor]
         : props.bgColor};
     color: ${(props) =>
-      props.disabled
-        ? props.theme.colors.grey2
-        : props.theme.colors[props.fontColor]
+      props.theme.colors[props.fontColor]
         ? props.theme.colors[props.fontColor]
         : props.fontColor};
     ${(props) => (props.disabled ? 'pointer-events: none' : '')};
@@ -619,7 +613,7 @@
         if (this.isDropdownOpen) {
           return this.$refs.dropdown.$el.childElementCount > 1
             ? this.$refs.dropdown.$el.childElementCount
-            : this.$refs.dropdown.$el.children[0]
+            : !!this.$refs.dropdown.$el.children[0]
             ? this.$refs.dropdown.$el.children[0].childElementCount
             : 0
         }

package/src/components/tables/mainTable/index.vue

@@ -10,7 +10,11 @@
       ref="tableRef"
       :is-position-absolute="doesTableContainDraggables"
     >
-      <TableWrapper class="main-table-wrapper" :full-width="fullWidth">
+      <TableWrapper
+        class="main-table-wrapper"
+        :full-width="fullWidth"
+        :is-overflow-hidden="isOverflowHidden"
+      >
         <SpinnerWrapper v-if="isLoading">
           <Spinner />
         </SpinnerWrapper>
@@ -70,12 +74,12 @@
   `}
   `
 
-  const wrapperAttrs = { fullWidth: Boolean }
+  const wrapperAttrs = { fullWidth: Boolean, isOverflowHidden: Boolean }
   const TableWrapper = styled('div', wrapperAttrs)`
     width: ${(props) => (props.fullWidth ? '100%' : 'fit-content')};
     max-width: 100%;
-    overflow-x: auto;
-    overflow-y: hidden;
+    ${(props) =>
+      props.isOverflowHidden ? 'overflow-x: auto; overflow-y: hidden;' : ''}
 
     ::-webkit-scrollbar {
       height: 10px; //height of the whole scrollbar area
@@ -409,6 +413,10 @@
         required: false,
         default: false,
       },
+      isOverflowHidden: {
+        required: false,
+        default: true,
+      },
       titleText: {
         required: false,
         default: null,

package/src/components/icon/icon.spec.js

@@ -1,66 +0,0 @@
-import { mount } from '@vue/test-utils'
-import RCIcon from '@/components/icon'
-import theme from '@/assets/theme'
-import 'jest-styled-components'
-jest.mock('@/components/icon/iconCache.mjs', () => ({
-  fetchIcon: jest.fn(() => Promise.resolve('mocked-icon-url.svg')),
-}))
-
-describe('RCIcon.vue', () => {
-  it('renders icon with default props', async () => {
-    const wrapper = mount(RCIcon, {
-      props: { name: 'House' },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
-
-    const iconWrapper = wrapper.find('[data-test-id="icon_wrapper"]')
-    const iconImage = wrapper.find('[data-test-id="icon_image"]')
-
-    expect(iconWrapper.exists()).toBe(true)
-    expect(iconImage.exists()).toBe(true)
-    expect(wrapper.props('size')).toBe('30px')
-  })
-
-  it('renders striked line when isStriked is true', async () => {
-    const wrapper = mount(RCIcon, {
-      props: {
-        name: 'House',
-        isStriked: true,
-        color: 'red',
-      },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
-
-    const strikedLine = wrapper.find('[data-test-id="icon_striked_line"]')
-    expect(strikedLine.exists()).toBe(true)
-  })
-
-  it('applies correct styling based on props', async () => {
-    const wrapper = mount(RCIcon, {
-      props: {
-        name: 'House',
-        size: '60px',
-        color: 'red',
-        hoveredColor: 'blue',
-        backgroundColor: 'yellow',
-      },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
-
-    const iconImage = wrapper.find('[data-test-id="icon_image"]')
-    expect(iconImage.exists()).toBe(true)
-    // Add assertions for styling if needed
-  })
-})