@eturnity/eturnity_reusable_components 7.51.16-EPDM-13568.4 → 7.51.16-EPDM-10609.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.51.16-EPDM-13568.4",
+  "version": "7.51.16-EPDM-10609.14",
   "files": [
     "dist",
     "src"

package/src/App.vue

@@ -1,22 +1,22 @@
 <template>
-  <ThemeProvider :style="{ height: '100%' }" :theme="theme">
+  <ThemeProvider :style="{ height: '100%' }" :theme="getTheme()">
     <RouterView />
   </ThemeProvider>
 </template>
 
 <script>
   import { ThemeProvider } from 'vue3-styled-components'
-  import theme from '@/assets/theme.js'
+  import theme from './assets/theme'
 
   export default {
     name: 'App',
     components: {
       ThemeProvider,
     },
-    setup() {
-      return {
-        theme,
-      }
+    methods: {
+      getTheme() {
+        return theme
+      },
     },
   }
 </script>

package/src/assets/svgIcons/plus_button.svg

@@ -0,0 +1,4 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 10V12L0 12L1.19209e-07 10L22 10Z" fill="white"/>
+<path d="M10 0H12V22H10V0Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/star.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 9.46199L9.708 11.7L8.724 7.48199L12 4.64399L7.686 4.27799L6 0.299988L4.314 4.27799L0 4.64399L3.276 7.48199L2.292 11.7L6 9.46199Z" fill="#FDB813"/>
+</svg>

package/src/assets/theme.js

@@ -1,7 +1,7 @@
 const theme = {
   colors: {
-    primary: '#5900CC',
-    secondary: '#FAF5FF',
+    primary: '#48a2d0',
+    secondary: '#fdb813',
     tertiary: '#d5d5d5',
     black: '#263238',
     yellow: '#fdb813',
@@ -11,6 +11,7 @@ const theme = {
     lightGray: '#f2f2f2',
     white: '#ffffff',
     blue: '#48a2d0',
+    blue2: '#6CD4D4',
     red: '#ff5656',
     blue1: '#e4efff',
     brightBlue: '#0068DE',

package/src/components/addNewButton/index.vue

@@ -1,6 +1,6 @@
 <template>
   <PageContainer :should-position="shouldPosition">
-    <ButtonContainer :data-id="dataId" :data-qa-id="dataQaId">
+    <ButtonContainer :data-id="dataId">
       <PlusButtonSvg />
     </ButtonContainer>
   </PageContainer>
@@ -57,10 +57,6 @@
         type: String,
         default: '',
       },
-      dataQaId: {
-        type: String,
-        default: '',
-      },
     },
   }
 </script>

package/src/components/buttons/buttonIcon/index.vue

@@ -1,31 +1,19 @@
 <template>
   <PageContainer>
     <ButtonWrapper
-      :button-size="buttonSize"
       :custom-color="customColor"
+      :height="height"
       :is-disabled="isDisabled"
       :min-width="minWidth"
-      :theme-type="themeType"
-      :type="type"
-      :variant="variant"
     >
-      <IconContainer
-        :button-size="buttonSize"
-        :theme-type="themeType"
-        :type="type"
-        :variant="variant"
-      >
+      <IconContainer :width="height">
         <Icon
-          :color="
-            iconColor ||
-            theme.mainButton[themeType][type][variant].textColor ||
-            theme.colors.white
-          "
+          :color="fontColor ? fontColor : theme.colors.white"
           :name="iconName"
           size="14px"
         />
       </IconContainer>
-      <ButtonContainer :button-size="buttonSize">
+      <ButtonContainer :font-color="fontColor" :font-size="fontSize">
         {{ text }}
       </ButtonContainer>
     </ButtonWrapper>
@@ -52,96 +40,61 @@
   const PageContainer = styled.div``
 
   const ButtonAttrs = {
-    type: String,
     isDisabled: Boolean,
     minWidth: String,
     customColor: String,
-    buttonSize: String,
-    themeType: String,
-    variant: String,
+    height: String,
   }
   const ButtonWrapper = styled('div', ButtonAttrs)`
     display: grid;
     grid-template-columns: auto 1fr;
-    font-size: ${(props) =>
-      props.theme?.mainButton?.size?.[props.buttonSize]?.fontSize};
-    color: ${(props) =>
-      props.isDisabled
-        ? props.theme.mainButton[props.themeType][props.type][props.variant]
-            .disabled.textColor
-        : props.theme.mainButton[props.themeType][props.type][props.variant]
-            .textColor};
     background-color: ${(props) =>
       props.isDisabled
-        ? props.theme.mainButton[props.themeType][props.type][props.variant]
-            .disabled.backgroundColor
+        ? props.theme.colors.disabled
         : props.customColor
-        ? props.customColor
-        : props.theme.mainButton[props.themeType][props.type][props.variant]
-            .default};
-    border: ${(props) => {
-      const borderValue = props.isDisabled
-        ? props.theme.mainButton[props.themeType][props.type][props.variant]
-            .disabled.borderColor
-        : props.theme.mainButton[props.themeType][props.type][props.variant]
-            .borderColor
-      return borderValue ? '1px solid ' + borderValue : 'none'
-    }};
+        ? props.theme.colors[props.customColor]
+          ? props.theme.colors[props.customColor]
+          : props.customColor
+        : props.theme.colors.yellow};
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
     user-select: none;
     border-radius: 4px;
     overflow: hidden;
-    min-width: ${(props) => props.minWidth || 'initial'};
+    min-width: ${(props) => (props.minWidth ? props.minWidth : 'initial')};
+    height: ${(props) => props.height};
 
     &:hover {
-      background-color: ${(props) =>
-        props.isDisabled
-          ? props.theme.mainButton[props.themeType][props.type][props.variant]
-              .disabled.backgroundColor
-          : props.theme.mainButton[props.themeType][props.type][props.variant]
-              .hover};
+      opacity: ${(props) => (props.isDisabled ? '1' : '0.8')};
     }
 
     &:active {
-      background-color: ${(props) =>
-        props.isDisabled
-          ? props.theme.mainButton[props.themeType][props.type][props.variant]
-              .disabled.backgroundColor
-          : props.theme.mainButton[props.themeType][props.type][props.variant]
-              .active};
+      opacity: 1;
     }
   `
 
   const ButtonContainerAttrs = {
-    buttonSize: String,
+    fontSize: String,
+    fontColor: String,
   }
   const ButtonContainer = styled('div', ButtonContainerAttrs)`
+    font-size: ${(props) => props.fontSize};
+    color: ${(props) =>
+      props.fontColor ? props.fontColor : props.theme.colors.white};
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: ${(props) =>
-      props.theme?.mainButton?.size?.[props.buttonSize]?.padding};
+    padding: 0 14px;
   `
 
   const IconContainerAttrs = {
-    buttonSize: String,
-    themeType: String,
-    type: String,
-    variant: String,
+    width: String,
   }
   const IconContainer = styled('div', IconContainerAttrs)`
     display: grid;
     align-items: center;
     justify-items: center;
-    width: ${(props) =>
-      props.theme?.mainButton?.size?.[props.buttonSize]?.iconWidth};
-    background: rgba(255, 255, 255, 0.1);
-    border-right: ${(props) => {
-      const borderColor =
-        props.theme.mainButton[props.themeType][props.type][props.variant]
-          .borderColor
-      return borderColor ? `1px solid ${borderColor}` : 'none'
-    }};
+    width: ${(props) => props.width};
+    background: ${(props) => props.theme.colors.white + '1a'};
   `
 
   export default {
@@ -154,53 +107,35 @@
       Icon,
     },
     props: {
-      type: {
-        required: false,
-        default: 'primary',
-        type: String,
-      },
-      variant: {
-        required: false,
-        default: 'main',
-        type: String,
-      },
-      themeType: {
-        type: String,
-        default: 'light',
-        required: false,
-      },
-      buttonSize: {
-        type: String,
-        default: 'medium',
-        required: false,
-      },
       isDisabled: {
         required: false,
         default: false,
-        type: Boolean,
       },
       text: {
         required: true,
-        type: String,
       },
       minWidth: {
         required: false,
         default: null,
-        type: String,
       },
       customColor: {
         required: false,
         default: null,
-        type: String,
       },
       iconName: {
         required: true,
-        type: String,
       },
-      iconColor: {
+      fontColor: {
         required: false,
         default: null,
-        type: String,
+      },
+      fontSize: {
+        required: false,
+        default: '13px',
+      },
+      height: {
+        required: false,
+        default: '30px',
       },
     },
     data() {
@@ -208,14 +143,5 @@
         theme: Theme,
       }
     },
-    // computed: {
-    //   getIconColor() {
-    //     console.log(this.theme[this.themeType][this.type][this.variant])
-    //     return (
-    //       this.iconColor ||
-    //       this.theme[this.themeType][this.type][this.variant].textColor
-    //     )
-    //   },
-    // },
   }
 </script>

package/src/components/buttons/mainButton/index.vue

@@ -2,21 +2,17 @@
   <PageContainer>
     <ButtonContainer
       :id="id"
-      :app-theme="appTheme"
-      :button-size="buttonSize"
       :custom-color="customColor"
       :data-id="dataId"
-      :data-qa-id="dataQaId"
       :font-color="fontColor"
       :height="height"
       :is-disabled="isDisabled"
       :min-width="minWidth"
       :no-wrap="noWrap"
       :type="type"
-      :variant="variant"
     >
       <LabelComponent :has-icon="Boolean(icon)">
-        <Icon v-if="icon" :color="iconColor" :name="icon" size="14px" />
+        <Icon v-if="icon" :name="icon" :color="iconColor" size="14px" />
         {{ text }}
       </LabelComponent>
     </ButtonContainer>
@@ -49,40 +45,30 @@
     fontColor: String,
     noWrap: Boolean,
     height: String,
-    variant: String,
-    buttonSize: String,
-    appTheme: String,
   }
   const ButtonContainer = styled('div', ButtonAttrs)`
     display: flex;
     justify-content: center;
-    padding: ${(props) =>
-      props.theme?.mainButton?.size?.[props.buttonSize]?.padding};
-    font-size: ${(props) =>
-      props.theme?.mainButton?.size?.[props.buttonSize]?.fontSize};
+    padding: 7px 15px;
+    font-size: 14px;
     color: ${(props) =>
       props.isDisabled
-        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .disabled.textColor
-        : props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .textColor};
+        ? props.theme.colors.white
+        : props.fontColor
+        ? props.fontColor
+        : props.theme.colors.white};
     background-color: ${(props) =>
       props.isDisabled
-        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .disabled.backgroundColor
+        ? props.theme.colors.disabled
         : props.customColor
         ? props.customColor
-        : props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .default};
-
-    border: ${(props) => {
-      const borderValue = props.isDisabled
-        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .disabled.borderColor
-        : props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .borderColor
-      return borderValue ? '1px solid ' + borderValue : 'none'
-    }};
+        : props.type === 'primary'
+        ? props.theme.colors.black
+        : props.type === 'secondary'
+        ? props.theme.colors.grey3
+        : props.type === 'cancel'
+        ? props.theme.colors.red
+        : props.theme.colors.black};
     border-radius: 4px;
     text-align: center;
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
@@ -92,21 +78,11 @@
     height: ${(props) => props.height};
 
     &:hover {
-      background-color: ${(props) =>
-        props.isDisabled
-          ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-              .disabled.backgroundColor
-          : props.theme.mainButton[props.appTheme][props.type][props.variant]
-              .hover};
+      opacity: ${(props) => (props.isDisabled ? '1' : '0.8')};
     }
 
     &:active {
-      background-color: ${(props) =>
-        props.isDisabled
-          ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-              .disabled.backgroundColor
-          : props.theme.mainButton[props.appTheme][props.type][props.variant]
-              .active};
+      opacity: 1;
     }
   `
 
