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

package/src/components/panelRangeInfo/index.vue

@@ -0,0 +1,196 @@
+<template>
+  <Container :width="width">
+    <MainLine />
+    <MainLineHighlight :max-percent="maxPercent" :min-percent="minPercent" />
+    <TopValueContainer :position="valuePercent + '%'">
+      <TextWrapper :background-color="arrowColor">{{ value }}</TextWrapper>
+      <Arrow :background-color="arrowColor" />
+      <VerticalMarkerArrow :color="colorVerticalMarkerArrow" />
+    </TopValueContainer>
+    <BottomValueContainer :position="minPercent + '%'">
+      <TextWrapper>{{ minValue }}</TextWrapper>
+      <VerticalMarker side="bottom" />
+    </BottomValueContainer>
+    <BottomValueContainer :position="maxPercent + '%'">
+      <TextWrapper>{{ maxValue }}</TextWrapper>
+      <VerticalMarker side="bottom" />
+    </BottomValueContainer>
+  </Container>
+</template>
+
+<script>
+  // import ProgressBar from "@eturnity/eturnity_reusable_components/src/components/progressBar"
+  //To Use:
+  // <progress-bar
+  //   fillColor="#000"
+  //   backgroundColor="#888"
+  //   minWidth="150px"
+  //   maxWidth="100%"
+  //   :fillProgress="50" //should be a number for percent
+  //   stepNumber="4"
+  //   :labelText="translate('step')"
+  // />
+  import styled from 'vue3-styled-components'
+  const Container = styled.div`
+    position: relative;
+    display: flex;
+    height: 47px;
+    width: ${(props) => props.width};
+  `
+  const TopValueContainer = styled('div', { position: String })`
+    font-size: 11px;
+    left: ${(props) => props.position};
+    position: absolute;
+    display: flex;
+    justify-content: center
+    width: 0px;
+    color:${(props) => props.theme.colors.black};
+    item-align: center;
+
+  `
+  const BottomValueContainer = styled('div', { position: String })`
+    font-size: 12px;
+    left: ${(props) => props.position};
+    width: 0px;
+    bottom: -2px;
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    item-align: center;
+    border-radius: 4px;
+    color: white;
+  `
+  const TextWrapper = styled('div', { backgroundColor: String })`
+    padding: 2px 6px;
+    background-color: ${(props) =>
+      props.theme.colors[props.backgroundColor] || props.backgroundColor};
+    border-radius: 4px;
+  `
+  const Arrow = styled('div', { backgroundColor: String })`
+    position: absolute;
+    bottom: -10px;
+    left: calc(50% - 6px);
+    width: 0;
+    height: 0;
+    border: 6px solid transparent;
+    border-top-color: ${(props) =>
+      props.theme.colors[props.backgroundColor] || props.backgroundColor};
+    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
+  `
+  const MainLine = styled.div`
+    display: block;
+    position: absolute;
+    bottom: 16px;
+    height: 4px;
+    width: 100%;
+    border-radius: 4px;
+    background-color: ${(props) => props.theme.colors.grey4};
+  `
+  const MainLineHighlight = styled('div', {
+    minPercent: Number,
+    maxPercent: Number,
+  })`
+    display: block;
+    position: absolute;
+    left: ${(props) => props.minPercent + '%'};
+    right: ${(props) => 100 - props.maxPercent + '%'};
+    bottom: 16px;
+    height: 4px;
+    background-color: white;
+  `
+  const VerticalMarker = styled('div')`
+    position: absolute;
+    width: 1px;
+    height: 8px;
+    background-color: white;
+    display: inline-block;
+    top: -6px;
+    left: 0px;
+  `
+  const VerticalMarkerArrow = styled('div', { color: String })`
+    position: absolute;
+    width: 1px;
+    height: 4px;
+    background-color: ${(props) => props.color};
+    display: inline-block;
+    bottom: -14px;
+    left: 0px;
+  `
+  export default {
+    name: 'ProgressBar',
+    components: {
+      Container,
+      MainLineHighlight,
+      Arrow,
+      TopValueContainer,
+      BottomValueContainer,
+      MainLine,
+      VerticalMarker,
+      VerticalMarkerArrow,
+      TextWrapper,
+    },
+    props: {
+      minValue: {
+        required: true,
+        type: Number,
+      },
+      maxValue: {
+        required: true,
+        type: Number,
+      },
+      value: {
+        required: true,
+        type: Number,
+      },
+      arrowColor: {
+        required: false,
+        type: String,
+        default: 'white',
+      },
+      width: {
+        required: false,
+        type: String,
+        default: null,
+      },
+    },
+    data() {
+      return {}
+    },
+    computed: {
+      minPercent() {
+        if (this.maxValue === this.minValue) {
+          return 50
+        } else {
+          return 30
+        }
+      },
+      maxPercent() {
+        if (this.maxValue === this.minValue) {
+          return 50
+        } else {
+          return 70
+        }
+      },
+      valuePercent() {
+        let percent
+        if (this.maxValue === this.minValue) {
+          percent = this.minPercent + 10 * (this.value - this.minValue)
+        } else {
+          percent =
+            this.minPercent +
+            ((this.maxPercent - this.minPercent) /
+              (this.maxValue - this.minValue)) *
+              (this.value - this.minValue)
+        }
+        return Math.max(0, Math.min(100, percent))
+      },
+      colorVerticalMarkerArrow() {
+        if (this.value < this.maxValue && this.value > this.minValue) {
+          return 'black'
+        } else {
+          return 'white'
+        }
+      },
+    },
+  }
+</script>

