@eturnity/eturnity_reusable_components 8.31.2 → 8.31.4

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

@@ -41,15 +41,37 @@
         :height="height"
       >
         {{ text }}
+        <Icon
+          v-if="showCaret"
+          :color="
+            iconColor ||
+            theme.mainButton[appTheme][type][variant].default.textColor
+          "
+          data-test-id="button-icon-caret"
+          :disable-hover="disableIconHover"
+          :hovered-color="
+            iconColor ||
+            theme.mainButton[appTheme][type][variant].default.textColor
+          "
+          name="arrow_down"
+          size="8px"
+        />
       </ButtonContainer>
       <NumberContainer
-        v-if="numberCount"
+        v-if="numberCount && numberCountType === 'inline'"
         data-test-id="button-icon-number-container"
       >
         <NumberText data-test-id="button-icon-number">{{
           numberCount
         }}</NumberText>
       </NumberContainer>
+      <CountBadge
+        v-else-if="numberCount && numberCountType === 'badge'"
+        data-test-id="button-icon-number-badge"
+      >
+        {{ numberCount }}
+      </CountBadge>
+      <BetaTag v-if="isBeta" :is-disabled="isDisabled"> Beta </BetaTag>
     </ButtonWrapper>
   </PageContainer>
 </template>
@@ -70,7 +92,9 @@
   import styled from 'vue3-styled-components'
   import Theme from '@/assets/theme'
 
-  const PageContainer = styled.div``
+  const PageContainer = styled.div`
+    position: relative;
+  `
 
   const ButtonAttrs = {
     type: String,
@@ -84,6 +108,7 @@
     height: String,
   }
   const ButtonWrapper = styled('div', ButtonAttrs)`
+    position: relative;
     display: grid;
     grid-template-columns: auto 1fr auto;
     height: ${({ height }) => height};
@@ -120,7 +145,7 @@
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
     user-select: none;
     border-radius: 4px;
-    overflow: hidden;
+    overflow: visible;
     min-width: ${(props) => props.minWidth || 'initial'};
 
     &:hover {
@@ -155,6 +180,7 @@
     justify-content: center;
     padding: ${(props) =>
       props.theme?.mainButton?.size?.[props.buttonSize]?.padding};
+    gap: 8px;
     white-space: nowrap;
   `
 
@@ -200,6 +226,43 @@
     background-color: ${(props) => props.theme.semanticColors.purple[50]};
   `
 
+  const CountBadge = styled('div')`
+    position: absolute;
+    grid-area: 1 / 1 / 2 / 4;
+    top: -3.5px;
+    right: 0px;
+    transform: translateX(50%);
+    padding: 0 2px;
+    background-color: ${({ theme }) => theme.colors.red};
+    color: ${({ theme }) => theme.colors.white};
+    border-radius: 4px;
+    height: 15px;
+    min-width: 11px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 10px;
+    z-index: 1;
+    pointer-events: none;
+  `
+
+  const BetaTag = styled('div', { isDisabled: Boolean })`
+    position: absolute;
+    top: -5px;
+    right: -8px;
+    padding: 4px;
+    border-radius: 4px;
+    font-size: 10px;
+    background-color: ${(props) =>
+      props.isDisabled
+        ? props.theme.colors.disabled
+        : props.theme.semanticColors.red[500]};
+    color: ${(props) => props.theme.colors.white};
+    font-weight: 700;
+    transform: rotate(20deg);
+    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
+  `
+
   export default {
     name: 'ButtonIcon',
     components: {
@@ -210,6 +273,8 @@
       Icon,
       NumberContainer,
       NumberText,
+      CountBadge,
+      BetaTag,
     },
     props: {
       type: {
@@ -285,14 +350,27 @@
         default: false,
       },
       numberCount: {
-        type: Number,
+        type: String,
         required: false,
         default: null,
       },
+      numberCountType: {
+        type: String,
+        required: false,
+        default: 'inline',
+      },
       height: {
         type: String,
         default: 'auto',
       },
+      showCaret: {
+        type: Boolean,
+        default: false,
+      },
+      isBeta: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {

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

@@ -7,11 +7,13 @@
       :data-id="dataId"
       :data-qa-id="dataQaId"
       :height="height"
+      :is-active="isActive"
       :is-disabled="isDisabled"
       :min-width="minWidth"
       :no-wrap="noWrap"
       :type="type"
       :variant="variant"
+      :width="width"
     >
       <LabelComponent :has-icon="Boolean(icon)">
         <Icon
@@ -23,6 +25,7 @@
         />
         {{ isFirstLetterCapitalized ? capitalizeFirstLetter(text) : text }}
       </LabelComponent>
+      <BetaTag v-if="isBeta" :is-disabled="isDisabled"> Beta </BetaTag>
     </ButtonContainer>
   </PageContainer>
 </template>
@@ -50,14 +53,17 @@
     type: String,
     isDisabled: Boolean,
     minWidth: String,
+    width: String,
     noWrap: Boolean,
     height: String,
     variant: String,
     buttonSize: String,
     appTheme: String,
+    isActive: Boolean,
   }
   const ButtonContainer = styled('div', ButtonAttrs)`
     display: flex;
