@eturnity/eturnity_reusable_components 9.19.4 → 9.19.5

package/src/components/barchart/ChartControls.vue

@@ -1,13 +1,13 @@
 <template>
   <Container>
-    <LegendAndControlsWrapper :leftMargin="yAxisWidth">
+    <LegendAndControlsWrapper :left-margin="yAxisWidth">
       <LeftSection>
         <SplitButtonsContainer
           v-if="splitButtonOptions.length"
           :position="position"
         >
           <SplitButtons
-            :modelValue="selectedSplitButton"
+            :model-value="selectedSplitButton"
             :options="splitButtonOptions"
             @click="handleSplitButtonClick"
           />
@@ -18,14 +18,14 @@
         <LegendRow
           v-for="(row, rowIndex) in groupedSeries"
           :key="rowIndex"
-          :rowIndex="rowIndex"
+          :row-index="rowIndex"
         >
           <LegendItem v-for="(series, index) in row" :key="series.name">
             <LegendColor
-              :gradientFrom="
+              :gradient-from="
                 reversedColors[rowIndex * legendsItemPerRow + index].from
               "
-              :gradientTo="
+              :gradient-to="
                 reversedColors[rowIndex * legendsItemPerRow + index].to
               "
             />

package/src/components/barchart/index.vue

@@ -1,5 +1,10 @@
 <template>
-  <Container :data-id="`${dataId}_chart`" :data-qa-id="`${dataQaId}_chart`" :class="`barchart-${chartId}`" :width="width">
+  <Container
+    :class="`barchart-${chartId}`"
+    :data-id="`${dataId}_chart`"
+    :data-qa-id="`${dataQaId}_chart`"
+    :width="width"
+  >
     <ChartControlsWrapper
       v-if="isChartControlsShown('top')"
       :position="chartControlsPosition"
@@ -164,11 +169,11 @@
       :data-id="dataId"
       :data-qa-id="dataQaId"
       :field-mode="fieldMode"
+      :input-error-message="inputErrorMessage"
       :is-chart-controls-shown-in-bottom="isChartControlsShown('bottom')"
       :is-inputs-disabled="isLoading"
       :is-scrollable="isScrollable"
       :percentage-error-message="percentageErrorMessage"
-      :input-error-message="inputErrorMessage"
       :series="series"
       :y-axis-width="yAxisWidth"
       @input-blur="handleInputBlur"

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

@@ -11,6 +11,7 @@
       :is-active="isActive"
       :is-disabled="isDisabled"
       :is-hovered="isHovered"
+      :is-transparent="isTransparent"
       :min-width="minWidth"
       :type="type"
       :variant="variant"
@@ -43,6 +44,7 @@
         />
       </IconContainer>
       <ButtonContainer
+        v-if="text"
         :button-size="buttonSize"
         data-test-id="button-icon-text"
         :height="height"
@@ -118,6 +120,7 @@
     isActive: Boolean,
     isHovered: Boolean,
     height: String,
+    isTransparent: Boolean,
   }
   const ButtonWrapper = styled('div', ButtonAttrs)`
     position: relative;
@@ -138,6 +141,8 @@
       props.isDisabled
         ? props.theme.mainButton[props.appTheme][props.type][props.variant]
             .disabled.backgroundColor
+        : props.isTransparent
+        ? 'transparent'
         : props.customColor
         ? props.customColor
         : props.isActive
@@ -403,6 +408,10 @@
         type: String,
         default: '',
       },
+      isTransparent: {
+        type: Boolean,
+        default: false,
+      },
       isFirstLetterCapitalized: {
         required: false,
         default: false,

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

@@ -4,13 +4,16 @@
       :id="id"
       :app-theme="appTheme"
       :button-size="buttonSize"
+      :custom-text-color="customTextColor"
       :data-id="dataId"
       :data-qa-id="dataQaId"
       :height="height"
       :is-active="isActive"
       :is-disabled="isDisabled"
       :min-width="minWidth"
+      :no-background-color="noBackgroundColor"
       :no-wrap="noWrap"
+      :opacity-level="opacityLevel"
       :type="type"
       :variant="variant"
       :width="width"
@@ -67,6 +70,9 @@
     buttonSize: String,
     appTheme: String,
     isActive: Boolean,
+    noBackgroundColor: Boolean,
+    customTextColor: String,
+    opacityLevel: String,
   }
   const ButtonContainer = styled('div', ButtonAttrs)`
     display: flex;
