@eturnity/eturnity_reusable_components 6.37.0-EPDM-8148.6 → 6.37.0-EPDM-2198.1

package/src/components/inputs/toggle/index.vue

@@ -1,6 +1,11 @@
 <template>
   <container>
-    <flex-wrapper :size="size" :disabled="disabled" @click="onToggleChange">
+    <flex-wrapper
+      :size="size"
+      :disabled="disabled"
+      @click="onToggleChange"
+      :data-id="dataId"
+    >
       <label-container
         v-if="label && labelAlign === 'left'"
         :hasInfoMessage="!!infoTextMessage"
@@ -9,9 +14,6 @@
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          borderColor="#ccc"
-          size="14px"
-          :alignText="infoTextAlign"
         />
       </label-container>
       <toggle-wrapper
@@ -45,9 +47,6 @@
           @click.native.stop
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          borderColor="#ccc"
-          size="14px"
-          :alignText="infoTextAlign"
         />
       </label-container>
     </flex-wrapper>
@@ -67,29 +66,29 @@
 //   labelAlign="right"
 //   fontColor="black"
 //   :disabled="true"
-//   infoTextAlign="right" // left by default
 //   infoTextMessage="My info message"
+//   data-id="test_data_id"
 // />
 
-import styled from "vue-styled-components"
-import InfoText from "../../infoText"
+import styled from 'vue-styled-components'
+import InfoText from '../../infoText'
 
 const Container = styled.div`
   display: inline-block;
 `
 
 const flexAttrs = { size: String, disabled: Boolean }
-const FlexWrapper = styled("div", flexAttrs)`
+const FlexWrapper = styled('div', flexAttrs)`
   display: grid;
   grid-template-columns: auto 1fr;
   grid-gap: ${(props) =>
-    props.size === "medium"
-      ? "20px"
-      : props.size === "small"
-      ? "10px"
-      : "20px"};
+    props.size === 'medium'
+      ? '20px'
+      : props.size === 'small'
+      ? '10px'
+      : '20px'};
   align-items: center;
-  cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
+  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
 `
 
 const toggleAttrs = {
@@ -97,43 +96,43 @@ const toggleAttrs = {
   fontColor: String,
   disabled: Boolean,
   backgroundColor: String,
-  isChecked: Boolean,
+  isChecked: Boolean
 }
-const LabelText = styled("div", toggleAttrs)`
+const LabelText = styled('div', toggleAttrs)`
   color: ${(props) =>
     props.fontColor ? props.fontColor : props.theme.colors.darkGray};
   font-size: ${(props) =>
-    props.size === "medium"
-      ? "16px"
-      : props.size === "small"
-      ? "13px"
-      : "16px"};
+    props.size === 'medium'
+      ? '16px'
+      : props.size === 'small'
+      ? '13px'
+      : '16px'};
 `
 
-const ToggleWrapper = styled("span", toggleAttrs)`
+const ToggleWrapper = styled('span', toggleAttrs)`
   display: inline-block;
   border: ${(props) =>
     props.disabled
-      ? "1px solid " + props.theme.colors.disabled
+      ? '1px solid ' + props.theme.colors.disabled
       : props.isChecked
       ? props.backgroundColor
-        ? "1px solid " + props.backgroundColor
-        : "1px solid " + props.theme.colors.green
-      : "1px solid " + props.theme.colors.grey3}
+        ? '1px solid ' + props.backgroundColor
+        : '1px solid ' + props.theme.colors.green
+      : '1px solid ' + props.theme.colors.grey3}
   position: relative;
