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

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

@@ -1,27 +1,30 @@
 <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;
@@ -30,12 +33,12 @@ const modalTitle = styled.div`
   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;
@@ -45,20 +48,20 @@ const textContainer = styled.div`
   padding: 30px 0px;
   white-space: pre-wrap;
 `
-export default {
-  name: 'actionModal',
-  props: ['isOpen'],
-  components: {
-    Modal,
-    modalContainer,
-    modalTitle,
-    buttonContainer,
-    textContainer
-  },
-  methods: {
-    closeModal() {
-      this.$emit('on-close')
+  export default {
+    name: 'ActionModal',
+    components: {
+      Modal,
+      ModalContainer,
+      ModalTitle,
+      ButtonContainer,
+      TextContainer
+    },
+    props: ['isOpen'],
+    methods: {
+      closeModal() {
+        this.$emit('on-close')
+      }
     }
   }
-}
 </script>

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

@@ -1,49 +1,56 @@
 <template>
-  <ActionModal :is-open="isOpen" @on-close="closeModal">
-    <modalContainer>
+  <ActionModal
+    :is-open="isOpen"
+    @on-close="closeModal"
+  >
+    <ModalContainer>
       <template #title>
-        <slot name="title" />
+        <slot name="title"></slot>
       </template>
       <template #body>
-        <slot name="body" />
+        <slot name="body"></slot>
       </template>
       <template #buttons>
-        <buttonContainer>
-          <Button type="primary" :text="$gettext('Got it')" minWidth="150px" @click="closeModal" />
-        </buttonContainer>
+        <ButtonContainer>
+          <RCMainButton
+            min-width="150px"
+            :text="$gettext('Got it')"
+            type="primary"
+            @click="closeModal"
+          />
+        </ButtonContainer>
       </template>
-
-    </modalContainer>
+    </ModalContainer>
   </ActionModal>
 </template>
 <script>
 
-import styled from 'vue3-styled-components'
-import ActionModal from '../actionModal'
-import Button from '../../buttons/mainButton'
-const modalContainer = styled.div`
+  import styled from 'vue3-styled-components'
+  import ActionModal from '../actionModal'
+  import RCMainButton 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',
-  props: ['isOpen'],
-  components: {
-    modalContainer,
-    buttonContainer,
-    ActionModal,
-    Button
-  },
-  methods: {
-    closeModal() {
-      this.$emit('on-close')
+  export default {
+    name: 'InfoModal',
+    components: {
+      ModalContainer,
+      ButtonContainer,
+      ActionModal,
+      RCMainButton
+    },
+    props: ['isOpen'],
+    methods: {
+      closeModal() {
+        this.$emit('on-close')
+      }
     }
   }
-}
 </script>

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

@@ -1,18 +1,26 @@
 <template>
-  <page-wrapper
-    :position="position"
-    :isOpen="isOpen"
-    :class="{ visible: isOpen, hidden: !isOpen }"
+  <PageWrapper
     :backdrop="backdrop"
+    :class="{ visible: isOpen, hidden: !isOpen }"
+    :is-open="isOpen"
+    :position="position"
   >
-    <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>
+    <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>
 </template>
 
 <script>
@@ -26,17 +34,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;
@@ -46,7 +54,7 @@ const PageWrapper = styled('div', pageAttrs)`
   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;
 
@@ -67,7 +75,7 @@ const PageWrapper = styled('div', pageAttrs)`
   }
 `
 
-const ModalContainer = styled.div`
+  const ModalContainer = styled.div`
   align-self: center;
   justify-self: center;
   position: relative;
@@ -118,71 +126,71 @@ const ModalContainer = styled.div`
   }
 `
 
-export default {
-  name: 'Modal',
-  components: {
-    PageWrapper,
-    ModalContainer,
-    CloseButton,
-    Spinner,
-    ContentContainer
-  },
-  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'
+  export default {
+    name: 'Modal',
+    components: {
+      PageWrapper,
+      ModalContainer,
+      CloseButton,
+      Spinner,
+      ContentContainer
     },
-    stopPropagation: {
-      type: Boolean,
-      default: true
-    }
-  },
-  beforeDestroy() {
-    window.removeEventListener('keydown', this.handleKeyDown)
-  },
-  methods: {
-    onCloseModal() {
-      this.$emit('on-close')
-    },
-    handleKeyDown({ key }) {
-      if (key === 'Escape') {
-        this.onCloseModal()
+    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
       }
     },
-    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)
+          }
+        }
       }
-    }
-  },
-  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)
+    },
+    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()
         }
       }
     }
   }
-}
 </script>

package/src/components/navigationTabs/index.vue

@@ -1,36 +1,39 @@
 <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 :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>
+      <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>
 </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;
@@ -38,17 +41,17 @@ const bottomLine = styled('div')`
   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;
@@ -62,9 +65,9 @@ const Option = styled('div', TabAttr)`
         : 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;
@@ -73,7 +76,7 @@ const Tab = styled('div', TabAttr)`
   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;
@@ -83,30 +86,30 @@ const Tab = styled('div', TabAttr)`
   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,13 +1,17 @@
 <template>
-  <subtitle-text :color="color" :marginBottom="marginBottom" :hasInfoText="!!infoText">
+  <SubtitleText
+    :color="color"
+    :has-info-text="!!infoText"
+    :margin-bottom="marginBottom"
+  >
     <span>
       {{ text }}
     </span>
-    <info-text
+    <InfoText
       v-if="!!infoText"
       :text="infoText"
     />
-  </subtitle-text>
+  </SubtitleText>
 </template>
 
 <script>
@@ -18,16 +22,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')};
@@ -35,27 +39,27 @@ const SubtitleText = styled("div", textAttrs)`
   position: relative;
 `
 
-export default {
-  name: "page-subtitle",
-  components: {
-    SubtitleText,
-    InfoText,
-  },
-  props: {
-    text: {
-      required: true,
+  export default {
+    name: "PageSubtitle",
+    components: {
+      SubtitleText,
+      InfoText,
     },
-    color: {
-      required: false,
+    props: {
+      text: {
+        required: true,
+      },
+      color: {
+        required: false,
+      },
+      infoText: {
+        required: false,
+        default: null,
+      },
+      marginBottom: {
+        required: false,
+        default: "30px",
+      }
     },
-    infoText: {
-      required: false,
-      default: null,
-    },
-    marginBottom: {
-      required: false,
-      default: "30px",
-    }
-  },
-}
+  }
 </script>