@eturnity/eturnity_reusable_components 8.7.5-EPDM-12729.2 → 8.7.5-EPDM-6306.0

package/package.json

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

package/src/Test.vue

@@ -1,21 +1,80 @@
 <template>
   <PageContainer>
-    <PanelRangeInfo
-      :arrow-color="value < 8 ? 'yellow' : 'lime'"
-      height="42px"
-      :max-value="12"
-      :min-value="8"
+    <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"
       :value="value"
-      width="120px"
-  /></PageContainer>
-  <IconCollection color="red" />
-  <input v-model="value" max="30" min="0" type="range" />
+      @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>
 </template>
 
 <script>
   import styled from 'vue3-styled-components'
-  import PanelRangeInfo from '@/components/panelRangeInfo'
-  import IconCollection from './components/icon/iconCollection.vue'
+  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'
 
   const PageContainer = styled.div`
     padding: 40px;
@@ -25,8 +84,13 @@
     name: 'App',
     components: {
       PageContainer,
-      PanelRangeInfo,
+      InputNumber,
+      ToggleComponent,
       IconCollection,
+      AddNewButton,
+      MainButton,
+      IconComponent,
+      SpinnerComponent,
     },
     data() {
       return {

package/src/assets/svgIcons/clickable_info.svg

@@ -1,4 +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="transparent" r="7"></circle>
+<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>
 <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/module.svg

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

package/src/assets/svgIcons/optimizer.svg

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

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

@@ -1,9 +1,8 @@
 <template>
   <PageContainer>
     <ButtonWrapper
-      :app-theme="appTheme"
       :custom-color="customColor"
-      :is-active="isActive"
+      :height="height"
       :is-disabled="isDisabled"
       :min-width="minWidth"
     >
@@ -44,8 +43,7 @@
     isDisabled: Boolean,
     minWidth: String,
     customColor: String,
-    appTheme: String,
-    isActive: Boolean,
+    height: String,
   }
   const ButtonWrapper = styled('div', ButtonAttrs)`
     display: grid;
@@ -57,16 +55,13 @@
         ? 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')};
