@eturnity/eturnity_reusable_components 7.45.3 → 7.45.5-EPDM-11711.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.45.3",
+  "version": "7.45.5-EPDM-11711.0",
   "files": [
     "dist",
     "src"

package/src/assets/svgIcons/compass.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" fill="#333" viewBox="0 0 29 29"><path d="m10.5 14 4-8 4 8z"/><path class='fix' fill="#ccc" d="m10.5 16 4 8 4-8z"/></svg>

package/src/assets/svgIcons/pause.svg

@@ -0,0 +1,6 @@
+<svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 512 512" xml:space="preserve">
+<path d="M256,0C114.617,0,0,114.615,0,256s114.617,256,256,256s256-114.615,256-256S397.383,0,256,0z M224,320
+	c0,8.836-7.164,16-16,16h-32c-8.836,0-16-7.164-16-16V192c0-8.836,7.164-16,16-16h32c8.836,0,16,7.164,16,16V320z M352,320
+	c0,8.836-7.164,16-16,16h-32c-8.836,0-16-7.164-16-16V192c0-8.836,7.164-16,16-16h32c8.836,0,16,7.164,16,16V320z"/>
+</svg>

package/src/assets/theme.js

@@ -35,6 +35,9 @@ const theme = {
     tablet: '768px',
     tabletLarge: '950px',
   },
+  fonts: {
+    mainFont: '"Figtree", sans-serif',
+  },
   borderRadius: '4px',
 }
 

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

@@ -0,0 +1,66 @@
+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
+  })
+})

package/src/components/icon/index.vue

@@ -1,14 +1,24 @@
 <template>
-  <Wrapper :cursor="cursor" :disabled="disabled" :size="size">
+  <Wrapper
+    :cursor="cursor"
+    data-test-id="icon_wrapper"
+    :disabled="disabled"
+    :size="size"
+  >
     <IconImage
       :animation="animation"
       :background-color="backgroundColor"
       :color="color"
+      data-test-id="icon_image"
       :hovered-color="hoveredColor"
     >
-      <i v-html="icon.html"></i>
+      <i data-test-id="icon_svg" v-html="icon.html"></i>
     </IconImage>
-    <StrikedLine v-if="isStriked" :color="color" />
+    <StrikedLine
+      v-if="isStriked"
+      :color="color"
+      data-test-id="icon_striked_line"
+    />
   </Wrapper>
 </template>
 
@@ -111,10 +121,10 @@
         props.backgroundColor ? props.backgroundColor : 'transparent'};
       padding: ${(props) => (props.backgroundColor ? '3px' : '0')};
     }
