@eturnity/eturnity_reusable_components 8.49.2-EPDM-16285.0 → 8.49.3-EPDM-17959.0

package/dist/main.es9.js

@@ -1,5 +1,5 @@
 import styled from "./main.es7.js";
-import _sfc_main$1 from "./main.es15.js";
+import _sfc_main$1 from "./main.es17.js";
 import theme from "./main.es8.js";
 import "./main.es3.js";
 import _export_sfc from "./main.es11.js";
@@ -39,6 +39,11 @@ const _sfc_main = {
     dataId: {
       type: String,
       default: ""
+    },
+    dataQaId: {
+      required: false,
+      default: "",
+      type: String
     }
   },
   computed: {
@@ -58,7 +63,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_TextContainer = resolveComponent("TextContainer");
   const _component_TagContainer = resolveComponent("TagContainer");
   return openBlock(), createBlock(_component_TagContainer, {
-    "data-id": $props.dataId
+    "data-id": $props.dataId,
+    "data-qa-id": $props.dataQaId
   }, {
     default: withCtx(() => [createVNode(_component_RcIcon, {
       color: $options.getIconColor,
@@ -70,7 +76,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       _: 1
     })]),
     _: 1
-  }, 8, ["data-id"]);
+  }, 8, ["data-id", "data-qa-id"]);
 }
 const ConversionTag = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.49.2-EPDM-16285.0",
