@eturnity/eturnity_reusable_components 7.30.3-EPDM-10647.0 → 7.30.3-EPDM-10576.2

package/src/components/markerItem/index.vue

@@ -1,86 +1,88 @@
 <template>
-  <page-container>
-    <marker-container
-      :backgroundColor="backgroundColor"
-      :hasIcon="!!iconName"
+  <PageContainer>
+    <MarkerContainer
+      :background-color="backgroundColor"
       :cursor="cursor"
+      :has-icon="!!iconName"
     >
-      <icon
+      <Icon
         v-if="!!iconName"
-        :name="iconName"
         color="white"
-        size="10px"
         :cursor="cursor"
+        :name="iconName"
+        size="10px"
       />
       <span>{{ label }}</span>
-    </marker-container>
-  </page-container>
+    </MarkerContainer>
+  </PageContainer>
 </template>
 
 <script>
-// import MarkerItem from "@eturnity/eturnity_reusable_components/src/components/markerItem"
-// To use:
-// <marker-item
-//   label="Label"
-//   backgroundColor="#ab5348"
-//   iconName="icon_name"
-//   cursor="pointer"
-// />
+  // import MarkerItem from "@eturnity/eturnity_reusable_components/src/components/markerItem"
+  // To use:
+  // <marker-item
+  //   label="Label"
+  //   backgroundColor="#ab5348"
+  //   iconName="icon_name"
+  //   cursor="pointer"
+  // />
 
-import styled from 'vue3-styled-components'
-import Icon from '../icon'
+  import styled from 'vue3-styled-components'
+  import Icon from '../icon'
 
-const PageContainer = styled.div`
-  display: flex;
-  align-items: center;
-  font-size: 12px;
-  line-height: 14px;
-`
+  const PageContainer = styled.div`
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    line-height: 14px;
+  `
 
