@eturnity/eturnity_reusable_components 8.10.3-EPDM-13568.6 → 8.10.3-EPDM-11600.3

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

@@ -25,7 +25,6 @@
       <InfoText
         v-if="labelInfoText"
         :align-arrow="labelInfoAlign"
-        :app-theme="appTheme"
         :text="labelInfoText"
       />
     </LabelWrapper>
@@ -43,7 +42,6 @@
         :color-mode="colorMode"
         :data-id="inputDataId"
         :data-qa-id="dataQaId"
-        :disabled="disabled"
         :font-color="colorMode === 'transparent' ? 'white' : fontColor"
         :font-size="fontSize"
         :has-label-slot="hasLabelSlot"
@@ -53,6 +51,7 @@
         :is-disabled="disabled"
         :is-error="isError"
         :is-interactive="isInteractive"
+        :is-pre-defined="isPreDefined"
         :min-width="minWidth"
         :no-border="noBorder"
         :placeholder="displayedPlaceholder"
@@ -195,6 +194,7 @@
     slotSize: String,
     inputHeight: String,
     isInteractive: Boolean,
+    isPreDefined: Boolean,
     alignItems: String,
     labelFontColor: String,
     labelFontWeight: String,
@@ -255,7 +255,7 @@
     color: ${(props) =>
       props.isError
         ? props.theme.colors.grey6
-        : props.isDisabled
+        : props.isDisabled && !props.isPreDefined
         ? props.colorMode === 'transparent'
           ? props.theme.colors.white
           : props.theme.colors.grey2
@@ -475,10 +475,6 @@
     },
     inheritAttrs: false,
     props: {
-      appTheme: {
-        type: String,
-        required: false,
-      },
       placeholder: {
         type: String,
         required: false,
@@ -529,6 +525,11 @@
         required: false,
         default: 0,
       },
+      isPreDefined: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
       minDecimals: {
         type: Number,
         required: false,
@@ -649,12 +650,18 @@
         required: false,
         default: '',
       },
+      labelDataTestId: {
+        type: String,
+        required: false,
+        default: '',
+      },
       inputDataId: {
         type: String,
         required: false,
         default: '',
       },
       dataQaId: {
+        type: String,
         required: false,
         default: '',
       },

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

@@ -21,7 +21,6 @@
         <InfoText
           v-if="infoTextMessage != ''"
           :align-arrow="infoTextAlign"
-          :app-theme="appTheme"
           data-test-id="info_text_message"
           :size="fontSize ? fontSize : '16px'"
           :text="infoTextMessage"
@@ -264,11 +263,6 @@
         default: '',
         type: String,
       },
-      appTheme: {
-        type: String,
-        required: false,
-        default: 'light',
-      },
       alignItems: {
         required: false,
         default: 'horizontal',

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

@@ -8,12 +8,11 @@
   >
     <ModalContainer
       v-if="isOpen"
-      :is-loading="isLoading"
       :overflow="overflowRule"
       @click="onClickModalContainer"
     >
       <Spinner v-if="isLoading" :limited-to-modal="true" size="50px" />
-      <ContentContainer v-if="!isLoading">
+      <ContentContainer :visible="!isLoading">
         <slot></slot>
       </ContentContainer>
       <CloseButton v-if="!hideClose" class="close" @click="onCloseModal()" />
@@ -63,7 +62,7 @@
   }
 `
 
-  const modalContainerAttrs = { overflow: String, isLoading: Boolean }
+  const modalContainerAttrs = { overflow: String }
   const ModalContainer = styled('div', modalContainerAttrs)`
     align-self: center;
     justify-self: center;
@@ -75,8 +74,8 @@
     overflow: ${(props) => props.overflow};
     max-width: 95%;
     max-height: 95%;
-    min-width: ${(props) => (props.isLoading ? '400px' : '100px')};
-    min-height: ${(props) => (props.isLoading ? '500px' : '100px')};
+    min-width: 100px;
+    min-height: 100px;
 
     ::-webkit-scrollbar {
       width: 0.3em;

package/src/components/pageSubtitle/index.vue

@@ -5,7 +5,8 @@
     :has-info-text="!!infoText"
     :margin-bottom="marginBottom"
   >
-    <span data-test-id="page_subtitle_text">
+    <span v-if="containsHtml" data-test-id="page_subtitle_text" v-html="text"></span>
+    <span v-else data-test-id="page_subtitle_text">
       {{ text }}
     </span>
     <InfoText
@@ -58,6 +59,11 @@
         required: true,
         type: String,
       },
