@eturnity/eturnity_reusable_components 8.19.8-EPDM-14690.4 → 8.19.8-EPDM-15590.0

package/src/components/barchart/styles/bottomFields.js

@@ -17,18 +17,18 @@ export const LabelsColumn = styled('div', { width: String })`
 
 export const LabelRow = styled.div`
   height: 32px;
-  padding-top: 5px;
   font-size: 12px;
   font-weight: 500;
   color: ${(props) => props.theme.semanticColors.teal[600]};
   display: flex;
-  align-items: center;
+  align-items: flex-start;
 `
 
 export const TotalRow = styled(LabelRow)``
 
 export const FieldsContainer = styled.div`
   flex: 1;
+  overflow-x: auto;
   scrollbar-width: none;
 
   &::-webkit-scrollbar {
@@ -59,22 +59,8 @@ export const InputGroup = styled('div', {
   barWidth: Number,
   isScrollable: Boolean,
 })`
-  ${(props) => (props.isScrollable ? 'min-width' : 'width')}: 70px;
+  ${(props) => (props.isScrollable ? 'min-width' : 'width')}:${(props) =>
+    props.barWidth}px;
   display: flex;
   justify-content: center;
-  position: relative;
-
-  input[readonly] {
-    border: 1px solid ${(props) => props.theme.colors.grey4} !important;
-  }
-`
-
-export const InfoCardContainer = styled('div', { yAxisWidth: String })`
-  margin-left: ${(props) => props.yAxisWidth};
-  padding: 12px;
-  margin-top: 12px;
-`
-
-export const InfoCardBody = styled.div`
-  padding: 8px 0;
 `

package/src/components/barchart/styles/chart.js

@@ -127,7 +127,6 @@ export const BarWrapper = styled.div`
   height: 100%;
   width: 100%;
   position: relative;
-  overflow: hidden;
 `
 
 export const BarSegment = styled('div', {

package/src/components/buttons/mainButton/index.vue

@@ -240,8 +240,6 @@
         return this.isDisabled
           ? this.theme.mainButton[this.appTheme][this.type][this.variant]
               .disabled.textColor
-          : this.iconColor
-          ? this.iconColor
           : this.theme.mainButton[this.appTheme][this.type][this.variant]
               .default.textColor
       },

package/src/components/errorMessage/index.vue

@@ -19,7 +19,7 @@
     background: ${(props) => props.theme.colors.red};
     padding: 10px;
     width: max-content;
-    /* max-width: 100%; */
+    max-width: 100%;
     min-width: min-content;
     font-size: 11px;
     font-weight: 400;

package/src/components/icon/index.vue

@@ -208,11 +208,9 @@
       !props.disableHover &&
       `
      &:hover svg path:not(.fix, .isStrokePath) {
-      ${`${props.fillType}: ${
-        props.theme.colors[props.hoveredColor] || props.color
-      };`}
+      ${`${props.fillType}: ${props.hoveredColor || props.color};`}
      &:hover svg isStrokePath:not(.fix) {
-      ${`stroke: ${props.theme.colors[props.hoveredColor] || props.color};`}
+      ${`stroke: ${props.hoveredColor || props.color};`}
     }
     &:hover + div {
       background-color: ${props.hoveredColor};

package/src/components/infoCard/index.vue

@@ -73,12 +73,7 @@
       type: {
         required: false,
         type: String,
-        default: 'info_simple',
-        validator(value) {
-          return ['info_simple', 'warning', 'error_minor', 'info'].includes(
-            value
-          )
-        },
+        default: 'info',
       },
       minWidth: {
         required: false,
@@ -117,11 +112,8 @@
       },
     },
     computed: {
-      isInfoSimple() {
-        // this property is used for tests
-        return this.type === 'info_simple'
-      },
       isInfo() {
+        // this property is used for tests
         return this.type === 'info'
       },
       isWarning() {
@@ -156,13 +148,9 @@
           stylesCollection.borderStyle = 'dashed'
           stylesCollection.borderColor = theme.colors.grey4
           stylesCollection.iconColor = theme.colors.red
-        } else if (this.isInfoSimple) {
+        } else {
           stylesCollection.borderStyle = 'dashed'
           stylesCollection.borderColor = theme.colors.grey4
-        } else {
-          stylesCollection.color = theme.semanticColors.teal[800]
-          stylesCollection.backgroundColor = theme.semanticColors.blue[300]
-          stylesCollection.iconColor = theme.semanticColors.teal[800]
         }
 
         return stylesCollection

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

@@ -45,19 +45,19 @@ describe('RCInfoCard.vue', () => {
         },
       })
 
-      expect(wrapper.vm.isInfoSimple).toBe(true)
+      expect(wrapper.vm.isInfo).toBe(true)
       expect(wrapper.vm.isWarning).toBe(false)
       expect(wrapper.vm.isErrorMinor).toBe(false)
 
       await wrapper.setProps({ type: 'warning' })
 
-      expect(wrapper.vm.isInfoSimple).toBe(false)
+      expect(wrapper.vm.isInfo).toBe(false)
       expect(wrapper.vm.isWarning).toBe(true)
       expect(wrapper.vm.isErrorMinor).toBe(false)
 
       await wrapper.setProps({ type: 'error_minor' })
 
-      expect(wrapper.vm.isInfoSimple).toBe(false)
+      expect(wrapper.vm.isInfo).toBe(false)
       expect(wrapper.vm.isWarning).toBe(false)
       expect(wrapper.vm.isErrorMinor).toBe(true)
     })

package/src/components/infoText/index.vue

@@ -15,40 +15,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 +227,7 @@
       },
       infoPosition: {
         required: false,
-        default: null,
+        default: 'bottom',
         type: String,
       },
       maxWidth: {
@@ -366,9 +363,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
 

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/inputs/radioButton/RadioButton.stories.js

@@ -58,6 +58,12 @@ Default.args = {
   ...defaultProps,
 }
 
+export const Disabled = Template.bind({})
+Disabled.args = {
+  ...defaultProps,
+  disabled: true,
+}
+
 export const BlueCheckmark = Template.bind({})
 BlueCheckmark.args = {
   ...defaultProps,

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

@@ -11,7 +11,7 @@
         :has-label="!!item.label"
         :has-slots="!!$slots[`input-${item.value}`]"
         :is-checked="selectedOption === item.value"
-        :is-disabled="item.disabled"
+        :is-disabled="isItemDisabled(item)"
         :size="size"
       >
         <Radio
@@ -19,7 +19,7 @@
           :data-id="`radio_button_${dataId}_option_${item.value}`"
           :data-qa-id="dataQaId"
           :data-test-id="'radioInput_' + item.value"
-          :disabled="item.disabled"
+          :disabled="isItemDisabled(item)"
           :name="'radioButtons_' + radioName"
           type="radio"
           :value="selectedOption"
@@ -30,7 +30,7 @@
           v-if="item.label"
           :color-mode="colorMode"
           :data-test-id="'radioLabel_' + item.value"
-          :is-disabled="item.disabled"
+          :is-disabled="isItemDisabled(item)"
         >
           {{ item.label }}
         </LabelText>
@@ -261,6 +261,11 @@
       LabelText,
     },
     props: {
+      disabled: {
+        default: false,
+        required: false,
+        type: Boolean,
+      },
       selectedOption: {
         required: true,
         type: [String, Number],
@@ -328,6 +333,9 @@
       isImageOpen(index) {
         return this.selectedImage === index
       },
+      isItemDisabled(item) {
+        return this.disabled || item.disabled
+      },
       toggleImageModal(value) {
         this.selectedImage = value
       },

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 {