@eturnity/eturnity_reusable_components 8.7.5-EPDM-12618.3 → 8.7.5-EPIC-8593.0

package/src/components/infoLabel/index.vue

@@ -0,0 +1,63 @@
+<template>
+  <PageContainer :info-type="infoType">
+    <LabelText>{{ getLabelText }}</LabelText>
+  </PageContainer>
+</template>
+
+<script>
+  // import InfoLabel from "@eturnity/eturnity_reusable_components/src/components/infoLabel"
+  import styled from 'vue3-styled-components'
+
+  const PageAttrs = {
+    infoType: 'String',
+  }
+  const PageContainer = styled('div', PageAttrs)`
+    background-color: ${(props) =>
+      props.infoType === 'warning'
+        ? props.theme.colors.yellow4
+        : props.infoType === 'error'
+        ? props.theme.colors.red4
+        : props.theme.colors.blue4};
+    padding: 4px 8px;
+    border-radius: 8px;
+    font-size: 12px;
+    font-weight: 400;
+    color: ${(props) => props.theme.colors.black};
+  `
+
+  const LabelText = styled.div``
+
+  export default {
+    name: 'InfoLabel',
+    components: {
+      PageContainer,
+      LabelText,
+    },
+    props: {
+      infoType: {
+        type: String,
+        default: 'hint', // hint, warning, error
+      },
+      labelText: {
+        type: String,
+        default: '',
+      },
+    },
+    computed: {
+      getLabelText() {
+        if (this.labelText) {
+          return this.labelText
+        }
+        const infoType = this.infoType.toLowerCase()
+        switch (infoType) {
+          case 'warning':
+            return this.$gettext('Warning')
+          case 'error':
+            return this.$gettext('error')
+          default:
+            return this.$gettext('info')
+        }
+      },
+    },
+  }
+</script>

package/src/components/infoText/index.vue

@@ -1,30 +1,55 @@
 <template>
-  <PageContainer ref="container" :type="type">
-    <div
-      ref="icon"
-      data-test-id="infoText_trigger"
-      @click=";(isMobile || openTrigger === 'onClick') && toggleInfo()"
-      @mouseenter="!isMobile && openTrigger === 'onHover' && showInfo()"
-      @mouseleave="!isMobile && openTrigger === 'onHover' && hideInfo()"
-    >
-      <Dot
-        v-if="type === 'dot'"
-        :color="dotColor"
-        data-test-id="infoText_dot"
-      />
-      <IconComponent
-        v-else
-        :color="iconColor || computedIconColor"
-        :cursor="isDisabled ? 'not-allowed' : 'pointer'"
-        :disabled="isDisabled"
-        :name="iconName"
-        :size="size"
-      />
+  <PageContainer
+    ref="container"
+    :type="type"
+    @click=";(isMobile || openTrigger === 'onClick') && toggleInfo()"
+    @mouseenter="!isMobile && openTrigger === 'onHover' && showInfo()"
+    @mouseleave="!isMobile && openTrigger === 'onHover' && hideInfo()"
+  >
+    <div ref="icon" data-test-id="infoText_trigger">
+      <IconWrapper
+        :background-color="backgroundColor"
+        :border-radius="borderRadius"
+        :hovered-icon="hoveredIcon"
+        :is-active="isActive"
+        :is-disabled="isDisabled"
+        :padding="padding"
+      >
+        <LabelWrapper
+          v-if="labelText && labelAlign === 'left'"
+          :color="iconColor || computedIconColor"
+          :size="labelSize"
+        >
+          {{ labelText }}
+        </LabelWrapper>
+        <Dot
+          v-if="type === 'dot'"
+          :color="dotColor"
+          data-test-id="infoText_dot"
+        />
+        <IconComponent
+          v-else-if="!noIcon"
+          :color="iconColor || computedIconColor"
+          :cursor="isDisabled ? 'not-allowed' : 'pointer'"
+          :disabled="isDisabled"
+          :hovered-color="iconColor || computedIconColor"
+          :name="iconName"
+          :size="size"
+        />
+        <LabelWrapper
+          v-if="labelText && labelAlign === 'right'"
+          :color="iconColor || computedIconColor"
+          :size="labelSize"
+        >
+          {{ labelText }}
+        </LabelWrapper>
+      </IconWrapper>
     </div>
     <Teleport v-if="isVisible" to="body">
       <TextWrapper :style="wrapperStyle">
         <TextOverlay
           ref="infoBox"
