@eturnity/eturnity_reusable_components 1.2.0-beta.3 → 1.2.1-5.QA03-20092022.0

package/src/components/icon/index.vue

@@ -0,0 +1,76 @@
+<template>
+  <wrapper :isDisabled="isDisabled" :size="size">
+    <icon-image
+      :size="size"
+      :color="color"
+      :hoveredColor="hoveredColor"
+      v-html="
+        require(`!html-loader!./../../assets/svgIcons/${name.toLowerCase()}.svg`)
+      "
+    ></icon-image>
+  </wrapper>
+</template>
+
+<script>
+// import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
+//  How to use:
+//<icon
+//   name="House" //required. a svg file named [name].svg should be present in /assets/svgIcons
+//   color="red"
+//   hoveredColor="blue"
+//   size="60px" by default, this is 30px
+// />
+
+import styled from 'vue-styled-components'
+
+const wrapperAttrs = { isDisabled: Boolean, size: String }
+const Wrapper = styled('div', wrapperAttrs)`
+  display: inline-block;
+  width: ${(props) => props.size};
+  height: ${(props) => props.size};
+  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
+`
+const IconImageProps = { color: String, hoveredColor: String, size: String }
+const IconImage = styled('div', IconImageProps)`
+  svg {
+    width: ${(props) => props.size};
+    height: ${(props) => props.size};
+  }
+  svg > path {
+    ${(props) => props.color && `fill: ${props.color};`}
+  }
+  &:hover > svg > path {
+    ${(props) => props.hoveredColor && `fill: ${props.hoveredColor};`}
+  }
+`
+
+export default {
+  name: 'icon',
+  components: {
+    Wrapper,
+    IconImage
+  },
+  props: {
+    isDisabled: {
+      required: false,
+      default: false
+    },
+    name: {
+      required: true
+    },
+    color: {
+      required: false
+    },
+    hoveredColor: {
+      required: false
+    },
+    size: {
+      required: false,
+      default: '30px'
+    }
+  },
+  data() {
+    return {}
+  }
+}
+</script>

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

@@ -14,6 +14,7 @@
     </label-wrapper>
     <input-wrapper>
       <input-container
+        v-bind="$attrs"
         ref="inputField1"
         :hasUnit="unitName && !!unitName.length"
         :placeholder="displayedPlaceholder"
@@ -30,6 +31,7 @@
         :textAlign="textAlign"
         :fontSize="fontSize"
         :fontColor="fontColor"
+        v-on="$listeners"
       />
       <unit-container
         v-if="unitName && showLinearUnitName"
@@ -71,7 +73,7 @@
 import styled from 'vue-styled-components'
 import {
   stringToNumber,
-  numberToString,
+  numberToString
 } from '../../../helpers/numberConverter'
 import InfoText from '../../infoText'
 
@@ -89,15 +91,15 @@ const inputProps = {
   noBorder: Boolean,
   textAlign: String,
   fontSize: String,
-  fontColor: String,
+  fontColor: String
 }
 const InputContainer = styled('input', inputProps)`
   border: ${(props) =>
     props.isError
       ? '1px solid ' + props.theme.colors.red
       : props.noBorder
-      ? "none"
-      : "1px solid " + props.theme.colors.mediumGray};
+      ? 'none'
+      : '1px solid ' + props.theme.colors.mediumGray};
   padding: ${(props) =>
     props.hasUnit ? '11px 40px 11px 10px' : '11px 5px 11px 10px'};
   border-radius: 4px;
@@ -178,101 +180,102 @@ export default {
     ErrorMessage,
     LabelWrapper,
     LabelText,
-    InfoText,
+    InfoText
   },
+  inheritAttrs: false,
   data() {
     return {
       textInput: '',
-      isFocused: false,
+      isFocused: false
     }
   },
   computed: {
     displayedPlaceholder() {
       if (this.placeholder) return this.placeholder
       return `${this.minNumber || 0} ${this.unitName ? this.unitName : ''}`
-    },
+    }
   },
   props: {
     placeholder: {
       required: false,
-      default: '',
+      default: ''
     },
     isError: {
       required: false,
-      default: false,
+      default: false
     },
     inputWidth: {
       required: false,
-      default: null,
+      default: null
     },
     minWidth: {
       required: false,
-      default: null,
+      default: null
     },
     value: {
       required: true,
-      default: null,
+      default: null
     },
     clearInput: {
       required: false,
-      default: false,
+      default: false
     },
     errorMessage: {
       required: false,
-      default: 'Please insert a correct number',
+      default: 'Please insert a correct number'
     },
     numberPrecision: {
       required: false,
-      default: 0,
+      default: 0
     },
     unitName: {
       required: false,
-      default: '',
+      default: ''
     },
     showLinearUnitName: {
       required: false,
-      default: false,
+      default: false
     },
     disabled: {
       required: false,
-      default: false,
+      default: false
     },
     noBorder: {
       required: false,
-      default: false,
+      default: false
     },
     textAlign: {
       required: false,
-      default: 'left',
+      default: 'left'
     },
     fontSize: {
       required: false,
-      default: '13px',
+      default: '13px'
     },
     labelText: {
       required: false,
-      default: null,
+      default: null
     },
     labelInfoText: {
       required: false,
-      default: null,
+      default: null
     },
     labelInfoAlign: {
       required: false,
-      default: 'right',
+      default: 'right'
     },
     minNumber: {
       required: false,
-      default: null,
+      default: null
     },
     fontColor: {
       required: false,
-      default: null,
+      default: null
     },
     numberToStringEnabled: {
       required: false,
-      default: true,
-    },
+      default: true
+    }
   },
   methods: {
     onChangeHandler(event) {
@@ -300,15 +303,15 @@ export default {
         } else {
           let num = stringToNumber({
             value: item,
-            numberPrecision: false,
+            numberPrecision: false
           })
           return num
         }
       })
-      let evaluated = eval(formatted.join(""))
+      let evaluated = eval(formatted.join('')) || ''
       evaluated = stringToNumber({
         value: evaluated,
-        numberPrecision: this.numberPrecision,
+        numberPrecision: this.numberPrecision
       })
       return evaluated
     },
@@ -321,7 +324,7 @@ export default {
         this.textInput = numberToString({
           value:
             evaluatedInput && value.length ? evaluatedInput : this.minNumber,
-          numberPrecision: this.numberPrecision,
+          numberPrecision: this.numberPrecision
         })
       }
       let adjustedMinValue =
@@ -352,33 +355,33 @@ export default {
         let input = this.numberToStringEnabled
           ? numberToString({
               value: adjustedMinValue,
-              numberPrecision: this.numberPrecision,
+              numberPrecision: this.numberPrecision
             })
           : adjustedMinValue
-        let unit = this.showLinearUnitName ? "" : this.unitName
-        return input + " " + unit
+        let unit = this.showLinearUnitName ? '' : this.unitName
+        return input + ' ' + unit
       } else if (!adjustedMinValue && adjustedMinValue !== 0) {
         return ''
       } else {
         return this.numberToStringEnabled
           ? numberToString({
               value: adjustedMinValue,
-              numberPrecision: this.numberPrecision,
+              numberPrecision: this.numberPrecision
             })
           : adjustedMinValue
       }
-    },
+    }
   },
   created() {
     if (this.value) {
       this.textInput = numberToString({
         value: this.value,
-        numberPrecision: this.numberPrecision,
+        numberPrecision: this.numberPrecision
       })
     } else if (this.minNumber !== null) {
       this.textInput = numberToString({
         value: this.minNumber,
-        numberPrecision: this.numberPrecision,
+        numberPrecision: this.numberPrecision
       })
     }
   },
@@ -388,7 +391,7 @@ export default {
         // If the value is typed, then we should clear the textInput on Continue
         this.textInput = ''
       }
-    },
-  },
+    }
+  }
 }
 </script>

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

@@ -65,7 +65,7 @@ const ComponentWrapper = styled("div", wrapperProps)`
   display: flex;
   flex-direction: ${(props) =>
     props.layout === "vertical" ? "column" : "row"};
-  grid-gap: 32px;
+  grid-gap: 10px 5px;
   flex-wrap: wrap;
 `
 
@@ -95,58 +95,60 @@ const containerProps = { size: String, isDisabled: Boolean }
 const LabelContainer = styled("label", containerProps)`
   display: grid;
   grid-template-columns: auto 1fr auto;
-  grid-gap: 16px;
+  grid-gap: 15px;
   align-items: center;
   color: ${(props) =>
     props.isDisabled ? props.theme.colors.disabled : props.theme.colors.black};
   position: relative;
   cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
-  font-size: 16px;
+  font-size: ${(props) =>
+    props.size === "large"
+      ? "16px"
+      : props.size === "medium"
+      ? "13px"
+      : "10px"};
   user-select: none;
   flex: auto;
   align-self: baseline;
 
   .checkmark {
-    position: relative;
     height: ${(props) =>
       props.size === "large"
         ? "23px"
         : props.size === "medium"
-        ? "17px"
+        ? "16px"
         : "12px"};
     width: ${(props) =>
       props.size === "large"
         ? "23px"
         : props.size === "medium"
-        ? "17px"
+        ? "16px"
         : "12px"};
     background-color: #fff;
     border-radius: 100%;
     border: 1px solid ${(props) => props.theme.colors.mediumGray};
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
     &:after {
       content: "";
-      position: absolute;
       display: none;
     }
   }
 
   .checkmark:after {
-    top: ${(props) =>
-      props.size === "large" ? "6px" : props.size === "medium" ? "5px" : "3px"};
-    left: ${(props) =>
-      props.size === "large" ? "7px" : props.size === "medium" ? "5px" : "3px"};
     width: ${(props) =>
       props.size === "large"
         ? "10px"
         : props.size === "medium"
-        ? "7px"
+        ? "8px"
         : "6px"};
     height: ${(props) =>
       props.size === "large"
         ? "10px"
         : props.size === "medium"
-        ? "7px"
+        ? "8px"
         : "6px"};
     border-radius: 100%;
     background: ${(props) => props.theme.colors.primary};

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

@@ -5,7 +5,7 @@
       :hasLabel="label && label.length > 0"
     >
       <label-wrapper v-if="label">
-        <input-label>{{ label }}</input-label>
+        <input-label :fontSize="fontSize">{{ label }}</input-label>
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
@@ -45,12 +45,12 @@
 //     alignItems="horizontal" // horizontal, vertical
 //     :isDisabled="true"
 // />
-import styled from "vue-styled-components"
-import InfoText from "../../infoText"
+import styled from 'vue-styled-components'
+import InfoText from '../../infoText'
 
 const containerProps = { inputWidth: String }
-const Container = styled("div", containerProps)`
-  width: ${(props) => (props.inputWidth ? props.inputWidth : "100%")};
+const Container = styled('div', containerProps)`
+  width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
   position: relative;
   margin-bottom: 20px;
 `
@@ -66,22 +66,22 @@ const inputProps = {
   isError: Boolean,
   disabled: Boolean,
   fontSize: String,
-  inputWidth: String,
+  inputWidth: String
 }
-const InputContainer = styled("textarea", inputProps)`
+const InputContainer = styled('textarea', inputProps)`
   border: ${(props) =>
     props.isError
-      ? "1px solid " + props.theme.colors.red
-      : "1px solid " + props.theme.colors.mediumGray};
+      ? '1px solid ' + props.theme.colors.red
+      : '1px solid ' + props.theme.colors.mediumGray};
   padding: ${(props) =>
-    props.hasUnit ? "11px 40px 11px 10px" : "11px 5px 11px 10px"};
+    props.hasUnit ? '11px 40px 11px 10px' : '11px 5px 11px 10px'};
   border-radius: 4px;
-  font-size: ${(props) => (props.fontSize ? props.fontSize : "16px")};
+  font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
   color: ${(props) => props.theme.colors.black};
-  width: ${(props) => (props.inputWidth ? props.inputWidth : "100%")};
+  width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
   max-width: 100%;
   box-sizing: border-box; // to allow width of 100% with padding
-  cursor: ${(props) => (props.disabled ? "not-allowed" : "inherit")};
+  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'inherit')};
 
   &::placeholder {
     color: ${(props) =>
@@ -94,17 +94,17 @@ const InputContainer = styled("textarea", inputProps)`
 `
 
 const inputAttrs = { alignItems: String, hasLabel: Boolean }
-const InputWrapper = styled("div", inputAttrs)`
+const InputWrapper = styled('div', inputAttrs)`
   position: relative;
   display: grid;
   align-items: center;
   gap: 8px;
   grid-template-columns: ${(props) =>
     !props.hasLabel
-      ? "1fr"
-      : props.alignItems === "vertical"
-      ? "1fr"
-      : "auto 1fr"};
+      ? '1fr'
+      : props.alignItems === 'vertical'
+      ? '1fr'
+      : 'auto 1fr'};
 `
 
 const ErrorMessage = styled.div`
@@ -114,12 +114,14 @@ const ErrorMessage = styled.div`
   top: calc(100% + 1px);
 `
 
-const InputLabel = styled.div`
+const labelAttrs = { fontSize: String }
+const InputLabel = styled('div', labelAttrs)`
   font-weight: bold;
+  font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
 `
 
 export default {
-  name: "text-area-input",
+  name: 'text-area-input',
   components: {
     Container,
     InputContainer,
@@ -127,61 +129,61 @@ export default {
     ErrorMessage,
     InfoText,
     LabelWrapper,
-    InputLabel,
+    InputLabel
   },
   props: {
     placeholder: {
       required: false,
-      default: "",
+      default: ''
     },
     isError: {
       required: false,
-      default: false,
+      default: false
     },
     rowHeight: {
       required: false,
-      default: "2",
+      default: '2'
     },
     value: {
       required: true,
-      default: null,
+      default: null
     },
     errorText: {
-      required: false,
+      required: false
     },
     isDisabled: {
       required: false,
-      default: false,
+      default: false
     },
     alignItems: {
       required: false,
-      default: "horizontal",
+      default: 'horizontal'
     },
     infoTextMessage: {
-      required: false,
+      required: false
     },
     infoTextAlign: {
-      required: false,
+      required: false
     },
     label: {
-      required: false,
+      required: false
     },
     fontSize: {
       required: false,
-      default: "16px",
+      default: '16px'
     },
     inputWidth: {
       required: false,
-      default: null,
-    },
+      default: null
+    }
   },
   methods: {
     onChangeHandler($event) {
       if (this.isDisabled) {
         return
       }
-      this.$emit("input-change", $event)
-    },
-  },
+      this.$emit('input-change', $event)
+    }
+  }
 }
 </script>

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

@@ -3,15 +3,18 @@
     :isOpen="isOpen"
     :class="{ visible: isOpen, hidden: !isOpen }"
     @click.native="onOutsideClose()"
+    :backdrop="backdrop"
   >
     <modal-container @click.stop>
-      <spinner v-if="isLoading" size="50px" :fullWidth="true" />
+      <spinner v-if="isLoading" size="50px" :limitedToModal="true" />
+      <content-container :visible="!isLoading">
+        <slot />
+      </content-container>
       <close-button
         v-if="!hideClose"
         @click.native="onCloseModal()"
         class="close"
       />
-      <slot />
     </modal-container>
   </page-wrapper>
 </template>
@@ -28,7 +31,12 @@ import styled from 'vue-styled-components'
 import CloseButton from '../../buttons/closeButton'
 import Spinner from '../../spinner'
 
-const pageAttrs = { isOpen: Boolean }
+const contentAttrs = { visible: Boolean }
+const ContentContainer = styled('div', contentAttrs)`
+  visibility: ${(props) => (props.visible ? 'inherit' : 'hidden')};
+`
+
+const pageAttrs = { isOpen: Boolean, backdrop: String }
 const PageWrapper = styled('div', pageAttrs)`
   position: fixed;
   display: grid;
@@ -36,7 +44,10 @@ const PageWrapper = styled('div', pageAttrs)`
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(255, 255, 255, 0.9);
+  background-color: ${(props) =>
+    props.backdrop == 'dark'
+      ? 'rgba(0, 0, 0, 0.4)'
+      : 'rgba(255, 255, 255, 0.9)'};
   z-index: 99999;
   overflow: auto;
 
@@ -98,7 +109,8 @@ export default {
     PageWrapper,
     ModalContainer,
     CloseButton,
-    Spinner
+    Spinner,
+    ContentContainer
   },
   props: {
     isOpen: {
@@ -116,6 +128,10 @@ export default {
     hideClose: {
       required: false,
       default: false
+    },
+    backdrop: {
+      required: false,
+      default: 'white'
     }
   },
   methods: {
@@ -135,4 +151,4 @@ export default {
     }
   }
 }
-</script>
+</script>

package/src/components/modals/modal/modal.stories.js

@@ -26,5 +26,6 @@ export const Default = Template.bind({
   preventOutsideClose: true,
   isLoading: false,
   hideClose: false,
-});
+  backdrop: 'dark',
+})
 Default.args = {};