@eturnity/eturnity_reusable_components 8.19.8-EPDM-14690.3 → 8.19.8-EPDM-13664.1

package/src/components/infoText/defaultProps.js

@@ -0,0 +1,16 @@
+export default {
+  text: 'default text',
+  size: '14px',
+  infoPosition: 'bottom',
+  alignArrow: 'center',
+  openTrigger: 'onHover',
+  width: '165px',
+  maxWidth: '165px',
+  shouldUseTeleport: false,
+  dotColor: '#00009f',
+  type: 'info',
+  iconTextContent: {
+    iconName: 'error',
+    text: 'Sample Text',
+  },
+}

package/src/components/infoText/index.vue

@@ -1,6 +1,7 @@
 <template>
   <PageContainer
     ref="container"
+    data-test-id="infoText_container"
     :type="type"
     @click=";(isMobile || openTrigger === 'onClick') && toggleInfo()"
     @mouseenter="!isMobile && openTrigger === 'onHover' && showInfo()"
@@ -15,40 +16,37 @@
         :is-disabled="isDisabled"
         :padding="padding"
       >
-        <template v-if="!$slots.trigger">
-          <LabelWrapper
-            v-if="labelText && labelAlign === 'left'"
-            :color="iconColor || computedIconColor"
-            :size="labelSize"
-          >
-            {{ labelText }}
-          </LabelWrapper>
-          <Dot
-            v-if="type === 'dot'"
-            :color="dotColor"
-            data-test-id="infoText_dot"
-          />
-          <IconComponent
-            v-else-if="!noIcon"
-            :color="iconColor || computedIconColor"
-            :cursor="isDisabled ? 'not-allowed' : 'pointer'"
-            :disabled="isDisabled"
-            :hovered-color="iconColor || computedIconColor"
-            :name="iconName"
-            :size="size"
-          />
-          <LabelWrapper
-            v-if="labelText && labelAlign === 'right'"
-            :color="iconColor || computedIconColor"
-            :size="labelSize"
-          >
-            {{ labelText }}
-          </LabelWrapper>
-        </template>
-        <slot name="trigger"></slot>
+        <LabelWrapper
+          v-if="labelText && labelAlign === 'left'"
+          :color="iconColor || computedIconColor"
+          :size="labelSize"
+        >
+          {{ labelText }}
+        </LabelWrapper>
+        <Dot
+          v-if="type === 'dot'"
+          :color="dotColor"
+          data-test-id="infoText_dot"
+        />
+        <IconComponent
+          v-else-if="!noIcon"
+          :color="iconColor || computedIconColor"
+          :cursor="isDisabled ? 'not-allowed' : 'pointer'"
+          :disabled="isDisabled"
+          :hovered-color="iconColor || computedIconColor"
+          :name="iconName"
+          :size="size"
+        />
+        <LabelWrapper
+          v-if="labelText && labelAlign === 'right'"
+          :color="iconColor || computedIconColor"
+          :size="labelSize"
+        >
+          {{ labelText }}
+        </LabelWrapper>
       </IconWrapper>
     </div>
-    <Teleport v-if="isVisible && !!text" to="body">
+    <Teleport v-if="isVisible" to="body">
       <TextWrapper data-test-id="info_text_wrapper" :style="wrapperStyle">
         <TextOverlay
           ref="infoBox"
@@ -230,7 +228,7 @@
       },
       infoPosition: {
         required: false,
-        default: null,
+        default: 'bottom',
         type: String,
       },
       maxWidth: {
@@ -290,6 +288,11 @@
         default: '',
         required: false,
       },
+      contentBackgroundColor: {
+        type: String,
+        default: '',
+        required: false,
+      },
       borderRadius: {
         type: String,
         default: '',
@@ -366,9 +369,7 @@
           { position: 'left', space: spaceLeft },
         ].sort((a, b) => b.space - a.space)
 
-        const bestPosition = props.infoPosition
-          ? props.infoPosition
-          : positions[0].position
+        const bestPosition = positions[0].position
 
         let top, left, arrowPosition
 
@@ -471,7 +472,9 @@
           width: '100%',
           maxWidth: props.maxWidth,
           overflowY: 'auto',
-          backgroundColor: props.image
+          backgroundColor: props.contentBackgroundColor
+            ? props.contentBackgroundColor
+            : props.image
             ? theme.colors.white
             : props.appTheme === 'light'
             ? theme.colors.black

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

