@eturnity/eturnity_reusable_components 8.19.8-EPDM-14690.1 → 8.19.8-EPDM-11600.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.19.8-EPDM-14690.1",
+  "version": "8.19.8-EPDM-11600.10",
   "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

@@ -1,14 +1,14 @@
 <template>
   <Container :is-chart-controls-shown-in-bottom="isChartControlsShownInBottom">
     <LabelsColumn :width="yAxisWidth">
-      <LabelRow v-for="series in seriesData" :key="series.name">
+      <LabelRow v-for="series in props.series" :key="series.name">
         {{ series.name }}
       </LabelRow>
-      <TotalRow v-if="seriesData.length && fieldMode === 'percentage'">
-        {{ $gettext ? `${$gettext('Total')} (%)` : 'Total (%)' }}
+      <TotalRow v-if="props.series.length && fieldMode === 'percentage'">
+        {{ $gettext ? $gettext('Total (%)') : 'Total (%)' }}
       </TotalRow>
-      <TotalRow v-if="seriesData.length">
-        {{ $gettext ? `${$gettext('Total')} (kWh)` : 'Total (kWh)' }}
+      <TotalRow v-if="props.series.length">
+        {{ $gettext ? $gettext('Total (kWh)') : 'Total (kWh)' }}
       </TotalRow>
     </LabelsColumn>
 
@@ -18,35 +18,27 @@
     >
       <FieldsWrapper>
         <!-- For stacked bar chart -->
-        <template v-if="seriesData.length">
+        <template v-if="props.series.length">
           <InputRow
-            v-for="series in seriesData"
+            v-for="series in props.series"
             :key="series.name"
             :data-series-name="series.name"
           >
             <InputGroup
               v-for="(item, index) in props.data"
-              :key="index"
               :bar-width="barWidth"
               :is-scrollable="isScrollable"
+              :key="index"
             >
               <InputNumber
                 :allow-negative="false"
-                :disabled="isInputsDisabled"
                 input-height="36px"
-                :is-info-border="
-                  fieldMode === 'percentage'
-                    ? calculatePercentageTotal(item.label) !== 100
-                    : false
-                "
+                :number-precision="0"
                 :min-decimals="0"
-                :number-precision="fieldMode === 'percentage' ? 2 : 0"
                 text-align="center"
                 :unit-name="fieldMode === 'percentage' ? '%' : ''"
                 :value="getDisplayValue(series.data, item.label)"
-                @input-blur="
-                  handleInputBlur($event, series.name, item.label, series.data)
-                "
+                @input-blur="handleInputBlur($event, series.name, item.label)"
                 @input-focus="handleInputFocus(series.name, item.label)"
               />
             </InputGroup>
@@ -55,17 +47,16 @@
           <TotalInputRow v-if="fieldMode === 'percentage'">
             <InputGroup
               v-for="(item, index) in props.data"
-              :key="index"
               :bar-width="barWidth"
               :is-scrollable="isScrollable"
+              :key="index"
             >
               <InputNumber
                 :allow-negative="false"
-                :disabled="isInputsDisabled"
                 input-height="36px"
                 :is-read-only="true"
+                :number-precision="0"
                 :min-decimals="0"
-                :number-precision="fieldMode === 'percentage' ? 2 : 0"
                 text-align="center"
                 :unit-name="fieldMode === 'percentage' ? '%' : ''"
                 :value="calculatePercentageTotal(item.label)"
@@ -76,23 +67,17 @@
           <TotalInputRow>
             <InputGroup
               v-for="(item, index) in props.data"
-              :key="index"
               :bar-width="barWidth"
               :is-scrollable="isScrollable"
+              :key="index"
             >
               <InputNumber
                 input-height="36px"
-                :is-border-error-only="true"
-                :is-info-border="
-                  fieldMode === 'percentage'
-                    ? calculatePercentageTotal(item.label) !== 100
-                    : false
-                "
                 :is-read-only="true"