-  cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
+  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
   width: ${(props) =>
-    props.size === "medium"
-      ? "50px"
-      : props.size === "small"
-      ? "29px"
-      : "50px"};
+    props.size === 'medium'
+      ? '50px'
+      : props.size === 'small'
+      ? '29px'
+      : '50px'};
   height: ${(props) =>
-    props.size === "medium"
-      ? "24px"
-      : props.size === "small"
-      ? "16px"
-      : "24px"};
+    props.size === 'medium'
+      ? '24px'
+      : props.size === 'small'
+      ? '16px'
+      : '24px'};
   border-radius: 100px;
 
   &:focus {
@@ -149,9 +148,9 @@ const ToggleWrapper = styled("span", toggleAttrs)`
 const backgroundAttrs = {
   backgroundColor: String,
   isChecked: Boolean,
-  disabled: Boolean,
+  disabled: Boolean
 }
-const ToggleBackground = styled("span", backgroundAttrs)`
+const ToggleBackground = styled('span', backgroundAttrs)`
   display: block;
   border-radius: 100px;
   height: 100%;
@@ -171,25 +170,25 @@ const toggleProps = {
   isChecked: Boolean,
   toggleColor: String,
   size: String,
-  disabled: Boolean,
+  disabled: Boolean
 }
-const ToggleDot = styled("span", toggleProps)`
+const ToggleDot = styled('span', toggleProps)`
   position: absolute;
   height: ${(props) =>
-    props.size === "medium"
-      ? "14px"
-      : props.size === "small"
-      ? "10px"
-      : "14px"};
+    props.size === 'medium'
+      ? '14px'
+      : props.size === 'small'
+      ? '10px'
+      : '14px'};
   width: ${(props) =>
-    props.size === "medium"
-      ? "14px"
-      : props.size === "small"
-      ? "10px"
-      : "14px"};
-  left: 3px
+    props.size === 'medium'
+      ? '14px'
+      : props.size === 'small'
+      ? '10px'
+      : '14px'};
+  left: 3px;
   bottom: ${(props) =>
-    props.size === "medium" ? "5px" : props.size === "small" ? "2px" : "5px"};
+    props.size === 'medium' ? '5px' : props.size === 'small' ? '2px' : '5px'};
   background-color: ${(props) =>
     props.disabled
       ? props.theme.colors.disabled
@@ -202,33 +201,33 @@ const ToggleDot = styled("span", toggleProps)`
   transition: transform 0.4s ease;
   transform: ${(props) =>
     props.isChecked
-      ? props.size === "medium"
-        ? "translateX(25px)"
-        : props.size === "small"
-        ? "translateX(12px)"
-        : "translateX(25px)"
-      : "translateX(0)"};
+      ? props.size === 'medium'
+        ? 'translateX(25px)'
+        : props.size === 'small'
+        ? 'translateX(12px)'
+        : 'translateX(25px)'
+      : 'translateX(0)'};
 
   @media (max-width: ${(props) => props.theme.screen.mobile}) {
     height: 24px;
     width: 24px;
     transform: ${(props) =>
-      props.isChecked ? "translateX(25px)" : "translateX(0)"};
+      props.isChecked ? 'translateX(25px)' : 'translateX(0)'};
     bottom: 8px;
   }
 `
 
 const labelAttrs = { hasInfoMessage: Boolean }
-const LabelContainer = styled("div", labelAttrs)`
+const LabelContainer = styled('div', labelAttrs)`
   display: inline-grid;
   grid-template-columns: ${(props) =>
-    props.hasInfoMessage ? "auto 1fr" : "auto"};
+    props.hasInfoMessage ? 'auto 1fr' : 'auto'};
   grid-gap: 12px;
   align-items: center;
 `
 
 export default {
-  name: "toggle",
+  name: 'toggle',
   components: {
     Container,
     ToggleBackground,
@@ -237,52 +236,53 @@ export default {
     FlexWrapper,
     LabelText,
     InfoText,
-    LabelContainer,
+    LabelContainer
   },
   props: {
     label: {
       required: false,
-      default: "",
+      default: ''
     },
     isChecked: {
       required: true,
-      default: false,
+      default: false
     },
     toggleColor: {
-      required: false,
+      required: false
     },
     backgroundColor: {
-      required: false,
+      required: false
     },
     size: {
       required: false,
-      default: "small",
+      default: 'small'
     },
     labelAlign: {
       required: false,
-      default: "right",
+      default: 'right'
     },
     fontColor: {
-      required: false,
+      required: false
     },
     disabled: {
       required: false,
-      default: false,
+      default: false
     },
     infoTextMessage: {
-      required: false,
-    },
-    infoTextAlign: {
-      required: false,
+      required: false
     },
+    dataId: {
+      type: String,
+      default: ''
+    }
   },
   methods: {
     onToggleChange() {
       if (this.disabled) {
         return
       }
-      this.$emit("on-toggle-change", !this.isChecked)
-    },
-  },
+      this.$emit('on-toggle-change', !this.isChecked)
+    }
+  }
 }
 </script>

