@eturnity/eturnity_reusable_components 7.48.0 → 7.48.1-EPDM-12680.0

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

@@ -17,7 +17,9 @@
       >
         <InputLabel
           :font-color="
-            labelFontColor || colorMode == 'dark' ? 'white' : 'eturnityGrey'
+            labelFontColor || colorMode == 'dark' || colorMode == 'transparent'
+              ? 'white'
+              : 'eturnityGrey'
           "
           :font-size="fontSize"
           >{{ label }}
@@ -40,18 +42,26 @@
         <SelectButton
           ref="select"
           :bg-color="
-            buttonBgColor || colorMode == 'dark' ? 'transparentBlack1' : 'white'
+            buttonBgColor || colorMode == 'dark'
+              ? 'transparentBlack1'
+              : colorMode == 'transparent'
+              ? 'transparent'
+              : 'white'
           "
           class="select-button"
+          :color-mode="colorMode"
           :data-id="dataId"
           :disabled="disabled"
           :font-color="
-            buttonFontColor || colorMode == 'dark' ? 'white' : 'black'
+            buttonFontColor || colorMode == 'dark' || colorMode == 'transparent'
+              ? 'white'
+              : 'black'
           "
           :font-size="fontSize"
           :has-error="hasError"
           :has-no-padding="isSearchBarVisible || !hasSelectButtonPadding"
           :height="height"
+          :is-search-bar-visible="isSearchBarVisible"
           :no-relative="noRelative"
           :padding-left="paddingLeft"
           :select-height="selectHeight"
@@ -72,7 +82,11 @@
             ref="searchInput"
             background-color="transparent"
             :font-color="
-              buttonFontColor || colorMode == 'dark' ? 'white' : 'black'
+              buttonFontColor ||
+              colorMode == 'dark' ||
+              colorMode == 'transparent'
+                ? 'white'
+                : 'black'
             "
             :font-size="fontSize"
             input-height="34px"
@@ -92,26 +106,30 @@
           >
             <slot name="selector" :selected-value="selectedValue"></slot>
           </Selector>
-          <Caret class="caret_dropdown" @click.stop="toggleCaretDropdown">
+          <Caret
+            class="caret_dropdown"
+            :color-mode="colorMode"
+            @click.stop="toggleCaretDropdown"
+          >
             <Icon
               v-if="isDropdownOpen"
               :color="
-                caretColor || colorMode == 'dark'
+                caretColor || colorMode == 'dark' || colorMode == 'transparent'
                   ? 'white'
                   : 'transparentBlack1'
               "
               name="arrow_up"
-              size="12px"
+              :size="colorMode === 'transparent' ? '8px' : '12px'"
             />
             <Icon
               v-else
               :color="
-                caretColor || colorMode == 'dark'
+                caretColor || colorMode == 'dark' || colorMode == 'transparent'
                   ? 'white'
                   : 'transparentBlack1'
               "
               name="arrow_down"
-              size="12px"
+              :size="colorMode === 'transparent' ? '8px' : '12px'"
             />
           </Caret>
         </SelectButton>
@@ -121,15 +139,27 @@
               v-show="isSelectDropdownShown"
               ref="dropdown"
               :bg-color="
-                dropdownBgColor || colorMode == 'dark' ? 'black' : 'white'
+                dropdownBgColor ||
+                colorMode == 'dark' ||
+                colorMode == 'transparent'
+                  ? 'black'
+                  : 'white'
               "
               :dropdown-position="dropdownPosition"
               :font-color="
-                dropdownFontColor || colorMode == 'dark' ? 'white' : 'black'
+                dropdownFontColor ||
+                colorMode == 'dark' ||
+                colorMode == 'transparent'
+                  ? 'white'
+                  : 'black'
               "
               :font-size="fontSize"
               :hovered-bg-color="
-                colorMode == 'dark' ? '#000000' : dropdownBgColor
+                colorMode == 'dark'
+                  ? '#000000'
+                  : colorMode == 'transparent'
+                  ? 'grey6'
+                  : dropdownBgColor
               "
               :hovered-index="hoveredIndex"
               :hovered-value="hoveredValue"