+                :number-precision="2"
                 :min-decimals="0"
-                :number-precision="0"
                 text-align="center"
-                :value="calculateTotalValue(item.label)"
+                :value="calculateTotal(item.label)"
               />
             </InputGroup>
           </TotalInputRow>
@@ -103,19 +88,17 @@
           <InputRow>
             <InputGroup
               v-for="(item, index) in props.data"
-              :key="index"
               :bar-width="barWidth"
               :is-scrollable="isScrollable"
+              :key="index"
             >
               <InputNumber
-                :allow-negative="false"
-                :disabled="isInputsDisabled"
                 input-height="36px"
                 :min-decimals="0"
-                :number-precision="0"
+                :number-precision="2"
                 text-align="center"
                 :value="item.value"
-                @input-blur="handleInputBlur($event, null, item.label, null)"
+                @input-blur="handleInputBlur($event, null, item.label)"
                 @input-focus="handleInputFocus(null, item.label)"
               />
             </InputGroup>
@@ -124,22 +107,11 @@
       </FieldsWrapper>
     </FieldsContainer>
   </Container>
-  <InfoCardContainer
-    v-if="hasAnySegmentNotTotatTo100Percent && fieldMode === 'percentage'"
-    :yAxisWidth="yAxisWidth"
-  >
-    <InfoCard align-items="center" type="info">
-      <InfoCardBody>
-        {{ $gettext('load_profile_not_add_up_to_100') }}
-      </InfoCardBody>
-    </InfoCard>
-  </InfoCardContainer>
 </template>
 
 <script setup>
-  import { ref, computed, watchEffect } from 'vue'
+  import { ref } from 'vue'
   import InputNumber from '../inputs/inputNumber'
