@eturnity/eturnity_reusable_components 9.19.4 → 9.19.6

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

@@ -1,9 +1,12 @@
 <template>
   <Wrapper
     v-show="!isLoading"
+    :border="border"
+    :box-shadow="boxShadow"
     :class="viewCardClass"
     data-test-id="card_main_wrapper"
     :min-width="minWidth"
+    :padding="padding"
     :width="width"
   >
     <Spinner
@@ -13,7 +16,11 @@
       size="50px"
     />
     <CardWrapper v-else>
-      <CardTitle :class="titleClass" data-test-id="card_title">
+      <CardTitle
+        v-if="title && title.length > 0"
+        :class="titleClass"
+        data-test-id="card_title"
+      >
         {{ $gettext(title) }}
         <InfoText
           v-if="showPopover && popoverText !== ''"
@@ -44,16 +51,24 @@
   import Spinner from '../spinner'
   import InfoText from '../infoText'
 
-  const WrapperProps = { width: [Number, String], minWidth: [Number, String] }
+  const WrapperProps = {
+    width: [Number, String],
+    minWidth: [Number, String],
+    boxShadow: String,
+    border: String,
+    padding: String,
+  }
   const Wrapper = styled('div', WrapperProps)`
     max-width: ${(props) => props.width};
     min-width: ${(props) => props.minWidth};
-    padding: 20px;
-    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
-      0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+    padding: ${(props) => props.padding};
+    box-shadow: ${(props) =>
+      props.boxShadow ||
+      '0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)'};
     border-radius: 4px;
     background-color: ${(props) => props.theme.colors.white};
     height: 100%;
+    ${(props) => props.border && `border: ${props.border};`}
   `
 
   const CardWrapper = styled('div')`
@@ -113,6 +128,21 @@
         type: Boolean,
         default: false,
       },
+      boxShadow: {
+        type: String,
+        required: false,
+        default: null,
+      },
+      border: {
+        type: String,
+        required: false,
+        default: null,
+      },
+      padding: {
+        type: String,
+        required: false,
+        default: '20px',
+      },
     },
   }
 </script>

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

@@ -2,15 +2,20 @@
   <InfoContainer
     :align-items="alignItems"
     :border-color="borderColor"
+    :border-radius="borderRadius"
     :border-style="borderStyle"
     :color="color"
     data-test-id="info_card_wrapper"
+    :hide-default-icon="hideDefaultIcon"
     :min-height="minHeight"
     :min-width="minWidth"
     :padding="padding"
     :preset-styles="presetStyles"
   >
-    <IconWrapper :size="iconWrapperSize ? iconWrapperSize : iconSize">
+    <IconWrapper
+      v-if="!hideDefaultIcon"
+      :size="iconWrapperSize ? iconWrapperSize : iconSize"
+    >
       <RCIcon
         :color="iconColor ? iconColor : presetStyles.iconColor"
         data-test-id="info_card_icon"
@@ -19,7 +24,10 @@
         :size="iconSize"
       />
     </IconWrapper>
-    <TextContainer data-test-id="info_card_text_container">
+    <TextContainer
+      data-test-id="info_card_text_container"
+      :hide-default-icon="hideDefaultIcon"
+    >
       <slot></slot>
     </TextContainer>
   </InfoContainer>
@@ -35,11 +43,13 @@
     minWidth: String,
     color: String,
     alignItems: String,
+    hideDefaultIcon: Boolean,
     padding: String,
     borderColor: String,
     borderStyle: String,
     presetStyles: Object,
   }
+
   const InfoContainer = styled('div', infoContainerAttrs)`
     display: flex;
     align-items: ${(props) =>
@@ -50,7 +60,7 @@
     padding: ${(props) =>
       props.padding ? props.padding : props.presetStyles.padding};
     color: ${(props) => (props.color ? props.color : props.presetStyles.color)};
-    border-radius: 4px;
+    border-radius: ${(props) => props.borderRadius};
     background-color: ${(props) =>
       props.backgroundColor
         ? props.backgroundColor
@@ -62,9 +72,14 @@
       props.borderColor ? props.borderColor : props.presetStyles.borderColor};
   `
 
-  const TextContainer = styled.div`
+  const TextContainer = styled('div', {
+    hideDefaultIcon: Boolean,
+  })`
     font-size: 14px;
+    flex: ${(props) => (props.hideDefaultIcon ? '1' : '0 1 auto')};
     width: 100%;
+    max-width: none;
+    min-width: 0;
   `
 
   const IconWrapper = styled('div', {
@@ -75,6 +90,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    flex-shrink: 0;
   `
 
   export default {
@@ -121,6 +137,11 @@
         type: String,
         default: '',
       },
+      /** When true, the leading icon is omitted and the slot spans the full row width. */
+      hideDefaultIcon: {
+        type: Boolean,
+        default: false,
+      },
       padding: {
         required: false,
         type: String,
@@ -136,6 +157,11 @@
         type: String,
         default: '',
       },
+      borderRadius: {
+        required: false,
+        type: String,
+        default: '4px',
+      },
       iconName: {
         required: false,
         type: String,

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()
   })
-})
+})