@eturnity/eturnity_reusable_components 8.26.11-EPDM-15023.0 → 8.26.11-EPDM-11600.15

package/dist/main.es15.js

@@ -10,13 +10,11 @@ const ButtonAttrs = {
   type: String,
   isDisabled: Boolean,
   minWidth: String,
-  width: String,
   noWrap: Boolean,
   height: String,
   variant: String,
   buttonSize: String,
-  appTheme: String,
-  isActive: Boolean
+  appTheme: String
 };
 const ButtonContainer = styled("div", ButtonAttrs)`
     display: flex;
@@ -30,7 +28,7 @@ const ButtonContainer = styled("div", ButtonAttrs)`
   return (_d = (_c = (_b = (_a = props.theme) == null ? void 0 : _a.mainButton) == null ? void 0 : _b.size) == null ? void 0 : _c[props.buttonSize]) == null ? void 0 : _d.fontSize;
 }};
     color: ${(props) => props.isDisabled ? props.theme.mainButton[props.appTheme][props.type][props.variant].disabled.textColor : props.theme.mainButton[props.appTheme][props.type][props.variant].default.textColor};
-    background-color: ${(props) => props.isDisabled ? props.theme.mainButton[props.appTheme][props.type][props.variant].disabled.backgroundColor : props.isActive ? props.theme.mainButton[props.appTheme][props.type][props.variant].active.backgroundColor : props.theme.mainButton[props.appTheme][props.type][props.variant].default.backgroundColor};
+    background-color: ${(props) => props.isDisabled ? props.theme.mainButton[props.appTheme][props.type][props.variant].disabled.backgroundColor : props.theme.mainButton[props.appTheme][props.type][props.variant].default.backgroundColor};
     border: ${(props) => {
   const borderValue = props.isDisabled ? props.theme.mainButton[props.appTheme][props.type][props.variant].disabled.borderColor : props.theme.mainButton[props.appTheme][props.type][props.variant].default.borderColor;
   return borderValue ? "1px solid " + borderValue : "none";
@@ -43,7 +41,7 @@ const ButtonContainer = styled("div", ButtonAttrs)`
     ${(props) => props.noWrap ? `white-space: nowrap;` : ""};
     height: ${(props) => props.height};
     line-height: 1;
-    width: ${(props) => props.width};
+
     &:hover {
       background-color: ${(props) => props.isDisabled ? props.theme.mainButton[props.appTheme][props.type][props.variant].disabled.backgroundColor : props.theme.mainButton[props.appTheme][props.type][props.variant].hover.backgroundColor};
     }
@@ -107,11 +105,6 @@ const _sfc_main = {
       default: false,
       type: Boolean
     },
-    isActive: {
-      required: false,
-      default: false,
-      type: Boolean
-    },
     icon: {
       required: false,
       default: null,
@@ -146,11 +139,6 @@ const _sfc_main = {
       default: null,
       type: String
     },
-    width: {
-      required: false,
-      default: "auto",
-      type: String
-    },
     height: {
       required: false,
       default: "auto",
@@ -201,13 +189,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       "data-id": $props.dataId,
       "data-qa-id": $props.dataQaId,
       height: $props.height,
-      "is-active": $props.isActive,
       "is-disabled": $props.isDisabled,
       "min-width": $props.minWidth,
       "no-wrap": $props.noWrap,
       type: $props.type,
-      variant: $props.variant,
-      width: $props.width
+      variant: $props.variant
     }, {
       default: withCtx(() => [createVNode(_component_LabelComponent, {
         "has-icon": Boolean($props.icon)
@@ -222,7 +208,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         _: 1
       }, 8, ["has-icon"])]),
       _: 1
-    }, 8, ["id", "app-theme", "button-size", "data-id", "data-qa-id", "height", "is-active", "is-disabled", "min-width", "no-wrap", "type", "variant", "width"])]),
+    }, 8, ["id", "app-theme", "button-size", "data-id", "data-qa-id", "height", "is-disabled", "min-width", "no-wrap", "type", "variant"])]),
     _: 1
   });
 }

package/dist/main.es199.js

@@ -2,25 +2,19 @@ import "./main.es3.js";
 import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
 const _hoisted_1 = {
   xmlns: "http://www.w3.org/2000/svg",
-  width: "16",
-  height: "16",
+  width: "22",
+  height: "21",
   fill: "none"
 };
-const _hoisted_2 = /* @__PURE__ */ createBaseVNode("circle", {
-  cx: "20",
-  cy: "20",
-  r: "7"
-}, null, -1);
-const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
   fill: "#FF5656",
-  d: "M24.96 15.04c-2.722-2.72-7.198-2.72-9.92 0-2.72 2.722-2.72 7.198 0 9.92 2.722 2.72 7.198 2.72 9.92 0 2.72-2.722 2.72-7.11 0-9.92m-1.317 7.462-1.23 1.228-2.457-2.457-2.458 2.457-1.228-1.228 2.457-2.458-2.457-2.458 1.228-1.229 2.458 2.458 2.458-2.458 1.229 1.23-2.458 2.457z"
+  d: "M18.439 3.061C14.357-1.02 7.643-1.02 3.56 3.061-.52 7.143-.52 13.857 3.561 17.94c4.082 4.081 10.796 4.081 14.878 0 4.081-4.082 4.081-10.665 0-14.878m-1.975 11.191-1.843 1.844-3.687-3.687-3.686 3.687-1.844-1.844 3.687-3.686-3.687-3.687 1.844-1.843 3.686 3.687 3.687-3.687 1.843 1.843-3.687 3.687z"
 }, null, -1);
-const _hoisted_4 = [
-  _hoisted_2,
-  _hoisted_3
+const _hoisted_3 = [
+  _hoisted_2
 ];
 function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
 }
 const erase = { render };
 export {

package/dist/main.es21.js

@@ -503,7 +503,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         _: 1
       }, 8, ["color", "size"])) : createCommentVNode("", true)], 64)) : createCommentVNode("", true), createTextVNode(), renderSlot(_ctx.$slots, "trigger")]),
       _: 3
-    }, 8, ["background-color", "border-radius", "hovered-icon", "is-active", "is-disabled", "padding"])], 512), createTextVNode(), !$props.hideInfoText && $setup.isVisible && (!!$props.text || _ctx.$slots.default) ? (openBlock(), createBlock(Teleport, {
+    }, 8, ["background-color", "border-radius", "hovered-icon", "is-active", "is-disabled", "padding"])], 512), createTextVNode(), $setup.isVisible && (!!$props.text || _ctx.$slots.default) ? (openBlock(), createBlock(Teleport, {
       key: 0,
       to: "body"
     }, [createVNode(_component_TextWrapper, {

package/dist/main.es555.js

@@ -1,4 +1,4 @@
-const __vite_glob_0_174 = "data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjE2IiB2aWV3Ym94PSIxMiAxMiAxNiAxNiIgd2lkdGg9IjE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8Y2lyY2xlIGN4PSIyMCIgY3k9IjIwIiByPSI3Ij48L2NpcmNsZT4KPHBhdGggZD0iTTI0Ljk1OTIgMTUuMDQwOEMyMi4yMzgyIDEyLjMxOTcgMTcuNzYxOCAxMi4zMTk3IDE1LjA0MDggMTUuMDQwOEMxMi4zMTk3IDE3Ljc2MTggMTIuMzE5NyAyMi4yMzgyIDE1LjA0MDggMjQuOTU5MkMxNy43NjE4IDI3LjY4MDMgMjIuMjM4MiAyNy42ODAzIDI0Ljk1OTIgMjQuOTU5MkMyNy42ODAzIDIyLjIzODIgMjcuNjgwMyAxNy44NDk1IDI0Ljk1OTIgMTUuMDQwOFpNMjMuNjQyNiAyMi41MDE2TDIyLjQxMzggMjMuNzMwNEwxOS45NTYxIDIxLjI3MjdMMTcuNDk4NCAyMy43MzA0TDE2LjI2OTYgMjIuNTAxNkwxOC43MjczIDIwLjA0MzlMMTYuMjY5NiAxNy41ODYyTDE3LjQ5ODQgMTYuMzU3NEwxOS45NTYxIDE4LjgxNUwyMi40MTM4IDE2LjM1NzRMMjMuNjQyNiAxNy41ODYyTDIxLjE4NSAyMC4wNDM5TDIzLjY0MjYgMjIuNTAxNloiIGZpbGw9IiNGRjU2NTYiPjwvcGF0aD4KPC9zdmc+Cg==";
+const __vite_glob_0_174 = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMiAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xOC40Mzg5IDMuMDYxMTNDMTQuMzU3NCAtMS4wMjAzOCA3LjY0MjYzIC0xLjAyMDM4IDMuNTYxMTMgMy4wNjExM0MtMC41MjAzNzYgNy4xNDI2MyAtMC41MjAzNzYgMTMuODU3NCAzLjU2MTEzIDE3LjkzODlDNy42NDI2MyAyMi4wMjA0IDE0LjM1NzQgMjIuMDIwNCAxOC40Mzg5IDE3LjkzODlDMjIuNTIwNCAxMy44NTc0IDIyLjUyMDQgNy4yNzQzIDE4LjQzODkgMy4wNjExM1pNMTYuNDY0IDE0LjI1MjRMMTQuNjIwNyAxNi4wOTU2TDEwLjkzNDIgMTIuNDA5MUw3LjI0NzY1IDE2LjA5NTZMNS40MDQzOSAxNC4yNTI0TDkuMDkwOTEgMTAuNTY1OEw1LjQwNDM5IDYuODc5MzFMNy4yNDc2NSA1LjAzNjA1TDEwLjkzNDIgOC43MjI1N0wxNC42MjA3IDUuMDM2MDVMMTYuNDY0IDYuODc5MzFMMTIuNzc3NCAxMC41NjU4TDE2LjQ2NCAxNC4yNTI0WiIgZmlsbD0iI0ZGNTY1NiIvPgo8L3N2Zz4K";
 export {
   __vite_glob_0_174 as default
 };

package/dist/main.es8.js

@@ -342,7 +342,7 @@ const theme = (() => {
               borderColor: semanticColors.grey[300]
             },
             active: {
-              backgroundColor: semanticColors.purple[100],
+              backgroundColor: semanticColors.purple[50],
               textColor: semanticColors.purple[600],
               borderColor: semanticColors.grey[600]
             },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.26.11-EPDM-15023.0",
+  "version": "8.26.11-EPDM-11600.15",
   "files": [
     "dist",
     "src"

package/src/assets/svgIcons/erase.svg

@@ -1,4 +1,3 @@
-<svg fill="none" height="16" viewbox="12 12 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
-<circle cx="20" cy="20" r="7"></circle>
-<path d="M24.9592 15.0408C22.2382 12.3197 17.7618 12.3197 15.0408 15.0408C12.3197 17.7618 12.3197 22.2382 15.0408 24.9592C17.7618 27.6803 22.2382 27.6803 24.9592 24.9592C27.6803 22.2382 27.6803 17.8495 24.9592 15.0408ZM23.6426 22.5016L22.4138 23.7304L19.9561 21.2727L17.4984 23.7304L16.2696 22.5016L18.7273 20.0439L16.2696 17.5862L17.4984 16.3574L19.9561 18.815L22.4138 16.3574L23.6426 17.5862L21.185 20.0439L23.6426 22.5016Z" fill="#FF5656"></path>
+<svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M18.4389 3.06113C14.3574 -1.02038 7.64263 -1.02038 3.56113 3.06113C-0.520376 7.14263 -0.520376 13.8574 3.56113 17.9389C7.64263 22.0204 14.3574 22.0204 18.4389 17.9389C22.5204 13.8574 22.5204 7.2743 18.4389 3.06113ZM16.464 14.2524L14.6207 16.0956L10.9342 12.4091L7.24765 16.0956L5.40439 14.2524L9.09091 10.5658L5.40439 6.87931L7.24765 5.03605L10.9342 8.72257L14.6207 5.03605L16.464 6.87931L12.7774 10.5658L16.464 14.2524Z" fill="#FF5656"/>
 </svg>

package/src/assets/theme.js

@@ -333,7 +333,7 @@ const theme = (() => {
               borderColor: semanticColors.grey[300],
             },
             active: {
-              backgroundColor: semanticColors.purple[100],
+              backgroundColor: semanticColors.purple[50],
               textColor: semanticColors.purple[600],
               borderColor: semanticColors.grey[600],
             },

package/src/components/barchart/BottomFields.vue

@@ -22,7 +22,7 @@
         <!-- For stacked bar chart -->
         <template v-if="seriesData.length">
           <InputRow
-            v-for="(series, seriesIndex) in seriesData"
+            v-for="series in seriesData"
             :key="series.name"
             :data-series-name="series.name"
           >
@@ -36,10 +36,8 @@
                 :allow-negative="false"
                 :default-number="0"
                 :disabled="isInputsDisabled"
-                :error-message="getInputErrorMessage(series.data, item.label)"
                 input-height="36px"
                 :is-disabled-styled-only="true"
-                :is-error="getIsError(series.data, item.label)"
                 :is-info-border="
                   fieldMode === 'percentage'
                     ? calculatePercentageTotal(item.label) !== 100
@@ -119,10 +117,8 @@
               <InputNumber
                 :allow-negative="false"
                 :disabled="isInputsDisabled"
-                :error-message="item.errorMessage"
                 input-height="36px"
                 :is-disabled-styled-only="true"
-                :is-error="item.isError"
                 :min-decimals="0"
                 :number-precision="0"
                 text-align="center"
@@ -146,11 +142,6 @@
       </InfoCardBody>
     </InfoCard>
   </InfoCardContainer>
-  <InfoCardContainer v-if="hasInputErrors" :y-axis-width="yAxisWidth">
-    <InfoCard align-items="center" type="error_minor">
-      <InfoCardBody> {{ inputErrorMessage }} </InfoCardBody>
-    </InfoCard>
-  </InfoCardContainer>
 </template>
 
 <script setup>
@@ -213,10 +204,6 @@
       type: String,
       default: '',
     },
-    inputErrorMessage: {
-      type: String,
-      default: '',
-    },
   })
 
   const seriesData = ref([])
@@ -242,8 +229,6 @@
         label: d.label,
         value: d.value,
         percentage: d.percentage,
-        isError: d.isError,
-        errorMessage: d.errorMessage,
         originalValue: currentSeriesData.length
           ? currentSeriesData[itemIndex].data[dIndex].originalValue
           : d.value,
@@ -290,7 +275,7 @@
     }
   }
 
-  const getDisplayValue = (data, label) => {
+  const getDisplayValue = (data, label, shouldRound = true) => {
     if (props.fieldMode === 'absolute') {
       return data.find((d) => d.label === label)?.value
     }
@@ -298,13 +283,6 @@
     return data.find((d) => d.label === label)?.percentage
   }
 
-  const getIsError = (data, label) => {
-    return data.find((d) => d.label === label)?.isError
-  }
-  const getInputErrorMessage = (data, label) => {
-    return data.find((d) => d.label === label)?.errorMessage
-  }
-
   const calculatePercentageTotal = (label) => {
     const percentageTotal = seriesData.value.reduce((sum, series) => {
       const percentage =
@@ -358,14 +336,6 @@
       return calculatePercentageTotal(d.label) !== 100
     })
   })
-  const hasInputErrors = computed(() => {
-    if (seriesData.value.length) {
-      return seriesData.value.some((serie) =>
-        serie.data.some((item) => item.isError)
-      )
-    }
-    return props.data.some((item) => item.isError)
-  })
 
   const handleFieldsScroll = (event) => {
     emit('sync-scroll', event.target.scrollLeft)

package/src/components/barchart/composables/useAxisCalculations.js

@@ -68,7 +68,10 @@ export function useAxisCalculations(props, maxValue) {
     // Generate labels including 0 up to numSteps
     const numSteps = Math.floor(max / stepSize)
     for (let i = 0; i <= numSteps; i++) {
-      labels.push(i * stepSize)
+      const stepValue = i * stepSize
+      const roundedStepValueString = stepValue.toFixed(2)
+      const roundedStepValueNumber = parseFloat(roundedStepValueString)
+      labels.push(roundedStepValueNumber)
     }
 
     // Ensure we always have at least 2 labels (0 and max)

package/src/components/barchart/index.vue

@@ -17,8 +17,8 @@
       />
     </ChartControlsWrapper>
     <GraphSection :height="height" :width="width">
-      <YAxis :height="height" :width="yAxisWidth">
-        <YAxisTitleWrapper v-if="yAxisTitle" :height="yAxisHeight">
+      <YAxis :width="yAxisWidth">
+        <YAxisTitleWrapper v-if="yAxisTitle">
           {{ yAxisTitle }}
         </YAxisTitleWrapper>
         <YAxisRow
@@ -51,6 +51,11 @@
           <LoadingOverlay v-if="isLoading">
             <Spinner size="medium" />
           </LoadingOverlay>
+          <InfoCardContainer v-else-if="isDataIssueMessageDisplayed">
+            <RCInfoCard align-items="center">
+              {{ dataIssueMessage }}
+            </RCInfoCard>
+          </InfoCardContainer>
           <SelectionBox
             v-if="selectionSize && isSelectionEnabled"
             :bar-width="barWidth"
@@ -166,7 +171,6 @@
       :is-inputs-disabled="isLoading"
       :is-scrollable="isScrollable"
       :percentage-error-message="percentageErrorMessage"
-      :input-error-message="inputErrorMessage"
       :series="series"
       :y-axis-width="yAxisWidth"
       @input-blur="handleInputBlur"
@@ -183,6 +187,7 @@
   import ChartControls from './ChartControls'
   import BottomFields from './BottomFields'
   import SelectionBox from './SelectionBox'
+  import RCInfoCard from '../infoCard'
   import Spinner from '../spinner'
   import { numberToString } from '../../helpers/numberConverter'
 
@@ -218,6 +223,7 @@
     TooltipGradientBox,
     ChartControlsWrapper,
     LoadingOverlay,
+    InfoCardContainer,
   } from './styles/chart'
 
   const props = defineProps({
@@ -300,6 +306,14 @@
       type: Boolean,
       default: false,
     },
+    dataIssueMessage: {
+      type: String,
+      default: '',
+    },
+    isDataIssueMessageDisplayed: {
+      type: Boolean,
+      default: false,
+    },
     showPercentageOnTooltip: {
       type: Boolean,
       default: false,
@@ -308,10 +322,6 @@
       type: String,
       default: '',
     },
-    inputErrorMessage: {
-      type: String,
-      default: '',
-    },
   })
 
   const generateChartId = () =>

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

@@ -16,12 +16,9 @@ export const GraphSection = styled('div', { width: String, height: String })`
   display: flex;
 `
 
-export const YAxis = styled('div', { width: String, height: String })`
+export const YAxis = styled('div', { width: String })`
   width: ${(props) => props.width};
-  display: flex;
-  flex-direction: column;
   position: relative;
-  height: ${(props) => props.height};
 `
 
 export const YAxisRow = styled('div', { percentage: Number })`
@@ -29,10 +26,13 @@ export const YAxisRow = styled('div', { percentage: Number })`
   align-items: center;
   width: 100%;
   position: absolute;
-  height: 0;
+  height: 1px;
   bottom: ${(props) =>
     Number.isFinite(props.percentage) ? `${props.percentage}%` : '0'};
-  transform: translateY(50%);
+  ${(props) =>
+    Number.isFinite(props.percentage) && props.percentage === 100
+      ? 'transform: translateY(1px)'
+      : ''};
 `
 
 export const YAxisLabel = styled.div`
@@ -50,25 +50,24 @@ export const YAxisLine = styled('div', { yAxisWidth: String })`
   right: -10px;
   left: calc(${(props) => props.yAxisWidth} - 10px);
   height: 1px;
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: ${(props) => props.theme.semanticColors.grey[400]};
   width: 12px;
   z-index: 0;
-  top: 50%;
-  transform: translateY(-50%);
 `
 
-export const YAxisTitleWrapper = styled('div', { height: String })`
-  position: absolute;
-  left: -66px;
-  top: ${(props) => props.height};
-  transform: rotate(-90deg) translateX(50%);
-  transform-origin: right;
+export const YAxisTitleWrapper = styled('div')`
   font-size: 12px;
-  color: ${(props) => props.theme.semanticColors.teal[600]};
-  display: flex;
-  align-items: center;
+  font-weight: 500;
+  color: ${(props) => props.theme.semanticColors.grey[700]};
   white-space: nowrap;
-  font-family: ${(props) => props.theme.fonts.mainFont};
+  height: 0;
+  width: 0;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  position: absolute;
+  top: 50%;
+  transform: rotate(-90deg);
 `
 
 export const ScrollContainer = styled('div', {
@@ -90,6 +89,8 @@ export const ChartContent = styled('div', {
   height: ${(props) => props.height};
   position: relative;
   background: ${(props) => props.theme.semanticColors.grey[100]};
+  border-bottom: ${(props) =>
+    `1px solid ${props.theme.semanticColors.grey[400]}`};
   ${(props) =>
     props.isScrollable
       ? ` min-width: ${props.totalBars * (props.barWidth + 8) + 24}px;`
@@ -179,7 +180,7 @@ export const XAxisLabelHighlight = styled.div`
 export const XAxisLine = styled.div`
   width: 1px;
   height: 6px;
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: ${(props) => props.theme.semanticColors.grey[400]};
   position: absolute;
   bottom: -6px;
   left: 50%;
@@ -271,3 +272,13 @@ export const LoadingOverlay = styled('div')`
   align-items: center;
   z-index: 2;
 `
+
+export const InfoCardContainer = styled('div')`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 500px;
+  max-width: 500px;
+  z-index: 2;
+`

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

@@ -7,13 +7,11 @@
       :data-id="dataId"
       :data-qa-id="dataQaId"
       :height="height"
-      :is-active="isActive"
       :is-disabled="isDisabled"
       :min-width="minWidth"
       :no-wrap="noWrap"
       :type="type"
       :variant="variant"
-      :width="width"
     >
       <LabelComponent :has-icon="Boolean(icon)">
         <Icon
@@ -52,13 +50,11 @@
     type: String,
     isDisabled: Boolean,
     minWidth: String,
-    width: String,
     noWrap: Boolean,
     height: String,
     variant: String,
     buttonSize: String,
     appTheme: String,
-    isActive: Boolean,
   }
   const ButtonContainer = styled('div', ButtonAttrs)`
     display: flex;
@@ -77,9 +73,6 @@
       props.isDisabled
         ? props.theme.mainButton[props.appTheme][props.type][props.variant]
             .disabled.backgroundColor
-        : props.isActive
-        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .active.backgroundColor
         : props.theme.mainButton[props.appTheme][props.type][props.variant]
             .default.backgroundColor};
     border: ${(props) => {
@@ -98,7 +91,7 @@
     ${(props) => (props.noWrap ? `white-space: nowrap;` : '')};
     height: ${(props) => props.height};
     line-height: 1;
-    width: ${(props) => props.width};
+
     &:hover {
       background-color: ${(props) =>
         props.isDisabled
@@ -177,11 +170,6 @@
         default: false,
         type: Boolean,
       },
-      isActive: {
-        required: false,
-        default: false,
-        type: Boolean,
-      },
       icon: {
         required: false,
         default: null,
@@ -216,11 +204,6 @@
         default: null,
         type: String,
       },
-      width: {
-        required: false,
-        default: 'auto',
-        type: String,
-      },
       height: {
         required: false,
         default: 'auto',

package/src/components/infoText/index.vue

@@ -49,10 +49,7 @@
         <slot name="trigger"></slot>
       </IconWrapper>
     </div>
-    <Teleport
-      v-if="!hideInfoText && isVisible && (!!text || $slots.default)"
-      to="body"
-    >
+    <Teleport v-if="isVisible && (!!text || $slots.default)" to="body">
       <TextWrapper data-test-id="info_text_wrapper" :style="wrapperStyle">
         <TextOverlay
           ref="infoBox"

package/src/components/inputs/inputNumber/InputNumber.stories.js

@@ -3,15 +3,15 @@ import InputNumber from './index.vue'
 export default {
   title: 'InputNumber',
   component: InputNumber,
-  // argTypes: {},
 }
 
-const Template = (args, { argTypes }) => ({
+const Template = (args) => ({
   // Components used in your story `template` are defined in the `components` object
   components: { InputNumber },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  props: Object.keys(argTypes),
-  template: '<input-number v-bind="$props" />',
+  setup() {
+    return { args: args }
+  },
+  template: `<InputNumber v-bind="args" />`,
 
   // import InputNumber from "@eturnity/eturnity_reusable_components/src/components/inputs/inputNumber"
   // How to use:

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

@@ -50,7 +50,6 @@
             :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"
@@ -58,7 +57,7 @@
             :has-unit="unitName && !!unitName.length"
             :input-height="inputHeight"
             :is-border-error-only="isBorderErrorOnly"
-            :is-disabled="disabled"
+            :is-disabled="disabled && !isDisabledStyledOnly"
             :is-error="isError"
             :is-info-border="isInfoBorder"
             :is-interactive="isInteractive"
@@ -96,7 +95,6 @@
         :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"
@@ -104,7 +102,7 @@
         :has-unit="unitName && !!unitName.length"
         :input-height="inputHeight"
         :is-border-error-only="isBorderErrorOnly"
-        :is-disabled="disabled"
+        :is-disabled="disabled && !isDisabledStyledOnly"
         :is-error="isError"
         :is-info-border="isInfoBorder"
         :is-interactive="isInteractive"
@@ -748,6 +746,7 @@
         default: '',
       },
       dataQaId: {
+        type: String,
         required: false,
         default: '',
       },
@@ -799,10 +798,6 @@
         type: Boolean,
         default: false,
       },
-      hasSpaceBetweenUnit: {
-        type: Boolean,
-        default: true,
-      },
     },
     data() {
       return {
@@ -816,12 +811,8 @@
       displayedPlaceholder() {
         if (this.placeholder) return this.placeholder
         if (this.defaultNumber)
-          return `${this.defaultNumber}${this.hasSpaceBetweenUnit ? ' ' : ''}${
-            this.unitName ? this.unitName : ''
-          }`
-        return `${this.minNumber || 0}${this.hasSpaceBetweenUnit ? ' ' : ''}${
-          this.unitName ? this.unitName : ''
-        }`
+          return `${this.defaultNumber} ${this.unitName ? this.unitName : ''}`
+        return `${this.minNumber || 0} ${this.unitName ? this.unitName : ''}`
       },
       hasSlot() {
         return !!this.$slots.default
@@ -1035,9 +1026,8 @@
           return
         }
         this.textInput = this.formatWithCurrency(this.value)
-        const textInputWithoutUnit = this.formatWithoutUnit(this.value)
         this.enteredValue = stringToNumber({
-          value: textInputWithoutUnit,
+          value: this.textInput,
           numberPrecision: this.numberPrecision,
           minDecimals: this.minDecimals,
         })
@@ -1058,38 +1048,6 @@
           this.$refs.inputField1.$el.blur()
         })
       },
-      formatWithoutUnit(value) {
-        let adjustedMinValue =
-          value || value === 0
-            ? value
-            : this.defaultNumber
-            ? this.defaultNumber
-            : this.minNumber || this.minNumber === 0
-            ? this.minNumber
-            : ''
-        if (adjustedMinValue || adjustedMinValue === 0) {
-          let input = this.numberToStringEnabled
-            ? numberToString({
-                value: adjustedMinValue,
-                numberPrecision: this.numberPrecision,
-                minDecimals: this.minDecimals,
-              })
-            : adjustedMinValue
-          return input
-        } else if (!adjustedMinValue && adjustedMinValue !== 0) {
-          return ''
-        } else if (this.isFocused) {
-          return value
-        } else {
-          return this.numberToStringEnabled
-            ? numberToString({
-                value: adjustedMinValue,
-                numberPrecision: this.numberPrecision,
-                minDecimals: this.minDecimals,
-              })
-            : adjustedMinValue
-        }
-      },
       formatWithCurrency(value) {
         let adjustedMinValue =
           value || value === 0
@@ -1110,7 +1068,7 @@
           let unit = this.showLinearUnitName ? '' : this.unitName
           //return input + ' ' + unit
           if (unit) {
-            return `${input}${this.hasSpaceBetweenUnit ? ' ' : ''}${unit}`
+            return input + ' ' + unit
           }
           return input
         } else if (!adjustedMinValue && adjustedMinValue !== 0) {

package/src/components/pageSubtitle/index.vue

@@ -5,7 +5,8 @@
     :has-info-text="!!infoText"
     :margin-bottom="marginBottom"
   >
-    <span data-test-id="page_subtitle_text">
+    <span v-if="containsHtml" data-test-id="page_subtitle_text" v-html="text"></span>
+    <span v-else data-test-id="page_subtitle_text">
       {{ text }}
     </span>
     <InfoText
@@ -58,6 +59,11 @@
         required: true,
         type: String,
       },
+      containsHtml: {
+        required: false,
+        type: Boolean,
+        default: false,
+      },
       color: {
         required: false,
         type: String,