package/src/components/label/index.vue

@@ -0,0 +1,103 @@
+<template>
+      <label-wrapper
+        :labelAlign="labelAlign">
+        <input-label
+          :labelFontColor="labelFontColor"
+          :fontSize="fontSize"
+          >
+          <slot></slot>
+          <optionalLabel v-if="labelOptional"
+            >({{ $gettext('Optional') }})</optionalLabel
+          ></input-label
+        >
+        <info-text
+          v-if="infoTextMessage"
+          :text="infoTextMessage"
+          :size="fontSize ? fontSize : '16px'"
+          :alignArrow="infoTextAlign"
+        />
+      </label-wrapper>
+</template>
+
+<script>
+import styled from 'vue-styled-components'
+import InfoText from '../infoText'
+
+
+const labelAttrs = { fontSize: String, labelFontColor: String }
+const InputLabel = styled('div', labelAttrs)`
+  color: ${(props) =>
+    props.theme.colors[props.labelFontColor]
+      ? props.theme.colors[props.labelFontColor]
+      : props.labelFontColor
+      ? props.labelFontColor
+      : props.theme.colors.eturnityGrey};
+
+  font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
+  font-weight: 700;
+`
+const optionalLabel = styled.span`
+  font-weight: 300;
+`
+
+const LabelWrapper = styled('div',{labelAlign:String})`
+  ${props=>props.labelAlign=='horizontal'?
+    'display: inline-grid;':
+    'display: grid;'
+  }
+  ${props=>props.labelAlign=='horizontal'?
+    'margin-right: 10px;':
+    'margin-bottom: 8px;'
+  }
+  vertical-align: center;
+  grid-template-columns: auto auto;
+  grid-gap: 12px;
+  align-items: center;
+  justify-content: start;
+`
+export default {
+  // import labelText from "@eturnity/eturnity_reusable_components/src/components/label"
+  // To use:
+  // <label-text
+  //   infoTextAlign="right" // left by default
+  //   infoTextMessage="My info message"
+  //   label="Question 5"
+  // />
+  name: 'input-text',
+  components: {
+    InfoText,
+    InputLabel,
+    LabelWrapper,
+    optionalLabel
+  },
+  data() {
+    return {
+      inputTypeData: 'text'
+    }
+  },
+  props: {
+    infoTextMessage: {
+      required: false
+    },
+    infoTextAlign: {
+      required: false
+    },
+    labelOptional: {
+      required: false,
+      default: false
+    },
+    fontSize: {
+      required: false,
+      default: null
+    },
+    labelFontColor: {
+      required: false,
+      default: 'black'
+    },
+    labelAlign: {
+      required: false,
+      default: 'vertical'
+    },
+  },
+}
+</script>

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

@@ -3,10 +3,9 @@
     :position="position"
     :isOpen="isOpen"
     :class="{ visible: isOpen, hidden: !isOpen }"
-    @click.native="onOutsideClose()"
     :backdrop="backdrop"
   >
-    <modal-container @click.stop>
+    <modal-container @click="onClickModalContainer">
       <spinner v-if="isLoading" size="50px" :limitedToModal="true" />
       <content-container :visible="!isLoading">
         <slot />
@@ -21,10 +20,13 @@
 </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')" :preventOutsideClose="true" :isLoading="true" :hideClose="true">
+// <modal :isOpen="isOpen" @on-close="$emit('on-close-summary')" :isLoading="true" :hideClose="true" :stopPropagation="false">
 //   <div>Data....</div>
 // </modal>
 