+          :app-theme="appTheme"
           :image="image"
           :style="boxStyle"
           :width="infoBoxWidth"
@@ -36,13 +61,13 @@
             :src="image"
             @load="onImageLoad"
           />
-          <span ref="textContent" :style="textStyle">
+          <span v-if="!hideInfoText" ref="textContent" :style="textStyle">
             <slot>
               <span v-html="text"></span>
             </slot>
           </span>
         </TextOverlay>
-        <Arrow :image="image" :style="arrowStyle" />
+        <!-- <Arrow :image="image" :style="arrowStyle" /> -->
       </TextWrapper>
     </Teleport>
   </PageContainer>
@@ -63,11 +88,14 @@
   import styled from 'vue3-styled-components'
   import theme from '../../assets/theme.js'
 
-  const TextOverlay = styled('div')`
-    background-color: ${(props) =>
-      props.image ? props.theme.colors.white : props.theme.colors.black};
+  const TextOverlayAttrs = {
+    appTheme: String,
+    image: Boolean,
+    width: Number,
+  }
+  const TextOverlay = styled('div', TextOverlayAttrs)`
     color: ${(props) =>
-      props.image ? props.theme.colors.grey1 : props.theme.colors.white};
+      props.image ? props.theme.colors.grey1 : props.theme.colors.black};
     font-size: ${(props) => (props.image ? '12px' : '13px')};
     border-radius: 4px;
     padding: 10px;
@@ -88,16 +116,20 @@
     }
   `
 
-  const Arrow = styled('div')`
-    position: absolute;
-    width: 0;
-    height: 0;
-    border: 8px solid transparent;
-    border-top-color: ${(props) =>
-      props.image ? props.theme.colors.white : props.theme.colors.black};
-    filter: ${(props) =>
-      props.image ? 'drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1))' : 'none'};
-  `
+  // const Arrow = styled('div')`
+  //   position: absolute;
+  //   width: 0;
+  //   height: 0;
+  //   border: 8px solid transparent;
+  //   border-top-color: ${(props) =>
+  //     props.image
+  //       ? props.theme.colors.white
+  //       : props.appTheme === 'dark'
+  //       ? props.theme.colors.grey5
+  //       : props.theme.colors.black};
+  //   filter: ${(props) =>
+  //     props.image ? 'drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1))' : 'none'};
+  // `
 
   const PageContainer = styled('div')`
     display: ${(props) => (props.type === 'dot' ? 'unset' : 'inline-block')};
@@ -121,16 +153,57 @@
     border-radius: 50%;
   `
 