-    svg path {
+    svg path:not(.fix) {
       ${({ theme, color }) => color && `fill: ${theme.colors[color] || color};`}
     }
-    &:hover svg path {
+    &:hover svg path:not(.fix) {
       ${({ theme, hoveredColor }) =>
         hoveredColor && `fill: ${theme.colors[hoveredColor] || hoveredColor};`}
     }

package/src/components/infoText/index.vue

@@ -19,10 +19,11 @@
         :align-arrow="alignArrow"
         :half-computed-text-info-width="halfComputedTextInfoWidth"
         :icon-size="size"
+        :info-position="infoPosition"
         :max-width="maxWidth"
         :width="width"
         ><slot></slot>
-        <span v-html="text"></span>
+        <span v-if="text.length > 0" v-html="text"></span>
       </TextOverlay>
     </IconWrapper>
   </ComponentWrapper>
@@ -45,10 +46,14 @@
     alignArrow: String,
     width: String,
     halfComputedTextInfoWidth: Number,
+    infoPosition: String,
   }
   const TextOverlay = styled('div', textAttrs)`
     position: absolute;
-    top: ${(props) => 'calc(' + props.iconSize + ' + 15px)'};
+    ${(props) =>
+      props.infoPosition == 'top'
+        ? 'bottom : calc(' + props.iconSize + ' + 15px)'
+        : 'top : calc(' + props.iconSize + ' + 15px)'};
     ${(props) =>
       props.alignArrow === 'left'
         ? 'left: calc(' + props.iconSize + ' /2 - 18px)'
@@ -64,14 +69,17 @@
     font-weight: 400;
     line-height: normal;
     border-radius: 4px;
-    z-index: 99;
+    z-index: 999;
     color: ${(props) => props.theme.colors.white};
 
     :before {
       content: '';
       background-color: ${(props) => props.theme.colors.black};
       position: absolute;
-      top: 2px;
+
+      ${(props) =>
+        props.infoPosition == 'top' ? 'bottom : -10px' : 'top: 2px'};
+
       ${(props) =>
         props.alignArrow === 'left'
           ? 'left:40px;'
@@ -115,26 +123,37 @@
     props: {
       text: {
         required: false,
+        default: '',
+        type: String,
       },
       size: {
         required: false,
         default: '14px',
+        type: String,
+      },
+      infoPosition: {
+        required: false,
+        default: 'bottom',
+        type: String,
       },
       alignArrow: {
         required: false,
         default: 'center',
+        type: String,
       },
       openTrigger: {
         required: false,
         default: 'onHover', // onHover, onClick
+        type: String,
       },
       width: {
         required: false,
-        default: '200px',
+        default: '165px',
+        type: String,
       },
       maxWidth: {
-        type: String,
         default: '400px',
+        type: String,
       },
     },
     data() {

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

@@ -44,6 +44,7 @@
             :type="inputTypeData"
             :value="value"
             @blur="onInputBlur"
+            @focus="onInputFocus"
             @input="onChangeHandler"
             @keyup.enter="onEnterPress"
           />
@@ -367,6 +368,9 @@
         this.validateInput($event.target.value)
         this.$emit('input-blur', $event.target.value)
       },
+      onInputFocus($event) {
+        this.$emit('input-focus', $event.target.value)
+      },
       toggleShowPassword() {
         this.inputTypeData =
           this.inputTypeData === 'password' ? 'text' : 'password'

package/src/components/roundTabs/index.vue

@@ -0,0 +1,107 @@
+<template>
+  <ContainerComponent>
+    <RoundedTabLeft
+      :background-color="backgroundColor"
+      :border-radius="borderRadius"
+    />
+    <TabComponent
+      :background-color="backgroundColor"
+      :border-radius="borderRadius"
+      :height="height"
+      :width="width"
+    >
+      <slot></slot>
+    </TabComponent>
+    <RoundedTabRight
+      :background-color="backgroundColor"
+      :border-radius="borderRadius"
+    />
+  </ContainerComponent>
+</template>
+<script>
+  import styled from 'vue3-styled-components'
+
+  const ContainerComponent = styled.div`
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  `
+  const RoundedTabLeft = styled('div', {
+    backgroundColor: String,
+    borderRadius: String,
+  })`
+    position:absolute;
+    bottom:0;
+    left:-${(prop) => prop.borderRadius}
+    background-color: ${(prop) => prop.backgroundColor};
+    width: ${(prop) => prop.borderRadius};
+    height: ${(prop) => prop.borderRadius};
+    -webkit-mask-image: radial-gradient(
+      circle at top left,
+      transparent 71%,
+      black 71%
+    );
+  `
+  const RoundedTabRight = styled('div', {
+    backgroundColor: String,
+    borderRadius: String,
+  })`
+  position:absolute;
+  bottom:0;
+    right:-${(prop) => prop.borderRadius}
+    background-color: ${(prop) => prop.backgroundColor};
+    width: ${(prop) => prop.borderRadius};
+    height: ${(prop) => prop.borderRadius};
+    -webkit-mask-image: radial-gradient(
+      circle at top right,
+      transparent 71%,
+      black 71%
+    );`
+  const TabComponent = styled('div', {
+    width: String,
+    height: String,
+    backgroundColor: String,
+    borderRadius: String,
+  })`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: ${(prop) => prop.backgroundColor};
+    width: ${(prop) => prop.width};
+    height: ${(prop) => prop.height};
+    border-radius: ${(prop) => prop.borderRadius} ${(prop) => prop.borderRadius}
+      0 0;
+  `
+  export default {
+    name: 'RoundTabs',
+    components: {
+      ContainerComponent,
+      TabComponent,
+      RoundedTabLeft,
+      RoundedTabRight,
+    },
+    props: {
+      height: {
+        required: false,
+        default: '40px',
+        type: String,
+      },
+      width: {
+        required: false,
+        default: '200px',
+        type: String,
+      },
+      backgroundColor: {
+        required: false,
+        default: 'white',
+        type: String,
+      },
+      borderRadius: {
+        required: false,
+        default: '20px',
+        type: String,
+      },
+    },
+  }
+</script>