@eturnity/eturnity_reusable_components 7.24.3-EPDM-11320.0 → 7.24.3-EPDM-11143.1

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

@@ -1,30 +1,27 @@
 <template>
-  <Modal
-    :is-open="isOpen"
-    @on-close="closeModal"
-  >
-    <ModalContainer>
-      <ModalTitle v-if="$slots.title">
+  <Modal :is-open="isOpen" @on-close="closeModal">
+    <modalContainer>
+      <modalTitle v-if="$slots.title">
         <slot name="title"></slot>
-      </ModalTitle>
-      <TextContainer v-if="$slots.body">
+      </modalTitle>
+      <textContainer v-if="$slots.body">
         <slot name="body"></slot>
-      </TextContainer>
-      <ButtonContainer v-if="$slots.buttons">
+      </textContainer>
+      <buttonContainer v-if="$slots.buttons">
         <slot name="buttons"></slot>
-      </ButtonContainer>
-    </ModalContainer>
+      </buttonContainer>
+    </modalContainer>
   </Modal>
 </template>
 <script>
-  import styled from 'vue3-styled-components'
-  import Modal from '../modal'
-  const ModalContainer = styled.div`
+import styled from 'vue3-styled-components'
+import Modal from '../modal'
+const modalContainer = styled.div`
   width: 450px;
   min-height: 205px;
   padding: 40px 40px 30px 40px;
 `
-  const ModalTitle = styled.div`
+const modalTitle = styled.div`
   color: ${(props) => props.theme.colors.black};
   font-family: ${(props) => props.theme.fonts.mainFont};
   font-size: 18px;
@@ -33,12 +30,12 @@
   line-height: 120%;
   text-transform: uppercase;
 `
-  const ButtonContainer = styled.div`
+const buttonContainer = styled.div`
   display: inline-flex;
   align-items: flex-start;
   gap: 20px;
 `
-  const TextContainer = styled.div`
+const textContainer = styled.div`
   color: ${(props) => props.theme.colors.black};
   font-family: ${(props) => props.theme.fonts.mainFont};
   font-size: 13px;
@@ -48,20 +45,20 @@
   padding: 30px 0px;
   white-space: pre-wrap;
 `
