@eturnity/eturnity_reusable_components 8.49.3 → 9.3.1-EPDM-13987.0

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

@@ -0,0 +1,355 @@
+<template>
+  <PageWrapper>
+    <PageTitle>ButtonIcon Collection</PageTitle>
+
+    <GridContainer>
+      <!-- Light Theme Column -->
+      <ThemeSection :is-dark="false">
+        <ThemeTitle>Light Theme</ThemeTitle>
+
+        <!-- Header Row -->
+        <HeaderRow>
+          <HeaderCell
+            v-for="buttonType in types"
+            :key="'light-header-' + buttonType"
+          >
+            {{ buttonType }}
+          </HeaderCell>
+        </HeaderRow>
+
+        <!-- Main Variant Section -->
+        <VariantSection>
+          <VariantHeader :cols="types.length">main</VariantHeader>
+        </VariantSection>
+
+        <!-- States for Main variant -->
+        <StateSection v-for="state in states" :key="'light-main-' + state.name">
+          <StateHeader :cols="types.length">{{ state.name }}</StateHeader>
+          <ButtonRow>
+            <ButtonCell
+              v-for="buttonType in types"
+              :key="'light-main-' + buttonType + '-' + state.name"
+            >
+              <ButtonIcon
+                app-theme="light"
+                icon-name="plus_button"
+                :is-active="state.isActive"
+                :is-disabled="state.isDisabled"
+                :is-hovered="state.isHovered"
+                :text="buttonType"
+                :type="buttonType"
+                variant="main"
+              />
+            </ButtonCell>
+          </ButtonRow>
+        </StateSection>
+
+        <!-- Cancel Variant Section -->
+        <VariantSection>
+          <VariantHeader :cols="types.length">cancel</VariantHeader>
+        </VariantSection>
+
+        <!-- States for Cancel variant -->
+        <StateSection
+          v-for="state in states"
+          :key="'light-cancel-' + state.name"
+        >
+          <StateHeader :cols="types.length">{{ state.name }}</StateHeader>
+          <ButtonRow>
+            <ButtonCell
+              v-for="buttonType in types"
+              :key="'light-cancel-' + buttonType + '-' + state.name"
+            >
+              <ButtonIcon
+                app-theme="light"
+                icon-name="plus_button"
+                :is-active="state.isActive"
+                :is-disabled="state.isDisabled"
+                :is-hovered="state.isHovered"
+                :text="buttonType"
+                :type="buttonType"
+                variant="cancel"
+              />
+            </ButtonCell>
+          </ButtonRow>
+        </StateSection>
+      </ThemeSection>
+
+      <!-- Dark Theme Column -->
+      <ThemeSection :is-dark="true">
+        <ThemeTitle :is-dark="true">Dark Theme</ThemeTitle>
+
+        <!-- Header Row -->
+        <HeaderRow :is-dark="true">
+          <HeaderCell
+            v-for="buttonType in types"
+            :key="'dark-header-' + buttonType"
+            :is-dark="true"
+          >
+            {{ buttonType }}
+          </HeaderCell>
+        </HeaderRow>
+
+        <!-- Main Variant Section -->
+        <VariantSection>
+          <VariantHeader :cols="types.length" :is-dark="true">
+            main
+          </VariantHeader>
+        </VariantSection>
+
+        <!-- States for Main variant -->
+        <StateSection v-for="state in states" :key="'dark-main-' + state.name">
+          <StateHeader :cols="types.length" :is-dark="true">
+            {{ state.name }}
+          </StateHeader>
+          <ButtonRow>
+            <ButtonCell
+              v-for="buttonType in types"
+              :key="'dark-main-' + buttonType + '-' + state.name"
+            >
+              <ButtonIcon
+                app-theme="dark"
+                icon-name="plus_button"
+                :is-active="state.isActive"
+                :is-disabled="state.isDisabled"
+                :is-hovered="state.isHovered"
+                :text="buttonType"
+                :type="buttonType"
+                variant="main"
+              />
+            </ButtonCell>
+          </ButtonRow>
+        </StateSection>
+
+        <!-- Cancel Variant Section -->
+        <VariantSection>
+          <VariantHeader :cols="types.length" :is-dark="true">
+            cancel
+          </VariantHeader>
+        </VariantSection>
+
+        <!-- States for Cancel variant -->
+        <StateSection
+          v-for="state in states"
+          :key="'dark-cancel-' + state.name"
+        >
+          <StateHeader :cols="types.length" :is-dark="true">
+            {{ state.name }}
+          </StateHeader>
+          <ButtonRow>
+            <ButtonCell
+              v-for="buttonType in types"
+              :key="'dark-cancel-' + buttonType + '-' + state.name"
+            >
+              <ButtonIcon
+                app-theme="dark"
+                icon-name="plus_button"
+                :is-active="state.isActive"
+                :is-disabled="state.isDisabled"
+                :is-hovered="state.isHovered"
+                :text="buttonType"
+                :type="buttonType"
+                variant="cancel"
+              />
+            </ButtonCell>
+          </ButtonRow>
+        </StateSection>
+      </ThemeSection>
+    </GridContainer>
+  </PageWrapper>
+</template>
+
+<script>
+  import ButtonIcon from '../buttonIcon/index.vue'
+  import styled from 'vue3-styled-components'
+  import theme from '@/assets/theme'
+
+  const PageWrapper = styled.div`
+    padding: 40px;
+    font-family: ${(props) => props.theme.fonts.mainFont};
+    background: linear-gradient(135deg, #f8f9fb 0%, #ebeef3 100%);
+    min-height: 100vh;
+  `
+
+  const PageTitle = styled.h1`
+    text-align: center;
+    font-size: 32px;
+    font-weight: 700;
+    color: ${(props) => props.theme.semanticColors.teal[800]};
+    margin-bottom: 40px;
+    letter-spacing: -0.5px;
+  `
+
+  const GridContainer = styled.div`
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 32px;
+    max-width: 1600px;
+    margin: 0 auto;
+  `
+
+  const ThemeSectionAttrs = { isDark: Boolean }
+  const ThemeSection = styled('div', ThemeSectionAttrs)`
+    background-color: ${(props) =>
+      props.isDark
+        ? props.theme.semanticColors.teal[800]
+        : props.theme.colors.white};
+    border-radius: 16px;
+    padding: 24px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+    border: 1px solid
+      ${(props) =>
+        props.isDark ? 'transparent' : props.theme.semanticColors.grey[300]};
+  `
+
+  const ThemeTitleAttrs = { isDark: Boolean }
+  const ThemeTitle = styled('h2', ThemeTitleAttrs)`
+    text-align: center;
+    font-size: 22px;
+    font-weight: 600;
+    margin-bottom: 20px;
+    padding-bottom: 12px;
+    border-bottom: 2px solid
+      ${(props) =>
+        props.isDark
+          ? props.theme.semanticColors.teal[600]
+          : props.theme.semanticColors.purple[200]};
+    color: ${(props) =>
+      props.isDark
+        ? props.theme.colors.white
+        : props.theme.semanticColors.teal[800]};
+  `
+
+  const HeaderRowAttrs = { isDark: Boolean }
+  const HeaderRow = styled('div', HeaderRowAttrs)`
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 12px;
+    margin-bottom: 8px;
+  `
+
+  const HeaderCellAttrs = { isDark: Boolean }
+  const HeaderCell = styled('div', HeaderCellAttrs)`
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    text-align: center;
+    padding: 10px 4px;
+    border-radius: 6px;
+    background: ${(props) =>
+      props.isDark
+        ? props.theme.semanticColors.teal[700]
+        : props.theme.semanticColors.purple[50]};
+    color: ${(props) =>
+      props.isDark
+        ? props.theme.semanticColors.purple[200]
+        : props.theme.semanticColors.purple[600]};
+  `
+
+  const VariantSection = styled.div`
+    margin-top: 16px;
+  `
+
+  const VariantHeaderAttrs = { cols: Number, isDark: Boolean }
+  const VariantHeader = styled('div', VariantHeaderAttrs)`
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: capitalize;
+    padding: 8px 12px;
+    border-radius: 6px;
+    text-align: center;
+    margin-bottom: 8px;
+    background: ${(props) =>
+      props.isDark
+        ? props.theme.semanticColors.teal[600]
+        : props.theme.semanticColors.grey[200]};
+    color: ${(props) =>
+      props.isDark
+        ? props.theme.semanticColors.yellow[300]
+        : props.theme.semanticColors.teal[700]};
+  `
+
+  const StateSection = styled.div`
+    margin-bottom: 4px;
+  `
+
+  const StateHeaderAttrs = { cols: Number, isDark: Boolean }
+  const StateHeader = styled('div', StateHeaderAttrs)`
+    font-size: 10px;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.8px;
+    padding: 4px 0;
+    color: ${(props) =>
+      props.isDark
+        ? props.theme.semanticColors.grey[400]
+        : props.theme.semanticColors.grey[600]};
+  `
+
+  const ButtonRow = styled.div`
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 12px;
+    align-items: center;
+  `
+
+  const ButtonCell = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 36px;
+  `
+
+  export default {
+    name: 'ButtonIconCollection',
+    components: {
+      ButtonIcon,
+      PageWrapper,
+      PageTitle,
+      GridContainer,
+      ThemeSection,
+      ThemeTitle,
+      HeaderRow,
+      HeaderCell,
+      VariantSection,
+      VariantHeader,
+      StateSection,
+      StateHeader,
+      ButtonRow,
+      ButtonCell,
+    },
+    data() {
+      return {
+        theme,
+        types: ['primary', 'secondary', 'tertiary', 'ghost'],
+        states: [
+          {
+            name: 'default',
+            isActive: false,
+            isHovered: false,
+            isDisabled: false,
+          },
+          {
+            name: 'hover',
+            isActive: false,
+            isHovered: true,
+            isDisabled: false,
+          },
+          {
+            name: 'active',
+            isActive: true,
+            isHovered: false,
+            isDisabled: false,
+          },
+          {
+            name: 'disabled',
+            isActive: false,
+            isHovered: false,
+            isDisabled: true,
+          },
+        ],
+      }
+    },
+  }
+</script>

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

@@ -20,7 +20,7 @@
           <Radio
             :checked="selectedOption === item.value"
             :data-id="`radio_button_${dataId}_option_${item.value}`"
-            :data-qa-id="dataQaId"
+            :data-qa-id="`${dataQaId}_${item.value}`"
             :data-test-id="'radioInput_' + item.value"
             :disabled="isItemDisabled(item)"
             :name="'radioButtons_' + radioName"

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

@@ -718,7 +718,7 @@
       },
     },
     setup() {
-      const modalRef = inject('modalRef')
+      const modalRef = inject('modalRef', null)
 
       return {
         modalRef,

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

@@ -15,7 +15,7 @@
       :overflow="overflowRule"
       @click="onClickModalContainer"
     >
-      <Spinner v-if="isLoading" :limited-to-modal="true" size="50px" />
+      <Spinner v-if="isLoading" :limited-to-modal="true" size="large" />
       <ContentContainer v-if="!isLoading">
         <slot></slot>
       </ContentContainer>
@@ -173,6 +173,10 @@
         type: Boolean,
         default: true,
       },
+      closeOnEscape: {
+        type: Boolean,
+        default: true,
+      },
     },
     setup() {
       const modalRef = ref(null)
@@ -205,7 +209,7 @@
         this.$emit('on-close')
       },
       handleKeyDown({ key }) {
-        if (key === 'Escape') {
+        if (this.closeOnEscape && key === 'Escape') {
           this.onCloseModal()
         }
       },

package/src/components/sideMenu/index.vue

@@ -9,6 +9,7 @@
           v-if="!item.children"
           :key="idx"
           :data-id="`sub_menu_settings_${item.key}`"
+          :data-qa-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 })"
@@ -31,6 +32,7 @@
         <CollapseWrapper v-else :key="idx + item.key">
           <CollapseContainer
             :data-id="`sub_menu_settings_${item.key}`"
+            :data-qa-id="`sub_menu_settings_${item.key}`"
             :is-active="activeParentTab === item.key"
             @click="toggleActiveDropdown(item.key)"
           >
@@ -66,6 +68,7 @@
               v-for="subItem in item.children"
               :key="subItem.key"
               :data-id="`sub_menu_settings_${subItem.key}`"
+              :data-qa-id="`sub_menu_settings_${subItem.key}`"
               :is-active="activeTab === subItem.key"
               @click="
                 $emit('tab-click', {
@@ -83,6 +86,7 @@
     <BottomSection v-if="hasLogout">
       <IconContainer
         data-id="button_settings_logout"
+        data-qa-id="button_settings_logout"
         :is-active="false"
         :is-button="true"
         @click="$emit('on-logout')"
@@ -94,7 +98,11 @@
           size="18px"
         />
       </IconContainer>
-      <AppVersion>{{ appVersion }}</AppVersion>
+      <AppVersion
+        data-id="app_side_menu_version"
+        data-qa-id="app_side_menu_version"
+        >{{ appVersion }}</AppVersion
+      >
     </BottomSection>
   </PageContainer>
 </template>

package/src/components/threeDots/index.vue

@@ -45,10 +45,15 @@
             {{ child.name }}
           </OptionChild>
         </ChildrenContainer>
-        <OptionsContainer v-if="!isLoading" :text-wrap="textWrap">
+        <OptionsContainer
+          v-if="!isLoading"
+          :color-theme="colorTheme"
+          :text-wrap="textWrap"
+        >
           <OptionItem
             v-for="(item, index) in options"
             :key="item.value"
+            :color-theme="colorTheme"
             :data-id="item.dataId"
             :is-disabled="item.disabled"
             tabindex="0"
@@ -154,7 +159,9 @@
     }
   `
 