+      containsHtml: {
+        required: false,
+        type: Boolean,
+        default: false,
+      },
       color: {
         required: false,
         type: String,

package/src/components/projectMarker/index.vue

@@ -59,8 +59,7 @@
           <MainButton :text="$gettext('Delete')" @click="onDelete" />
           <MainButton
             :text="$gettext('Cancel')"
-            type="primary"
-            variant="cancel"
+            type="cancel"
             @click="closeDeleteModal"
           />
         </CtaContainer>

package/src/components/sideMenu/index.vue

@@ -9,54 +9,34 @@
           v-if="!item.children"
           :key="idx"
           :data-id="`sub_menu_settings_${item.key}`"
-          :fill-type="item.icon === 'free_technology' ? 'stroke' : 'fill'"
           :is-active="activeTab === item.key || activeParentTab === item.key"
           @click="$emit('tab-click', { activeKey: item.key })"
         >
-          <IconContainer :is-active="activeTab === item.key">
-            <Icon
-              :color="
-                activeTab === item.key ? theme.semanticColors.purple[500] : ''
-              "
-              cursor="pointer"
-              :fill-type="item.fillType"
-              :name="item.icon"
-              size="18px"
-            />
+          <IconContainer
+            :is-active="activeTab === item.key || activeParentTab === item.key"
+          >
+            <Icon color="#fff" cursor="pointer" :name="item.icon" size="18px" />
           </IconContainer>
-          <ListText :is-active="activeTab === item.key">{{
-            $gettext(item.label)
-          }}</ListText>
+          <ListText>{{ $gettext(item.label) }}</ListText>
         </ListItem>
         <CollapseWrapper v-else :key="idx + item.key">
           <CollapseContainer
             :data-id="`sub_menu_settings_${item.key}`"
-            :is-active="activeParentTab === item.key"
             @click="toggleActiveDropdown(item.key)"
           >
             <IconContainer :is-active="activeParentTab === item.key">
               <Icon
-                :color="
-                  activeParentTab === item.key
-                    ? theme.semanticColors.purple[500]
-                    : ''
-                "
+                color="#fff"
                 cursor="pointer"
                 :name="item.icon"
                 size="18px"
               />
             </IconContainer>
-            <ListText :is-active="activeTab === item.key">{{
-              $gettext(item.label)
-            }}</ListText>
+            <ListText>{{ $gettext(item.label) }}</ListText>
             <ArrowContainer>
               <Icon
-                :color="theme.semanticColors.grey[800]"
-                :name="
-                  activeDropdown === item.key
-                    ? 'arrow_up_unfilled'
-                    : 'arrow_down_unfilled'
-                "
+                color="white"
+                :name="activeDropdown === item.key ? 'arrow_up' : 'arrow_down'"
                 size="10px"
               />
             </ArrowContainer>
@@ -88,7 +68,7 @@
         @click="$emit('on-logout')"
       >
         <RotateIcon
-          :color="theme.semanticColors.teal[800]"
+          color="#fff"
           cursor="pointer"
           name="initial_situation"
           size="18px"
@@ -103,11 +83,11 @@
   import styled from 'vue3-styled-components'
   import Icon from '../icon'
   import Spinner from '../spinner'
-  import theme from '@/assets/theme.js'
 
   const PageAttrs = { isLoading: Boolean }
   const PageContainer = styled('div', PageAttrs)`
-    background-color: ${(props) => props.theme.semanticColors.grey[100]};
+    background-color: ${(props) =>
+      props.isLoading ? props.theme.colors.white : props.theme.colors.grey6};
     padding: 14px 12px;
     min-width: 220px;
     display: flex;
@@ -120,7 +100,7 @@
     grid-gap: 6px;
   `
 
-  const IconAttrs = { isActive: Boolean, isButton: Boolean, fillType: String }
+  const IconAttrs = { isActive: Boolean, isButton: Boolean }
 
   const ListItem = styled('div', IconAttrs)`
     display: grid;
@@ -129,28 +109,19 @@
     grid-gap: 20px;
     cursor: pointer;
     padding: 4px;
-    border-radius: 4px;
+    border-radius: 6px;
     background-color: ${(props) =>
-      props.isActive ? props.theme.semanticColors.purple[50] : ''};
-    color: ${(props) =>
-      props.isActive
-        ? props.theme.semanticColors.purple[500]
-        : props.theme.semanticColors.teal[800]};
+      props.isActive ? 'rgba(255, 255, 255, 0.1)' : ''};
 
     :hover {
-      background-color: ${(props) => props.theme.semanticColors.purple[100]};
-      color: ${(props) => props.theme.semanticColors.purple[500]};
-      svg path:not(.fix) {
-        ${(props) => props.fillType}: ${(props) =>
-          props.theme.semanticColors.purple[500]};
-      }
+      background-color: rgba(255, 255, 255, 0.1);
     }
   `
 
-  const ListTextAttrs = { isActive: Boolean }
-  const ListText = styled('div', ListTextAttrs)`
-    font-size: 14px;
-    font-weight: 400;
+  const ListText = styled.div`
+    font-size: 16px;
+    font-weight: 700;
+    color: ${(props) => props.theme.colors.white};
   `
 
   const IconContainer = styled('div', IconAttrs)`
@@ -159,16 +130,18 @@
     justify-items: center;
     width: 32px;
     height: 32px;
+    background-color: ${(props) =>
+      props.isActive ? props.theme.colors.red : 'rgba(255, 255, 255, 0.2)'};
     border-radius: 6px;
 
     ${({ isButton = false }) =>
       isButton &&
       `
-        cursor: pointer;
-        &:hover {
-          background-color: ${(props) =>
-            props.theme.semanticColors.purple[100]};
-        `}
+  cursor: pointer;
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.3);
+  }
+  `}
   `
 
   const SpinnerContainer = styled.div`
@@ -188,7 +161,7 @@
   const AppVersion = styled.p`
     font-size: 11px;
     line-height: 13px;