-  export default {
-    name: 'ActionModal',
-    components: {
-      Modal,
-      ModalContainer,
-      ModalTitle,
-      ButtonContainer,
-      TextContainer
-    },
-    props: ['isOpen'],
-    methods: {
-      closeModal() {
-        this.$emit('on-close')
-      }
+export default {
+  name: 'actionModal',
+  props: ['isOpen'],
+  components: {
+    Modal,
+    modalContainer,
+    modalTitle,
+    buttonContainer,
+    textContainer
+  },
+  methods: {
+    closeModal() {
+      this.$emit('on-close')
     }
   }
+}
 </script>

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

@@ -1,56 +1,49 @@
 <template>
-  <ActionModal
-    :is-open="isOpen"
-    @on-close="closeModal"
-  >
-    <ModalContainer>
+  <ActionModal :is-open="isOpen" @on-close="closeModal">
+    <modalContainer>
       <template #title>
-        <slot name="title"></slot>
+        <slot name="title" />
       </template>
       <template #body>
-        <slot name="body"></slot>
+        <slot name="body" />
       </template>
       <template #buttons>
-        <ButtonContainer>
-          <RCMainButton
-            min-width="150px"
-            :text="$gettext('Got it')"
-            type="primary"
-            @click="closeModal"
-          />
-        </ButtonContainer>
+        <buttonContainer>
+          <Button type="primary" :text="$gettext('Got it')" minWidth="150px" @click="closeModal" />
+        </buttonContainer>
       </template>
-    </ModalContainer>
+
+    </modalContainer>
   </ActionModal>
 </template>
 <script>
 
-  import styled from 'vue3-styled-components'
-  import ActionModal from '../actionModal'
-  import RCMainButton from '../../buttons/mainButton'
-  const ModalContainer = styled.div`
+import styled from 'vue3-styled-components'
+import ActionModal from '../actionModal'
+import Button from '../../buttons/mainButton'
+const modalContainer = styled.div`
   width: 450px;
   min-height: 205px;
   padding: 40px 40px 30px 40px;
 `
-  const ButtonContainer = styled.div`
+const buttonContainer = styled.div`
   display: inline-flex;
   align-items: flex-start;
   gap: 20px;
 `
-  export default {
-    name: 'InfoModal',
-    components: {
-      ModalContainer,
-      ButtonContainer,
-      ActionModal,
-      RCMainButton
-    },
-    props: ['isOpen'],
-    methods: {
-      closeModal() {
-        this.$emit('on-close')
-      }
+export default {
+  name: 'InfoModal',
+  props: ['isOpen'],
+  components: {
+    modalContainer,
+    buttonContainer,
+    ActionModal,
+    Button
+  },
+  methods: {
+    closeModal() {
+      this.$emit('on-close')
     }
   }
+}
 </script>

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

@@ -1,26 +1,18 @@
 <template>
-  <PageWrapper
-    :backdrop="backdrop"
-    :class="{ visible: isOpen, hidden: !isOpen }"
-    :is-open="isOpen"
+  <page-wrapper
     :position="position"
+    :isOpen="isOpen"
+    :class="{ visible: isOpen, hidden: !isOpen }"
+    :backdrop="backdrop"
   >
-    <ModalContainer @click="onClickModalContainer">
-      <Spinner
-        v-if="isLoading"
-        :limited-to-modal="true"
-        size="50px"
-      />
-      <ContentContainer :visible="!isLoading">
-        <slot></slot>
-      </ContentContainer>
-      <CloseButton
-        v-if="!hideClose"
-        class="close"
-        @click="onCloseModal()"
-      />
-    </ModalContainer>
-  </PageWrapper>
+    <modal-container @click="onClickModalContainer">
+      <spinner v-if="isLoading" size="50px" :limitedToModal="true" />
+      <content-container :visible="!isLoading">
+        <slot />
+      </content-container>
+      <close-button v-if="!hideClose" @click="onCloseModal()" class="close" />
+    </modal-container>
+  </page-wrapper>
 </template>
 
 <script>
@@ -34,17 +26,17 @@
 //   <div>Data....</div>
 // </modal>
 
-  import styled from 'vue3-styled-components'
-  import CloseButton from '../../buttons/closeButton'
-  import Spinner from '../../spinner'
+import styled from 'vue3-styled-components'
+import CloseButton from '../../buttons/closeButton'
+import Spinner from '../../spinner'
 
-  const contentAttrs = { visible: Boolean }
-  const ContentContainer = styled('div', contentAttrs)`
+const contentAttrs = { visible: Boolean }
+const ContentContainer = styled('div', contentAttrs)`
   visibility: ${(props) => (props.visible ? 'inherit' : 'hidden')};
 `
 
-  const pageAttrs = { isOpen: Boolean, backdrop: String, position: String }
-  const PageWrapper = styled('div', pageAttrs)`
+const pageAttrs = { isOpen: Boolean, backdrop: String, position: String }
+const PageWrapper = styled('div', pageAttrs)`
   position: ${(props) => props.position}
   display: grid;
   top: 0;
@@ -54,7 +46,7 @@
   background-color: ${(props) =>
     props.backdrop == 'dark'
       ? 'rgba(0, 0, 0, 0.4)'
-  : 'rgba(255, 255, 255, 0.9)'};
+      : 'rgba(255, 255, 255, 0.9)'};
   z-index: 99999;
   overflow: auto;
 
@@ -75,7 +67,7 @@
   }
 `
 
-  const ModalContainer = styled.div`
+const ModalContainer = styled.div`
   align-self: center;
   justify-self: center;
   position: relative;
@@ -126,71 +118,71 @@
   }
 `
 
-  export default {
-    name: 'Modal',
-    components: {
-      PageWrapper,
-      ModalContainer,
-      CloseButton,
-      Spinner,
-      ContentContainer
+export default {
+  name: 'Modal',
+  components: {
+    PageWrapper,
+    ModalContainer,
+    CloseButton,
+    Spinner,
+    ContentContainer
+  },
+  props: {
+    isOpen: {
+      required: true,
+      default: false
     },
-    props: {
-      isOpen: {
-        required: true,
-        default: false
-      },
-      isLoading: {
-        required: false,
-        default: false
-      },
-      hideClose: {
-        required: false,
-        default: false
-      },
-      backdrop: {
-        required: false,
-        default: 'white'
-      },
-      position: {
-        required: false,
-        default: 'fixed'
-      },
-      stopPropagation: {
-        type: Boolean,
-        default: true
-      }
+    isLoading: {
+      required: false,
+      default: false
     },
-    watch: {
-      isOpen: {
-        immediate: true,
-        handler(isOpen) {
-          document.body.style.overflow = isOpen ? 'hidden' : ''
-          if (isOpen) {
-            window.addEventListener('keydown', this.handleKeyDown)
-          } else {
-            window.removeEventListener('keydown', this.handleKeyDown)
-          }
-        }
-      }
+    hideClose: {
+      required: false,
+      default: false
     },
-    beforeDestroy() {
-      window.removeEventListener('keydown', this.handleKeyDown)
+    backdrop: {
+      required: false,
+      default: 'white'
     },
-    methods: {
-      onCloseModal() {
-        this.$emit('on-close')
-      },
-      handleKeyDown({ key }) {
-        if (key === 'Escape') {
-          this.onCloseModal()
-        }
-      },
-      onClickModalContainer(event) {
-        if (this.stopPropagation) {
-          event.stopPropagation()
+    position: {
+      required: false,
+      default: 'fixed'
+    },
+    stopPropagation: {
+      type: Boolean,
+      default: true
+    }
+  },
+  beforeDestroy() {
+    window.removeEventListener('keydown', this.handleKeyDown)
+  },
+  methods: {
+    onCloseModal() {
+      this.$emit('on-close')
+    },
+    handleKeyDown({ key }) {
+      if (key === 'Escape') {
+        this.onCloseModal()
+      }
+    },
+    onClickModalContainer(event) {
+      if (this.stopPropagation) {
+        event.stopPropagation()
+      }
+    }
+  },
+  watch: {
+    isOpen: {
+      immediate: true,
+      handler(isOpen) {
+        document.body.style.overflow = isOpen ? 'hidden' : ''
+        if (isOpen) {
+          window.addEventListener('keydown', this.handleKeyDown)
+        } else {
+          window.removeEventListener('keydown', this.handleKeyDown)
         }
       }
     }
   }
+}
 </script>

package/src/components/navigationTabs/index.vue

@@ -1,39 +1,36 @@
 <template>
-  <RoofTabWrap>
-    <Tab
+  <roofTabWrap>
+    <tab
       v-for="(tab, index) in tabsData"
       :key="tab.id"
+      :isDisabled="!!tab['isDisabled']"
+      :textColor="tab['textColor']"
       :active="isIndexKey ? index === activeTab : tab[tabKey] === activeTab"
-      :is-disabled="!!tab['isDisabled']"
-      :text-color="tab['textColor']"
       @click="$emit('tab-click', isIndexKey ? index : tab[tabKey])"
     >
-      <Option
-        :is-disabled="!!tab['isDisabled']"
-        :text-color="tab['textColor']"
-      >
-        <Uppercase>{{ tab[tabLabel] }}</Uppercase>
-        <InfoText
-          v-if="tab['labelInfoText']"
-          :align-arrow="tab['labelInfoAlign']"
-          :text="tab['labelInfoText']"
-        />
-      </Option>
-    </Tab>
-    <BottomLine />
-  </RoofTabWrap>
+        <Option :isDisabled="!!tab['isDisabled']" :textColor="tab['textColor']">
+            <Uppercase>{{ tab[tabLabel] }}</Uppercase>
+            <info-text
+                v-if="tab['labelInfoText']"
+                :text="tab['labelInfoText']"
+                :alignArrow="tab['labelInfoAlign']"
+            />
+        </Option>
+    </tab>
+    <bottomLine />
+  </roofTabWrap>
 </template>
 
 <script>
-  import styled from 'vue3-styled-components'
-  import InfoText from '../infoText'
-  const TabAttr = {
-    active: Boolean,
-    isDisabled: Boolean,
-    textColor: String
-  }
+import styled from 'vue3-styled-components'
+import InfoText from '../infoText'
+const TabAttr = {
+  active: Boolean,
+  isDisabled: Boolean,
+  textColor: String
+}
 
-  const BottomLine = styled('div')`
+const bottomLine = styled('div')`
   position: absolute;
   bottom: 0;
   left: 0;
@@ -41,17 +38,17 @@
   width: 100%;
   background-color: ${(props) => props.theme.colors.grey3};
 `
-  const RoofTabWrap = styled('div')`
+const roofTabWrap = styled('div')`
   display: flex;
   align-items: center;
   position: relative;
   font-size: 13px;
   font-weight: 700;
 `
-  const Uppercase = styled('span')`
+const Uppercase = styled('span')`
   text-transform: uppercase;
 `
-  const Option = styled('div', TabAttr)`
+const Option = styled('div', TabAttr)`
   font-size: 13px;
   font-weight: 700;
   display: flex;
@@ -65,9 +62,9 @@
         : props.textColor
       : props.isDisabled
       ? props.theme.colors.grey2
-  : props.theme.colors.black};
+      : props.theme.colors.black};
 `
-  const Tab = styled('div', TabAttr)`
+const Tab = styled('div', TabAttr)`
   padding: 16px 10px;
   margin-right: 5px;
   position: relative;
@@ -76,7 +73,7 @@
   border-bottom: 2px solid
     ${(props) => (props.active ? props.theme.colors.primary : 'transparent')};
   background-color: ${(props) =>
-  props.isDisabled ? props.theme.colors.grey5 : 'transparent'};
+    props.isDisabled ? props.theme.colors.grey5 : 'transparent'};
   transition: 0.2s ease;
   cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
   min-width: 140px;
@@ -86,30 +83,30 @@
   min-height: 55px;
   &:hover {
     border-color: ${(props) =>
-  props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.primary};
+      props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.primary};
   }
 `
 
-  export default {
-    name: 'Tabs',
+export default {
+  name: 'Tabs',
 
-    components: {
-      Tab,
-      BottomLine,
-      RoofTabWrap,
-      Option,
-      InfoText,
-      Uppercase
-    },
+  components: {
+    Tab,
+    bottomLine,
+    roofTabWrap,
+    Option,
+    InfoText,
+    Uppercase
+  },
 
-    props: {
-      tabsData: { required: true },
-      activeTab: { required: true },
-      isIndexKey: { type: Boolean, default: false },
-      tabKey: { type: String, default: '' },
-      tabLabel: { type: String, default: '' }
-    }
+  props: {
+    tabsData: { required: true },
+    activeTab: { required: true },
+    isIndexKey: { type: Boolean, default: false },
+    tabKey: { type: String, default: '' },
+    tabLabel: { type: String, default: '' }
   }
+}
 </script>
 
 <style lang="scss" scoped></style>

package/src/components/pageSubtitle/index.vue

@@ -1,17 +1,13 @@
 <template>
-  <SubtitleText
-    :color="color"
-    :has-info-text="!!infoText"
-    :margin-bottom="marginBottom"
-  >
+  <subtitle-text :color="color" :marginBottom="marginBottom" :hasInfoText="!!infoText">
     <span>
       {{ text }}
     </span>
-    <InfoText
+    <info-text
       v-if="!!infoText"
       :text="infoText"
     />
-  </SubtitleText>
+  </subtitle-text>
 </template>
 
 <script>
@@ -22,16 +18,16 @@
 //   color="red"
 //   infoText="My info text"
 // />
-  import styled from "vue3-styled-components"
-  import InfoText from "../infoText"
+import styled from "vue3-styled-components"
+import InfoText from "../infoText"
 
-  const textAttrs = { color: String, hasInfoText: Boolean, marginBottom: String }
-  const SubtitleText = styled("div", textAttrs)`
+const textAttrs = { color: String, hasInfoText: Boolean, marginBottom: String }
+const SubtitleText = styled("div", textAttrs)`
   display: grid;
   align-items: center;
   grid-gap: 12px;
   grid-template-columns: ${(props) =>
-  props.hasInfoText ? "auto auto 1fr" : "1fr"};
+    props.hasInfoText ? "auto auto 1fr" : "1fr"};
   color: ${(props) => (props.color ? props.color : props.theme.colors.gray1)};
   font-size: 13px;
   margin-bottom: ${(props) => (props.marginBottom ? props.marginBottom : '30px')};
@@ -39,27 +35,27 @@
   position: relative;
 `
 
-  export default {
-    name: "PageSubtitle",
-    components: {
-      SubtitleText,
-      InfoText,
+export default {
+  name: "page-subtitle",
+  components: {
+    SubtitleText,
+    InfoText,
+  },
+  props: {
+    text: {
+      required: true,
     },
-    props: {
-      text: {
-        required: true,
-      },
-      color: {
-        required: false,
-      },
-      infoText: {
-        required: false,
-        default: null,
-      },
-      marginBottom: {
-        required: false,
-        default: "30px",
-      }
+    color: {
+      required: false,
     },
-  }
+    infoText: {
+      required: false,
+      default: null,
+    },
+    marginBottom: {
+      required: false,
+      default: "30px",
+    }
+  },
+}
 </script>