@eturnity/eturnity_reusable_components 8.31.4 → 8.31.5-EPDM-16219.1

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

@@ -10,6 +10,7 @@
       @mousedown="initInteraction"
     >
       <slot name="label"></slot>
+      <IsRequiredLabelStar v-if="isRequiredLabel" />
     </LabelSlotWrapper>
     <LabelWrapper v-if="labelText">
       <LabelText
@@ -19,6 +20,7 @@
         :label-font-weight="labelFontWeight"
       >
         {{ labelText }}
+        <IsRequiredLabelStar v-if="isRequiredLabel" />
       </LabelText>
 
       <InfoText
@@ -238,6 +240,7 @@
   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'
 
@@ -559,6 +562,7 @@
       ArrowButton,
       ArrowDivider,
       InputInfoText,
+      IsRequiredLabelStar,
     },
     inheritAttrs: false,
     props: {
@@ -803,6 +807,10 @@
         type: Boolean,
         default: true,
       },
+      isRequiredLabel: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {

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

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

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

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

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

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

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

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

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

@@ -15,6 +15,7 @@
       >
         <LabelText :size="size">
           {{ label }}
+          <IsRequiredLabelStar v-if="isRequiredLabel" />
         </LabelText>
         <InfoText v-if="infoTextMessage" :text="infoTextMessage" />
       </LabelContainer>
@@ -80,6 +81,7 @@
   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;
@@ -190,6 +192,7 @@
       SwitchOption,
       OptionIconContainer,
       RCIcon,
+      IsRequiredLabelStar,
     },
     props: {
       label: {
@@ -235,6 +238,11 @@
         required: false,
         default: null,
       },
+      isRequiredLabel: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
     },
     data() {
       return {

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

@@ -7,6 +7,7 @@
       <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>
@@ -53,6 +54,7 @@
   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)`
@@ -132,6 +134,7 @@
       InfoText,
       LabelWrapper,
       InputLabel,
+      IsRequiredLabelStar,
     },
     props: {
       placeholder: {
@@ -192,6 +195,11 @@
         default: '',
         type: String,
       },
+      isRequiredLabel: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
     },
     methods: {
       onChangeHandler($event) {

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

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

package/src/components/label/index.vue

@@ -2,6 +2,7 @@
   <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>
@@ -18,6 +19,7 @@
 <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)`
@@ -64,6 +66,7 @@
       InputLabel,
       LabelWrapper,
       OptionalLabel,
+      IsRequiredLabelStar,
     },
     props: {
       infoTextMessage: {
@@ -88,6 +91,11 @@
         required: false,
         default: 'vertical',
       },
+      isRequiredLabel: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
     },
     data() {
       return {

package/src/components/tabsHeader/index.vue

@@ -107,8 +107,6 @@
     display: flex;
     cursor: pointer;
     width: 100%;
-
-    border-bottom: 1px solid ${(props) => props.theme.colors.purple7};
   `
 
   const TabAttrs = { isActive: Boolean, fullSize: Boolean, isDisabled: Boolean }
@@ -129,8 +127,8 @@
     background-color: ${(props) => props.theme.colors.white};
     border-bottom: ${(props) =>
       props.isActive
-        ? '1px solid' + props.theme.semanticColors.purple[400]
-        : '1px solid' + props.theme.semanticColors.grey[400]};
+        ? '2px solid' + props.theme.semanticColors.purple[400]
+        : '2px solid' + props.theme.semanticColors.grey[400]};
   `
 
   const TabTextAttrs = { isActive: Boolean, isDisabled: Boolean }