@eturnity/eturnity_reusable_components 1.2.70-EPDM-7253.1 → 1.2.70

package/package.json

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

package/src/components/errorMessage/index.vue

@@ -26,6 +26,7 @@ const TextOverlay = styled.div`
   font-size: 11px;
   font-weight: 400;
   border-radius: 4px;
+  font-family: 'Lato-Bold', Arial;
   z-index: 999;
   color: ${(props) => props.theme.colors.white};
 

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

@@ -5,9 +5,7 @@
       :alignItems="alignItems"
     >
       <label-wrapper v-if="label">
-        <input-label :labelFontColor="labelFontColor" :fontSize="fontSize">{{
-          label
-        }}</input-label>
+        <input-label :labelFontColor="labelFontColor" :fontSize="fontSize">{{ label }}</input-label>
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
@@ -19,6 +17,7 @@
       <input-error-wrapper>
         <icon-container>
           <input-container
+            ref="inputElement"
             :placeholder="placeholder"
             :isError="isError"
             :inputWidth="inputWidth"
@@ -34,6 +33,7 @@
             :inputType="inputType"
             :type="inputTypeData"
             :fontColor="fontColor"
+            :hasFocus="hasFocus"
             :backgroundColor="backgroundColor"
             :disabledBackgroundColor="disabledBackgroundColor"
           />
@@ -67,17 +67,17 @@ const Container = styled.div`
   position: relative;
 `
 
-const labelAttrs = { fontSize: String, labelFontColor: String }
+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};
+  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;
+  font-family: 'Lato-Bold', Arial;
 `
 
 const LabelWrapper = styled.div`
@@ -104,21 +104,21 @@ const inputProps = {
   fontSize: String,
   inputType: String,
   fontColor: String,
-  backgroundColor: String,
-  borderColor: String,
-  inputHeight: String,
-  disabledBackgroundColor: String
+  backgroundColor:String,
+  borderColor:String,
+  inputHeight:String,
+  disabledBackgroundColor:String
 }
 const InputContainer = styled('input', inputProps)`
   border: ${(props) =>
-    props.isError
+      props.isError
       ? '1px solid ' + props.theme.colors.red
       : props.noBorder
       ? 'none'
-      : props.borderColor
-      ? props.theme.colors[props.borderColor]
-        ? '1px solid ' + props.theme.colors[props.borderColor]
-        : '1px solid ' + props.borderColor
+      : props.borderColor ?
+      props.theme.colors[props.borderColor]
+      ? '1px solid ' + props.theme.colors[props.borderColor]
+      : '1px solid ' + props.borderColor
       : '1px solid ' + props.theme.colors.grey4};
   padding: ${(props) =>
     props.isError
@@ -137,21 +137,19 @@ const InputContainer = styled('input', inputProps)`
       : props.fontColor
       ? props.fontColor + ' !important'
       : props.theme.colors.black};
-
+      
   width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
   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: 400;
   cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
-  background-color: ${(props) =>
-    props.isDisabled
-      ? props.disabledBackgroundColor
-        ? props.disabledBackgroundColor + ' !important'
-        : props.theme.colors.grey5
-      : props.backgroundColor
-      ? props.backgroundColor + ' !important'
-      : props.theme.colors.white};
+  background-color: ${(props) => 
+    props.isDisabled ? 
+    (props.disabledBackgroundColor ? props.disabledBackgroundColor+' !important' 
+    : props.theme.colors.grey5) :
+    props.backgroundColor ? props.backgroundColor+' !important' :
+    props.theme.colors.white};
   &::placeholder {
     color: ${(props) => props.theme.colors.grey2};
   }
@@ -280,24 +278,28 @@ export default {
       required: false,
       default: 'text'
     },
-    labelFontColor: {
-      required: false,
-      default: 'black'
+    labelFontColor:{
+      required:false,
+      default:'black'
     },
-    backgroundColor: {
-      required: false,
-      default: 'white'
+    backgroundColor:{
+      required:false,
+      default:'white'
     },
-    disabledBackgroundColor: {
-      required: false,
-      default: null
+    disabledBackgroundColor:{
+      required:false,
+      default:null
     },
-    fontColor: {
-      required: false,
-      default: 'black'
+    fontColor:{
+      required:false,
+      default:'black'
     },
-    borderColor: {
-      required: false
+    borderColor:{
+      required:false,
+    },
+    hasFocus: {
+      required: false,
+      default: false
     }
   },
   methods: {
@@ -314,6 +316,15 @@ export default {
   },
   created() {
     this.inputTypeData = this.inputType
+  },
+  watch: {
+    hasFocus(newVal) {
+      if (newVal) {
+        this.$nextTick(() => {
+          this.$refs.inputElement.$el.focus();
+        });
+      }
+    }
   }
 }
 </script>

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

@@ -1,260 +1,244 @@
 <template>
-  <container>
-    <flex-wrapper
-      :size="size"
-      :disabled="disabled"
-      :alignItems="alignItems"
-      :label="label"
-    >
-      <label-container
-        v-if="label && labelAlign === 'left'"
-        :hasInfoMessage="!!infoTextMessage"
-        :colorMode="colorMode"
-      >
-        <label-text :size="size">{{ label }}</label-text>
-        <info-text
-          v-if="infoTextMessage"
-          :text="infoTextMessage"
-          borderColor="#ccc"
-          size="14px"
-          :alignText="infoTextAlign"
-        />
-      </label-container>
-
-      <switch-wrapper
-        :size="size"
-        :disabled="disabled"
-        :backgroundColor="backgroundColor"
-      >
-        <switchOption
-          v-for="(item, index) in options"
-          :key="index"
-          @click="selectItem(item.value)"
-          :isActive="selectedValue == item.value"
+    <container>
+      <flex-wrapper :size="size" :disabled="disabled" :alignItems="alignItems" :label="label">
+        <label-container
+          v-if="label && labelAlign === 'left'"
+          :hasInfoMessage="!!infoTextMessage"
           :colorMode="colorMode"
-          :primaryColor="primaryColor"
-          :secondaryColor="secondaryColor"
-          :inactiveColor="inactiveColor"
         >
-          {{ item.content }}
-        </switchOption>
-      </switch-wrapper>
-      <label-container
-        v-if="label && labelAlign === 'right'"
-        :hasInfoMessage="!!infoTextMessage"
-      >
-        <label-text :size="size" :fontColor="fontColor">{{ label }}</label-text>
-        <info-text
-          @click.native.stop
-          v-if="infoTextMessage"
-          :text="infoTextMessage"
-          borderColor="#ccc"
-          size="14px"
-          :alignText="infoTextAlign"
-        />
-      </label-container>
-    </flex-wrapper>
-  </container>
-</template>
-
-<script>
-// import Toggle from "@eturnity/eturnity_reusable_components/src/components/inputs/toggle"
-// To use:
-// <SwitchField
-//   @on-switch-change="onInputChange($event)"
-//   :options="[{value:0,content:'zero'},{value:1,content:'one'},{value:2,content:'two'}]"
-//   :value="1"
-//   label="label"
-//   toggleColor="red"
-//   size="large"
-//   backgroundColor="blue"
-//   labelAlign="left"
-//   fontColor="black"
-//   :disabled="false"
-// />
-
-import styled from 'vue-styled-components'
-import InfoText from '../../infoText'
-import theme from '../../../assets/theme'
-const Container = styled.div``
-
-const flexAttrs = {
-  label: String,
-  size: String,
-  disabled: Boolean,
-  alignItems: String
-}
-const FlexWrapper = styled('div', flexAttrs)`
-  display: grid;
-  grid-template-columns: auto 1fr;
-  grid-gap: 10px;
-  align-items: center;
-  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
-  grid-template-columns: ${(props) =>
+          <label-text :size="size">{{ label }}</label-text>
+          <info-text
+            v-if="infoTextMessage"
+            :text="infoTextMessage"
+            borderColor="#ccc"
+            size="14px"
+            :alignText="infoTextAlign"
+          />
+        </label-container>
+        
+        <switch-wrapper
+          :size="size"
+          :disabled="disabled"
+          :backgroundColor="backgroundColor"
+        >
+            <switchOption 
+                v-for="(item,index) in options"
+                :key="index"
+                @click="selectItem(item.value)"
+                :isActive="selectedValue==item.value"
+                :colorMode="colorMode"
+                :primaryColor="primaryColor"
+                :secondaryColor="secondaryColor"
+                :inactiveColor="inactiveColor"
+            >
+                {{ item.content }}
+            </switchOption>
+        </switch-wrapper>
+        <label-container
+          v-if="label && labelAlign === 'right'"
+          :hasInfoMessage="!!infoTextMessage"
+        >
+          <label-text :size="size" :fontColor="fontColor">{{ label }}</label-text>
+          <info-text
+            @click.native.stop
+            v-if="infoTextMessage"
+            :text="infoTextMessage"
+            borderColor="#ccc"
+            size="14px"
+            :alignText="infoTextAlign"
+          />
+        </label-container>
+      </flex-wrapper>
+    </container>
+  </template>
+  
+  <script>
+    // import Toggle from "@eturnity/eturnity_reusable_components/src/components/inputs/toggle"
+    // To use:
+      // <SwitchField
+      //   @on-switch-change="onInputChange($event)"
+      //   :options="[{value:0,content:'zero'},{value:1,content:'one'},{value:2,content:'two'}]"
+      //   :value="1"
+      //   label="label"
+      //   toggleColor="red"
+      //   size="large"
+      //   backgroundColor="blue"
+      //   labelAlign="left"
+      //   fontColor="black"
+      //   :disabled="false"
+      // />
+  
+import styled from "vue-styled-components"
+  import InfoText from "../../infoText"
+  import theme from "../../../assets/theme"
+  const Container = styled.div``
+  
+  const flexAttrs = { label:String,size: String, disabled: Boolean,alignItems: String }
+  const FlexWrapper = styled("div", flexAttrs)`
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-gap: 10px;
+    align-items: center;
+    cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
+    grid-template-columns: ${(props) =>
     props.alignItems === 'vertical' || !props.label ? '1fr' : 'auto 1fr'};
-`
-
-const toggleAttrs = {
-  size: String,
-  fontColor: String,
-  disabled: Boolean,
-  backgroundColor: String,
-  isChecked: Boolean
-}
-const LabelText = styled('div', toggleAttrs)`
-  color: white;
-  font-size: 13px;
-  font-weight: 700;
-`
-
-const SwitchWrapper = styled('span', toggleAttrs)`
-  display: flex;
-  position: relative;
-  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
-  height: ${(props) =>
-    props.size === 'medium'
-      ? '24px'
-      : props.size === 'small'
-      ? '16px'
-      : '24px'};
-`
-const optionAttrs = {
-  isActive: Boolean,
-  primaryColor: String,
-  secondaryColor: String,
-  inactiveColor: String
-}
-const switchOption = styled('div', optionAttrs)`
-  color: ${(props) =>
-    props.isActive ? props.primaryColor : props.inactiveColor};
-  background-color: ${(props) =>
-    props.isActive ? props.secondaryColor : 'transparent'};
-  border: 1px solid
-    ${(props) => (props.isActive ? props.secondaryColor : props.inactiveColor)};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-grow: 1;
-  font-size: 13px;
-  line-height: 1;
-  text-align: center;
-  padding: 10px;
-  margin-right: -1px;
-  transition: all 0.1s ease-in-out;
-  overflow: hidden;
-  & :hover {
-    cursor: pointer;
-  }
-  &:first-child {
-    border-radius: 4px 0 0 4px;
-  }
-  &:last-child {
-    border-radius: 0 4px 4px 0;
+  `
+  
+  const toggleAttrs = {
+    size: String,
+    fontColor: String,
+    disabled: Boolean,
+    backgroundColor: String,
+    isChecked: Boolean,
   }
-`
-
-const labelAttrs = { hasInfoMessage: Boolean }
-const LabelContainer = styled('div', labelAttrs)`
-  display: inline-grid;
-  grid-template-columns: ${(props) =>
-    props.hasInfoMessage ? 'auto 1fr' : 'auto'};
-  grid-gap: 12px;
-  align-items: center;
-`
+  const LabelText = styled("div", toggleAttrs)`
+    color: white;
+    font-size: 13px;
+    font-family: 'Lato-Bold',Arial;
+  `
+  
+  const SwitchWrapper = styled("span", toggleAttrs)`
+    display: flex;
+    position: relative;
+    cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
+    height: ${(props) =>
+      props.size === "medium"
+        ? "24px"
+        : props.size === "small"
+        ? "16px"
+        : "24px"};
+  `
+  const optionAttrs={isActive:Boolean,primaryColor:String,secondaryColor:String,inactiveColor:String}
+  const switchOption=styled('div',optionAttrs)`
+    color:${props=>props.isActive?props.primaryColor:props.inactiveColor};
+    background-color:${props=>props.isActive?props.secondaryColor:"transparent"};
+    border:1px solid ${props=>props.isActive?props.secondaryColor:props.inactiveColor};
+    display:flex;
+    align-items:center;
+    justify-content: center;
+    flex-grow:1;
+    font-size: 13px;
+    line-height: 1;
+    text-align: center;
+    padding: 10px;
+    margin-right: -1px;
+    transition: all 0.1s ease-in-out;
+    overflow:hidden;
+    & :hover{
+        cursor: pointer;
+    }
+    &:first-child {
+	    border-radius: 4px 0 0 4px;
+    }
+    &:last-child {
+	    border-radius: 0 4px 4px 0;
+    }
 
-export default {
-  name: 'switchField',
-  components: {
-    Container,
-    SwitchWrapper,
-    FlexWrapper,
-    LabelText,
-    InfoText,
-    LabelContainer,
-    switchOption
-  },
-  props: {
-    label: {
-      required: false,
-      default: ''
-    },
-    toggleColor: {
-      required: false
-    },
-    backgroundColor: {
-      required: false
-    },
-    size: {
-      required: false,
-      default: 'small'
-    },
-    labelAlign: {
-      required: false,
-      default: 'left'
-    },
-    fontColor: {
-      required: false
-    },
-    disabled: {
-      required: false,
-      default: false
+  `
+  
+  const labelAttrs = { hasInfoMessage: Boolean }
+  const LabelContainer = styled("div", labelAttrs)`
+    display: inline-grid;
+    grid-template-columns: ${(props) =>
+      props.hasInfoMessage ? "auto 1fr" : "auto"};
+    grid-gap: 12px;
+    align-items: center;
+  `
+  
+  export default {
+    name: "switchField",
+    components: {
+      Container,
+      SwitchWrapper,
+      FlexWrapper,
+      LabelText,
+      InfoText,
+      LabelContainer,
+      switchOption,
     },
-    infoTextMessage: {
-      required: false
+    props: {
+      label: {
+        required: false,
+        default: "",
+      },
+      toggleColor: {
+        required: false,
+      },
+      backgroundColor: {
+        required: false,
+      },
+      size: {
+        required: false,
+        default: "small",
+      },
+      labelAlign: {
+        required: false,
+        default: "left",
+      },
+      fontColor: {
+        required: false,
+      },
+      disabled: {
+        required: false,
+        default: false,
+      },
+      infoTextMessage: {
+        required: false,
+      },
+      infoTextAlign: {
+        required: false,
+      },
+      colorMode: {
+        required: false,
+        default:'light'
+      },
+      alignItems:{
+        required: false,
+        default: 'horizontal'
+      },
+      options:{
+        required:true
+      },
+      value:{
+        required:false,
+        default:null
+      },
     },
-    infoTextAlign: {
-      required: false
+    data() {
+        return {
+            selectedValue:null,
+            primaryColor:"white",
+            secondaryColor:"black",
+            inactiveColor:"grey6"
+        }
     },
-    colorMode: {
-      required: false,
-      default: 'light'
+    created(){
+        this.selectedValue=this.value
+        
+        if(this.colorMode=='dark'){
+            this.primaryColor=theme.colors.black
+            this.secondaryColor=theme.colors.white
+            this.inactiveColor=theme.colors.grey6
+        }else{
+            this.primaryColor=theme.colors.white
+            this.secondaryColor=theme.colors.black
+            this.inactiveColor=theme.colors.grey6
+        }
     },
-    alignItems: {
-      required: false,
-      default: 'horizontal'
+    methods: {
+        selectItem(value){
+            if (this.disabled) {
+                return
+            }
+            this.selectedValue=value
+            this.$emit("on-switch-change", this.selectedValue)
+        },
     },
-    options: {
-      required: true
-    },
-    value: {
-      required: false,
-      default: null
-    }
-  },
-  data() {
-    return {
-      selectedValue: null,
-      primaryColor: 'white',
-      secondaryColor: 'black',
-      inactiveColor: 'grey6'
-    }
-  },
-  created() {
-    this.selectedValue = this.value
-
-    if (this.colorMode == 'dark') {
-      this.primaryColor = theme.colors.black
-      this.secondaryColor = theme.colors.white
-      this.inactiveColor = theme.colors.grey6
-    } else {
-      this.primaryColor = theme.colors.white
-      this.secondaryColor = theme.colors.black
-      this.inactiveColor = theme.colors.grey6
-    }
-  },
-  methods: {
-    selectItem(value) {
-      if (this.disabled) {
-        return
+    watch:{
+      value(val){
+        this.selectedValue=val
       }
-      this.selectedValue = value
-      this.$emit('on-switch-change', this.selectedValue)
-    }
-  },
-  watch: {
-    value(val) {
-      this.selectedValue = val
     }
   }
-}
-</script>
+  </script>
+  

package/src/components/tables/viewTable/index.vue

@@ -45,9 +45,9 @@
 // This is a read only table. Pass it data, and it displays it
 // ToDo: add this to storybook
 // import ViewTable from "@eturnity/eturnity_reusable_components/src/components/tables/viewTable"
-import styled from 'vue-styled-components'
-import DeleteIcon from '../../deleteIcon'
-import Spinner from '../../spinner'
+import styled from "vue-styled-components"
+import DeleteIcon from "../../deleteIcon"
+import Spinner from "../../spinner"
 
 const TableScroll = styled.div`
   position: relative;
@@ -55,8 +55,8 @@ const TableScroll = styled.div`
 `
 
 const wrapperAttrs = { fullWidth: Boolean }
-const TableWrapper = styled('div', wrapperAttrs)`
-  width: ${(props) => (props.fullWidth ? '100%' : 'fit-content')};
+const TableWrapper = styled("div", wrapperAttrs)`
+  width: ${(props) => (props.fullWidth ? "100%" : "fit-content")};
   max-width: 100%;
   overflow: auto;
 
@@ -89,7 +89,7 @@ const TableItem = styled.td`
 
 const TableHeader = styled(TableItem)`
   background-color: #e6e8ee;
-  font-weight: 700;
+  font-family: "Lato-Bold", Arial;
   text-align: left;
 `
 
@@ -101,7 +101,7 @@ const TableRow = styled.tr`
 `
 
 const TitleText = styled.div`
-  font-weight: 700;
+  font-family: "Lato-Bold", Arial;
   margin-bottom: 6px;
 `
 
@@ -141,7 +141,7 @@ const EmptyTd = styled.td`
 `
 
 export default {
-  name: 'view-table',
+  name: "view-table",
   components: {
     TableScroll,
     TableWrapper,
@@ -156,40 +156,40 @@ export default {
     Spinner,
     SpinnerWrapper,
     EmptyContainer,
-    EmptyTd
+    EmptyTd,
   },
   props: {
     headerItems: {
-      required: true
+      required: true,
     },
     tableItems: {
-      required: true
+      required: true,
     },
     fullWidth: {
       required: false,
-      default: true
+      default: true,
     },
     tableTitle: {
       required: false,
-      default: null
+      default: null,
     },
     showDeleteButton: {
       required: false,
-      default: false
+      default: false,
     },
     isLoading: {
       required: false,
-      default: false
+      default: false,
     },
     emptyText: {
       required: false,
-      default: 'There are no items'
-    }
+      default: "There are no items",
+    },
   },
   computed: {
     showIconsContainer() {
       return this.showDeleteButton
-    }
-  }
+    },
+  },
 }
 </script>