@eturnity/eturnity_reusable_components 9.3.1-EPDM-16212.0 → 9.3.1-EPDM-13987.2

package/src/components/infoCard/index.vue

@@ -10,15 +10,13 @@
     :padding="padding"
     :preset-styles="presetStyles"
   >
-    <IconWrapper :size="iconWrapperSize ? iconWrapperSize : iconSize">
-      <RCIcon
-        :color="iconColor ? iconColor : presetStyles.iconColor"
-        data-test-id="info_card_icon"
-        :hovered-color="iconColor ? iconColor : presetStyles.iconColor"
-        :name="getIconName()"
-        :size="iconSize"
-      />
-    </IconWrapper>
+    <RCIcon
+      :color="iconColor ? iconColor : presetStyles.iconColor"
+      data-test-id="info_card_icon"
+      :hovered-color="iconColor ? iconColor : presetStyles.iconColor"
+      :name="getIconName()"
+      size="18px"
+    />
     <TextContainer data-test-id="info_card_text_container">
       <slot></slot>
     </TextContainer>
@@ -67,23 +65,12 @@
     width: 100%;
   `
 
-  const IconWrapper = styled('div', {
-    size: String,
-  })`
-    width: ${(props) => props.size};
-    height: ${(props) => props.size};
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  `
-
   export default {
     name: 'InfoCard',
     components: {
       RCIcon,
       InfoContainer,
       TextContainer,
-      IconWrapper,
     },
     props: {
       type: {
@@ -141,16 +128,6 @@
         type: String,
         default: '',
       },
-      iconSize: {
-        required: false,
-        type: String,
-        default: '18px',
-      },
-      iconWrapperSize: {
-        required: false,
-        type: String,
-        default: null,
-      },
     },
     computed: {
       isInfoSimple() {

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

@@ -25,7 +25,6 @@
               : 'eturnityGrey'
           "
           :font-size="fontSize"
-          :font-weight="labelFontWeight"
           >{{ label }}
           <IsRequiredLabelStar v-if="isRequiredLabel" />
           <OptionalLabel v-if="labelOptional">
@@ -288,14 +287,14 @@
     overflow: hidden;`}
   `
 
-  const labelAttrs = { fontSize: String, fontColor: String, fontWeight: String }
+  const labelAttrs = { fontSize: String, fontColor: String }
   const InputLabel = styled('div', labelAttrs)`
     color: ${(props) =>
       props.theme.colors[props.fontColor]
         ? props.theme.colors[props.fontColor]
         : props.fontColor};
     font-size: ${(props) => props.fontSize};
-    font-weight: ${(props) => props.fontWeight};
+    font-weight: 700;
   `
   const OptionalLabel = styled.span`
     font-weight: 300;
@@ -540,11 +539,6 @@
       label: {
         required: false,
       },
