@eturnity/eturnity_reusable_components 8.31.3 → 8.31.5

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)`
@@ -97,11 +107,9 @@
     display: flex;
     cursor: pointer;
     width: 100%;
-
-    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 +117,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
@@ -118,8 +127,21 @@
     background-color: ${(props) => props.theme.colors.white};
     border-bottom: ${(props) =>
       props.isActive
-        ? '1px solid' + props.theme.semanticColors.purple[400]
-        : '1px solid' + props.theme.semanticColors.grey[400]};
+        ? '2px solid' + props.theme.semanticColors.purple[400]
+        : '2px 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 {
@@ -131,6 +153,8 @@
       SubText,
       DotIcon,
       RCIcon,
+      ConversionTag,
+      TabText,
     },
     props: {
       tabsData: {
@@ -153,8 +177,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
-};