+  "version": "8.49.3-EPDM-17959.0",
   "files": [
     "dist",
     "src"

package/src/components/accordion/Accordion.stories.js

@@ -1,5 +1,4 @@
 import Accordion from './index.vue'
-import theme from '@/assets/theme'
 
 export default {
   title: 'Accordion',
@@ -27,9 +26,6 @@ const Template = (args, { argTypes }) => ({
       </div>
   </template>
 </Accordion>`,
-  provide: {
-    theme,
-  },
 })
 
 export const Default = Template.bind({})

package/src/components/barchart/BottomFields.vue

@@ -25,9 +25,11 @@
             >
               <InputNumber
                 :allow-negative="false"
+                :data-qa-id="processedDataQaId({label: item.label, series})"
                 :default-number="0"
                 :disabled="isInputsDisabled"
                 :error-message="getInputErrorMessage(series.data, item.label)"
+                :input-data-id="processedDataId({label: item.label, series})"
                 input-height="36px"
                 :is-disabled-styled-only="true"
                 :is-error="getIsError(series.data, item.label)"
@@ -37,6 +39,7 @@
                     : false
                 "
                 :is-relative-error-message="true"
+                :label-data-id="`${processedDataId({label: item.label, series})}_label`"
                 :min-decimals="0"
                 :number-precision="fieldMode === 'percentage' ? 2 : 0"
                 text-align="center"
@@ -68,11 +71,14 @@
             >
               <InputNumber
                 :allow-negative="false"
+                :data-qa-id="processedDataQaId({label: item.label, series})"
                 :default-number="0"
                 :disabled="isInputsDisabled"
                 input-height="36px"
                 :is-disabled-styled-only="true"
                 :is-read-only="true"
+                :input-data-id="processedDataId({label: item.label, series})"
+                :label-data-id="`${processedDataId({label: item.label, series})}_label`"
                 :min-decimals="0"
                 :number-precision="fieldMode === 'percentage' ? 2 : 0"
                 text-align="center"
@@ -99,7 +105,9 @@
               :is-scrollable="isScrollable"
             >
               <InputNumber
+                :data-qa-id="processedDataQaId({label: item.label, series})"
                 :default-number="0"
+                :input-data-id="processedDataId({label: item.label, series})"
                 input-height="36px"
                 :is-border-error-only="true"
                 :is-info-border="
@@ -108,6 +116,7 @@
                     : false
                 "
                 :is-read-only="true"
+                :label-data-id="`${processedDataId({label: item.label, series})}_label`"
                 :min-decimals="0"
                 :number-precision="0"
                 text-align="center"
@@ -129,11 +138,14 @@
             >
               <InputNumber
                 :allow-negative="false"
+                :data-qa-id="processedDataQaId({label: item.label})"
                 :disabled="isInputsDisabled"
                 :error-message="item.errorMessage"
+                :input-data-id="processedDataId({label: item.label})"
                 input-height="36px"
                 :is-disabled-styled-only="true"
                 :is-error="item.isError"
+                :label-data-id="`${processedDataId({label: item.label})}_label`"
                 :min-decimals="0"
                 :number-precision="0"
                 text-align="center"
@@ -232,6 +244,16 @@
       type: String,
       default: '',
     },
+    dataId: {
+      required: false,
+      default: '',
+      type: String,
+    },
+    dataQaId: {
+      required: false,
+      default: '',
+      type: String,
+    },
   })
 
   const seriesData = ref([])
@@ -386,6 +408,27 @@
     emit('sync-scroll', event.target.scrollLeft)
   }
 
+  const sanitizedStr = (rawSstr) => {
+    return rawSstr
+      .toLowerCase()
+      .replace(/:/g, '')
+      .replace(/[^a-z0-9_]+/g, '_')
+  }
+  const processedDataId = ({ label, series }) => {
+    let rawStr = `${props.dataId}_${label}`
+    if (series?.name) {
+      rawStr += `_${series.name}`
+    }
+    return sanitizedStr(rawStr)
+  }
+  const processedDataQaId = ({ label, series }) => {
+    let rawStr = `${props.dataQaId}_${label}`
+    if (series?.name) {
+      rawStr += `_${series.name}`
+    }
+    return sanitizedStr(rawStr)
+  }
+
   defineExpose({
     syncScroll,
   })

package/src/components/barchart/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Container :class="`barchart-${chartId}`" :width="width">
+  <Container :data-id="`${dataId}_chart`" :data-qa-id="`${dataQaId}_chart`" :class="`barchart-${chartId}`" :width="width">
     <ChartControlsWrapper
       v-if="isChartControlsShown('top')"
       :position="chartControlsPosition"
@@ -161,6 +161,8 @@
       :bar-width="barWidth"
       :chart-id="chartId"
       :data="data"
+      :data-id="dataId"
+      :data-qa-id="dataQaId"
       :field-mode="fieldMode"
       :is-chart-controls-shown-in-bottom="isChartControlsShown('bottom')"
       :is-inputs-disabled="isLoading"
@@ -312,6 +314,16 @@
       type: String,
       default: '',
     },
+    dataId: {
+      required: false,
+      default: '',
+      type: String,
+    },
+    dataQaId: {
+      required: false,
+      default: '',
+      type: String,
+    },
   })
 
   const generateChartId = () =>

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

@@ -1,6 +1,6 @@
 <template>
   <Wrapper>
-    <Container>
+    <Container :data-id="dataId" :data-qa-id="dataQaId">
       <LeftLine :color="color" />
       <RightLine :color="color" />
     </Container>
@@ -57,6 +57,16 @@
         required: false,
         default: '',
       },
+      dataId: {
+        required: false,
+        default: '',
+        type: String,
+      },
+      dataQaId: {
+        required: false,
+        default: '',
+        type: String,
+      },
     },
   }
 </script>

package/src/components/deleteIcon/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Wrapper :is-disabled="isDisabled">
+  <Wrapper :data-id="dataId" :data-qa-id="dataQaId" :is-disabled="isDisabled">
     <DeleteIconRed class="icon-red" :hover-bg="hoverBg" />
     <DeleteIconGray class="icon-gray" />
   </Wrapper>
@@ -73,6 +73,16 @@
         required: false,
         default: '',
       },
+      dataId: {
+        required: false,
+        default: '',
+        type: String,
+      },
+      dataQaId: {
+        required: false,
+        default: '',
+        type: String,
+      },
     },
   }
 </script>

package/src/components/infoText/index.vue

@@ -1,6 +1,8 @@
 <template>
   <PageContainer
     ref="container"
+    :data-id="dataId"
+    :data-qa-id="dataQaId"
     data-test-id="infoText_container"
     :type="type"
     @click=";(isMobile || openTrigger === 'onClick') && toggleInfo()"
@@ -329,6 +331,16 @@
         default: false,
         required: false,
       },
+      dataId: {
+        required: false,
+        default: '',
+        type: String,
+      },
+      dataQaId: {
+        required: false,
+        default: '',
+        type: String,
+      },
     },
     setup(props) {
       const isVisible = ref(false)

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

@@ -25,7 +25,6 @@
               : 'eturnityGrey'
           "
           :font-size="fontSize"
-          :font-weight="labelFontWeight"
           >{{ label }}
           <IsRequiredLabelStar v-if="isRequiredLabel" />
           <OptionalLabel v-if="labelOptional">
@@ -288,14 +287,14 @@
     overflow: hidden;`}
   `
 
-  const labelAttrs = { fontSize: String, fontColor: String, fontWeight: String }
+  const labelAttrs = { fontSize: String, fontColor: String }
   const InputLabel = styled('div', labelAttrs)`
     color: ${(props) =>
       props.theme.colors[props.fontColor]
         ? props.theme.colors[props.fontColor]
         : props.fontColor};
     font-size: ${(props) => props.fontSize};
-    font-weight: ${(props) => props.fontWeight};
+    font-weight: 700;
   `
   const OptionalLabel = styled.span`
     font-weight: 300;
@@ -540,11 +539,6 @@
       label: {
         required: false,
       },
-      labelFontWeight: {
-        required: false,
-        default: '700',
-        type: String,
-      },
       isRequiredLabel: {
         required: false,
         default: false,

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

@@ -18,7 +18,7 @@
         :is-error="isError"
       >
         <textarea
-          :data-id="inputDataId"
+          :data-id="inputDataId || dataId"
           :data-qa-id="dataQaId"
           :disabled="isDisabled"
           :placeholder="placeholder"
@@ -192,6 +192,11 @@
         required: false,
         default: '',
       },
+      dataId: {
+        required: false,
+        default: '',
+        type: String,
+      },
       dataQaId: {
         required: false,
         default: '',

package/src/components/tag/conversionTag/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <TagContainer :data-id="dataId">
+  <TagContainer :data-id="dataId" :data-qa-id="dataQaId">
     <RcIcon
       :color="getIconColor"
       :hovered-color="getIconColor"
@@ -51,6 +51,11 @@
         type: String,
         default: '',
       },
+      dataQaId: {
+        required: false,
+        default: '',
+        type: String,
+      },
     },
     computed: {
       getIconColor() {

package/src/components/threeDots/index.vue

@@ -2,6 +2,8 @@
   <PageContainer
     ref="pageContainer"
     :activated="isOpen"
+    :data-id="dataId"
+    :data-qa-id="dataQaId"
     :hovered-background-color="hoveredBackgroundColor"
     @click="toggleButton()"
   >
@@ -315,6 +317,16 @@
         type: String,
         default: theme.colors.grey5,
       },
+      dataId: {
+        required: false,
+        default: '',
+        type: String,
+      },
+      dataQaId: {
+        required: false,
+        default: '',
+        type: String,
+      },
     },
     data() {
       return {

package/src/components/styledText/index.js

@@ -1,76 +0,0 @@
-import styled from 'vue3-styled-components'
-
-const TEXT_VARIANTS = {
-  HEADING_MEDIUM: 'heading-medium',
-  HEADING_LARGE: 'heading-large',
-  BODY_SMALL: 'body-small',
-  BODY_MEDIUM: 'body-medium',
-  BODY_LARGE: 'body-large',
-  SUBHEADING_SMALL: 'subheading-small',
-  SUBHEADING_MEDIUM: 'subheading-medium',
-  SUBHEADING_LARGE: 'subheading-large',
-}
-
-const textVariants = {
-  [TEXT_VARIANTS.HEADING_MEDIUM]: {
-    fontSize: '20px',
-    fontWeight: '500',
-    lineHeight: '130%',
-    letterSpacing: '-0.3px',
-  },
-  [TEXT_VARIANTS.HEADING_LARGE]: {
-    fontSize: '24px',
-    fontWeight: '500',
-    lineHeight: '130%',
-    letterSpacing: '-0.36px',
-  },
-  [TEXT_VARIANTS.SUBHEADING_SMALL]: {
-    fontSize: '12px',
-    fontWeight: '500',
-    lineHeight: '140%',
-    letterSpacing: '-0.12px',
-  },
-  [TEXT_VARIANTS.SUBHEADING_MEDIUM]: {
-    fontSize: '14px',
-    fontWeight: '500',
-    lineHeight: '140%',
-    letterSpacing: '-0.14px',
-  },
-  [TEXT_VARIANTS.SUBHEADING_LARGE]: {
-    fontSize: '16px',
-    fontWeight: '500',
-    lineHeight: '140%',
-    letterSpacing: '-0.16px',
-  },
-  [TEXT_VARIANTS.BODY_SMALL]: {
-    fontSize: '12px',
-    fontWeight: '400',
-    lineHeight: '150%',
-  },
-  [TEXT_VARIANTS.BODY_MEDIUM]: {
-    fontSize: '14px',
-    fontWeight: '400',
-    lineHeight: '150%',
-  },
-  [TEXT_VARIANTS.BODY_LARGE]: {
-    fontSize: '16px',
-    fontWeight: '400',
-    lineHeight: '150%',
-  },
-}
-
-const StyledText = styled('div', {
-  fontColor: String,
-  type: String,
-})`
-  color: ${(props) => props.fontColor};
-  font-style: normal;
-
-  font-size: ${(props) => textVariants[props.type]?.fontSize ?? '14px'};
-  font-weight: ${(props) => textVariants[props.type]?.fontWeight ?? '400'};
-  line-height: ${(props) => textVariants[props.type]?.lineHeight ?? '150%'};
-  letter-spacing: ${(props) =>
-    textVariants[props.type]?.letterSpacing ?? 'normal'};
-`
-
-export default StyledText