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

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

@@ -0,0 +1,273 @@
+<template>
+  <ModalComponent
+    :hide-close="true"
+    :is-open="isOpen"
+    @on-close="handleButtonClick('save_selected')"
+  >
+    <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'
+  import { saveCookieConsent } from '../../../helpers/cookieHelper'
+
+  const ModalContainer = styled.div`
+    padding: 24px;
+    min-width: 412px;
+    max-width: 452px;
+  `
+
+  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: () => [], // [{choice: '', text: ''}, ...]; expected values for choice are 'reject_all', 'accept_all', 'save_selected'
+        required: true,
+      },
+    },
+    emits: ['on-cookie-consent-click'],
+    data() {
+      return {
+        cookieState: {},
+      }
+    },
+    watch: {
+      isOpen(newValue) {
+        if (newValue) {
+          // Reload cookie state when modal is opened
+          this.loadCookieState()
+        }
+      },
+    },
+    created() {
+      this.loadCookieState()
+    },
+    methods: {
+      loadCookieState() {
+        const cookieValue = this.getCookieValue('cookieConsent')
+        if (cookieValue) {
+          try {
+            const cookieData = JSON.parse(cookieValue)
+            if (cookieData.categories) {
+              // Only keep categories that exist in current toggleOptions
+              this.cookieState = this.filterCategories(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
+          })
+          this.cookieState = initialState
+        }
+      },
+      filterCategories(categories) {
+        // Helper method to filter categories based on current toggleOptions
+        const filtered = {}
+        this.toggleOptions.forEach(opt => {
+          if (categories.hasOwnProperty(opt.choice)) {
+            filtered[opt.choice] = categories[opt.choice]
+          }
+        })
+        return filtered
+      },
+      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
+      },
+      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 reactive state to trigger re-render (only keep categories in toggleOptions)
+              this.cookieState = this.filterCategories(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) {
+        // expects choices: reject_all, accept_all, save_selected
+
+        // Initialize fresh categories object
+        const categories = {}
+        
+        this.toggleOptions.forEach((option) => {
+          categories[option.choice] = !!option.isRequired
+        })
+
+        if (choice === 'reject_all') {
+          // Set all to false EXCEPT required ones
+          this.toggleOptions.forEach(opt => {
+            categories[opt.choice] = !!opt.isRequired
+          })
+        } else if (choice === 'accept_all') {
+          // Set all categories to true
+          this.toggleOptions.forEach(opt => {
+            categories[opt.choice] = true
+          })
+        } else if (choice === 'save_selected') {
+          Object.assign(categories, this.cookieState)
+        }
+        saveCookieConsent(categories)
+        this.$emit('on-cookie-consent-click')
+      },
+    },
+  }
+</script>

package/src/components/modals/cookieConsent/index.js

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

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

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

package/src/components/tabsHeader/TabsHeader.spec.js

