@eturnity/eturnity_reusable_components 8.49.3 → 9.3.1--EPDM-16195.2

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/inputs/radioButton/index.vue

@@ -20,7 +20,7 @@
           <Radio
             :checked="selectedOption === item.value"
             :data-id="`radio_button_${dataId}_option_${item.value}`"
-            :data-qa-id="dataQaId"
+            :data-qa-id="`${dataQaId}_${item.value}`"
             :data-test-id="'radioInput_' + item.value"
             :disabled="isItemDisabled(item)"
             :name="'radioButtons_' + radioName"

package/src/components/sideMenu/index.vue

@@ -9,6 +9,7 @@
           v-if="!item.children"
           :key="idx"
           :data-id="`sub_menu_settings_${item.key}`"
+          :data-qa-id="`sub_menu_settings_${item.key}`"
           :fill-type="item.icon === 'free_technology' ? 'stroke' : 'fill'"
           :is-active="activeTab === item.key || activeParentTab === item.key"
           @click="$emit('tab-click', { activeKey: item.key })"
@@ -31,6 +32,7 @@
         <CollapseWrapper v-else :key="idx + item.key">
           <CollapseContainer
             :data-id="`sub_menu_settings_${item.key}`"
+            :data-qa-id="`sub_menu_settings_${item.key}`"
             :is-active="activeParentTab === item.key"
             @click="toggleActiveDropdown(item.key)"
           >
@@ -66,6 +68,7 @@
               v-for="subItem in item.children"
               :key="subItem.key"
               :data-id="`sub_menu_settings_${subItem.key}`"
+              :data-qa-id="`sub_menu_settings_${subItem.key}`"
               :is-active="activeTab === subItem.key"
               @click="
                 $emit('tab-click', {
@@ -83,6 +86,7 @@
     <BottomSection v-if="hasLogout">
       <IconContainer
         data-id="button_settings_logout"
+        data-qa-id="button_settings_logout"
         :is-active="false"
         :is-button="true"
         @click="$emit('on-logout')"
@@ -94,7 +98,11 @@
           size="18px"
         />
       </IconContainer>
-      <AppVersion>{{ appVersion }}</AppVersion>
+      <AppVersion
+        data-id="app_side_menu_version"
+        data-qa-id="app_side_menu_version"
+        >{{ appVersion }}</AppVersion
+      >
     </BottomSection>
   </PageContainer>
 </template>

package/src/components/tables/mainTable/index.vue

@@ -54,9 +54,8 @@
 
   const TableTitle = styled.div`
     margin-bottom: 16px;
-    font-weight: bold;
+    font-weight: 500;
     font-size: 14px;
-    text-transform: uppercase;
   `
 
   const tableScrollProps = {
@@ -66,12 +65,6 @@
   const TableScroll = styled('div', tableScrollProps)`
     max-width: 100%;
     height: auto;
-    ${(props) =>
-      props.isPositionAbsolute &&
-      `
-    position: absolute;
-    left: -20px;
-  `}
   `
 
   const wrapperAttrs = { fullWidth: Boolean, isOverflowHidden: Boolean }
@@ -111,15 +104,24 @@
 
   const TableContainer = styled('table', containerAttrs)`
     width: 100%;
-    border-collapse: collapse;
-    border: none;
-    font-size: 13px;
+    border-collapse: separate;
+    border-spacing: 0;
+    border-right: ${(props) =>
+      '1px solid ' + props.theme.semanticColors.grey[200]};
+    border-left: ${(props) =>
+      '1px solid ' + props.theme.semanticColors.grey[200]};
+    border-top: ${(props) =>
+      '1px solid ' + props.theme.semanticColors.grey[200]};
+    border-radius: 4px;
+    font-size: 14px;
 
     thead {
-      font-weight: bold;
+      font-weight: 500;
+      line-height: 140%;
 
       tr {
         border-bottom: none !important;
+        background-color: ${(props) => props.theme.semanticColors.grey[100]};
       }
     }
 
@@ -128,6 +130,8 @@
     }
 
     tbody {
+      font-weight: 400;
+      line-height: 150%;
       tr {
         &:hover,
         td.hovered-column {
@@ -148,16 +152,23 @@
         }
 
         td {
-          height: 40px;
+          height: 48px;
+        }
+
+        .drag-placeholder {
+          min-height: 48px;
+          min-width: 20px;
+          border-bottom: 1px solid
+            ${(props) => props.theme.semanticColors.grey[200]};
         }
       }
     }
 
     th {
-      padding: 11px 15px;
+      padding: 8px 16px;
       background-color: ${(props) => props.theme.semanticColors.grey[100]};
       border-bottom: 1px solid
-        ${(props) => props.theme.semanticColors.teal[100]};
+        ${(props) => props.theme.semanticColors.grey[200]};
       cursor: auto;
       height: 40px;
       font-weight: 500;
@@ -251,6 +262,10 @@
         visibility: hidden;
       }
 
+      &.footer {
+        background-color: ${(props) => props.theme.colors.grey5};
+      }
+
       &.footer,
       &.total-row {
         td {
@@ -283,6 +298,8 @@
         flex-wrap: nowrap;
         background-color: ${(props) => props.theme.colors.white};
         vertical-align: middle;
+        border-bottom: 1px solid
+          ${(props) => props.theme.semanticColors.grey[200]};
       }
 
       .arrow-container {
@@ -301,6 +318,11 @@
         .arrow-container {
           border-bottom: none;
         }
+
+        .drag-container,
+        .icons-container {
+          border-bottom: none !important;
+        }
       }
 
       &:hover {
@@ -326,12 +348,14 @@
         display: table-cell;
         width: 20px;
         min-width: 20px;
-        height: 40px;
+        height: 48px;
+        border-bottom: ${(props) =>
+          '1px solid ' + props.theme.semanticColors.grey[200]};
       }
 
       .drag-wrapper {
         width: 16px;
-        height: 36px;
+        height: 46px;
         display: grid;
         align-items: center;
         justify-items: center;
@@ -377,9 +401,9 @@
     }
 
     input {
-      font-size: 13px;
+      font-size: 14px;
       padding: 5px 10px;
-      background: #fff;
+      background: ${(props) => props.theme.colors.white};
       height: unset;
 
       &:focus {