@eturnity/eturnity_reusable_components 7.24.3-EPDM-11320.2 → 7.24.3-qa-elisee-7.32.0

package/src/components/markerItem/index.vue

@@ -1,88 +1,86 @@
 <template>
-  <PageContainer>
-    <MarkerContainer
-      :background-color="backgroundColor"
+  <page-container>
+    <marker-container
+      :backgroundColor="backgroundColor"
+      :hasIcon="!!iconName"
       :cursor="cursor"
-      :has-icon="!!iconName"
     >
-      <Icon
+      <icon
         v-if="!!iconName"
-        color="white"
-        :cursor="cursor"
         :name="iconName"
+        color="white"
         size="10px"
+        :cursor="cursor"
       />
       <span>{{ label }}</span>
-    </MarkerContainer>
-  </PageContainer>
+    </marker-container>
+  </page-container>
 </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) =>
+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) =>
       props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
-    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)};
-  `
+  border-radius: 4px;
+  white-space: nowrap;
+  cursor: ${(props) => (props.isEditionAllowed ? 'pointer' : props.cursor)};
+`
 
-  export default {
-    name: 'ProjectMarker',
-    components: {
-      PageContainer,
-      MarkerContainer,
-      Icon,
+export default {
+  name: 'project-marker',
+  components: {
+    PageContainer,
+    MarkerContainer,
+    Icon
+  },
+  props: {
+    backgroundColor: {
+      required: false
+    },
+    iconName: {
+      required: false
     },
-    props: {
-      backgroundColor: {
-        required: false,
-      },
-      iconName: {
-        required: false,
-      },
-      label: {
-        required: true,
-      },
-      cursor: {
-        required: false,
-        default: 'default',
-      },
+    label: {
+      required: true
     },
+    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',
-    components: {
-      Modal,
-      ModalContainer,
-      ModalTitle,
-      ButtonContainer,
-      TextContainer,
-    },
-    props: ['isOpen'],
-    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',
+  props: ['isOpen'],
+  components: {
+    Modal,
+    modalContainer,
+    modalTitle,
+    buttonContainer,
+    textContainer
+  },
+  methods: {
+    closeModal() {
+      this.$emit('on-close')
+    }
   }
+}
 </script>

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

@@ -1,52 +1,49 @@
 <template>
   <ActionModal :is-open="isOpen" @on-close="closeModal">
-    <ModalContainer>
+    <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`
-    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')
-      },
-    },
+
+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')
+    }
   }
+}
 </script>

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

@@ -1,42 +1,42 @@
 <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>
-  // 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 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};
-    }
+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;
 
-    /* Make scrollbar visible when needed */
-    ::-webkit-scrollbar-thumb {
-      background-color: ${(props) => props.theme.colors.grey3};
-    }
+  ::-webkit-scrollbar {
+    width: 0.3em;
+    height: 100%;
+    background-color: ${(props) => props.theme.colors.grey5};
+  }
 
-    /* Make scrollbar track visible when needed */
-    ::-webkit-scrollbar-track {
-      background-color: ${(props) => props.theme.colors.grey5};
-    }
+  /* Make scrollbar visible when needed */
+  ::-webkit-scrollbar-thumb {
+    background-color: ${(props) => props.theme.colors.grey3};
+  }
 
-    .close {
-      position: absolute;
-      right: 20px;
-      top: 20px;
+  /* Make scrollbar track visible when needed */
+  ::-webkit-scrollbar-track {
+    background-color: ${(props) => props.theme.colors.grey5};
+  }
 
-      @media (max-width: 425px) {
-        right: 14px;
-        top: 12px;
-        background: white;
-        position: fixed;
-        z-index: 99;
-      }
-    }
+  .close {
+    position: absolute;
+    right: 20px;
+    top: 20px;
 
     @media (max-width: 425px) {
-      width: 100%;
-      height: 100%;
-      box-shadow: none;
+      right: 14px;
+      top: 12px;
+      background: white;
+      position: fixed;
+      z-index: 99;
     }
-  `
+  }
+
+  @media (max-width: 425px) {
+    width: 100%;
+    height: 100%;
+    box-shadow: none;
+  }
+`
 
-  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>