@@ -1,7 +1,8 @@
 /* eslint-disable */
 import { mount } from '@vue/test-utils'
 import InfoText from '@/components/infoText'
-import theme from '@/assets/theme'
+import defaultProps from './defaultProps'
+import IconTextContent from './templates/iconTextContent.vue'
 
 jest.mock('@/components/icon/iconCache.mjs', () => ({
   // need to mock this due to how jest handles import.meta
@@ -13,31 +14,19 @@ describe('InfoText Component', () => {
 
   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',
-      },
+      props: defaultProps,
       global: {
-        provide: {
-          theme,
-        },
         stubs: {
-          teleport: true
-        }
+          teleport: true,
+        },
       },
     })
   })
 
   test('renders InfoText component with default props', () => {
-    expect(wrapper.find('[data-test-id="infoText_info"]').exists()).toBe(true)
+    expect(wrapper.find('[data-test-id="infoText_container"]').exists()).toBe(
+      true
+    )
     expect(wrapper.vm.text).toContain('default text')
     expect(wrapper.vm.size).toContain('14px')
     expect(wrapper.vm.infoPosition).toContain('bottom')
@@ -52,7 +41,7 @@ describe('InfoText Component', () => {
     )
 
     //should see text upon click
-    await wrapper.find('[data-test-id="infoText_trigger"]').trigger('click')
+    await wrapper.trigger('click')
     expect(wrapper.vm.isVisible).toBe(true)
 
     expect(wrapper.find('[data-test-id="info_text_wrapper"]').exists()).toBe(
@@ -64,4 +53,34 @@ describe('InfoText Component', () => {
     await wrapper.setProps({ type: 'dot' })
     expect(wrapper.find('[data-test-id="infoText_dot"]').exists()).toBe(true)
   })
+
+  test('iconTextContent slot is correctly rendered', async () => {
+    // override
+    const props = defaultProps.iconTextContent
+    wrapper = mount(InfoText, {
+      props: defaultProps,
+      slots: {
+        default: `<IconTextContent icon-name="${props.iconName}" text="${props.text}" />`,
+      },
+      global: {
+        stubs: {
+          teleport: true,
+        },
+        components: {
+          IconTextContent,
+        },
+      },
+    })
+
+    await wrapper.trigger('mouseenter')
+    expect(wrapper.vm.isVisible).toBe(true)
+
+    const container = wrapper.find('[data-test-id="iconTextContent_container"]')
+    const icon = container.find('[data-test-id="iconTextContent_icon"]')
+    const text = container.find('[data-test-id="iconTextContent_text"]')
+    expect(container.exists()).toBe(true)
+    expect(icon.exists()).toBe(true)
+    expect(text.exists()).toBe(true)
+    expect(text.text()).toBe(props.text)
+  })
 })

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

@@ -1,4 +1,6 @@
+import theme from '../../assets/theme'
 import InfoText from './index.vue'
+import IconTextContent from './templates/iconTextContent.vue'
 
 export default {
   title: 'infoText',
@@ -46,3 +48,29 @@ export const OnClick = {
     openTrigger: 'onClick',
   },
 }
+
+export const IconTextContentTemplate = {
+  args: {
+    ...Default.args,
+    contentBackgroundColor: 'black',
+    iconName: 'warning_triangle',
+    iconColor: theme.colors.yellow,
+    size: '18px',
+  },
+  render: (args) => ({
+    components: { InfoText, IconTextContent },
+    setup() {
+      return { args }
+    },
+    template: `
+      <InfoText v-bind="args">
+        <IconTextContent
+          icon-name="warning_triangle"
+          text="This is a sample text with an icon"
+          icon-size="${args.size}"
+          icon-color="${args.iconColor}"
+        />
+      </InfoText>
+    `,
+  }),
+}

package/src/components/infoText/templates/iconTextContent.vue

@@ -0,0 +1,105 @@
+<template>
+  <Container data-test-id="iconTextContent_container">
+    <RCIcon
+      :color="iconColor"
+      data-test-id="iconTextContent_icon"
+      :name="iconName"
+      :size="iconSize"
+    />
+    <TextWrapper
+      data-test-id="iconTextContent_text"
+      :font-color="fontColor"
+      :font-size="fontSize"
+    >
+      {{ text }}
+      <slot data-test-id="iconTextContent_slot"></slot>
+    </TextWrapper>
+  </Container>
+</template>
+
+<script>
+  // import InfoText from "@eturnity/eturnity_reusable_components/src/components/infoText"
+  // import IconTextContent from "@eturnity/eturnity_reusable_components/src/components/infoText/templates/iconTextContent"
+  //To use:
+  // <InfoText
+  //      icon-color="red"
+  //      icon-name="error"
+  //      size="20px"
+  //      open-trigger="onClick"
+  // >
+  //   <IconTextContent
+  //     icon-name="error"
+  //     text="Text"
+  //     icon-size="18px"
+  //     icon-color="red"
+  //   />
+  // </InfoText>
+
+  import styled from 'vue3-styled-components'
+  import theme from '../../../assets/theme.js'
+  import RCIcon from '../../icon'
+
+  const Container = styled('div')`
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 8px;
+  `
+
+  const TextAttrs = {
+    fontSize: String,
+    fontColor: String,
+  }
+  const TextWrapper = styled('div', TextAttrs)`
+    font-size: ${(props) => props.fontSize};
+    color: ${(props) => props.fontColor};
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    font-weight: 400;
+    line-height: 150%;
+    letter-spacing: 0%;
+    vertical-align: middle;
+  `
+
+  export default {
+    name: 'IconTextContent',
+    components: {
+      Container,
+      TextWrapper,
+      RCIcon,
+    },
+    props: {
+      iconName: {
+        type: String,
+        required: true,
+      },
+      text: {
+        type: String,
+        required: true,
+      },
+      iconSize: {
+        type: String,
+        required: false,
+        default: '18px',
+      },
+      iconColor: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      fontSize: {
+        type: String,
+        required: false,
+        default: '11px',
+      },
+      fontColor: {
+        type: String,
+        required: false,
+        default: theme.colors.white,
+      },
+    },
+  }
+</script>

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

@@ -30,61 +30,7 @@
       />
     </LabelWrapper>
     <InputWrapper>
-      <InputInfoText
-        v-if="!!inputInfoText"
-        info-position="bottom"
-        :text="inputInfoText"
-      >
-        <template #trigger>
-          <InputContainer
-            v-bind="$attrs"
-            ref="inputField1"
-            :align-items="alignItems"
-            :background-color="
-              colorMode === 'transparent' ? 'transparent' : backgroundColor
-            "
-            :border-color="
-              colorMode === 'transparent' && !borderColor
-                ? 'white'
-                : borderColor
-            "
-            :color-mode="colorMode"
-            :data-id="inputDataId"
-            :data-qa-id="dataQaId"
-            :disabled="disabled && !isDisabledStyledOnly"
-            :font-color="colorMode === 'transparent' ? 'white' : fontColor"
-            :font-size="fontSize"
-            :has-label-slot="hasLabelSlot"
-            :has-slot="hasSlot"
-            :has-unit="unitName && !!unitName.length"
-            :input-height="inputHeight"
-            :is-border-error-only="isBorderErrorOnly"
-            :is-disabled="disabled"
-            :is-error="isError"
-            :is-info-border="isInfoBorder"
-            :is-interactive="isInteractive"
-            :min-width="minWidth"
-            :no-border="noBorder"
-            :placeholder="displayedPlaceholder"
-            :read-only="isReadOnly"
-            :readonly="isReadOnly"
-            :show-arrow-controls="showArrowControls"
-            :show-linear-unit-name="showLinearUnitName"
-            :slot-size="slotSize"
-            :text-align="textAlign"
-            :value="formatWithCurrency(value)"
-            @blur="onInputBlur($event)"
-            @focus="focusInput()"
-            @input="onInput($event)"
-            @keydown.down="decrementValue"
-            @keydown.up="incrementValue"
-            @keyup.enter="onEnterPress"
-          />
-        </template>
-      </InputInfoText>
-
       <InputContainer
-        v-else
         v-bind="$attrs"
         ref="inputField1"
         :align-items="alignItems"
@@ -97,23 +43,20 @@
         :color-mode="colorMode"
         :data-id="inputDataId"
         :data-qa-id="dataQaId"
-        :disabled="disabled && !isDisabledStyledOnly"
+        :disabled="disabled"
         :font-color="colorMode === 'transparent' ? 'white' : fontColor"
         :font-size="fontSize"
         :has-label-slot="hasLabelSlot"
         :has-slot="hasSlot"
         :has-unit="unitName && !!unitName.length"
         :input-height="inputHeight"
-        :is-border-error-only="isBorderErrorOnly"
         :is-disabled="disabled"
         :is-error="isError"
-        :is-info-border="isInfoBorder"
         :is-interactive="isInteractive"
         :min-width="minWidth"
         :no-border="noBorder"
         :placeholder="displayedPlaceholder"
         :read-only="isReadOnly"
-        :readonly="isReadOnly"
         :show-arrow-controls="showArrowControls"
         :show-linear-unit-name="showLinearUnitName"
         :slot-size="slotSize"
@@ -126,7 +69,6 @@
         @keydown.up="incrementValue"
         @keyup.enter="onEnterPress"
       />
-
       <SlotContainer v-if="hasSlot" :is-error="isError" :slot-size="slotSize">
         <slot></slot>
       </SlotContainer>
@@ -138,7 +80,7 @@
         >{{ unitName }}</UnitContainer
       >
       <IconWrapper
-        v-if="isError && !showLinearUnitName && !isBorderErrorOnly"
+        v-if="isError && !showLinearUnitName"
         :margin-right="showSelect ? selectWidth : 0"
         size="16px"
       >
@@ -192,9 +134,7 @@
         </ArrowButton>
       </ArrowControls>
     </InputWrapper>
-    <ErrorMessage v-if="isError && errorMessage">{{
-      errorMessage
-    }}</ErrorMessage>
+    <ErrorMessage v-if="isError">{{ errorMessage }}</ErrorMessage>
   </Container>
 </template>
 
@@ -265,8 +205,6 @@
     colorMode: String,
     showArrowControls: Boolean,
     readOnly: Boolean,
-    isBorderErrorOnly: Boolean,
-    isInfoBorder: Boolean,
   }
 
   const Container = styled('div', inputProps)`
@@ -279,9 +217,7 @@
 
   const InputContainer = styled('input', inputProps)`
     border: ${(props) =>
-      props.isInfoBorder
-        ? '1px solid ' + props.theme.semanticColors.blue[500]
-        : props.isError
+      props.isError
         ? '1px solid ' + props.theme.colors.red
         : props.noBorder
         ? 'none'
@@ -300,17 +236,16 @@
       showLinearUnitName,
       colorMode,
       showArrowControls,
-      isBorderErrorOnly,
     }) =>
       showArrowControls
         ? '40px'
         : colorMode === 'transparent'
         ? '0'
         : slotSize
