@eturnity/eturnity_reusable_components 1.2.39 → 1.2.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.39",
+  "version": "1.2.41",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

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

@@ -1,8 +1,9 @@
 <template>
   <page-container>
     <button-container
-      :isDisabled="isDisabled"
       :type="type"
+      :minWidth="minWidth"
+      :isDisabled="isDisabled"
       :customColor="customColor"
     >
       {{ text }}
@@ -14,37 +15,39 @@
 // To use:
 // import MainButton from "@eturnity/eturnity_reusable_components/src/components/buttons/mainButton"
 // <main-button
-//   type="secondary" // primary, secondary, cancel
-//   :isDisabled="true"
 //   text="Click Me"
 //   customColor="#ab5348"
+//   type="secondary" // primary, secondary, cancel
+//   :isDisabled="true"
+//   :minWidth="minWidth"
 // />
 
 import styled from "vue-styled-components"
 
 const PageContainer = styled.div``
 
-const ButtonAttrs = { type: String, isDisabled: Boolean, customColor: String }
+const ButtonAttrs = { type: String, isDisabled: Boolean, minWidth: String, customColor: String }
 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")};
   user-select: none;
+  ${(props) => (props.minWidth ? `min-width: ${props.minWidth};` : '')};
 
   &:hover {
     opacity: ${(props) => (props.isDisabled ? "1" : "0.8")};
@@ -77,6 +80,10 @@ export default {
       required: false,
       default: null,
     },
+    minWidth: {
+      required: false,
+      default: null
+    }
   },
 }
 </script>

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

@@ -57,11 +57,9 @@
         :isError="isError"
         >{{ unitName }}</unit-container
       >
-      <icon
-        v-if="(isError || inputIcon) && !showLinearUnitName"
-        :class="inputIconImageClass"
-        :src="isError ? warningIcon : inputIconImage"
-      />
+      <icon-wrapper v-if="isError && !showLinearUnitName" size="16px">
+        <icon name="warning" size="16px" cursor="default" />
+      </icon-wrapper>
     </input-wrapper>
     <error-message v-if="isError">{{ errorMessage }}</error-message>
   </container>
@@ -101,6 +99,7 @@ import {
 import InfoText from '../../infoText'
 import ErrorMessage from '../../errorMessage'
 import warningIcon from '../../../assets/icons/error_icon.png'
+import Icon from '../../icon'
 
 const inputProps = {
   isError: Boolean,
@@ -178,15 +177,6 @@ const InputContainer = styled('input', inputProps)`
     outline: none;
   }
 `
-const IconProps = {
-  inputIconHeight: String
-}
-
-const Icon = styled('img', IconProps)`
-  position: absolute;
-  right: 10px;
-  top: 2px;
-`
 
 const InputWrapper = styled.span`
   position: relative;
@@ -259,6 +249,16 @@ const LabelText = styled('div', inputProps)`
   font-weight: 700;
 `
 
+const IconAttrs = { size: String }
+const IconWrapper = styled('div', IconAttrs)`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  right: 5px;
+  height: ${(props) => (props.size ? props.size : 'auto')};
+`
+
 export default {
   name: 'input-number',
   components: {
@@ -272,7 +272,8 @@ export default {
     LabelText,
     InfoText,
     Icon,
-    SlotContainer
+    SlotContainer,
+    IconWrapper
   },
   inheritAttrs: false,
   data() {
@@ -386,25 +387,10 @@ export default {
       required: false,
       default: true
     },
-    inputIcon: {
-      require: false,
-      type: Boolean,
-      default: false
-    },
-    inputIconImage: {
-      require: false,
-      type: String,
-      default: ''
-    },
     allowNegative: {
       required: false,
       default: true
     },
-    inputIconImageClass: {
-      require: false,
-      type: Array,
-      default: () => []
-    },
     slotSize: {
       required: false
     },

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

@@ -74,7 +74,7 @@ const InputLabel = styled('div', labelAttrs)`
   };
 
   font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
-  font-weight: 700;
+  font-family: 'Lato-Bold', Arial;
 `
 
 const LabelWrapper = styled.div`
@@ -138,7 +138,7 @@ const InputContainer = styled('input', inputProps)`
   min-width: ${(props) => (props.minWidth ? props.minWidth : 'unset')};
   max-height: ${(props) => props.inputHeight};
   box-sizing: border-box; // to allow width of 100% with padding
-  font-weight: 500;
+  font-weight: 400;
   cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
   background-color: ${(props) =>
     props.isDisabled ? props.theme.colors.grey5 : 

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

@@ -1,7 +1,7 @@
 <template>
   <component-wrapper :layout="layout">
     <radio-wrapper v-for="(item, index) in options" :key="item.value">
-      <label-container :size="size" :isDisabled="item.disabled" :isChecked="selectedOption === item.value">
+      <label-container :size="size" :isDisabled="item.disabled" :isChecked="selectedOption === item.value" :checkmarkColor="checkmarkColor">
         <radio
           type="radio"
           :value="selectedOption"
@@ -83,7 +83,7 @@ const RadioWrapper = styled.div`
   grid-gap: 10px;
 `
 
-const containerProps = { size: String, isDisabled: Boolean, isChecked: Boolean }
+const containerProps = { size: String, isDisabled: Boolean, isChecked: Boolean, checkmarkColor: String }
 const LabelContainer = styled("label", containerProps)`
   display: grid;
   grid-template-columns: auto 1fr auto;
@@ -139,7 +139,7 @@ const LabelContainer = styled("label", containerProps)`
             ? "8px"
             : "6px"};
       border-radius: 100%;
-      background: ${(props) => props.theme.colors.primary};
+      background: ${(props) => props.checkmarkColor ? props.checkmarkColor : props.theme.colors.green};
     }
   }
 `
@@ -220,6 +220,10 @@ export default {
     name: {
       required: false,
       default: ''
+    },
+    checkmarkColor: {
+      required: false,
+      default: ''
     }
   },
   data() {