-const MarkerAttrs = {
-  backgroundColor: String,
-  hasIcon: Boolean,
-  cursor: String
-}
-const MarkerContainer = styled('div', MarkerAttrs)`
-  display: grid;
-  grid-template-columns: ${(props) => (props.hasIcon ? 'auto 1fr' : '1fr')};
-  grid-gap: 5px;
-  position: relative;
-  align-items: center;
-  padding: 2px 7px;
-  color: ${(props) => props.theme.colors.white};
-  background-color: ${(props) =>
-    props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
-  border: 1px solid
-    ${(props) =>
+  const MarkerAttrs = {
+    backgroundColor: String,
+    hasIcon: Boolean,
+    cursor: String,
+  }
+  const MarkerContainer = styled('div', MarkerAttrs)`
+    display: grid;
+    grid-template-columns: ${(props) => (props.hasIcon ? 'auto 1fr' : '1fr')};
+    grid-gap: 5px;
+    position: relative;
+    align-items: center;
+    padding: 2px 7px;
+    color: ${(props) => props.theme.colors.white};
+    background-color: ${(props) =>
       props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
-  border-radius: 4px;
-  white-space: nowrap;
-  cursor: ${(props) => (props.isEditionAllowed ? 'pointer' : props.cursor)};
-`
+    border: 1px solid
+      ${(props) =>
+        props.backgroundColor
+          ? props.backgroundColor
+          : props.theme.colors.grey3};
+    border-radius: 4px;
+    white-space: nowrap;
+    cursor: ${(props) => (props.isEditionAllowed ? 'pointer' : props.cursor)};
+  `
 
-export default {
-  name: 'project-marker',
-  components: {
-    PageContainer,
-    MarkerContainer,
-    Icon
-  },
-  props: {
-    backgroundColor: {
-      required: false
-    },
-    iconName: {
-      required: false
+  export default {
+    name: 'ProjectMarker',
+    components: {
+      PageContainer,
+      MarkerContainer,
+      Icon,
     },
-    label: {
-      required: true
+    props: {
+      backgroundColor: {
+        required: false,
+      },
+      iconName: {
+        required: false,
+      },
+      label: {
+        required: true,
+      },
+      cursor: {
+        required: false,
+        default: 'default',
+      },
     },
-    cursor: {
-      required: false,
-      default: 'default'
-    }
   }
-}
 </script>

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

@@ -1,64 +1,64 @@
 <template>
   <Modal :is-open="isOpen" @on-close="closeModal">
-    <modalContainer>
-      <modalTitle v-if="$slots.title">
+    <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`
-  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`
-  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: 'actionModal',
-  props: ['isOpen'],
-  components: {
-    Modal,
-    modalContainer,
-    modalTitle,
-    buttonContainer,
-    textContainer
-  },
-  methods: {
-    closeModal() {
-      this.$emit('on-close')
-    }
+  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`
+    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`
+    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: '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,52 @@
 <template>
   <ActionModal :is-open="isOpen" @on-close="closeModal">
-    <modalContainer>
+    <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`
-  width: 450px;
-  min-height: 205px;
-  padding: 40px 40px 30px 40px;
-`
-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')
-    }
+  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`
+    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')
+      },
+    },
   }
-}
 </script>

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

@@ -1,42 +1,42 @@
 <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>
-// Rules: (as defined in https://e-turnity.atlassian.net/browse/EPDM-9694)
-// 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
-// To use:
-// <modal :isOpen="isOpen" @on-close="$emit('on-close-summary')" :isLoading="true" :hideClose="true" :stopPropagation="false">
-//   <div>Data....</div>
-// </modal>
+  // Rules: (as defined in https://e-turnity.atlassian.net/browse/EPDM-9694)
+  // 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
+  // To use:
+  // <modal :isOpen="isOpen" @on-close="$emit('on-close-summary')" :isLoading="true" :hideClose="true" :stopPropagation="false">
+  //   <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)`
-  visibility: ${(props) => (props.visible ? 'inherit' : 'hidden')};
-`
+  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;
@@ -67,122 +67,122 @@ const PageWrapper = styled('div', pageAttrs)`
   }
 `
 
-const ModalContainer = styled.div`
-  align-self: center;
-  justify-self: center;
-  position: relative;
-  box-shadow: 0px 4px 4px 3px rgba(0, 0, 0, 0.1);
-  border-radius: 4px;
-  background: white;
-  margin: 0 auto;
-  overflow: auto;
-  max-width: 95%;
-  max-height: 95%;
-  min-width: 100px;
-  min-height: 100px;
+  const ModalContainer = styled.div`
+    align-self: center;
+    justify-self: center;
+    position: relative;
+    box-shadow: 0px 4px 4px 3px rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    background: white;
+    margin: 0 auto;
+    overflow: auto;
+    max-width: 95%;
+    max-height: 95%;
+    min-width: 100px;
+    min-height: 100px;
 
-  ::-webkit-scrollbar {
-    width: 0.3em;
-    height: 100%;
-    background-color: ${(props) => props.theme.colors.grey5};
-  }
+    ::-webkit-scrollbar {
+      width: 0.3em;
+      height: 100%;
+      background-color: ${(props) => props.theme.colors.grey5};
+    }
 
-  /* Make scrollbar visible when needed */
-  ::-webkit-scrollbar-thumb {
-    background-color: ${(props) => props.theme.colors.grey3};
-  }
+    /* Make scrollbar visible when needed */
+    ::-webkit-scrollbar-thumb {
+      background-color: ${(props) => props.theme.colors.grey3};
+    }
 
-  /* Make scrollbar track visible when needed */
-  ::-webkit-scrollbar-track {
-    background-color: ${(props) => props.theme.colors.grey5};
-  }
+    /* Make scrollbar track visible when needed */
+    ::-webkit-scrollbar-track {
+      background-color: ${(props) => props.theme.colors.grey5};
+    }
 
-  .close {
-    position: absolute;
-    right: 20px;
-    top: 20px;
+    .close {
+      position: absolute;
+      right: 20px;
+      top: 20px;
 
-    @media (max-width: 425px) {
-      right: 14px;
-      top: 12px;
-      background: white;
-      position: fixed;
-      z-index: 99;
+      @media (max-width: 425px) {
+        right: 14px;
+        top: 12px;
+        background: white;
+        position: fixed;
+        z-index: 99;
+      }
     }
-  }
 
-  @media (max-width: 425px) {
-    width: 100%;
-    height: 100%;
-    box-shadow: none;
-  }
-`
+    @media (max-width: 425px) {
+      width: 100%;
+      height: 100%;
+      box-shadow: none;
+    }
+  `
 
-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'
+  export default {
+    name: 'Modal',
+    components: {
+      PageWrapper,
+      ModalContainer,
+      CloseButton,
+      Spinner,
+      ContentContainer,
     },
-    position: {
-      required: false,
-      default: 'fixed'
+    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,
+      },
     },
-    stopPropagation: {
-      type: Boolean,
-      default: true
-    }
-  },
-  beforeDestroy() {
-    window.removeEventListener('keydown', this.handleKeyDown)
-  },
-  methods: {
-    onCloseModal() {
-      this.$emit('on-close')
+    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)
+          }
+        },
+      },
     },
-    handleKeyDown({ key }) {
-      if (key === 'Escape') {
-        this.onCloseModal()
-      }
+    beforeDestroy() {
+      window.removeEventListener('keydown', this.handleKeyDown)
     },
-    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)
+    methods: {
+      onCloseModal() {
+        this.$emit('on-close')
+      },
+      handleKeyDown({ key }) {
+        if (key === 'Escape') {
+          this.onCloseModal()
         }
-      }
-    }
+      },
+      onClickModalContainer(event) {
+        if (this.stopPropagation) {
+          event.stopPropagation()
+        }
+      },
+    },
   }
-}
 </script>