@eturnity/eturnity_reusable_components 8.7.6 → 8.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.7.6",
+  "version": "8.10.1",
   "files": [
     "dist",
     "src"
@@ -16,7 +16,8 @@
     "build-storybook": "storybook build",
     "prettier": "prettier --write 'src/**/*.{js,vue}'",
     "test": "jest",
-    "test-coverage": "jest --coverage"
+    "test-coverage": "jest --coverage",
+    "merge-remote-master": "node scripts/merge-remote-master.js"
   },
   "dependencies": {
     "@originjs/vite-plugin-commonjs": "1.0.3",

package/src/Test.vue

@@ -1,80 +1,21 @@
 <template>
   <PageContainer>
-    <SpinnerComponent size="60px" />
-    <IconComponent color="red" cursor="pointer" name="House" size="30px" />
-    <MainButton icon="bell" text="Click ME" type="secondary" />
-    <AddNewButton />
-    <ToggleComponent
-      :disabled="false"
-      info-text-message="My info message"
-      :is-checked="true"
-      label="My Label Text"
-      label-align="right"
-      toggle-color="red"
-    />
-    <br />
-    <InputNumber
-      background-color="transparent"
-      border-color="eturnityGrey"
-      input-height="34px"
-      input-width="420px"
-      :interaction-step="1"
-      :is-interactive="true"
-      :min-number="0"
-      :number-precision="0"
-      text-align="left"
-      unit-name="mm"
+    <PanelRangeInfo
+      :arrow-color="value < 8 ? 'yellow' : 'lime'"
+      height="42px"
+      :max-value="12"
+      :min-value="8"
       :value="value"
-      @input-blur="blurHandler"
-      @input-change="changeHandler"
-      @input-focus="focusHandler"
-      @on-input="inputHandler"
-    >
-      <template #label>
-        <div>Interactive Label 1</div>
-      </template>
-    </InputNumber>
-
-    <hr />
-
-    <InputNumber
-      background-color="transparent"
-      border-color="eturnityGrey"
-      input-height="34px"
-      input-width="420px"
-      :interaction-step="1"
-      :is-interactive="true"
-      :min-number="0"
-      :number-precision="0"
-      text-align="left"
-      unit-name="mm"
-      :value="value"
-      @input-blur="blurHandler"
-      @input-change="changeHandler"
-      @input-focus="focusHandler"
-      @on-input="inputHandler"
-    >
-      <template #label>
-        <div>Interactive Label 2</div>
-      </template>
-    </InputNumber>
-
-    <hr />
-    <button @click="value = 42">Click to set at 42</button>
-    <br />
-    <IconCollection />
-  </PageContainer>
+      width="120px"
+  /></PageContainer>
+  <IconCollection color="red" />
+  <input v-model="value" max="30" min="0" type="range" />
 </template>
 
 <script>
   import styled from 'vue3-styled-components'
-  import InputNumber from '@/components/inputs/inputNumber'
-  import ToggleComponent from '@/components/inputs/toggle'
-  import IconCollection from '@/components/icon/iconCollection'
-  import AddNewButton from '@/components/addNewButton'
-  import MainButton from '@/components/buttons/mainButton'
-  import IconComponent from '@/components/icon'
-  import SpinnerComponent from '@/components/spinner'
+  import PanelRangeInfo from '@/components/panelRangeInfo'
+  import IconCollection from './components/icon/iconCollection.vue'
 
   const PageContainer = styled.div`
     padding: 40px;
@@ -84,13 +25,8 @@
     name: 'App',
     components: {
       PageContainer,
-      InputNumber,
-      ToggleComponent,
+      PanelRangeInfo,
       IconCollection,
-      AddNewButton,
-      MainButton,
-      IconComponent,
-      SpinnerComponent,
     },
     data() {
       return {

package/src/assets/svgIcons/checkmark_white.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8" cy="8" r="7" fill="white"/>
+<path d="M12.9583 12.9411C13.9349 11.9612 14.5991 10.7139 14.8673 9.35669C15.1354 7.99949 14.9954 6.59327 14.4648 5.3156C13.9343 4.03794 13.0371 2.94612 11.8865 2.17803C10.7359 1.40993 9.38344 1 8 1C6.61657 1 5.26415 1.40993 4.11354 2.17803C2.96292 2.94612 2.0657 4.03794 1.53517 5.3156C1.00465 6.59327 0.864606 7.99949 1.13273 9.35669C1.40086 10.7139 2.06513 11.9612 3.04167 12.9411C3.69199 13.5937 4.46474 14.1115 5.31561 14.4648C6.16647 14.8181 7.0787 15 8 15C8.9213 15 9.83354 14.8181 10.6844 14.4648C11.5353 14.1115 12.308 13.5937 12.9583 12.9411ZM5.50334 6.92115L7.07834 8.49615L10.5258 5.07198L11.745 6.26781L8.2975 9.73865L7.0725 10.9578L5.85334 9.73865L4.27834 8.16365L5.50334 6.92115Z" fill="#99DB0C"/>
+</svg>

package/src/assets/svgIcons/clenergy.svg

@@ -0,0 +1,4 @@
+<svg width="154" height="91" viewBox="0 0 154 91" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" fill="white" d="m113.9 6.4q-1.3-0.5-2.7-1-3.1-1.1-6.3-1.9-3.1-0.9-6.4-1.5-3.2-0.6-6.4-1-3.3-0.3-6.6-0.5-2.5-0.1-5-0.1c-34.8 0-65.5 16.7-65.6 16.8 0.1 0 10.5-1.8 24.3-3.1-21 8-34.1 17.9-34.1 17.9q2.8-0.8 5.5-1.5 6.3-1.7 12.1-3.1-3.1 1.5-6 3.2-2.9 1.7-5.8 3.6-2.9 1.9-5.6 3.9-2.8 2-5.4 4.1c0.1 0 54-20.8 81.5-16.6q0.5 0.1 1.1 0.2 0.5 0.1 1.1 0.2 0.5 0.1 1.1 0.3 0.5 0.1 1.1 0.3c17.9 5.4 14.6 16.9 11.4 22.9q-0.3 0.4-0.5 0.9-0.3 0.5-0.6 1-0.3 0.4-0.6 0.9-0.3 0.4-0.7 0.8 0 0 0 0.1 0 0 0 0 0 0 0 0 0 0 0 0c1-0.4 16.5-6.1 23.7-13.3 10.3-9.4 14.6-24.9-4.6-33.5z"/>
+  <path fill-rule="evenodd" fill="white" d="m131.5 63.3q0 0 0 0-0.1 0-0.1 0 0 0 0 0 0 0 0 0 3-1.6 6-3.3 2.9-1.7 5.8-3.6 2.8-1.8 5.6-3.8 2.7-2 5.4-4.2c-0.1 0.1-38.3 14.8-66.8 16.9-7.3 0.6-13.9 0.3-19.1-1.2-17.9-5.4-14.6-16.9-11.4-22.9q0 0 0 0 0.2-0.5 0.5-1 0.3-0.5 0.6-0.9 0.3-0.5 0.6-0.9 0.3-0.5 0.7-0.9h-0.1c-0.9 0.4-16.4 6.1-23.6 13.3-10.3 9.4-14.6 24.9 4.5 33.4q1.4 0.5 2.8 1c45.1 16.1 96.1-11.6 96.3-11.7-0.2 0-10.6 1.8-24.4 3.1 21-8.1 34.1-17.9 34.2-18q-9.3 2.7-17.5 4.7z"/>
+</svg>

package/src/assets/svgIcons/clickable_info.svg

@@ -1,4 +1,4 @@
-<svg fill="none" height="14" viewbox="13 13 14 14" width="14" xmlns="http://www.w3.org/2000/svg">
-<circle cx="20" cy="20" fill="white" r="7"></circle>
+<svg fill="none" height="16" viewbox="12 12 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" fill="transparent" r="7"></circle>
 <path d="M20 13C18.6155 13 17.2622 13.4105 16.111 14.1797C14.9599 14.9489 14.0627 16.0421 13.5328 17.3212C13.003 18.6003 12.8644 20.0078 13.1345 21.3656C13.4046 22.7235 14.0713 23.9708 15.0503 24.9497C16.0292 25.9287 17.2765 26.5954 18.6344 26.8655C19.9922 27.1356 21.3997 26.997 22.6788 26.4672C23.9579 25.9373 25.0511 25.0401 25.8203 23.889C26.5895 22.7378 27 21.3845 27 20C27 18.1435 26.2625 16.363 24.9497 15.0503C23.637 13.7375 21.8565 13 20 13V13ZM21.3125 24.5558H18.6875V19.3058H21.3125V24.5558ZM20 18.0692C19.7404 18.0692 19.4867 17.9922 19.2708 17.848C19.055 17.7038 18.8868 17.4988 18.7874 17.2589C18.6881 17.0191 18.6621 16.7552 18.7127 16.5006C18.7634 16.246 18.8884 16.0121 19.0719 15.8286C19.2555 15.645 19.4893 15.52 19.7439 15.4694C19.9985 15.4187 20.2624 15.4447 20.5023 15.5441C20.7421 15.6434 20.9471 15.8116 21.0913 16.0275C21.2355 16.2433 21.3125 16.4971 21.3125 16.7567C21.312 17.1046 21.1736 17.4382 20.9276 17.6842C20.6815 17.9303 20.348 18.0687 20 18.0692V18.0692Z" fill="#B2B9C5"></path>
 </svg>

package/src/assets/svgIcons/clickable_info_white.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 1C6.61553 1 5.26216 1.41054 4.11101 2.17971C2.95987 2.94888 2.06266 4.04213 1.53285 5.32121C1.00303 6.6003 0.86441 8.00776 1.13451 9.36563C1.4046 10.7235 2.07129 11.9708 3.05026 12.9497C4.02922 13.9287 5.2765 14.5954 6.63437 14.8655C7.99224 15.1356 9.3997 14.997 10.6788 14.4672C11.9579 13.9373 13.0511 13.0401 13.8203 11.889C14.5895 10.7378 15 9.38447 15 8C15 6.14348 14.2625 4.36301 12.9497 3.05025C11.637 1.7375 9.85652 1 8 1Z" fill="#00B0EB"/>
+<path class='fix' d="M9.00039 12.8002L7.00039 12.8002L7.00039 7.3002H9.00039L9.00039 12.8002Z" fill="white"/>
+<path class='fix' d="M6.7002 4.5002C6.7002 3.78223 7.28223 3.2002 8.0002 3.2002C8.71817 3.2002 9.3002 3.78223 9.3002 4.5002C9.3002 5.21817 8.71817 5.8002 8.0002 5.8002C7.28223 5.8002 6.7002 5.21817 6.7002 4.5002Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/erase_white.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8" cy="8" r="7" fill="white"/>
+<path d="M12.9592 3.04075C10.2382 0.319749 5.76175 0.319749 3.04075 3.04075C0.319749 5.76176 0.319749 10.2382 3.04075 12.9592C5.76175 15.6803 10.2382 15.6803 12.9592 12.9592C15.6803 10.2382 15.6803 5.84953 12.9592 3.04075ZM11.6426 10.5016L10.4138 11.7304L7.95611 9.27273L5.49843 11.7304L4.26959 10.5016L6.72727 8.04389L4.26959 5.58621L5.49843 4.35737L7.95611 6.81505L10.4138 4.35737L11.6426 5.58621L9.18495 8.04389L11.6426 10.5016Z" fill="#FF7F7F"/>
+</svg>

package/src/assets/svgIcons/module.svg

@@ -1,3 +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="M11.0722 3.6H1.6V10.4H11.0722L7.87332 7.60217L7.18484 7L7.87332 6.39783L11.0722 3.6ZM12.4 9.43572V4.56428L9.61516 7L12.4 9.43572ZM0 2H1.6H12.4H14V3.6V10.4V12H12.4H1.6H0V10.4V3.6V2Z" fill="white"/>
+<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2139 1H1V9H12.2139L8.07083 5.37636L7.64052 5L8.07083 4.62364L12.2139 1ZM13 8.35906V1.64094L9.15948 5L13 8.35906ZM0 0H1H13H14V1V9V10H13H1H0V9V1V0Z" fill="#151B1E"/>
 </svg>

package/src/assets/svgIcons/optimizer.svg

@@ -1,6 +1,3 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="3.11079" y="3.10981" width="7.77778" height="7.77778" stroke="white" stroke-width="1.55556"/>
-<line x1="3.72749" y1="10.3387" x2="10.7275" y2="3.3387" stroke="white" stroke-width="1.55556"/>
-<line x1="-0.000366211" y1="7.05425" x2="2.99963" y2="7.05425" stroke="white" stroke-width="1.55556"/>
-<line x1="10.9994" y1="6.99957" x2="13.9994" y2="6.99957" stroke="white" stroke-width="1.55556"/>
+<svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.8645 1.42847H2.42875V5.86422L6.8645 1.42847ZM3.13585 6.57132H7.5716V2.13557L3.13585 6.57132ZM1.42875 0.428467H2.42875H7.5716H8.5716V1.42847V3.35704H9.99983V4.35704H8.5716V6.57132V7.57132H7.5716H2.42875H1.42875V6.57132V4.35704H0V3.35704H1.42875V1.42847V0.428467Z" fill="#263238"/>
 </svg>

package/src/assets/svgIcons/question_mark.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.11101 2.17971C5.26216 1.41054 6.61553 1 8 1C9.85652 1 11.637 1.7375 12.9497 3.05025C14.2625 4.36301 15 6.14348 15 8C15 9.38447 14.5895 10.7378 13.8203 11.889C13.0511 13.0401 11.9579 13.9373 10.6788 14.4672C9.3997 14.997 7.99224 15.1356 6.63437 14.8655C5.2765 14.5954 4.02922 13.9287 3.05026 12.9497C2.07129 11.9708 1.4046 10.7235 1.13451 9.36563C0.86441 8.00776 1.00303 6.6003 1.53285 5.32122C2.06266 4.04213 2.95987 2.94888 4.11101 2.17971ZM7.27854 9.5299H8.53584V9.02921C8.53584 8.7325 8.6026 8.50255 8.73612 8.33936C8.78804 8.28002 8.8548 8.20955 8.93639 8.12795C9.02541 8.03894 9.12925 7.9388 9.24794 7.82754C9.37404 7.70886 9.47418 7.61242 9.54836 7.53825C9.62253 7.46407 9.73009 7.33797 9.87103 7.15994C10.1158 6.86324 10.2382 6.49235 10.2382 6.04729C10.2382 5.40195 10.0305 4.90125 9.61511 4.5452C9.19972 4.18173 8.66194 4 8.00176 4C7.34159 4 6.78897 4.18915 6.3439 4.56745C5.90626 4.93834 5.65035 5.45387 5.57617 6.11405H6.92249C6.95216 5.82476 7.05971 5.59481 7.24516 5.4242C7.43802 5.24618 7.67538 5.15716 7.95726 5.15716C8.23913 5.15716 8.46908 5.24988 8.6471 5.43533C8.82513 5.61335 8.91414 5.83959 8.91414 6.11405C8.91414 6.3885 8.82884 6.61845 8.65823 6.80389L7.84599 7.61613C7.60862 7.8535 7.45285 8.04636 7.37868 8.19472C7.31192 8.33565 7.27854 8.55447 7.27854 8.85118V9.5299ZM7.32304 11.7663C7.49365 11.9221 7.69393 12 7.92388 12C8.16124 12 8.36152 11.9184 8.52471 11.7552C8.69532 11.592 8.78062 11.3992 8.78062 11.1766C8.78062 10.9467 8.69532 10.7538 8.52471 10.5981C8.3541 10.4349 8.15012 10.3533 7.91275 10.3533C7.6828 10.3533 7.48252 10.4349 7.31192 10.5981C7.14873 10.7612 7.06713 10.9578 7.06713 11.1878C7.06713 11.4103 7.15244 11.6032 7.32304 11.7663Z" fill="#00B0EB"/>
+</svg>

package/src/assets/svgIcons/question_mark_white.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 1C6.61553 1 5.26216 1.41054 4.11101 2.17971C2.95987 2.94888 2.06266 4.04213 1.53285 5.32122C1.00303 6.6003 0.86441 8.00776 1.13451 9.36563C1.4046 10.7235 2.07129 11.9708 3.05026 12.9497C4.02922 13.9287 5.2765 14.5954 6.63437 14.8655C7.99224 15.1356 9.3997 14.997 10.6788 14.4672C11.9579 13.9373 13.0511 13.0401 13.8203 11.889C14.5895 10.7378 15 9.38447 15 8C15 6.14348 14.2625 4.36301 12.9497 3.05025C11.637 1.7375 9.85652 1 8 1Z" fill="#00B0EB"/>
+<path class="fix" d="M8.53584 9.5299H7.27854V8.85118C7.27854 8.55447 7.31192 8.33565 7.37868 8.19472C7.45285 8.04636 7.60862 7.8535 7.84599 7.61613L8.65823 6.80389C8.82884 6.61845 8.91414 6.3885 8.91414 6.11405C8.91414 5.83959 8.82513 5.61335 8.6471 5.43533C8.46908 5.24988 8.23913 5.15716 7.95726 5.15716C7.67538 5.15716 7.43802 5.24618 7.24516 5.4242C7.05971 5.59481 6.95216 5.82476 6.92249 6.11405H5.57617C5.65035 5.45387 5.90626 4.93834 6.3439 4.56745C6.78897 4.18915 7.34159 4 8.00176 4C8.66194 4 9.19972 4.18173 9.61511 4.5452C10.0305 4.90125 10.2382 5.40195 10.2382 6.04729C10.2382 6.49235 10.1158 6.86324 9.87103 7.15994C9.73009 7.33797 9.62253 7.46407 9.54836 7.53825C9.47418 7.61242 9.37404 7.70886 9.24794 7.82754C9.12925 7.9388 9.02541 8.03894 8.93639 8.12795C8.8548 8.20955 8.78804 8.28002 8.73612 8.33936C8.6026 8.50255 8.53584 8.7325 8.53584 9.02921V9.5299ZM7.92388 12C7.69393 12 7.49365 11.9221 7.32304 11.7663C7.15244 11.6032 7.06713 11.4103 7.06713 11.1878C7.06713 10.9578 7.14873 10.7612 7.31192 10.5981C7.48252 10.4349 7.6828 10.3533 7.91275 10.3533C8.15012 10.3533 8.3541 10.4349 8.52471 10.5981C8.69532 10.7538 8.78062 10.9467 8.78062 11.1766C8.78062 11.3992 8.69532 11.592 8.52471 11.7552C8.36152 11.9184 8.16124 12 7.92388 12Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/reorder_string.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.3536 0.646484L13.3536 2.64648L13.7071 3.00004L13.3536 3.35359L11.3536 5.35359L10.6464 4.64648L11.7929 3.50004H9.50093L7.756 5.34373L7.02971 4.65635L8.92257 2.65635L9.0705 2.50004H9.28571H11.7929L10.6464 1.35359L11.3536 0.646484ZM0 3.50004H3.49625L8.91932 9.34026L9.06768 9.50004H9.28571H11.7929L10.6464 10.6465L11.3536 11.3536L13.3536 9.35359L13.7071 9.00004L13.3536 8.64648L11.3536 6.64648L10.6464 7.35359L11.7929 8.50004H9.50375L4.08068 2.65981L3.93232 2.50004H3.71429H0V3.50004ZM0 8.50004H3.49042L5.12703 6.66703L5.87297 7.33305L4.08725 9.33305L3.93815 9.50004H3.71429H0V8.50004Z" fill="#263238"/>
+</svg>

package/src/assets/svgIcons/switch_polarity.svg

@@ -0,0 +1,5 @@
+<svg width="18" height="18" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.50008 1V3L5.50008 3V4L3.50008 4V6H2.50008V4L0.500075 4L0.500076 3L2.50008 3V1H3.50008Z" fill="#263238"/>
+<path d="M8.50008 3L13.5001 3V4L8.50008 4V3Z" fill="#263238"/>
+<path d="M3.70718 8.5L2.20718 10H11.793L10.293 8.5L11.0001 7.79289L13.7072 10.5L11.0001 13.2071L10.293 12.5L11.793 11H2.20718L3.70718 12.5L3.00008 13.2071L0.292969 10.5L3.00008 7.79289L3.70718 8.5Z" fill="#263238"/>
+</svg>

package/src/assets/svgIcons/transparent_warning.svg

@@ -0,0 +1,4 @@
+<svg fill="none" height="16" viewbox="12 12 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" fill="#FFFFFF" r="7"></circle>
+<path d="M20 27C18.6155 27 17.2622 26.5895 16.111 25.8203C14.9599 25.0511 14.0627 23.9579 13.5328 22.6788C13.003 21.3997 12.8644 19.9922 13.1345 18.6344C13.4046 17.2765 14.0713 16.0292 15.0503 15.0503C16.0292 14.0713 17.2765 13.4046 18.6344 13.1345C19.9922 12.8644 21.3997 13.003 22.6788 13.5328C23.9579 14.0627 25.0511 14.9599 25.8203 16.111C26.5895 17.2622 27 18.6155 27 20C27 21.8565 26.2625 23.637 24.9497 24.9497C23.637 26.2625 21.8565 27 20 27V27ZM21.3125 15.4442H18.6875V20.6942H21.3125V15.4442ZM20 21.9308C19.7404 21.9308 19.4867 22.0078 19.2708 22.152C19.055 22.2962 18.8868 22.5012 18.7874 22.7411C18.6881 22.9809 18.6621 23.2448 18.7127 23.4994C18.7634 23.754 18.8884 23.9879 19.0719 24.1714C19.2555 24.355 19.4893 24.48 19.7439 24.5306C19.9985 24.5813 20.2624 24.5553 20.5023 24.4559C20.7421 24.3566 20.9471 24.1884 21.0913 23.9725C21.2355 23.7567 21.3125 23.5029 21.3125 23.2433C21.312 22.8954 21.1736 22.5618 20.9276 22.3158C20.6815 22.0697 20.348 21.9313 20 21.9308V21.9308Z" fill="#FFFFFF"></path>
+</svg>

package/src/assets/svgIcons/warning_triangle.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.967 14H1.03186C0.274257 14 -0.208194 13.1903 0.152385 12.5241L6.11997 1.49695C6.49811 0.798217 7.50078 0.798216 7.87892 1.49695L13.8465 12.5241C14.2071 13.1903 13.7246 14 12.967 14ZM5.97999 3.4039H8.01887V8.44968H5.97999V3.4039ZM6.99965 12.4864C7.73158 12.4864 8.32493 11.899 8.32493 11.1745C8.32493 10.4499 7.73158 9.86256 6.99965 9.86256C6.26772 9.86256 5.67438 10.4499 5.67438 11.1745C5.67438 11.899 6.26772 12.4864 6.99965 12.4864Z" fill="#3C474C"/>
+</svg>

package/src/assets/svgIcons/warning_triangle_white.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.2768 15H1.72318C0.955354 15 0.473987 14.1705 0.854932 13.5039L7.13173 2.51943C7.51562 1.84761 8.48432 1.84761 8.86821 2.51942L15.1451 13.5039C15.526 14.1705 15.0446 15 14.2768 15Z" fill="#FFCC00"/>
+<path class="fix" d="M7 5H9V10H7V5Z" fill="white"/>
+<circle class="fix" cx="8.0002" cy="12.6999" r="1.3" fill="white"/>
+</svg>

package/src/components/buttons/buttonIcon/index.vue

@@ -1,8 +1,9 @@
 <template>
   <PageContainer>
     <ButtonWrapper
+      :app-theme="appTheme"
       :custom-color="customColor"
-      :height="height"
+      :is-active="isActive"
       :is-disabled="isDisabled"
       :min-width="minWidth"
     >
@@ -43,7 +44,8 @@
     isDisabled: Boolean,
     minWidth: String,
     customColor: String,
-    height: String,
+    appTheme: String,
+    isActive: Boolean,
   }
   const ButtonWrapper = styled('div', ButtonAttrs)`
     display: grid;
@@ -55,13 +57,16 @@
         ? props.theme.colors[props.customColor]
           ? props.theme.colors[props.customColor]
           : props.customColor
+        : props.appTheme === 'dark'
+        ? props.isActive
+          ? 'rgba(255, 255, 255, 0.2)'
+          : props.theme.colors.black
         : props.theme.colors.yellow};
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
     user-select: none;
     border-radius: 4px;
     overflow: hidden;
     min-width: ${(props) => (props.minWidth ? props.minWidth : 'initial')};