-    color: ${(props) => props.theme.semanticColors.teal[800]};
+    color: ${(props) => props.theme.colors.white};
     margin-right: 6px;
   `
 
@@ -201,46 +174,30 @@
     cursor: pointer;
     margin-left: 65px;
     padding: 8px;
-    border-radius: 4px;
-    color: ${(props) =>
-      props.isActive
-        ? props.theme.semanticColors.purple[500]
-        : props.theme.semanticColors.teal[800]};
-    font-weight: 400;
-    font-size: 14px;
-    background: ${(props) =>
-      props.isActive ? props.theme.semanticColors.purple[50] : ''};
+    border-radius: 6px;
+    color: ${(props) => props.theme.colors.white};
+    font-weight: 700;
+    ${({ isActive }) =>
+      isActive &&
+      `
+    background: rgba(255, 255, 255, 0.1);
+  `}
 
     &:hover {
-      background: ${(props) => props.theme.semanticColors.purple[100]};
-      color: ${(props) => props.theme.semanticColors.purple[500]} !important;
+      background: rgba(255, 255, 255, 0.1);
     }
   `
 
-  const CollapseContainerAttrs = { isActive: Boolean }
-  const CollapseContainer = styled('div', CollapseContainerAttrs)`
+  const CollapseContainer = styled.div`
     display: grid;
     grid-template-columns: auto 1fr auto;
     grid-gap: 20px;
     padding: 4px;
-    padding-right: 13px;
     border-radius: 6px;
     align-items: center;
     cursor: pointer;
-    background: ${(props) =>
-      props.isActive ? props.theme.semanticColors.purple[50] : ''};
-
-    div {
-      color: ${(props) =>
-        props.isActive ? props.theme.semanticColors.purple[500] : ''};
-    }
-
     &:hover {
-      background: ${(props) => props.theme.semanticColors.purple[100]};
-      color: ${(props) => props.theme.semanticColors.purple[500]};
-      svg path:not(.fix) {
-        fill: ${(props) => props.theme.semanticColors.purple[500]};
-      }
+      background: rgba(255, 255, 255, 0.1);
     }
   `
 
@@ -297,9 +254,17 @@
     data() {
       return {
         activeDropdown: null,
-        theme,
       }
     },
+    methods: {
+      toggleActiveDropdown(value) {
+        if (this.activeDropdown === value) {
+          this.activeDropdown = null
+        } else {
+          this.activeDropdown = value
+        }
+      },
+    },
     watch: {
       activeTab: {
         // once active tab is received, check if any parent
@@ -312,14 +277,5 @@
         once: true,
       },
     },
-    methods: {
-      toggleActiveDropdown(value) {
-        if (this.activeDropdown === value) {
-          this.activeDropdown = null
-        } else {
-          this.activeDropdown = value
-        }
-      },
-    },
   }
 </script>

package/src/components/spinner/index.vue

@@ -1,12 +1,12 @@
 <template>
-  <SpinnerContainer
-    v-if="fullWidth"
-    data-test-id="spinner_full_container"
-    :size="size"
-  >
+  <SpinnerContainer v-if="fullWidth" data-test-id="spinner_full_container">
     <Container>
-      <SpinnerWrapper data-test-id="spinner_full_wrapper" :size="size">
-        <SpinnerCircle :is-white="isWhite" :size="size" />
+      <SpinnerWrapper data-test-id="spinner_full_wrapper">
+        <SpinnerSvg
+          :class="{ white: isWhite }"
+          data-test-id="spinner_full_icon"
+          :style="{ width: size, height: size }"
+        />
       </SpinnerWrapper>
     </Container>
   </SpinnerContainer>
@@ -15,14 +15,21 @@
     data-test-id="spinner_container"
     :limited-to-modal="limitedToModal"
   >
-    <SpinnerWrapper data-test-id="spinner_wrapper" :size="size">
-      <SpinnerCircle :is-white="isWhite" :size="size" />
+    <SpinnerWrapper data-test-id="spinner_wrapper">
+      <SpinnerSvg
+        :class="{ white: isWhite }"
+        data-test-id="spinner_icon"
+        :style="{ width: size, height: size }"
+      />
     </SpinnerWrapper>
   </Container>
 </template>
 
 <script>
+  // import Spinner from "@eturnity/eturnity_reusable_components/src/components/spinner"
+  // <spinner size="30px" />
   import styled from 'vue3-styled-components'
+  import SpinnerSvg from '../../assets/icons/black_spinner.svg'
 
   const SpinnerContainer = styled.div`
     position: fixed;