@@ -83,6 +85,22 @@ const ModalContainer = styled.div`
   min-width: 100px;
   min-height: 100px;
 
+  ::-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 track visible when needed */
+  ::-webkit-scrollbar-track {
+    background-color: ${(props) => props.theme.colors.grey5};
+  }
+
   .close {
     position: absolute;
     right: 20px;
@@ -118,10 +136,6 @@ export default {
       required: true,
       default: false
     },
-    preventOutsideClose: {
-      required: false,
-      default: false
-    },
     isLoading: {
       required: false,
       default: false
@@ -137,22 +151,41 @@ export default {
     position: {
       required: false,
       default: 'fixed'
+    },
+    stopPropagation: {
+      type: Boolean,
+      default: true
     }
   },
+  beforeDestroy() {
+    window.removeEventListener('keydown', this.handleKeyDown)
+  },
   methods: {
     onCloseModal() {
       this.$emit('on-close')
     },
-    onOutsideClose() {
-      // If true, then only allow closing to come from clicking the X or wherever the onCloseModal is called
-      if (!this.preventOutsideClose) {
-        this.$emit('on-close')
+    handleKeyDown({ key }) {
+      if (key === 'Escape') {
+        this.onCloseModal()
+      }
+    },
+    onClickModalContainer(event) {
+      if (this.stopPropagation) {
+        event.stopPropagation()
       }
     }
   },
   watch: {
-    isOpen: function (newVal) {
-      document.body.style.overflow = newVal ? 'hidden' : ''
+    isOpen: {
+      immediate: true,
+      handler(isOpen) {
+        document.body.style.overflow = isOpen ? 'hidden' : ''
+        if (isOpen) {
+          window.addEventListener('keydown', this.handleKeyDown)
+        } else {
+          window.removeEventListener('keydown', this.handleKeyDown)
+        }
+      }
     }
   }
 }

package/src/components/navigationTabs/index.vue

@@ -0,0 +1,105 @@
+<template>
+  <roofTabWrap>
+    <tab
+      v-for="(tab, index) in tabsData"
+      :key="tab.id"
+      :isDisabled="!!tab['isDisabled']"
+      :textColor="tab['textColor']"
+      :active="isIndexKey ? index === activeTab : tab[tabKey] === activeTab"
+      @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>
+</template>
+
+<script>
+import styled from 'vue-styled-components'
+import InfoText from '../infoText'
+const TabAttr = {
+  active: Boolean,
+  isDisabled: Boolean,
+  textColor: String
+}
+
+const bottomLine = styled('div')`
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 1px;
+    width: 100%;
+    background-color: #b2b9c5;
+`
+const roofTabWrap = styled('div')`
+  display: flex;
+  align-items: center;
+  position: relative;
+  font-size: 13px;
+  font-weight: 700;
+`
+const Uppercase = styled('span')`
+  text-transform: uppercase;
+`
+const Option = styled('div',TabAttr)`
+    font-size: 13px;
+    font-weight: 700;
+    display:flex;
+    justify-content: center;
+    flex-direction: row;
+    gap: 10px;
+    color: ${props=>props.textColor ?
+        props.theme.colors[props.textColor] ? props.theme.colors[props.textColor] : props.textColor :
+        props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
+  `
+const Tab = styled('div', TabAttr)`
+  padding: 16px 10px;
+  margin-right: 5px;
+  position: relative;
+  top: ${(props) => (props.isDisabled ? '-1px' : '0')};
+  z-index: 10;
+  border-bottom: 2px solid
+    ${(props) => (props.active ? props.theme.colors.primary : 'transparent')};
+  background-color: ${(props) => (props.isDisabled ? props.theme.colors.grey5 : 'transparent')};
+  transition: 0.2s ease;
+  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
+  min-width: 140px;
+  display: flex !important;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 55px;
+  &:hover {
+    border-color: ${(props) => props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.primary};
+  }
+`
+
+export default {
+  name: 'Tabs',
+
+  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: '' }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/pageSubtitle/index.vue

@@ -4,11 +4,8 @@
       {{ text }}
     </span>
     <info-text
-      :text="infoText"
       v-if="!!infoText"
-      size="14px"
-      borderColor="#ccc"
-      :alignText="alignInfoText"
+      :text="infoText"
     />
   </subtitle-text>
 </template>
@@ -55,10 +52,6 @@ export default {
       required: false,
       default: null,
     },
-    alignInfoText: {
-      required: false,
-      default: "left",
-    },
     marginBottom: {
       required: false,
       default: "30px",