@eturnity/eturnity_reusable_components 9.7.5 → 9.10.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": "9.7.5",
+  "version": "9.10.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/buttons/buttonIcon/index.vue

@@ -288,6 +288,9 @@
       CountBadge,
       BetaTag,
     },
+    inject: {
+      theme: { default: () => Theme },
+    },
     props: {
       type: {
         required: false,
@@ -392,11 +395,6 @@
         default: '',
       },
     },
-    data() {
-      return {
-        theme: Theme,
-      }
-    },
     // computed: {
     //   getIconColor() {
     //     console.log(this.theme[this.themeType][this.type][this.variant])

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

@@ -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() {

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`
+    box-sizing: border-box;
+    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: () => [], // [{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

@@ -242,7 +242,7 @@
         this.$emit('on-close')
       },
       handleKeyDown({ key }) {
-        if (key === 'Escape') {
+        if (key === 'Escape' && !this.hideClose) {
           this.onCloseModal()
         }
       },

package/src/components/styledText/index.js

@@ -1,6 +1,7 @@
 import styled from 'vue3-styled-components'
 
 const TEXT_VARIANTS = {
+  HEADING_SMALL: 'heading-small',
   HEADING_MEDIUM: 'heading-medium',
   HEADING_LARGE: 'heading-large',
   BODY_SMALL: 'body-small',
@@ -12,6 +13,12 @@ const TEXT_VARIANTS = {
 }
 
 const textVariants = {
+  [TEXT_VARIANTS.HEADING_SMALL]: {
+    fontSize: '18px',
+    fontWeight: '500',
+    lineHeight: '130%',
+    letterSpacing: '-1.5%',
+  },
   [TEXT_VARIANTS.HEADING_MEDIUM]: {
     fontSize: '20px',
     fontWeight: '500',

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

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

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')