-  const ButtonContainer = styled('div', { iconColor: String })`
+  const ButtonContainer = styled('div', {
+    iconColor: String,
+  })`
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -196,14 +203,19 @@
     background: #fff;
   `
 
-  const OptionsContainerAttrs = { textWrap: Boolean }
+  const OptionsContainerAttrs = { textWrap: Boolean, colorTheme: String }
   const OptionsContainer = styled('div', OptionsContainerAttrs)`
-    border: 1px solid ${(props) => props.theme.colors.grey3};
+    border: 1px solid
+      ${(props) =>
+        props.colorTheme == 'dark'
+          ? props.theme.semanticColors.teal[500]
+          : props.theme.colors.grey3};
     display: grid;
     grid-template-columns: 1fr;
     ${(props) => (props.textWrap ? 'width: 220px' : 'width: max-content')};
     border-radius: 4px;
-    background-color: #fff;
+    background-color: ${({ colorTheme }) =>
+      colorTheme == 'dark' ? theme.colors.black : '#fff'};
     max-height: 220px;
     overflow: auto;
     height: max-content;
@@ -211,7 +223,7 @@
       props.textWrap ? 'white-space: normal' : 'white-space: nowrap'};
   `
 
-  const optionAttrs = { isDisabled: Boolean }
+  const optionAttrs = { isDisabled: Boolean, colorTheme: String }
   const OptionItem = styled('div', optionAttrs)`
     padding: 12px;
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
@@ -219,13 +231,19 @@
     position: relative;
     ${(props) =>
       props.isDisabled
-        ? `background-color: ${props.theme.colors.grey5}!important`
+        ? `background-color:  ${(colorTheme) =>
+            colorTheme == 'dark'
+              ? theme.semanticColors.teal[700]
+              : props.theme.colors.grey5}!important`
         : ''};
     ${(props) =>
       props.isDisabled ? `color: ${props.theme.colors.grey2}` : ''};
 
     &:hover {
-      background-color: #ebeef4;
+      background-color: ${(props) =>
+        props.colorTheme == 'dark'
+          ? theme.semanticColors.teal[700]
+          : '#ebeef4'};
     }
 
     &:focus-visible {
@@ -233,14 +251,17 @@
       background-color: #ebeef4;
     }
   `
-  const OptionChild = styled.div`
+  const OptionChild = styled('div', { colorTheme: String })`
     padding: 12px;
     cursor: pointer;
     font-size: 13px;
     position: relative;
 
     &:hover {
-      background-color: #ebeef4;
+      background-color: ${(props) =>
+        props.colorTheme == 'dark'
+          ? theme.semanticColors.teal[600]
+          : '#ebeef4'};
     }
 
     &:focus-visible {
@@ -300,14 +321,25 @@
     props: {
       options: {
         required: true,
+        type: Array,
       },
       isLoading: {
         required: false,
         default: false,
+        type: Boolean,
       },
       textWrap: {
         required: false,
         default: true,
+        type: Boolean,
+      },
+      colorTheme: {
+        type: String,
+        default: 'light',
+      },
+      dropdownPosition: {
+        type: String,
+        default: 'horizontal',
       },
       iconColor: {
         type: String,
@@ -359,20 +391,42 @@
 
         const positionArray = this.determineElementQuarter(button, rectButton)
         contextMenu.style.transform = ''
-        if (positionArray.includes('left')) {
-          contextMenu.style.left =
-            rectButton.right - rectRelativeParent.left + 5 + 'px'
-        } else {
-          contextMenu.style.left =
-            rectButton.left - rectRelativeParent.left - 5 + 'px'
-          contextMenu.style.transform = 'translateX(-100%)'
-        }
-        if (positionArray.includes('top')) {
-          contextMenu.style.top = rectButton.top - rectRelativeParent.top + 'px'
+        if (this.dropdownPosition == 'vertical') {
+          // Position horizontally (left/right/center)
+          if (positionArray.includes('left')) {
+            contextMenu.style.left =
+              rectButton.left - rectRelativeParent.left + 'px'
+          } else {
+            contextMenu.style.left =
+              rectButton.right - rectRelativeParent.left + 'px'
+            contextMenu.style.transform = 'translateX(-100%)'
+          }
+          // Position vertically (above/below)
+          if (positionArray.includes('top')) {
+            contextMenu.style.top =
+              rectButton.bottom - rectRelativeParent.top + 5 + 'px'
+          } else {
+            contextMenu.style.top =
+              rectButton.top - rectRelativeParent.top - 5 + 'px'
+            contextMenu.style.transform += ' translateY(-100%)'
+          }
         } else {
-          contextMenu.style.top =
-            rectButton.bottom - rectRelativeParent.top + 'px'
-          contextMenu.style.transform += ' translateY(-100%)'
+          if (positionArray.includes('left')) {
+            contextMenu.style.left =
+              rectButton.right - rectRelativeParent.left + 5 + 'px'
+          } else {
+            contextMenu.style.left =
+              rectButton.left - rectRelativeParent.left - 5 + 'px'
+            contextMenu.style.transform = 'translateX(-100%)'
+          }
+          if (positionArray.includes('top')) {
+            contextMenu.style.top =
+              rectButton.top - rectRelativeParent.top + 'px'
+          } else {
+            contextMenu.style.top =
+              rectButton.bottom - rectRelativeParent.top + 'px'
+            contextMenu.style.transform += ' translateY(-100%)'
+          }
         }
       },
       findRelativeParent(element) {