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

package/dist/main.es97.js

@@ -2,27 +2,32 @@ 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: "8",
-  height: "16",
+  width: "42",
+  height: "42",
   fill: "none"
 };
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#263238",
-  d: "M21.5 14.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.5 25.25a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0"
+  fill: "#B2B9C5",
+  d: "M6.2 4.5H38c1.1 0 2-.9 2-2s-.9-2-2-2H6c-3.3 0-6 2.7-6 6 0 1.7.7 3.2 1.8 4.2 1 1.1 2.5 1.8 4.2 1.8h32c1.1 0 2-.9 2-2s-.9-2-2-2H6c-1.2 0-2.2-1.1-2-2.3.2-1 1.1-1.7 2.2-1.7M6.1 32.5H38c1.1 0 2-.9 2-2s-.9-2-2-2H6c-3.3 0-6 2.7-6 6 0 1.7.7 3.2 1.8 4.2 1 1.1 2.5 1.8 4.2 1.8h32c1.1 0 2-.9 2-2s-.9-2-2-2H6c-1.2 0-2.2-1.1-2-2.3.2-1 1.1-1.7 2.1-1.7M33.9 22.5H2c-1.1 0-2 .9-2 2s.9 2 2 2h32c3.3 0 6-2.7 6-6 0-1.7-.7-3.2-1.8-4.2-1-1.1-2.5-1.8-4.2-1.8H2c-1.1 0-2 .9-2 2s.9 2 2 2h32c1.2 0 2.2 1.1 2 2.3-.2 1-1.1 1.7-2.1 1.7"
 }, null, -1);
 const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#99DB0C",
-  d: "m22.94 18.96-3.78 3.73-2.1.25.25-2.1 3.73-3.78z"
+  fill: "#FF5656",
+  d: "m17.1 19.5-4-3-4 3v-15h8z"
 }, null, -1);
-const _hoisted_4 = [
+const _hoisted_4 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#F58F46",
+  d: "m30.9 33.5-4-3-4 3v-15h8z"
+}, null, -1);
+const _hoisted_5 = [
   _hoisted_2,
-  _hoisted_3
+  _hoisted_3,
+  _hoisted_4
 ];
 function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_5);
 }
-const context_menu2 = { render };
+const component_library = { render };
 export {
-  context_menu2 as default,
+  component_library as default,
   render
 };

package/dist/main.es98.js

@@ -1,23 +1,20 @@
 import "./main.es3.js";
-import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+import { openBlock, createElementBlock, createStaticVNode } from "./main.es6.js";
 const _hoisted_1 = {
   xmlns: "http://www.w3.org/2000/svg",
-  width: "6",
-  height: "16",
+  width: "81",
+  height: "80",
   fill: "none"
 };