+    position: relative;
     justify-content: center;
     padding: ${(props) =>
       props.theme?.mainButton?.size?.[props.buttonSize]?.padding};
@@ -73,6 +79,9 @@
       props.isDisabled
         ? props.theme.mainButton[props.appTheme][props.type][props.variant]
             .disabled.backgroundColor
+        : props.isActive
+        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
+            .active.backgroundColor
         : props.theme.mainButton[props.appTheme][props.type][props.variant]
             .default.backgroundColor};
     border: ${(props) => {
@@ -91,7 +100,7 @@
     ${(props) => (props.noWrap ? `white-space: nowrap;` : '')};
     height: ${(props) => props.height};
     line-height: 1;
-
+    width: ${(props) => props.width};
     &:hover {
       background-color: ${(props) =>
         props.isDisabled
@@ -146,6 +155,23 @@
     gap: ${(props) => (props.hasIcon ? '5px' : '0')};
   `
 
+  const BetaTag = styled('div', { isDisabled: Boolean })`
+    position: absolute;
+    top: -5px;
+    right: -8px;
+    padding: 4px;
+    border-radius: 4px;
+    font-size: 10px;
+    background-color: ${(props) =>
+      props.isDisabled
+        ? props.theme.colors.disabled
+        : props.theme.semanticColors.red[500]};
+    color: ${(props) => props.theme.colors.white};
+    font-weight: 700;
+    transform: rotate(20deg);
+    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
+  `
+
   export default {
     name: 'MainButton',
     components: {
@@ -153,6 +179,7 @@
       LabelComponent,
       PageContainer,
       ButtonContainer,
+      BetaTag,
     },
     props: {
       type: {
@@ -170,6 +197,11 @@
         default: false,
         type: Boolean,
       },
+      isActive: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
       icon: {
         required: false,
         default: null,
@@ -204,6 +236,11 @@
         default: null,
         type: String,
       },
+      width: {
+        required: false,
+        default: 'auto',
+        type: String,
+      },
       height: {
         required: false,
         default: 'auto',
@@ -232,6 +269,11 @@
         required: false,
       },
       isFirstLetterCapitalized: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
+      isBeta: {
         type: Boolean,
         default: false,
       },

package/src/components/infoText/index.vue

@@ -49,7 +49,10 @@
         <slot name="trigger"></slot>
       </IconWrapper>
     </div>
-    <Teleport v-if="isVisible && (!!text || $slots.default)" to="body">
+    <Teleport
+      v-if="!hideInfoText && isVisible && (!!text || $slots.default)"
+      to="body"
+    >
       <TextWrapper data-test-id="info_text_wrapper" :style="wrapperStyle">
         <TextOverlay
           ref="infoBox"

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

@@ -799,6 +799,10 @@
         type: Boolean,
         default: false,
       },
+      hasSpaceBetweenUnit: {
+        type: Boolean,
+        default: true,
+      },
     },
     data() {
       return {
@@ -812,8 +816,12 @@
       displayedPlaceholder() {
         if (this.placeholder) return this.placeholder
         if (this.defaultNumber)
-          return `${this.defaultNumber} ${this.unitName ? this.unitName : ''}`
-        return `${this.minNumber || 0} ${this.unitName ? this.unitName : ''}`
+          return `${this.defaultNumber}${this.hasSpaceBetweenUnit ? ' ' : ''}${
+            this.unitName ? this.unitName : ''
+          }`
+        return `${this.minNumber || 0}${this.hasSpaceBetweenUnit ? ' ' : ''}${
+          this.unitName ? this.unitName : ''
+        }`
       },
       hasSlot() {
         return !!this.$slots.default
@@ -1027,8 +1035,9 @@
           return
         }
         this.textInput = this.formatWithCurrency(this.value)
+        const textInputWithoutUnit = this.formatWithoutUnit(this.value)
         this.enteredValue = stringToNumber({
-          value: this.textInput,
+          value: textInputWithoutUnit,
           numberPrecision: this.numberPrecision,
           minDecimals: this.minDecimals,
         })
@@ -1049,6 +1058,38 @@
           this.$refs.inputField1.$el.blur()
         })
       },
+      formatWithoutUnit(value) {
+        let adjustedMinValue =
+          value || value === 0
+            ? value
+            : this.defaultNumber
+            ? this.defaultNumber
+            : this.minNumber || this.minNumber === 0
+            ? this.minNumber
+            : ''
+        if (adjustedMinValue || adjustedMinValue === 0) {
+          let input = this.numberToStringEnabled
+            ? numberToString({
+                value: adjustedMinValue,
+                numberPrecision: this.numberPrecision,
+                minDecimals: this.minDecimals,
+              })
+            : adjustedMinValue
+          return input
+        } else if (!adjustedMinValue && adjustedMinValue !== 0) {
+          return ''
+        } else if (this.isFocused) {
+          return value
+        } else {
+          return this.numberToStringEnabled
+            ? numberToString({
+                value: adjustedMinValue,
+                numberPrecision: this.numberPrecision,
+                minDecimals: this.minDecimals,
+              })
+            : adjustedMinValue
+        }
+      },
       formatWithCurrency(value) {
         let adjustedMinValue =
           value || value === 0
@@ -1069,7 +1110,7 @@
           let unit = this.showLinearUnitName ? '' : this.unitName
           //return input + ' ' + unit
           if (unit) {
-            return input + ' ' + unit
+            return `${input}${this.hasSpaceBetweenUnit ? ' ' : ''}${unit}`
           }
           return input
         } else if (!adjustedMinValue && adjustedMinValue !== 0) {

package/src/components/modals/modal/index.vue

@@ -5,6 +5,7 @@
     :add-padding-top="addPaddingTop"
     :backdrop="backdrop"
     class="rc-modal-wrapper"
+    :full-screen="fullScreen"
     :is-open="isOpen"
     :position="position"
   >
@@ -29,7 +30,7 @@
 
 <script>
   // Rules: (as defined in https://e-turnity.atlassian.net/browse/EPDM-9694)
-  // 1. On clicking the “escape” key, close the modal onCloseModal()
+  // 1. On clicking the "escape" key, close the modal onCloseModal()
   // 2. Always prevent outside close
   // import Modal from "@eturnity/eturnity_reusable_components/src/components/modals/modal"
   // This is a more flexible modal box, where the parent can decide how the body of the modal looks
@@ -49,18 +50,21 @@
     backdrop: String,
     position: String,
     addPaddingTop: Boolean,
+    fullScreen: Boolean,
   }
   const PageWrapper = styled('div', pageAttrs)`
   position: ${(props) => props.position}
   display: grid;
   top: 0;
-  left: 0;
+  left: ${(props) => (props.fullScreen ? '0' : '40px')};
   width: 100%;
-  height: 100%;
+  height: ${(props) => (props.fullScreen ? '100%' : '100vh')};
   background-color: ${(props) =>
-    props.backdrop == 'dark'
-      ? 'rgba(0, 0, 0, 0.4)'
-      : 'rgba(255, 255, 255, 0.9)'};
+    props.fullScreen
+      ? props.backdrop == 'dark'
+        ? 'rgba(0, 0, 0, 0.4)'
+        : 'rgba(255, 255, 255, 0.9)'
+      : 'transparent'};
   z-index: 9999999;
   overflow: auto;
   padding-top: ${(props) => (props.addPaddingTop ? '80px' : '0')};
@@ -165,6 +169,10 @@
         type: Boolean,
         default: false,
       },
+      fullScreen: {
+        type: Boolean,
+        default: true,
+      },
     },
     setup() {
       const modalRef = ref(null)

package/src/components/tabsHeader/index.vue

@@ -10,7 +10,8 @@
         data-test-id="tab-item"
         :full-size="fullSize"
         :is-active="activeTab === item.id"
-        @click="onTabClick({ id: item.id })"
+        :is-disabled="item.isDisabled"
+        @click="onTabClick({ id: item.id, isDisabled: item.isDisabled })"
       >
         <RCIcon
           v-if="item.icon"
@@ -28,7 +29,12 @@
           :name="item.icon"
           size="14px"
         />
-        <div data-test-id="tab-text">{{ item.text }}</div>
+        <TabText
+          data-test-id="tab-text"
+          :is-active="activeTab === item.id"
+          :is-disabled="item.isDisabled"
+          >{{ item.text }}</TabText
+        >
         <DotIcon
           v-if="item.subText"
           data-test-id="dot-icon"
@@ -43,6 +49,16 @@
           name="warning"
           size="14px"
         />
+        <ConversionTag
+          v-if="item.showUpgradeTag"
+          :data-id="
+            item.isTrialEnded || item.isTrialActive
+              ? `${item.upgradeName}_upgrade_only`
+              : `conversion_tag_import_${item.upgradeName}_available_trial_${item.isTrialAvailable}`
+          "
+          :is-capitalized="true"
+          :text="item.upgradeTagText"
+        />
       </TabItem>
     </TabsContainer>
   </PageContainer>
@@ -69,13 +85,7 @@
   import styled from 'vue3-styled-components'
   import RCIcon from '../icon'
   import theme from '@/assets/theme'
-
-  const NameContainer = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-  `
+  import ConversionTag from '../tag/conversionTag'
 
   const DotIconAttrs = { isActive: Boolean }
   const DotIcon = styled('div', DotIconAttrs)`
@@ -101,7 +111,7 @@
     border-bottom: 1px solid ${(props) => props.theme.colors.purple7};
   `
 
-  const TabAttrs = { isActive: Boolean, fullSize: Boolean }
+  const TabAttrs = { isActive: Boolean, fullSize: Boolean, isDisabled: Boolean }
   const TabItem = styled('div', TabAttrs)`
     display: flex;
     align-items: center;
@@ -109,6 +119,7 @@
     gap: 8px;
     padding: 10px 25px;
     font-size: 14px;
+    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
     font-weight: ${(props) => (props.isActive ? '500' : '400')};
     color: ${(props) =>
       props.isActive
@@ -122,6 +133,19 @@
         : '1px solid' + props.theme.semanticColors.grey[400]};
   `
 
+  const TabTextAttrs = { isActive: Boolean, isDisabled: Boolean }
+  const TabText = styled('div', TabTextAttrs)`
+    font-size: 14px;
+    font-weight: 400;
+    color: ${(props) =>
+      props.isActive
+        ? props.theme.semanticColors.purple[500]
+        : props.isDisabled
+        ? props.theme.semanticColors.grey[600]
+        : props.theme.semanticColors.teal[700]};
+    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
+  `
+
   export default {
     name: 'RCTabsHeader',
     components: {
@@ -131,6 +155,8 @@
       SubText,
       DotIcon,
       RCIcon,
+      ConversionTag,
+      TabText,
     },
     props: {
       tabsData: {
@@ -153,8 +179,8 @@
       }
     },
     methods: {
-      onTabClick({ id }) {
-        if (id === this.activeTab) {
+      onTabClick({ id, isDisabled }) {
+        if (id === this.activeTab || isDisabled) {
           return
         }
         this.$emit('on-tab-change', id)

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

@@ -1,19 +1,42 @@
 <template>
-  <RCButton
-    button-size="tiny"
-    icon="star"
-    icon-color="yellow"
-    :text="textToDisplay"
-    type="protag"
-    variant="main"
-  />
+  <TagContainer :data-id="dataId">
+    <RcIcon
+      :color="getIconColor"
+      :hovered-color="getIconColor"
+      name="star"
+      size="10px"
+    />
+    <TextContainer>{{ textToDisplay }}</TextContainer>
+  </TagContainer>
 </template>
 <script>
-  import RCButton from '../../buttons/mainButton'
+  import styled from 'vue3-styled-components'
+  import RcIcon from '../../icon'
+  import theme from '../../../assets/theme'
+
+  const TagContainer = styled.div`
+    display: inline-flex;
+    align-items: baseline;
+    justify-content: center;
+    gap: 4px;
+    border-radius: 4px;
+    padding: 4px;
+    background-color: ${(props) => props.theme.semanticColors.yellow[200]};
+    cursor: pointer;
+  `
+
+  const TextContainer = styled.div`
+    font-size: 12px;
+    font-weight: 700;
+    color: ${(props) => props.theme.semanticColors.teal[800]};
+  `
+
   export default {
     name: 'ConversionTag',
     components: {
-      RCButton,
+      TagContainer,
+      RcIcon,
+      TextContainer,
     },
     props: {
       text: {
@@ -24,8 +47,15 @@
         type: Boolean,
         default: true,
       },
+      dataId: {
+        type: String,
+        default: '',
+      },
     },
     computed: {
+      getIconColor() {
+        return theme.semanticColors.yellow[500]
+      },
       textToDisplay() {
         if (this.isUpperCase) {
           return this.text.toUpperCase()

package/dist/main.es733.js

@@ -1,4 +0,0 @@
-const __vite_glob_0_349 = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxOCAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMi40IDEuMkMyLjQgMS44NjI3NCAxLjg2Mjc0IDIuNCAxLjIgMi40QzAuNTM3MjU4IDIuNCAwIDEuODYyNzQgMCAxLjJDMCAwLjUzNzI1OCAwLjUzNzI1OCAwIDEuMiAwQzEuODYyNzQgMCAyLjQgMC41MzcyNTggMi40IDEuMloiIGZpbGw9IiMyNjMyMzgiIC8+CiAgPHBhdGggZD0iTTYgMS4yQzYgMS44NjI3NCA1LjQ2Mjc0IDIuNCA0LjggMi40QzQuMTM3MjYgMi40IDMuNiAxLjg2Mjc0IDMuNiAxLjJDMy42IDAuNTM3MjU4IDQuMTM3MjYgMCA0LjggMEM1LjQ2Mjc0IDAgNiAwLjUzNzI1OCA2IDEuMloiIGZpbGw9IiMyNjMyMzgiIC8+CiAgPHBhdGggZD0iTTIuNCA0LjhDMi40IDUuNDYyNzQgMS44NjI3NCA2IDEuMiA2QzAuNTM3MjU4IDYgMCA1LjQ2Mjc0IDAgNC44QzAgNC4xMzcyNiAwLjUzNzI1OCAzLjYgMS4yIDMuNkMxLjg2Mjc0IDMuNiAyLjQgNC4xMzcyNiAyLjQgNC44WiIgZmlsbD0iIzI2MzIzOCIgLz4KICA8cGF0aCBkPSJNNiA0LjhDNiA1LjQ2Mjc0IDUuNDYyNzQgNiA0LjggNkM0LjEzNzI2IDYgMy42IDUuNDYyNzQgMy42IDQuOEMzLjYgNC4xMzcyNiA0LjEzNzI2IDMuNiA0LjggMy42QzUuNDYyNzQgMy42IDYgNC4xMzcyNiA2IDQuOFoiIGZpbGw9IiMyNjMyMzgiIC8+CiAgPHBhdGggZmlsbD0iIzI2MzIzOCIgZD0iTTEwIDFoNnMyIDAgMiAydjBzMCAyIC0yIDJoLTZzLTIgMCAtMiAtMnYwczAgLTIgMiAtMiIgLz4KICA8cGF0aCBkPSJNMi40IDExLjJDMi40IDExLjg2MjcgMS44NjI3NCAxMi40IDEuMiAxMi40QzAuNTM3MjU4IDEyLjQgMCAxMS44NjI3IDAgMTEuMkMwIDEwLjUzNzMgMC41MzcyNTggMTAgMS4yIDEwQzEuODYyNzQgMTAgMi40IDEwLjUzNzMgMi40IDExLjJaIiBmaWxsPSIjMjYzMjM4IiAvPgogIDxwYXRoIGQ9Ik02IDExLjJDNiAxMS44NjI3IDUuNDYyNzQgMTIuNCA0LjggMTIuNEM0LjEzNzI2IDEyLjQgMy42IDExLjg2MjcgMy42IDExLjJDMy42IDEwLjUzNzMgNC4xMzcyNiAxMCA0LjggMTBDNS40NjI3NCAxMCA2IDEwLjUzNzMgNiAxMS4yWiIgZmlsbD0iIzI2MzIzOCIgLz4KICA8cGF0aCBkPSJNMi40IDE0LjhDMi40IDE1LjQ2MjcgMS44NjI3NCAxNiAxLjIgMTZDMC41MzcyNTggMTYgMCAxNS40NjI3IDAgMTQuOEMwIDE0LjEzNzMgMC41MzcyNTggMTMuNiAxLjIgMTMuNkMxLjg2Mjc0IDEzLjYgMi40IDE0LjEzNzMgMi40IDE0LjhaIiBmaWxsPSIjMjYzMjM4IiAvPgogIDxwYXRoIGQ9Ik02IDE0LjhDNiAxNS40NjI3IDUuNDYyNzQgMTYgNC44IDE2QzQuMTM3MjYgMTYgMy42IDE1LjQ2MjcgMy42IDE0LjhDMy42IDE0LjEzNzMgNC4xMzcyNiAxMy42IDQuOCAxMy42QzUuNDYyNzQgMTMuNiA2IDE0LjEzNzMgNiAxNC44WiIgZmlsbD0iIzI2MzIzOCIgLz4KICA8cGF0aCBmaWxsPSIjMjYzMjM4IiBkPSJNMTAgMTFoNnMyIDAgMiAydjBzMCAyIC0yIDJoLTZzLTIgMCAtMiAtMnYwczAgLTIgMiAtMiIgLz4KPC9zdmc+";
-export {
-  __vite_glob_0_349 as default
-};