@@ -186,12 +216,15 @@
   const CARET_WIDTH = '30px'
   const BORDER_WIDTH = '1px'
 
-  const Caret = styled.div`
+  const CaretAttrs = { colorMode: String }
+  const Caret = styled('div', CaretAttrs)`
     display: flex;
     align-items: center;
     justify-content: center;
-    width: ${CARET_WIDTH};
-    min-width: ${CARET_WIDTH};
+    width: ${(props) =>
+      props.colorMode === 'transparent' ? '15px' : CARET_WIDTH};
+    min-width: ${(props) =>
+      props.colorMode === 'transparent' ? '15px' : CARET_WIDTH};
     height: 100%;
     align-items: center;
     cursor: pointer;
@@ -230,6 +263,7 @@
   `
   const OptionalLabel = styled.span`
     font-weight: 300;
+    text-transform: lowercase;
   `
   const inputProps = {
     selectWidth: String,
@@ -274,6 +308,8 @@
     noRelative: Boolean,
     tablePaddingLeft: String,
     showDisabledBackground: Boolean,
+    colorMode: String,
+    isSearchBarVisible: Boolean,
   }
   const SelectButton = styled('div', selectButtonAttrs)`
     position: ${(props) => (props.noRelative ? 'static' : 'relative')};
@@ -281,7 +317,11 @@
     border-radius: 4px;
     max-width: ${(props) => (props.selectWidth ? props.selectWidth : '100%')};
     ${(props) =>
-      props.isSearchBarVisible
+      props.colorMode === 'transparent'
+        ? props.isSearchBarVisible
+          ? 'padding: 10px 15px 10px 5px;'
+          : 'padding: 10px 15px;'
+        : props.isSearchBarVisible
         ? ''
         : `padding-left: ${
             props.hasNoPadding
@@ -613,7 +653,7 @@
         if (this.isDropdownOpen) {
           return this.$refs.dropdown.$el.childElementCount > 1
             ? this.$refs.dropdown.$el.childElementCount
-            : !!this.$refs.dropdown.$el.children[0]
+            : this.$refs.dropdown.$el.children[0]
             ? this.$refs.dropdown.$el.children[0].childElementCount
             : 0
         }

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

@@ -1,6 +1,12 @@
 <template>
   <OptionContainer
-    :background-color="colorMode == 'dark' ? '#000000' : backgroundColor"
+    :background-color="
+      colorMode == 'dark'
+        ? '#000000'
+        : colorMode == 'transparent'
+        ? 'black'
+        : backgroundColor
+    "
     :cursor-type="cursorType"
     :data-value="value"
     :disabled-bg-color="disabledBgColor"
@@ -8,6 +14,8 @@
     :hovered-bg-color="
       colorMode == 'dark'
         ? '#000000'
+        : colorMode == 'transparent'
+        ? 'grey6'
         : hoveredBgColor
         ? hoveredBgColor
         : 'grey5'
@@ -130,7 +138,8 @@
         default: '12px 10px',
       },
       textColor: {
-        type: true,
+        type: String,
+        required: false,
         default: 'inherit',
       },
     },

package/src/components/spinner/index.vue

@@ -3,6 +3,7 @@
     <Container>
       <SpinnerWrapper data-test-id="spinner_full_wrapper">
         <SpinnerSvg
+          :class="{ white: isWhite }"
           data-test-id="spinner_full_icon"
           :style="{ width: size, height: size }"
         />
@@ -16,6 +17,7 @@
   >
     <SpinnerWrapper data-test-id="spinner_wrapper">
       <SpinnerSvg
+        :class="{ white: isWhite }"
         data-test-id="spinner_icon"
         :style="{ width: size, height: size }"
       />
@@ -54,6 +56,10 @@
   const SpinnerWrapper = styled.div`
     width: ${(props) => (props.size ? props.size : '60px')};
     height: auto;
+
+    .white {
+      filter: brightness(0) invert(1);
+    }
   `
 
   export default {
@@ -80,6 +86,11 @@
         default: '60px',
         type: String,
       },
+      isWhite: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
     },
   }
 </script>