-const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#263238",
-  d: "M21.75 14.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.75 20a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.75 25.25a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0"
-}, null, -1);
-const _hoisted_3 = [
+const _hoisted_2 = /* @__PURE__ */ createStaticVNode('<path fill="#B2B9C5" fill-rule="evenodd" d="M51.61 40.35a.2.2 0 0 0-.134-.35h-8.101l5.527-17.3c.062-.195-.172-.346-.324-.21L29.39 39.65a.2.2 0 0 0 .134.35h8.101l-5.527 17.3c-.062.195.172.346.324.21z" clip-rule="evenodd"></path><path fill="#DEE2EB" d="M27.568 15.165c.654.654.64 1.73-.032 2.401-.672.672-1.747.686-2.401.032L17.367 9.83 19.8 7.397zM22.913 2.038a2.115 2.115 0 0 1 1.71 2.516c-.235 1.186-1.382 1.982-2.562 1.778L11.615 4.526 11.36.039zM25.903 19.989c.655.654.64 1.73-.031 2.401-.672.672-1.747.686-2.402.032l-9.347-9.348 2.433-2.433zM21.87 22.443c.654.654.64 1.73-.032 2.401-.672.672-1.747.686-2.402.032l-8.557-8.558 2.433-2.433zM16.256 23.317c.654.654.64 1.73-.032 2.401-.672.672-1.747.687-2.402.032l-6.187-6.187 2.433-2.433z"></path><path fill="#DEE2EB" d="M20.327 7.924 8.16 20.089l-6.055-6.056C-.076 11.852-.028 8.268 2.21 6.03l4.055-4.056c2.24-2.24 5.824-2.286 8.005-.105z"></path><path fill="#DEE2EB" d="m18.947 11.41-.811.811-1.053-1.053.81-.811zM15.703 14.654l-.811.811-1.053-1.053.81-.811zM11.932 17.372l-.81.81-.527-.526.81-.81zM6.266 1.973C8.294-.054 10.162-.079 11.36.04l.26.53-.138.402-1.879.825c-.44-.35-3.445.286-3.337.177M53.43 64.835c-.654-.654-.64-1.73.032-2.401.672-.672 1.747-.686 2.401-.032l7.768 7.768-2.433 2.433zM58.085 77.962a2.115 2.115 0 0 1-1.71-2.516c.234-1.186 1.382-1.982 2.562-1.778l10.446 1.806.255 4.487zM55.095 60.011c-.655-.654-.64-1.73.031-2.401.672-.672 1.747-.686 2.402-.032l9.347 9.348-2.433 2.433zM59.129 57.557c-.655-.654-.64-1.73.031-2.401.672-.672 1.747-.686 2.402-.032l8.557 8.557-2.433 2.434zM64.743 56.683c-.655-.654-.64-1.73.031-2.401.672-.672 1.747-.687 2.401-.032l6.188 6.187-2.433 2.434z"></path><path fill="#DEE2EB" d="m60.671 72.076 12.166-12.165 6.055 6.056c2.182 2.181 2.135 5.765-.105 8.004l-4.055 4.055c-2.24 2.24-5.823 2.287-8.005.106z"></path><path fill="#DEE2EB" d="m62.051 68.59.811-.811 1.053 1.053-.81.811zM65.295 65.346l.811-.811 1.053 1.053-.81.811zM69.066 62.628l.81-.81.527.526-.81.81zM74.732 78.027c-2.028 2.027-3.895 2.052-5.094 1.934l-.26-.53.138-.402 1.879-.825c.44.35 3.445-.286 3.337-.177M53.43 15.165c-.654.654-.64 1.73.032 2.401.672.672 1.747.686 2.401.032l7.768-7.768-2.433-2.433zM58.085 2.038a2.115 2.115 0 0 0-1.71 2.516c.234 1.186 1.382 1.982 2.562 1.778l10.446-1.806.255-4.487zM55.095 19.989c-.655.654-.64 1.73.031 2.401.672.672 1.747.686 2.402.032l9.347-9.348-2.433-2.433zM59.129 22.443c-.655.654-.64 1.73.031 2.401.672.672 1.747.686 2.402.032l8.557-8.558-2.433-2.433zM64.743 23.317c-.655.654-.64 1.73.031 2.401.672.672 1.747.687 2.401.032l6.188-6.187-2.433-2.433z"></path><path fill="#DEE2EB" d="m60.671 7.924 12.166 12.165 6.055-6.056c2.182-2.181 2.135-5.765-.105-8.004l-4.055-4.056c-2.24-2.24-5.823-2.286-8.005-.105z"></path><path fill="#DEE2EB" d="m62.051 11.41.811.811 1.053-1.053-.81-.811zM65.295 14.654l.811.811 1.053-1.053-.81-.811zM69.066 17.372l.81.81.527-.526-.81-.81zM74.732 1.973C72.704-.054 70.837-.079 69.638.04l-.26.53.138.402 1.879.825c.44-.35 3.445.286 3.337.177M27.568 64.835c.654-.654.64-1.73-.032-2.401-.672-.672-1.747-.686-2.401-.032l-7.768 7.768 2.433 2.433zM22.913 77.962a2.115 2.115 0 0 0 1.71-2.516c-.235-1.186-1.382-1.982-2.562-1.778l-10.446 1.806-.255 4.487zM25.903 60.011c.655-.654.64-1.73-.031-2.401-.672-.672-1.747-.686-2.402-.032l-9.347 9.348 2.433 2.433zM21.87 57.557c.654-.654.64-1.73-.032-2.401-.672-.672-1.747-.686-2.402-.032l-8.557 8.557 2.433 2.434zM16.256 56.683c.654-.654.64-1.73-.032-2.401-.672-.672-1.747-.687-2.402-.032l-6.187 6.187 2.433 2.434z"></path><path fill="#DEE2EB" d="M20.327 72.076 8.16 59.911l-6.055 6.056c-2.182 2.181-2.134 5.765.105 8.004l4.055 4.055c2.24 2.24 5.824 2.287 8.005.106z"></path><path fill="#DEE2EB" d="m18.947 68.59-.811-.811-1.053 1.053.81.811zM15.703 65.346l-.811-.811-1.053 1.053.81.811zM11.932 62.628l-.81-.81-.527.526.81.81zM6.266 78.027c2.028 2.027 3.896 2.052 5.094 1.934l.26-.53-.138-.402-1.879-.825c-.44.35-3.445-.286-3.337-.177"></path>', 10);
+const _hoisted_12 = [
   _hoisted_2
 ];
 function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_12);
 }
