@eturnity/eturnity_reusable_components 7.39.5-qa-elisee-7.42.1 → 7.45.0-EPDM-4900.0

package/src/components/infoText/placeholder.vue

@@ -0,0 +1,225 @@
+<template>
+  <ComponentWrapper>
+    <IconWrapper :size="size">
+      <IconImg
+        ref="iconImg"
+        @click.prevent="toggleShowInfo()"
+        @mouseenter="openTrigger == 'onHover' ? toggleShowInfo() : ''"
+        @mouseleave="openTrigger == 'onHover' ? toggleShowInfo() : ''"
+      >
+        <IconComponent
+          :color="iconColor"
+          cursor="pointer"
+          name="info"
+          :size="size"
+        />
+      </IconImg>
+      <TextOverlay
+        v-if="showInfo"
+        :arrow-position="arrowPosition"
+        :icon-size="size"
+        :max-width="maxWidth"
+        :position="overlayPosition"
+        :style="overlayStyle"
+        :width="width"
+        ><slot></slot>
+        <span v-html="text"></span>
+      </TextOverlay>
+    </IconWrapper>
+  </ComponentWrapper>
+</template>
+
+<script>
+  // import InfoText from "@eturnity/eturnity_reusable_components/src/components/infoText"
+  //To use:
+  // <info-text
+  //     text="Veritatis et quasi architecto beatae vitae"
+  //     size="20px"
+  // />
+  import theme from '../../assets/theme.js'
+  import styled from 'vue3-styled-components'
+  import IconComponent from '../icon'
+
+  const textAttrs = {
+    iconSize: String,
+    width: String,
+    position: String,
+    arrowPosition: String,
+  }
+  const TextOverlay = styled('div', textAttrs)`
+    position: absolute;
+    text-align: left;
+    background: ${(props) => props.theme.colors.black};
+    padding: 10px;
+    width: ${(props) => props.width};
+    max-width: ${(props) => props.maxWidth};
+    font-size: 13px;
+    font-weight: 400;
+    line-height: normal;
+    border-radius: 4px;
+    z-index: 9999;
+    color: ${(props) => props.theme.colors.white};
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+
+    :before {
+      content: '';
+      background-color: ${(props) => props.theme.colors.black};
+      position: absolute;
+      ${(props) => (props.position === 'top' ? 'bottom: -4px;' : 'top: -4px;')}
+      ${(props) => {
+        switch (props.arrowPosition) {
+          case 'left':
+            return 'left: 40px;'
+          case 'center':
+            return 'left: calc(50% - 4px);'
+          case 'right':
+            return 'right: 40px;'
+          default:
+            return 'left: calc(50% - 4px);'
+        }
+      }}
+      height: 8px;
+      width: 8px;
+      transform-origin: center center;
+      transform: rotate(45deg);
+    }
+
+    span a {
+      color: #2cc0eb;
+    }
+  `
+
+  const iconAttrs = { size: String }
+  const IconWrapper = styled('div', iconAttrs)`
+    position: relative;
+    height: ${(props) => props.size};
+  `
+
+  const IconImg = styled.div`
+    line-height: 0;
+  `
+
+  const ComponentWrapper = styled.div`
+    display: inline-block;
+  `
+
+  export default {
+    name: 'InfoText',
+    components: {
+      IconWrapper,
+      TextOverlay,
+      ComponentWrapper,
+      IconImg,
+      IconComponent,
+    },
+    props: {
+      text: {
+        required: false,
+      },
+      size: {
+        required: false,
+        default: '14px',
+      },
+      openTrigger: {
+        required: false,
+        default: 'onHover', // onHover, onClick
+      },
+      width: {
+        required: false,
+        default: '200px',
+      },
+      maxWidth: {
+        type: String,
+        default: '400px',
+      },
+    },
+    data() {
+      return {
+        showInfo: false,
+        overlayStyle: {},
+        overlayPosition: 'top',
+        arrowPosition: 'center',
+      }
+    },
+    computed: {
+      iconColor() {
+        return theme.colors.mediumGray
+      },
+    },
+    mounted() {
+      window.addEventListener('resize', this.positionOverlay)
+    },
+    beforeUnmount() {
+      window.removeEventListener('resize', this.positionOverlay)
+    },
+    methods: {
+      toggleShowInfo() {
+        this.showInfo = !this.showInfo
+
+        if (this.showInfo) {
+          document.addEventListener('click', this.clickOutside)
+          this.$nextTick(() => {
+            this.positionOverlay()
+          })
+        } else {
+          document.removeEventListener('click', this.clickOutside)
+        }
+      },
+      clickOutside(event) {
+        if (this.$el.contains(event.target)) {
+          return
+        }
+        this.toggleShowInfo()
+      },
+      positionOverlay() {
+        const iconRect = this.$refs.iconImg.getBoundingClientRect()
+        const overlayRect = this.$el
+          .querySelector('.TextOverlay')
+          .getBoundingClientRect()
+
+        let top, left
+
+        // Check if there's enough space above the icon
+        if (
+          iconRect.top > overlayRect.height + 10 &&
+          iconRect.top > window.innerHeight / 2
+        ) {
+          top = -overlayRect.height - 10
+          this.overlayPosition = 'top'
+        } else {
+          // If not, position it below the icon
+          top = iconRect.height + 10
+          this.overlayPosition = 'bottom'
+        }
+
+        left = -(overlayRect.width / 2) + iconRect.width / 2
+
+        // Ensure the overlay doesn't go off-screen horizontally
+        if (iconRect.left + left < 0) {
+          left = -iconRect.left
+          this.arrowPosition = 'left'
+        } else if (
+          iconRect.left + left + overlayRect.width >
+          window.innerWidth
+        ) {
+          left = window.innerWidth - (iconRect.left + overlayRect.width)
+          this.arrowPosition = 'right'
+        } else {
+          this.arrowPosition = 'center'
+        }
+
+        // Adjust vertical position if it goes off-screen
+        const totalHeight = iconRect.top + top + overlayRect.height
+        if (totalHeight > window.innerHeight) {
+          top -= totalHeight - window.innerHeight + 10
+        }
+
+        this.overlayStyle = {
+          top: `${top}px`,
+          left: `${left}px`,
+        }
+      },
+    },
+  }
+</script>

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

