@eturnity/eturnity_reusable_components 8.31.5-EPDM-16219.1 → 8.31.5-EPDM-13818.1

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

@@ -24,7 +24,6 @@
 
       <LabelText v-if="hasLabel" :is-disabled="isDisabled">
         {{ label }}
-        <IsRequiredLabelStar v-if="isRequiredLabel" />
       </LabelText>
     </Container>
   </ComponentWrapper>
@@ -44,7 +43,7 @@
   //     cursorType="default"
   // />
   import styled from 'vue3-styled-components'
-  import IsRequiredLabelStar from '../isRequiredLabelStar'
+
   const ComponentWrapper = styled.div`
     min-height: 16px;
   `
@@ -194,7 +193,6 @@
       InputCheckbox,
       LabelText,
       CheckWrapper,
-      IsRequiredLabelStar,
     },
     props: {
       label: {
@@ -245,10 +243,6 @@
         required: false,
         default: 'left',
       },
-      isRequiredLabel: {
-        type: Boolean,
-        default: false,
-      },
     },
     computed: {
       hasLabel() {

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

@@ -10,7 +10,6 @@
       @mousedown="initInteraction"
     >
       <slot name="label"></slot>
-      <IsRequiredLabelStar v-if="isRequiredLabel" />
     </LabelSlotWrapper>
     <LabelWrapper v-if="labelText">
       <LabelText
@@ -20,7 +19,6 @@
         :label-font-weight="labelFontWeight"
       >
         {{ labelText }}
-        <IsRequiredLabelStar v-if="isRequiredLabel" />
       </LabelText>
 
       <InfoText
@@ -240,7 +238,6 @@
   import ErrorMessage from '../../errorMessage'
   import RCSelect from '../select'
   import RCOption from '../select/option'
-  import IsRequiredLabelStar from '../isRequiredLabelStar'
   import warningIcon from '../../../assets/icons/error_icon.png'
   import Icon from '../../icon'
 
@@ -562,7 +559,6 @@
       ArrowButton,
       ArrowDivider,
       InputInfoText,
-      IsRequiredLabelStar,
     },
     inheritAttrs: false,
     props: {
@@ -807,10 +803,6 @@
         type: Boolean,
         default: true,
       },
-      isRequiredLabel: {
-        type: Boolean,
-        default: false,
-      },
     },
     data() {
       return {

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

@@ -14,7 +14,6 @@
           :label-font-color="labelFontColor"
         >
           {{ label }}
-          <IsRequiredLabelStar v-if="isRequiredLabel" />
           <OptionalLabel v-if="labelOptional" data-test-id="label_optional">
             ({{ $gettext('Optional') }})
           </OptionalLabel>
@@ -106,7 +105,6 @@
   import Icon from '../../icon'
   import ErrorMessage from '../../errorMessage'
   import InputValidations from '../../../mixins/inputValidations.js'
-  import IsRequiredLabelStar from '../isRequiredLabelStar'
 
   const Container = styled.div`
     width: 100%;
@@ -266,7 +264,6 @@
       IconContainer,
       InputErrorWrapper,
       OptionalLabel,
-      IsRequiredLabelStar,
     },
     mixins: [InputValidations],
     props: {
@@ -426,11 +423,6 @@
         default: '',
         type: String,
       },
-      isRequiredLabel: {
-        required: false,
-        default: false,
-        type: Boolean,
-      },
     },
     data() {
       return {

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

@@ -33,7 +33,6 @@
           :is-disabled="isItemDisabled(item)"
         >
           {{ item.label }}
-          <IsRequiredLabelStar v-if="isRequiredLabel" />
         </LabelText>
         <InfoText
           v-if="item.infoText"
@@ -98,7 +97,6 @@
   import styled from 'vue3-styled-components'
   import Modal from '../../modals/modal'
   import InfoText from '../../infoText'
-  import IsRequiredLabelStar from '../isRequiredLabelStar'
 
   const wrapperProps = {
     layout: String,
@@ -261,7 +259,6 @@
       ModalImageContainer,
       InfoText,
       LabelText,
-      IsRequiredLabelStar,
     },
     props: {
       disabled: {
@@ -315,11 +312,6 @@
         required: false,
         type: String,
       },
-      isRequiredLabel: {
-        required: false,
-        default: false,
-        type: Boolean,
-      },
     },
     emits: ['on-radio-change'],
     data() {

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

@@ -26,7 +26,6 @@
           "
           :font-size="fontSize"
           >{{ label }}
-          <IsRequiredLabelStar v-if="isRequiredLabel" />
           <OptionalLabel v-if="labelOptional">
             ({{ $gettext('Optional') }})</OptionalLabel
           >
@@ -236,7 +235,6 @@
   import Icon from '../../icon'
   import InputText from '../inputText'
   import DraggableInputHandle from '../../draggableInputHandle'
-  import IsRequiredLabelStar from '../isRequiredLabelStar'
   import { debounce } from '../../../utils'
 
   const CARET_WIDTH = '30px'
@@ -513,7 +511,6 @@
       InputText,
       Teleport,
       DraggableInputHandle,
-      IsRequiredLabelStar,
     },
 
     props: {
@@ -532,11 +529,6 @@
       label: {
         required: false,
       },
-      isRequiredLabel: {
-        required: false,
-        default: false,
-        type: Boolean,
-      },
       labelOptional: {
         required: false,
         default: false,

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

@@ -15,7 +15,6 @@
       >
         <LabelText :size="size">
           {{ label }}
-          <IsRequiredLabelStar v-if="isRequiredLabel" />
         </LabelText>
         <InfoText v-if="infoTextMessage" :text="infoTextMessage" />
       </LabelContainer>
@@ -81,7 +80,6 @@
   import InfoText from '../../infoText'
   import theme from '../../../assets/theme'
   import RCIcon from '../../icon'
-  import IsRequiredLabelStar from '../isRequiredLabelStar'
   const OptionIconContainer = styled.div`
     display: flex;
     align-items: center;
@@ -192,7 +190,6 @@
       SwitchOption,
       OptionIconContainer,
       RCIcon,
-      IsRequiredLabelStar,
     },
     props: {
       label: {
@@ -238,11 +235,6 @@
         required: false,
         default: null,
       },
-      isRequiredLabel: {
-        required: false,
-        default: false,
-        type: Boolean,
-      },
     },
     data() {
       return {

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

@@ -7,7 +7,6 @@
       <LabelWrapper v-if="label">
         <InputLabel :data-id="labelDataId" :font-size="fontSize">
           {{ label }}
-          <IsRequiredLabelStar v-if="isRequiredLabel" />
         </InputLabel>
         <InfoText v-if="infoTextMessage" size="16px" :text="infoTextMessage" />
       </LabelWrapper>
@@ -54,7 +53,6 @@
   import styled from 'vue3-styled-components'
   import InfoText from '../../infoText'
   import ErrorMessage from '../../errorMessage'
-  import IsRequiredLabelStar from '../isRequiredLabelStar'
 
   const containerProps = { inputWidth: String }
   const Container = styled('div', containerProps)`
@@ -134,7 +132,6 @@
       InfoText,
       LabelWrapper,
       InputLabel,
-      IsRequiredLabelStar,
     },
     props: {
       placeholder: {
@@ -195,11 +192,6 @@
         default: '',
         type: String,
       },
-      isRequiredLabel: {
-        required: false,
-        default: false,
-        type: Boolean,
-      },
     },
     methods: {
       onChangeHandler($event) {

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

@@ -19,7 +19,6 @@
           :size="size"
         >
           {{ label }}
-          <IsRequiredLabelStar v-if="isRequiredLabel" />
         </LabelText>
         <InfoText v-if="infoTextMessage" :text="infoTextMessage" />
       </LabelContainer>
@@ -90,7 +89,6 @@
 
   import styled from 'vue3-styled-components'
   import InfoText from '../../infoText'
-  import IsRequiredLabelStar from '../isRequiredLabelStar'
 
   const Container = styled.div`
     display: inline-block;
@@ -256,7 +254,6 @@
       LabelText,
       InfoText,
       LabelContainer,
-      IsRequiredLabelStar,
     },
     props: {
       label: {
@@ -312,11 +309,6 @@
         type: String,
         default: '',
       },
-      isRequiredLabel: {
-        required: false,
-        default: false,
-        type: Boolean,
-      },
     },
     methods: {
       onToggleChange() {

package/src/components/label/index.vue

@@ -2,7 +2,6 @@
   <LabelWrapper :label-align="labelAlign">
     <InputLabel :font-size="fontSize" :label-font-color="labelFontColor">
       <slot></slot>
-      <IsRequiredLabelStar v-if="isRequiredLabel" />
       <OptionalLabel v-if="labelOptional">
         ({{ $gettext('Optional') }})
       </OptionalLabel>
@@ -19,7 +18,6 @@
 <script>
   import styled from 'vue3-styled-components'
   import InfoText from '../infoText'
-  import IsRequiredLabelStar from '../inputs/isRequiredLabelStar'
 
   const labelAttrs = { fontSize: String, labelFontColor: String }
   const InputLabel = styled('div', labelAttrs)`
@@ -66,7 +64,6 @@
       InputLabel,
       LabelWrapper,
       OptionalLabel,
-      IsRequiredLabelStar,
     },
     props: {
       infoTextMessage: {
@@ -91,11 +88,6 @@
         required: false,
         default: 'vertical',
       },
-      isRequiredLabel: {
-        required: false,
-        default: false,
-        type: Boolean,
-      },
     },
     data() {
       return {

package/src/components/threeDots/index.vue

@@ -2,9 +2,10 @@
   <PageContainer
     ref="pageContainer"
     :activated="isOpen"
+    :hovered-background-color="hoveredBackgroundColor"
     @click="toggleButton()"
   >
-    <ButtonContainer ref="dropdownItem">
+    <ButtonContainer ref="dropdownItem" :icon-color="iconColor">
       <DotItem />
       <DotItem />
       <DotItem />
@@ -131,9 +132,10 @@
 
   import styled from 'vue3-styled-components'
   import Spinner from '../spinner'
-
+  import theme from '../../assets/theme'
   const PageContainerAttrs = {
     activated: Boolean,
+    hoveredBackgroundColor: String,
   }
   const PageContainer = styled('div', PageContainerAttrs)`
     display: grid;
@@ -143,14 +145,14 @@
     height: 30px;
     border-radius: 4px;
     background-color: ${(props) =>
-      props.activated ? props.theme.colors.grey5 : ''};
+      props.activated ? props.hoveredBackgroundColor : ''};
 
     &:hover {
-      background-color: ${(props) => props.theme.colors.grey5};
+      background-color: ${(props) => props.hoveredBackgroundColor};
     }
   `
 
-  const ButtonContainer = styled.div`
+  const ButtonContainer = styled('div', { iconColor: String })`
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -160,7 +162,7 @@
 
     div {
       // This is the dot color
-      background-color: #263238;
+      background-color: ${({ iconColor }) => iconColor};
     }
   `
 
@@ -305,6 +307,14 @@
         required: false,
         default: true,
       },
+      iconColor: {
+        type: String,
+        default: '#263238',
+      },
+      hoveredBackgroundColor: {
+        type: String,
+        default: theme.colors.grey5,
+      },
     },
     data() {
       return {
@@ -312,6 +322,7 @@
         hoverItem: null,
         childOpen: null,
         containerWidth: 16,
+        theme,
       }
     },
     methods: {

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

@@ -1,13 +0,0 @@
-<template>
-  <StarElement>*</StarElement>
-</template>
-<script>
-  import styled from 'vue3-styled-components'
-  const StarElement = styled.span`
-    color: ${({ theme }) => theme.colors.red};
-  `
-  export default {
-    name: 'IsRequiredLabelStar',
-    components: { StarElement },
-  }
-</script>