@@ -88,8 +83,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 5px 10px;
-    white-space: nowrap;
+    padding: 0 14px;
   `
 
   const IconContainerAttrs = {
@@ -101,7 +95,6 @@
     justify-items: center;
     width: ${(props) => props.width};
     background: ${(props) => props.theme.colors.white + '1a'};
-    padding: 5px;
   `
 
   export default {
@@ -117,50 +110,32 @@
       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: '14px',
-        type: String,
-      },
-      appTheme: {
-        required: false,
-        default: 'light',
-        type: String,
-      },
-      isActive: {
-        required: false,
-        default: false,
-        type: Boolean,
+        default: '13px',
       },
       height: {
         required: false,
-        type: String,
-        default: '',
+        default: '30px',
       },
     },
     data() {

package/src/components/infoText/index.vue

@@ -1,48 +1,25 @@
 <template>
-  <PageContainer
-    ref="container"
-    :type="type"
-    @click=";(isMobile || openTrigger === 'onClick') && toggleInfo()"
-    @mouseenter="!isMobile && openTrigger === 'onHover' && showInfo()"
-    @mouseleave="!isMobile && openTrigger === 'onHover' && hideInfo()"
-  >
-    <div ref="icon" data-test-id="infoText_trigger">
-      <IconWrapper
-        :background-color="backgroundColor"
-        :border-radius="borderRadius"
-        :hovered-icon="hoveredIcon"
-        :is-active="isActive"
-        :is-disabled="isDisabled"
-        :padding="padding"
-      >
-        <LabelWrapper
-          v-if="labelText && labelAlign === 'left'"
-          :color="iconColor || computedIconColor"
-          :size="labelSize"
-        >
-          {{ labelText }}
-        </LabelWrapper>
-        <Dot
-          v-if="type === 'dot'"
-          :color="dotColor"
-          data-test-id="infoText_dot"
-        />
-        <IconComponent
-          v-else-if="!noIcon"
-          :color="iconColor || computedIconColor"
-          :cursor="isDisabled ? 'not-allowed' : 'pointer'"
-          :disabled="isDisabled"
-          :name="iconName"
-          :size="size"
-        />
-        <LabelWrapper
-          v-if="labelText && labelAlign === 'right'"
-          :color="iconColor || computedIconColor"
-          :size="labelSize"
-        >
-          {{ labelText }}
-        </LabelWrapper>
-      </IconWrapper>
+  <PageContainer ref="container" :type="type">
+    <div
+      ref="icon"
+      data-test-id="infoText_trigger"
+      @click=";(isMobile || openTrigger === 'onClick') && toggleInfo()"
+      @mouseenter="!isMobile && openTrigger === 'onHover' && showInfo()"
+      @mouseleave="!isMobile && openTrigger === 'onHover' && hideInfo()"
+    >
+      <Dot
+        v-if="type === 'dot'"
+        :color="dotColor"
+        data-test-id="infoText_dot"
+      />
+      <IconComponent
+        v-else
+        :color="iconColor || computedIconColor"
+        :cursor="isDisabled ? 'not-allowed' : 'pointer'"
+        :disabled="isDisabled"
+        :name="iconName"
+        :size="size"
+      />
     </div>
     <Teleport v-if="isVisible" to="body">
       <TextWrapper :style="wrapperStyle">
@@ -59,13 +36,13 @@
             :src="image"
             @load="onImageLoad"
           />
-          <span v-if="text" ref="textContent" :style="textStyle">
+          <span ref="textContent" :style="textStyle">
             <slot>
               <span v-html="text"></span>
             </slot>
           </span>
         </TextOverlay>
-        <!-- <Arrow :image="image" :style="arrowStyle" /> -->
+        <Arrow :image="image" :style="arrowStyle" />
       </TextWrapper>
     </Teleport>
   </PageContainer>
@@ -86,12 +63,7 @@
   import styled from 'vue3-styled-components'
   import theme from '../../assets/theme.js'
 
-  const TextOverlayAttrs = {
-    appTheme: String,
-    image: Boolean,
-    width: Number,
-  }
-  const TextOverlay = styled('div', TextOverlayAttrs)`
+  const TextOverlay = styled('div')`
     background-color: ${(props) =>
       props.image ? props.theme.colors.white : props.theme.colors.black};
     color: ${(props) =>
@@ -116,16 +88,16 @@
     }
   `
 
-  // const Arrow = styled('div')`
-  //   position: absolute;
-  //   width: 0;
-  //   height: 0;
-  //   border: 8px solid transparent;
-  //   border-top-color: ${(props) =>
-  //     props.image ? props.theme.colors.white : props.theme.colors.black};
-  //   filter: ${(props) =>
-  //     props.image ? 'drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1))' : 'none'};
-  // `
+  const Arrow = styled('div')`
+    position: absolute;
+    width: 0;
+    height: 0;
+    border: 8px solid transparent;
+    border-top-color: ${(props) =>
+      props.image ? props.theme.colors.white : props.theme.colors.black};
+    filter: ${(props) =>
+      props.image ? 'drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1))' : 'none'};
+  `
 
   const PageContainer = styled('div')`
     display: ${(props) => (props.type === 'dot' ? 'unset' : 'inline-block')};
@@ -149,57 +121,16 @@
     border-radius: 50%;
   `
 
-  const IconWrapperAttrs = {
-    backgroundColor: String,
-    borderRadius: String,
-    padding: String,
-    hoveredIcon: Boolean,
-    isActive: Boolean,
-    isDisabled: Boolean,
-  }
-  const IconWrapper = styled('div', IconWrapperAttrs)`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-    white-space: nowrap;
-    background-color: ${(props) => props.backgroundColor};
-    border-radius: ${(props) =>
-      props.hoveredIcon ? '6px' : props.borderRadius};
-    padding: ${(props) => props.padding};
-    width: ${(props) => (props.hoveredIcon ? '32px' : '')};
-    height: ${(props) => (props.hoveredIcon ? '32px' : '')};
-    cursor: pointer;
-    background-color: ${(props) =>
-      props.isActive ? props.theme.colors.transparentWhite2 : ''};
-    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
-    &:hover {
-      background-color: ${(props) =>
-        props.hoveredIcon ? props.theme.colors.transparentWhite2 : ''};
-    }
-  `
-
-  const LabelWrapperAttrs = {
-    size: String,
-    color: String,
-  }
-  const LabelWrapper = styled('div', LabelWrapperAttrs)`
-    font-size: ${(props) => props.size};
-    color: ${(props) => props.color};
-  `
-
   export default {
     name: 'InfoText',
     components: {
       IconComponent,
       TextOverlay,
-      // Arrow,
+      Arrow,
       Dot,
       PageContainer,
       TextWrapper,
       OverlayImage,
-      IconWrapper,
-      LabelWrapper,
     },
     props: {
       text: {
@@ -207,16 +138,6 @@
         default: '',
         type: String,
       },
-      isActive: {
-        required: false,
-        default: false,
-        type: Boolean,
-      },
-      labelText: {
-        required: false,
-        default: '',
-        type: String,
-      },
       size: {
         type: String,
         default: '14px',
@@ -268,46 +189,6 @@
         required: false,
         default: 'info', // info, dot
       },
-      appTheme: {
-        type: String,
-        default: 'light', // light or dark
-        required: false,
-      },
-      labelAlign: {
-        type: String,
-        default: 'right',
-        required: false,
-      },
-      backgroundColor: {
-        type: String,
-        default: '',
-        required: false,
-      },
-      borderRadius: {
-        type: String,
-        default: '',
-        required: false,
-      },
-      padding: {
-        type: String,
-        default: '',
-        required: false,
-      },
-      labelSize: {
-        type: String,
-        default: '12px',
-        required: false,
-      },
-      noIcon: {
-        type: Boolean,
-        default: false,
-        required: false,
-      },
-      hoveredIcon: {
-        type: Boolean,
-        default: false,
-        required: false,
-      },
     },
     setup(props) {
       const isVisible = ref(false)
@@ -325,11 +206,7 @@
 
       const textStyle = computed(() => ({
         fontSize: props.image ? '12px' : '13px',
-        color: props.image
-          ? theme.colors.grey1
-          : props.appTheme === 'dark'
-          ? theme.colors.black
-          : theme.colors.white,
+        color: props.image ? theme.colors.grey1 : theme.colors.white,
         textAlign: props.image ? 'right' : 'left',
       }))
 
@@ -459,9 +336,7 @@
           overflowY: 'auto',
           backgroundColor: props.image
             ? theme.colors.white
-            : props.appTheme === 'light'
-            ? theme.colors.black
-            : theme.colors.grey5,
+            : theme.colors.black,
         }
       }
 
@@ -533,7 +408,7 @@
 
         // Calculate new width
         const calculatedWidth = Math.min(
-          Math.max(contentWidth, 230),
+          Math.max(contentWidth, 200),
           parseInt(props.maxWidth, 10)
         )
 

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

@@ -5,7 +5,6 @@
       :check-color="checkColor"
       :cursor-type="cursorType"
       :data-test-id="dataId"
-      :font-color="fontColor"
       :has-label="hasLabel"
       :is-checked="isChecked"
       :is-disabled="isDisabled"
@@ -64,7 +63,6 @@
     isChecked: Boolean,
     isDisabled: Boolean,
     cursorType: String,
-    fontColor: String,
   }
   const Container = styled('label', containerAttrs)`
     display: grid;
@@ -72,10 +70,7 @@
       props.hasLabel ? '16px auto' : '16px'};
     grid-gap: 16px;
     align-content: center;
-    color: ${(props) =>
-      props.theme.colors[props.fontColor]
-        ? props.theme.colors[props.fontColor]
-        : props.fontColor};
+    color: ${(props) => props.theme.colors.black};
     position: relative;
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : props.cursorType)};
     font-size: 16px;
@@ -181,7 +176,7 @@
     align-items: center;
     min-height: 18px;
     color: ${(props) =>
-      props.isDisabled ? props.theme.colors.grey2 : 'unset'};
+      props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
   `
 
   export default {
@@ -198,10 +193,6 @@
         required: false,
         default: '',
       },
-      fontColor: {
-        required: false,
-        default: 'black',
-      },
       isChecked: {
         required: true,
         default: false,