@@ -3,68 +3,73 @@ import InputText from './index.vue'
 export default {
   title: 'InputText',
   component: InputText,
-  tags: ['autodocs'],
+  // argTypes: {},
 }
 
-// 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"
-// />
+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" />',
 
-export const Default = {
-  args: {
-    placeholder: 'Company name',
-    disabled: false,
-    value: '',
-    inputWidth: '200px',
-    minWidth: '10ch',
-    isError: false,
-    label: 'label test',
-    labelOptional: true,
-  },
+  // 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 HasError = {
-  args: {
-    placeholder: 'Enter Value',
-    errorMessage: 'This field is required',
-    isError: true,
-    disabled: false,
-    inputWidth: '200px',
-  },
+export const hasError = Template.bind({})
+hasError.args = {
+  placeholder: 'Enter Value',
+  errorMessage: 'This field is required',
+  isError: true,
+  disabled: false,
+  inputWidth: '200px',
 }
 
-export const Disabled = {
-  args: {
-    placeholder: 'Enter Value',
-    disabled: true,
-    value: '',
-    inputWidth: '200px',
-    isError: false,
-  },
+export const Disabled = Template.bind({})
+Disabled.args = {
+  placeholder: 'Enter Value',
+  disabled: true,
+  value: '',
+  inputWidth: '200px',
+  isError: false,
 }
 
-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',
-  },
+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',
 }

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

@@ -2,26 +2,22 @@
   <Container>
     <InputWrapper
       :align-items="alignItems"
-      data-test-id="input_wrapper"
       :has-label="!!label && label.length > 0"
     >
       <LabelWrapper v-if="label">
         <InputLabel
-          ref="label"
           :data-id="labelDataId"
-          data-test-id="label_wrapper"
           :font-size="fontSize"
           :label-font-color="labelFontColor"
         >
           {{ label }}
-          <OptionalLabel v-if="labelOptional" data-test-id="label_optional">
+          <OptionalLabel v-if="labelOptional">
             ({{ $gettext('Optional') }})
           </OptionalLabel>
         </InputLabel>
         <InfoText
-          v-if="infoTextMessage != ''"
+          v-if="infoTextMessage"
           :align-arrow="infoTextAlign"
-          data-test-id="info_text_message"
           :size="fontSize ? fontSize : '16px'"
           :text="infoTextMessage"
         />