-    height: ${(props) => props.height};
 
     &:hover {
       opacity: ${(props) => (props.isDisabled ? '1' : '0.8')};
@@ -83,7 +88,8 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 0 14px;
+    padding: 5px 10px;
+    white-space: nowrap;
   `
 
   const IconContainerAttrs = {
@@ -95,6 +101,7 @@
     justify-items: center;
     width: ${(props) => props.width};
     background: ${(props) => props.theme.colors.white + '1a'};
+    padding: 5px;
   `
 
   export default {
@@ -110,32 +117,50 @@
       isDisabled: {
         required: false,
         default: false,
+        type: Boolean,
       },
       text: {
         required: true,
+        type: String,
       },
       minWidth: {
         required: false,
         default: null,
+        type: String,
       },
       customColor: {
         required: false,
         default: null,
+        type: String,
       },
       iconName: {
         required: true,
+        type: String,
       },
       fontColor: {
         required: false,
         default: null,
+        type: String,
       },
       fontSize: {
         required: false,
-        default: '13px',
+        default: '14px',
+        type: String,
+      },
+      appTheme: {
+        required: false,
+        default: 'light',
+        type: String,
+      },
+      isActive: {
+        required: false,
+        default: false,
+        type: Boolean,
       },
       height: {
         required: false,
-        default: '30px',
+        type: String,
+        default: '',
       },
     },
     data() {

package/src/components/infoLabel/index.vue

@@ -0,0 +1,63 @@
+<template>
+  <PageContainer :info-type="infoType">
+    <LabelText>{{ getLabelText }}</LabelText>
+  </PageContainer>
+</template>
+
+<script>
+  // import InfoLabel from "@eturnity/eturnity_reusable_components/src/components/infoLabel"
+  import styled from 'vue3-styled-components'
+
+  const PageAttrs = {
+    infoType: 'String',
+  }
+  const PageContainer = styled('div', PageAttrs)`
+    background-color: ${(props) =>
+      props.infoType === 'warning'
+        ? props.theme.colors.yellow4
+        : props.infoType === 'error'
+        ? props.theme.colors.red4
+        : props.theme.colors.blue4};
+    padding: 4px 8px;
+    border-radius: 8px;
+    font-size: 12px;
+    font-weight: 400;
+    color: ${(props) => props.theme.colors.black};
+  `
+
+  const LabelText = styled.div``
+
+  export default {
+    name: 'InfoLabel',
+    components: {
+      PageContainer,
+      LabelText,
+    },
+    props: {
+      infoType: {
+        type: String,
+        default: 'hint', // hint, warning, error
+      },
+      labelText: {
+        type: String,
+        default: '',
+      },
+    },
+    computed: {
+      getLabelText() {
+        if (this.labelText) {
+          return this.labelText
+        }
+        const infoType = this.infoType.toLowerCase()
+        switch (infoType) {
+          case 'warning':
+            return this.$gettext('Warning')
+          case 'error':
+            return this.$gettext('error')
+          default:
+            return this.$gettext('info')
+        }
+      },
+    },
+  }
+</script>