@eturnity/eturnity_reusable_components 6.48.2 → 6.50.1-EPDM-9012.0

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

@@ -1,7 +1,12 @@
 <template>
   <component-wrapper :layout="layout">
     <radio-wrapper v-for="(item, index) in options" :key="item.value">
-      <label-container :size="size" :isDisabled="item.disabled" :isChecked="selectedOption === item.value" :checkmarkColor="checkmarkColor">
+      <label-container
+        :size="size"
+        :isDisabled="item.disabled"
+        :isChecked="selectedOption === item.value"
+        :checkmarkColor="checkmarkColor"
+      >
         <radio
           type="radio"
           :value="selectedOption"
@@ -9,6 +14,7 @@
           :name="'radioButtons_' + radioName"
           :checked="selectedOption === item.value"
           :disabled="item.disabled"
+          :data-id="`radio_button_${dataId}_option_${item.value}`"
         />
         <span class="checkmark"></span>
         <label-text :isDisabled="item.disabled">{{ item.label }}</label-text>
@@ -54,17 +60,17 @@
 //   { label: 'Button 4', value: 'button_4', disabled: true }
 // ]
 
-import styled from "vue-styled-components"
-import Modal from "../../modals/modal"
-import InfoText from "../../infoText"
+import styled from 'vue-styled-components'
+import Modal from '../../modals/modal'
+import InfoText from '../../infoText'
 
 const wrapperProps = {
-  layout: String,
+  layout: String
 }
-const ComponentWrapper = styled("div", wrapperProps)`
+const ComponentWrapper = styled('div', wrapperProps)`
   display: flex;
   flex-direction: ${(props) =>
-    props.layout === "vertical" ? "column" : "row"};
+    props.layout === 'vertical' ? 'column' : 'row'};
   grid-gap: 10px 5px;
   flex-wrap: wrap;
 `
@@ -83,8 +89,13 @@ const RadioWrapper = styled.div`
   grid-gap: 10px;
 `
 
-const containerProps = { size: String, isDisabled: Boolean, isChecked: Boolean, checkmarkColor: String }
-const LabelContainer = styled("label", containerProps)`
+const containerProps = {
+  size: String,
+  isDisabled: Boolean,
+  isChecked: Boolean,
+  checkmarkColor: String
+}
+const LabelContainer = styled('label', containerProps)`
   display: grid;
   grid-template-columns: auto 1fr auto;
   grid-gap: 15px;
@@ -92,30 +103,30 @@ const LabelContainer = styled("label", containerProps)`
   color: ${(props) =>
     props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
   position: relative;
-  cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
+  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
   font-size: ${(props) =>
-    props.size === "large"
-      ? "16px"
-      : props.size === "medium"
-        ? "13px"
-        : "10px"};
+    props.size === 'large'
+      ? '16px'
+      : props.size === 'medium'
+      ? '13px'
+      : '10px'};
   user-select: none;
   flex: auto;
   align-self: baseline;
 
   .checkmark {
     height: ${(props) =>
-      props.size === "large"
-        ? "23px"
-        : props.size === "medium"
-          ? "16px"
-          : "12px"};
+      props.size === 'large'
+        ? '23px'
+        : props.size === 'medium'
+        ? '16px'
+        : '12px'};
     width: ${(props) =>
-      props.size === "large"
-        ? "23px"
-        : props.size === "medium"
-          ? "16px"
-          : "12px"};
+      props.size === 'large'
+        ? '23px'
+        : props.size === 'medium'
+        ? '16px'
+        : '12px'};
     background-color: #fff;
     border-radius: 100%;
     border: 1px solid ${(props) => props.theme.colors.mediumGray};
@@ -124,28 +135,29 @@ const LabelContainer = styled("label", containerProps)`
     justify-content: center;
 
     &:after {
-      content: "";
-      display: ${(props) => props.isChecked ? 'block' : 'none'};
+      content: '';
+      display: ${(props) => (props.isChecked ? 'block' : 'none')};
       width: ${(props) =>
-        props.size === "large"
-          ? "10px"
-          : props.size === "medium"
-            ? "8px"
-            : "6px"};
+        props.size === 'large'
+          ? '10px'
+          : props.size === 'medium'
+          ? '8px'
+          : '6px'};
       height: ${(props) =>
-        props.size === "large"
-          ? "10px"
-          : props.size === "medium"
-            ? "8px"
-            : "6px"};
+        props.size === 'large'
+          ? '10px'
+          : props.size === 'medium'
+          ? '8px'
+          : '6px'};
       border-radius: 100%;
-      background: ${(props) => props.checkmarkColor ? props.checkmarkColor : props.theme.colors.green};
+      background: ${(props) =>
+        props.checkmarkColor ? props.checkmarkColor : props.theme.colors.green};
     }
   }
 `
 
 const textAttrs = { isDisabled: Boolean }
