@eturnity/eturnity_reusable_components 1.2.26-3d-master.1 → 1.2.26-EPDM-5784

package/babel.config.js

@@ -2,4 +2,4 @@ module.exports = {
   presets: [
     '@vue/cli-plugin-babel/preset'
   ]
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.26-3d-master.1",
+  "version": "1.2.26-EPDM-5784",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -2,13 +2,8 @@
   <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
     <page-container>
       <br />
-
-      <iconWrapper name="bell"/>
-      <modal backdrop="dark" :isLoading="false" :isOpen="true">
-
-      <modal backdrop="dark" :isLoading="false" :isOpen="false">
-
-        <main-table titleText="My Table">
+      <!-- <modal backdrop="dark" :isLoading="false" :isOpen="false"> -->
+      <!-- <main-table titleText="My Table">
           <thead>
             <tr>
               <th>Column 1</th>
@@ -63,55 +58,6 @@
         labelAlign="right"
         :disabled="false"
       />
-<<<<<<< HEAD
-      <br />
->>>>>>> EPDM-5448
-      <input-number
-        :value="inputValue"
-        @input-change="inputValue = $event"
-        inputWidth="250px"
-        slotSize="50%"
-        ><InputAnnexContainer>
-          <span>123m2</span>
-          <info-text size="10px" alignArrow="right" text="infoText ceci est le text"></info-text>
-        </InputAnnexContainer>
-      </input-number>
-      <input-number
-        :value="inputValue"
-        @input-change="inputValue = $event"
-        inputWidth="250px"
-        slotSize="50%"
-        :isError="true"
-        ><InputAnnexContainer>
-          <span>123m2</span>
-          <info-text :style="{'justify-self': 'end'}" size="12px" alignArrow="center" text="infoText ceci est le text">This is the tooltip text</info-text>
-        </InputAnnexContainer>
-      </input-number>
-      <br />
-      
-  <p>InputText</p>
-   <input-text
-     placeholder="Company name"
-     :value="inputValue"
-     :isError="true"
-     errorMessage="This is my error message"
-     infoTextAlign="right" 
-     infoTextMessage="My info message"
-     label="Question 5"
-     alignItems="vertical"
-     inputWidth="250px"
-     minWidth="100px"
-   />
-   <br/>
-      <input-number
-        :value="num"
-        @input-change="num = $event"
-        unitName="t"
-        id="biebie"
-        test="koko"
-        @keydown="keydownHandler"
-      />
-=======
       <br /> -->
       <iconCollection />
       <input-text
@@ -130,30 +76,26 @@
         :isDisabled="false"
       /> -->
       <!-- <external-button text="Click me!" minWidth="500px" /> -->
->>>>>>> master
     </page-container>
   </ThemeProvider>
 </template>
 
 <script>
-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 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 InputText from "@/components/inputs/inputText"
+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 InputText from '@/components/inputs/inputText'
+// import Checkbox from '@/components/inputs/checkbox'
+// import PageSubtitle from '@/components/pageSubtitle'
+// import Spinner from '@/components/spinner'
+// import ExternalButton from '@/components/buttons/externalButton'
+// import ProjectMarker from '@/components/projectMarker'
+import iconCollection from '@/components/icon/iconCollection'
+// import Modal from '@/components/modals/modal'
 // import TableDropdown from "@/components/tableDropdown"
-const InputAnnexContainer = styled.div`
-  display: grid;
-  grid-template-columns: auto auto;
-  grid-gap: 10px;
-`
 
 const PageContainer = styled.div`
   padding: 40px;
@@ -170,21 +112,21 @@ export default {
   components: {
     ThemeProvider,
     PageContainer,
-    InputNumber,
-    PageSubtitle,
-    Spinner,
-    Checkbox,
+    // MainTable,
+    // ThreeDots,
+    // Toggle,
     InputText,
-    ExternalButton,
-    iconWrapper,
-    Modal,
-    ProjectMarker,
-    iconCollection,
-    RowContainer
+    // PageSubtitle,
+    // Spinner,
+    // Checkbox,
+    // ExternalButton,
+    // Modal,
+    // ProjectMarker,
+    iconCollection
+    // RowContainer
   },
   data() {
     return {
-      num: 42,
       inputValue: null,
       checkedOption: 'button_1',
       question: {
@@ -310,8 +252,11 @@ export default {
     }
   },
   methods: {
-    keydownHandler(e) {
-      console.log('test', e)
+    consoleLog(data) {
+      console.log(data)
+    },
+    gettext(string) {
+      return string.toUpperCase()
     },
     getTheme() {
       return theme

package/src/assets/svgIcons/map_icon.svg

@@ -1,5 +1,3 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9 12L14 14V2L9 0L5 2L0 0V12L5 14L9 12ZM4.93167 12.3571L8.93167 10.3571L12.5 11.7845V3.01555L9.06834 1.64288L5.06834 3.64288L1.5 2.21555V10.9845L4.93167 12.3571Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4.25 13V3H5.75V13H4.25Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 11V1H9.75V11H8.25Z" fill="white"/>
+<svg fill="none" height="14" viewbox="13 13 14 14" width="14" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.3333 15V24H22.1281L21.9394 24.0809L17.6667 25.912L14 24.3406V14.5165L17.2727 15.9191L17.4614 16H16.6667V25H18.6667V16H17.8719L18.0606 15.9191L22.3333 14.088L26 15.6594V25.4835L22.7273 24.0809L22.5386 24H23.3333V15H21.3333Z" stroke="#B2B9C5" stroke-width="2"></path>
 </svg>

package/src/assets/svgIcons/obstacle_tool.svg

@@ -1,9 +1,13 @@
-<svg fill="none" height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
-<defs>
-    <pattern id="pattern_Z6wSY" patternUnits="userSpaceOnUse" width="4" height="4" patternTransform="rotate(-45)">
-        <path d="M0 0 L 16 0 L 16 2 L 0 2 Z" fill="red" stroke-width="0"></path>
-    </pattern>
-</defs>
-<rect width="16" height="16" fill="url(#pattern_Z6wSY)" :opacity="1" />
+<svg fill="none" height="23" viewbox="6 12 34 23" width="34" xmlns="http://www.w3.org/2000/svg">
+<mask height="14" id="mask0_6458_86453" maskunits="userSpaceOnUse" style="mask-type:alpha" width="14" x="13" y="13">
+<rect fill="#FF5656" height="14" width="14" x="13" y="13"></rect>
+</mask>
+<g mask="url(#mask0_6458_86453)">
+<rect fill="#FF5656" height="1.55556" transform="rotate(-45 6.77783 21.6267)" width="21" x="6.77783" y="21.6267"></rect>
+<rect fill="#FF5656" height="1.55556" transform="rotate(-45 8.97803 23.8269)" width="21" x="8.97803" y="23.8269"></rect>
+<rect fill="#FF5656" height="1.55556" transform="rotate(-45 11.1777 26.0269)" width="21" x="11.1777" y="26.0269"></rect>
+<rect fill="#FF5656" height="1.55556" transform="rotate(-45 13.3774 28.2266)" width="21" x="13.3774" y="28.2266"></rect>
+<rect fill="#FF5656" height="1.55556" transform="rotate(-45 15.5771 30.4265)" width="21" x="15.5771" y="30.4265"></rect>
+<rect fill="#FF5656" height="1.55556" transform="rotate(-45 17.7773 32.6262)" width="21" x="17.7773" y="32.6262"></rect>
 </g>
 </svg>

package/src/assets/theme.js

@@ -19,8 +19,6 @@ const theme = {
     grey4: '#dee2eb',
     grey5: '#fafafa',
     green: '#99db0c',
-    transparentWhite1:'#ffffff32',
-    transparentBlack1:'#263238e6',
     disabled: '#dfe1e1'
   },
   screen: {

package/src/components/icon/index.vue

@@ -1,7 +1,6 @@
 <template>
-  <Wrapper :isDisabled="disabled" :size="size" :cursor="cursor">
+  <wrapper :isDisabled="isDisabled" :size="size" :cursor="cursor">
     <icon-image
-      :disabled="disabled"
       :size="size"
       :color="color"
       :hoveredColor="hoveredColor"
@@ -9,7 +8,7 @@
         require(`!html-loader!./../../assets/svgIcons/${name.toLowerCase()}.svg`)
       "
     ></icon-image>
-  </Wrapper>  
+  </wrapper>
 </template>
 
 <script>
@@ -36,14 +35,14 @@ const Wrapper = styled('div', wrapperAttrs)`
 const IconImageProps = { color: String, hoveredColor: String, size: String }
 const IconImage = styled('div', IconImageProps)`
   svg {
-    width: 100%;
-    height: 100%;
+    width: ${(props) => props.size};
+    height: ${(props) => props.size};
   }
-  svg path {
+  svg > path {
     ${(props) =>
       props.color && `fill: ${props.theme.colors[props.color] || props.color};`}
   }
-  &:hover > svg path {
+  &:hover > svg > path {
     ${(props) => props.hoveredColor && `fill: ${props.hoveredColor};`}
   }
 `
@@ -51,11 +50,11 @@ const IconImage = styled('div', IconImageProps)`
 export default {
   name: 'icon',
   components: {
-    IconImage,
-    Wrapper
+    Wrapper,
+    IconImage
   },
   props: {
-    disabled: {
+    isDisabled: {
       required: false,
       default: false
     },
@@ -74,7 +73,7 @@ export default {
     },
     cursor: {
       required: false,
-      default: null
+      default: 'pointer'
     }
   },
   data() {

package/src/components/infoText/index.vue

@@ -1,25 +1,34 @@
 <template>
   <component-wrapper>
-    <icon-wrapper :size="size">
+    <icon-wrapper>
       <icon-img
         :isActive="showInfo"
         :size="size"
         :borderColor="borderColor"
         @click.prevent="toggleShowInfo()"
-        @mouseenter="openTrigger == 'onHover' ? toggleShowInfo() : ''"
-        @mouseleave="openTrigger == 'onHover' ? toggleShowInfo() : ''"
+        @mouseenter="toggleShowInfo()"
+        @mouseleave="toggleShowInfo()"
       >
-        <icon :size="size" name="info" :color="iconColor" />
+        <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"
-        :width="width"
-        :halfComputedTextInfoWidth="halfComputedTextInfoWidth"
-        :alignArrow="alignArrow"
-        :iconSize="size"
-      ><slot />
+      >
         {{ text }}
       </text-overlay>
     </icon-wrapper>
@@ -35,23 +44,22 @@
 //     size="20"
 //     alignText="right" // default is left
 // />
-import theme from '../../assets/theme.js'
-import styled from 'vue-styled-components'
-import icon from '../icon'
 
-const textAttrs = { iconSize:String, borderColor: String, alignArrow:String, alignText: String, width:String,halfComputedTextInfoWidth:Number }
-const TextOverlay = styled('div', textAttrs)`
+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: ${(props) => 'calc('+props.iconSize+' + 15px)'};
-  ${(props) => (props.alignArrow === 'left' 
-    ? 'left: calc('+props.iconSize+' /2 - 18px)' 
-    : props.alignArrow === 'center' 
-    ? 'left: calc((-'+props.width+' + '+props.iconSize+') /2 + 2px)'
-    : 'right: calc('+props.iconSize+' /2 - 17px)')};
-  text-align: ${(props) => props.alignText};
+  top: 26px;
+  right: ${(props) => (props.alignText === "left" ? "-10px" : "inherit")};
+  left: ${(props) => (props.alignText === "left" ? "inherit" : "-10px")};
   background: ${(props) => props.theme.colors.black};
   padding: 10px;
-  width: ${(props) => props.width };
+  width: max-content;
   max-width: 400px;
   font-size: 13px;
   font-weight: 400;
@@ -60,13 +68,12 @@ const TextOverlay = styled('div', textAttrs)`
   color: ${(props) => props.theme.colors.white};
 
   :before {
-    content: '';
+    content: "";
     background-color: ${(props) => props.theme.colors.black};
     position: absolute;
     top: 2px;
-    ${(props) => (props.alignArrow === 'left' ? 'left:40px;' : 
-    props.alignArrow=='center' ? 'left: calc(50% + 19px);' : 
-    'right:-13px;')};
+    right: ${(props) => (props.alignText === "left" ? "-12px" : "inherit")};
+    left: ${(props) => (props.alignText === "left" ? "inherit" : "40px")};
     height: 8px;
     width: 8px;
     transform-origin: center center;
@@ -75,15 +82,18 @@ const TextOverlay = styled('div', textAttrs)`
 `
 
 const iconAttrs = { isActive: Boolean, size: String, borderColor: String }
-
-const IconWrapper = styled('div', iconAttrs)`
-  position: relative;
-  top: 1px;
-  height: ${(props) => props.size};
-`
-const IconImg = styled('div', iconAttrs)`
+const IconImg = styled("div", iconAttrs)`
   cursor: pointer;
-  height: ${(props) => props.size};
+  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`
@@ -91,51 +101,38 @@ const ComponentWrapper = styled.div`
 `
 
 export default {
-  name: 'info-text',
+  name: "info-text",
   components: {
     IconWrapper,
     TextOverlay,
     ComponentWrapper,
     IconImg,
-    icon
   },
   props: {
     text: {
-      required: false,
+      required: true,
     },
     borderColor: {
       required: false,
-      default: null
+      default: null,
     },
     size: {
       required: false,
-      default: '14px'
+      default: "20",
     },
     alignText: {
       required: false,
-      default: 'left' // "left" or "right"
-    },
-    alignArrow:{
-      required:false,
-      default:'center'
-    },
-    openTrigger:{
-      required:false,
-      default: 'onClick'
+      default: "left", // "left" or "right"
     },
-    width:{
-      required:false,
-      default:'165px'
-    }
   },
   methods: {
     toggleShowInfo() {
       this.showInfo = !this.showInfo
 
       if (this.showInfo) {
-        document.addEventListener('click', this.clickOutside)
+        document.addEventListener("click", this.clickOutside)
       } else {
-        document.removeEventListener('click', this.clickOutside)
+        document.removeEventListener("click", this.clickOutside)
       }
     },
     clickOutside(event) {
@@ -143,24 +140,12 @@ export default {
         return
       }
       this.toggleShowInfo()
-    }
+    },
   },
   data() {
     return {
       showInfo: false,
     }
   },
-  computed: {
-    iconColor() {
-      return this.isActive
-        ? this.borderColor
-          ? this.borderColor
-          : theme.colors.secondary
-        : theme.colors.mediumGray
-    },
-    halfComputedTextInfoWidth() {
-      return parseInt(this.width)/2;
-    }
-  }
 }
-</script>
+</script>