@@ -132,12 +108,7 @@
     props: {
       type: {
         required: false,
-        default: 'primary', // primary, secondary, tertiary, ghost
-        type: String,
-      },
-      variant: {
-        required: false,
-        default: 'main', // main, cancel
+        default: 'primary',
         type: String,
       },
       isDisabled: {
@@ -193,19 +164,6 @@
         type: String,
         default: '',
       },
-      dataQaId: {
-        type: String,
-        default: '',
-      },
-      appTheme: {
-        type: String,
-        default: 'light',
-      },
-      buttonSize: {
-        type: String,
-        default: 'medium',
-        required: false,
-      },
     },
   }
 </script>

package/src/components/filter/filterSettings.vue

@@ -297,13 +297,12 @@
       <MainButton
         v-if="buttonText.cancel"
         :text="buttonText.cancel"
-        type="primary"
-        variant="cancel"
+        type="cancel"
         @click="$emit('on-cancel-view')"
       />
       <ResetContainer v-if="!filterViews || !filterViews.length">
         <ResetButton @click="$emit('on-reset-filters')">
-          <Icon :color="theme.colors.primary" :name="'update'" size="14px" />
+          <Icon :color="theme.colors.blue" :name="'update'" size="14px" />
           <div>{{ $gettext('reset_filters') }}</div>
         </ResetButton>
       </ResetContainer>
