@eturnity/eturnity_reusable_components 9.3.1-EPDM-13987.2 → 9.3.1-EPDM-1744.6

package/README.md

@@ -1,11 +1,99 @@
 # eturnity_reusable_components
 
-## To use in a project:
+## Installation
 
-```
+```bash
 npm install @eturnity/eturnity_reusable_components
 ```
 
+## Usage
+
+### Setting up the theme
+
+The library now includes its own theme. You need to wrap your application with the `ThemeProvider` component from this library.
+
+**Recommended approach - Using the exported theme:**
+
+```vue
+<!-- App.vue -->
+<template>
+  <ThemeProvider :theme="eturnityTheme">
+    <RouterView />
+    <!-- Your app content -->
+  </ThemeProvider>
+</template>
+
+<script>
+  import {
+    ThemeProvider,
+    theme as eturnityTheme,
+  } from '@eturnity/eturnity_reusable_components'
+
+  export default {
+    components: { ThemeProvider },
+    setup() {
+      return {
+        eturnityTheme,
+      }
+    },
+  }
+</script>
+```
+
+**Alternative - Using the plugin (for non-styled-component scenarios):**
+
+If you also need the theme accessible via Vue's provide/inject:
+
+```javascript
+// main.js
+import { createApp } from 'vue'
+import App from './App.vue'
+import EturnityComponentsPlugin from '@eturnity/eturnity_reusable_components'
+
+const app = createApp(App)
+app.use(EturnityComponentsPlugin)
+app.mount('#app')
+```
+
+### Using individual components
+
+You can still import and use individual components directly:
+
+```javascript
+import MainButton from '@eturnity/eturnity_reusable_components/src/components/buttons/mainButton'
+import InputText from '@eturnity/eturnity_reusable_components/src/components/inputs/inputText'
+```
+
+### Overriding the theme (optional)
+
+If you need to customize or override the theme, you can pass your own theme when installing the plugin:
+
+```javascript
+import EturnityComponentsPlugin, {
+  theme as defaultTheme,
+} from '@eturnity/eturnity_reusable_components'
+
+const customTheme = {
+  ...defaultTheme,
+  colors: {
+    ...defaultTheme.colors,
+    primary: '#YOUR_COLOR',
+  },
+}
+
+app.use(EturnityComponentsPlugin, { theme: customTheme })
+```
+
+### Direct access to theme
+
+You can also import and use the theme directly:
+
+```javascript
+import { theme } from '@eturnity/eturnity_reusable_components'
+// or
+import theme from '@eturnity/eturnity_reusable_components/theme'
+```
+
 ### To run locally
 
 ```

package/dist/index.es.js

@@ -0,0 +1,17 @@
+import { ThemeProvider } from "vue3-styled-components";
+import { withLibraryTheme } from "./index.es2.js";
+import theme from "./index.es3.js";
+const EturnityComponentsPlugin = {
+  install(app, options = {}) {
+    const finalTheme = options.theme || theme;
+    app.provide("eturnityTheme", finalTheme);
+    app.config.globalProperties.$eturnityTheme = finalTheme;
+  }
+};
+export {
+  EturnityComponentsPlugin,
+  ThemeProvider,
+  EturnityComponentsPlugin as default,
+  theme,
+  withLibraryTheme
+};

package/dist/index.es2.js

@@ -0,0 +1,27 @@
+import { defineComponent, h } from "vue";
+import { ThemeProvider } from "vue3-styled-components";
+import theme from "./index.es3.js";
+function withLibraryTheme(component, componentName = "Component") {
+  return defineComponent({
+    name: `Eturnity${componentName}`,
+    inheritAttrs: true,
+    setup(props, {
+      attrs,
+      slots
+    }) {
+      return () => h(ThemeProvider, {
+        theme
+      }, {
+        default: () => h(component, {
+          ...props,
+          ...attrs
+        }, slots)
+      });
+    }
+  });
+}
+export {
+  withLibraryTheme as default,
+  theme,
+  withLibraryTheme
+};

package/dist/{main.es8.js → index.es3.js}

