@eturnity/eturnity_reusable_components 7.39.4-qa-elisee-7.42.0 → 7.39.4-qa-elisee-7.45.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.39.4-qa-elisee-7.42.0",
+  "version": "7.39.4-qa-elisee-7.45.0",
   "files": [
     "dist",
     "src"

package/src/assets/svgIcons/lock.svg

@@ -1,3 +1,3 @@
-<svg fill="none" height="16" viewbox="14 12 12 16" width="12" xmlns="http://www.w3.org/2000/svg">
+<svg fill="none" height="16" viewbox="14 12 12 16" width="16" xmlns="http://www.w3.org/2000/svg">
 <path clip-rule="evenodd" d="M16.5 18.25V16.5C16.5 14.567 18.067 13 20 13C21.933 13 23.5 14.567 23.5 16.5V18.25H25.25V27H14.75V18.25H16.5ZM18.25 16.5C18.25 15.5335 19.0335 14.75 20 14.75C20.9665 14.75 21.75 15.5335 21.75 16.5V18.25H18.25V16.5ZM19.125 24.375V20.875H20.875V24.375H19.125Z" fill="#263238" fill-rule="evenodd"></path>
 </svg>

package/src/assets/theme.js

@@ -35,9 +35,6 @@ const theme = {
     tablet: '768px',
     tabletLarge: '950px',
   },
-  fonts: {
-    mainFont: '"Figtree", sans-serif',
-  },
   borderRadius: '4px',
 }
 

package/src/components/icon/index.vue

@@ -111,10 +111,10 @@
         props.backgroundColor ? props.backgroundColor : 'transparent'};
       padding: ${(props) => (props.backgroundColor ? '3px' : '0')};
     }