-  import InfoCard from '../infoCard'
 
   import {
     Container,
@@ -151,8 +123,6 @@
     InputRow,
     TotalInputRow,
     InputGroup,
-    InfoCardContainer,
-    InfoCardBody,
   } from './styles/bottomFields'
 
   const props = defineProps({
@@ -189,47 +159,6 @@
       default: 'absolute',
       validator: (value) => ['absolute', 'percentage'].includes(value),
     },
-    isInputsDisabled: {
-      type: Boolean,
-      default: false,
-    },
-  })
-
-  const seriesData = ref([])
-
-  watchEffect(() => {
-    let isNewSetOfSeries = false
-    const seriesDataCopy = [...seriesData.value]
-    if (
-      !seriesDataCopy.length ||
-      !props.series.length ||
-      seriesDataCopy.length !== props.series.length ||
-      !seriesDataCopy.some((item) => {
-        return props.series.map((s) => s.name).includes(item.name)
-      })
-    ) {
-      isNewSetOfSeries = true
-    }
-    const currentSeriesData = !isNewSetOfSeries ? seriesDataCopy : []
-    const newSeriesData = []
-
-    props.series.forEach((item, itemIndex) => {
-      const data = item.data.map((d, dIndex) => ({
-        label: d.label,
-        value: d.value,
-        percentage: d.percentage,
-        originalValue: currentSeriesData.length
-          ? currentSeriesData[itemIndex].data[dIndex].originalValue
-          : d.value,
-      }))
-
-      newSeriesData.push({
-        name: item.name,
-        data,
-      })
-    })
-
-    seriesData.value = [...newSeriesData]
   })
 
   const emit = defineEmits([
@@ -246,13 +175,11 @@
     emit('input-focus', { seriesName, label })
   }
 
-  const calculateTotalValue = (label) => {
-    const total = seriesData.value.reduce((sum, series) => {
+  const calculateTotal = (label) => {
+    return props.series.reduce((sum, series) => {
       const value = series.data.find((d) => d.label === label)?.value || 0
       return sum + value
     }, 0)
-
-    return Math.round(total)
   }
 
   const syncScroll = (scrollLeft) => {
@@ -263,43 +190,34 @@
       container.scrollLeft = scrollLeft
     }
   }
-
-  const calculateTotalOriginalValue = (label) => {
-    return seriesData.value.reduce((sum, series) => {
-      const value =
-        series.data.find((d) => d.label === label)?.originalValue || 0
-      return sum + value
-    }, 0)
-  }
-
-  const getDisplayValue = (data, label, shouldRound = true) => {
+  const getDisplayValue = (seriesData, label) => {
     if (props.fieldMode === 'absolute') {
-      return data.find((d) => d.label === label)?.value
+      return seriesData.find((d) => d.label === label)?.value || ''
     }
 
-    return data.find((d) => d.label === label)?.percentage
+    const value = seriesData.find((d) => d.label === label)?.value || 0
+    const total = calculateTotal(label)
+    return total ? Number(((value / total) * 100).toFixed(0)) : 0
   }
 
   const calculatePercentageTotal = (label) => {
-    const percentageTotal = seriesData.value.reduce((sum, series) => {
-      const percentage =
-        series.data.find((d) => d.label === label)?.percentage || 0
+    return props.series.reduce((sum, series) => {
+      const value = series.data.find((d) => d.label === label)?.value || 0
+      const total = calculateTotal(label)
+      const percentage = total ? Number(((value / total) * 100).toFixed(0)) : 0
       return sum + percentage
     }, 0)
-
-    return Math.round(percentageTotal)
   }
 
-  const handleInputBlur = (_value, seriesName, label, currentSeriesData) => {
+  const handleInputBlur = (_value, seriesName, label) => {
     let value = Number(_value)
 
-    const payload = seriesName
-      ? {
-          seriesName,
-          label,
-          value,
-        }
-      : { label, value }
+    if (props.fieldMode === 'percentage') {
+      const total = calculateTotal(label)
+      value = (value / 100) * total
+    }
+
+    const payload = seriesName ? { seriesName, label, value } : { label, value }
     emit('input-blur', payload)
     focusedInput.value = null
 
@@ -325,12 +243,6 @@
     }
   }
 
-  const hasAnySegmentNotTotatTo100Percent = computed(() => {
-    return props.data.some((d) => {
-      return calculatePercentageTotal(d.label) !== 100
-    })
-  })
-
   const handleFieldsScroll = (event) => {
     emit('sync-scroll', event.target.scrollLeft)
   }

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

@@ -84,7 +84,7 @@ export function useAxisCalculations(props, maxValue) {
   })
 
   const yAxisWidth = computed(() => {
-    return !!props.yAxisTitle || props.isBottomFieldsShown ? '80px' : '60px'
+    return !!props.yAxisTitle || props.isBottomFieldsShown ? '70px' : '60px'
   })
 
   const isChartControlsShown = (position) => {

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

@@ -66,7 +66,7 @@ export function useChartData(props, paddedMaxValue) {
         let accumulated = 0
         return {
           label: item.label,
-          segments: [...props.series].map((series, index) => {
+          segments: [...props.series].reverse().map((series, index) => {
             const value =
               series.data.find((d) => d.label === item.label)?.value || 0
             accumulated += value

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

@@ -16,21 +16,7 @@ export function useTooltip(chartId, normalizedData) {
     if (!showTooltipContent.value) {
       showTooltipContent.value = true
     }
-    if (isObjectEqual(item, tooltipData.value)) {
-      return
-    }
-
-    const totalValue = item.segments.reduce((acc, segment) => {
-      return acc + segment.value
-    }, 0)
-
-    const segments = item.segments.map((segment) => {
-      let valuePercentage = (segment.value / totalValue) * 100
-      segment.valuePercentage = Math.round(valuePercentage)
-
-      return segment
-    })
-    item.segments = segments
+    if (isObjectEqual(item, tooltipData.value)) return
 
     tooltipData.value = { ...item }
 
@@ -55,27 +41,16 @@ export function useTooltip(chartId, normalizedData) {
 
     isInputFocused.value = true
     const barData = normalizedData.value.find((item) => item.label === label)
-    if (!barData) return
 
-    const totalValue = barData.segments.reduce((acc, segment) => {
-      return acc + segment.value
-    }, 0)
-    const segments = barData.segments.map((segment) => {
-      let valuePercentage = (segment.value / totalValue) * 100
-      segment.valuePercentage = Math.round(valuePercentage)
-
-      return segment
-    })
-    barData.segments = segments
+    if (!barData) return
     focusedBarData.value = barData
-
     const barElement = document.querySelector(
       `.barchart-${chartId} .bar-group:nth-child(${
         normalizedData.value.indexOf(barData) + 1
       })`
     )
-    if (!barElement) return
 
+    if (!barElement) return
     // Get the last bar segment, samee as hover behavior
     const targetElement = barElement.querySelector('.bar-segment:last-child')
     const rect = targetElement.getBoundingClientRect()

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
@@ -30,15 +30,15 @@
             )
           "
         >
-          <YAxisLabel>{{ getYAxisLabel(label) }}</YAxisLabel>
+          <YAxisLabel>{{ label }}</YAxisLabel>
           <YAxisLine :y-axis-width="yAxisWidth" />
         </YAxisRow>
       </YAxis>
 
       <ScrollContainer
         :class="`chart-scroll-container-${chartId}`"
-        :height="height"
         :is-scrollable="isScrollable"
+        :height="height"
         @scroll="handleChartScroll"
       >
         <ChartContent
@@ -64,19 +64,19 @@
           <BarsContainer>
             <BarGroup
               v-for="(item, index) in normalizedData"
-              :key="index"
               :bar-width="barWidth"
               class="bar-group"
               :is-scrollable="isScrollable"
+              :key="index"
             >
               <BarWrapper>
                 <BarSegment
                   v-for="(segment, segIndex) in item.segments"
-                  :key="segIndex"
                   class="bar-segment"
                   :gradient-from="getSegmentGradient(index, segment).from"
                   :gradient-to="getSegmentGradient(index, segment).to"
                   :height="`${segment.percentage}%`"
+                  :key="segIndex"
                   :z-index="item.segments.length - segIndex"
                   @mouseenter="showTooltip(item, $event, series)"
                   @mouseleave="hideTooltip"
@@ -96,7 +96,7 @@
         :left="tooltipStyle.left"
         :top="tooltipStyle.top"
       >
-        <slot :item="tooltipData" name="tooltip"></slot>
+        <slot :item="tooltipData" name="tooltip" />
         <TooltipTextWrapper v-if="!slots.tooltip && tooltipData">
           <template v-if="!series.length">
             <TooltipText font-weight="500">{{ tooltipData.label }}</TooltipText>
@@ -128,11 +128,7 @@
                   :gradient-to="segment.gradientTo"
                 />
                 <TooltipText>
-                  {{
-                    fieldMode === 'absolute' && showPercentageOnTooltip
-                      ? `${segment.valuePercentage}%`
-                      : handleValueFormatter(segment.value)
-                  }}
+                  {{ handleValueFormatter(segment.value) }}
                 </TooltipText>
               </TooltipRow>
             </template>
@@ -163,7 +159,6 @@
       :data="data"
       :field-mode="fieldMode"
       :is-chart-controls-shown-in-bottom="isChartControlsShown('bottom')"
-      :is-inputs-disabled="isLoading"
       :is-scrollable="isScrollable"
       :series="series"
       :y-axis-width="yAxisWidth"
@@ -176,13 +171,12 @@
 </template>
 
 <script setup>
-  import { useSlots, computed, ref } from 'vue'
+  import { useSlots, computed } from 'vue'
 
   import ChartControls from './ChartControls'
   import BottomFields from './BottomFields'
   import SelectionBox from './SelectionBox'
   import Spinner from '../spinner'
-  import { numberToString } from '../../helpers/numberConverter'
 
   import {
     useTooltip,
@@ -252,6 +246,10 @@
       type: String,
       default: '',
     },
+    valueFormatter: {
+      type: Function,
+      default: null,
+    },
     isLegendShown: {
       type: Boolean,
       default: false,
@@ -298,10 +296,6 @@
       type: Boolean,
       default: false,
     },
-    showPercentageOnTooltip: {
-      type: Boolean,
-      default: false,
-    },
   })
 
   const generateChartId = () =>
@@ -384,40 +378,8 @@
   }
 
   const handleValueFormatter = (value) => {
-    let formattedValue = value
-    if (value < 1000) {
-      formattedValue = numberToString({
-        value: formattedValue,
-        numberPrecision: 0,
-        minDecimals: 0,
-      })
-    } else if (value < 1000000) {
-      formattedValue = numberToString({
-        value: Number(formattedValue / 1000),
-        numberPrecision: 2,
-        minDecimals: 2,
-      })
-    } else {
-      formattedValue = numberToString({
-        value: Number(formattedValue / 1000000),
-        numberPrecision: 2,
-        minDecimals: 2,
-      })
-    }
-    if (value < 1000) {
-      return `${formattedValue} kWh`
-    } else if (value < 1000000) {
-      return `${formattedValue} MWh`
-    } else {
-      return `${formattedValue} GWh`
-    }
-  }
-
-  const getYAxisLabel = (label) => {
-    return numberToString({
-      value: label,
-      numberPrecision: 0,
-      minDecimals: 0,
-    })
+    return props.valueFormatter
+      ? props.valueFormatter(Math.round(value))
+      : value
   }
 </script>

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

@@ -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 })`
@@ -57,18 +54,19 @@ export const YAxisLine = styled('div', { yAxisWidth: String })`
   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', {
@@ -127,7 +125,6 @@ export const BarWrapper = styled.div`
   height: 100%;
   width: 100%;
   position: relative;
-  overflow: hidden;
 `
 
 export const BarSegment = styled('div', {

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/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/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

@@ -30,61 +30,7 @@
       />
     </LabelWrapper>
     <InputWrapper>
-      <InfoText
-        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"
-            :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>
-      </InfoText>
-
       <InputContainer
-        v-else
         v-bind="$attrs"
         ref="inputField1"
         :align-items="alignItems"
@@ -97,23 +43,19 @@
         :color-mode="colorMode"
         :data-id="inputDataId"
         :data-qa-id="dataQaId"
-        :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 +68,6 @@
         @keydown.up="incrementValue"
         @keyup.enter="onEnterPress"
       />
-
       <SlotContainer v-if="hasSlot" :is-error="isError" :slot-size="slotSize">
         <slot></slot>
       </SlotContainer>
@@ -138,7 +79,7 @@
         >{{ unitName }}</UnitContainer
       >
       <IconWrapper
-        v-if="isError && !showLinearUnitName && !isBorderErrorOnly"
+        v-if="isError && !showLinearUnitName"
         :margin-right="showSelect ? selectWidth : 0"
         size="16px"
       >
@@ -192,9 +133,7 @@
         </ArrowButton>
       </ArrowControls>
     </InputWrapper>
-    <ErrorMessage v-if="isError && errorMessage">{{
-      errorMessage
-    }}</ErrorMessage>
+    <ErrorMessage v-if="isError && errorMessage">{{ errorMessage }}</ErrorMessage>
   </Container>
 </template>
 
@@ -265,8 +204,6 @@
     colorMode: String,
     showArrowControls: Boolean,
     readOnly: Boolean,
-    isBorderErrorOnly: Boolean,
-    isInfoBorder: Boolean,
   }
 
   const Container = styled('div', inputProps)`
@@ -279,9 +216,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 +235,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) =>
@@ -723,12 +657,18 @@
         required: false,
         default: '',
       },
+      labelDataTestId: {
+        type: String,
+        required: false,
+        default: '',
+      },
       inputDataId: {
         type: String,
         required: false,
         default: '',
       },
       dataQaId: {
+        type: String,
         required: false,
         default: '',
       },
@@ -764,18 +704,6 @@
         type: Boolean,
         default: false,
       },
-      isBorderErrorOnly: {
-        type: Boolean,
-        default: false,
-      },
-      isInfoBorder: {
-        type: Boolean,
-        default: false,
-      },
-      inputInfoText: {
-        type: String,
-        default: '',
-      },
     },
     data() {
       return {

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,

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 {

package/src/TestChart.vue

@@ -1,229 +0,0 @@
-<template>
-  <div
-    style="
-      margin-top: 100px;
-      margin-left: 80px;
-      padding-bottom: 100px;
-      display: flex;
-      flex-direction: column;
-    "
-  >
-    <!-- Simple bar chart -->
-    <BarChart
-      :bar-width="60"
-      chart-controls-position="bottom"
-      :data="monthlyData"
-      height="400px"
-      :is-bottom-fields-shown="true"
-      :is-scrollable="false"
-      :is-selection-enabled="true"
-      :selection-size="3"
-      :value-formatter="valueFormatter"
-      width="700px"
-      @selection-change="handleSelectionChange"
-    />
-    <br />
-    <br />
-
-    <!-- Stacked bar chart -->
-    <BarChart
-      :bar-width="60"
-      :data="monthLabels"
-      height="400px"
-      :is-bottom-fields-shown="true"
-      :is-legend-shown="true"
-      :legends-item-per-row="4"
-      :selected-split-button="selectedTimeFrame"
-      :series="tariffZones"
-      :show-percentage-on-tooltip="true"
-      :split-button-options="options"
-      :value-formatter="valueFormatter"
-      width="700px"
-      y-axis-title="Energy (kWh)"
-      @input-blur="handleInputBlur"
-      @select-split-button="handleSelectSplitButton"
-    />
-
-    <!-- Stacked bar chart -->
-    <BarChart
-      :bar-width="60"
-      :data="monthLabels"
-      field-mode="percentage"
-      height="400px"
-      :is-bottom-fields-shown="true"
-      :is-legend-shown="false"
-      :legends-item-per-row="4"
-      :series="tariffZones"
-      :value-formatter="valueFormatter"
-      width="700px"
-      @input-blur="handleInputBlur"
-      @select-split-button="handleSelectSplitButton"
-    >
-      <!-- <template #tooltip="{ item, segment }">
-        <div style="display: flex; flex-direction: column">
-          {{ $c.log(item, segment) }}
-          <div>{{ item.label }}</div>
-          <div>{{ item.segments[0].value }} kWh</div>
-        </div>
-      </template> -->
-    </BarChart>
-  </div>
-</template>
-
-<script setup>
-  import { ref } from 'vue'
-  import BarChart from '@/components/barchart/index.vue'
-
-  const options = [
-    { label: 'Day', value: 'day' },
-    { label: 'Month', value: 'month' },
-    { label: 'Year', value: 'year' },
-  ]
-
-  const selectedTimeFrame = ref('day')
-
-  const handleSelectSplitButton = (value) => {
-    selectedTimeFrame.value = value
-  }
-
-  const monthlyData = [
-    { label: 'Jan', value: 300 },
-    { label: 'Feb', value: 600 },
-    { label: 'Mar', value: 1000 },
-    { label: 'Apr', value: 1200 },
-    { label: 'May', value: 1400 },
-    { label: 'Jun', value: 1810 },
-    { label: 'Jul', value: 1400 },
-    { label: 'Aug', value: 1200 },
-    { label: 'Sep', value: 1000 },
-    // { label: 'Oct', value: 800 },
-    // { label: 'Nov', value: 600 },
-    // { label: 'Dec', value: 400 },
-    // { label: 'Jan', value: 300 },
-    // { label: 'Feb', value: 600 },
-    // { label: 'Mar', value: 1000 },
-    // { label: 'Apr', value: 1200 },
-    // { label: 'May', value: 1400 },
-    // { label: 'Jun', value: 1810 },
-    // { label: 'Jul', value: 1400 },
-    // { label: 'Aug', value: 1200 },
-    // { label: 'Sep', value: 1000 },
-    // { label: 'Oct', value: 800 },
-    // { label: 'Nov', value: 600 },
-    // { label: 'Dec', value: 400 },
-
-    // ... more months
-  ]
-
-  const monthLabels = [
-    { label: 'Jan' },
-    { label: 'Feb' },
-    { label: 'Mar' },
-    { label: 'Apr' },
-    { label: 'May' },
-    { label: 'Jun' },
-    // ... more months
-  ]
-
-  const tariffZones = ref([
-    {
-      name: 'Tariff Zone 1',
-      data: [
-        { label: 'Jan', value: 200 },
-        { label: 'Feb', value: 130 },
-        { label: 'Mar', value: 220 },
-        { label: 'Apr', value: 230 },
-        { label: 'May', value: 200 },
-        { label: 'Jun', value: 210 },
-        // ... more months
-      ],
-    },
-    {
-      name: 'Tariff Zone 2',
-      data: [
-        { label: 'Jan', value: 200 },
-        { label: 'Feb', value: 100 },
-        { label: 'Mar', value: 270 },
-        { label: 'Apr', value: 180 },
-        { label: 'May', value: 300 },
-        { label: 'Jun', value: 250 },
-        // ... more months
-      ],
-    },
-    {
-      name: 'Tariff Zone 3',
-      data: [
-        { label: 'Jan', value: 200 },
-        { label: 'Feb', value: 100 },
-        { label: 'Mar', value: 210 },
-        { label: 'Apr', value: 220 },
-        { label: 'May', value: 300 },
-        { label: 'Jun', value: 190 },
-        // ... more months
-      ],
-    },
-    {
-      name: 'Tariff Zone 4',
-      data: [
-        { label: 'Jan', value: 200 },
-        { label: 'Feb', value: 100 },
-        { label: 'Mar', value: 210 },
-        { label: 'Apr', value: 220 },
-        { label: 'May', value: 300 },
-        { label: 'Jun', value: 190 },
-        // ... more months
-      ],
-    },
-    {
-      name: 'Tariff Zone 5',
-      data: [
-        { label: 'Jan', value: 200 },
-        { label: 'Feb', value: 100 },
-        { label: 'Mar', value: 210 },
-        { label: 'Apr', value: 220 },
-        { label: 'May', value: 300 },
-        { label: 'Jun', value: 190 },
-        // ... more months
-      ],
-    },
-    {
-      name: 'Tariff Zone 6',
-      data: [
-        { label: 'Jan', value: 200 },
-        { label: 'Feb', value: 100 },
-        { label: 'Mar', value: 210 },
-        { label: 'Apr', value: 220 },
-        { label: 'May', value: 300 },
-        { label: 'Jun', value: 190 },
-        // ... more months
-      ],
-    },
-    // ... more tariff zones
-  ])
-
-  const valueFormatter = (value) => {
-    return `${value} kWh`
-  }
-
-  const handleSelectionChange = (selectedBars) => {
-    console.log('selectedBars', selectedBars)
-  }
-
-  const handleInputBlur = (payload) => {
-    const newVal = [...tariffZones.value].map((zone) => {
-      if (zone.name === payload.seriesName) {
-        zone.data = zone.data.map((item) => {
-          if (item.label === payload.label) {
-            item.value = payload.value
-          }
-          return item
-        })
-      }
-      return zone
-    })
-
-    tariffZones.value = newVal
-  }
-</script>
-
-<style lang="scss" scoped></style>