@eturnity/eturnity_reusable_components 1.2.86 → 1.2.87

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.86",
+  "version": "1.2.87",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

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

@@ -7,7 +7,7 @@
       <label-wrapper v-if="label">
         <input-label :labelFontColor="labelFontColor" :fontSize="fontSize">{{
           label
-        }}</input-label>
+        }} <optionalLabel v-if="labelOptional">({{ $gettext('Optional') }})</optionalLabel></input-label>
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
@@ -81,7 +81,9 @@ const InputLabel = styled('div', labelAttrs)`
   font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
   font-weight: 700;
 `
-
+const optionalLabel = styled.span`
+  font-weight: 300;
+`
 const LabelWrapper = styled.div`
   display: inline-grid;
   grid-template-columns: auto auto;
@@ -217,7 +219,8 @@ export default {
     Icon,
     IconWrapper,
     IconContainer,
-    InputErrorWrapper
+    InputErrorWrapper,
+    optionalLabel
   },
   data() {
     return {
@@ -266,6 +269,10 @@ export default {
     label: {
       required: false
     },
+    labelOptional: {
+      required: false,
+      default: false
+    },
     noBorder: {
       required: false,
       default: false

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

@@ -14,7 +14,8 @@
             labelFontColor || colorMode == 'dark' ? 'white' : 'eturnityGrey'
           "
           :fontSize="fontSize"
-          >{{ label }}</input-label
+          >{{ label }} <optionalLabel v-if="labelOptional"> ({{ $gettext('Optional') }})</optionalLabel>
+          </input-label
         >
         <info-text
           v-if="infoTextMessage"
@@ -45,6 +46,7 @@
             v-if="isSearchBarVisible"
             ref="searchInput"
             tabindex="0"
+            inputHeight="34px"
             :noBorder="true"
             :fontSize="fontSize"
             backgroundColor="transparent"
@@ -158,6 +160,10 @@ const InputLabel = styled('div', labelAttrs)`
   font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
   font-weight: 700;
 `
+const optionalLabel = styled.span`
+  font-weight: 300;
+
+`
 const inputProps = { selectWidth: String, optionWidth: String }
 const Container = styled('div', inputProps)`
   width: ${(props) => (props.selectWidth ? props.selectWidth : '100%')};
@@ -193,7 +199,7 @@ const selectButton = styled('div', selectButtonAttrs)`
   box-sizing: border-box;
   border-radius: 4px;
   padding: ${(props) =>
-    props.isSearchBarVisible ? '0 10px 0 0' : '0px 10px 0 15px'};
+    props.isSearchBarVisible ? '0' : '0px 0px 0 15px'};
   text-align: left;
   border-radius: 4px;
   min-height: 36px;
@@ -230,7 +236,6 @@ const selectDropdown = styled('div', selectDropdownAttrs)`
     z-index:${(props) => (props.isActive ? '2' : '1')};
     position:absolute;
     top:5px;
-    padding:10px;
     border:1px solid ${(props) => props.theme.colors.grey4}
     border-radius:4px;
     display: flex;
@@ -283,6 +288,10 @@ export default {
     label: {
       required: false
     },
+    labelOptional: {
+      required: false,
+      default: false
+    },
     infoTextMessage: {
       required: false
     },
@@ -360,6 +369,7 @@ export default {
     Container,
     InputLabel,
     LabelWrapper,
+    optionalLabel,
     InfoText,
     InputWrapper,
     DropdownWrapper,