@@ -36,80 +43,35 @@
     justify-items: center;
     z-index: 100;
   `
-
   const containerAttrs = { limitedToModal: Boolean }
   const Container = styled('div', containerAttrs)`
     display: grid;
     align-items: center;
     justify-items: center;
     position: ${(props) => (props.limitedToModal ? 'absolute' : 'inherit')};
-    height: ${(props) => (props.limitedToModal ? '100%' : 'auto')};
-    width: ${(props) => (props.limitedToModal ? '100%' : 'auto')};
+    height: ${(props) => (props.limitedToModal ? '100%' : 'inherit')};
+    width: ${(props) => (props.limitedToModal ? '100%' : 'inherit')};
   `
 
-  const wrapperAttrs = { size: String }
-  const SpinnerWrapper = styled('div', wrapperAttrs)`
-    width: ${(props) => getSpinnerSize(props.size)};
-    height: ${(props) => getSpinnerSize(props.size)};
-  `
+  const SpinnerWrapper = styled.div`
+    width: ${(props) => (props.size ? props.size : '60px')};
+    height: auto;
 
-  const getSpinnerSize = (size) => {
-    switch (size) {
-      case 'small':
-        return '24px'
-      case 'large':
-        return '56px'
-      case 'medium':
-      default:
-        return '40px'
-    }
-  }
-
-  const circleAttrs = { size: String, isWhite: Boolean }
-  const SpinnerCircle = styled('div', circleAttrs)`
-    width: 100%;
-    height: 100%;
-    border-radius: 100%;
-    border: ${(props) => (props.size === 'large' ? '4px' : '2px')} solid
-      ${(props) =>
-        props.isWhite ? props.theme.colors.grey5 : props.theme.colors.white};
-    border-top-color: ${(props) =>
-      props.isWhite
-        ? props.theme.colors.white
-        : props.theme.semanticColors.purple[500]};
-    border-right-color: ${(props) =>
-      props.isWhite
-        ? props.theme.colors.white
-        : props.theme.semanticColors.purple[500]};
-    border-bottom-color: ${(props) =>
-      props.isWhite
-        ? props.theme.colors.white
-        : props.theme.semanticColors.purple[500]};
-    animation: spin 1s linear infinite;
-    transform: rotate(90deg);
-
-    @keyframes spin {
-      to {
-        transform: rotate(450deg);
-      }
+    .white {
+      filter: brightness(0) invert(1);
     }
   `
 
   export default {
-    name: 'NewSpinner',
+    name: 'SpinnerComponent',
     components: {
-      SpinnerContainer,
-      SpinnerCircle,
       Container,
       SpinnerWrapper,
+      SpinnerContainer,
+      SpinnerSvg,
     },
     props: {
-      size: {
-        type: String,
-        default: 'medium',
-        validator: (value) => ['small', 'medium', 'large'].includes(value),
-      },
-      isWhite: {
+      fullWidth: {
         required: false,
         default: false,
         type: Boolean,
@@ -119,7 +81,12 @@
         default: false,
         type: Boolean,
       },
-      fullWidth: {
+      size: {
+        required: false,
+        default: '60px',
+        type: String,
+      },
+      isWhite: {
         required: false,
         default: false,
         type: Boolean,