@eturnity/eturnity_reusable_components 7.51.2 → 7.51.4

package/src/components/infoCard/infoCard.spec.js

@@ -0,0 +1,56 @@
+import { mount } from '@vue/test-utils'
+import RCInfoCard from '@/components/infoCard'
+import RCIcon from '@/components/icon'
+import defaultInfoCardProps from './defaultProps'
+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('mocked-icon-url.svg')),
+}))
+
+describe('RCInfoCard.vue', () => {
+  it('info card is rendered with icon and correct text', async () => {
+    const wrapper = mount(RCInfoCard, {
+      props: { ...defaultInfoCardProps },
+      slots: {
+        default: defaultInfoCardProps.default,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    const iconComponent = wrapper.findComponent(RCIcon)
+    const infoCardText = wrapper.find(
+      '[data-test-id="info_card_text_container"]'
+    )
+
+    expect(iconComponent.exists()).toBe(true)
+    expect(infoCardText.exists()).toBe(true)
+    expect(infoCardText.text()).toContain(defaultInfoCardProps.default)
+  }),
+    it('info card rendered with type info have correct computed values', async () => {
+      const wrapper = mount(RCInfoCard, {
+        props: { ...defaultInfoCardProps },
+        slots: {
+          default: defaultInfoCardProps.default,
+        },
+        global: {
+          provide: {
+            theme,
+          },
+        },
+      })
+
+      expect(wrapper.vm.isInfo).toBe(true)
+      expect(wrapper.vm.isWarning).toBe(false)
+
+      await wrapper.setProps({ type: 'warning' })
+
+      expect(wrapper.vm.isInfo).toBe(false)
+      expect(wrapper.vm.isWarning).toBe(true)
+    })
+})

package/src/components/infoText/index.vue

@@ -2,14 +2,16 @@
   <PageContainer ref="container">
     <div
       ref="icon"
-      @click="openTrigger === 'onClick' && toggleInfo()"
-      @mouseenter="openTrigger === 'onHover' && showInfo()"
-      @mouseleave="openTrigger === 'onHover' && hideInfo()"
+      data-test-id="infoText_trigger"
+      @click=";(isMobile || openTrigger === 'onClick') && toggleInfo()"
+      @mouseenter="!isMobile && openTrigger === 'onHover' && showInfo()"
+      @mouseleave="!isMobile && openTrigger === 'onHover' && hideInfo()"
     >
       <IconComponent
-        :color="iconColor"
-        cursor="pointer"
-        name="info"
+        :color="iconColor || computedIconColor"
+        :cursor="isDisabled ? 'not-allowed' : 'pointer'"
+        :disabled="isDisabled"
+        :name="iconName"
         :size="size"
       />
     </div>
@@ -111,8 +113,9 @@
     },
     props: {
       text: {
-        type: String,
+        required: false,
         default: '',
+        type: String,
       },
       size: {
         type: String,
@@ -142,6 +145,20 @@
         type: String,
         default: '',
       },
+      iconName: {
+        type: String,
+        default: 'info',
+      },
+      iconColor: {
+        type: String,
+        default: null,
+        required: false,
+      },
+      isDisabled: {
+        type: Boolean,
+        default: false,
+        required: false,
+      },
     },
     setup(props) {
       const isVisible = ref(false)
@@ -155,6 +172,7 @@
       const boxStyle = ref({})
       const arrowStyle = ref({})
       const wrapperStyle = ref({})
+      const isMobile = ref(window.innerWidth <= 768)
 
       const textStyle = computed(() => ({
         fontSize: props.image ? '12px' : '13px',
@@ -287,7 +305,10 @@
       }
 
       const handleClickOutside = (event) => {
-        if (props.openTrigger === 'onClick' && isVisible.value) {
+        if (
+          (props.openTrigger === 'onClick' || isMobile.value) &&
+          isVisible.value
+        ) {
           const clickedElement = event.target
           if (
             infoBox.value &&
@@ -299,9 +320,14 @@
         }
       }
 
+      const handleResize = () => {
+        isMobile.value = window.innerWidth <= 768
+        updatePosition()
+      }
+
       onMounted(() => {
         window.addEventListener('scroll', handleScroll, { passive: true })
-        window.addEventListener('resize', updatePosition)
+        window.addEventListener('resize', handleResize)
         document.addEventListener('scroll', handleScroll, {
           passive: true,
           capture: true,
@@ -311,7 +337,7 @@
 
       onUnmounted(() => {
         window.removeEventListener('scroll', handleScroll)
-        window.removeEventListener('resize', updatePosition)
+        window.removeEventListener('resize', handleResize)
         document.removeEventListener('scroll', handleScroll, { capture: true })
         document.removeEventListener('click', handleClickOutside)
       })
@@ -339,10 +365,11 @@
         wrapperStyle,
         textStyle,
         onImageLoad,
+        isMobile,
       }
     },
     computed: {
-      iconColor() {
+      computedIconColor() {
         return this.buttonType === 'error'
           ? theme.colors.red
           : theme.colors.mediumGray

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

@@ -19,7 +19,7 @@
       <CheckWrapper :has-label="hasLabel">
         <span class="checkmark"></span>
       </CheckWrapper>
-      <LabelText v-if="hasLabel">
+      <LabelText v-if="hasLabel" :is-disabled="isDisabled">
         {{ label }}
       </LabelText>
     </Container>
@@ -90,18 +90,20 @@
           ? '16px'
           : '25px'};
       background-color: ${(props) =>
-        props.isChecked
+        props.isDisabled
+          ? props.theme.colors.lightGray
+          : props.isChecked
           ? props.backgroundColor
             ? props.backgroundColor
             : props.theme.colors.green
-          : props.isDisabled
-          ? props.theme.colors.lightGray
           : props.theme.colors.white};
       border-radius: 4px;
       border: 1px solid
         ${(props) =>
           props.isChecked
-            ? props.backgroundColor
+            ? props.isDisabled
+              ? props.theme.colors.lightGray
+              : props.backgroundColor
               ? props.backgroundColor
               : props.theme.colors.green
             : props.theme.colors.mediumGray};
@@ -140,7 +142,11 @@
           : '10px'};
       border: solid
         ${(props) =>
-          props.checkColor ? props.checkColor : props.theme.colors.white};
+          props.isDisabled
+            ? props.theme.colors.green
+            : props.checkColor
+            ? props.checkColor
+            : props.theme.colors.white};
       border-width: ${(props) =>
         props.size === 'medium'
           ? '0 3px 3px 0'
@@ -160,11 +166,16 @@
     width: 0;
   `
 
-  const LabelText = styled.div`
+  const LabelTextAttrs = {
+    isDisabled: Boolean,
+  }
+  const LabelText = styled('div', LabelTextAttrs)`
     font-size: 13px;
     display: grid;
-    align-items: flex-start;
+    align-items: center;
     min-height: 18px;
+    color: ${(props) =>
+      props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
   `
 
   export default {

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

@@ -13,7 +13,11 @@
     </LabelSlotWrapper>
 
     <LabelWrapper v-if="labelText">
-      <LabelText :data-id="labelDataId" :label-font-color="labelFontColor">
+      <LabelText
+        :data-id="labelDataId"
+        :label-font-color="labelFontColor"
+        :label-font-weight="labelFontWeight"
+      >
         {{ labelText }}
       </LabelText>
 
@@ -28,11 +32,16 @@
         v-bind="$attrs"
         ref="inputField1"
         :align-items="alignItems"
-        :background-color="backgroundColor"
-        :border-color="borderColor"
+        :background-color="
+          colorMode === 'transparent' ? 'transparent' : backgroundColor
+        "
+        :border-color="
+          colorMode === 'transparent' && !borderColor ? 'white' : borderColor
+        "
+        :color-mode="colorMode"
         :data-id="inputDataId"
         :disabled="disabled"
-        :font-color="fontColor"
+        :font-color="colorMode === 'transparent' ? 'white' : fontColor"
         :font-size="fontSize"
         :has-label-slot="hasLabelSlot"
         :has-slot="hasSlot"
@@ -44,6 +53,7 @@
         :min-width="minWidth"
         :no-border="noBorder"
         :placeholder="displayedPlaceholder"
+        :show-arrow-controls="showArrowControls"
         :show-linear-unit-name="showLinearUnitName"
         :slot-size="slotSize"
         :text-align="textAlign"
@@ -51,6 +61,8 @@
         @blur="onInputBlur($event)"
         @focus="focusInput()"
         @input="onInput($event)"
+        @keydown.down="decrementValue"
+        @keydown.up="incrementValue"
         @keyup.enter="onEnterPress"
       />
       <SlotContainer v-if="hasSlot" :is-error="isError" :slot-size="slotSize">
@@ -79,7 +91,7 @@
           @input-change="$emit('select-change', $event)"
         >
           <template #selector>
-            <SelectText>{{ getSelectValue }}</SelectText>
+            <SelectText>{{ getSelectValue() }}</SelectText>
           </template>
           <template #dropdown>
             <RCOption
@@ -92,6 +104,31 @@
           </template>
         </RCSelect>
       </SelectWrapper>
+
+      <ArrowControls
+        v-if="!disabled && showArrowControls"
+        :color-mode="colorMode"
+      >
+        <ArrowButton @click="incrementValue">
+          <Icon
+            :color="colorMode === 'transparent' ? 'white' : undefined"
+            name="arrow_up"
+            size="8px"
+          />
+        </ArrowButton>
+        <ArrowDivider :color-mode="colorMode" />
+        <ArrowButton
+          :is-disabled="textInput <= minNumber"
+          @click="decrementValue"
+        >
+          <Icon
+            :color="colorMode === 'transparent' ? 'white' : undefined"
+            :disabled="textInput <= minNumber"
+            name="arrow_down"
+            size="8px"
+          />
+        </ArrowButton>
+      </ArrowControls>
     </InputWrapper>
     <ErrorMessage v-if="isError">{{ errorMessage }}</ErrorMessage>
   </Container>
@@ -123,6 +160,7 @@
   //     labelInfoAlign="left"
   //     :minNumber="0"
   //     fontColor="blue"
+  //     colorMode="transparent" // Makes background transparent, border white, and font white
   // >
   //<template name=label><img>....</template>
   //</inputNumber>
@@ -156,8 +194,11 @@
     isInteractive: Boolean,
     alignItems: String,
     labelFontColor: String,
+    labelFontWeight: String,
     borderColor: String,
     showLinearUnitName: Boolean,
+    colorMode: String,
+    showArrowControls: Boolean,
   }
 
   const Container = styled('div', inputProps)`
@@ -181,9 +222,20 @@
         : '1px solid ' + props.theme.colors.grey4};
     height: ${(props) => props.inputHeight};
     max-height: ${(props) => props.inputHeight};
-    padding: 0 10px;
-    padding-right: ${({ slotSize, isError, showLinearUnitName }) =>
-      slotSize
+    padding: ${({ colorMode }) =>
+      colorMode === 'transparent' ? '10px 15px' : '0 10px'};
+    padding-right: ${({
+      slotSize,
+      isError,
+      showLinearUnitName,
+      colorMode,
+      showArrowControls,
+    }) =>
+      showArrowControls
+        ? '40px'
+        : colorMode === 'transparent'
+        ? '0'
+        : slotSize
         ? isError && !showLinearUnitName
           ? 'calc(' + slotSize + ' + 24px)'
           : 'calc(' + slotSize + ' + 10px)'
@@ -201,20 +253,26 @@
       props.isError
         ? props.theme.colors.grey6
         : props.isDisabled
-        ? props.theme.colors.grey2
+        ? props.colorMode === 'transparent'
+          ? props.theme.colors.white
+          : props.theme.colors.grey2
         : props.fontColor
         ? props.fontColor + ' !important'
         : props.theme.colors.black};
     background-color: ${(props) =>
-      props.backgroundColor
+      props.isDisabled
+        ? props.colorMode === 'transparent'
+          ? 'transparent'
+          : props.theme.colors.disabled
+        : props.backgroundColor
         ? props.backgroundColor + ' !important'
         : props.theme.colors.white};
     width: ${(props) =>
       props.inputWidth && !props.hasLabelSlot ? props.inputWidth : '100%'};
     min-width: ${(props) => (props.minWidth ? props.minWidth : 'unset')};
-    background-color: ${(props) =>
-      props.isDisabled ? props.theme.colors.grey5 : '#fff'};
     box-sizing: border-box;
+    opacity: ${(props) =>
+      props.isDisabled && props.colorMode === 'transparent' ? '0.4' : '1'};
 
     &::placeholder {
       color: ${(props) => props.theme.colors.grey2};
@@ -225,6 +283,55 @@
     }
   `
 
+  const ArrowControlsProps = {
+    colorMode: String,
+  }
+  const ArrowControls = styled('div', ArrowControlsProps)`
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    display: grid;
+    grid-template-rows: 1fr auto 1fr;
+    align-items: center;
+    justify-items: center;
+    cursor: pointer;
+    width: 30px;
+    background-color: ${(props) =>
+      props.colorMode === 'transparent'
+        ? 'transparent'
+        : props.theme.colors.white};
+    border-left: 1px solid
+      ${(props) =>
+        props.colorMode === 'transparent'
+          ? props.theme.colors.white
+          : props.theme.colors.black};
+  `
+
+  const ArrowButtonProps = {
+    isDisabled: Boolean,
+  }
+  const ArrowButton = styled('button', ArrowButtonProps)`
+    background: transparent;
+    opacity: ${(props) => (props.isDisabled ? '0.2' : '1')};
+    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+  `
+
+  const ArrowDivider = styled('div', ArrowControlsProps)`
+    width: 100%;
+    height: 1px;
+    background-color: ${(props) =>
+      props.colorMode === 'transparent'
+        ? props.theme.colors.white
+        : props.theme.colors.black};
+  `
+
   const InputWrapper = styled.span`
     position: relative;
   `
@@ -307,7 +414,7 @@
       props.theme.colors[props.labelFontColor]
         ? props.theme.colors[props.labelFontColor]
         : props.labelFontColor};
-    font-weight: 700;
+    font-weight: ${(props) => props.labelFontWeight};
   `
 
   const IconAttrs = { size: String, marginRight: Number }
@@ -359,140 +466,184 @@
       SelectWrapper,
       SelectText,
       Divider,
+      ArrowControls,
+      ArrowButton,
+      ArrowDivider,
     },
     inheritAttrs: false,
     props: {
       placeholder: {
+        type: String,
         required: false,
         default: '',
       },
       isError: {
+        type: Boolean,
         required: false,
         default: false,
       },
       inputWidth: {
+        type: String,
         required: false,
         default: null,
       },
       minWidth: {
+        type: String,
         required: false,
         default: null,
       },
       inputHeight: {
+        type: String,
         required: false,
         default: '40px',
       },
       value: {
+        type: [String, Number],
         required: true,
         default: null,
       },
       clearInput: {
+        type: Boolean,
         required: false,
         default: false,
       },
       alignItems: {
+        type: String,
         required: false,
         default: 'vertical',
       },
       errorMessage: {
+        type: String,
         required: false,
         default: 'Please insert a correct number',
       },
       numberPrecision: {
+        type: Number,
         required: false,
         default: 0,
       },
       minDecimals: {
+        type: Number,
         required: false,
         default: 0,
       },
       unitName: {
+        type: String,
         required: false,
         default: '',
       },
       showLinearUnitName: {
+        type: Boolean,
         required: false,
         default: false,
       },
       disabled: {
+        type: Boolean,
         required: false,
         default: false,
       },
       noBorder: {
+        type: Boolean,
         required: false,
         default: false,
       },
       borderColor: {
+        type: String,
         required: false,
+        default: null,
       },
       textAlign: {
+        type: String,
         required: false,
         default: 'left',
       },
       fontSize: {
+        type: String,
         required: false,
         default: '13px',
       },
       isInteractive: {
+        type: Boolean,
         required: false,
         default: false,
       },
       interactionStep: {
+        type: Number,
         required: false,
         default: 1,
       },
       labelText: {
+        type: String,
         required: false,
         default: null,
       },
       labelInfoText: {
+        type: String,
         required: false,
         default: null,
       },
       labelInfoAlign: {
+        type: String,
         required: false,
         default: 'left',
       },
       defaultNumber: {
+        type: Number,
         required: false,
         default: null,
       },
       minNumber: {
+        type: Number,
         required: false,
         default: null,
       },
       fontColor: {
+        type: String,
         required: false,
         default: null,
       },
       backgroundColor: {
+        type: String,
         required: false,
         default: null,
       },
       numberToStringEnabled: {
+        type: Boolean,
         required: false,
         default: true,
       },
       allowNegative: {
+        type: Boolean,
         required: false,
         default: true,
       },
       slotSize: {
+        type: String,
         required: false,
+        default: null,
       },
       labelFontColor: {
+        type: String,
         required: false,
         default: 'eturnityGrey',
       },
+      labelFontWeight: {
+        type: String,
+        required: false,
+        default: '700',
+      },
       focus: {
+        type: Boolean,
         required: false,
         default: false,
       },
       labelDataId: {
+        type: String,
         required: false,
         default: '',
       },
       inputDataId: {
+        type: String,
         required: false,
         default: '',
       },
@@ -516,6 +667,14 @@
         type: Boolean,
         default: false,
       },
+      colorMode: {
+        type: String,
+        default: '',
+      },
+      showArrowControls: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {
@@ -585,6 +744,36 @@
       }
     },
     methods: {
+      incrementValue() {
+        const currentValue = Math.max(
+          parseFloat(this.textInput || 0),
+          this.minNumber || 0
+        )
+        const newValue = currentValue + this.interactionStep
+        this.textInput = numberToString({
+          value: newValue,
+          numberPrecision: this.numberPrecision,
+          minDecimals: this.minDecimals,
+        })
+        this.$emit('on-input', newValue)
+        this.$emit('input-change', newValue)
+      },
+      decrementValue() {
+        const currentValue = Math.max(
+          parseFloat(this.textInput || 0),
+          this.minNumber || 0
+        )
+        const newValue = currentValue - this.interactionStep
+        if (this.allowNegative || newValue >= 0) {
+          this.textInput = numberToString({
+            value: newValue,
+            numberPrecision: this.numberPrecision,
+            minDecimals: this.minDecimals,
+          })
+          this.$emit('on-input', newValue)
+          this.$emit('input-change', newValue)
+        }
+      },
       onEnterPress() {
         this.$emit('on-enter-click')
         this.$refs.inputField1.$el.blur()
@@ -680,6 +869,7 @@
             this.$emit('on-input', evaluatedVal)
           }
         }
+        this.textInput = evaluatedVal
       },
       onInputBlur(e) {
         this.isFocused = false