@eturnity/eturnity_reusable_components 1.2.22-EPDM-5202.1 → 1.2.23-3d-master.0

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.22-EPDM-5202.1",
+  "version": "1.2.23-3d-master.0",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -2,7 +2,12 @@
   <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">
           <thead>
             <tr>
@@ -59,42 +64,75 @@
         :disabled="false"
       />
       <br />
+>>>>>>> EPDM-5448
       <input-number
-        placeholder="Enter distance"
-        :numberPrecision="2"
         :value="inputValue"
-        @input-change="onInputChange($event)"
-      />
+        @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 />
-      <page-subtitle text="My Subtitle" infoText="My info Text" />
-      <spinner size="30px" />
-      <checkbox
-        label="Do you accept the Terms?"
-        :isChecked="true"
-        size="small"
-        :isDisabled="false"
+      
+  <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"
       />
-      <external-button text="Click me!" minWidth="500px" />
     </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 ProjectMarker from '@/components/projectMarker'
-import iconCollection from '@/components/icon/iconCollection'
-import Modal from '@/components/modals/modal'
+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 TableDropdown from "@/components/tableDropdown"
+const InputAnnexContainer = styled.div`
+  display: grid;
+  grid-template-columns: auto auto;
+  grid-gap: 10px;
+`
 
 const PageContainer = styled.div`
   padding: 40px;
@@ -111,14 +149,13 @@ export default {
   components: {
     ThemeProvider,
     PageContainer,
-    MainTable,
-    ThreeDots,
-    Toggle,
     InputNumber,
     PageSubtitle,
     Spinner,
     Checkbox,
+    InputText,
     ExternalButton,
+    iconWrapper,
     Modal,
     ProjectMarker,
     iconCollection,
@@ -126,6 +163,7 @@ export default {
   },
   data() {
     return {
+      num: 42,
       inputValue: null,
       checkedOption: 'button_1',
       question: {
@@ -185,11 +223,8 @@ export default {
     }
   },
   methods: {
-    consoleLog(data) {
-      console.log(data)
-    },
-    gettext(string) {
-      return string.toUpperCase()
+    keydownHandler(e) {
+      console.log('test', e)
     },
     getTheme() {
       return theme
@@ -240,8 +275,8 @@ export default {
         item = '-'
       }
       return item
-    },
-  },
+    }
+  }
 }
 </script>
 

package/src/assets/svgIcons/base_layer.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.75" y="0.75" width="12.5" height="12.5" stroke="white" stroke-width="1.5"/>
+</svg>

package/src/assets/svgIcons/draggable_corner.svg

@@ -0,0 +1,5 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0L26 26H0V0Z" fill="#0068DE"/>
+<line x1="12.4823" y1="20.4854" x2="4.70417" y2="12.7072" stroke="white" stroke-linecap="round"/>
+<line x1="8.94524" y1="21.1924" x2="3.99549" y2="16.2427" stroke="white" stroke-linecap="round"/>
+</svg>

package/src/assets/svgIcons/magic_tool.svg

@@ -0,0 +1,6 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.77451 5.87537C6.42348 5.2264 7.47566 5.2264 8.12463 5.87537C8.7736 6.52434 8.7736 7.57652 8.12463 8.22549L2.83685 13.5133C2.18788 14.1622 1.1357 14.1622 0.486727 13.5133C-0.162242 12.8643 -0.162242 11.8121 0.486727 11.1631L5.77451 5.87537Z" fill="white"/>
+<path d="M13.9998 0L13.5544 1.14505C13.2528 1.92013 13.2528 2.78011 13.5544 3.5552L13.9998 4.70025L12.8548 4.25476C12.0797 3.9532 11.2197 3.9532 10.4446 4.25476L9.2996 4.70025L9.74509 3.5552C10.0466 2.78012 10.0466 1.92013 9.74509 1.14505L9.2996 0L10.4446 0.445491C11.2197 0.747047 12.0797 0.747047 12.8548 0.445491L13.9998 0Z" fill="white"/>
+<path d="M12.3948 8.99997L12.3845 9.02637C12.0829 9.80146 12.0829 10.6614 12.3845 11.4365L12.3948 11.4629L12.3684 11.4527C11.5933 11.1511 10.7333 11.1511 9.9582 11.4527L9.9318 11.4629L9.94207 11.4365C10.2436 10.6614 10.2436 9.80146 9.94207 9.02637L9.9318 8.99997L9.9582 9.01024C10.7333 9.3118 11.5933 9.3118 12.3684 9.01024L12.3948 8.99997Z" fill="white"/>
+<path d="M5.55927 0.5027L5.33136 1.0885C5.02981 1.86359 5.02981 2.72357 5.33136 3.49866L5.55927 4.08446L4.97347 3.85655C4.19839 3.55499 3.3384 3.55499 2.56332 3.85655L1.97752 4.08446L2.20543 3.49866C2.50698 2.72357 2.50698 1.86359 2.20543 1.0885L1.97752 0.5027L2.56332 0.730611C3.3384 1.03217 4.19839 1.03217 4.97347 0.730611L5.55927 0.5027Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/map_icon.svg

@@ -1,3 +1,5 @@
-<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 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>

package/src/assets/svgIcons/margin_tool.svg

@@ -0,0 +1,6 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<!-- <rect x="0.75" y="0.75" width="12.5" height="12.5" stroke="white" stroke-width="1.5"/>
+<rect x="4.5" y="4.5" width="5" height="5" stroke="white" stroke-width="1.5"/> -->
+<path d="M0 0 h 14 v 14 h -14 v-12.5 h 1.5 v11 h11 v-11 h-12.5 Z" fill="red"></path>
+<path d="M3 3 h 8  v 8  h -8  v-7.5 h1.5 v6 h5 v-5 h-6.5Z" fill="red"></path>
+</svg>

package/src/assets/svgIcons/obstacle_tool.svg

@@ -1,13 +1,9 @@
-<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>
+<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" />
 </g>
 </svg>

package/src/assets/svgIcons/outline_tool.svg

@@ -0,0 +1,11 @@
+<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2.80078" y="4.06415" width="8" height="1.6" transform="rotate(90 2.80078 4.06415)" fill="white"/>
+<rect x="7.00195" y="3.8642" width="4" height="1.6" transform="rotate(-180 7.00195 3.8642)" fill="white"/>
+<path d="M8.5 3.07846L6.00098 0.935599L6.00098 5.22131L8.5 3.07846Z" fill="white"/>
+<rect x="11.002" y="13.8643" width="8" height="1.6" transform="rotate(-180 11.002 13.8643)" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 4.06409C2.55228 4.06409 3 3.61637 3 3.06409C3 2.5118 2.55228 2.06409 2 2.06409C1.44772 2.06409 1 2.5118 1 3.06409C1 3.61637 1.44772 4.06409 2 4.06409ZM2 5.06409C3.10457 5.06409 4 4.16866 4 3.06409C4 1.95952 3.10457 1.06409 2 1.06409C0.895431 1.06409 0 1.95952 0 3.06409C0 4.16866 0.895431 5.06409 2 5.06409Z" fill="white"/>
+<rect x="12.7988" y="4.06433" width="8" height="1.6" transform="rotate(90 12.7988 4.06433)" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.002 4.06421C12.5542 4.06421 13.002 3.61649 13.002 3.06421C13.002 2.51192 12.5542 2.06421 12.002 2.06421C11.4497 2.06421 11.002 2.51192 11.002 3.06421C11.002 3.61649 11.4497 4.06421 12.002 4.06421ZM12.002 5.06421C13.1065 5.06421 14.002 4.16878 14.002 3.06421C14.002 1.95964 13.1065 1.06421 12.002 1.06421C10.8974 1.06421 10.002 1.95964 10.002 3.06421C10.002 4.16878 10.8974 5.06421 12.002 5.06421Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.002 14.0643C12.5542 14.0643 13.002 13.6166 13.002 13.0643C13.002 12.512 12.5542 12.0643 12.002 12.0643C11.4497 12.0643 11.002 12.512 11.002 13.0643C11.002 13.6166 11.4497 14.0643 12.002 14.0643ZM12.002 15.0643C13.1065 15.0643 14.002 14.1688 14.002 13.0643C14.002 11.9597 13.1065 11.0643 12.002 11.0643C10.8974 11.0643 10.002 11.9597 10.002 13.0643C10.002 14.1688 10.8974 15.0643 12.002 15.0643Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 14.0644C2.55228 14.0644 3 13.6167 3 13.0644C3 12.5121 2.55228 12.0644 2 12.0644C1.44772 12.0644 1 12.5121 1 13.0644C1 13.6167 1.44772 14.0644 2 14.0644ZM2 15.0644C3.10457 15.0644 4 14.169 4 13.0644C4 11.9598 3.10457 11.0644 2 11.0644C0.895431 11.0644 0 11.9598 0 13.0644C0 14.169 0.895431 15.0644 2 15.0644Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/redo.svg

@@ -0,0 +1,6 @@
+<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.51904 2H10.519V4H4.51904V2Z" fill="#555D61"/>
+<path d="M4.51904 8H8.51904V10H4.51904V8Z" fill="#555D61"/>
+<path d="M10.519 5.92321L13.4807 2.96161L10.519 0L10.519 5.92321Z" fill="#555D61"/>
+<path d="M7.98391 8C7.29229 9.1956 5.99961 10 4.51904 10C2.3099 10 0.519043 8.20914 0.519043 6C0.519043 3.79086 2.3099 2 4.51904 2C5.99961 2 7.2923 2.8044 7.98391 4H4.51904C3.41447 4 2.51904 4.89543 2.51904 6C2.51904 7.10457 3.41447 8 4.51904 8H7.98391Z" fill="#555D61"/>
+</svg>

package/src/assets/svgIcons/resizer.svg

@@ -0,0 +1,5 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0L26 26H0V0Z" fill="#0068DE"/>
+<line x1="12.4823" y1="20.4854" x2="4.70417" y2="12.7072" stroke="white" stroke-linecap="round"/>
+<line x1="8.94524" y1="21.1924" x2="3.99549" y2="16.2427" stroke="white" stroke-linecap="round"/>
+</svg>

package/src/assets/svgIcons/roof_layer.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 10 L7 0 L14 10" fill="none" stroke="white" stroke-width="1.5"/>
+</svg>

package/src/assets/svgIcons/undo.svg

@@ -0,0 +1,6 @@
+<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.48096 2H3.48096V4H9.48096V2Z" fill="white"/>
+<path d="M9.48096 8H5.48096V10H9.48096V8Z" fill="white"/>
+<path d="M3.48096 5.92321L0.519349 2.96161L3.48096 0L3.48096 5.92321Z" fill="white"/>
+<path d="M6.01609 8C6.70771 9.1956 8.00039 10 9.48096 10C11.6901 10 13.481 8.20914 13.481 6C13.481 3.79086 11.6901 2 9.48096 2C8.00039 2 6.7077 2.8044 6.01609 4H9.48096C10.5855 4 11.481 4.89543 11.481 6C11.481 7.10457 10.5855 8 9.48096 8H6.01609Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/vertical_tool.svg

@@ -0,0 +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="M6.96161 0L10.9232 3.96161L7.96713 3.96161V6.55264L12.3875 9.0786L14 10L12.3875 10.9214L7 14L1.61245 10.9214L0 10L1.61245 9.0786L5.99272 6.57559V3.96161L3 3.96161L6.96161 0ZM5.99272 8.41839L3.2249 10L7 12.1572L10.7751 10L7.96713 8.39545V9.78795H5.99272V8.41839Z" fill="white"/>
+</svg>

package/src/assets/theme.js

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

package/src/components/errorMessage/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <component-wrapper>
+    <text-overlay>
+      <slot></slot>
+    </text-overlay>
+  </component-wrapper>
+</template>
+
+<script>
+// import InfoText from "@eturnity/eturnity_reusable_components/src/components/infoText"
+//To use:
+// <error-message
+//     alignText="right" // default is left
+// />
+
+import styled from 'vue-styled-components'
+
+const TextOverlay = styled.div`
+  position: absolute;
+  top: calc(100% + 13px);
+  background: ${(props) => props.theme.colors.red};
+  padding: 10px;
+  width: max-content;
+  max-width: 100%;
+  min-width: 200px;
+  font-size: 11px;
+  font-weight: 400;
+  border-radius: 4px;
+  font-family: 'Lato-Bold', Arial;
+  z-index: 10;
+  color: ${(props) => props.theme.colors.white};
+
+  :before {
+    content: '';
+    background-color: ${(props) => props.theme.colors.red};
+    position: absolute;
+    top: 2px;
+    left: 40px;
+    height: 11px;
+    width: 11px;
+    transform-origin: center center;
+    transform: translate(-2em, -0.5em) rotate(45deg);
+  }
+`
+
+const ComponentWrapper = styled.div`
+  display: block;
+`
+
+export default {
+  name: 'info-text',
+  components: {
+    TextOverlay,
+    ComponentWrapper
+  },
+  props: {},
+  methods: {},
+  data() {
+    return {}
+  }
+}
+</script>

package/src/components/icon/index.vue

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

package/src/components/iconWrapper/index.vue

@@ -0,0 +1,116 @@
+<template>
+    <Wrapper 
+    :disabled="disabled" 
+    :size="size" 
+    :backgroundColor="backgroundColor" 
+    :borderRadius="borderRadius"
+    :hoveredBackgroundColor="hoveredBackgroundColor"
+    :isHovered="isHovered"
+    >
+        <icon :disabled="disabled" 
+            :size="iconSize" 
+            :name="name" 
+            :color="iconColor" 
+            :hoveredColor="hoveredIconColor" />
+        <caret v-if="hasCaret">
+          <iconWrapper :disabled="disabled" 
+            size="10px" 
+            name="arrow_down" 
+            :iconColor="iconColor" 
+            :hoveredBackgroundColor="hoveredIconColor"
+            borderRadius="1px"
+            />  
+        </caret>
+    </Wrapper>
+  </template>
+  
+  <script>
+  // import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
+  //  How to use:
+  //<icon
+  //   name="House" //required. a svg file named [name].svg should be present in /assets/svgIcons
+  //   color="red"
+  //   hoveredColor="blue"
+  //   size="60px" by default, this is 30px
+  // />
+  
+  import styled from 'vue-styled-components'
+  import icon from '../icon'
+  const wrapperAttrs = { isHovered:Boolean,borderRadius:String,disabled: Boolean, size: String,backgroundColor:String,hoveredBackgroundColor:String }
+  const Wrapper = styled('div', wrapperAttrs)`
+    position:relative;
+    display: inline-flex;
+    width: ${(props) => props.size};
+    height: ${(props) => props.size};
+    justify-content:center;
+    align-items:center;
+    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
+    background-color: ${(props)=>props.theme.colors[props.backgroundColor] || props.backgroundColor};
+    border-radius: ${(props) => props.borderRadius};
+    ${(props)=>(props.isHovered ? 'background-color:'+props.theme.colors[props.hoveredBackgroundColor] || props.hoveredBackgroundColor : "")};
+    &:hover{
+        background-color:${(props)=>props.theme.colors[props.hoveredBackgroundColor] || props.hoveredBackgroundColor};
+    }
+  `
+  const caret=styled.div`
+  position:absolute;
+  bottom:3px;
+  right:2px;
+  height:10px;
+  `
+
+  export default {
+    name: 'iconWrapper',
+    components: {
+      Wrapper,
+      icon,
+      caret
+    },
+    props: {
+      disabled: {
+        required: false,
+        default: false
+      },
+      name: {
+        required: true
+      },
+      iconColor: {
+        required: false,
+        default: 'white'
+      },
+      hoveredIconColor: {
+        required: false
+      },
+      backgroundColor: {
+        required: false,
+      },
+      hoveredBackgroundColor: {
+        required: false,
+        default:"transparentWhite1"
+      },
+      size: {
+        required: false,
+        default: '32px'
+      },
+      iconSize:{
+        required: false,
+        default:'18px'
+      },
+      hasCaret:{
+        required: false,
+        default: false
+      },
+      borderRadius:{
+        required:false,
+        default:'6px'
+      },
+      isHovered:{
+        required:false,
+        default:false
+      }
+    },
+    data() {
+      return {}
+    }
+  }
+  </script>