+  const IconWrapperAttrs = {
+    backgroundColor: String,
+    borderRadius: String,
+    padding: String,
+    hoveredIcon: Boolean,
+    isActive: Boolean,
+    isDisabled: Boolean,
+  }
+  const IconWrapper = styled('div', IconWrapperAttrs)`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    white-space: nowrap;
+    background-color: ${(props) => props.backgroundColor};
+    border-radius: ${(props) =>
+      props.hoveredIcon ? '6px' : props.borderRadius};
+    padding: ${(props) => props.padding};
+    width: ${(props) => (props.hoveredIcon ? '32px' : '')};
+    height: ${(props) => (props.hoveredIcon ? '32px' : '')};
+    cursor: pointer;
+    background-color: ${(props) =>
+      props.isActive ? props.theme.colors.transparentWhite2 : ''};
+    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
+    &:hover {
+      background-color: ${(props) =>
+        props.hoveredIcon ? props.theme.colors.transparentWhite2 : ''};
+    }
+  `
+
+  const LabelWrapperAttrs = {
+    size: String,
+    color: String,
+  }
+  const LabelWrapper = styled('div', LabelWrapperAttrs)`
+    font-size: ${(props) => props.size};
+    color: ${(props) => props.color};
+  `
+
   export default {
     name: 'InfoText',
     components: {
       IconComponent,
       TextOverlay,
-      Arrow,
+      // Arrow,
       Dot,
       PageContainer,
       TextWrapper,
       OverlayImage,
+      IconWrapper,
+      LabelWrapper,
     },
     props: {
       text: {
@@ -138,6 +211,16 @@
         default: '',
         type: String,
       },
+      isActive: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
+      labelText: {
+        required: false,
+        default: '',
+        type: String,
+      },
       size: {
         type: String,
         default: '14px',
@@ -182,13 +265,58 @@
       dotColor: {
         type: String,
         required: false,
-        default: theme.colors.blue2,
+        default: theme.semanticColors.blue[400],
       },
       type: {
         type: String,
         required: false,
         default: 'info', // info, dot
       },
+      appTheme: {
+        type: String,
+        default: 'light', // light or dark
+        required: false,
+      },
+      labelAlign: {
+        type: String,
+        default: 'right',
+        required: false,
+      },
+      backgroundColor: {
+        type: String,
+        default: '',
+        required: false,
+      },
+      borderRadius: {
+        type: String,
+        default: '',
+        required: false,
+      },
+      padding: {
+        type: String,
+        default: '',
+        required: false,
+      },
+      labelSize: {
+        type: String,
+        default: '12px',
+        required: false,
+      },
+      noIcon: {
+        type: Boolean,
+        default: false,
+        required: false,
+      },
+      hoveredIcon: {
+        type: Boolean,
+        default: false,
+        required: false,
+      },
+      hideInfoText: {
+        type: Boolean,
+        default: false,
+        required: false,
+      },
     },
     setup(props) {
       const isVisible = ref(false)
@@ -206,7 +334,11 @@
 
       const textStyle = computed(() => ({
         fontSize: props.image ? '12px' : '13px',
-        color: props.image ? theme.colors.grey1 : theme.colors.white,
+        color: props.image
+          ? theme.colors.grey1
+          : props.appTheme === 'dark'
+          ? theme.colors.black
+          : theme.colors.white,
         textAlign: props.image ? 'right' : 'left',
       }))
 
@@ -336,7 +468,9 @@
           overflowY: 'auto',
           backgroundColor: props.image
             ? theme.colors.white
-            : theme.colors.black,
+            : props.appTheme === 'light'
+            ? theme.colors.black
+            : theme.colors.grey5,
         }
       }
 
@@ -408,7 +542,7 @@
 
         // Calculate new width
         const calculatedWidth = Math.min(
-          Math.max(contentWidth, 200),
+          Math.max(contentWidth, 230),
           parseInt(props.maxWidth, 10)
         )
 

package/src/components/infoText/infoText.spec.js

@@ -5,7 +5,7 @@ import theme from '@/assets/theme'
 
 jest.mock('@/components/icon/iconCache.mjs', () => ({
   // need to mock this due to how jest handles import.meta
-  fetchIcon: jest.fn(() => Promise.resolve('close_for_modals,_tool_tips.svg')),
+  fetchIcon: jest.fn(() => Promise.resolve('close.svg')),
 }))
 
 describe('InfoText Component', () => {

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

@@ -5,6 +5,7 @@
       :check-color="checkColor"
       :cursor-type="cursorType"
       :data-test-id="dataId"
+      :font-color="fontColor"
       :has-label="hasLabel"
       :is-checked="isChecked"
       :is-disabled="isDisabled"
@@ -63,6 +64,7 @@
     isChecked: Boolean,
     isDisabled: Boolean,
     cursorType: String,
+    fontColor: String,
   }
   const Container = styled('label', containerAttrs)`
     display: grid;
@@ -70,7 +72,10 @@
       props.hasLabel ? '16px auto' : '16px'};
     grid-gap: 16px;
     align-content: center;
-    color: ${(props) => props.theme.colors.black};
+    color: ${(props) =>
+      props.theme.colors[props.fontColor]
+        ? props.theme.colors[props.fontColor]
+        : props.fontColor};
     position: relative;
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : props.cursorType)};
     font-size: 16px;
@@ -176,7 +181,7 @@
     align-items: center;
     min-height: 18px;
     color: ${(props) =>
-      props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
+      props.isDisabled ? props.theme.colors.grey2 : 'unset'};
   `
 
   export default {
@@ -193,6 +198,10 @@
         required: false,
         default: '',
       },
+      fontColor: {
+        required: false,
+        default: 'black',
+      },
       isChecked: {
         required: true,
         default: false,

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

@@ -25,6 +25,7 @@
       <InfoText
         v-if="labelInfoText"
         :align-arrow="labelInfoAlign"
+        :app-theme="appTheme"
         :text="labelInfoText"
       />
     </LabelWrapper>
@@ -474,6 +475,10 @@
     },
     inheritAttrs: false,
     props: {
+      appTheme: {
+        type: String,
+        required: false,
+      },
       placeholder: {
         type: String,
         required: false,

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

@@ -21,6 +21,7 @@
         <InfoText
           v-if="infoTextMessage != ''"
           :align-arrow="infoTextAlign"
+          :app-theme="appTheme"
           data-test-id="info_text_message"
           :size="fontSize ? fontSize : '16px'"
           :text="infoTextMessage"
@@ -168,7 +169,9 @@
     position: relative;
     font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
     color: ${(props) =>
-      props.isDisabled
+      props.isError
+        ? props.theme.colors.grey6
+        : props.isDisabled
         ? props.theme.colors.grey2
         : props.fontColor
         ? props.fontColor + ' !important'
@@ -261,6 +264,11 @@
         default: '',
         type: String,
       },
+      appTheme: {
+        type: String,
+        required: false,
+        default: 'light',
+      },
       alignItems: {
         required: false,
         default: 'horizontal',

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

@@ -1,20 +1,26 @@
 <template>
   <PageWrapper
     v-if="isOpen"
+    :add-padding-top="addPaddingTop"
     :backdrop="backdrop"
     :is-open="isOpen"
     :position="position"
   >
     <ModalContainer
       v-if="isOpen"
+      :is-loading="isLoading"
       :overflow="overflowRule"
       @click="onClickModalContainer"
     >
       <Spinner v-if="isLoading" :limited-to-modal="true" size="50px" />
-      <ContentContainer :visible="!isLoading">
+      <ContentContainer v-if="!isLoading">
         <slot></slot>
       </ContentContainer>
-      <CloseButton v-if="!hideClose" class="close" @click="onCloseModal()" />
+      <CloseButton
+        v-if="!hideClose && !isLoading"
+        class="close"
+        @click="onCloseModal()"
+      />
     </ModalContainer>
   </PageWrapper>
 </template>
@@ -36,7 +42,11 @@
 
   const ContentContainer = styled.div``
 
-  const pageAttrs = { backdrop: String, position: String }
+  const pageAttrs = {
+    backdrop: String,
+    position: String,
+    addPaddingTop: Boolean,
+  }
   const PageWrapper = styled('div', pageAttrs)`
   position: ${(props) => props.position}
   display: grid;
@@ -50,13 +60,14 @@
       : 'rgba(255, 255, 255, 0.9)'};
   z-index: 99999;
   overflow: auto;
+  padding-top: ${(props) => (props.addPaddingTop ? '80px' : '0')};
 
   @media (max-width: 425px) {
     background: white;
   }
 `
 
-  const modalContainerAttrs = { overflow: String }
+  const modalContainerAttrs = { overflow: String, isLoading: Boolean }
   const ModalContainer = styled('div', modalContainerAttrs)`
     align-self: center;
     justify-self: center;
@@ -68,8 +79,8 @@
     overflow: ${(props) => props.overflow};
     max-width: 95%;
     max-height: 95%;
-    min-width: 100px;
-    min-height: 100px;
+    min-width: ${(props) => (props.isLoading ? '400px' : '100px')};
+    min-height: ${(props) => (props.isLoading ? '500px' : '100px')};
 
     ::-webkit-scrollbar {
       width: 0.3em;
@@ -147,6 +158,10 @@
         type: String,
         default: 'auto',
       },
+      addPaddingTop: {
+        type: Boolean,
+        default: false,
+      },
     },
     watch: {
       isOpen: {