-const context_menu = { render };
+const consumption_tariffs = { render };
 export {
-  context_menu as default,
+  consumption_tariffs as default,
   render
 };

package/dist/main.es99.js

@@ -2,22 +2,27 @@ 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: "6",
+  width: "13",
+  height: "23",
   fill: "none"
 };
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#B2B9C5",
-  d: "M16.5 19.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.75 19.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M27 19.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0"
+  fill: "#263238",
+  d: "M21.5 14.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.5 20a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.5 25.25a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0"
 }, null, -1);
-const _hoisted_3 = [
-  _hoisted_2
+const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#99DB0C",
+  d: "m28.94 7.96-3.78 3.73-2.1.25.25-2.1 3.73-3.78z"
+}, null, -1);
+const _hoisted_4 = [
+  _hoisted_2,
+  _hoisted_3
 ];
 function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
 }
-const context_menu_tabs = { render };
+const context_menu1 = { render };
 export {
-  context_menu_tabs as default,
+  context_menu1 as default,
   render
 };

package/package.json

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

package/src/assets/svgIcons/erase.svg

@@ -1,3 +1,4 @@
-<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 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>

package/src/assets/theme.js

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

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

@@ -68,10 +68,7 @@ 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++) {
-      const stepValue = i * stepSize
-      const roundedStepValueString = stepValue.toFixed(2)
-      const roundedStepValueNumber = parseFloat(roundedStepValueString)
-      labels.push(roundedStepValueNumber)
+      labels.push(i * stepSize)
     }
 
     // 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 :width="yAxisWidth">
-        <YAxisTitleWrapper v-if="yAxisTitle">
+      <YAxis :height="height" :width="yAxisWidth">
+        <YAxisTitleWrapper v-if="yAxisTitle" :height="yAxisHeight">
           {{ yAxisTitle }}
         </YAxisTitleWrapper>
         <YAxisRow
@@ -51,11 +51,6 @@
           <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"
@@ -187,7 +182,6 @@
   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'
 
@@ -223,7 +217,6 @@
     TooltipGradientBox,
     ChartControlsWrapper,
     LoadingOverlay,
-    InfoCardContainer,
   } from './styles/chart'
 
   const props = defineProps({
@@ -306,14 +299,6 @@
       type: Boolean,
       default: false,
     },
-    dataIssueMessage: {
-      type: String,
-      default: '',
-    },
-    isDataIssueMessageDisplayed: {
-      type: Boolean,
-      default: false,
-    },
     showPercentageOnTooltip: {
       type: Boolean,
       default: false,

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

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

@@ -63,6 +63,19 @@ export default {
       options: ['fill', 'stroke'],
       description: 'How to fill the icon',
     },
+    showCaret: {
+      control: 'boolean',
+      description: 'Whether to render a caret after the text',
+    },
+    numberCountType: {
+      control: 'select',
+      options: ['inline', 'badge'],
+      description: 'How to render the number count',
+    },
+    numberCount: {
+      control: 'text',
+      description: 'Number count to display',
+    },
   },
 }
 

package/src/components/buttons/buttonIcon/buttonIcon.spec.js