package/src/components/projectMarker/index.vue

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

package/src/components/selectedOptions/index.vue

@@ -5,12 +5,7 @@
         <TitleContainer>
           <BoxTitle> {{ numberSelected }} {{ selectedText }} </BoxTitle>
           <IconContainer @click="$emit('on-close')">
-            <Icon
-              color="white"
-              cursor="pointer"
-              name="close_for_modals,_tool_tips"
-              size="14px"
-            />
+            <Icon color="white" cursor="pointer" name="close" size="14px" />
           </IconContainer>
         </TitleContainer>
         <DividerContainer>
@@ -91,12 +86,7 @@
         </EmptyText>
         <CloseContainer>
           <IconContainer @click="$emit('on-close')">
-            <Icon
-              color="white"
-              cursor="pointer"
-              name="close_for_modals,_tool_tips"
-              size="14px"
-            />
+            <Icon color="white" cursor="pointer" name="close" size="14px" />
           </IconContainer>
         </CloseContainer>
       </BoxContainer>
@@ -163,6 +153,7 @@
     width: auto;
     max-width: 70%;
     transform: translateX(-50%);
+    z-index: 999;
   `
 
   const CenterPageContainer = styled.div`

package/src/components/selectedOptions/selectedOptions.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('RCSelectedOptions.vue', () => {

package/src/components/sideMenu/index.vue

@@ -9,34 +9,54 @@
           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 || activeParentTab === item.key"
-          >
-            <Icon color="#fff" cursor="pointer" :name="item.icon" size="18px" />
+          <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>
-          <ListText>{{ $gettext(item.label) }}</ListText>
+          <ListText :is-active="activeTab === item.key">{{
+            $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="#fff"
+                :color="
+                  activeParentTab === item.key
+                    ? theme.semanticColors.purple[500]
+                    : ''
+                "
                 cursor="pointer"
                 :name="item.icon"
                 size="18px"
               />
             </IconContainer>
-            <ListText>{{ $gettext(item.label) }}</ListText>
+            <ListText :is-active="activeTab === item.key">{{
+              $gettext(item.label)
+            }}</ListText>
             <ArrowContainer>
               <Icon
-                color="white"
-                :name="activeDropdown === item.key ? 'arrow_up' : 'arrow_down'"
+                :color="theme.semanticColors.grey[800]"
+                :name="
+                  activeDropdown === item.key
+                    ? 'arrow_up_unfilled'
+                    : 'arrow_down_unfilled'
+                "
                 size="10px"
               />
             </ArrowContainer>
@@ -68,7 +88,7 @@
         @click="$emit('on-logout')"
       >
         <RotateIcon
-          color="#fff"
+          :color="theme.semanticColors.teal[800]"
           cursor="pointer"
           name="initial_situation"
           size="18px"
@@ -83,11 +103,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.isLoading ? props.theme.colors.white : props.theme.colors.grey6};
+    background-color: ${(props) => props.theme.semanticColors.grey[100]};
     padding: 14px 12px;
     min-width: 220px;
     display: flex;
@@ -100,7 +120,7 @@
     grid-gap: 6px;
   `
 
-  const IconAttrs = { isActive: Boolean, isButton: Boolean }
+  const IconAttrs = { isActive: Boolean, isButton: Boolean, fillType: String }
 
   const ListItem = styled('div', IconAttrs)`
     display: grid;
@@ -109,19 +129,28 @@
     grid-gap: 20px;
     cursor: pointer;
     padding: 4px;
-    border-radius: 6px;
+    border-radius: 4px;
     background-color: ${(props) =>
-      props.isActive ? 'rgba(255, 255, 255, 0.1)' : ''};
+      props.isActive ? props.theme.semanticColors.purple[50] : ''};
+    color: ${(props) =>
+      props.isActive
+        ? props.theme.semanticColors.purple[500]
+        : props.theme.semanticColors.teal[800]};
 
     :hover {
-      background-color: rgba(255, 255, 255, 0.1);
+      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]};
+      }
     }
   `
 
-  const ListText = styled.div`
-    font-size: 16px;
-    font-weight: 700;
-    color: ${(props) => props.theme.colors.white};
+  const ListTextAttrs = { isActive: Boolean }
+  const ListText = styled('div', ListTextAttrs)`
+    font-size: 14px;
+    font-weight: 400;
   `
 
   const IconContainer = styled('div', IconAttrs)`
@@ -130,18 +159,16 @@
     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: rgba(255, 255, 255, 0.3);
-  }
-  `}
+        cursor: pointer;
+        &:hover {
+          background-color: ${(props) =>
+            props.theme.semanticColors.purple[100]};
+        `}
   `
 
   const SpinnerContainer = styled.div`
@@ -161,7 +188,7 @@
   const AppVersion = styled.p`
     font-size: 11px;
     line-height: 13px;
-    color: ${(props) => props.theme.colors.white};
+    color: ${(props) => props.theme.semanticColors.teal[800]};
     margin-right: 6px;
   `
 
@@ -174,30 +201,46 @@
     cursor: pointer;
     margin-left: 65px;
     padding: 8px;
-    border-radius: 6px;
-    color: ${(props) => props.theme.colors.white};
-    font-weight: 700;
-    ${({ isActive }) =>
-      isActive &&
-      `
-    background: rgba(255, 255, 255, 0.1);
-  `}
+    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] : ''};
 
     &:hover {
-      background: rgba(255, 255, 255, 0.1);
+      background: ${(props) => props.theme.semanticColors.purple[100]};
+      color: ${(props) => props.theme.semanticColors.purple[500]} !important;
     }
   `
 
-  const CollapseContainer = styled.div`
+  const CollapseContainerAttrs = { isActive: Boolean }
+  const CollapseContainer = styled('div', CollapseContainerAttrs)`
     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: rgba(255, 255, 255, 0.1);
+      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]};
+      }
     }
   `
 
@@ -254,17 +297,9 @@
     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
@@ -277,5 +312,14 @@
         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">
+  <SpinnerContainer
+    v-if="fullWidth"
+    data-test-id="spinner_full_container"
+    :size="size"
+  >
     <Container>
-      <SpinnerWrapper data-test-id="spinner_full_wrapper">
-        <SpinnerSvg
-          :class="{ white: isWhite }"
-          data-test-id="spinner_full_icon"
-          :style="{ width: size, height: size }"
-        />
+      <SpinnerWrapper data-test-id="spinner_full_wrapper" :size="size">
+        <SpinnerCircle :is-white="isWhite" :size="size" />
       </SpinnerWrapper>
     </Container>
   </SpinnerContainer>
@@ -15,21 +15,14 @@
     data-test-id="spinner_container"
     :limited-to-modal="limitedToModal"
   >
-    <SpinnerWrapper data-test-id="spinner_wrapper">
-      <SpinnerSvg
-        :class="{ white: isWhite }"
-        data-test-id="spinner_icon"
-        :style="{ width: size, height: size }"
-      />
+    <SpinnerWrapper data-test-id="spinner_wrapper" :size="size">
+      <SpinnerCircle :is-white="isWhite" :size="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;
@@ -43,35 +36,80 @@
     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%' : 'inherit')};
-    width: ${(props) => (props.limitedToModal ? '100%' : 'inherit')};
+    height: 100%;
+    width: 100%;
+  `
+
+  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);
 
-    .white {
-      filter: brightness(0) invert(1);
+    @keyframes spin {
+      to {
+        transform: rotate(450deg);
+      }
     }
   `
 
   export default {
-    name: 'SpinnerComponent',
+    name: 'NewSpinner',
     components: {
+      SpinnerContainer,
+      SpinnerCircle,
       Container,
       SpinnerWrapper,
-      SpinnerContainer,
-      SpinnerSvg,
     },
     props: {
-      fullWidth: {
+      size: {
+        type: String,
+        default: 'medium',
+        validator: (value) => ['small', 'medium', 'large'].includes(value),
+      },
+      isWhite: {
         required: false,
         default: false,
         type: Boolean,
@@ -81,12 +119,7 @@
         default: false,
         type: Boolean,
       },
-      size: {
-        required: false,
-        default: '60px',
-        type: String,
-      },
-      isWhite: {
+      fullWidth: {
         required: false,
         default: false,
         type: Boolean,