@eturnity/eturnity_reusable_components 8.16.9-EPDM-14690.4 → 8.16.9-EPDM-11600.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.16.9-EPDM-14690.4",
+  "version": "8.16.9-EPDM-11600.9",
   "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.blue[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() {
@@ -131,7 +123,11 @@
         return this.type === 'error_minor'
       },
       iconName() {
-        return this.type === 'warning' ? 'warning_triangle' : 'info'
+        return this.type === 'warning'
+          ? 'warning_triangle'
+          : this.isErrorMinor
+          ? 'erase'
+          : 'info'
       },
       presetStyles() {
         // the types that doesn't have explicit border anyway have it transparent
@@ -149,16 +145,12 @@
           stylesCollection.backgroundColor = theme.semanticColors.yellow[300]
           stylesCollection.iconColor = theme.semanticColors.teal[800]
         } else if (this.isErrorMinor) {
-          stylesCollection.borderStyle = 'dashed'
-          stylesCollection.borderColor = theme.colors.pureRed
-          stylesCollection.iconColor = theme.colors.pureRed
-        } else if (this.isInfoSimple) {
           stylesCollection.borderStyle = 'dashed'
           stylesCollection.borderColor = theme.colors.grey4
+          stylesCollection.iconColor = theme.colors.red
         } else {
-          stylesCollection.color = theme.semanticColors.teal[800]
-          stylesCollection.backgroundColor = theme.semanticColors.blue[300]
-          stylesCollection.iconColor = theme.semanticColors.teal[800]
+          stylesCollection.borderStyle = 'dashed'
+          stylesCollection.borderColor = theme.colors.grey4
         }
 
         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/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

@@ -43,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"
@@ -83,7 +79,7 @@
         >{{ unitName }}</UnitContainer
       >
       <IconWrapper
-        v-if="isError && !showLinearUnitName && !isBorderErrorOnly"
+        v-if="isError && !showLinearUnitName"
         :margin-right="showSelect ? selectWidth : 0"
         size="16px"
       >
@@ -137,9 +133,7 @@
         </ArrowButton>
       </ArrowControls>
     </InputWrapper>
-    <ErrorMessage v-if="isError && errorMessage">{{
-      errorMessage
-    }}</ErrorMessage>
+    <ErrorMessage v-if="isError && errorMessage">{{ errorMessage }}</ErrorMessage>
   </Container>
 </template>
 
@@ -210,8 +204,6 @@
     colorMode: String,
     showArrowControls: Boolean,
     readOnly: Boolean,
-    isBorderErrorOnly: Boolean,
-    isInfoBorder: Boolean,
   }
 
   const Container = styled('div', inputProps)`
@@ -224,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'
@@ -245,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) =>
@@ -667,12 +656,18 @@
         required: false,
         default: '',
       },
+      labelDataTestId: {
+        type: String,
+        required: false,
+        default: '',
+      },
       inputDataId: {
         type: String,
         required: false,
         default: '',
       },
       dataQaId: {
+        type: String,
         required: false,
         default: '',
       },
@@ -708,14 +703,6 @@
         type: Boolean,
         default: false,
       },
-      isBorderErrorOnly: {
-        type: Boolean,
-        default: false,
-      },
-      isInfoBorder: {
-        type: Boolean,
-        default: false,
-      },
     },
     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

@@ -1,8 +1,8 @@
 <template>
   <TitleWrap data-test-id="page_wrapper" :has-info-text="!!infoText">
     <TitleText
-      :color="color"
       data-test-id="page_title_text"
+      :color="color"
       :font-size="fontSize"
       :uppercase="uppercase"
     >
@@ -10,8 +10,8 @@
     </TitleText>
     <InfoText
       v-if="!!infoText"
-      :align-arrow="infoAlign"
       data-test-id="page_title_tooltip"
+      :align-arrow="infoAlign"
       :text="infoText"
     />
   </TitleWrap>
@@ -44,8 +44,9 @@
   const titleAttrs = { color: String, fontSize: String, uppercase: Boolean }
   const TitleText = styled('span', titleAttrs)`
     color: ${(props) => (props.color ? props.color : props.theme.colors.black)};
-    font-weight: 500;
+    font-weight: bold;
     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>