@@ -71,7 +71,7 @@ const theme = (() => {
     disabled: "#dfe1e1",
     transparentWhite2: "#ffffff32",
     transparentWhite1: "#ffffff16",
-    transparentBlack1: "#162228e6",
+    transparentBlack1: "#263238e6",
     transparentBlack2: "#263238e5",
     transparentBlue1: "#20a4cae6",
     blueElectric: "#66dffa",
@@ -177,39 +177,6 @@ const theme = (() => {
       700: "#993434",
       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 = {
@@ -668,6 +635,55 @@ const theme = (() => {
             }
           }
         },
+        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],
+              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]
+            }
+          }
+        },
         ghost: {
           // type
           main: {

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "9.3.1-EPDM-13987.2",
+  "version": "9.3.1-EPDM-1744.6",
   "files": [
     "dist",
     "src"
   ],
-  "main": "./dist/main.umd.js",
-  "module": "./dist/main.es.js",
+  "main": "./src/index.js",
+  "module": "./src/index.js",
   "private": false,
   "scripts": {
     "dev": "vite",
@@ -20,6 +20,10 @@
     "merge-remote-master": "node scripts/merge-remote-master.js",
     "prepublishOnly": "npm run test && npm run build"
   },
+  "peerDependencies": {
+    "vue": "^3.0.0",
+    "vue3-styled-components": "^1.0.0"
+  },
   "dependencies": {
     "@originjs/vite-plugin-commonjs": "1.0.3",
     "@vue/compat": "3.3.4",

package/src/assets/svgIcons/cookie.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.76848 0.499692C7.27285 0.482653 7.51085 0.982283 7.40227 1.34149V1.34247C7.31195 1.6384 7.28786 2.11586 7.41985 2.50946C7.54138 2.8714 7.77048 3.11974 8.20891 3.15887H8.21087C8.25521 3.16302 8.29937 3.17126 8.34173 3.18426L8.46477 3.237L8.57415 3.31219L8.66595 3.40887L8.73528 3.52215L8.78118 3.64813L8.79973 3.77997C8.80149 3.82413 8.7992 3.86895 8.79192 3.91278L8.78997 3.9245C8.69351 4.42951 8.79248 4.76904 8.95891 4.95672C9.11653 5.13404 9.43841 5.29125 10.0585 5.20477L10.0761 5.20282C10.1493 5.19522 10.2235 5.19956 10.2949 5.21649L10.3652 5.23797L10.4325 5.26629C10.4763 5.28787 10.5177 5.31464 10.5556 5.3454L10.6103 5.3952L10.6581 5.44989C10.6883 5.48847 10.7145 5.53055 10.7353 5.57489L10.7626 5.64325L10.7822 5.71356C10.7977 5.78511 10.8009 5.85928 10.7919 5.93231L10.7909 5.94012C10.7298 6.37631 10.8905 6.67501 11.1249 6.8161C11.3671 6.96157 11.841 7.03044 12.5751 6.66082L12.5771 6.65985C12.9695 6.46382 13.5189 6.72222 13.499 7.24676C13.4345 8.9266 12.7218 10.5165 11.5107 11.6823C10.2993 12.8481 8.68311 13.4996 7.00188 13.4997C5.29835 13.4988 3.66225 12.8294 2.44719 11.6354C1.2324 10.4415 0.534515 8.81797 0.503824 7.11493C0.473259 5.41173 1.11283 3.76395 2.2841 2.52704C3.45538 1.2903 5.06528 0.561917 6.76751 0.499692H6.76848ZM6.34856 1.53582C5.07869 1.6884 3.89567 2.27896 3.00969 3.21454C2.01866 4.2611 1.47809 5.65529 1.50383 7.09637C1.52977 8.53759 2.1203 9.91217 3.14836 10.9225C4.17649 11.9328 5.56048 12.4989 7.00188 12.4997L7.26751 12.4929C8.59383 12.4287 9.85626 11.8866 10.8173 10.9616C11.7009 10.111 12.2701 8.99358 12.4452 7.79071C11.75 8.01196 11.1114 7.97533 10.6093 7.67352C10.0857 7.35864 9.81085 6.81654 9.78118 6.2243C9.13445 6.23459 8.58523 6.04228 8.21087 5.62079C7.84388 5.20726 7.71936 4.65775 7.76165 4.09051C7.0627 3.90439 6.6585 3.38441 6.47161 2.82782C6.32856 2.40142 6.30313 1.93704 6.34856 1.53582ZM6.49993 9.99969C6.77593 9.99969 6.9997 10.2237 6.99993 10.4997C6.99993 10.7758 6.77607 10.9997 6.49993 10.9997C6.22382 10.9997 5.99993 10.7758 5.99993 10.4997C6.00015 10.2238 6.22396 9.99973 6.49993 9.99969ZM9.49993 8.99969C9.77593 8.99969 9.9997 9.22374 9.99993 9.49969C9.99993 9.77583 9.77607 9.99969 9.49993 9.99969C9.22382 9.99965 8.99993 9.77581 8.99993 9.49969C9.00016 9.22377 9.22396 8.99973 9.49993 8.99969ZM3.49992 7.99969C3.77592 7.99969 3.99969 8.22374 3.99992 8.49969C3.99992 8.77583 3.77607 8.99969 3.49992 8.99969C3.22381 8.99965 2.99992 8.77581 2.99992 8.49969C3.00015 8.22377 3.22396 7.99973 3.49992 7.99969ZM6.49993 6.99969C6.77593 6.99969 6.9997 7.22374 6.99993 7.49969C6.99993 7.77583 6.77607 7.99969 6.49993 7.99969C6.22382 7.99965 5.99993 7.77581 5.99993 7.49969C6.00016 7.22377 6.22396 6.99973 6.49993 6.99969ZM4.49992 3.99969C4.77592 3.99969 4.99969 4.22374 4.99992 4.49969C4.99992 4.77583 4.77607 4.99969 4.49992 4.99969C4.22382 4.99965 3.99992 4.77581 3.99992 4.49969C4.00015 4.22377 4.22396 3.99973 4.49992 3.99969Z" fill="#263238"/>
+</svg>

package/src/assets/theme.js

@@ -70,7 +70,7 @@ const theme = (() => {
     disabled: '#dfe1e1',
     transparentWhite2: '#ffffff32',
     transparentWhite1: '#ffffff16',
-    transparentBlack1: '#162228e6',
+    transparentBlack1: '#263238e6',
     transparentBlack2: '#263238e5',
     transparentBlue1: '#20a4cae6',
     blueElectric: '#66dffa',
@@ -178,39 +178,6 @@ 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 = {
@@ -659,6 +626,55 @@ const theme = (() => {
             },
           },
         },
+        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],
+              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],
+            },
+          },
+        },
         ghost: {
           // type
           main: {

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

@@ -10,7 +10,6 @@
       :height="height"
       :is-active="isActive"
       :is-disabled="isDisabled"
-      :is-hovered="isHovered"
       :min-width="minWidth"
       :type="type"
       :variant="variant"
@@ -47,7 +46,7 @@
         data-test-id="button-icon-text"
         :height="height"
       >
-        {{ isFirstLetterCapitalized ? capitalizeFirstLetter(text) : text }}
+        {{ text }}
         <Icon
           v-if="showCaret"
           :color="
@@ -116,13 +115,11 @@
     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) =>
@@ -143,9 +140,6 @@
         : 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) => {
@@ -215,7 +209,6 @@
     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]