@@ -32,7 +28,6 @@
             ref="inputElement"
             :background-color="backgroundColor"
             :data-id="inputDataId"
-            data-test-id="input"
             :disabled="disabled"
             :disabled-background-color="disabledBackgroundColor"
             :font-color="fontColor"
@@ -49,26 +44,21 @@
             :type="inputTypeData"
             :value="value"
             @blur="onInputBlur"
-            @focus="onInputFocus"
             @input="onChangeHandler"
             @keyup.enter="onEnterPress"
           />
           <IconWrapper
             v-if="inputType === 'password' && !isError"
-            data-test-id="password_visiblity_change_icon"
             size="20px"
             @click="toggleShowPassword()"
           >
             <Icon name="current_variant" size="20px" />
           </IconWrapper>
-          <IconWrapper v-if="hasError" data-test-id="error_wrapper" size="16px">
+          <IconWrapper v-if="hasError" size="16px">
             <Icon cursor="default" name="warning" size="16px" />
           </IconWrapper>
         </IconContainer>
-        <ErrorMessage
-          v-if="hasError && hasErrorMessage"
-          data-test-id="error_message_wrapper"
-        >
+        <ErrorMessage v-if="hasError && hasErrorMessage">
           {{ dynamicErrorMessage }}
         </ErrorMessage>
       </InputErrorWrapper>
@@ -246,123 +236,93 @@
       placeholder: {
         required: false,
         default: '',
-        type: String,
       },
       alignItems: {
         required: false,
         default: 'horizontal',
-        type: String,
-        validator(value) {
-          return ['horizontal', 'vertical'].includes(value)
-        },
       },
       isError: {
         required: false,
         default: false,
-        type: Boolean,
       },
       inputWidth: {
         required: false,
         default: null,
-        type: String,
       },
       inputHeight: {
         required: false,
         default: null,
-        type: String,
       },
       minWidth: {
         required: false,
         default: null,
-        type: String,
       },
       value: {
         required: true,
         default: null,
-        type: String,
       },
       errorMessage: {
         required: false,
         default: '',
-        type: String,
       },
       infoTextMessage: {
         required: false,
-        default: '',
-        type: String,
       },
       infoTextAlign: {
         required: false,
-        default: 'left',
-        type: String,
       },
       label: {
         required: false,
-        default: '',
-        type: String,
       },
       labelOptional: {
         required: false,
         default: false,
-        type: Boolean,
       },
       noBorder: {
         required: false,
         default: false,
-        type: Boolean,
       },
       disabled: {
         required: false,
         default: false,
-        type: Boolean,
       },
       fontSize: {
         required: false,
         default: null,
-        type: String,
       },
       inputType: {
         required: false,
         default: 'text',
-        type: String,
       },
       labelFontColor: {
         required: false,
         default: 'black',
-        type: String,
       },
       backgroundColor: {
         required: false,
-        type: String,
       },
       disabledBackgroundColor: {
         required: false,
         default: null,
-        type: String,
       },
       fontColor: {
         required: false,
         default: 'black',
-        type: String,
       },
       hasFocus: {
         required: false,
         default: false,
-        type: Boolean,
       },
       borderColor: {
         required: false,
-        type: String,
       },
       labelDataId: {
         required: false,
         default: '',
-        type: String,
       },
       inputDataId: {
         required: false,
         default: '',
-        type: String,
       },
     },
     data() {
@@ -375,10 +335,12 @@
         return this.isError || this.error
       },
       hasErrorMessage() {
-        return this.errorMessage && this.errorMessage.length > 0
+        return (
+          (this.errorMessage && this.errorMessage.length > 0) || this.errMessage
+        )
       },
       dynamicErrorMessage() {
-        return this.errorMessage
+        return this.errMessage || this.errorMessage
       },
     },
     watch: {
@@ -405,9 +367,6 @@
         this.validateInput($event.target.value)
         this.$emit('input-blur', $event.target.value)
       },