@@ -476,7 +475,7 @@
     margin-top: 20px;
     align-self: center;
     font-size: 13px;
-    color: ${(props) => props.theme.colors.primary};
+    color: ${(props) => props.theme.colors.blue};
     cursor: pointer;
   `
 

package/src/components/icon/index.vue

@@ -19,9 +19,6 @@
       :color="color"
       data-test-id="icon_striked_line"
     />
-    <CountWrapper v-if="count > 0" data-test-id="icon_count">
-      {{ counter }}
-    </CountWrapper>
   </Wrapper>
 </template>
 
@@ -37,7 +34,7 @@
   //   isStriked = "true"
   // />
 
-  import { computed, onMounted, reactive, watch } from 'vue'
+  import { onMounted, reactive, watch } from 'vue'
   import styled from 'vue3-styled-components'
   import { fetchIcon } from './iconCache.mjs'
 
@@ -72,10 +69,6 @@
       required: false,
       default: null,
     },
-    count: {
-      required: false,
-      default: 0,
-    },
     animation: {
       required: false,
       default: 'none',
@@ -99,21 +92,6 @@
     line-height: 0;
   `
 
-  const CountWrapper = styled('div')`
-    position: absolute;
-    top: -7px;
-    right: -7px;
-    background-color: ${({ theme }) => theme.colors.red};
-    color: ${({ theme }) => theme.colors.white};
-    border-radius: 4px;
-    width: 15px;
-    height: 15px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 10px;
-  `
-
   const StrikedLine = styled('div', { color: String })`
     display: flex;
     position: absolute;
@@ -143,7 +121,6 @@
       background-color: ${(props) =>
         props.backgroundColor ? props.backgroundColor : 'transparent'};
       padding: ${(props) => (props.backgroundColor ? '3px' : '0')};
-      border-radius: 4px;
     }
     svg path:not(.fix) {
       ${({ theme, color }) => color && `fill: ${theme.colors[color] || color};`}
@@ -168,10 +145,6 @@
     icon.html = await fetchIcon(props.name.toLowerCase())
   }
 
-  const counter = computed(() =>
-    props.count > 9 ? '9+' : props.count.toString()
-  )
-
   onMounted(() => loadSvg())
 
   watch(() => props.name, loadSvg)

package/src/components/iconWrapper/index.vue

@@ -4,7 +4,6 @@
     :border-radius="borderRadius"
     :color="iconColor"
     :data-id="dataId"
-    :data-qa-id="dataQaId"
     :disabled="disabled"
     :has-border="hasBorder"
     :hovered-background-color="hoveredBackgroundColor"
@@ -155,10 +154,6 @@
         type: String,
         default: '',
       },
-      dataQaId: {
-        type: String,
-        default: '',
-      },
       isHovered: {
         required: false,
         default: false,

package/src/components/infoText/constants.js

@@ -0,0 +1,4 @@
+export const TEXT_OVERLAY_TOP_OFFSET = 35
+export const TEXT_OVERLAY_LEFT_OFFSET = 3
+export const TEXT_OVERLAY_ARROW_LEFT_OFFSET = 62
+export const TEXT_OVERLAY_ARROW_RIGHT_NEGATIVE_OFFSET = 68