@@ -357,11 +350,6 @@
         default: false,
         type: Boolean,
       },
-      isHovered: {
-        required: false,
-        default: false,
-        type: Boolean,
-      },
       fillType: {
         required: false,
         default: 'fill',
@@ -401,21 +389,20 @@
         type: String,
         default: '',
       },
-      isFirstLetterCapitalized: {
-        required: false,
-        default: false,
-        type: Boolean,
-      },
     },
     data() {
       return {
         theme: Theme,
       }
     },
-    methods: {
-      capitalizeFirstLetter(word) {
-        return word.charAt(0).toUpperCase() + word.slice(1)
-      },
-    },
+    // 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/icon/icon.spec.js

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

package/src/components/icon/index.js

@@ -0,0 +1,14 @@
+import { h } from 'vue'
+import { ThemeProvider } from 'vue3-styled-components'
+import theme from '../../assets/theme.js'
+import IconComponent from './Icon.vue'
+
+export default {
+  name: 'EturnityIcon',
+  setup(props, { attrs, slots }) {
+    return () =>
+      h(ThemeProvider, { theme }, () =>
+        h(IconComponent, { ...props, ...attrs }, slots)
+      )
+  },
+}

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

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

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

@@ -12,7 +12,6 @@
         <InfoText v-if="infoTextMessage" size="16px" :text="infoTextMessage" />
       </LabelWrapper>
       <InputContainer
-        :app-theme="appTheme"
         :disabled="isDisabled"
         :font-size="fontSize"
         :input-width="inputWidth"
@@ -79,7 +78,6 @@
     disabled: Boolean,
     fontSize: String,
     inputWidth: String,
-    appTheme: String,
   }
 
   const InputContainer = styled('div', inputProps)`
@@ -92,12 +90,7 @@
         props.hasUnit ? '11px 40px 11px 10px !important' : '15px !important'};
       border-radius: 4px !important;
       font-size: ${(props) => `${props.fontSize} !important`};
-      color: ${({ appTheme, theme }) =>
-        `${
-          appTheme == 'dark' ? theme.colors.white : theme.colors.grey1
-        } !important`};
-      background-color: ${({ appTheme }) =>
-        appTheme == 'dark' ? 'transparent' : 'white'};
+      color: ${(props) => `${props.theme.colors.grey1} !important`};
       width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
       max-width: 100%;
       box-sizing: border-box; // to allow width of 100% with padding
@@ -214,10 +207,6 @@
         default: false,
         type: Boolean,
       },
-      appTheme: {
-        type: String,
-        default: 'light',
-      },
     },
     methods: {
       onChangeHandler($event) {

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

@@ -48,6 +48,7 @@
           :is-checked="isChecked"
           :size="size"
           :toggle-color="toggleColor"
+          :toggle-margin="toggleMargin"
         />
       </ToggleWrapper>
       <LabelContainer
@@ -192,6 +193,7 @@
     toggleColor: String,
     size: String,
     disabled: Boolean,
+    toggleMargin: String,
   }
   const ToggleDot = styled('span', toggleProps)`
     position: absolute;
@@ -209,7 +211,13 @@
         : '14px'};
     left: 3px;
     bottom: ${(props) =>
-      props.size === 'medium' ? '5px' : props.size === 'small' ? '2px' : '5px'};
+      props.toggleMargin
+        ? props.toggleMargin
+        : props.size === 'medium'
+        ? '5px'
+        : props.size === 'small'
+        ? '2px'
+        : '5px'};
     background-color: ${(props) =>
       props.disabled
         ? props.theme.colors.disabled
@@ -319,6 +327,11 @@
         default: false,
         type: Boolean,
       },
+      toggleMargin: {
+        type: String,
+        default: null,
+        required: false,
+      },
     },
     methods: {
       onToggleChange() {