-        ? isError && !showLinearUnitName && !isBorderErrorOnly
+        ? isError && !showLinearUnitName
           ? 'calc(' + slotSize + ' + 24px)'
           : 'calc(' + slotSize + ' + 10px)'
-        : isError && !showLinearUnitName && !isBorderErrorOnly
+        : isError && !showLinearUnitName
         ? '24px'
         : '5px'};
     border-radius: ${(props) =>
@@ -522,10 +457,6 @@
     background-color: ${({ theme }) => theme.colors.grey4};
   `
 
-  const InputInfoText = styled(InfoText)`
-    width: 100%;
-  `
-
   export default {
     name: 'InputNumber',
     components: {
@@ -549,7 +480,6 @@
       ArrowControls,
       ArrowButton,
       ArrowDivider,
-      InputInfoText,
     },
     inheritAttrs: false,
     props: {
@@ -769,22 +699,6 @@
         type: Boolean,
         default: false,
       },
-      isBorderErrorOnly: {
-        type: Boolean,
-        default: false,
-      },
-      isInfoBorder: {
-        type: Boolean,
-        default: false,
-      },
-      inputInfoText: {
-        type: String,
-        default: '',
-      },
-      isDisabledStyledOnly: {
-        type: Boolean,
-        default: false,
-      },
     },
     data() {
       return {

package/src/components/pageTitle/index.vue

@@ -46,6 +46,7 @@
     color: ${(props) => (props.color ? props.color : props.theme.colors.black)};
     font-weight: 600;
     font-size: ${(props) => (props.fontSize ? props.fontSize : '20px')};
+    text-transform: ${(props) => (props.uppercase ? 'uppercase' : 'none')};
   `
 
   export default {