@@ -98,8 +98,9 @@ describe('ButtonIcon.vue', () => {
   })
 
   it('renders number count when provided', async () => {
-    const numberCount = 5
-    await wrapper.setProps({ numberCount })
+    const numberCount = '5'
+    let numberCountType = 'inline'
+    await wrapper.setProps({ numberCount, numberCountType })
     const numberContainer = wrapper.find(
       '[data-test-id="button-icon-number-container"]'
     )
@@ -107,6 +108,12 @@ describe('ButtonIcon.vue', () => {
     expect(numberContainer.exists()).toBe(true)
     expect(numberText.exists()).toBe(true)
     expect(numberText.text()).toBe(numberCount.toString())
+
+    numberCountType = 'badge'
+    await wrapper.setProps({ numberCount, numberCountType })
+    const countBadge = wrapper.find('[data-test-id="button-icon-number-badge"]')
+    expect(countBadge.exists()).toBe(true)
+    expect(countBadge.text()).toBe(numberCount.toString())
   })
 
   it('applies different button sizes correctly', async () => {
@@ -149,4 +156,14 @@ describe('ButtonIcon.vue', () => {
       expect(wrapper.props('appTheme')).toBe(theme)
     }
   })
+
+  it('renders caret based on showCaret prop', async () => {
+    await wrapper.setProps({ showCaret: true })
+    let caret = wrapper.find('[data-test-id="button-icon-caret"]')
+    expect(caret.exists()).toBe(true)
+
+    await wrapper.setProps({ showCaret: false })
+    caret = wrapper.find('[data-test-id="button-icon-caret"]')
+    expect(caret.exists()).toBe(false)
+  })
 })

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

@@ -41,15 +41,36 @@
         :height="height"
       >
         {{ text }}
+        <Icon
+          v-if="showCaret"
+          :color="
+            iconColor ||
+            theme.mainButton[appTheme][type][variant].default.textColor
+          "
+          data-test-id="button-icon-caret"
+          :disable-hover="disableIconHover"
+          :hovered-color="
+            iconColor ||
+            theme.mainButton[appTheme][type][variant].default.textColor
+          "
+          name="arrow_down"
+          size="8px"
+        />
       </ButtonContainer>
       <NumberContainer
-        v-if="numberCount"
+        v-if="numberCount && numberCountType === 'inline'"
         data-test-id="button-icon-number-container"
       >
         <NumberText data-test-id="button-icon-number">{{
           numberCount
         }}</NumberText>
       </NumberContainer>
+      <CountBadge
+        v-else-if="numberCount && numberCountType === 'badge'"
+        data-test-id="button-icon-number-badge"
+      >
+        {{ numberCount }}
+      </CountBadge>
     </ButtonWrapper>
   </PageContainer>
 </template>
@@ -84,6 +105,7 @@
     height: String,
   }
   const ButtonWrapper = styled('div', ButtonAttrs)`
+    position: relative;
     display: grid;
     grid-template-columns: auto 1fr auto;
     height: ${({ height }) => height};
@@ -120,7 +142,7 @@
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
     user-select: none;
     border-radius: 4px;
-    overflow: hidden;
+    overflow: visible;
     min-width: ${(props) => props.minWidth || 'initial'};
 
     &:hover {
@@ -155,6 +177,7 @@
     justify-content: center;
     padding: ${(props) =>
       props.theme?.mainButton?.size?.[props.buttonSize]?.padding};
+    gap: 8px;
     white-space: nowrap;
   `
 
@@ -200,6 +223,25 @@
     background-color: ${(props) => props.theme.semanticColors.purple[50]};
   `
 
+  const CountBadge = styled('div')`
+    position: absolute;
+    grid-area: 1 / 1 / 2 / 4;
+    top: -3.5px;
+    right: 0px;
+    transform: translateX(50%);
+    padding: 0 2px;
+    background-color: ${({ theme }) => theme.colors.red};
+    color: ${({ theme }) => theme.colors.white};
+    border-radius: 4px;
+    height: 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 10px;
+    z-index: 1;
+    pointer-events: none;
+  `
+
   export default {
     name: 'ButtonIcon',
     components: {
@@ -210,6 +252,7 @@
       Icon,
       NumberContainer,
       NumberText,
+      CountBadge,
     },
     props: {
       type: {
@@ -285,14 +328,23 @@
         default: false,
       },
       numberCount: {
-        type: Number,
+        type: String,
         required: false,
         default: null,
       },
+      numberCountType: {
+        type: String,
+        required: false,
+        default: 'inline',
+      },
       height: {
         type: String,
         default: 'auto',
       },
+      showCaret: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {

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) => ({
+const Template = (args, { argTypes }) => ({
   // Components used in your story `template` are defined in the `components` object
   components: { InputNumber },
-  setup() {
-    return { args: args }
-  },
-  template: `<InputNumber v-bind="args" />`,
+  // 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" />',
 
   // import InputNumber from "@eturnity/eturnity_reusable_components/src/components/inputs/inputNumber"
   // How to use:

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

@@ -50,6 +50,7 @@
             :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"
@@ -57,7 +58,7 @@
             :has-unit="unitName && !!unitName.length"
             :input-height="inputHeight"
             :is-border-error-only="isBorderErrorOnly"
-            :is-disabled="disabled && !isDisabledStyledOnly"
+            :is-disabled="disabled"
             :is-error="isError"
             :is-info-border="isInfoBorder"
             :is-interactive="isInteractive"
@@ -95,6 +96,7 @@
         :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"
@@ -102,7 +104,7 @@
         :has-unit="unitName && !!unitName.length"
         :input-height="inputHeight"
         :is-border-error-only="isBorderErrorOnly"
-        :is-disabled="disabled && !isDisabledStyledOnly"
+        :is-disabled="disabled"
         :is-error="isError"
         :is-info-border="isInfoBorder"
         :is-interactive="isInteractive"
@@ -746,7 +748,6 @@
         default: '',
       },
       dataQaId: {
-        type: String,
         required: false,
         default: '',
       },

package/src/components/pageSubtitle/index.vue

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