-      onInputFocus($event) {
-        this.$emit('input-focus', $event.target.value)
-      },
       toggleShowPassword() {
         this.inputTypeData =
           this.inputTypeData === 'password' ? 'text' : 'password'

package/src/components/inputs/radioButton/RadioButton.stories.js

@@ -1,58 +1,77 @@
+import { useArgs } from '@storybook/preview-api'
+import { action } from '@storybook/addon-actions'
+import defaultRadioButtonProps from './defaultProps'
 import RadioButton from './index.vue'
 
 export default {
   title: 'RadioButton',
   component: RadioButton,
-  // argTypes: {},
+  tags: ['autodocs'],
 }
 
-const Template = (args, { argTypes }) => ({
-  // Components used in your story `template` are defined in the `components` object
-  components: { RadioButton },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  props: Object.keys(argTypes),
-  template: '<radio-button v-bind="$props" />',
-
-  // import RadioButton from "@eturnity/eturnity_reusable_components/src/components/inputs/radioButton"
-  // To use:
-  // <radio-button
-  //     :options="radioOptions"
-  //     :selectedOption="checkedOption"
-  //     @on-radio-change="onInputChange($event)"
-  //     layout="vertical"
-  //     size="large"
-  //   />
-  // Data being passed should look like:
-  // radioOptions: [
-  // { label: 'Button 1', value: 'button_1', img: 'www.imagesrc.com', infoText: 'my info text' },
-  // { label: 'Button 2', value: 'button_2', img: 'www.imagesrc.com', infoText: 'my info text 2' },
-  // { label: 'Button 3', value: 'button_3', img: 'www.imagesrc.com', disabled: true },
-  // { label: 'Button 4', value: 'button_4', disabled: true }
-  // ]
-})
+// To use:
+// import RadioButton from "@eturnity/eturnity_reusable_components/src/components/inputs/radioButton"
+// <radio-button
+//     checkmarkColor="red"
+//     dataId="radio_button"
+//     layout="horizontal" //2 options: 'vertical' (only 1 per row) & 'horizontal' (many per row)
+//     name="Name for Radio buttons"
+//     :options="radioOptions"
+//     :selectedOption="checkedOption"
+//     size="medium" // small, medium, large
+//     @on-radio-change="onInputChange($event)"
+//   />
+// Data being passed should look like:
+// radioOptions: [
+//  { label: 'Option 1', value: 'option_1', img: 'www.imagesrc.com', infoText: 'my info text' },
+//  { label: 'Option 2', value: 'option_2', img: 'www.imagesrc.com', infoText: 'my info text 2' },
+//  { label: 'Option 3', value: 'option_3', img: 'www.imagesrc.com', disabled: true },
+//  { label: 'Option 4', value: 'option_4', disabled: true }
+// ]
+
+const defaultProps = defaultRadioButtonProps
+
+const Template = (args) => {
+  const [currentArgs, updateArgs] = useArgs()
+
+  const handleRadioChange = ($event) => {
+    action('on-radio-change')($event)
+    updateArgs({ selectedOption: $event })
+  }
+
+  return {
+    components: { RadioButton },
+    setup() {
+      return { args: currentArgs, handleRadioChange }
+    },
+    template: `
+      <RadioButton
+        v-bind="args"
+        @on-radio-change="handleRadioChange"
+      />
+    `,
+  }
+}
 
 export const Default = Template.bind({})
 Default.args = {
-  options: [
-    { label: 'Button 1', value: 'button_1', infoText: 'my info text' },
-    { label: 'Button 2', value: 'button_2', infoText: 'my info text 2' },
-    { label: 'Button 3', value: 'button_3', disabled: true },
-    { label: 'Button 4', value: 'button_4', disabled: true },
-  ],
-  selectedOption: 'button_2',
-  layout: 'horizontal',
-  size: 'medium',
+  ...defaultProps,
+}
+
+export const BlueCheckmark = Template.bind({})
+BlueCheckmark.args = {
+  ...defaultProps,
+  checkmarkColor: '#00f',
+}
+
+export const Small = Template.bind({})
+Small.args = {
+  ...defaultProps,
+  size: 'small',
 }
 
-export const VerticalLayout = Template.bind({})
-VerticalLayout.args = {
-  options: [
-    { label: 'Button 1', value: 'button_1' },
-    { label: 'Button 2', value: 'button_2' },
-    { label: 'Button 3', value: 'button_3' },
-    { label: 'Button 4', value: 'button_4', disabled: true },
-  ],
-  selectedOption: 'button_2',
+export const Vertical = Template.bind({})
+Vertical.args = {
+  ...defaultProps,
   layout: 'vertical',
-  size: 'medium',
 }