-const LabelText = styled("div", textAttrs)`
+const LabelText = styled('div', textAttrs)`
   color: ${(props) =>
     props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
 `
@@ -186,7 +198,7 @@ const ModalImageContainer = styled.div`
 `
 
 export default {
-  name: "radio-button",
+  name: 'radio-button',
   components: {
     Radio,
     ComponentWrapper,
@@ -198,24 +210,24 @@ export default {
     ModalImage,
     ModalImageContainer,
     InfoText,
-    LabelText,
+    LabelText
   },
   props: {
     selectedOption: {
       required: true,
-      default: false,
+      default: false
     },
     options: {
       required: true,
-      default: [],
+      default: []
     },
     layout: {
       required: false,
-      default: "horizontal", //2 options: 'vertical' (only 1 per row) & 'horizontal' (many per row)
+      default: 'horizontal' //2 options: 'vertical' (only 1 per row) & 'horizontal' (many per row)
     },
     size: {
       required: false,
-      default: "medium", // small, medium, large
+      default: 'medium' // small, medium, large
     },
     name: {
       required: false,
@@ -224,6 +236,10 @@ export default {
     checkmarkColor: {
       required: false,
       default: ''
+    },
+    dataId: {
+      type: String,
+      default: 'key'
     }
   },
   data() {
@@ -234,17 +250,18 @@ export default {
   },
   methods: {
     onInputHandler(value) {
-      this.$emit("on-radio-change", value)
+      this.$emit('on-radio-change', value)
     },
     isImageOpen(index) {
       return this.selectedImage === index
     },
     toggleImageModal(value) {
       this.selectedImage = value
-    },
+    }
   },
   created() {
-    this.radioName = this.name.length === 0 ? Math.round(Math.random() * 10000) : this.name
-  },
+    this.radioName =
+      this.name.length === 0 ? Math.round(Math.random() * 10000) : this.name
+  }
 }
 </script>

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

@@ -22,9 +22,7 @@
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          borderColor="#ccc"
           :size="fontSize ? fontSize : '16px'"
-          :alignText="infoTextAlign"
         />
       </label-wrapper>
       <select-button-wrapper :disabled="disabled">
@@ -313,9 +311,6 @@ export default {
     infoTextMessage: {
       required: false
     },
-    infoTextAlign: {
-      required: false
-    },
     selectWidth: {
       required: false,
       default: null
@@ -492,10 +487,14 @@ export default {
       this.toggleDropdown()
     },
     clickOutside(event) {
+      const dropdownRef = this.$refs.dropdown
+      // we need to prevent closing on selecting an option, because in the case of
+      // a disabled option, we don't want to close the dropdown
       if (!this.isClickOutsideActive) return
       if (
         this.$refs.select.$el == event.target ||
-        this.$refs.select.$el.contains(event.target)
+        this.$refs.select.$el.contains(event.target) ||
+        event.target.parentNode === dropdownRef.$el
       ) {
         return
       } else {

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

@@ -1,10 +1,18 @@
 <template>
   <optionContainer
     :data-value="value"
-    :hoveredBgColor="colorMode == 'dark' ? '#000000' : 'hoveredBgColor'"
-    :backgroundColor="colorMode == 'dark' ? 'eturnityGrey' : '#fff'"
+    :hoveredBgColor="
+      colorMode == 'dark'
+        ? '#000000'
+        : hoveredBgColor
+        ? hoveredBgColor
+        : 'grey5'
+    "
     @click="clickHandler"
     @mouseover="hoverHandler"
+    :cursorType="cursorType"
+    :backgroundColor="colorMode == 'dark' ? '#000000' : backgroundColor"
+    :title="hoverText"
   >
     <slot></slot>
   </optionContainer>
@@ -14,18 +22,29 @@
 //   import selectButton from './selectButton'
 //   import selectDropdown from './selectDropDown'
 import styled from 'vue-styled-components'
-const optionProps = { hoveredBgColor: String, backgroundColor: String }
+const optionProps = {
+  hoveredBgColor: String,
+  cursorType: String,
+  backgroundColor: String
+}
 const optionContainer = styled('div', optionProps)`
   display: flex;
-  cursor: pointer;
+  cursor: ${(props) => props.cursorType};
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   padding: 12px 10px;
   gap: 14px;
   width: 100%;
-  background-color: ${(props) => props.theme.colors[props.backgroundColor]?props.theme.colors[props.backgroundColor]:props.backgroundColor};
+  background-color: ${(props) =>
+    props.theme.colors[props.backgroundColor]
+      ? props.theme.colors[props.backgroundColor]
+      : props.backgroundColor};
   box-sizing: inherit;
+  background-color: ${(props) =>
+    props.theme.colors[props.backgroundColor]
+      ? props.theme.colors[props.backgroundColor]
+      : props.backgroundColor};
   &:hover {
     background-color: ${(props) =>
       props.theme.colors[props.hoveredBgColor]
@@ -47,6 +66,21 @@ export default {
     colorMode: {
       required: false,
       default: 'light'
+    },
+    cursorType: {
+      required: false,
+      default: 'cursor'
+    },
+    backgroundColor: {
+      required: false,
+      default: 'white'
+    },
+    hoverText: {
+      required: false
+    },
+    isDisabled: {
+      required: false,
+      default: false
     }
   },
 
@@ -57,7 +91,12 @@ export default {
   },
   methods: {
     clickHandler() {
-      this.$parent.$emit('option-selected', this.value)
+      if (this.isDisabled) {
+        // prevent emitter if the option is disabled
+        return
+      } else {
+        this.$parent.$emit('option-selected', this.value)
+      }
     },
     hoverHandler() {
       this.$parent.$emit('option-hovered', this.value)

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

@@ -15,9 +15,6 @@
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          borderColor="#ccc"
-          size="14px"
-          :alignText="infoTextAlign"
         />
       </label-container>
 
@@ -48,9 +45,6 @@
           @click.native.stop
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          borderColor="#ccc"
-          size="14px"
-          :alignText="infoTextAlign"
         />
       </label-container>
     </flex-wrapper>
@@ -202,9 +196,6 @@ export default {
     infoTextMessage: {
       required: false
     },
-    infoTextAlign: {
-      required: false
-    },
     colorMode: {
       required: false,
       default: 'light'

package/src/components/inputs/textAreaInput/TextAreaInput.stories.js

@@ -22,7 +22,6 @@ const Template = (args, { argTypes }) => ({
   //     rowHeight="4" //optional
   //     :isError="false"
   //     :errorText="$gettext('field_required')"
-  //     infoTextAlign="right" // left by default
   //     infoTextMessage="My info message"
   //     label="Question 5"
   //     alignItems="horizontal" // horizontal, vertical
@@ -37,7 +36,6 @@ Default.args = {
   rowHeight: "2",
   isError: false,
   errorText: "This field is required",
-  infoTextAlign: "right",
   infoTextMessage: "",
   label: "",
   value: "",
@@ -52,7 +50,6 @@ Disabled.args = {
   rowHeight: "2",
   isError: false,
   errorText: "This field is required",
-  infoTextAlign: "right",
   infoTextMessage: "",
   label: "",
   value: "",
@@ -67,7 +64,6 @@ Error.args = {
   rowHeight: "2",
   isError: true,
   errorText: "This field is required",
-  infoTextAlign: "right",
   infoTextMessage: "",
   label: "",
   value: "",
@@ -82,7 +78,6 @@ WithLabel.args = {
   rowHeight: "2",
   isError: false,
   errorText: "This field is required",
-  infoTextAlign: "right",
   infoTextMessage: "Here is some information",
   label: "Description",
   value: "Here is my description!",
@@ -97,7 +92,6 @@ HorizontalLabel.args = {
   rowHeight: "2",
   isError: false,
   errorText: "This field is required",
-  infoTextAlign: "right",
   infoTextMessage: "Here is some information",
   label: "Description",
   value: "Here is my description!",
@@ -112,7 +106,6 @@ LargerTextArea.args = {
   rowHeight: "5",
   isError: false,
   errorText: "This field is required",
-  infoTextAlign: "right",
   infoTextMessage: "Here is some information",
   label: "Description",
   value: "Here is my description!",
@@ -127,7 +120,6 @@ LargerFontSize.args = {
   fontSize: "24px",
   isError: false,
   errorText: "This field is required",
-  infoTextAlign: "right",
   infoTextMessage: "Here is some information",
   label: "Description",
   value: "Here is my description!",

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

@@ -11,9 +11,7 @@
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          borderColor="#ccc"
           size="16px"
-          :alignText="infoTextAlign"
         />
       </label-wrapper>
       <input-container
@@ -47,7 +45,6 @@
 //     rowHeight="4" //optional
 //     :isError="false"
 //     :errorText="$gettext('field_required')"
-//     infoTextAlign="right" // left by default
 //     infoTextMessage="My info message"
 //     label="Question 5"
 //     alignItems="horizontal" // horizontal, vertical
@@ -167,9 +164,6 @@ export default {
     infoTextMessage: {
       required: false
     },
-    infoTextAlign: {
-      required: false
-    },
     label: {
       required: false
     },