@eturnity/eturnity_reusable_components 1.0.9 → 1.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.0.9",
+  "version": "1.0.13",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",
@@ -10,6 +10,7 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
+    "@vueform/slider": "1.0.5",
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
     "vue-styled-components": "^1.6.0"
@@ -22,6 +23,7 @@
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
+    "@vue/composition-api": "^1.0.0-rc.10",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",

package/src/App.vue

@@ -1,9 +1,13 @@
 <template>
   <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
     <page-container>
-      <div>Hello World</div>
-      <close-button />
-      <modal :isOpen="true" />
+      <slider
+        :value="inputValue"
+        unit="m"
+        @change="onChangeSlider($event)"
+        :minValue="10"
+        :maxValue="500"
+      />
     </page-container>
   </ThemeProvider>
 </template>
@@ -12,8 +16,7 @@
 import { ThemeProvider } from "vue-styled-components"
 import theme from "./assets/theme"
 import styled from "vue-styled-components"
-import CloseButton from "@/components/buttons/closeButton"
-import Modal from "@/components/modals/modal"
+import slider from "@/components/inputs/slider"
 
 const PageContainer = styled.div`
   padding: 40px;
@@ -24,13 +27,27 @@ export default {
   components: {
     ThemeProvider,
     PageContainer,
-    CloseButton,
-    Modal,
+    slider,
+  },
+  data() {
+    return {
+      inputValue: 50,
+      checkedOption: "button_1",
+      question: {
+        number_format_precision: 4,
+        number_min_allowed: 0,
+        number_max_allowed: 10,
+        unit_short_name: "cm",
+      },
+    }
   },
   methods: {
     getTheme() {
       return theme
     },
+    onChangeSlider(event) {
+      this.inputValue = event
+    },
   },
 }
 </script>

package/src/assets/icons/black_spinner.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="207px" height="207px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+<g transform="rotate(0 50 50)">
+  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.875s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(45 50 50)">
+  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(90 50 50)">
+  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.625s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(135 50 50)">
+  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(180 50 50)">
+  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.375s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(225 50 50)">
+  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(270 50 50)">
+  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.125s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(315 50 50)">
+  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+</g>
+<!-- [ldio] generated by https://loading.io/ --></svg>

package/src/assets/icons/language_icon.svg

@@ -0,0 +1,6 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.7677 12.2383H15.4708C13.6885 12.2383 12.2385 13.6883 12.2385 15.4706V21.6083C10.9445 22.5326 9.63063 23.4325 8.37891 24.4139C9.64181 25.4045 10.968 26.3123 12.2738 27.2449C12.5052 28.8018 13.8508 30 15.4708 30H26.7677C28.55 30 30 28.55 30 26.7675V15.4706C30 13.6883 28.55 12.2383 26.7677 12.2383ZM22.9692 24.5883C22.7621 24.5883 22.6021 24.5226 22.5552 24.3436L22.1972 23.0914H20.0411L19.6836 24.3436C19.6365 24.5226 19.4765 24.5883 19.2693 24.5883C18.9397 24.5883 18.4973 24.3814 18.4973 24.0802C18.4973 24.0612 18.5067 24.0237 18.5161 23.9859L20.3332 18.0643C20.4179 17.7818 20.7662 17.6498 21.1146 17.6498C21.4723 17.6498 21.8207 17.7818 21.9054 18.0643L23.7225 23.9859C23.7318 24.0237 23.7412 24.0518 23.7412 24.0802C23.7412 24.3718 23.2988 24.5883 22.9692 24.5883Z" fill="white"/>
+<path d="M20.2954 22.131H21.9337L21.1143 19.241L20.2954 22.131Z" fill="white"/>
+<path d="M10.4807 15.4706C10.4807 14.2905 10.8934 13.2056 11.5807 12.3502C10.578 12.3502 9.6476 12.0364 8.88062 11.5034C8.11363 12.0367 7.18323 12.3502 6.18027 12.3502C5.90675 12.3502 5.68474 12.1282 5.68474 11.8545C5.68474 11.5807 5.90675 11.3589 6.18027 11.3589C6.88271 11.3589 7.54005 11.1644 8.10287 10.8275C7.42401 10.0948 6.97266 9.14886 6.86348 8.10196H6.1805C5.90675 8.10196 5.68474 7.88017 5.68474 7.60643C5.68474 7.33269 5.90675 7.11067 6.1805 7.11067H8.38531V5.90721C8.38531 5.63324 8.6071 5.41145 8.88084 5.41145C9.15459 5.41145 9.37637 5.63324 9.37637 5.90721V7.11067H11.5812C11.8549 7.11067 12.077 7.33269 12.077 7.60643C12.077 7.88017 11.8549 8.10196 11.5812 8.10196H10.8982C10.789 9.14886 10.3377 10.0948 9.65881 10.8275C10.2214 11.1649 10.879 11.3589 11.5812 11.3589C11.8428 11.3589 12.0566 11.5617 12.0751 11.8188C12.9666 10.9893 14.1602 10.4805 15.471 10.4805H17.7617V8.39172C19.0587 7.46534 20.3833 6.57167 21.6211 5.56641C20.3441 4.60054 19.0292 3.68558 17.7264 2.75505C17.4948 1.1982 16.1492 0 14.5292 0H3.2325C1.44997 0 0 1.44997 0 3.23227V14.5294C0 16.3117 1.44997 17.7617 3.2325 17.7617H10.4807V15.4706Z" fill="white"/>
+<path d="M8.88072 10.2081C9.42317 9.64531 9.79144 8.91449 9.89925 8.10219H7.86243C7.97023 8.91449 8.33873 9.64531 8.88072 10.2081Z" fill="white"/>
+</svg>

package/src/assets/icons/pdf_icon.svg

@@ -0,0 +1,6 @@
+<svg width="27" height="26" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.5999 25.8002H2.8999C1.4999 25.8002 0.399902 24.7002 0.399902 23.3002V2.7002C0.399902 1.3002 1.4999 0.200195 2.8999 0.200195H13.7999L19.0999 5.5002V9.0002H17.2999V6.2002L13.0999 2.0002H2.8999C2.4999 2.0002 2.1999 2.3002 2.1999 2.7002V23.4002C2.1999 23.8002 2.4999 24.1002 2.8999 24.1002H16.6999C17.0999 24.1002 17.3999 23.8002 17.3999 23.4002H19.1999C19.0999 24.7002 17.9999 25.8002 16.5999 25.8002Z" fill="white"/>
+<path d="M23 12.6V15H26.4V16.5H23V20.6H21.2V11.3V11H21.5H26.6V12.6H23Z" fill="white"/>
+<path d="M18.9999 12.2C18.0999 11.4 16.8999 11 15.1999 11C14.2999 11 13.3999 11.1 12.6999 11.2H12.3999V11.5V20.5H12.6999C13.2999 20.6 13.9999 20.6 14.7999 20.6C16.5999 20.6 17.9999 20.1 18.8999 19.2C19.7999 18.3 20.2999 17 20.2999 15.5C20.2999 14.1 19.7999 13 18.9999 12.2ZM15.0999 19.1C14.7999 19.1 14.4999 19.1 14.1999 19.1V12.6C14.4999 12.6 14.7999 12.5 15.1999 12.5C16.3999 12.5 17.1999 12.8 17.6999 13.4C18.1999 13.9 18.4999 14.7 18.4999 15.7C18.4999 16.8 18.1999 17.7 17.5999 18.3C16.9999 18.9 16.1999 19.1 15.0999 19.1Z" fill="white"/>
+<path d="M10.5999 11.8C9.9999 11.3 9.0999 11 7.8999 11C6.9999 11 6.1999 11.1 5.5999 11.2H5.3999V20.5H7.0999V17C7.2999 17 7.4999 17 7.6999 17C8.8999 17 9.8999 16.7 10.5999 15.9C11.0999 15.4 11.3999 14.6 11.3999 13.8C11.4999 13 11.0999 12.2 10.5999 11.8ZM7.7999 15.5C7.4999 15.5 7.2999 15.5 7.1999 15.5V12.5H7.2999C7.4999 12.5 7.6999 12.5 7.8999 12.5C8.4999 12.5 8.8999 12.6 9.1999 12.9C9.4999 13.1 9.6999 13.5 9.6999 14C9.6999 14.5 9.4999 14.9 9.1999 15.2C8.8999 15.4 8.4999 15.5 7.7999 15.5Z" fill="white"/>
+</svg>

package/src/assets/theme.js

@@ -1,26 +1,26 @@
 const theme = {
   colors: {
-    primary: '#48a2d0',
-    secondary: '#fdb813',
-    tertiary: '#d5d5d5',
-    black: '#353535',
-    yellow: '#fdb813',
-    darkGray: '#818181',
-    mediumGray: '#d5d5d5',
-    lightGray: '#f2f2f2',
-    white: '#fff',
-    blue: '#48a2d0',
-    red: '#ff7e7e'
+    primary: "#48a2d0",
+    secondary: "#fdb813",
+    tertiary: "#d5d5d5",
+    black: "#353535",
+    yellow: "#fdb813",
+    darkGray: "#818181",
+    mediumGray: "#d5d5d5",
+    lightGray: "#f2f2f2",
+    white: "#fff",
+    blue: "#48a2d0",
+    red: "#ff7e7e",
+    disabled: "#c4c4c4",
   },
-  hasCustomPrimary: false, // need this to know for the button hovers
   screen: {
-    mobileSmall: '345px',
-    mobile: '425px',
-    mobileLarge: '530px',
-    tablet: '768px',
-    tabletLarge: '950px'
+    mobileSmall: "345px",
+    mobile: "425px",
+    mobileLarge: "530px",
+    tablet: "768px",
+    tabletLarge: "950px",
   },
-  borderRadius: '4px'
+  borderRadius: "4px",
 }
 
 export default theme

package/src/components/infoText/index.vue

@@ -0,0 +1,156 @@
+<template>
+  <component-wrapper>
+    <icon-wrapper>
+      <icon-img
+        :isActive="showInfo"
+        :size="size"
+        :borderColor="borderColor"
+        @click.prevent="toggleShowInfo()"
+      >
+        <svg
+          class="img-icon"
+          :width="size"
+          :height="size"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            class="img-icon"
+            d="M20.4853 3.51469C18.2188 1.24823 15.2053 0 12 0C8.79469 0 5.78123 1.24823 3.51469 3.51469C1.24823 5.78123 0 8.79469 0 12C0 15.2053 1.24823 18.2188 3.51469 20.4853C5.78123 22.7518 8.79469 24 12 24C15.2053 24 18.2188 22.7518 20.4853 20.4853C22.7518 18.2188 24 15.2053 24 12C24 8.79469 22.7518 5.78123 20.4853 3.51469ZM12 3.28125C13.4216 3.28125 14.5781 4.4378 14.5781 5.85938C14.5781 7.28095 13.4216 8.4375 12 8.4375C10.5784 8.4375 9.42188 7.28095 9.42188 5.85938C9.42188 4.4378 10.5784 3.28125 12 3.28125ZM15.2812 19.6875H8.71875V18.2812H10.125V11.9167H8.71875V10.5104H13.875V18.2812H15.2812V19.6875Z"
+            fill="#D5D5D5"
+          />
+        </svg>
+      </icon-img>
+      <text-overlay
+        v-if="showInfo"
+        :borderColor="borderColor"
+        :alignText="alignText"
+      >
+        {{ text }}
+      </text-overlay>
+    </icon-wrapper>
+  </component-wrapper>
+</template>
+
+<script>
+// import InfoText from "@eturnity/eturnity_reusable_components/src/components/infoText"
+//To use:
+// <info-component
+//     text="Veritatis et quasi architecto beatae vitae"
+//     borderColor="#ccc"
+//     size="20"
+//     alignText="right" // default is left
+// />
+
+import styled from "vue-styled-components"
+
+const IconWrapper = styled.div`
+  position: relative;
+`
+
+const textAttrs = { borderColor: String, alignText: String }
+const TextOverlay = styled("div", textAttrs)`
+  position: absolute;
+  top: 34px;
+  right: ${(props) => (props.alignText === "left" ? "-10px" : "inherit")};
+  left: ${(props) => (props.alignText === "left" ? "inherit" : "-10px")};
+  background: #fff;
+  border: 1px solid
+    ${(props) =>
+      props.borderColor ? props.borderColor : props.theme.colors.secondary};
+  padding: 16px;
+  width: max-content;
+  max-width: 400px;
+  font-size: 14px;
+  font-weight: 400;
+  border-radius: 4px;
+  z-index: 99;
+  color: ${(props) => props.theme.colors.black};
+
+  :before {
+    content: "";
+    background-color: #fff;
+    position: absolute;
+    top: 2px;
+    right: ${(props) => (props.alignText === "left" ? "-12px" : "inherit")};
+    left: ${(props) => (props.alignText === "left" ? "inherit" : "40px")};
+    height: 8px;
+    width: 8px;
+    border: 1px solid
+      ${(props) =>
+        props.borderColor ? props.borderColor : props.theme.colors.secondary};
+    border-width: 1px 0 0 1px;
+    transform-origin: center center;
+    transform: translate(-2em, -0.5em) rotate(45deg);
+  }
+`
+
+const iconAttrs = { isActive: Boolean, size: String, borderColor: String }
+const IconImg = styled("div", iconAttrs)`
+  cursor: pointer;
+  height: ${(props) => props.size + "px"};
+
+  .img-icon {
+    fill: ${(props) =>
+      props.isActive
+        ? props.borderColor
+          ? props.borderColor
+          : props.theme.colors.secondary
+        : props.theme.colors.mediumGray};
+  }
+`
+
+const ComponentWrapper = styled.div`
+  display: inline-block;
+`
+
+export default {
+  name: "info-text",
+  components: {
+    IconWrapper,
+    TextOverlay,
+    ComponentWrapper,
+    IconImg,
+  },
+  props: {
+    text: {
+      required: true,
+    },
+    borderColor: {
+      required: false,
+      default: null,
+    },
+    size: {
+      required: false,
+      default: "20",
+    },
+    alignText: {
+      required: false,
+      default: "left", // "left" or "right"
+    },
+  },
+  methods: {
+    toggleShowInfo() {
+      this.showInfo = !this.showInfo
+
+      if (this.showInfo) {
+        document.addEventListener("click", this.clickOutside)
+      } else {
+        document.removeEventListener("click", this.clickOutside)
+      }
+    },
+    clickOutside(event) {
+      if (this.$el.contains(event.target)) {
+        return
+      }
+      this.toggleShowInfo()
+    },
+  },
+  data() {
+    return {
+      showInfo: false,
+    }
+  },
+}
+</script>

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

@@ -0,0 +1,112 @@
+<template>
+  <component-wrapper>
+    <container :checkColor="checkColor"
+      >{{ label }}
+      <input-checkbox
+        type="checkbox"
+        :checked="isChecked"
+        @change="onChangeHandler($event.target.checked)"
+      />
+      <span class="checkmark"></span>
+    </container>
+  </component-wrapper>
+</template>
+
+<script>
+// import Checkbox from "@eturnity/eturnity_reusable_components/src/components/inputs/checkbox"
+//To use:
+// <checkbox
+//     label="Do you accept the Terms?"
+//     :isChecked="isChecked" //required
+//     @on-event-handler="onInputChange($event)" //required
+//     checkColor="blue"
+// />
+import styled from "vue-styled-components"
+
+const ComponentWrapper = styled.div`
+  display: inline-block;
+`
+
+const containerAttrs = { checkColor: String }
+const Container = styled("label", containerAttrs)`
+  display: grid;
+  height: 28px;
+  align-content: center;
+  color: ${(props) => props.theme.colors.black};
+  position: relative;
+  padding-left: 42px;
+  margin-bottom: 12px;
+  cursor: pointer;
+  font-size: 16px;
+  user-select: none;
+
+  .checkmark {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 25px;
+    width: 25px;
+    background-color: #fff;
+    border-radius: 4px;
+    border: 1px solid ${(props) => props.theme.colors.mediumGray};
+
+    &:after {
+      content: "";
+      position: absolute;
+      display: none;
+    }
+  }
+
+  .checkmark:after {
+    left: 9px;
+    top: 5px;
+    width: 5px;
+    height: 10px;
+    border: solid
+      ${(props) =>
+        props.checkColor ? props.checkColor : props.theme.colors.black};
+    border-width: 0 3px 3px 0;
+    transform: rotate(45deg);
+  }
+`
+
+const InputCheckbox = styled.input`
+  cursor: pointer;
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+
+  &:checked ~ .checkmark:after {
+    display: block;
+  }
+`
+
+export default {
+  name: "checkbox",
+  components: {
+    ComponentWrapper,
+    Container,
+    InputCheckbox,
+  },
+  props: {
+    label: {
+      required: false,
+      default: "",
+    },
+    isChecked: {
+      required: true,
+      default: false,
+    },
+    checkColor: {
+      required: false,
+    },
+  },
+  methods: {
+    onChangeHandler(value) {
+      this.$emit("on-event-handler", value)
+    },
+  },
+}
+</script>

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

@@ -0,0 +1,215 @@
+<template>
+  <container>
+    <input-wrapper>
+      <input-container
+        :hasUnit="!!question.unit_short_name"
+        :placeholder="placeholder"
+        :isError="isError"
+        :inputWidth="inputWidth"
+        :value="textInput"
+        :hasLength="!!textInput.length"
+        @input="onChangeHandler"
+        @blur="onInputBlur()"
+        @keyup.enter="$emit('on-enter-click')"
+      />
+      <unit-container
+        v-if="question.unit_short_name"
+        :hasLength="!!textInput.length"
+        :isError="isError"
+        >{{ question.unit_short_name }}</unit-container
+      >
+    </input-wrapper>
+    <error-message v-if="isError">{{ errorMessage }}</error-message>
+  </container>
+</template>
+
+<script>
+// import InputNumber from "@eturnity/eturnity_reusable_components/src/components/inputs/inputNumber"
+//This component should be used for questions with input fields only
+//How to use:
+// <input-number
+//     placeholder="Enter distance"
+//     :isError="false" //default is false
+//     inputWidth="150px" //by default, this is 100%
+//     :question="question"
+//     :value="inputValue" //required -- String
+//     @input-change="onInputChange($event)" //required
+//     @on-enter-click="onInputSubmit()"
+//     :errorMessage="Enter a number between 1 and 10"
+// />
+// question data example:
+// question: {
+//   number_format_precision: 4,
+//   number_min_allowed: 0,
+//   number_max_allowed: 10,
+//   unit_short_name: "cm",
+// },
+import styled from "vue-styled-components"
+import {
+  stringToNumber,
+  numberToString,
+} from "../../../helpers/numberConverter"
+
+const Container = styled.div`
+  width: 100%;
+  position: relative;
+`
+
+const inputProps = {
+  isError: Boolean,
+  hasUnit: Boolean,
+  inputWidth: String,
+  hasLength: Boolean,
+}
+const InputContainer = styled("input", inputProps)`
+  border: 1px solid
+    ${(props) =>
+      props.isError
+        ? props.theme.colors.red
+        : props.hasLength
+        ? props.theme.colors.primary
+        : props.theme.colors.mediumGray};
+  padding: ${(props) =>
+    props.hasUnit ? "11px 40px 11px 10px" : "11px 5px 11px 10px"};
+  border-radius: 4px;
+  font-size: 16px;
+  color: ${(props) =>
+    props.isError ? props.theme.colors.red : props.theme.colors.primary};
+  width: ${(props) => (props.inputWidth ? props.inputWidth : "auto")};
+
+  &::placeholder {
+    color: ${(props) =>
+      props.isError ? props.theme.colors.red : props.theme.colors.darkGray};
+  }
+
+  &:focus {
+    outline: none;
+  }
+`
+
+const InputWrapper = styled.span`
+  position: relative;
+`
+
+const UnitContainer = styled("span", inputProps)`
+  border-left: 1px solid
+    ${(props) =>
+      props.isError
+        ? props.theme.colors.red
+        : props.hasLength
+        ? props.theme.colors.primary
+        : props.theme.colors.mediumGray};
+  position: absolute;
+  right: 10px;
+  top: 0;
+  padding-left: 10px;
+  color: ${(props) =>
+    props.isError
+      ? props.theme.colors.red
+      : props.hasLength
+      ? props.theme.colors.primary
+      : props.theme.colors.mediumGray};
+`
+
+const ErrorMessage = styled.div`
+  font-size: 14px;
+  color: ${(props) => props.theme.colors.red};
+  padding-top: 16px;
+`
+
+export default {
+  name: "input-number",
+  components: {
+    Container,
+    InputContainer,
+    InputWrapper,
+    UnitContainer,
+    ErrorMessage,
+  },
+  data() {
+    return {
+      textInput: "",
+      numberPrecision: 0, // we set this on created. By default is 0
+      minValue: 0,
+      maxValue: 100,
+    }
+  },
+  props: {
+    placeholder: {
+      required: false,
+      default: "",
+    },
+    isError: {
+      required: false,
+      default: false,
+    },
+    question: {
+      required: true,
+    },
+    inputWidth: {
+      required: false,
+      default: null,
+    },
+    value: {
+      required: true,
+      default: null,
+    },
+    clearInput: {
+      required: false,
+      default: false,
+    },
+    errorMessage: {
+      required: false,
+      default: "Please insert a correct number",
+    },
+  },
+  methods: {
+    onChangeHandler($event) {
+      this.textInput = $event
+      let formattedValue = stringToNumber({
+        value: $event,
+        numberPrecision: this.numberPrecision,
+      })
+      if (isNaN(formattedValue)) {
+        this.textInput = ""
+        formattedValue = ""
+      }
+      this.$emit("input-change", formattedValue)
+    },
+    onInputBlur() {
+      let num = stringToNumber({
+        value: this.textInput,
+        numberPrecision: this.numberPrecision,
+      })
+      this.textInput = numberToString({
+        value: num,
+        numberPrecision: this.numberPrecision,
+      })
+    },
+  },
+  created() {
+    this.numberPrecision = this.question.number_format_precision
+    this.minValue = this.question.number_min_allowed
+    this.maxValue = this.question.number_max_allowed
+    if (this.value) {
+      this.textInput = numberToString({
+        value: this.value,
+        numberPrecision: this.numberPrecision,
+      })
+    }
+  },
+  watch: {
+    clearInput: function (value) {
+      if (value) {
+        // If the value is typed, then we should clear the textInput on Continue
+        this.textInput = ""
+      }
+    },
+    question: function (value) {
+      this.numberPrecision = value.number_format_precision
+      this.minValue = value.number_min_allowed
+      this.maxValue = value.number_max_allowed
+    },
+  },
+}
+</script>

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

@@ -0,0 +1,144 @@
+<template>
+  <container>
+    <input-wrapper>
+      <label-wrapper v-if="label">
+        <input-label>{{ label }}</input-label>
+        <info-text
+          v-if="infoTextMessage"
+          :text="infoTextMessage"
+          borderColor="#ccc"
+          size="16"
+          :alignText="infoTextAlign"
+        />
+      </label-wrapper>
+      <input-container
+        :placeholder="placeholder"
+        :isError="isError"
+        :inputWidth="inputWidth"
+        :value="value"
+        @input="onChangeHandler"
+      />
+    </input-wrapper>
+    <error-message v-if="isError">{{ errorMessage }}</error-message>
+  </container>
+</template>
+
+<script>
+import styled from "vue-styled-components"
+import InfoText from "../../infoText"
+
+const Container = styled.div`
+  width: 100%;
+  position: relative;
+`
+
+const InputLabel = styled.div`
+  font-weight: bold;
+`
+
+const LabelWrapper = styled.div`
+  display: inline-grid;
+  grid-template-columns: auto 1fr;
+  grid-gap: 12px;
+  align-items: center;
+  margin-bottom: 12px;
+`
+
+const inputProps = { isError: Boolean, inputWidth: String }
+const InputContainer = styled("input", inputProps)`
+  border: ${(props) =>
+    props.isError
+      ? "1px solid " + props.theme.colors.red
+      : "1px solid " + props.theme.colors.mediumGray};
+  padding: ${(props) =>
+    props.hasUnit ? "11px 40px 11px 10px" : "11px 5px 11px 10px"};
+  border-radius: 4px;
+  font-size: 16px;
+  color: ${(props) =>
+    props.isError ? props.theme.colors.red : props.theme.colors.black};
+  width: 100%;
+  box-sizing: border-box; // to allow width of 100% with padding
+  font-weight: 500;
+
+  &::placeholder {
+    color: ${(props) =>
+      props.isError ? props.theme.colors.red : props.theme.colors.darkGray};
+  }
+
+  &:focus {
+    outline: none;
+  }
+`
+
+const InputWrapper = styled.span`
+  position: relative;,
+`
+
+const ErrorMessage = styled.div`
+  font-size: 14px;
+  color: ${(props) => props.theme.colors.red};
+  position: absolute;
+  bottom: -18px;
+`
+
+export default {
+  // import InputText from "@eturnity/eturnity_reusable_components/src/components/inputs/inputText"
+  // To use:
+  //   <input-text
+  //     placeholder="Company name"
+  //     :value="companyName"
+  //     @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"
+  //   />
+  name: "input-text",
+  components: {
+    Container,
+    InputContainer,
+    InputWrapper,
+    ErrorMessage,
+    InfoText,
+    InputLabel,
+    LabelWrapper,
+  },
+  props: {
+    placeholder: {
+      required: false,
+      default: "",
+    },
+    isError: {
+      required: false,
+      default: false,
+    },
+    inputWidth: {
+      required: false,
+      default: null,
+    },
+    value: {
+      required: true,
+      default: null,
+    },
+    errorMessage: {
+      required: false,
+      default: "",
+    },
+    infoTextMessage: {
+      required: false,
+    },
+    infoTextAlign: {
+      required: false,
+    },
+    label: {
+      required: false,
+    },
+  },
+  methods: {
+    onChangeHandler($event) {
+      this.$emit("input-change", $event)
+    },
+  },
+}
+</script>

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

@@ -0,0 +1,251 @@
+<template>
+  <component-wrapper :layout="layout">
+    <radio-wrapper v-for="(item, index) in options" :key="item.value">
+      <label-container :size="size" :isDisabled="item.disabled">
+        <radio
+          type="radio"
+          :value="selectedOption"
+          @click="onInputHandler(item.value)"
+          :name="'radioButtons_' + radioName"
+          :checked="selectedOption === item.value"
+          :disabled="item.disabled"
+        />
+        <span class="checkmark"></span>
+        <label-text :isDisabled="item.disabled">{{ item.label }}</label-text>
+        <info-text v-if="item.infoText" :text="item.infoText" size="16" />
+      </label-container>
+      <image-container v-if="item.img">
+        <radio-image :src="item.img" />
+        <div class="search-icn-container" @click="toggleImageModal(index)">
+          <img
+            class="search-icn"
+            :src="require('../../../assets/icons/search_icon.png')"
+          />
+        </div>
+      </image-container>
+      <modal
+        v-if="item.img"
+        :isOpen="isImageOpen(index)"
+        @on-close="toggleImageModal(null)"
+      >
+        <modal-image-container>
+          <modal-image :src="item.img" />
+        </modal-image-container>
+      </modal>
+    </radio-wrapper>
+  </component-wrapper>
+</template>
+
+<script>
+// import RadioButton from "@eturnity/eturnity_reusable_components/src/components/inputs/radioButton"
+// To use:
+// <radio-button
+//     :options="radioOptions"
+//     :selectedOption="checkedOption"
+//     @on-radio-change="onInputChange($event)"
+//     layout="vertical"
+//     size="large"
+//   />
+// Data being passed should look like:
+// radioOptions: [
+//   { label: 'Button 1', value: 'button_1', img: 'www.imagesrc.com', infoText: 'my info text' },
+//   { label: 'Button 2', value: 'button_2', img: 'www.imagesrc.com', infoText: 'my info text 2' },
+//   { label: 'Button 3', value: 'button_3', img: 'www.imagesrc.com', disabled: true },
+//   { label: 'Button 4', value: 'button_4', disabled: true }
+// ]
+
+import styled from "vue-styled-components"
+import Modal from "../../modals/modal"
+import InfoText from "../../infoText"
+
+const wrapperProps = {
+  layout: String,
+}
+const ComponentWrapper = styled("div", wrapperProps)`
+  display: flex;
+  flex-direction: ${(props) =>
+    props.layout === "vertical" ? "column" : "row"};
+  grid-gap: 32px;
+  flex-wrap: wrap;
+`
+
+const Radio = styled.input`
+  cursor: pointer;
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+
+  &:checked ~ .checkmark {
+    background-color: white;
+
+    &:after {
+      display: block;
+    }
+  }
+`
+
+const RadioWrapper = styled.div`
+  display: grid;
+  grid-gap: 10px;
+`
+
+const containerProps = { size: String, isDisabled: Boolean }
+const LabelContainer = styled("label", containerProps)`
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  grid-gap: 16px;
+  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;
+  user-select: none;
+  flex: auto;
+  align-self: baseline;
+
+  .checkmark {
+    position: relative;
+    height: ${(props) =>
+      props.size === "large"
+        ? "23px"
+        : props.size === "medium"
+        ? "17px"
+        : "12px"};
+    width: ${(props) =>
+      props.size === "large"
+        ? "23px"
+        : props.size === "medium"
+        ? "17px"
+        : "12px"};
+    background-color: #fff;
+    border-radius: 100%;
+    border: 1px solid ${(props) => props.theme.colors.mediumGray};
+
+    &: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"
+        : "6px"};
+    height: ${(props) =>
+      props.size === "large"
+        ? "10px"
+        : props.size === "medium"
+        ? "7px"
+        : "6px"};
+    border-radius: 100%;
+    background: ${(props) => props.theme.colors.primary};
+  }
+`
+
+const textAttrs = { isDisabled: Boolean }
+const LabelText = styled("div", textAttrs)`
+  color: ${(props) =>
+    props.isDisabled ? props.theme.colors.disabled : props.theme.colors.black};
+`
+
+const RadioImage = styled.img`
+  max-width: 100px;
+`
+
+const ImageContainer = styled.div`
+  border-radius: 4px;
+  cursor: pointer;
+  display: grid;
+  align-items: center;
+  justify-items: center;
+  position: relative;
+
+  .search-icn-container {
+    display: none;
+  }
+
+  &:hover {
+    .search-icn-container {
+      display: grid;
+      position: absolute;
+      background: rgba(0, 0, 0, 0.4);
+      width: 100%;
+      height: 100%;
+      align-items: center;
+      justify-items: center;
+    }
+  }
+`
+
+const ModalImage = styled.img``
+
+const ModalImageContainer = styled.div`
+  padding: 40px;
+`
+
+export default {
+  name: "radio-button",
+  components: {
+    Radio,
+    ComponentWrapper,
+    LabelContainer,
+    RadioWrapper,
+    RadioImage,
+    ImageContainer,
+    Modal,
+    ModalImage,
+    ModalImageContainer,
+    InfoText,
+    LabelText,
+  },
+  props: {
+    selectedOption: {
+      required: true,
+      default: false,
+    },
+    options: {
+      required: true,
+      default: [],
+    },
+    layout: {
+      required: false,
+      default: "horizontal", //2 options: 'vertical' (only 1 per row) & 'horizontal' (many per row)
+    },
+    size: {
+      required: false,
+      default: "medium", // small, medium, large
+    },
+  },
+  data() {
+    return {
+      radioName: "",
+      selectedImage: null,
+    }
+  },
+  methods: {
+    onInputHandler(value) {
+      this.$emit("on-radio-change", value)
+    },
+    isImageOpen(index) {
+      return this.selectedImage === index
+    },
+    toggleImageModal(value) {
+      this.selectedImage = value
+    },
+  },
+  created() {
+    this.radioName = Math.round(Math.random() * 10000)
+  },
+}
+</script>

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

@@ -0,0 +1,126 @@
+<template>
+  <container>
+    <Slider
+      :value="value"
+      @update="onChange($event)"
+      :tooltips="false"
+      :min="minValue"
+      :max="maxValue"
+    />
+    <number-text> {{ value }} {{ unit }} </number-text>
+  </container>
+</template>
+
+<script>
+// import Slider from "@eturnity/eturnity_reusable_components/src/components/inputs/slider"
+//To use:
+// <slider
+//     :value="sliderValue" //required from parent
+//     unit="m" //optional
+//     @change="onChangeSlider($event)" //required to have @change in parent
+//     :minValue="10" //default is 0 if not specified
+//     :maxValue="500" //default is 100 if not specified
+// />
+import Slider from "@vueform/slider/dist/slider.vue2.js"
+import styled from "vue-styled-components"
+
+const Container = styled.div`
+  margin: 16px 0 16px 21px;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-gap: 40px;
+  align-items: center;
+
+  .slider-touch-area {
+    background-color: ${(props) => props.theme.colors.mediumGray};
+    border-radius: 100%;
+    display: flex;
+    grid-gap: 3px;
+    align-items: center;
+    justify-items: center;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+
+    span {
+      // This is for the white lines on the button
+      width: 2px;
+      height: 10px;
+      background: white;
+      display: inline-block;
+
+      &:nth-of-type(1) {
+        margin-left: 7px;
+      }
+    }
+  }
+
+  .slider-connect {
+    background: ${(props) => props.theme.colors.blue};
+  }
+
+  .slider-base {
+    background-color: ${(props) => props.theme.colors.lightGray};
+    border-radius: 0;
+  }
+
+  .slider-connects {
+    border-radius: 0;
+  }
+
+  .slider-handle {
+    //we need to override the default values coming from the package
+    height: 26px !important;
+    width: 26px !important;
+    top: -11px !important;
+  }
+`
+
+const NumberText = styled.div`
+  font-weight: 500;
+  font-size: 24px;
+  color: ${(props) => props.theme.colors.black};
+`
+
+export default {
+  name: "slider",
+  components: {
+    Slider,
+    Container,
+    NumberText,
+  },
+  props: {
+    value: {
+      required: false,
+      default: 0,
+    },
+    unit: {
+      required: false,
+      default: "",
+    },
+    minValue: {
+      required: false,
+      default: 0,
+    },
+    maxValue: {
+      required: false,
+      default: 100,
+    },
+  },
+  methods: {
+    onChange(value) {
+      this.$emit("change", value)
+    },
+  },
+  mounted() {
+    // This is to add the 3 white lines to the slider button
+    let slider = document.querySelector(".slider-touch-area")
+    let span1 = document.createElement("span")
+    let span2 = document.createElement("span")
+    let span3 = document.createElement("span")
+    slider.appendChild(span1)
+    slider.appendChild(span2)
+    slider.appendChild(span3)
+  },
+}
+</script>
+
+<style src="@vueform/slider/themes/default.css"></style>

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

@@ -12,6 +12,7 @@
 </template>
 
 <script>
+// import Modal from "@eturnity/eturnity_reusable_components/src/components/modals/modal"
 // This is a more flexible modal box, where the parent can decide how the body of the modal looks
 // To use:
 // <modal :isOpen="isOpen" @on-close="$emit('on-close-summary')">
@@ -59,7 +60,7 @@ const ModalContainer = styled.div`
   background: white;
   margin: 0 auto;
   overflow: auto;
