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

package/src/components/banner/banner/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/banner/infoBanner/index.vue

@@ -1,6 +1,9 @@
 <template>
-  <ActionModal :is-open="isOpen" @on-close="closeModal">
-    <modalContainer>
+  <ActionModal
+    :is-open="isOpen"
+    @on-close="closeModal"
+  >
+    <ModalContainer>
       <template name="title">
         <slot name="title"></slot>
       </template>
@@ -8,62 +11,51 @@
         <slot name="body"></slot>
       </template>
       <template name="buttons">
-        <buttonContainer>
-          <Button type="primary" :text="$gettext('Got it')" minWidth="150px" @click="closeModal" />
-        </buttonContainer>
+        <ButtonContainer>
+          <Button
+            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 styled from 'vue3-styled-components'
+  import ActionModal from '../actionModal'
 
-const modalContainer = styled.div`
+  const ModalContainer = styled.div`
   width: 450px;
   min-height: 205px;
   padding: 40px 40px 30px 40px;
 `
-const modalTitle = styled.div`
-  color: ${(props) => props.theme.colors.black};
-  font-family: ${(props) => props.theme.fonts.mainFont};
-  font-size: 18px;
-  font-style: normal;
-  font-weight: 700;
-  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`
-  color: ${(props) => props.theme.colors.black};
-  font-family: ${(props) => props.theme.fonts.mainFont};
-  font-size: 13px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
-  padding: 30px 0px;
-  white-space: pre-wrap;
-`
-export default {
-  name: 'InfoModal',
-  props: ['isOpen'],
-  components: {
-    Modal,
-    modalContainer,
-    modalTitle,
-    buttonContainer,
-    textContainer
-  },
-  methods: {
-    closeModal() {
-      this.$emit('on-close')
+  export default {
+    name: 'InfoModal',
+    components: {
+      ModalContainer,
+      ButtonContainer,
+      ActionModal
+    },
+    props: {
+      isOpen: {
+        required: false,
+        default: false,
+        type: Boolean
+      }
+    },
+    methods: {
+      closeModal() {
+        this.$emit('on-close')
+      }
     }
   }
-}
 </script>

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

@@ -1,21 +1,26 @@
 <template>
-  <page-container>
-    <button-wrapper
-      :isDisabled="isDisabled"
-      :minWidth="minWidth"
-      :customColor="customColor"
+  <PageContainer>
+    <ButtonWrapper
+      :custom-color="customColor"
       :height="height"
+      :is-disabled="isDisabled"
+      :min-width="minWidth"
     >
-      <icon-container :width="height">
-        <icon
-            :name="iconName"
-            :color="fontColor ? fontColor : theme.colors.white"
-            size="14px"
+      <IconContainer :width="height">
+        <Icon
+          :color="fontColor ? fontColor : theme.colors.white"
+          :name="iconName"
+          size="14px"
         />
-      </icon-container>
-      <button-container :fontSize="fontSize" :fontColor="fontColor">{{ text }}</button-container>
-    </button-wrapper>
-  </page-container>
+      </IconContainer>
+      <ButtonContainer
+        :font-color="fontColor"
+        :font-size="fontSize"
+      >
+        {{ text }}
+      </ButtonContainer>
+    </ButtonWrapper>
+  </PageContainer>
 </template>
 
 <script>
@@ -31,19 +36,19 @@
 //   height="24px"
 // />
 
-import Icon from "../../icon"
-import styled from "vue3-styled-components"
-import Theme from "@/assets/theme";
+  import Icon from "../../icon"
+  import styled from "vue3-styled-components"
+  import Theme from "@/assets/theme";
 
-const PageContainer = styled.div``
+  const PageContainer = styled.div``
 
-const ButtonAttrs = {
-  isDisabled: Boolean,
-  minWidth: String,
-  customColor: String,
-  height: String
-}
-const ButtonWrapper = styled("div", ButtonAttrs)`
+  const ButtonAttrs = {
+    isDisabled: Boolean,
+    minWidth: String,
+    customColor: String,
+    height: String
+  }
+  const ButtonWrapper = styled("div", ButtonAttrs)`
   display: grid;
   grid-template-columns: auto 1fr;
   background-color: ${(props) =>
@@ -51,7 +56,7 @@ const ButtonWrapper = styled("div", ButtonAttrs)`
       ? props.theme.colors.disabled
       : props.customColor
       ? props.customColor
-      : props.theme.colors.yellow};
+  : props.theme.colors.yellow};
   cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
   user-select: none;
   border-radius: 4px;
@@ -68,11 +73,11 @@ const ButtonWrapper = styled("div", ButtonAttrs)`
   }
 `
 
-const ButtonContainerAttrs = {
-  fontSize: String,
-  fontColor: String
-}
-const ButtonContainer = styled('div', ButtonContainerAttrs)`
+  const ButtonContainerAttrs = {
+    fontSize: String,
+    fontColor: String
+  }
+  const ButtonContainer = styled('div', ButtonContainerAttrs)`
   font-size: ${(props) => props.fontSize};
   color: ${(props) => props.fontColor ? props.fontColor : props.theme.colors.white};
   display: flex;
@@ -81,10 +86,10 @@ const ButtonContainer = styled('div', ButtonContainerAttrs)`
   padding: 0 15px;
 `
 
-const IconContainerAttrs = {
-  width: String
-}
-const IconContainer = styled('div', IconContainerAttrs)`
+  const IconContainerAttrs = {
+    width: String
+  }
+  const IconContainer = styled('div', IconContainerAttrs)`
   display: grid;
   align-items: center;
   justify-items: center;
@@ -92,51 +97,51 @@ const IconContainer = styled('div', IconContainerAttrs)`
   background: ${(props) => props.theme.colors.white + '1a'};
 `
 
-export default {
-  name: "button-icon",
-  components: {
-    PageContainer,
-    ButtonContainer,
-    ButtonWrapper,
-    IconContainer,
-    Icon
-  },
-  props: {
-    isDisabled: {
-      required: false,
-      default: false
-    },
-    text: {
-      required: true
-    },
-    minWidth: {
-      required: false,
-      default: null
+  export default {
+    name: "ButtonIcon",
+    components: {
+      PageContainer,
+      ButtonContainer,
+      ButtonWrapper,
+      IconContainer,
+      Icon
     },
-    customColor: {
-      required: false,
-      default: null
+    props: {
+      isDisabled: {
+        required: false,
+        default: false
+      },
+      text: {
+        required: true
+      },
+      minWidth: {
+        required: false,
+        default: null
+      },
+      customColor: {
+        required: false,
+        default: null
+      },
+      iconName: {
+        required: true
+      },
+      fontColor: {
+        required: false,
+        default: null
+      },
+      fontSize: {
+        required: false,
+        default: '13px'
+      },
+      height: {
+        required: false,
+        default: '30px'
+      }
     },
-    iconName: {
-      required: true
-    },
-    fontColor: {
-      required: false,
-      default: null
-    },
-    fontSize: {
-      required: false,
-      default: '13px'
-    },
-    height: {
-      required: false,
-      default: '30px'
-    }
-  },
-  data () {
-    return {
-      theme: Theme
+    data() {
+      return {
+        theme: Theme
+      }
     }
   }
-}
 </script>

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

@@ -1,10 +1,10 @@
 <template>
-  <wrapper>
-    <container>
-      <left-line :color="color" />
-      <right-line :color="color" />
-    </container>
-  </wrapper>
+  <Wrapper>
+    <Container>
+      <LeftLine :color="color" />
+      <RightLine :color="color" />
+    </Container>
+  </Wrapper>
 </template>
 
 <script>
@@ -13,49 +13,49 @@
 // <close-button
 //   color="#fff"
 // />
-import styled from 'vue3-styled-components'
+  import styled from 'vue3-styled-components'
 
-const Container = styled.div`
+  const Container = styled.div`
   position: relative;
   width: 26px;
   height: 25px;
 `
 
-const Wrapper = styled.div`
+  const Wrapper = styled.div`
   display: inline-block;
   cursor: pointer;
 `
 
-const lineAttrs = { color: String }
-const Line = styled('div', lineAttrs)`
+  const lineAttrs = { color: String }
+  const Line = styled('div', lineAttrs)`
   width: 20px;
   height: 2px;
   background-color: ${(props) =>
-    props.color ? props.color : props.theme.colors.red};
+  props.color ? props.color : props.theme.colors.red};
   position: absolute;
   top: 11px; //half of the height of the parent
 `
 
-const LeftLine = styled(Line)`
+  const LeftLine = styled(Line)`
   transform: rotate(135deg);
 `
 
-const RightLine = styled(Line)`
+  const RightLine = styled(Line)`
   transform: rotate(45deg);
 `
 
-export default {
-  name: 'close-button',
-  components: {
-    Container,
-    Wrapper,
-    LeftLine,
-    RightLine
-  },
-  props: {
-    color: {
-      required: false
+  export default {
+    name: 'CloseButton',
+    components: {
+      Container,
+      Wrapper,
+      LeftLine,
+      RightLine
+    },
+    props: {
+      color: {
+        required: false
+      }
     }
   }
-}
 </script>