@eturnity/eturnity_reusable_components 9.3.1-EPDM-1744.4 → 9.3.1-EPDM-13987.1

package/src/assets/theme.js

@@ -70,7 +70,7 @@ const theme = (() => {
     disabled: '#dfe1e1',
     transparentWhite2: '#ffffff32',
     transparentWhite1: '#ffffff16',
-    transparentBlack1: '#263238e6',
+    transparentBlack1: '#162228e6',
     transparentBlack2: '#263238e5',
     transparentBlue1: '#20a4cae6',
     blueElectric: '#66dffa',
@@ -178,6 +178,39 @@ const theme = (() => {
       800: '#662222',
       900: '#331111',
     },
+    transparentWhite: {
+      100: '#ffffff24',
+      200: '#ffffff48',
+      300: '#ffffff64',
+      400: '#ffffff80',
+      500: '#ffffff96',
+      600: '#ffffffb4',
+      700: '#ffffffd4',
+      800: '#ffffffe6',
+      900: '#fffffffa',
+    },
+    transparentBlack: {
+      100: '#00000024',
+      200: '#00000048',
+      300: '#00000064',
+      400: '#00000080',
+      500: '#00000096',
+      600: '#000000b4',
+      700: '#000000d4',
+      800: '#000000e6',
+      900: '#000000fa',
+    },
+    transparentTeal: {
+      100: '#6E8E9E24',
+      200: '#6E8E9E48',
+      300: '#6E8E9E64',
+      400: '#6E8E9E80',
+      500: '#6E8E9E96',
+      600: '#6E8E9Eb4',
+      700: '#6E8E9Ed4',
+      800: '#6E8E9Ee6',
+      900: '#6E8E9Efa',
+    },
   }
 
   const chartGradients = {
@@ -533,23 +566,23 @@ const theme = (() => {
           main: {
             // variant: this is the default variant
             default: {
-              backgroundColor: semanticColors.teal[800],
+              backgroundColor: 'transparent',
               textColor: semanticColors.purple[50],
               borderColor: '',
             },
             hover: {
-              backgroundColor: semanticColors.teal[600],
+              backgroundColor: semanticColors.transparentTeal[500],
               textColor: semanticColors.purple[50],
               borderColor: '',
             },
             active: {
-              backgroundColor: semanticColors.teal[700],
+              backgroundColor: semanticColors.transparentTeal[300],
               textColor: semanticColors.purple[50],
               borderColor: '',
             },
             disabled: {
+              backgroundColor: semanticColors.transparentTeal[600],
               textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[500],
               borderColor: '',
             },
           },
@@ -587,67 +620,18 @@ const theme = (() => {
               borderColor: semanticColors.teal[500],
             },
             hover: {
-              backgroundColor: semanticColors.teal[600],
-              textColor: semanticColors.purple[50],
-              borderColor: semanticColors.teal[400],
-            },
-            active: {
-              backgroundColor: semanticColors.teal[700],
-              textColor: semanticColors.purple[50],
-              borderColor: semanticColors.teal[300],
-            },
-            disabled: {
-              textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[500],
-              borderColor: semanticColors.grey[800],
-            },
-          },
-          cancel: {
-            // variant
-            default: {
-              backgroundColor: semanticColors.teal[200],
-              textColor: semanticColors.red[400],
-              borderColor: semanticColors.teal[500],
-            },
-            hover: {
-              backgroundColor: semanticColors.red[700],
-              textColor: semanticColors.red[700],
-              borderColor: semanticColors.teal[400],
-            },
-            active: {
-              backgroundColor: semanticColors.red[600],
-              textColor: semanticColors.red[200],
-              borderColor: semanticColors.teal[300],
-            },
-            disabled: {
-              textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[500],
-              borderColor: semanticColors.grey[800],
-            },
-          },
-        },
-        tertiary: {
-          // type
-          main: {
-            // variant: this is the default variant
-            default: {
-              backgroundColor: 'transparent',
-              textColor: semanticColors.purple[50],
-              borderColor: semanticColors.teal[500],
-            },
-            hover: {
-              backgroundColor: semanticColors.teal[600],
+              backgroundColor: semanticColors.transparentTeal[500],
               textColor: semanticColors.purple[50],
               borderColor: semanticColors.teal[400],
             },
             active: {
-              backgroundColor: semanticColors.teal[700],
+              backgroundColor: semanticColors.transparentTeal[300],
               textColor: semanticColors.purple[50],
               borderColor: semanticColors.teal[300],
             },
             disabled: {
+              backgroundColor: semanticColors.transparentTeal[600],
               textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[500],
               borderColor: semanticColors.grey[800],
             },
           },
@@ -685,18 +669,18 @@ const theme = (() => {
               borderColor: '',
             },
             hover: {
-              backgroundColor: semanticColors.teal[600],
+              backgroundColor: semanticColors.transparentTeal[500],
               textColor: semanticColors.purple[50],
               borderColor: '',
             },
             active: {
-              backgroundColor: semanticColors.teal[700],
+              backgroundColor: semanticColors.transparentTeal[300],
               textColor: semanticColors.purple[50],
               borderColor: '',
             },
             disabled: {
+              backgroundColor: semanticColors.transparentTeal[600],
               textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[500],
               borderColor: '',
             },
           },

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

@@ -10,6 +10,7 @@
       :height="height"
       :is-active="isActive"
       :is-disabled="isDisabled"
+      :is-hovered="isHovered"
       :min-width="minWidth"
       :type="type"
       :variant="variant"
@@ -46,7 +47,7 @@
         data-test-id="button-icon-text"
         :height="height"
       >
-        {{ text }}
+        {{ isFirstLetterCapitalized ? capitalizeFirstLetter(text) : text }}
         <Icon
           v-if="showCaret"
           :color="
@@ -115,11 +116,13 @@
     variant: String,
     appTheme: String,
     isActive: Boolean,
+    isHovered: Boolean,
     height: String,
   }
   const ButtonWrapper = styled('div', ButtonAttrs)`
     position: relative;
     display: grid;
+    align-content: center
     grid-template-columns: auto 1fr auto;
     height: ${({ height }) => height};
     font-size: ${(props) =>
@@ -140,6 +143,9 @@
         : props.isActive
         ? props.theme.mainButton[props.appTheme][props.type][props.variant]
             .active.backgroundColor
+        : props.isHovered
+        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
+            .hover.backgroundColor
         : props.theme.mainButton[props.appTheme][props.type][props.variant]
             .default.backgroundColor};
     border: ${(props) => {
@@ -209,6 +215,7 @@
     width: ${(props) =>
       props.theme?.mainButton?.size?.[props.buttonSize]?.iconWidth};
     background: rgba(255, 255, 255, 0.1);
+    border-radius: 4px 0 0 4px;
     border-right: ${(props) => {
       const borderColor =
         props.theme.mainButton[props.appTheme][props.type][props.variant]
@@ -350,6 +357,11 @@
         default: false,
         type: Boolean,
       },
+      isHovered: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
       fillType: {
         required: false,
         default: 'fill',
@@ -389,20 +401,21 @@
         type: String,
         default: '',
       },
+      isFirstLetterCapitalized: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
     },
     data() {
       return {
         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
-    //     )
-    //   },
-    // },
+    methods: {
+      capitalizeFirstLetter(word) {
+        return word.charAt(0).toUpperCase() + word.slice(1)
+      },
+    },
   }
 </script>

package/src/components/buttons/collection/ButtonIconCollection.stories.js

@@ -0,0 +1,31 @@
+import ButtonIconCollection from './index.vue'
+
+export default {
+  title: 'Components/Buttons/ButtonIconCollection',
+  component: ButtonIconCollection,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'A comprehensive display of all ButtonIcon variations across themes, types, variants, and states.',
+      },
+    },
+  },
+}
+
+export const AllButtonIcons = {
+  render: () => ({
+    components: { ButtonIconCollection },
+    template: '<ButtonIconCollection />',
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Displays all ButtonIcon possibilities in a grid with Light and Dark themes side by side.',
+      },
+    },
+  },
+}

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/icon/icon.spec.js

@@ -22,8 +22,7 @@ describe('RCIcon.vue', () => {
 
     expect(iconWrapper.exists()).toBe(true)
     expect(iconImage.exists()).toBe(true)
-    // The wrapper component doesn't expose props directly, so we check the icon component
-    expect(wrapper.findComponent({ name: 'EturnityIcon' }).exists()).toBe(true)
+    expect(wrapper.props('size')).toBe('30px')
   })
 
   it('renders striked line when isStriked is true', async () => {

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

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