@@ -77,13 +83,17 @@
     font-size: ${(props) =>
       props.theme?.mainButton?.size?.[props.buttonSize]?.fontSize};
     color: ${(props) =>
-      props.isDisabled
+      props.customTextColor
+        ? props.customTextColor
+        : props.isDisabled
         ? props.theme.mainButton[props.appTheme][props.type][props.variant]
             .disabled.textColor
         : props.theme.mainButton[props.appTheme][props.type][props.variant]
             .default.textColor};
     background-color: ${(props) =>
-      props.isDisabled
+      props.noBackgroundColor
+        ? 'transparent'
+        : props.isDisabled
         ? props.theme.mainButton[props.appTheme][props.type][props.variant]
             .disabled.backgroundColor
         : props.isActive
@@ -108,6 +118,7 @@
     height: ${(props) => props.height};
     line-height: 1;
     width: ${(props) => props.width};
+    opacity: ${(props) => props.opacityLevel};
 
     @media (hover: hover) and (pointer: fine) {
       &:hover {
@@ -130,30 +141,6 @@
     }
   `
 
-  const AltAttrs = {
-    altStyle: Boolean,
-    color: String,
-  }
-
-  const IconContainer = styled('div', AltAttrs)`
-    background-color: ${(props) =>
-      props.color ? props.color : props.theme.colors.transparentWhite1};
-    padding: 7px;
-    height: 100%;
-    width: 30%;
-    justify-content: center;
-    display: flex;
-    align-items: center;
-    border-radius: 4px 0 0 4px;
-    color: ${(props) => props.theme.colors.white};
-    all: ${(props) => (props.altStyle ? '' : 'unset')};
-  `
-
-  const TextContainer = styled('span', AltAttrs)`
-    padding: ${(props) => (props.altStyle ? '7px' : '0')};
-    all: ${(props) => (props.altStyle ? '' : 'unset')};
-  `
-
   const LabelAttrs = {
     hasIcon: Boolean,
     reverseDirection: Boolean,
@@ -305,6 +292,19 @@
         type: Boolean,
         default: false,
       },
+      noBackgroundColor: {
+        type: Boolean,
+        default: false,
+      },
+      customTextColor: {
+        required: false,
+        default: null,
+      },
+      opacityLevel: {
+        required: false,
+        default: '100%',
+        type: String,
+      },
     },
     computed: {
       theme() {

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

@@ -2,8 +2,8 @@
   <Container>
     <SplitButton
       v-for="(option, index) in options"
-      :data-id-key="`${dataIdKey}_${option.value}`"
       :key="index"
+      :data-id-key="`${dataIdKey}_${option.value}`"
       :length="options.length"
       :position="getButtonPosition(index)"
       :selected="modelValue === option.value"

package/src/components/dropdown/index.vue

@@ -1,7 +1,7 @@
 <template>
   <Wrapper
-    data-test-id="dropdown_wrapper"
     ref="dropdown"
+    data-test-id="dropdown_wrapper"
     :opening-mode="openingMode"
   >
     <WrapperButton
@@ -115,10 +115,15 @@
         isOpenByClick: false,
       }
     },
+    watch: {
+      isOpenByClick(newVal) {
+        this.$emit('on-dropdown-toggle', newVal)
+      },
+    },
     mounted() {
       document.addEventListener('click', this.clickOutside)
     },
-    beforeDestroy() {
+    beforeUnmount() {
       document.removeEventListener('click', this.clickOutside)
     },
     methods: {
@@ -138,10 +143,5 @@
         }
       },
     },
-    watch: {
-      isOpenByClick(newVal) {
-        this.$emit('on-dropdown-toggle', newVal)
-      },
-    },
   }
 </script>

package/src/components/inputs/searchInput/SearchInput.stories.js

@@ -64,4 +64,4 @@ Sizes.args = {
   ...defaultProps,
   'input-width': '250px',
   'is-filter': true,
-}
+}

package/src/components/inputs/searchInput/searchInput.spec.js

@@ -62,4 +62,4 @@ describe('SearchInput.vue', () => {
     // Check that the focus method was called
     expect(focusSpy).toHaveBeenCalled()
   })
-})
+})