@eturnity/eturnity_reusable_components 7.51.16-EPDM-13312.0 → 7.51.16-EPDM-10609.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.51.16-EPDM-13312.0",
+  "version": "7.51.16-EPDM-10609.12",
   "files": [
     "dist",
     "src"

package/src/assets/svgIcons/plus_button.svg

@@ -0,0 +1,4 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 10V12L0 12L1.19209e-07 10L22 10Z" fill="white"/>
+<path d="M10 0H12V22H10V0Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/star.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 9.46199L9.708 11.7L8.724 7.48199L12 4.64399L7.686 4.27799L6 0.299988L4.314 4.27799L0 4.64399L3.276 7.48199L2.292 11.7L6 9.46199Z" fill="#FDB813"/>
+</svg>

package/src/assets/theme.js

@@ -11,6 +11,7 @@ const theme = {
     lightGray: '#f2f2f2',
     white: '#ffffff',
     blue: '#48a2d0',
+    blue2: '#6CD4D4',
     red: '#ff5656',
     blue1: '#e4efff',
     brightBlue: '#0068DE',

package/src/components/infoText/constants.js

@@ -0,0 +1,4 @@
+export const TEXT_OVERLAY_TOP_OFFSET = 35
+export const TEXT_OVERLAY_LEFT_OFFSET = 3
+export const TEXT_OVERLAY_ARROW_LEFT_OFFSET = 62
+export const TEXT_OVERLAY_ARROW_RIGHT_NEGATIVE_OFFSET = 68

package/src/components/infoText/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <PageContainer ref="container">
+  <PageContainer ref="container" :type="type">
     <div
       ref="icon"
       data-test-id="infoText_trigger"
@@ -7,7 +7,13 @@
       @mouseenter="!isMobile && openTrigger === 'onHover' && showInfo()"
       @mouseleave="!isMobile && openTrigger === 'onHover' && hideInfo()"
     >
+      <Dot
+        v-if="type === 'dot'"
+        :color="dotColor"
+        data-test-id="infoText_dot"
+      />
       <IconComponent
+        v-else
         :color="iconColor || computedIconColor"
         :cursor="isDisabled ? 'not-allowed' : 'pointer'"
         :disabled="isDisabled"
@@ -94,7 +100,7 @@
   `
 
   const PageContainer = styled('div')`
-    display: inline-block;
+    display: ${(props) => (props.type === 'dot' ? 'unset' : 'inline-block')};
     position: relative;
   `
 
@@ -108,12 +114,20 @@
     height: auto;
   `
 
+  const Dot = styled('div')`
+    width: 5px;
+    height: 5px;
+    background-color: ${(props) => props.color};
+    border-radius: 50%;
+  `
+
   export default {
     name: 'InfoText',
     components: {
       IconComponent,
       TextOverlay,
       Arrow,
+      Dot,
       PageContainer,
       TextWrapper,
       OverlayImage,
@@ -165,6 +179,16 @@
         default: false,
         required: false,
       },
+      dotColor: {
+        type: String,
+        required: false,
+        default: theme.colors.blue2,
+      },
+      type: {
+        type: String,
+        required: false,
+        default: 'info', // info, dot
+      },
     },
     setup(props) {
       const isVisible = ref(false)

package/src/components/infoText/infoText.spec.js

@@ -0,0 +1,62 @@
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+import InfoText from '@/components/infoText'
+import theme from '@/assets/theme'
+
+jest.mock('@/components/icon/iconCache.mjs', () => ({
+  // need to mock this due to how jest handles import.meta
+  fetchIcon: jest.fn(() => Promise.resolve('close_for_modals,_tool_tips.svg')),
+}))
+
+describe('InfoText Component', () => {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = mount(InfoText, {
+      props: {
+        text: 'default text',
+        size: '14px',
+        infoPosition: 'bottom',
+        alignArrow: 'center',
+        openTrigger: 'onHover',
+        width: '165px',
+        maxWidth: '165px',
+        shouldUseTeleport: false,
+        dotColor: '#00009f',
+        type: 'info',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+  })
+
+  test('renders InfoText component with default props', () => {
+    expect(wrapper.find('[data-test-id="infoText_info"]').exists()).toBe(true)
+    expect(wrapper.vm.text).toContain('default text')
+    expect(wrapper.vm.size).toContain('14px')
+    expect(wrapper.vm.infoPosition).toContain('bottom')
+    expect(wrapper.vm.alignArrow).toContain('center')
+  })
+
+  test('openTrigger prop is set to onClick', async () => {
+    await wrapper.setProps({ openTrigger: 'onClick' })
+
+    //should not see text upon hover
+    expect(wrapper.find('[data-test-id="info_text_wrapper"]').exists()).toBe(
+      false
+    )
+    //should see text upon click
+    await wrapper.find('[data-test-id="infoText_trigger"]').trigger('click')
+    expect(wrapper.find('[data-test-id="info_text_wrapper"]').exists()).toBe(
+      true
+    )
+  })
+
+  test('position type is dot', async () => {
+    await wrapper.setProps({ type: 'dot' })
+    expect(wrapper.find('[data-test-id="infoText_dot"]').exists()).toBe(true)
+  })
+})

package/src/components/infoText/infoText.stories.js

@@ -0,0 +1,48 @@
+import InfoText from './index.vue'
+
+export default {
+  title: 'infoText',
+  component: InfoText,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+}
+
+// import InfoText from "@eturnity/eturnity_reusable_components/src/components/infoText"
+//To use:
+// <info-text
+//     text="Veritatis et quasi architecto beatae vitae"
+//     size="20px"
+//     alignArrow="right" // which side the arrow should be on
+// />
+
+export const Default = {
+  args: {
+    text: 'default text',
+    size: '14px',
+    infoPosition: 'bottom',
+    alignArrow: 'center',
+    openTrigger: 'onHover',
+    width: '165px',
+    maxWidth: '165px',
+    shouldUseTeleport: false,
+    dotColor: '#00009f',
+    type: 'info',
+  },
+}
+
+export const Dot = {
+  args: {
+    ...Default.args,
+    type: 'dot',
+  },
+}
+
+//will only show the info text on click
+export const OnClick = {
+  args: {
+    ...Default.args,
+    openTrigger: 'onClick',
+  },
+}

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

@@ -150,12 +150,11 @@
     computed: {},
     methods: {
       clickHandler(e) {
-        if (this.isDisabled) {
+        if (this.isDisabled || !!this.$attrs?.onClick) {
           // prevent emitter if the option is disabled
           return
-        } else {
-          this.$parent.$emit('option-selected', this.value, e)
         }
+        this.$parent.$emit('option-selected', this.value, e)
       },
       hoverHandler() {
         this.$parent.$emit('option-hovered', this.value)

package/src/components/sideMenu/index.vue

@@ -9,10 +9,12 @@
           v-if="!item.children"
           :key="idx"
           :data-id="`sub_menu_settings_${item.key}`"
-          :is-active="activeTab === item.key"
+          :is-active="activeTab === item.key || activeParentTab === item.key"
           @click="$emit('tab-click', { activeKey: item.key })"
         >
-          <IconContainer :is-active="activeTab === item.key">
+          <IconContainer
+            :is-active="activeTab === item.key || activeParentTab === item.key"
+          >
             <Icon color="#fff" cursor="pointer" :name="item.icon" size="18px" />
           </IconContainer>
           <ListText>{{ $gettext(item.label) }}</ListText>

package/src/components/stringDesign/DropdownMenu/index.vue

@@ -30,9 +30,6 @@
               <IconPlaceholder v-else />
             </IconWrapper>
             <TextContainer
-              :is-archived="
-                item.statusActive === false && !!item.companyComponentLibraryId
-              "
               :style="{ marginLeft: item.type == 'optimizer' ? '32px' : '0' }"
             >
               <TitleText :title="item.model">
@@ -43,20 +40,6 @@
                     : ''
                 }}
                 {{ item.model }}
-                <InfoTextWrapper>
-                  <RCInfoText
-                    v-if="
-                      item.statusActive === false &&
-                      item.companyComponentLibraryId
-                    "
-                    button-type="error"
-                    :text="
-                      $gettext(
-                        `Component has been archived and shouldn't be used`
-                      )
-                    "
-                  />
-                </InfoTextWrapper>
               </TitleText>
               <TitleSubText>
                 <span>{{ item.brandName }}</span>
@@ -434,7 +417,7 @@
   import RCIcon from '../../icon'
   import ButtonIcon from '../../buttons/buttonIcon'
   import { numberToString } from '../../../helpers/numberConverter'
-  import RCInfoText from '../../infoText'
+
   const PageContainer = styled.div`
     position: relative;
   `
@@ -461,23 +444,16 @@
     margin-left: 32px;
     margin-top: 4px;
   `
-  const textContainerAttr = { isArchived: Boolean }
-  const TextContainer = styled('div', textContainerAttr)`
+
+  const TextContainer = styled.div`
     display: grid;
-    color: ${(props) => (props.isArchived ? props.theme.colors.red : 'white')};
-  `
-  const InfoTextWrapper = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-left: 8px;
   `
+
   const TitleText = styled.div`
     font-size: 14px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    display: flex;
   `
 
   const TitleSubText = styled.div`
@@ -732,8 +708,6 @@
   export default {
     name: 'DropdownMenu',
     components: {
-      InfoTextWrapper,
-      RCInfoText,
       SectionContainer,
       TitleContainer,
       IconsContainer,