@eturnity/eturnity_reusable_components 8.19.0 → 8.19.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.19.0",
+  "version": "8.19.2",
   "files": [
     "dist",
     "src"

package/src/assets/svgIcons/add_plus.svg

@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 0H8V14H6V0Z" fill="white"/>
+<path d="M14 6V8H0L8.74227e-08 6L14 6Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/order.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 4H14V6H2V4ZM2 8V12H14V8H2ZM1 4C1 3.44772 1.44772 3 2 3H14C14.5523 3 15 3.44772 15 4V12C15 12.5523 14.5523 13 14 13H2C1.44772 13 1 12.5523 1 12V4Z" fill="#263238"/>
+</svg>

package/src/components/buttons/mainButton/MainButton.stories.js

@@ -4,6 +4,9 @@ export default {
   title: 'MainButton',
   component: MainButton,
   tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
 }
 
 export const DefaultButton = {
@@ -49,3 +52,13 @@ export const IconButton = {
     customColor: '#fdb813',
   },
 }
+
+export const IconAltDesignButton = {
+  args: {
+    text: 'Click me',
+    icon: 'bell',
+    type: 'primary',
+    iconAltStyle: true,
+    iconAltStyleColor: '#f2f2f2',
+  },
+}

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

@@ -90,6 +90,7 @@
     ${(props) => (props.minWidth ? `min-width: ${props.minWidth};` : '')};
     ${(props) => (props.noWrap ? `white-space: nowrap;` : '')};
     height: ${(props) => props.height};
+    line-height: 1;
 
     &:hover {
       background-color: ${(props) =>
@@ -110,6 +111,30 @@
     }
   `
 
+  const AltAttrs = {
+    altStyle: Boolean,
+    color: String,
+  }
+
+  const IconContainer = styled('div', AltAttrs)`
+    background-color: ${(props) =>
+      props.color ? props.color : props.theme.colors.transparentWhite1};
+    padding: 7px;
+    height: 100%;
+    width: 30%;
+    justify-content: center;
+    display: flex;
+    align-items: center;
+    border-radius: 4px 0 0 4px;
+    color: ${(props) => props.theme.colors.white};
+    all: ${(props) => (props.altStyle ? '' : 'unset')};
+  `
+
+  const TextContainer = styled('span', AltAttrs)`
+    padding: ${(props) => (props.altStyle ? '7px' : '0')};
+    all: ${(props) => (props.altStyle ? '' : 'unset')};
+  `
+
   const LabelAttrs = {
     hasIcon: Boolean,
   }
@@ -155,6 +180,16 @@
         default: '',
         type: String,
       },
+      iconAltStyle: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
+      iconAltStyleColor: {
+        required: false,
+        default: null,
+        type: String,
+      },
       text: {
         required: true,
         type: String,

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

@@ -68,7 +68,17 @@
             <Icon name="current_variant" size="20px" />
           </IconWrapper>
           <IconWrapper v-if="hasError" data-test-id="error_wrapper" size="16px">
-            <Icon cursor="default" name="warning" size="16px" />
+            <InfoText
+              v-if="infoErrorMessage != ''"
+              :align-arrow="infoTextAlign"
+              :app-theme="appTheme"
+              button-type="error"
+              data-test-id="info_text_message"
+              icon-name="warning"
+              :size="fontSize ? fontSize : '16px'"
+              :text="infoErrorMessage"
+            />
+            <Icon v-else cursor="default" name="warning" size="16px" />
           </IconWrapper>
           <IconWrapper
             v-if="iconName && !hasError && inputType !== 'password'"
@@ -148,10 +158,10 @@
   }
   const InputContainer = styled('input', inputProps)`
     border: ${(props) =>
-      props.isError
-        ? '1px solid ' + props.theme.colors.red
-        : props.noBorder
+      props.noBorder
         ? 'none'
+        : props.isError
+        ? '1px solid ' + props.theme.colors.red
         : props.borderColor
         ? props.theme.colors[props.borderColor]
           ? '1px solid ' + props.theme.colors[props.borderColor]
@@ -410,6 +420,11 @@
         default: '',
         type: String,
       },
+      infoErrorMessage: {
+        required: false,
+        default: '',
+        type: String,
+      },
     },
     data() {
       return {

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

@@ -8,7 +8,9 @@
     <InputWrapper
       :align-items="alignItems"
       :has-label="!!label && label.length > 0"
+      :min-width="minWidth"
       :no-relative="noRelative"
+      :text-center="textCenter"
     >
       <LabelWrapper
         v-if="label"
@@ -43,7 +45,9 @@
         <SelectButton
           ref="select"
           :bg-color="
-            buttonBgColor || colorMode == 'dark'
+            buttonBgColor
+              ? buttonBgColor
+              : colorMode == 'dark'
               ? 'transparentBlack1'
               : colorMode == 'transparent'
               ? 'transparent'
@@ -72,6 +76,7 @@
           :show-border="showBorder"
           :show-disabled-background="showDisabledBackground"
           :table-padding-left="tablePaddingLeft"
+          :text-center="textCenter"
           @click="toggleDropdown"
           @keydown="onKeyDown"
         >
@@ -109,7 +114,12 @@
           >
             <slot name="selector" :selected-value="selectedValue"></slot>
           </Selector>
-          <Caret class="caret_dropdown" :color-mode="colorMode">
+          <Caret
+            v-if="showCaret"
+            class="caret_dropdown"
+            :color-mode="colorMode"
+            @click.stop="toggleCaretDropdown"
+          >
             <Icon
               v-if="isDropdownOpen"
               :color="
@@ -284,11 +294,13 @@
     selectWidth: String,
     optionWidth: String,
     noRelative: Boolean,
+    textCenter: Boolean,
   }
   const Container = styled('div', inputProps)`
     width: ${(props) => props.selectWidth};
     position: ${(props) => (props.noRelative ? 'static' : 'relative')};
     display: inline-block;
+    text-align: ${(props) => (props.textCenter ? 'center' : 'left')};
   `
 
   const LabelWrapperAttrs = { infoTextMessage: Boolean }
@@ -325,6 +337,7 @@
     showDisabledBackground: Boolean,
     colorMode: String,
     isSearchBarVisible: Boolean,
+    textCenter: Boolean,
   }
   const SelectButton = styled('div', selectButtonAttrs)`
     position: ${(props) => (props.noRelative ? 'static' : 'relative')};
@@ -345,7 +358,7 @@
               ? props.tablePaddingLeft
               : props.paddingLeft
           }`};
