@eturnity/eturnity_reusable_components 8.40.8-EPDM-17241.2 → 8.40.8-EPDM-1744.0

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/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.40.8-EPDM-17241.2",
+  "version": "8.40.8-EPDM-1744.0",
   "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/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/toggle/index.vue

@@ -46,6 +46,7 @@
           :is-checked="isChecked"
           :size="size"
           :toggle-color="toggleColor"
+          :toggle-margin="toggleMargin"
         />
       </ToggleWrapper>
       <LabelContainer
@@ -190,6 +191,7 @@
     toggleColor: String,
     size: String,
     disabled: Boolean,
+    toggleMargin: String,
   }
   const ToggleDot = styled('span', toggleProps)`
     position: absolute;
@@ -207,7 +209,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
@@ -317,6 +325,11 @@
         default: false,
         type: Boolean,
       },
+      toggleMargin: {
+        type: String,
+        default: null,
+        required: false,
+      },
     },
     methods: {
       onToggleChange() {

package/src/components/modals/cookieConsent/CookieConsent.vue

@@ -0,0 +1,442 @@
+<template>
+  <ModalComponent :hide-close="true" :is-open="isOpen" @on-close="closeModal">
+    <ModalContainer>
+      <TitleContainer>
+        <IconComponent name="cookie" size="16px" />
+        <TitleText>{{ titleText }}</TitleText>
+      </TitleContainer>
+      <ContentText v-html="contentText" />
+      <ToggleContainer>
+        <ToggleComponent
+          v-for="option in toggleOptions"
+          :key="option.choice"
+          :disabled="option.isRequired"
+          :is-checked="isToggleChecked(option.choice)"
+          :label="option.label"
+          :toggle-margin="toggleMargin"
+          @on-toggle-change="(value) => onToggleChange(option.choice, value)"
+        />
+      </ToggleContainer>
+      <ButtonsContainer>
+        <MainButton
+          v-for="button in buttonOptions"
+          :key="button.choice"
+          :text="button.text"
+          type="tertiary"
+          @click="handleButtonClick(button.choice)"
+        />
+      </ButtonsContainer>
+    </ModalContainer>
+  </ModalComponent>
+</template>
+
+<script>
+  import styled from 'vue3-styled-components'
+  import ModalComponent from '../modal'
+  import IconComponent from '../../icon'
+  import ToggleComponent from '../../inputs/toggle'
+  import MainButton from '../../buttons/mainButton'
+
+  const ModalContainer = styled.div`
+    padding: 24px;
+    max-width: 550px;
+  `
+
+  const TitleContainer = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 24px;
+  `
+
+  const TitleText = styled.div`
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 140%;
+    color: ${(props) => props.theme.semanticColors.teal[800]};
+  `
+
+  const ContentText = styled.div`
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 150%;
+    color: ${(props) => props.theme.semanticColors.grey[800]};
+    margin-bottom: 16px;
+
+    a {
+      color: ${(props) => props.theme.semanticColors.purple[500]};
+      text-decoration: none;
+
+      &:visited {
+        color: ${(props) => props.theme.semanticColors.purple[500]};
+      }
+    }
+  `
+
+  const ToggleContainer = styled.div`
+    margin-bottom: 24px;
+    display: inline-flex;
+    flex-direction: column;
+    gap: 16px;
+    width: 100%;
+  `
+
+  const ButtonsContainer = styled.div`
+    display: inline-flex;
+    gap: 8px;
+    flex-wrap: wrap;
+  `
+
+  export default {
+    name: 'CookieConsent',
+    components: {
+      ModalComponent,
+      ModalContainer,
+      IconComponent,
+      TitleContainer,
+      TitleText,
+      ContentText,
+      ToggleComponent,
+      ToggleContainer,
+      MainButton,
+      ButtonsContainer,
+    },
+    props: {
+      isOpen: {
+        type: Boolean,
+        default: false,
+      },
+      titleText: {
+        type: String,
+        default: 'Cookie Consent',
+      },
+      contentText: {
+        type: String,
+        default: 'We use cookies to enhance site navigation',
+      },
+      toggleMargin: {
+        type: String,
+        default: null,
+        required: false,
+      },
+      toggleOptions: {
+        type: Array,
+        default: () => [],
+        required: true,
+      },
+      buttonOptions: {
+        type: Array,
+        default: () => [],
+        required: true,
+      },
+    },
+    emits: ['on-close'],
+    data() {
+      return {
+        cookieState: {},
+      }
+    },
+    watch: {
+      isOpen(newValue) {
+        if (newValue) {
+          // Reload cookie state when modal is opened
+          this.loadCookieState()
+        }
+      },
+    },
+    created() {
+      this.loadCookieState()
+      this.checkUrlParams()
+    },
+    methods: {
+      getUrlParams() {
+        const params = new URLSearchParams(window.location.search)
+        const result = {}
+        for (const [key, value] of params) {
+          result[key] = value
+        }
+        return result
+      },
+      checkUrlParams() {
+        const urlParams = this.getUrlParams()
+
+        // If cookies_accepted=true, trigger accept_all
+        if (urlParams.cookies_accepted === 'true') {
+          this.handleButtonClick('accept_all')
+          return
+        }
+
+        // Only process cookie changes if cookieType=advanced
+        if (urlParams.cookieType !== 'advanced') {
+          return
+        }
+
+        // Check if cookies_popup=false and cookies_accepted=false
+        if (
+          urlParams.cookies_popup === 'false' &&
+          urlParams.cookies_accepted === 'false'
+        ) {
+          const cookieValue = this.getCookieValue('cookieConsent')
+          if (!cookieValue) {
+            return
+          }
+
+          try {
+            const cookieData = JSON.parse(cookieValue)
+            let hasChanges = false
+
+            // Set marketing and statistics to false
+            if (cookieData.categories) {
+              if (cookieData.categories.marketing !== false) {
+                cookieData.categories.marketing = false
+                hasChanges = true
+              }
+              if (cookieData.categories.statistics !== false) {
+                cookieData.categories.statistics = false
+                hasChanges = true
+              }
+            }
+
+            // If any changes were made, update the cookie and state
+            if (hasChanges) {
+              cookieData.timestamp = new Date().toISOString()
+              this.setCookieConsent(cookieData)
+              this.cookieState = { ...cookieData.categories }
+            }
+          } catch (error) {
+            // eslint-disable-next-line no-console
+            console.error('Error checking URL params:', error)
+          }
+          return
+        }
+
+        // Only proceed with individual param checks if cookies_accepted=true
+        if (urlParams.cookies_accepted !== 'true') {
+          return
+        }
+
+        const cookieValue = this.getCookieValue('cookieConsent')
+        if (!cookieValue) {
+          return
+        }
+
+        try {
+          const cookieData = JSON.parse(cookieValue)
+          let hasChanges = false
+
+          // Check for cookies_marketing param
+          if (urlParams.cookies_marketing !== undefined) {
+            const marketingValue = urlParams.cookies_marketing === 'true'
+            if (
+              cookieData.categories &&
+              cookieData.categories.marketing !== marketingValue
+            ) {
+              cookieData.categories.marketing = marketingValue
+              hasChanges = true
+            }
+          }
+
+          // Check for cookies_statistics param
+          if (urlParams.cookies_statistics !== undefined) {
+            const statisticsValue = urlParams.cookies_statistics === 'true'
+            if (
+              cookieData.categories &&
+              cookieData.categories.statistics !== statisticsValue
+            ) {
+              cookieData.categories.statistics = statisticsValue
+              hasChanges = true
+            }
+          }
+
+          // If any changes were made, update the cookie and state
+          if (hasChanges) {
+            cookieData.timestamp = new Date().toISOString()
+            this.setCookieConsent(cookieData)
+            this.cookieState = { ...cookieData.categories }
+          }
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.error('Error checking URL params:', error)
+        }
+      },
+      loadCookieState() {
+        const cookieValue = this.getCookieValue('cookieConsent')
+        if (cookieValue) {
+          try {
+            const cookieData = JSON.parse(cookieValue)
+            if (cookieData.categories) {
+              this.cookieState = { ...cookieData.categories }
+            }
+          } catch (error) {
+            // eslint-disable-next-line no-console
+            console.error('Error loading cookie state:', error)
+          }
+        } else {
+          // Initialize cookieState with default values from toggleOptions
+          const initialState = {}
+          this.toggleOptions.forEach((option) => {
+            initialState[option.choice] = option.isRequired ? true : false
+          })
+          this.cookieState = initialState
+        }
+      },
+      closeModal() {
+        this.$emit('on-close')
+      },
+      getCookieValue(cookieName) {
+        const name = cookieName + '='
+        const decodedCookie = decodeURIComponent(document.cookie)
+        const cookieArray = decodedCookie.split(';')
+        for (let i = 0; i < cookieArray.length; i++) {
+          let cookie = cookieArray[i].trim()
+          if (cookie.indexOf(name) === 0) {
+            return cookie.substring(name.length, cookie.length)
+          }
+        }
+        return null
+      },
+      setCookieConsent(cookieData) {
+        const cookieString = JSON.stringify(cookieData)
+        const expiryDate = new Date()
+        expiryDate.setFullYear(expiryDate.getFullYear() + 1) // Cookie expires in 1 year
+        document.cookie = `cookieConsent=${encodeURIComponent(
+          cookieString
+        )}; expires=${expiryDate.toUTCString()}; path=/`
+      },
+      initializeCookie() {
+        const existingCookie = this.getCookieValue('cookieConsent')
+
+        // If cookie doesn't exist, create it
+        if (!existingCookie) {
+          const categories = {}
+          this.toggleOptions.forEach((option) => {
+            // Set required options to true, others to false
+            categories[option.choice] = option.isRequired ? true : false
+          })
+
+          const cookieData = {
+            timestamp: new Date().toISOString(),
+            consent_given: true,
+            categories,
+          }
+
+          this.setCookieConsent(cookieData)
+          // Load the state into reactive data
+          this.cookieState = { ...categories }
+        }
+      },
+      isToggleChecked(choice) {
+        // Check if the option is required - if so, always return true
+        const option = this.toggleOptions.find((opt) => opt.choice === choice)
+        if (option && option.isRequired) {
+          return true
+        }
+
+        // If we have the choice in our reactive state, return it
+        if (Object.prototype.hasOwnProperty.call(this.cookieState, choice)) {
+          return this.cookieState[choice]
+        }
+
+        // Fallback: return false for non-required options with no state
+        return false
+      },
+      onToggleChange(choice, value) {
+        // Check if this is a required option - if so, don't allow changes
+        const option = this.toggleOptions.find((opt) => opt.choice === choice)
+        if (option && option.isRequired) {
+          return
+        }
+
+        const cookieValue = this.getCookieValue('cookieConsent')
+
+        if (cookieValue) {
+          try {
+            const cookieData = JSON.parse(cookieValue)
+
+            // Set the category value
+            if (cookieData.categories) {
+              cookieData.categories[choice] = value
+
+              // Update timestamp
+              cookieData.timestamp = new Date().toISOString()
+
+              // Save updated cookie
+              this.setCookieConsent(cookieData)
+
+              // Update reactive state to trigger re-render
+              this.cookieState = { ...cookieData.categories }
+            }
+          } catch (error) {
+            // eslint-disable-next-line no-console
+            console.error('Error updating cookieConsent cookie:', error)
+          }
+        } else {
+          // If cookie doesn't exist yet, just update the reactive state
+          this.cookieState = { ...this.cookieState, [choice]: value }
+        }
+      },
+      handleButtonClick(choice) {
+        // reject_all, accept_all, save_selected
+        const cookieValue = this.getCookieValue('cookieConsent')
+        let cookieData = { categories: {} }
+
+        if (cookieValue) {
+          try {
+            cookieData = JSON.parse(cookieValue)
+          } catch (error) {
+            // eslint-disable-next-line no-console
+            console.error('Error parsing cookieConsent:', error)
+          }
+        }
+
+        // Initialize categories from toggleOptions if they don't exist
+        if (!cookieData.categories) {
+          cookieData.categories = {}
+        }
+        this.toggleOptions.forEach((option) => {
+          if (
+            !Object.prototype.hasOwnProperty.call(
+              cookieData.categories,
+              option.choice
+            )
+          ) {
+            cookieData.categories[option.choice] = option.isRequired
+              ? true
+              : false
+          }
+        })
+
+        if (choice === 'reject_all') {
+          cookieData.timestamp = new Date().toISOString()
+          cookieData.consent_given = true
+          cookieData.categories = {
+            ...cookieData.categories,
+            marketing: false,
+            statistics: false,
+          }
+          this.setCookieConsent(cookieData)
+        } else if (choice === 'accept_all') {
+          cookieData.timestamp = new Date().toISOString()
+          cookieData.consent_given = true
+          cookieData.categories = {
+            ...cookieData.categories,
+            marketing: true,
+            statistics: true,
+          }
+          this.setCookieConsent(cookieData)
+        } else if (choice === 'save_selected') {
+          cookieData.timestamp = new Date().toISOString()
+          cookieData.consent_given = true
+          cookieData.categories = this.cookieState
+          this.setCookieConsent(cookieData)
+        }
+
+        // Set allowCookies cookie to true
+        const expiryDate = new Date()
+        expiryDate.setFullYear(expiryDate.getFullYear() + 1) // Cookie expires in 1 year
+        document.cookie = `allowCookies=true; expires=${expiryDate.toUTCString()}; path=/`
+        this.$emit('on-close')
+      },
+    },
+  }
+</script>