@eturnity/eturnity_reusable_components 8.16.9-EPDM-14690.2 → 8.16.9-EPDM-14690.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.16.9-EPDM-14690.2",
+  "version": "8.16.9-EPDM-14690.3",
   "files": [
     "dist",
     "src"

package/src/components/barchart/BottomFields.vue

@@ -33,10 +33,8 @@
               <InputNumber
                 :allow-negative="false"
                 :disabled="isInputsDisabled"
-                :error-message="null"
                 input-height="36px"
-                :is-border-error-only="true"
-                :is-error="
+                :is-info-border="
                   fieldMode === 'percentage'
                     ? calculatePercentageTotal(item.label) !== 100
                     : false
@@ -83,10 +81,9 @@
               :is-scrollable="isScrollable"
             >
               <InputNumber
-                :error-message="$gettext('load_profile_not_add_up_to_100')"
                 input-height="36px"
                 :is-border-error-only="true"
-                :is-error="
+                :is-info-border="
                   fieldMode === 'percentage'
                     ? calculatePercentageTotal(item.label) !== 100
                     : false
@@ -127,11 +124,22 @@
       </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, watch, watchEffect, onMounted } from 'vue'
+  import { ref, computed, watchEffect } from 'vue'
   import InputNumber from '../inputs/inputNumber'
+  import InfoCard from '../infoCard'
 
   import {
     Container,
@@ -143,6 +151,8 @@
     InputRow,
     TotalInputRow,
     InputGroup,
+    InfoCardContainer,
+    InfoCardBody,
   } from './styles/bottomFields'
 
   const props = defineProps({
@@ -345,6 +355,12 @@
     }
   }
 
+  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/styles/bottomFields.js

@@ -68,3 +68,13 @@ export const InputGroup = styled('div', {
     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/infoCard/index.vue

@@ -73,7 +73,12 @@
       type: {
         required: false,
         type: String,
-        default: 'info',
+        default: 'info_simple',
+        validator(value) {
+          return ['info_simple', 'warning', 'error_minor', 'info'].includes(
+            value
+          )
+        },
       },
       minWidth: {
         required: false,
@@ -112,8 +117,11 @@
       },
     },
     computed: {
-      isInfo() {
+      isInfoSimple() {
         // this property is used for tests
+        return this.type === 'info_simple'
+      },
+      isInfo() {
         return this.type === 'info'
       },
       isWarning() {
@@ -144,9 +152,13 @@
           stylesCollection.borderStyle = 'dashed'
           stylesCollection.borderColor = theme.colors.pureRed
           stylesCollection.iconColor = theme.colors.pureRed
-        } else {
+        } else if (this.isInfoSimple) {
           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.isInfo).toBe(true)
+      expect(wrapper.vm.isInfoSimple).toBe(true)
       expect(wrapper.vm.isWarning).toBe(false)
       expect(wrapper.vm.isErrorMinor).toBe(false)
 
       await wrapper.setProps({ type: 'warning' })
 
-      expect(wrapper.vm.isInfo).toBe(false)
+      expect(wrapper.vm.isInfoSimple).toBe(false)
       expect(wrapper.vm.isWarning).toBe(true)
       expect(wrapper.vm.isErrorMinor).toBe(false)
 
       await wrapper.setProps({ type: 'error_minor' })
 
-      expect(wrapper.vm.isInfo).toBe(false)
+      expect(wrapper.vm.isInfoSimple).toBe(false)
       expect(wrapper.vm.isWarning).toBe(false)
       expect(wrapper.vm.isErrorMinor).toBe(true)
     })

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

@@ -53,6 +53,7 @@
         :is-border-error-only="isBorderErrorOnly"
         :is-disabled="disabled"
         :is-error="isError"
+        :is-info-border="isInfoBorder"
         :is-interactive="isInteractive"
         :min-width="minWidth"
         :no-border="noBorder"
@@ -210,6 +211,7 @@
     showArrowControls: Boolean,
     readOnly: Boolean,
     isBorderErrorOnly: Boolean,
+    isInfoBorder: Boolean,
   }
 
   const Container = styled('div', inputProps)`
@@ -222,7 +224,9 @@
 
   const InputContainer = styled('input', inputProps)`
     border: ${(props) =>
-      props.isError
+      props.isInfoBorder
+        ? '1px solid ' + props.theme.semanticColors.blue[500]
+        : props.isError
         ? '1px solid ' + props.theme.colors.red
         : props.noBorder
         ? 'none'
@@ -708,6 +712,10 @@
         type: Boolean,
         default: false,
       },
+      isInfoBorder: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {