@eturnity/eturnity_reusable_components 6.48.2 → 6.50.1-EPDM-9012.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "6.48.2",
+  "version": "6.50.1-EPDM-9012.0",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",
@@ -63,4 +63,4 @@
   "author": "Aaron Enser",
   "license": "ISC",
   "homepage": "https://bitbucket.org/eturnitydevs/eturnity_reusable_components#readme"
-}
+}

package/src/assets/svgIcons/erase.svg

@@ -1,4 +1,4 @@
 <svg fill="none" height="16" viewbox="12 12 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
-<circle cx="20" cy="20" fill="white" r="7"></circle>
+<circle cx="20" cy="20" r="7"></circle>
 <path d="M24.9592 15.0408C22.2382 12.3197 17.7618 12.3197 15.0408 15.0408C12.3197 17.7618 12.3197 22.2382 15.0408 24.9592C17.7618 27.6803 22.2382 27.6803 24.9592 24.9592C27.6803 22.2382 27.6803 17.8495 24.9592 15.0408ZM23.6426 22.5016L22.4138 23.7304L19.9561 21.2727L17.4984 23.7304L16.2696 22.5016L18.7273 20.0439L16.2696 17.5862L17.4984 16.3574L19.9561 18.815L22.4138 16.3574L23.6426 17.5862L21.185 20.0439L23.6426 22.5016Z" fill="#FF5656"></path>
 </svg>

package/src/assets/svgIcons/integrations.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 0H11H16C17.1046 0 18 0.895431 18 2V12H12C10.8954 12 10 11.1046 10 10V4L0 4V2C0 0.89543 0.895431 0 2 0H10ZM0 6H6C7.10457 6 8 6.89543 8 8V14H18V16C18 17.1046 17.1046 18 16 18H8H7H2C0.895431 18 0 17.1046 0 16V6Z" fill="white"/>
+</svg>

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

@@ -6,6 +6,7 @@
       :isDisabled="isDisabled"
       :customColor="customColor"
       :noWrap="noWrap"
+      :data-id="dataId"
     >
       {{ text }}
     </button-container>
@@ -21,38 +22,45 @@
 //   type="secondary" // primary, secondary, cancel
 //   :isDisabled="true"
 //   :minWidth="minWidth"
+//   :dataId="test_data_id"
 // />
 
-import styled from "vue-styled-components"
+import styled from 'vue-styled-components'
 
 const PageContainer = styled.div``
 
-const ButtonAttrs = { type: String, isDisabled: Boolean, minWidth: String, customColor: String, noWrap: Boolean }
-const ButtonContainer = styled("div", ButtonAttrs)`
+const ButtonAttrs = {
+  type: String,
+  isDisabled: Boolean,
+  minWidth: String,
+  customColor: String,
+  noWrap: Boolean
+}
+const ButtonContainer = styled('div', ButtonAttrs)`
   padding: 7px 15px;
   font-size: 13px;
   color: ${(props) => props.theme.colors.white};
   background-color: ${(props) =>
-      props.isDisabled
-          ? props.theme.colors.disabled
-          : props.customColor
-              ? props.customColor
-              : props.type === "primary"
-                  ? props.theme.colors.black
-                  : props.type === "secondary"
-                      ? props.theme.colors.grey3
-                      : props.type === "cancel"
-                          ? props.theme.colors.red
-                          : props.theme.colors.black};
+    props.isDisabled
+      ? props.theme.colors.disabled
+      : props.customColor
+      ? props.customColor
+      : props.type === 'primary'
+      ? props.theme.colors.black
+      : props.type === 'secondary'
+      ? props.theme.colors.grey3
+      : props.type === 'cancel'
+      ? props.theme.colors.red
+      : props.theme.colors.black};
   border-radius: 4px;
   text-align: center;
-  cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
+  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
   user-select: none;
   ${(props) => (props.minWidth ? `min-width: ${props.minWidth};` : '')};
   ${(props) => (props.noWrap ? `white-space: nowrap;` : '')};
 
   &:hover {
-    opacity: ${(props) => (props.isDisabled ? "1" : "0.8")};
+    opacity: ${(props) => (props.isDisabled ? '1' : '0.8')};
   }
 
   &:active {
@@ -61,26 +69,26 @@ const ButtonContainer = styled("div", ButtonAttrs)`
 `
 
 export default {
-  name: "main-button",
+  name: 'main-button',
   components: {
     PageContainer,
-    ButtonContainer,
+    ButtonContainer
   },
   props: {
     type: {
       required: false,
-      default: "primary",
+      default: 'primary'
     },
     isDisabled: {
       required: false,
-      default: false,
+      default: false
     },
     text: {
-      required: true,
+      required: true
     },
     customColor: {
       required: false,
-      default: null,
+      default: null
     },
     noWrap: {
       required: false,
@@ -89,7 +97,11 @@ export default {
     minWidth: {
       required: false,
       default: null
+    },
+    dataId: {
+      type: String,
+      default: ''
     }
-  },
+  }
 }
 </script>

package/src/components/icon/iconCollection.vue

@@ -20,13 +20,13 @@ import styled from 'vue-styled-components'
 
 const Wrapper = styled.div`
   display: block;
-  text-align:center;
-  justify-items:center
-  width:100%;
-  background-color:#ccc;
+  text-align: center;
+  justify-items: center;
+  width: 100%;
+  background-color: #ccc;
 `
 const IconWrapper = styled.div`
-  display:inline-flex
+  display: inline-flex;
   flex-direction: column;
   background-color: white;
   border-radius: 6px;

package/src/components/icon/index.vue

@@ -30,7 +30,7 @@ import styled from 'vue-styled-components'
 const wrapperAttrs = { isDisabled: Boolean, size: String, cursor: String }
 const Wrapper = styled('div', wrapperAttrs)`
   display: flex;
-  position:relative
+  position: relative;
   align-content: center;
   justify-content: center;
   width: ${(props) => props.size};
@@ -58,6 +58,7 @@ const strikedLine = styled('div', strikedAttrs)`
 `
 const IconImageProps = { color: String, hoveredColor: String, size: String }
 const IconImage = styled('div', IconImageProps)`
+  width: 100%;
   svg {
     width: 100%;
     height: 100%;

package/src/components/iconWrapper/index.vue

@@ -8,63 +8,85 @@
     :color="iconColor"
     :hoveredBackgroundColor="hoveredBackgroundColor"
     :isHovered="isHovered"
-    >
-        <icon :disabled="disabled" 
-            :size="iconSize" 
-            :name="name" 
-            :color="iconColor" 
-            :hoveredColor="hoveredIconColor" 
-            :isStriked="isStriked"
-            />
-            
-        <caret v-if="hasCaret">
-          <iconWrapper :disabled="disabled" 
-            size="10px" 
-            name="arrow_down" 
-            :iconColor="iconColor" 
-            :hoveredBackgroundColor="hoveredIconColor"
-            borderRadius="1px"
-            />  
-        </caret>
-    </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'
-  import icon from '../icon'
-  const wrapperAttrs = { color: String, isHovered:Boolean,borderRadius:String,disabled: Boolean, size: String,backgroundColor:String,hoveredBackgroundColor:String,hasBorder:Boolean }
-  const Wrapper = styled('div', wrapperAttrs)`
-    position:relative;
-    display: inline-flex;
-    width: ${(props) => props.size};
-    height: ${(props) => props.size};
-    border: ${(props) => props.hasBorder? 'solid 1px '+props.theme.colors[props.color] || props.color : ""};
-    justify-content:center;
-    align-items:center;
-    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
-    background-color: ${(props)=>props.theme.colors[props.backgroundColor] || props.backgroundColor};
-    border-radius: ${(props) => props.borderRadius};
-    ${(props)=>(props.isHovered ? 'background-color:'+props.theme.colors[props.hoveredBackgroundColor] || props.hoveredBackgroundColor : "")};
-    &:hover{
-        background-color:${(props)=>props.theme.colors[props.hoveredBackgroundColor] || props.hoveredBackgroundColor};
-    }
-  `
-  const caret=styled.div`
-  position:absolute;
-  bottom:3px;
-  right:2px;
-  height:10px;
-  `
-  
+  >
+    <icon
+      :disabled="disabled"
+      :size="iconSize"
+      :name="name"
+      :color="iconColor"
+      :hoveredColor="hoveredIconColor"
+      :isStriked="isStriked"
+    />
+
+    <caret v-if="hasCaret">
+      <iconWrapper
+        :disabled="disabled"
+        size="10px"
+        name="arrow_down"
+        :iconColor="iconColor"
+        :hoveredBackgroundColor="hoveredIconColor"
+        borderRadius="1px"
+      />
+    </caret>
+  </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'
+import icon from '../icon'
+const wrapperAttrs = {
+  color: String,
+  isHovered: Boolean,
+  borderRadius: String,
+  disabled: Boolean,
+  size: String,
+  backgroundColor: String,
+  hoveredBackgroundColor: String,
+  hasBorder: Boolean
+}
+const Wrapper = styled('div', wrapperAttrs)`
+  position: relative;
+  display: inline-flex;
+  width: ${(props) => props.size};
+  height: ${(props) => props.size};
+  border: ${(props) =>
+    props.hasBorder
+      ? 'solid 1px ' + props.theme.colors[props.color] || props.color
+      : ''};
+  justify-content: center;
+  align-items: center;
+  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
+  background-color: ${(props) =>
+    props.theme.colors[props.backgroundColor] || props.backgroundColor};
+  border-radius: ${(props) => props.borderRadius};
+  ${(props) =>
+    props.isHovered
+      ? 'background-color:' +
+          props.theme.colors[props.hoveredBackgroundColor] ||
+        props.hoveredBackgroundColor
+      : ''};
+  &:hover {
+    background-color: ${(props) =>
+      props.theme.colors[props.hoveredBackgroundColor] ||
+      props.hoveredBackgroundColor};
+  }
+`
+const caret = styled.div`
+  position: absolute;
+  bottom: 3px;
+  right: 2px;
+  height: 10px;
+`
+
 export default {
   name: 'iconWrapper',
   components: {

package/src/components/infoText/index.vue

@@ -10,7 +10,6 @@
       </icon-img>
       <text-overlay
         v-if="showInfo"
-        :borderColor="borderColor"
         :width="width"
         :halfComputedTextInfoWidth="halfComputedTextInfoWidth"
         :alignArrow="alignArrow"
@@ -27,7 +26,6 @@
 //To use:
 // <info-text
 //     text="Veritatis et quasi architecto beatae vitae"
-//     borderColor="#ccc"
 //     size="20"
 //     alignArrow="right" // which side the arrow should be on
 // />
@@ -37,7 +35,6 @@ import icon from '../icon'
 
 const textAttrs = {
   iconSize: String,
-  borderColor: String,
   alignArrow: String,
   width: String,
   halfComputedTextInfoWidth: Number
@@ -111,10 +108,6 @@ export default {
     text: {
       required: false
     },
-    borderColor: {
-      required: false,
-      default: null
-    },
     size: {
       required: false,
       default: '14px'
@@ -156,11 +149,7 @@ export default {
   },
   computed: {
     iconColor() {
-      return this.isActive
-        ? this.borderColor
-          ? this.borderColor
-          : theme.colors.secondary
-        : theme.colors.mediumGray
+      return theme.colors.mediumGray
     },
     halfComputedTextInfoWidth() {
       return parseInt(this.width) / 2

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

@@ -11,6 +11,7 @@
       <input-checkbox
         type="checkbox"
         :checked="isChecked"
+        :data-id="dataId"
         @change="onChangeHandler(!isChecked)"
       />
       <div>
@@ -168,6 +169,10 @@ export default {
     isDisabled: {
       required: false,
       default: false
+    },
+    dataId: {
+      type: String,
+      default: ''
     }
   },
   methods: {

package/src/components/inputs/inputNumber/InputNumber.stories.js

@@ -32,7 +32,6 @@ const Template = (args, { argTypes }) => ({
   //     fontSize="13px"
   //     labelText="Number of Modules"
   //     labelInfoText="Here is some information for you..."
-  //     labelInfoAlign="left"
   // />
 })
 
@@ -129,8 +128,7 @@ WithLabelInfo.args = {
   textAlign: "left",
   showLinearUnitName: false,
   labelText: "Number Input",
-  labelInfoText: "Here is some information for you...",
-  labelInfoAlign: "right",
+  labelInfoText: "Here is some information for you..."
 }
 
 export const LargerFont = Template.bind({})

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

@@ -16,13 +16,10 @@
       <label-text :labelFontColor="labelFontColor" :data-id="labelDataId">
         {{ labelText }}
       </label-text>
-      
+
       <info-text
         v-if="labelInfoText"
         :text="labelInfoText"
-        borderColor="#ccc"
-        size="14px"
-        :alignArrow="labelInfoAlign"
       />
     </label-wrapper>
     <input-wrapper>
@@ -84,6 +81,7 @@
 //     inputWidth="150px" //by default, this is 100%
 //     minWidth="100px"
 //     :numberPrecision="3"
+//     minDecimals="2"
 //     unitName="pc"
 //     :value="inputValue" //required -- String
 //     @input-change="onInputChange($event)" //required
@@ -96,7 +94,6 @@
 //     fontSize="13px"
 //     labelText="Number of Modules"
 //     labelInfoText="Here is some information for you..."
-//     labelInfoAlign="left"
 //     :minNumber="0"
 //     fontColor="blue"
 // />
@@ -358,6 +355,10 @@ export default {
       required: false,
       default: 0
     },
+    minDecimals: {
+      required: false,
+      default: 0
+    },
     unitName: {
       required: false,
       default: ''
@@ -401,10 +402,6 @@ export default {
       required: false,
       default: null
     },
-    labelInfoAlign: {
-      required: false,
-      default: 'left'
-    },
     defaultNumber: {
       required: false,
       default: null
@@ -498,7 +495,8 @@ export default {
         } else {
           let num = stringToNumber({
             value: item,
-            numberPrecision: false
+            numberPrecision: false,
+            minDecimals: this.minDecimals
           })
           return num
         }
@@ -509,7 +507,8 @@ export default {
       if (typeof evaluated === 'string') {
         evaluated = stringToNumber({
           value: evaluated,
-          numberPrecision: this.numberPrecision
+          numberPrecision: this.numberPrecision,
+          minDecimals: this.minDecimals
         })
       } else if (typeof evaluated === 'number') {
         evaluated = evaluated.toFixed(this.numberPrecision)
@@ -569,7 +568,8 @@ export default {
               : this.defaultNumber
               ? this.defaultNumber
               : this.minNumber,
-          numberPrecision: this.numberPrecision
+          numberPrecision: this.numberPrecision,
+          minDecimals: this.minDecimals
         })
       }
       let adjustedMinValue =
@@ -614,7 +614,8 @@ export default {
         let input = this.numberToStringEnabled
           ? numberToString({
               value: adjustedMinValue,
-              numberPrecision: this.numberPrecision
+              numberPrecision: this.numberPrecision,
+              minDecimals: this.minDecimals
             })
           : adjustedMinValue
         let unit = this.showLinearUnitName ? '' : this.unitName
@@ -626,7 +627,8 @@ export default {
         return this.numberToStringEnabled
           ? numberToString({
               value: adjustedMinValue,
-              numberPrecision: this.numberPrecision
+              numberPrecision: this.numberPrecision,
+              minDecimals: this.minDecimals
             })
           : adjustedMinValue
       }
@@ -645,7 +647,8 @@ export default {
 
       this.textInput = numberToString({
         value: value && value.length ? value : this.minNumber,
-        numberPrecision: this.numberPrecision
+        numberPrecision: this.numberPrecision,
+        minDecimals: this.minDecimals
       })
       //this.value=value
     },
@@ -660,17 +663,20 @@ export default {
     if (this.value) {
       this.textInput = numberToString({
         value: this.value,
-        numberPrecision: this.numberPrecision
+        numberPrecision: this.numberPrecision,
+        minDecimals: this.minDecimals
       })
     } else if (this.defaultNumber !== null) {
       this.textInput = numberToString({
         value: this.defaultNumber,
-        numberPrecision: this.numberPrecision
+        numberPrecision: this.numberPrecision,
+        minDecimals: this.minDecimals
       })
     } else if (this.minNumber !== null) {
       this.textInput = numberToString({
         value: this.minNumber,
-        numberPrecision: this.numberPrecision
+        numberPrecision: this.numberPrecision,
+        minDecimals: this.minDecimals
       })
     }
   },

package/src/components/inputs/inputText/InputText.stories.js

@@ -21,7 +21,6 @@ const Template = (args, { argTypes }) => ({
   //   @input-change="onInputChange({ value: $event, type: 'companyName' })"
   //   :isError="checkErrors()"
   //   :errorMessage="This is my error message"
-  //   infoTextAlign="right" // left by default
   //   infoTextMessage="My info message"
   //   label="Question 5"
   //   alignItems="horizontal" // horizontal, vertical

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

@@ -17,9 +17,7 @@
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          borderColor="#ccc"
           :size="fontSize ? fontSize : '16px'"
-          :alignArrow="infoTextAlign"
         />
       </label-wrapper>
       <input-error-wrapper>
@@ -206,7 +204,6 @@ export default {
   //   @input-blur="onInputBlur($event)"
   //   :isError="checkErrors()"
   //   :errorMessage="This is my error message"
-  //   infoTextAlign="right" // left by default
   //   infoTextMessage="My info message"
   //   label="Question 5"
   //   alignItems="horizontal" // horizontal, vertical
@@ -270,9 +267,6 @@ export default {
     infoTextMessage: {
       required: false
     },
-    infoTextAlign: {
-      required: false
-    },
     label: {
       required: false
     },