@@ -35,7 +35,7 @@ describe('TabsHeader', () => {
         ...props,
       },
       global: {
-        mocks: {
+        provide: {
           theme,
         },
       },

package/src/components/threeDots/index.vue

@@ -45,15 +45,10 @@
             {{ child.name }}
           </OptionChild>
         </ChildrenContainer>
-        <OptionsContainer
-          v-if="!isLoading"
-          :color-theme="colorTheme"
-          :text-wrap="textWrap"
-        >
+        <OptionsContainer v-if="!isLoading" :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"
@@ -159,9 +154,7 @@
     }
   `
 
-  const ButtonContainer = styled('div', {
-    iconColor: String,
-  })`
+  const ButtonContainer = styled('div', { iconColor: String })`
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -203,19 +196,14 @@
     background: #fff;
   `
 
-  const OptionsContainerAttrs = { textWrap: Boolean, colorTheme: String }
+  const OptionsContainerAttrs = { textWrap: Boolean }
   const OptionsContainer = styled('div', OptionsContainerAttrs)`
-    border: 1px solid
-      ${(props) =>
-        props.colorTheme == 'dark'
-          ? props.theme.semanticColors.teal[500]
-          : props.theme.colors.grey3};
+    border: 1px solid ${(props) => props.theme.colors.grey3};
     display: grid;
     grid-template-columns: 1fr;
     ${(props) => (props.textWrap ? 'width: 220px' : 'width: max-content')};
     border-radius: 4px;
-    background-color: ${({ colorTheme }) =>
-      colorTheme == 'dark' ? theme.colors.black : '#fff'};
+    background-color: #fff;
     max-height: 220px;
     overflow: auto;
     height: max-content;
@@ -223,7 +211,7 @@
       props.textWrap ? 'white-space: normal' : 'white-space: nowrap'};
   `
 
-  const optionAttrs = { isDisabled: Boolean, colorTheme: String }
+  const optionAttrs = { isDisabled: Boolean }
   const OptionItem = styled('div', optionAttrs)`
     padding: 12px;
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
@@ -231,19 +219,13 @@
     position: relative;
     ${(props) =>
       props.isDisabled
-        ? `background-color:  ${(colorTheme) =>
-            colorTheme == 'dark'
-              ? theme.semanticColors.teal[700]
-              : props.theme.colors.grey5}!important`
+        ? `background-color: ${props.theme.colors.grey5}!important`
         : ''};
     ${(props) =>
       props.isDisabled ? `color: ${props.theme.colors.grey2}` : ''};
 
     &:hover {
-      background-color: ${(props) =>
-        props.colorTheme == 'dark'
-          ? theme.semanticColors.teal[700]
-          : '#ebeef4'};
+      background-color: #ebeef4;
     }
 
     &:focus-visible {
@@ -251,17 +233,14 @@
       background-color: #ebeef4;
     }
   `
-  const OptionChild = styled('div', { colorTheme: String })`
+  const OptionChild = styled.div`
     padding: 12px;
     cursor: pointer;
     font-size: 13px;
     position: relative;
 
     &:hover {
-      background-color: ${(props) =>
-        props.colorTheme == 'dark'
-          ? theme.semanticColors.teal[600]
-          : '#ebeef4'};
+      background-color: #ebeef4;
     }
 
     &:focus-visible {
@@ -321,25 +300,14 @@
     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,
@@ -391,42 +359,20 @@
 
         const positionArray = this.determineElementQuarter(button, rectButton)
         contextMenu.style.transform = ''
-        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%)'
-          }
+        if (positionArray.includes('left')) {
+          contextMenu.style.left =
+            rectButton.right - rectRelativeParent.left + 5 + 'px'
         } else {
-          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%)'
-          }
+          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) {

package/src/helpers/cookieHelper.js

@@ -0,0 +1,29 @@
+export function saveCookieConsent(categories) {
+  // Create cookie data object with categories, timestamp, and consent_given
+  const cookieData = {
+    categories,
+    timestamp: new Date().toISOString(),
+    consent_given: true
+  }
+
+  const cookieString = JSON.stringify(cookieData)
+  const expiryDate = new Date()
+  expiryDate.setMonth(expiryDate.getMonth() + 6)
+
+  let cookieStr = `cookieConsent=${encodeURIComponent(
+    cookieString
+  )}; expires=${expiryDate.toUTCString()}; path=/`
+
+  const isEmbedded = window.self !== window.top
+  const isHttps = window.location.protocol === 'https:'
+
+  const sameSite = (isEmbedded && isHttps) ? 'None' : 'Lax'
+  cookieStr += `; sameSite=${sameSite}`
+
+  // Add Secure flag for HTTPS
+  if (isHttps) {
+    cookieStr += '; Secure'
+  }
+
+  document.cookie = cookieStr
+}

package/src/index.js

@@ -0,0 +1,28 @@
+import { ThemeProvider } from 'vue3-styled-components'
+import { theme, withLibraryTheme } from '@/withLibraryTheme.js'
+
+// Re-export the theme wrapper for any custom usage
+export { withLibraryTheme }
+
+// Vue plugin to install theme globally
+export const EturnityComponentsPlugin = {
+  install(app, options = {}) {
+    // Allow consumers to override the theme if needed
+    const finalTheme = options.theme || theme
+
+    // Provide theme globally to all components
+    app.provide('eturnityTheme', finalTheme)
+
+    // Make theme available via global properties as well
+    app.config.globalProperties.$eturnityTheme = finalTheme
+  },
+}
+
+// Export the theme for direct use
+export { theme }
+
+// Export ThemeProvider for consumers who want to use it directly
+export { ThemeProvider }
+
+// Default export for convenience
+export default EturnityComponentsPlugin

package/src/main.js

@@ -1,8 +1,11 @@
 import App from './App.vue'
 import { createApp } from 'vue'
 import router from './router/dynamicRoutes'
+import EturnityComponentsPlugin from './index.js'
 
 const app = createApp(App)
 
+// Use the plugin to provide theme globally
+app.use(EturnityComponentsPlugin)
 app.use(router)
 app.mount('#app')

package/src/withLibraryTheme.js

@@ -0,0 +1,28 @@
+import { h, defineComponent } from 'vue'
+import { ThemeProvider } from 'vue3-styled-components'
+import theme from '@/assets/theme.js'
+
+/**
+ * Centralized theme wrapper for all library components
+ * This ensures all components from this library automatically use the library's theme
+ * without requiring the consuming application to provide it
+ */
+export 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 { theme }
+export default withLibraryTheme

package/dist/main.es.js

@@ -1,7 +0,0 @@
-import App from "./main.es2.js";
-import "./main.es3.js";
-import router from "./main.es4.js";
-import { createApp } from "./main.es5.js";
-const app = createApp(App);
-app.use(router);
-app.mount("#app");

package/dist/main.es10.js

@@ -1,4 +0,0 @@
-const App_vue_vue_type_style_index_0_lang = "";
-export {
-  App_vue_vue_type_style_index_0_lang as default
-};

package/dist/main.es100.js

@@ -1,23 +0,0 @@
-import "./main.es3.js";
-import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
-const _hoisted_1 = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "18",
-  height: "18",
-  fill: "none"
-};
-const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#263238",
-  d: "M17 10H1c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1M4 16c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2M17 0H1C.45 0 0 .45 0 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1M4 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2"
-}, null, -1);
-const _hoisted_3 = [
-  _hoisted_2
-];
-function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
-}
-const collections = { render };
-export {
-  collections as default,
-  render
-};

package/dist/main.es101.js

@@ -1,26 +0,0 @@
-import "./main.es3.js";
-import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
-const _hoisted_1 = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "29",
-  height: "29",
-  fill: "#333"
-};
-const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", { d: "m10.5 14 4-8 4 8z" }, null, -1);
-const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#ccc",
-  d: "m10.5 16 4 8 4-8z",
-  class: "fix"
-}, null, -1);
-const _hoisted_4 = [
-  _hoisted_2,
-  _hoisted_3
-];
-function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
-}
-const compass = { render };
-export {
-  compass as default,
-  render
-};