-  max-width: 600px;
+  max-width: 95%;
   max-height: 95%;
   min-width: 100px;
   min-height: 100px;

package/src/helpers/numberConverter.js

@@ -0,0 +1,41 @@
+export const stringToNumber = ({ value, numberPrecision }) => {
+  // This is for saving. It converts our input string to a readable number
+  let newVal = value.toString()
+  const selectedLang = localStorage.getItem("lang")
+  // The first replace will replace not allowed characters with a blank
+  if (selectedLang === "de-DE" || selectedLang === "it-CH") {
+    // replace commas with a dot, and dots with blank
+    newVal = newVal
+      .replace(/[^\d.,']/g, "")
+      .replace(/[.\s]/, "")
+      .replace(/[,\s]/, ".")
+  } else if (selectedLang === "en-us") {
+    // replace commas with blank
+    newVal = newVal.replace(/[^\d.,']/g, "").replace(/[,\s]/, "")
+  } else if (
+    selectedLang === "de-ch" ||
+    selectedLang === "fr-ch" ||
+    selectedLang === "it-ch"
+  ) {
+    // replace ' with blank
+    newVal = newVal.replace(/[^\d.,']/g, "").replace(/['\s]/, "")
+  } else if (selectedLang === "fr-fr") {
+    // replace space with blank, and commas with dot
+    newVal = newVal.replace(/[^\d.,']/g, "").replace(/[,\s]/, ".")
+  } else {
+    // en-US as default
+    newVal = newVal.replace(/[^\d.,']/g, "").replace(/[,\s]/, "")
+  }
+  newVal = parseFloat(newVal).toFixed(numberPrecision)
+  return parseFloat(newVal)
+}
+
+export const numberToString = ({ value, numberPrecision }) => {
+  let selectedLang = localStorage.getItem("lang")
+    ? localStorage.getItem("lang")
+    : "en-US"
+  return value.toLocaleString(selectedLang, {
+    minimumFractionDigits: numberPrecision,
+    maximumFractionDigits: numberPrecision,
+  })
+}

package/src/main.js

@@ -1,8 +1,11 @@
-import Vue from 'vue'
-import App from './App.vue'
+import Vue from "vue"
+import App from "./App.vue"
+import VueCompositionAPI from "@vue/composition-api"
 
 Vue.config.productionTip = false
 
+Vue.use(VueCompositionAPI)
+
 new Vue({
-  render: h => h(App),
-}).$mount('#app')
+  render: (h) => h(App),
+}).$mount("#app")