@eturnity/eturnity_reusable_components 1.2.15-QA03-2092022.0 → 1.2.16-EPDM-5285.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.15-QA03-2092022.0",
+  "version": "1.2.16-EPDM-5285.1",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",
@@ -13,8 +13,7 @@
     "@vueform/slider": "1.0.5",
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
-    "vue-styled-components": "^1.6.0",
-    "html-loader": "^0.5.5"
+    "vue-styled-components": "^1.6.0"
   },
   "devDependencies": {
     "@storybook/addon-actions": "^6.2.8",
@@ -29,7 +28,8 @@
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "^2.6.11",
+    "html-loader": "^0.5.5"
   },
   "eslintConfig": {
     "root": true,

package/src/App.vue

@@ -1,20 +1,18 @@
 <template>
   <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
     <page-container>
-      <br />
-      <modal backdrop="dark" :isLoading="false" :isOpen="true">
-        <main-table titleText="My Table">
-          <thead>
-            <tr>
-              <th>Column 1</th>
-              <th>Column 2</th>
-              <th>Column 3</th>
-              <div />
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <!-- <table-dropdown
+      <main-table titleText="My Table">
+        <thead>
+          <tr>
+            <th>Column 1</th>
+            <th>Column 2</th>
+            <th>Column 3</th>
+            <div />
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <!-- <table-dropdown
               :colSpan="3"
               :tableItems="getDropdownValues()"
               @toggle-dropdown-open="toggleDropdownOpen()"
@@ -23,14 +21,14 @@
               :optionItems="itemOptions"
               :optionsDisplay="['display_name', 'company_item_number', 'model']"
             /> -->
-              <td>Test</td>
-              <div class="icons-container">
-                <three-dots :options="listOptions" :isLoading="false" />
-              </div>
-            </tr>
-          </tbody>
-        </main-table>
-      </modal>
+            <td>Test</td>
+            <div class="icons-container">
+              <three-dots :options="listOptions" :isLoading="false" />
+            </div>
+          </tr>
+        </tbody>
+      </main-table>
+      <br />
       <br />
       <toggle
         @on-toggle-change="onInputChange($event)"
@@ -43,13 +41,17 @@
       />
       <br />
       <input-number
-        :value="num"
-        @input-change="num = $event"
-        unitName="t"
-        id="biebie"
-        test="koko"
-        @keydown="keydownHandler"
+        placeholder="Enter distance"
+        :numberPrecision="2"
+        :value="inputValue"
+        @input-change="onInputChange($event)"
       />
+      <br />
+
+      <icon name="info" color="red" size="50px" />
+      <icon name="info" color="#F00" size="50px" />
+      <icon name="info" color="blue1" size="50px" />
+      <icon name="info" color="#00F" size="50px" />
     </page-container>
   </ThemeProvider>
 </template>
@@ -58,16 +60,8 @@
 import { ThemeProvider } from 'vue-styled-components'
 import theme from './assets/theme'
 import styled from 'vue-styled-components'
-import MainTable from '@/components/tables/mainTable'
-import ThreeDots from '@/components/threeDots'
-import Toggle from '@/components/inputs/toggle'
+import icon from '@/components/icon'
 import InputNumber from '@/components/inputs/inputNumber'
-import Checkbox from '@/components/inputs/checkbox'
-import PageSubtitle from '@/components/pageSubtitle'
-import Spinner from '@/components/spinner'
-import ExternalButton from '@/components/buttons/externalButton'
-import Modal from '@/components/modals/modal'
-// import TableDropdown from "@/components/tableDropdown"
 
 const PageContainer = styled.div`
   padding: 40px;
@@ -78,19 +72,11 @@ export default {
   components: {
     ThemeProvider,
     PageContainer,
-    MainTable,
-    ThreeDots,
-    Toggle,
     InputNumber,
-    PageSubtitle,
-    Spinner,
-    Checkbox,
-    ExternalButton,
-    Modal
+    icon
   },
   data() {
     return {
-      num: 42,
       inputValue: null,
       checkedOption: 'button_1',
       question: {
@@ -149,9 +135,6 @@ export default {
     }
   },
   methods: {
-    keydownHandler(e) {
-      console.log('test', e)
-    },
     getTheme() {
       return theme
     },
@@ -212,4 +195,4 @@ body {
   height: 100%;
   margin: 0;
 }
-</style>
+</style>

package/src/components/icon/index.vue

@@ -37,7 +37,8 @@ const IconImage = styled('div', IconImageProps)`
     height: ${(props) => props.size};
   }
   svg > path {
-    ${(props) => props.color && `fill: ${props.color};`}
+    ${(props) =>
+      props.color && `fill: ${props.theme.colors[props.color] || props.color};`}
   }
   &:hover > svg > path {
     ${(props) => props.hoveredColor && `fill: ${props.hoveredColor};`}

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

@@ -33,7 +33,7 @@
 //     backgroundColor="red"
 //     :isDisabled="true"
 // />
-import styled from "vue-styled-components"
+import styled from 'vue-styled-components'
 
 const ComponentWrapper = styled.div`
   min-height: 18px;
@@ -45,34 +45,33 @@ const containerAttrs = {
   hasLabel: Boolean,
   backgroundColor: String,
   isChecked: Boolean,
-  isDisabled: Boolean,
+  isDisabled: Boolean
 }
-const Container = styled("label", containerAttrs)`
+const Container = styled('label', containerAttrs)`
   display: grid;
-  grid-template-columns: ${(props) => (props.hasLabel ? "18px auto" : "18px")};
+  grid-template-columns: ${(props) => (props.hasLabel ? '18px auto' : '18px')};
   grid-gap: 16px;
   align-content: center;
-  /* align-items: center; */
   color: ${(props) => props.theme.colors.black};
   position: relative;
-  cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
+  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
   font-size: 16px;
   user-select: none;
 
   .checkmark {
     position: absolute;
     height: ${(props) =>
-      props.size === "medium"
-        ? "25px"
-        : props.size === "small"
-        ? "16px"
-        : "25px"};
+      props.size === 'medium'
+        ? '25px'
+        : props.size === 'small'
+        ? '16px'
+        : '25px'};
     width: ${(props) =>
-      props.size === "medium"
-        ? "25px"
-        : props.size === "small"
-        ? "16px"
-        : "25px"};
+      props.size === 'medium'
+        ? '25px'
+        : props.size === 'small'
+        ? '16px'
+        : '25px'};
     background-color: ${(props) =>
       props.isChecked
         ? props.backgroundColor
@@ -80,7 +79,7 @@ const Container = styled("label", containerAttrs)`
           : props.theme.colors.green
         : props.isDisabled
         ? props.theme.colors.lightGray
-        : "#fff"};
+        : '#fff'};
     border-radius: 4px;
     border: 1px solid
       ${(props) =>
@@ -91,34 +90,34 @@ const Container = styled("label", containerAttrs)`
           : props.theme.colors.mediumGray};
 
     &:after {
-      content: "";
+      content: '';
       position: absolute;
-      display: ${(props) => (props.isChecked ? "block" : "none")};
+      display: ${(props) => (props.isChecked ? 'block' : 'none')};
     }
   }
 
   .checkmark:after {
     left: ${(props) =>
-      props.size === "medium" ? "9px" : props.size === "small" ? "5px" : "9px"};
+      props.size === 'medium' ? '9px' : props.size === 'small' ? '5px' : '9px'};
     top: ${(props) =>
-      props.size === "medium" ? "5px" : props.size === "small" ? "2px" : "5px"};
+      props.size === 'medium' ? '5px' : props.size === 'small' ? '2px' : '5px'};
     width: ${(props) =>
-      props.size === "medium" ? "5px" : props.size === "small" ? "3px" : "5px"};
+      props.size === 'medium' ? '5px' : props.size === 'small' ? '3px' : '5px'};
     height: ${(props) =>
-      props.size === "medium"
-        ? "10px"
-        : props.size === "small"
-        ? "6px"
-        : "10px"};
+      props.size === 'medium'
+        ? '10px'
+        : props.size === 'small'
+        ? '6px'
+        : '10px'};
     border: solid
       ${(props) =>
         props.checkColor ? props.checkColor : props.theme.colors.white};
     border-width: ${(props) =>
-      props.size === "medium"
-        ? "0 3px 3px 0"
-        : props.size === "small"
-        ? "0 2px 2px 0"
-        : "0 3px 3px 0"};
+      props.size === 'medium'
+        ? '0 3px 3px 0'
+        : props.size === 'small'
+        ? '0 2px 2px 0'
+        : '0 3px 3px 0'};
     transform: rotate(45deg);
   }
 `
@@ -135,49 +134,49 @@ const InputCheckbox = styled.input`
 const LabelText = styled.div`
   font-size: 13px;
   display: grid;
-  align-items: center;
+  align-items: flex-start;
   min-height: 18px;
 `
 
 export default {
-  name: "checkbox",
+  name: 'checkbox',
   components: {
     ComponentWrapper,
     Container,
     InputCheckbox,
-    LabelText,
+    LabelText
   },
   props: {
     label: {
       required: false,
-      default: "",
+      default: ''
     },
     isChecked: {
       required: true,
-      default: false,
+      default: false
     },
     checkColor: {
-      required: false,
+      required: false
     },
     size: {
       required: false,
-      default: "medium", // small, medium
+      default: 'medium' // small, medium
     },
     backgroundColor: {
-      required: false,
+      required: false
     },
     isDisabled: {
       required: false,
-      default: false,
-    },
+      default: false
+    }
   },
   methods: {
     onChangeHandler(value) {
       if (this.isDisabled) {
         return
       }
-      this.$emit("on-event-handler", value)
-    },
-  },
+      this.$emit('on-event-handler', value)
+    }
+  }
 }
 </script>

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

@@ -14,10 +14,9 @@
     </label-wrapper>
     <input-wrapper>
       <input-container
-        v-bind="$attrs"
         ref="inputField1"
         :hasUnit="unitName && !!unitName.length"
-        :placeholder="displayedPlaceholder"
+        :placeholder="placeholder"
         :isError="isError"
         :inputWidth="inputWidth"
         :minWidth="minWidth"
@@ -31,7 +30,6 @@
         :textAlign="textAlign"
         :fontSize="fontSize"
         :fontColor="fontColor"
-        v-on="$listeners"
       />
       <unit-container
         v-if="unitName && showLinearUnitName"
@@ -182,19 +180,12 @@ export default {
     LabelText,
     InfoText
   },
-  inheritAttrs: false,
   data() {
     return {
       textInput: '',
       isFocused: false
     }
   },
-  computed: {
-    displayedPlaceholder() {
-      if (this.placeholder) return this.placeholder
-      return `${this.minNumber || 0} ${this.unitName ? this.unitName : ''}`
-    }
-  },
   props: {
     placeholder: {
       required: false,
@@ -308,11 +299,13 @@ export default {
           return num
         }
       })
-      let evaluated = eval(formatted.join('')) || ''
-      evaluated = stringToNumber({
-        value: evaluated,
-        numberPrecision: this.numberPrecision
-      })
+      let evaluated = eval(formatted.join(''))
+      if (typeof evaluated === 'string') {
+        evaluated = stringToNumber({
+          value: evaluated,
+          numberPrecision: this.numberPrecision
+        })
+      }
       return evaluated
     },
     onInputBlur(e) {
@@ -394,4 +387,4 @@ export default {
     }
   }
 }
-</script>
+</script>

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

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

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

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

package/src/components/spinner/index.vue

@@ -7,7 +7,7 @@
       />
     </container>
   </spinner-container>
-  <container v-else :limitedToModal="limitedToModal">
+  <container v-else>
     <spinner-wrapper
       :size="size"
       :src="require('../../assets/icons/black_spinner.svg')"
@@ -18,7 +18,7 @@
 <script>
 // import Spinner from "@eturnity/eturnity_reusable_components/src/components/spinner"
 // <spinner size="30px" />
-import styled from 'vue-styled-components'
+import styled from "vue-styled-components"
 
 const SpinnerContainer = styled.div`
   position: fixed;
@@ -32,41 +32,34 @@ const SpinnerContainer = styled.div`
   justify-items: center;
   z-index: 100;
 `
-const containerAttrs = { limitedToModal: Boolean }
-const Container = styled('div', containerAttrs)`
+
+const Container = styled.div`
   display: grid;
   align-items: center;
   justify-items: center;
-  position: ${(props) => (props.limitedToModal ? 'absolute' : 'inherit')};
-  height: ${(props) => (props.limitedToModal ? '100%' : 'inherit')};
-  width: ${(props) => (props.limitedToModal ? '100%' : 'inherit')};
 `
 
 const spinnerAttrs = { size: String }
-const SpinnerWrapper = styled('img', spinnerAttrs)`
-  width: ${(props) => (props.size ? props.size : '60px')};
+const SpinnerWrapper = styled("img", spinnerAttrs)`
+  width: ${(props) => (props.size ? props.size : "60px")};
 `
 
 export default {
-  name: 'spinner',
+  name: "spinner",
   components: {
     Container,
     SpinnerWrapper,
-    SpinnerContainer
+    SpinnerContainer,
   },
   props: {
     fullWidth: {
       required: false,
-      default: false
-    },
-    limitedToModal: {
-      required: false,
-      default: false
+      default: false,
     },
     size: {
       required: false,
-      default: null
-    }
-  }
+      default: null,
+    },
+  },
 }
-</script>
+</script>

package/src/helpers/numberConverter.js

@@ -9,6 +9,7 @@ export const stringToNumber = ({
   // The first replace will replace not allowed characters with a blank
   if (
     selectedLang === 'de-DE' ||
+    selectedLang === 'de-de' ||
     selectedLang === 'no-no' ||
     selectedLang === 'da-dk' ||
     selectedLang === 'de-lu' ||