-      labelFontWeight: {
-        required: false,
-        default: '700',
-        type: String,
-      },
       isRequiredLabel: {
         required: false,
         default: false,
@@ -724,7 +718,7 @@
       },
     },
     setup() {
-      const modalRef = inject('modalRef')
+      const modalRef = inject('modalRef', null)
 
       return {
         modalRef,

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

@@ -12,6 +12,7 @@
         <InfoText v-if="infoTextMessage" size="16px" :text="infoTextMessage" />
       </LabelWrapper>
       <InputContainer
+        :app-theme="appTheme"
         :disabled="isDisabled"
         :font-size="fontSize"
         :input-width="inputWidth"
@@ -78,6 +79,7 @@
     disabled: Boolean,
     fontSize: String,
     inputWidth: String,
+    appTheme: String,
   }
 
   const InputContainer = styled('div', inputProps)`
@@ -90,7 +92,12 @@
         props.hasUnit ? '11px 40px 11px 10px !important' : '15px !important'};
       border-radius: 4px !important;
       font-size: ${(props) => `${props.fontSize} !important`};
-      color: ${(props) => `${props.theme.colors.grey1} !important`};
+      color: ${({ appTheme, theme }) =>
+        `${
+          appTheme == 'dark' ? theme.colors.white : theme.colors.grey1
+        } !important`};
+      background-color: ${({ appTheme }) =>
+        appTheme == 'dark' ? 'transparent' : 'white'};
       width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
       max-width: 100%;
       box-sizing: border-box; // to allow width of 100% with padding
@@ -207,6 +214,10 @@
         default: false,
         type: Boolean,
       },
+      appTheme: {
+        type: String,
+        default: 'light',
+      },
     },
     methods: {
       onChangeHandler($event) {

package/src/components/modals/modal/index.vue

@@ -15,7 +15,7 @@
       :overflow="overflowRule"
       @click="onClickModalContainer"
     >
-      <Spinner v-if="isLoading" :limited-to-modal="true" size="50px" />
+      <Spinner v-if="isLoading" :limited-to-modal="true" size="large" />
       <ContentContainer v-if="!isLoading">
         <slot></slot>
       </ContentContainer>
@@ -173,6 +173,10 @@
         type: Boolean,
         default: true,
       },
+      closeOnEscape: {
+        type: Boolean,
+        default: true,
+      },
     },
     setup() {
       const modalRef = ref(null)
@@ -205,7 +209,7 @@
         this.$emit('on-close')
       },
       handleKeyDown({ key }) {
-        if (key === 'Escape') {
+        if (this.closeOnEscape && key === 'Escape') {
           this.onCloseModal()
         }
       },

package/src/components/threeDots/index.vue

@@ -45,10 +45,15 @@
             {{ child.name }}
           </OptionChild>
         </ChildrenContainer>
-        <OptionsContainer v-if="!isLoading" :text-wrap="textWrap">
+        <OptionsContainer
+          v-if="!isLoading"
+          :color-theme="colorTheme"
+          :text-wrap="textWrap"
+        >
           <OptionItem
             v-for="(item, index) in options"
             :key="item.value"
+            :color-theme="colorTheme"
             :data-id="item.dataId"
             :is-disabled="item.disabled"
             tabindex="0"
@@ -154,7 +159,9 @@
     }
   `
 
-  const ButtonContainer = styled('div', { iconColor: String })`
+  const ButtonContainer = styled('div', {
+    iconColor: String,
+  })`
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -196,14 +203,19 @@
     background: #fff;
   `
 
-  const OptionsContainerAttrs = { textWrap: Boolean }
+  const OptionsContainerAttrs = { textWrap: Boolean, colorTheme: String }
   const OptionsContainer = styled('div', OptionsContainerAttrs)`
-    border: 1px solid ${(props) => props.theme.colors.grey3};
+    border: 1px solid
+      ${(props) =>
+        props.colorTheme == 'dark'
+          ? props.theme.semanticColors.teal[500]
+          : props.theme.colors.grey3};
     display: grid;
     grid-template-columns: 1fr;
     ${(props) => (props.textWrap ? 'width: 220px' : 'width: max-content')};
     border-radius: 4px;
-    background-color: #fff;
+    background-color: ${({ colorTheme }) =>
+      colorTheme == 'dark' ? theme.colors.black : '#fff'};
     max-height: 220px;
     overflow: auto;
     height: max-content;
@@ -211,7 +223,7 @@
       props.textWrap ? 'white-space: normal' : 'white-space: nowrap'};
   `
 
-  const optionAttrs = { isDisabled: Boolean }
+  const optionAttrs = { isDisabled: Boolean, colorTheme: String }
   const OptionItem = styled('div', optionAttrs)`
     padding: 12px;
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
@@ -219,13 +231,19 @@
     position: relative;
     ${(props) =>
       props.isDisabled
-        ? `background-color: ${props.theme.colors.grey5}!important`
+        ? `background-color:  ${(colorTheme) =>
+            colorTheme == 'dark'
+              ? theme.semanticColors.teal[700]
+              : props.theme.colors.grey5}!important`
         : ''};
     ${(props) =>
       props.isDisabled ? `color: ${props.theme.colors.grey2}` : ''};
 
     &:hover {
-      background-color: #ebeef4;
+      background-color: ${(props) =>
+        props.colorTheme == 'dark'
+          ? theme.semanticColors.teal[700]
+          : '#ebeef4'};
     }
 
     &:focus-visible {
@@ -233,14 +251,17 @@
       background-color: #ebeef4;
     }
   `
-  const OptionChild = styled.div`
+  const OptionChild = styled('div', { colorTheme: String })`
     padding: 12px;
     cursor: pointer;
     font-size: 13px;
     position: relative;
 
     &:hover {
-      background-color: #ebeef4;
+      background-color: ${(props) =>
+        props.colorTheme == 'dark'
+          ? theme.semanticColors.teal[600]
+          : '#ebeef4'};
     }
 
     &:focus-visible {
@@ -300,14 +321,25 @@
     props: {
       options: {
         required: true,
+        type: Array,
       },
       isLoading: {
         required: false,
         default: false,
+        type: Boolean,
       },
       textWrap: {
         required: false,
         default: true,
+        type: Boolean,
+      },
+      colorTheme: {
+        type: String,
+        default: 'light',
+      },
+      dropdownPosition: {
+        type: String,
+        default: 'horizontal',
       },
       iconColor: {
         type: String,
@@ -359,20 +391,42 @@
 
         const positionArray = this.determineElementQuarter(button, rectButton)
         contextMenu.style.transform = ''
-        if (positionArray.includes('left')) {
-          contextMenu.style.left =
-            rectButton.right - rectRelativeParent.left + 5 + 'px'
-        } else {
-          contextMenu.style.left =
-            rectButton.left - rectRelativeParent.left - 5 + 'px'
-          contextMenu.style.transform = 'translateX(-100%)'
-        }
-        if (positionArray.includes('top')) {
-          contextMenu.style.top = rectButton.top - rectRelativeParent.top + 'px'
+        if (this.dropdownPosition == 'vertical') {
+          // Position horizontally (left/right/center)
+          if (positionArray.includes('left')) {
+            contextMenu.style.left =
+              rectButton.left - rectRelativeParent.left + 'px'
+          } else {
+            contextMenu.style.left =
+              rectButton.right - rectRelativeParent.left + 'px'
+            contextMenu.style.transform = 'translateX(-100%)'
+          }
+          // Position vertically (above/below)
+          if (positionArray.includes('top')) {
+            contextMenu.style.top =
+              rectButton.bottom - rectRelativeParent.top + 5 + 'px'
+          } else {
+            contextMenu.style.top =
+              rectButton.top - rectRelativeParent.top - 5 + 'px'
+            contextMenu.style.transform += ' translateY(-100%)'
+          }
         } else {
-          contextMenu.style.top =
-            rectButton.bottom - rectRelativeParent.top + 'px'
-          contextMenu.style.transform += ' translateY(-100%)'
+          if (positionArray.includes('left')) {
+            contextMenu.style.left =
+              rectButton.right - rectRelativeParent.left + 5 + 'px'
+          } else {
+            contextMenu.style.left =
+              rectButton.left - rectRelativeParent.left - 5 + 'px'
+            contextMenu.style.transform = 'translateX(-100%)'
+          }
+          if (positionArray.includes('top')) {
+            contextMenu.style.top =
+              rectButton.top - rectRelativeParent.top + 'px'
+          } else {
+            contextMenu.style.top =
+              rectButton.bottom - rectRelativeParent.top + 'px'
+            contextMenu.style.transform += ' translateY(-100%)'
+          }
         }
       },
       findRelativeParent(element) {

package/src/assets/svgIcons/link.svg

@@ -1,3 +0,0 @@
-<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.06752 4.62905C6.61553 4.66836 7.14882 4.82466 7.631 5.08804C8.05321 5.31871 8.42787 5.62692 8.73549 5.99526L8.86245 6.15639L8.91518 6.24331C9.01421 6.45365 8.95529 6.7119 8.76186 6.85659C8.54075 7.02176 8.227 6.97606 8.06166 6.75503C7.81836 6.42988 7.5079 6.16068 7.15151 5.96596C6.79502 5.77124 6.40043 5.65514 5.99526 5.62612C5.59016 5.59717 5.1834 5.65605 4.80288 5.798C4.46976 5.92229 4.16336 6.10783 3.89956 6.34487L3.7892 6.44936L1.79506 8.4435L1.61245 8.65151C1.21223 9.15652 0.994606 9.78585 1.00014 10.4357C1.0066 11.1786 1.3049 11.8899 1.83022 12.4152C2.3555 12.9404 3.06597 13.2388 3.80874 13.2453C4.55163 13.2517 5.26753 12.9655 5.8019 12.4494L6.93569 11.3156C7.13094 11.1204 7.44747 11.1204 7.64272 11.3156C7.83796 11.5108 7.83792 11.8273 7.64272 12.0226L6.49624 13.1691C5.77329 13.8672 4.8049 14.253 3.79995 14.2443C2.79503 14.2355 1.83385 13.8328 1.12319 13.1222C0.412457 12.4115 0.00887541 11.4496 0.00014147 10.4445C-0.00848972 9.43953 0.37813 8.47107 1.07631 7.74819L3.08217 5.74233L3.23159 5.60073C3.58845 5.28015 4.00267 5.0286 4.45327 4.8605C4.96828 4.66838 5.51925 4.58978 6.06752 4.62905ZM10.4581 0.000144403C11.4632 0.00887834 12.4252 0.41246 13.1359 1.12319C13.8463 1.83384 14.2492 2.79511 14.258 3.79995C14.2667 4.80504 13.8801 5.77326 13.1818 6.49624L13.1759 6.50307L11.1759 8.50307C10.7874 8.89166 10.3197 9.19187 9.80483 9.38393C9.28992 9.57601 8.73971 9.65557 8.19155 9.61635C7.64327 9.57709 7.10948 9.41994 6.62709 9.15639C6.20515 8.92585 5.83108 8.6182 5.52358 8.25014L5.39565 8.08901L5.34292 8.0021C5.24377 7.79175 5.30281 7.53357 5.49624 7.38882C5.68981 7.24402 5.95427 7.26047 6.12807 7.41518L6.19643 7.4894L6.29018 7.60854C6.51759 7.8809 6.79443 8.10889 7.10659 8.27944C7.46309 8.47418 7.85765 8.58929 8.26284 8.61831C8.66798 8.6473 9.07464 8.58935 9.45522 8.44741C9.8358 8.30544 10.1817 8.0833 10.4689 7.79604L12.463 5.8019C12.9791 5.26753 13.2644 4.55161 13.258 3.80874C13.2515 3.06589 12.9532 2.35552 12.4279 1.83022C11.9026 1.30498 11.1922 1.0066 10.4494 1.00014C9.70907 0.99375 8.99482 1.27647 8.46108 1.78921L8.46206 1.79018L7.31459 2.93081L7.23647 2.99429C7.04204 3.12187 6.77793 3.10016 6.60756 2.92886C6.41288 2.73303 6.41372 2.41554 6.60952 2.22085L7.75698 1.0812L7.76186 1.07632C8.48482 0.378055 9.45308 -0.00857689 10.4581 0.000144403Z" fill="black"/>
-</svg>

package/src/components/styledText/index.js

@@ -1,76 +0,0 @@
-import styled from 'vue3-styled-components'
-
-const TEXT_VARIANTS = {
-  HEADING_MEDIUM: 'heading-medium',
-  HEADING_LARGE: 'heading-large',
-  BODY_SMALL: 'body-small',
-  BODY_MEDIUM: 'body-medium',
-  BODY_LARGE: 'body-large',
-  SUBHEADING_SMALL: 'subheading-small',
-  SUBHEADING_MEDIUM: 'subheading-medium',
-  SUBHEADING_LARGE: 'subheading-large',
-}
-
-const textVariants = {
-  [TEXT_VARIANTS.HEADING_MEDIUM]: {
-    fontSize: '20px',
-    fontWeight: '500',
-    lineHeight: '130%',
-    letterSpacing: '-0.3px',
-  },
-  [TEXT_VARIANTS.HEADING_LARGE]: {
-    fontSize: '24px',
-    fontWeight: '500',
-    lineHeight: '130%',
-    letterSpacing: '-0.36px',
-  },
-  [TEXT_VARIANTS.SUBHEADING_SMALL]: {
-    fontSize: '12px',
-    fontWeight: '500',
-    lineHeight: '140%',
-    letterSpacing: '-0.12px',
-  },
-  [TEXT_VARIANTS.SUBHEADING_MEDIUM]: {
-    fontSize: '14px',
-    fontWeight: '500',
-    lineHeight: '140%',
-    letterSpacing: '-0.14px',
-  },
-  [TEXT_VARIANTS.SUBHEADING_LARGE]: {
-    fontSize: '16px',
-    fontWeight: '500',
-    lineHeight: '140%',
-    letterSpacing: '-0.16px',
-  },
-  [TEXT_VARIANTS.BODY_SMALL]: {
-    fontSize: '12px',
-    fontWeight: '400',
-    lineHeight: '150%',
-  },
-  [TEXT_VARIANTS.BODY_MEDIUM]: {
-    fontSize: '14px',
-    fontWeight: '400',
-    lineHeight: '150%',
-  },
-  [TEXT_VARIANTS.BODY_LARGE]: {
-    fontSize: '16px',
-    fontWeight: '400',
-    lineHeight: '150%',
-  },
-}
-
-const StyledText = styled('div', {
-  fontColor: String,
-  type: String,
-})`
-  color: ${(props) => props.fontColor};
-  font-style: normal;
-
-  font-size: ${(props) => textVariants[props.type]?.fontSize ?? '14px'};
-  font-weight: ${(props) => textVariants[props.type]?.fontWeight ?? '400'};
-  line-height: ${(props) => textVariants[props.type]?.lineHeight ?? '150%'};
-  letter-spacing: ${(props) =>
-    textVariants[props.type]?.letterSpacing ?? 'normal'};
-`
-
-export default StyledText