-    text-align: left;
+    text-align: ${(props) => (props.textCenter ? 'center' : 'left')};
     min-height: ${(props) =>
       props.selectHeight
         ? props.selectHeight
@@ -373,7 +386,7 @@
         ? props.theme.colors.grey5
         : props.theme.colors[props.bgColor]
         ? props.theme.colors[props.bgColor]
-        : props.bgColor};
+        : props.bgColor} !important;
     color: ${(props) =>
       props.colorMode === 'transparent'
         ? props.theme.colors.white
@@ -454,6 +467,7 @@
   const inputAttrs = {
     alignItems: String,
     hasLabel: Boolean,
+    minWidth: String,
     noRelative: Boolean,
   }
   const InputWrapper = styled('div', inputAttrs)`
@@ -661,6 +675,16 @@
         type: String,
         required: false,
       },
+      showCaret: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
+      textCenter: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
       isFixedDropdownPosition: {
         type: Boolean,
         required: false,

package/src/components/paginationV2/index.vue

@@ -0,0 +1,175 @@
+<template>
+  <!-- Check, if pages more than 1 -->
+  <PaginationWrapper v-if="paginationParams.pages > 1">
+    <PaginationLink v-if="paginationParams.previous" @click="fetchPage(1)">
+      <ArrowIconContainer>
+        <RCIcon name="start_of_the_list" size="14px" />
+      </ArrowIconContainer>
+    </PaginationLink>
+
+    <PaginationLink
+      v-if="paginationParams.previous"
+      @click="fetchPage(paginationParams.previous)"
+    >
+      <ArrowIconContainer>
+        <RCIcon name="arrow_left" size="14px" />
+      </ArrowIconContainer>
+    </PaginationLink>
+
+    <!-- Current block -->
+    <SelectWrapper>
+      <RCSelect
+        :button-font-color="getTheme.colors.gray1"
+        :dropdown-font-color="getTheme.colors.gray1"
+        font-size="14px"
+        :has-select-button-padding="false"
+        :is-auto-search="false"
+        :is-searchable="false"
+        :label-font-color="getTheme.colors.gray1"
+        left-padding="0px"
+        min-width="0px"
+        no-border
+        :no-max-width="true"
+        option-width="75px"
+        select-width="100%"
+        :show-border="false"
+        :show-caret="false"
+        text-center
+        :value="currentPage"
+        @input-change="fetchPage($event)"
+      >
+        <template #selector>
+          <SelectText>
+            {{ currentPage }} of {{ paginationParams.pages }}
+          </SelectText>
+        </template>
+        <template #dropdown>
+          <RCOption
+            v-for="number in paginationNumbers()"
+            :key="number"
+            text-center
+            :value="number"
+          >
+            {{ number }}
+          </RCOption>
+        </template>
+      </RCSelect>
+    </SelectWrapper>
+
+    <!-- Forward button -->
+    <PaginationLink
+      v-if="paginationParams.next"
+      @click="fetchPage(paginationParams.next)"
+    >
+      <ArrowIconContainer>
+        <RCIcon name="arrow_right" size="14px" />
+      </ArrowIconContainer>
+    </PaginationLink>
+    <PaginationLink
+      v-if="paginationParams.next"
+      @click="fetchPage(paginationParams.pages)"
+    >
+      <ArrowIconContainer>
+        <RCIcon name="end_of_the_list" size="14px" />
+      </ArrowIconContainer>
+    </PaginationLink>
+  </PaginationWrapper>
+</template>
+
+<script>
+  import styled from 'vue3-styled-components'
+  import RCIcon from '../icon'
+  import RCSelect from '../inputs/select'
+  import RCOption from '../inputs/select/option'
+  import theme from '@/assets/theme.js'
+
+  const PaginationWrapper = styled.nav`
+    gap: 5px;
+    font-size: 13px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    align-items: center;
+  `
+  const PaginationLink = styled.div`
+    display: flex;
+    padding: 0px 5px;
+    margin: 0 2px;
+    text-align: center;
+    border-radius: 3px;
+    white-space: nowrap;
+    cursor: pointer;
+    color: ${(props) => props.theme.colors.brightBlue};
+
+    &.active {
+      color: ${(props) => props.theme.colors.white};
+      background-color: ${(props) => props.theme.colors.brightBlue};
+      padding: 7px 12px;
+      border-radius: 4px;
+    }
+  `
+  const ArrowIconContainer = styled.div`
+    display: flex;
+    align-items: center;
+  `
+
+  const SelectText = styled.div`
+    font-size: 14px;
+    color: ${(props) => props.theme.colors.grey1};
+  `
+
+  const SelectWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    width: 75px;
+  `
+
+  export default {
+    name: 'PaginationV2',
+    components: {
+      PaginationWrapper,
+      PaginationLink,
+      RCIcon,
+      RCSelect,
+      RCOption,
+      SelectWrapper,
+      SelectText,
+      ArrowIconContainer,
+    },
+    props: {
+      fetchPage: {
+        type: Function,
+        required: true,
+      },
+      currentPage: {
+        type: Number,
+        required: true,
+      },
+      paginationParams: {
+        type: Object,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        selectedValue: this.currentPage,
+      }
+    },
+    computed: {
+      getTheme() {
+        return theme
+      },
+    },
+    methods: {
+      getNewProjects(num) {
+        this.$emit('on-pagination-change', num)
+      },
+      paginationNumbers() {
+        return Array.from(
+          { length: this.paginationParams.pages },
+          (_, i) => i + 1
+        )
+      },
+    },
+  }
+</script>

package/src/components/tabsHeader/index.vue

@@ -4,10 +4,15 @@
       <TabItem
         v-for="item in tabsData"
         :key="item.id"
+        :full-size="fullSize"
         :is-active="activeTab === item.id"
         @click="onTabClick({ id: item.id })"
       >
-        <div>{{ item.text }}</div>
+        <NameContainer>
+          <div>{{ item.text }}</div>
+          <DotIcon v-if="item.subText" :is-active="activeTab === item.id" />
+          <SubText v-if="item.subText">{{ item.subText }}</SubText>
+        </NameContainer>
         <RCIcon v-if="item.hasError" name="warning" size="14px" />
       </TabItem>
     </TabsContainer>
@@ -35,34 +40,51 @@
   import styled from 'vue3-styled-components'
   import RCIcon from '../icon'
 
+  const NameContainer = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+  `
+
+  const DotIconAttrs = { isActive: Boolean }
+  const DotIcon = styled('div', DotIconAttrs)`
+    width: 4px;
+    height: 4px;
+    border-radius: 100%;
+    background-color: ${(props) =>
+      props.isActive ? props.theme.colors.purple6 : props.theme.colors.black};
+  `
+
+  const SubText = styled.div`
+    font-size: 12px;
+    color: ${(props) => props.theme.colors.black};
+  `
+
   const PageContainer = styled.div``
 
   const TabsContainer = styled.div`
     display: flex;
     cursor: pointer;
     width: 100%;
+
+    border-bottom: 1px solid ${(props) => props.theme.colors.purple7};
   `
 
-  const TabAttrs = { isActive: Boolean }
+  const TabAttrs = { isActive: Boolean, fullSize: Boolean }
   const TabItem = styled('div', TabAttrs)`
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
-    padding: 10px 20px;
+    padding: 10px 25px;
     font-size: 14px;
-    font-weight: 600;
-    background-color: ${(props) =>
-      props.isActive ? props.theme.colors.secondary : props.theme.colors.white};
+    font-weight: 400;
     color: ${(props) =>
-      props.isActive
-        ? props.theme.colors.brightBlue
-        : props.theme.colors.black};
+      props.isActive ? props.theme.colors.purple6 : props.theme.colors.black};
     border-bottom: ${(props) =>
-      props.isActive
-        ? '4px solid' + props.theme.colors.brightBlue
-        : '1px solid' + props.theme.colors.grey4};
-    flex-grow: 1;
+      props.isActive ? '1px solid' + props.theme.colors.purple6 : 'unset'};
+    flex-grow: ${(props) => (props.fullSize ? 1 : 0)};
   `
 
   export default {
@@ -70,7 +92,10 @@
     components: {
       PageContainer,
       TabsContainer,
+      NameContainer,
       TabItem,
+      SubText,
+      DotIcon,
       RCIcon,
     },
     props: {
@@ -82,7 +107,12 @@
         required: true,
         type: Number,
       },
+      fullSize: {
+        type: Boolean,
+        default: true,
+      },
     },
+    emits: ['on-tab-change'],
     methods: {
       onTabClick({ id }) {
         if (id === this.activeTab) {

package/src/helpers/toLocaleNumber.js

@@ -0,0 +1,11 @@
+import { langForLocaleString } from './translateLang'
+
+export const toLocaleNumber = (value, digit = 0) => {
+  if (isNaN(value)) {
+    return '-'
+  }
+  return new Intl.NumberFormat(langForLocaleString(), {
+    minimumFractionDigits: digit,
+    maximumFractionDigits: digit,
+  }).format(value)
+}