@eturnity/eturnity_reusable_components 8.26.11-EPDM-16266.0 → 8.26.11-EPDM-16204.0

package/src/assets/theme.js

@@ -26,6 +26,8 @@ const theme = (() => {
     red2: '#de5959',
     red3: '#FFCCCC',
     red4: '#FF9A9A',
+    red6: '#FFEBEB',
+    red5: '#CC4545',
     pureRed: '#ff0000',
     darkRed: '#d00000',
     cornellRed: '#a52019',
@@ -66,6 +68,8 @@ const theme = (() => {
     purple4: '#D0D6F5',
     purple5: '#533181',
     purple6: '#6F20DC',
+    purple7: '#F5EEFF',
+    purple8: '#B17BFA',
     orange: '#ffc338',
     disabled: '#dfe1e1',
     transparentWhite2: '#ffffff32',
@@ -180,25 +184,9 @@ const theme = (() => {
     },
   }
 
-  const chartGradients = {
-    simple: {
-      from: semanticColors.purple[500],
-      to: semanticColors.purple[400],
-    },
-    stacked: [
-      { from: '#F5EDFF', to: '#DEC5FF' },
-      { from: '#CAA2FF', to: '#F2E8FF' },
-      { from: '#B987FC', to: '#904AEF' },
-      { from: '#8B40F2', to: '#4A1394' },
-      { from: '#6A05F2', to: '#4905A5' },
-      { from: '#5402C3', to: '#2B0362' },
-    ],
-  }
-
   return {
     colors,
     semanticColors,
-    chartGradients,
     fonts: {
       mainFont: '"Figtree", sans-serif',
     },
@@ -415,28 +403,26 @@ const theme = (() => {
               borderColor: '',
             },
           },
-        },
-        protag: {
-          main: {
+          tertiary: {
             default: {
-              backgroundColor: semanticColors.yellow[300],
+              backgroundColor: 'transparent',
               textColor: semanticColors.teal[800],
-              borderColor: 'transparent',
+              borderColor: semanticColors.teal[100],
             },
             hover: {
-              backgroundColor: semanticColors.yellow[300],
+              backgroundColor: semanticColors.grey[200],
               textColor: semanticColors.teal[800],
-              borderColor: '',
+              borderColor: semanticColors.teal[100],
             },
             active: {
-              backgroundColor: semanticColors.yellow[300],
+              backgroundColor: semanticColors.grey[400],
               textColor: semanticColors.teal[800],
-              borderColor: '',
+              borderColor: semanticColors.teal[100],
             },
             disabled: {
-              backgroundColor: semanticColors.yellow[300],
-              textColor: semanticColors.teal[400],
-              borderColor: '',
+              textColor: semanticColors.grey[600],
+              backgroundColor: semanticColors.grey[500],
+              borderColor: semanticColors.grey[800],
             },
           },
         },
@@ -464,153 +450,152 @@ const theme = (() => {
             },
           },
         },
-      },
-      dark: {
-        // theme
-        primary: {
-          // type
+        protag: {
           main: {
-            // variant: this is the default variant
             default: {
-              backgroundColor: colors.white,
+              backgroundColor: semanticColors.yellow[200],
               textColor: semanticColors.teal[800],
               borderColor: '',
             },
             hover: {
-              backgroundColor: semanticColors.purple[100],
+              backgroundColor: semanticColors.yellow[200],
               textColor: semanticColors.teal[800],
               borderColor: '',
             },
             active: {
-              backgroundColor: semanticColors.purple[100],
+              backgroundColor: semanticColors.yellow[200],
               textColor: semanticColors.teal[800],
               borderColor: '',
             },
             disabled: {
-              textColor: semanticColors.grey[800],
-              backgroundColor: semanticColors.grey[400],
+              backgroundColor: semanticColors.yellow[200],
+              textColor: semanticColors.teal[400],
               borderColor: '',
             },
           },
-          cancel: {
-            // variant
+        },
+        freeTrialTag: {
+          main: {
             default: {
-              backgroundColor: semanticColors.red[400],
+              backgroundColor: semanticColors.blue[200],
               textColor: semanticColors.teal[800],
               borderColor: '',
             },
             hover: {
-              backgroundColor: semanticColors.red[100],
+              backgroundColor: semanticColors.blue[200],
               textColor: semanticColors.teal[800],
               borderColor: '',
             },
             active: {
-              backgroundColor: semanticColors.red[200],
+              backgroundColor: semanticColors.blue[200],
               textColor: semanticColors.teal[800],
               borderColor: '',
             },
             disabled: {
-              backgroundColor: semanticColors.grey[300],
-              textColor: semanticColors.grey[800],
+              backgroundColor: semanticColors.blue[200],
+              textColor: semanticColors.teal[400],
               borderColor: '',
             },
           },
         },
-        secondary: {
+      },
+      dark: {
+        // theme
+        primary: {
           // type
           main: {
             // variant: this is the default variant
             default: {
-              backgroundColor: semanticColors.teal[800],
-              textColor: semanticColors.purple[50],
+              backgroundColor: colors.white,
+              textColor: semanticColors.teal[800],
               borderColor: '',
             },
             hover: {
-              backgroundColor: semanticColors.teal[600],
-              textColor: semanticColors.purple[50],
+              backgroundColor: semanticColors.purple[100],
+              textColor: semanticColors.teal[800],
               borderColor: '',
             },
             active: {
-              backgroundColor: semanticColors.teal[700],
-              textColor: semanticColors.purple[50],
+              backgroundColor: semanticColors.purple[100],
+              textColor: semanticColors.teal[800],
               borderColor: '',
             },
             disabled: {
-              textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[500],
+              textColor: semanticColors.grey[800],
+              backgroundColor: semanticColors.grey[400],
               borderColor: '',
             },
           },
           cancel: {
             // variant
             default: {
-              backgroundColor: semanticColors.red[800],
-              textColor: semanticColors.red[400],
+              backgroundColor: semanticColors.red[400],
+              textColor: semanticColors.teal[800],
               borderColor: '',
             },
             hover: {
-              backgroundColor: semanticColors.red[700],
-              textColor: semanticColors.red[300],
+              backgroundColor: semanticColors.red[100],
+              textColor: semanticColors.teal[800],
               borderColor: '',
             },
             active: {
-              backgroundColor: semanticColors.red[600],
-              textColor: semanticColors.red[200],
+              backgroundColor: semanticColors.red[200],
+              textColor: semanticColors.teal[800],
               borderColor: '',
             },
             disabled: {
-              textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[500],
+              backgroundColor: semanticColors.grey[300],
+              textColor: semanticColors.grey[800],
               borderColor: '',
             },
           },
         },
-        tertiary: {
+        secondary: {
           // type
           main: {
             // variant: this is the default variant
             default: {
-              backgroundColor: 'transparent',
+              backgroundColor: semanticColors.teal[800],
               textColor: semanticColors.purple[50],
-              borderColor: semanticColors.teal[500],
+              borderColor: '',
             },
             hover: {
               backgroundColor: semanticColors.teal[600],
               textColor: semanticColors.purple[50],
-              borderColor: semanticColors.teal[400],
+              borderColor: '',
             },
             active: {
               backgroundColor: semanticColors.teal[700],
               textColor: semanticColors.purple[50],
-              borderColor: semanticColors.teal[300],
+              borderColor: '',
             },
             disabled: {
               textColor: semanticColors.grey[600],
               backgroundColor: semanticColors.grey[500],
-              borderColor: semanticColors.grey[800],
+              borderColor: '',
             },
           },
           cancel: {
             // variant
             default: {
-              backgroundColor: semanticColors.teal[200],
+              backgroundColor: semanticColors.red[800],
               textColor: semanticColors.red[400],
-              borderColor: semanticColors.teal[500],
+              borderColor: '',
             },
             hover: {
               backgroundColor: semanticColors.red[700],
-              textColor: semanticColors.red[700],
-              borderColor: semanticColors.teal[400],
+              textColor: semanticColors.red[300],
+              borderColor: '',
             },
             active: {
               backgroundColor: semanticColors.red[600],
               textColor: semanticColors.red[200],
-              borderColor: semanticColors.teal[300],
+              borderColor: '',
             },
             disabled: {
               textColor: semanticColors.grey[600],
               backgroundColor: semanticColors.grey[500],
-              borderColor: semanticColors.grey[800],
+              borderColor: '',
             },
           },
         },
@@ -754,9 +739,9 @@ const theme = (() => {
           iconWidth: '26px',
         },
         tiny: {
-          padding: '2px 5px',
-          fontSize: '10px',
-          iconWidth: '18px',
+          padding: '3px 5px',
+          fontSize: '11px',
+          iconWidth: '14px',
         },
       },
     },

package/src/components/buttons/buttonIcon/ButtonIcon.stories.js

@@ -63,19 +63,6 @@ export default {
       options: ['fill', 'stroke'],
       description: 'How to fill the icon',
     },
-    showCaret: {
-      control: 'boolean',
-      description: 'Whether to render a caret after the text',
-    },
-    numberCountType: {
-      control: 'select',
-      options: ['inline', 'badge'],
-      description: 'How to render the number count',
-    },
-    numberCount: {
-      control: 'text',
-      description: 'Number count to display',
-    },
   },
 }
 

package/src/components/buttons/buttonIcon/buttonIcon.spec.js

@@ -98,9 +98,8 @@ describe('ButtonIcon.vue', () => {
   })
 
   it('renders number count when provided', async () => {
-    const numberCount = '5'
-    let numberCountType = 'inline'
-    await wrapper.setProps({ numberCount, numberCountType })
+    const numberCount = 5
+    await wrapper.setProps({ numberCount })
     const numberContainer = wrapper.find(
       '[data-test-id="button-icon-number-container"]'
     )
@@ -108,12 +107,6 @@ describe('ButtonIcon.vue', () => {
     expect(numberContainer.exists()).toBe(true)
     expect(numberText.exists()).toBe(true)
     expect(numberText.text()).toBe(numberCount.toString())
-
-    numberCountType = 'badge'
-    await wrapper.setProps({ numberCount, numberCountType })
-    const countBadge = wrapper.find('[data-test-id="button-icon-number-badge"]')
-    expect(countBadge.exists()).toBe(true)
-    expect(countBadge.text()).toBe(numberCount.toString())
   })
 
   it('applies different button sizes correctly', async () => {
@@ -156,14 +149,4 @@ describe('ButtonIcon.vue', () => {
       expect(wrapper.props('appTheme')).toBe(theme)
     }
   })
-
-  it('renders caret based on showCaret prop', async () => {
-    await wrapper.setProps({ showCaret: true })
-    let caret = wrapper.find('[data-test-id="button-icon-caret"]')
-    expect(caret.exists()).toBe(true)
-
-    await wrapper.setProps({ showCaret: false })
-    caret = wrapper.find('[data-test-id="button-icon-caret"]')
-    expect(caret.exists()).toBe(false)
-  })
 })

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

@@ -41,36 +41,15 @@
         :height="height"
       >
         {{ text }}
-        <Icon
-          v-if="showCaret"
-          :color="
-            iconColor ||
-            theme.mainButton[appTheme][type][variant].default.textColor
-          "
-          data-test-id="button-icon-caret"
-          :disable-hover="disableIconHover"
-          :hovered-color="
-            iconColor ||
-            theme.mainButton[appTheme][type][variant].default.textColor
-          "
-          name="arrow_down"
-          size="8px"
-        />
       </ButtonContainer>
       <NumberContainer
-        v-if="numberCount && numberCountType === 'inline'"
+        v-if="numberCount"
         data-test-id="button-icon-number-container"
       >
         <NumberText data-test-id="button-icon-number">{{
           numberCount
         }}</NumberText>
       </NumberContainer>
-      <CountBadge
-        v-else-if="numberCount && numberCountType === 'badge'"
-        data-test-id="button-icon-number-badge"
-      >
-        {{ numberCount }}
-      </CountBadge>
     </ButtonWrapper>
   </PageContainer>
 </template>
@@ -105,7 +84,6 @@
     height: String,
   }
   const ButtonWrapper = styled('div', ButtonAttrs)`
-    position: relative;
     display: grid;
     grid-template-columns: auto 1fr auto;
     height: ${({ height }) => height};
@@ -142,7 +120,7 @@
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
     user-select: none;
     border-radius: 4px;
-    overflow: visible;
+    overflow: hidden;
     min-width: ${(props) => props.minWidth || 'initial'};
 
     &:hover {
@@ -177,7 +155,6 @@
     justify-content: center;
     padding: ${(props) =>
       props.theme?.mainButton?.size?.[props.buttonSize]?.padding};
-    gap: 8px;
     white-space: nowrap;
   `
 
@@ -223,25 +200,6 @@
     background-color: ${(props) => props.theme.semanticColors.purple[50]};
   `
 
-  const CountBadge = styled('div')`
-    position: absolute;
-    grid-area: 1 / 1 / 2 / 4;
-    top: -3.5px;
-    right: 0px;
-    transform: translateX(50%);
-    padding: 0 2px;
-    background-color: ${({ theme }) => theme.colors.red};
-    color: ${({ theme }) => theme.colors.white};
-    border-radius: 4px;
-    height: 15px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 10px;
-    z-index: 1;
-    pointer-events: none;
-  `
-
   export default {
     name: 'ButtonIcon',
     components: {
@@ -252,7 +210,6 @@
       Icon,
       NumberContainer,
       NumberText,
-      CountBadge,
     },
     props: {
       type: {
@@ -328,23 +285,14 @@
         default: false,
       },
       numberCount: {
-        type: String,
+        type: Number,
         required: false,
         default: null,
       },
-      numberCountType: {
-        type: String,
-        required: false,
-        default: 'inline',
-      },
       height: {
         type: String,
         default: 'auto',
       },
-      showCaret: {
-        type: Boolean,
-        default: false,
-      },
     },
     data() {
       return {

package/src/components/sideMenu/index.vue

@@ -8,6 +8,9 @@
         <ListItem
           v-if="!item.children"
           :key="idx"
+          :data-active="
+            (activeTab === item.key || activeParentTab === item.key).toString()
+          "
           :data-id="`sub_menu_settings_${item.key}`"
           :fill-type="item.icon === 'free_technology' ? 'stroke' : 'fill'"
           :is-active="activeTab === item.key || activeParentTab === item.key"
@@ -30,6 +33,7 @@
         </ListItem>
         <CollapseWrapper v-else :key="idx + item.key">
           <CollapseContainer
+            :data-active="activeParentTab === item.key"
             :data-id="`sub_menu_settings_${item.key}`"
             :is-active="activeParentTab === item.key"
             @click="toggleActiveDropdown(item.key)"
@@ -51,7 +55,11 @@
             }}</ListText>
             <ArrowContainer>
               <Icon
-                :color="theme.semanticColors.grey[800]"
+                :color="
+                  activeParentTab === item.key
+                    ? theme.semanticColors.purple[500]
+                    : theme.semanticColors.teal[800]
+                "
                 :name="
                   activeDropdown === item.key
                     ? 'arrow_up_unfilled'
@@ -65,6 +73,7 @@
             <SubRouter
               v-for="subItem in item.children"
               :key="subItem.key"
+              :data-active="activeTab === subItem.key"
               :data-id="`sub_menu_settings_${subItem.key}`"
               :is-active="activeTab === subItem.key"
               @click="
@@ -81,19 +90,14 @@
       </template>
     </ListContainer>
     <BottomSection v-if="hasLogout">
-      <IconContainer
+      <ButtonIcon
         data-id="button_settings_logout"
-        :is-active="false"
-        :is-button="true"
+        icon-name="logout"
+        text="Logout"
+        type="ghost"
+        variant="tertiary"
         @click="$emit('on-logout')"
-      >
-        <RotateIcon
-          :color="theme.semanticColors.teal[800]"
-          cursor="pointer"
-          name="initial_situation"
-          size="18px"
-        />
-      </IconContainer>
+      />
       <AppVersion>{{ appVersion }}</AppVersion>
     </BottomSection>
   </PageContainer>
@@ -104,6 +108,7 @@
   import Icon from '../icon'
   import Spinner from '../spinner'
   import theme from '@/assets/theme.js'
+  import ButtonIcon from '../buttons/buttonIcon'
 
   const PageAttrs = { isLoading: Boolean }
   const PageContainer = styled('div', PageAttrs)`
@@ -131,18 +136,18 @@
     padding: 4px;
     border-radius: 4px;
     background-color: ${(props) =>
-      props.isActive ? props.theme.semanticColors.purple[50] : ''};
+      props.isActive ? props.theme.semanticColors.purple[100] : ''};
     color: ${(props) =>
       props.isActive
         ? props.theme.semanticColors.purple[500]
         : props.theme.semanticColors.teal[800]};
 
-    :hover {
-      background-color: ${(props) => props.theme.semanticColors.purple[100]};
-      color: ${(props) => props.theme.semanticColors.purple[500]};
+    &:hover:not([data-active='true']) {
+      background-color: ${(props) => props.theme.semanticColors.grey[300]};
+      color: ${(props) => props.theme.semanticColors.teal[800]};
       svg path:not(.fix) {
         ${(props) => props.fillType}: ${(props) =>
-          props.theme.semanticColors.purple[500]};
+          props.theme.semanticColors.teal[800]};
       }
     }
   `
@@ -209,11 +214,11 @@
     font-weight: 400;
     font-size: 14px;
     background: ${(props) =>
-      props.isActive ? props.theme.semanticColors.purple[50] : ''};
+      props.isActive ? props.theme.semanticColors.purple[100] : ''};
 
-    &:hover {
-      background: ${(props) => props.theme.semanticColors.purple[100]};
-      color: ${(props) => props.theme.semanticColors.purple[500]} !important;
+    &:hover:not([data-active='true']) {
+      background: ${(props) => props.theme.semanticColors.grey[300]};
+      color: ${(props) => props.theme.semanticColors.teal[800]} !important;
     }
   `
 
@@ -228,18 +233,18 @@
     align-items: center;
     cursor: pointer;
     background: ${(props) =>
-      props.isActive ? props.theme.semanticColors.purple[50] : ''};
+      props.isActive ? props.theme.semanticColors.purple[100] : ''};
 
     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]};
+    &:hover:not([data-active='true']) {
+      background: ${(props) => props.theme.semanticColors.grey[300]};
+      color: ${(props) => props.theme.semanticColors.teal[800]};
       svg path:not(.fix) {
-        fill: ${(props) => props.theme.semanticColors.purple[500]};
+        fill: ${(props) => props.theme.semanticColors.teal[800]};
       }
     }
   `
@@ -268,12 +273,12 @@
       Spinner,
       SpinnerContainer,
       BottomSection,
-      RotateIcon,
       AppVersion,
       CollapseWrapper,
       CollapseContainer,
       SubRouter,
       ArrowContainer,
+      ButtonIcon,
     },
     props: {
       tabsData: {