-    svg path:not(.fix) {
+    svg path {
       ${({ theme, color }) => color && `fill: ${theme.colors[color] || color};`}
     }
-    &:hover svg path:not(.fix) {
+    &:hover svg path {
       ${({ theme, hoveredColor }) =>
         hoveredColor && `fill: ${theme.colors[hoveredColor] || hoveredColor};`}
     }

package/src/components/infoCard/index.vue

@@ -1,10 +1,6 @@
 <template>
-  <InfoContainer
-    background-color="backgrounColor"
-    :border-color="borderColor"
-    :has-dashed-border="hasDashedBorder"
-  >
-    <RCIcon :color="color" name="info" size="24px" />
+  <InfoContainer>
+    <RCIcon name="info" size="24px" :color="color" />
     <TextContainer>
       <slot></slot>
     </TextContainer>
@@ -14,24 +10,12 @@
 <script>
   import styled from 'vue3-styled-components'
   import RCIcon from '../icon'
-  const propsContainer = {
-    backgroundColor: String,
-    hasDashedBorder: Boolean,
-    borderColor: String,
-  }
-  const InfoContainer = styled('div', propsContainer)`
+
+  const InfoContainer = styled.div`
     display: flex;
     gap: 15px;
-    padding: 15px;
-    border: 1px ${(props) => (props.hasDashedBorder ? 'dashed' : 'solid')}
-      ${(props) =>
-        props.theme.colors[props.borderColor]
-          ? props.theme.colors[props.borderColor]
-          : props.borderColor};
-    background-color: ${(props) =>
-      props.theme.colors[props.backgroundColor]
-        ? props.theme.colors[props.backgroundColor]
-        : props.backgroundColor};
+    padding: 20px;
+    border: 1px dashed ${(props) => props.theme.colors.grey4};
     border-radius: 4px;
   `
 
@@ -49,19 +33,8 @@
     },
     props: {
       color: {
-        required: false,
-      },
-      backgrounColor: {
-        required: false,
-      },
-      hasDashedBorder: {
-        required: false,
-        default: true,
-      },
-      borderColor: {
-        required: false,
-        default: 'grey4',
-      },
-    },
+        required: false
+      }
+    }
   }
 </script>

package/src/components/infoText/index.vue

@@ -18,11 +18,10 @@
         :align-arrow="alignArrow"
         :half-computed-text-info-width="halfComputedTextInfoWidth"
         :icon-size="size"
-        :info-position="infoPosition"
         :max-width="maxWidth"
         :width="width"
         ><slot></slot>
-        <span v-if="text.length > 0" v-html="text"></span>
+        <span v-html="text"></span>
       </TextOverlay>
     </IconWrapper>
   </ComponentWrapper>
@@ -45,14 +44,10 @@
     alignArrow: String,
     width: String,
     halfComputedTextInfoWidth: Number,
-    infoPosition: String,
   }
   const TextOverlay = styled('div', textAttrs)`
     position: absolute;
-    ${(props) =>
-      props.infoPosition == 'top'
-        ? 'bottom : calc(' + props.iconSize + ' + 15px)'
-        : 'top : calc(' + props.iconSize + ' + 15px)'};
+    top: ${(props) => 'calc(' + props.iconSize + ' + 15px)'};
     ${(props) =>
       props.alignArrow === 'left'
         ? 'left: calc(' + props.iconSize + ' /2 - 18px)'
@@ -68,17 +63,14 @@
     font-weight: 400;
     line-height: normal;
     border-radius: 4px;
-    z-index: 999;
+    z-index: 99;
     color: ${(props) => props.theme.colors.white};
 
     :before {
       content: '';
       background-color: ${(props) => props.theme.colors.black};
       position: absolute;
-
-      ${(props) =>
-        props.infoPosition == 'top' ? 'bottom : -10px' : 'top: 2px'};
-
+      top: 2px;
       ${(props) =>
         props.alignArrow === 'left'
           ? 'left:40px;'
@@ -122,37 +114,26 @@
     props: {
       text: {
         required: false,
-        default: '',
-        type: String,
       },
       size: {
         required: false,
         default: '14px',
-        type: String,
-      },
-      infoPosition: {
-        required: false,
-        default: 'bottom',
-        type: String,
       },
       alignArrow: {
         required: false,
         default: 'center',
-        type: String,
       },
       openTrigger: {
         required: false,
         default: 'onHover', // onHover, onClick
-        type: String,
       },
       width: {
         required: false,
         default: '200px',
-        type: String,
       },
       maxWidth: {
-        default: '400px',
         type: String,
+        default: '400px',
       },
     },
     data() {

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

@@ -4,6 +4,7 @@
       v-if="hasLabelSlot"
       :align-items="alignItems"
       :border-color="borderColor"
+      :is-disabled="disabled"
       :is-error="isError"
       :is-interactive="isInteractive"
       :no-border="noBorder"
@@ -273,18 +274,22 @@
         : props.theme.colors.mediumGray};
   `
 
-  const LabelWrapper = styled('div', inputProps)`
+  const LabelWrapper = styled('div')`
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 8px;
-    cursor: ${(props) => (props.isInteractive ? 'ew-resize' : 'auto')};
   `
   const LabelSlotWrapper = styled('div', inputProps)`
     display: flex;
     gap: 10px;
     align-items: center;
-    cursor: ${(props) => (props.isInteractive ? 'ew-resize' : 'auto')};
+    cursor: ${(props) =>
+      props.isDisabled
+        ? 'not-allowed'
+        : props.isInteractive
+        ? 'ew-resize'
+        : 'auto'};
     border: ${(props) =>
       props.alignItems == 'vertical'
         ? 'none'
@@ -760,12 +765,18 @@
         }
       },
       initInteraction(e) {
+        if (this.disabled) {
+          return
+        }
         this.focusInput()
         e.preventDefault()
         window.addEventListener('mousemove', this.interact, false)
         window.addEventListener('mouseup', this.stopInteract, false)
       },
       interact(e) {
+        if (this.disabled) {
+          return
+        }
         e.preventDefault()
         let value = parseFloat(this.value || 0)
         value += parseFloat(this.interactionStep) * parseInt(e.movementX)

package/src/components/inputs/inputText/InputText.stories.js

@@ -4,73 +4,67 @@ export default {
   title: 'InputText',
   component: InputText,
   tags: ['autodocs'],
-  // argTypes: {},
 }
 
-const Template = (args, { argTypes }) => ({
-  // Components used in your story `template` are defined in the `components` object
-  components: { InputText },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  props: Object.keys(argTypes),
-  template: '<input-text v-bind="$props" />',
+// 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"
+//   alignItems="horizontal" // horizontal, vertical
+//   inputWidth="250px"
+//   minWidth="100px"
+// />
 
-  // 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"
-  //   alignItems="horizontal" // horizontal, vertical
-  //   inputWidth="250px"
-  //   minWidth="100px"
-  // />
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  placeholder: 'Company name',
-  disabled: false,
-  value: '',
-  inputWidth: '200px',
-  minWidth: '10ch',
-  unitName: 'pc',
-  isError: false,
-  textAlign: 'left',
+export const Default = {
+  args: {
+    placeholder: 'Company name',
+    disabled: false,
+    value: '',
+    inputWidth: '200px',
+    minWidth: '10ch',
+    isError: false,
+    label: 'label test',
+    labelOptional: true,
+  },
 }
 
-export const HasError = Template.bind({})
-HasError.args = {
-  placeholder: 'Enter Value',
-  errorMessage: 'This field is required',
-  isError: true,
-  disabled: false,
-  inputWidth: '200px',
+export const HasError = {
+  args: {
+    placeholder: 'Enter Value',
+    errorMessage: 'This field is required',
+    isError: true,
+    disabled: false,
+    inputWidth: '200px',
+  },
 }
 
-export const Disabled = Template.bind({})
-Disabled.args = {
-  placeholder: 'Enter Value',
-  disabled: true,
-  value: '',
-  inputWidth: '200px',
-  isError: false,
+export const Disabled = {
+  args: {
+    placeholder: 'Enter Value',
+    disabled: true,
+    value: '',
+    inputWidth: '200px',
+    isError: false,
+  },
 }
 
-export const WithLabel = Template.bind({})
-WithLabel.args = {
-  placeholder: 'Company name',
-  disabled: false,
-  label: 'What is the best company in Switzerland?',
-  value: 'Eturnity',
-  inputWidth: '200px',
-  unitName: 'pc',
-  isError: false,
-  errorMessage: 'Maximum 5 characters',
-  textAlign: 'left',
-  alignItems: 'vertical',
+export const WithLabel = {
+  args: {
+    placeholder: 'Company name',
+    disabled: false,
+    label: 'What is the best company in Switzerland?',
+    value: 'Eturnity',
+    inputWidth: '200px',
+    unitName: 'pc',
+    isError: false,
+    errorMessage: 'Maximum 5 characters',
+    alignItems: 'vertical',
+  },
 }

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

@@ -43,6 +43,7 @@
             buttonBgColor || colorMode == 'dark' ? 'transparentBlack1' : 'white'
           "
           class="select-button"
+          :color-mode="colorMode"
           :data-id="dataId"
           :disabled="disabled"
           :font-color="
@@ -274,6 +275,7 @@
     noRelative: Boolean,
     tablePaddingLeft: String,
     showDisabledBackground: Boolean,
+    colorMode: String,
   }
   const SelectButton = styled('div', selectButtonAttrs)`
     position: ${(props) => (props.noRelative ? 'static' : 'relative')};
@@ -311,12 +313,16 @@
   `}
     background-color:${(props) =>
       props.disabled && props.showDisabledBackground
-        ? props.theme.colors.grey5
+        ? props.colorMode == 'dark'
+          ? props.theme.transparentBlack1
+          : props.theme.colors.grey5
         : props.theme.colors[props.bgColor]
         ? props.theme.colors[props.bgColor]
         : props.bgColor};
     color: ${(props) =>
-      props.theme.colors[props.fontColor]
+      props.disabled
+        ? props.theme.colors.grey2
+        : props.theme.colors[props.fontColor]
         ? props.theme.colors[props.fontColor]
         : props.fontColor};
     ${(props) => (props.disabled ? 'pointer-events: none' : '')};
@@ -613,7 +619,7 @@
         if (this.isDropdownOpen) {
           return this.$refs.dropdown.$el.childElementCount > 1
             ? this.$refs.dropdown.$el.childElementCount
-            : !!this.$refs.dropdown.$el.children[0]
+            : this.$refs.dropdown.$el.children[0]
             ? this.$refs.dropdown.$el.children[0].childElementCount
             : 0
         }

package/src/assets/svgIcons/compass.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" fill="#333" viewBox="0 0 29 29"><path d="m10.5 14 4-8 4 8z"/><path class='fix' fill="#ccc" d="m10.5 16 4 8 4-8z"/></svg>

package/src/assets/svgIcons/pause.svg

@@ -1,6 +0,0 @@
-<svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
-	 viewBox="0 0 512 512" xml:space="preserve">
-<path d="M256,0C114.617,0,0,114.615,0,256s114.617,256,256,256s256-114.615,256-256S397.383,0,256,0z M224,320
-	c0,8.836-7.164,16-16,16h-32c-8.836,0-16-7.164-16-16V192c0-8.836,7.164-16,16-16h32c8.836,0,16,7.164,16,16V320z M352,320
-	c0,8.836-7.164,16-16,16h-32c-8.836,0-16-7.164-16-16V192c0-8.836,7.164-16,16-16h32c8.836,0,16,7.164,16,16V320z"/>
-</svg>

package/src/components/roundTabs/index.vue

@@ -1,107 +0,0 @@
-<template>
-  <ContainerComponent>
-    <RoundedTabLeft
-      :background-color="backgroundColor"
-      :border-radius="borderRadius"
-    />
-    <TabComponent
-      :background-color="backgroundColor"
-      :border-radius="borderRadius"
-      :height="height"
-      :width="width"
-    >
-      <slot></slot>
-    </TabComponent>
-    <RoundedTabRight
-      :background-color="backgroundColor"
-      :border-radius="borderRadius"
-    />
-  </ContainerComponent>
-</template>
-<script>
-  import styled from 'vue3-styled-components'
-
-  const ContainerComponent = styled.div`
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  `
-  const RoundedTabLeft = styled('div', {
-    backgroundColor: String,
-    borderRadius: String,
-  })`
-    position:absolute;
-    bottom:0;
-    left:-${(prop) => prop.borderRadius}
-    background-color: ${(prop) => prop.backgroundColor};
-    width: ${(prop) => prop.borderRadius};
-    height: ${(prop) => prop.borderRadius};
-    -webkit-mask-image: radial-gradient(
-      circle at top left,
-      transparent 71%,
-      black 71%
-    );
-  `
-  const RoundedTabRight = styled('div', {
-    backgroundColor: String,
-    borderRadius: String,
-  })`
-  position:absolute;
-  bottom:0;
-    right:-${(prop) => prop.borderRadius}
-    background-color: ${(prop) => prop.backgroundColor};
-    width: ${(prop) => prop.borderRadius};
-    height: ${(prop) => prop.borderRadius};
-    -webkit-mask-image: radial-gradient(
-      circle at top right,
-      transparent 71%,
-      black 71%
-    );`
-  const TabComponent = styled('div', {
-    width: String,
-    height: String,
-    backgroundColor: String,
-    borderRadius: String,
-  })`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: ${(prop) => prop.backgroundColor};
-    width: ${(prop) => prop.width};
-    height: ${(prop) => prop.height};
-    border-radius: ${(prop) => prop.borderRadius} ${(prop) => prop.borderRadius}
-      0 0;
-  `
-  export default {
-    name: 'RoundTabs',
-    components: {
-      ContainerComponent,
-      TabComponent,
-      RoundedTabLeft,
-      RoundedTabRight,
-    },
-    props: {
-      height: {
-        required: false,
-        default: '40px',
-        type: String,
-      },
-      width: {
-        required: false,
-        default: '200px',
-        type: String,
-      },
-      backgroundColor: {
-        required: false,
-        default: 'white',
-        type: String,
-      },
-      borderRadius: {
-        required: false,
-        default: '20px',
-        type: String,
-      },
-    },
-  }
-</script>