@eturnity/eturnity_reusable_components 9.19.4 → 9.19.5

package/src/components/pageSubtitle/index.vue

@@ -1,7 +1,7 @@
 <template>
   <SubtitleText
-    data-test-id="page_wrapper"
     :color="color"
+    data-test-id="page_wrapper"
     :has-info-text="!!infoText"
     :margin-bottom="marginBottom"
   >

package/src/components/projectMarker/ProjectMarker.stories.js

@@ -9,7 +9,7 @@ export default {
     markerData: {
       control: 'object',
       description:
-        'Object containing marker data including translations and color',
+        'Object containing marker data including translations, color, and choice (sold/lost/transferred)',
     },
     activeLanguage: {
       control: 'text',
@@ -19,9 +19,18 @@ export default {
       control: 'text',
       description: 'Optional date to display next to the marker',
     },
+    cursor: {
+      control: 'text',
+      description: 'Cursor style for the marker',
+    },
+    theme: {
+      control: false,
+      description: 'Optional theme object for sold/lost icon colors',
+    },
     isEditable: {
       control: 'boolean',
-      description: 'Whether the marker can be edited',
+      description:
+        'Whether the marker can be edited/deleted (shows three-dots menu)',
     },
     isGroupSupport: {
       control: 'boolean',
@@ -31,14 +40,6 @@ export default {
       control: 'boolean',
       description: 'Whether the user is a limited partner',
     },
-    cursor: {
-      control: 'text',
-      description: 'Cursor style for the marker',
-    },
-    hasBorderRadius: {
-      control: 'boolean',
-      description: 'Whether to show border radius',
-    },
   },
 }
 
@@ -48,9 +49,6 @@ const Template = (args) => ({
     return { args }
   },
   template: '<ProjectMarker v-bind="args" />',
-  provide: {
-    theme,
-  },
 })
 
 export const Default = Template.bind({})
@@ -65,11 +63,11 @@ Default.args = {
   },
   activeLanguage: 'en-us',
   date: '23.07.2022',
+  cursor: 'pointer',
+  theme,
   isEditable: true,
   isGroupSupport: false,
   isLimitedPartner: false,
-  cursor: 'pointer',
-  hasBorderRadius: true,
 }
 
 export const Lost = Template.bind({})
@@ -81,8 +79,8 @@ Lost.args = {
       'en-us': { name: 'Lost' },
     },
     color: '#F44336',
-    can_be_deleted: true,
   },
+  theme,
 }
 
 export const Transferred = Template.bind({})
@@ -94,7 +92,6 @@ Transferred.args = {
       'en-us': { name: 'Transferred' },
     },
     color: '#2196F3',
-    can_be_deleted: true,
   },
 }
 
@@ -104,27 +101,20 @@ WithoutDate.args = {
   date: null,
 }
 
-export const NotEditable = Template.bind({})
-NotEditable.args = {
-  ...Default.args,
-  isEditable: false,
-}
-
-export const LimitedPartner = Template.bind({})
-LimitedPartner.args = {
-  ...Default.args,
-  isLimitedPartner: true,
-}
-
-export const WithGroupSupport = Template.bind({})
-WithGroupSupport.args = {
+export const CustomColor = Template.bind({})
+CustomColor.args = {
   ...Default.args,
-  isGroupSupport: true,
-  isLimitedPartner: true,
+  markerData: {
+    choice: null,
+    translations: {
+      'en-us': { name: 'In progress' },
+    },
+    color: '#9C27B0',
+  },
 }
 
-export const WithoutBorderRadius = Template.bind({})
-WithoutBorderRadius.args = {
+export const NotEditable = Template.bind({})
+NotEditable.args = {
   ...Default.args,
-  hasBorderRadius: false,
+  isEditable: false,
 }

package/src/components/projectMarker/index.vue

@@ -1,35 +1,41 @@
 <template>
-  <PageContainer>
-    <MarkerContainer
+  <PageContainer :truncate-label="truncateLabel">
+    <PillWrapper
       v-if="markerData && markerData.translations[activeLanguage]"
-      :background-color="markerData.color"
-      :cursor="cursor"
-      :has-border-radius="hasBorderRadius"
-      :has-icon="!!iconName"
-      :is-active="activated"
-      :is-edition-allowed="editionAllowed"
+      :cursor="editionAllowed ? 'pointer' : cursor"
       :with-date="!!date"
-      @click="editionAllowed ? (activated = !activated) : ''"
+      :truncate-label="truncateLabel"
+      @click="editionAllowed ? (activated = !activated) : null"
     >
-      <Icon
-        v-if="!!iconName"
-        color="white"
-        :cursor="cursor"
-        :name="iconName"
-        size="10px"
-      />
-      <span>{{
-        markerData.translations[activeLanguage]
-          ? markerData.translations[activeLanguage].name
-          : '-'
-      }}</span>
-      <DotWrapper v-if="editionAllowed" class="dotContainer">
-        <DotIcon />
-        <DotIcon />
-        <DotIcon />
-      </DotWrapper>
+      <PillContent :truncate-label="truncateLabel">
+        <MarkerDotPill
+          v-if="!markerIcon"
+          :color="markerData.color || themeGrey3"
+        />
+        <Icon
+          v-if="markerIcon"
+          :color="markerIcon.color"
+          :cursor="cursor"
+          :name="markerIcon.name"
+          size="10px"
+        />
+        <MarkerName :truncate-label="truncateLabel">{{
+          markerData.translations[activeLanguage]
+            ? markerData.translations[activeLanguage].name
+            : '-'
+        }}</MarkerName>
+        <DotWrapper
+          v-if="editionAllowed"
+          class="dotContainer"
+          :class="{ visible: activated }"
+        >
+          <DotIcon />
+          <DotIcon />
+          <DotIcon />
+        </DotWrapper>
+      </PillContent>
       <EditContainer
-        v-if="activated"
+        v-if="editionAllowed && activated"
         v-click-outside="clickOutsideActionHandler"
       >
         <EditItem @click="deleteModalOpened = !deleteModalOpened">
@@ -43,10 +49,10 @@
           <div>{{ $gettext('Edit') }}</div>
         </EditItem>
       </EditContainer>
-    </MarkerContainer>
-    <Date v-if="!!date">
+    </PillWrapper>
+    <PillDate v-if="!!date">
       {{ date }}
-    </Date>
+    </PillDate>
     <Modal
       :is-open="deleteModalOpened"
       :prevent-outside-close="true"
@@ -73,14 +79,15 @@
   // import ProjectMarker from "@eturnity/eturnity_reusable_components/src/components/projectMarker"
   // To use:
   // <project-marker
-  //   :activeLanguage="'en-us'"
-  //   :markerData="{"choice":"sold","translations":{"en-us":{"name":"Sold"}}","color":"#000"}"
-  //   :isLimitedPartner="false"
-  //   :isGroupSupport="false"
-  //   :isEditable='false'
-  //   :date="'23.07.2022'"
-  //   @editHandler="onMarkerEdit($event)"
-  //   @deleteHandler="onMarkerDelete($event)"
+  //   :active-language="'en-us'"
+  //   :marker-data="{ choice, color, translations, can_be_deleted }"
+  //   :date="'23.07.2022'"  (optional)
+  //   :theme="theme"  (optional)
+  //   :is-editable="true"
+  //   :is-limited-partner="false"
+  //   :is-group-support="false"
+  //   @edit-handler="onEdit"
+  //   @delete-handler="onDelete"
   // />
 
   import styled from 'vue3-styled-components'
@@ -92,11 +99,18 @@
   import PageSubtitle from '../pageSubtitle'
   import MainButton from '../buttons/mainButton'
 
-  const PageContainer = styled.div`
+  const PageContainerProps = { truncateLabel: Boolean }
+  const PageContainer = styled('div', PageContainerProps)`
     display: flex;
     align-items: center;
     font-size: 12px;
     line-height: 14px;
+    ${(props) =>
+      props.truncateLabel &&
+      `
+      min-width: 0;
+      max-width: 100%;
+    `}
   `
 
   const ModalContainer = styled.div`
@@ -110,47 +124,66 @@
     margin-top: 30px;
   `
 
-  const MarkerAttrs = {
-    hasBorderRadius: Boolean,
-    backgroundColor: String,
+  const PillWrapperProps = {
     withDate: Boolean,
-    hasIcon: Boolean,
-    isEditionAllowed: Boolean,
-    isActive: Boolean,
     cursor: String,
+    truncateLabel: Boolean,
   }
-  const MarkerContainer = styled('div', MarkerAttrs)`
-    display: grid;
-    grid-template-columns: ${(props) =>
-      props.hasIcon || props.isEditionAllowed ? 'auto 1fr' : '1fr'};
-    grid-gap: 5px;
+  const PillWrapper = styled('div', PillWrapperProps)`
     position: relative;
+    display: flex;
+    gap: 8px;
     align-items: center;
-    padding: 2px 7px;
-    color: ${(props) => props.theme.colors.white};
-    background-color: ${(props) =>
-      props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
+    ${(props) =>
+      props.truncateLabel &&
+      `
+      flex: 1 1 0;
+      min-width: 0;
+    `}
+    font-size: 12px;
+    font-weight: 400;
     border: 1px solid
       ${(props) =>
-        props.backgroundColor
-          ? props.backgroundColor
-          : props.theme.colors.grey3};
-    border-radius: ${(props) =>
-      props.hasBorderRadius ? (props.withDate ? '4px 0 0 4px' : '4px') : '0'};
-    white-space: nowrap;
-    cursor: ${(props) => (props.isEditionAllowed ? 'pointer' : props.cursor)};
+        props.theme.semanticColors?.teal?.[100] || props.theme.colors.grey4};
+    padding: 2px 8px;
+    border-radius: ${(props) => (props.withDate ? '8px 0 0 8px' : '8px')};
+    color: ${(props) =>
+      props.theme.semanticColors?.teal?.[800] || props.theme.colors.black};
+    cursor: ${(props) => props.cursor || 'default'};
+  `
+
+  const PillContentProps = { truncateLabel: Boolean }
+  const PillContent = styled('div', PillContentProps)`
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    ${(props) =>
+      props.truncateLabel &&
+      `
+      flex: 1 1 0;
+      min-width: 0;
+    `}
 
     .dotContainer {
-      display: ${(props) => (props.isActive ? 'flex' : 'none')};
+      display: none;
     }
 
-    &:hover {
-      .dotContainer {
-        display: flex;
-      }
+    &:hover .dotContainer,
+    .dotContainer.visible {
+      display: flex;
     }
   `
 
+  const MarkerDotPillProps = {
+    color: String,
+  }
+  const MarkerDotPill = styled('div', MarkerDotPillProps)`
+    width: 9px;
+    height: 9px;
+    border-radius: 100%;
+    background-color: ${(props) => props.color};
+  `
+
   const DotWrapper = styled.div`
     display: flex;
     gap: 2px;
@@ -161,13 +194,16 @@
     width: 4px;
     height: 4px;
     border-radius: 100%;
-    background-color: ${(props) => props.theme.colors.white};
+    background-color: ${(props) =>
+      props.theme.semanticColors?.grey?.[600] || props.theme.colors.grey6};
   `
 
   const EditContainer = styled.div`
     position: absolute;
     z-index: 99;
-    top: 22px;
+    top: 100%;
+    left: 0;
+    margin-top: 4px;
     display: grid;
     background-color: ${(props) => props.theme.colors.white};
     border: 1px solid ${(props) => props.theme.colors.grey4};
@@ -194,11 +230,37 @@
     line-height: 0;
   `
 
-  const Date = styled.div`
-    padding: 2px 5px;
-    border: 1px solid ${(props) => props.theme.colors.grey4};
-    border-left: none;
-    border-radius: 0 4px 4px 0;
+  const PillDate = styled.div`
+    flex-shrink: 0;
+    border-top: 1px solid
+      ${(props) =>
+        props.theme.semanticColors?.teal?.[100] || props.theme.colors.grey4};
+    border-right: 1px solid
+      ${(props) =>
+        props.theme.semanticColors?.teal?.[100] || props.theme.colors.grey4};
+    border-bottom: 1px solid
+      ${(props) =>
+        props.theme.semanticColors?.teal?.[100] || props.theme.colors.grey4};
+    border-radius: 0 8px 8px 0;
+    padding: 2px 8px;
+    white-space: nowrap;
+    font-size: 12px;
+    font-weight: 400;
+    color: ${(props) =>
+      props.theme.semanticColors?.grey?.[800] || props.theme.colors.grey6};
+  `
+
+  const MarkerNameProps = { truncateLabel: Boolean }
+  const MarkerName = styled('div', MarkerNameProps)`
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    ${(props) =>
+      props.truncateLabel &&
+      `
+      flex: 1 1 0;
+      min-width: 0;
+    `}
   `
 
   export default {
@@ -208,7 +270,9 @@
     },
     components: {
       PageContainer,
-      MarkerContainer,
+      PillWrapper,
+      PillContent,
+      MarkerDotPill,
       DotWrapper,
       DotIcon,
       EditContainer,
@@ -222,7 +286,8 @@
       PageTitle,
       PageSubtitle,
       MainButton,
-      Date,
+      PillDate,
+      MarkerName,
     },
     props: {
       markerData: {
@@ -235,25 +300,31 @@
         required: false,
         default: null,
       },
-      isEditable: {
+      cursor: {
         required: false,
+        default: 'default',
+      },
+      /** Optional theme (e.g. from @/assets/theme) for sold/lost icon colors */
+      theme: {
+        type: Object,
+        default: null,
+      },
+      isEditable: {
+        type: Boolean,
         default: false,
       },
       isGroupSupport: {
-        required: false,
+        type: Boolean,
         default: false,
       },
       isLimitedPartner: {
-        required: false,
+        type: Boolean,
         default: false,
       },
-      cursor: {
-        required: false,
-        default: 'default',
-      },
-      hasBorderRadius: {
-        required: false,
-        default: true,
+      /** When true, label ellipsizes inside a width-constrained parent (e.g. dropdown rows). */
+      truncateLabel: {
+        type: Boolean,
+        default: false,
       },
     },
     data() {
@@ -270,16 +341,24 @@
           this.isEditable
         )
       },
-      iconName() {
+      /** sold => checkmark (green), lost => cross_filled (red) */
+      markerIcon() {
         if (this.markerData.choice === 'sold') {
-          return 'all_good'
-        } else if (this.markerData.choice === 'lost') {
-          return 'cross'
-        } else if (this.markerData.choice === 'transferred') {
-          return 'transfer'
-        } else {
-          return ''
+          return {
+            name: 'checkmark',
+            color: this.theme?.semanticColors?.green?.[400] || '#22c55e',
+          }
         }
+        if (this.markerData.choice === 'lost') {
+          return {
+            name: 'cross_filled',
+            color: this.theme?.semanticColors?.red?.[400] || '#ef4444',
+          }
+        }
+        return null
+      },
+      themeGrey3() {
+        return this.theme?.colors?.grey3 || '#b2b9c5'
       },
     },
     methods: {

package/src/components/tabsHeader/index.vue

@@ -169,6 +169,11 @@
         type: Boolean,
         default: true,
       },
+      /** When true, emit on-tab-change even when clicking the currently active tab */
+      emitWhenActiveTabClicked: {
+        type: Boolean,
+        default: false,
+      },
     },
     emits: ['on-tab-change'],
     data() {
@@ -178,7 +183,10 @@
     },
     methods: {
       onTabClick({ id, isDisabled }) {
-        if (id === this.activeTab || isDisabled) {
+        if (isDisabled) {
+          return
+        }
+        if (id === this.activeTab && !this.emitWhenActiveTabClicked) {
           return
         }
         this.$emit('on-tab-change', id)

package/src/components/videoThumbnail/index.vue

@@ -83,7 +83,7 @@
     mounted() {
       document.addEventListener('click', this.clickOutside)
     },
-    beforeDestroy() {
+    beforeUnmount() {
       document.removeEventListener('click', this.clickOutside)
     },
     methods: {

package/src/helpers/cookieHelper.js

@@ -19,9 +19,13 @@ let consentBridgeAppType = null
 let parentCookieSyncOrigin = null
 
 function hasKnownParentCookieSyncOrigin() {
-  const hasKnownOrigin = typeof parentCookieSyncOrigin === 'string' && parentCookieSyncOrigin.trim() !== ''
+  const hasKnownOrigin =
+    typeof parentCookieSyncOrigin === 'string' &&
+    parentCookieSyncOrigin.trim() !== ''
   if (!hasKnownOrigin) {
-    console.warn('[cookieHelper] Cannot sync cookie to parent: origin unknown. Skipping.')
+    console.warn(
+      '[cookieHelper] Cannot sync cookie to parent: origin unknown. Skipping.'
+    )
   }
   return hasKnownOrigin
 }
@@ -66,8 +70,12 @@ function getCookieAttributes() {
 export function setupParentCookieSyncListener(options = {}) {
   if (typeof window === 'undefined' || !isRunningInIframe()) return
 
-  consentBridgeAppType = typeof options?.consentBridgeAppType === 'string' ? options.consentBridgeAppType : null
-  const onCookieSync = typeof options?.onCookieSync === 'function' ? options.onCookieSync : null
+  consentBridgeAppType =
+    typeof options?.consentBridgeAppType === 'string'
+      ? options.consentBridgeAppType
+      : null
+  const onCookieSync =
+    typeof options?.onCookieSync === 'function' ? options.onCookieSync : null
   parentCookieSyncOrigin =
     typeof options?.parentOrigin === 'string' && options.parentOrigin.trim()
       ? options.parentOrigin.trim()
@@ -139,7 +147,12 @@ export function setCookieWithThirdPartyFallback(cookieName, cookieValue) {
   // If the cookie value is not immediately readable after
   // document.cookie = cookieStr (common in third-party iframes), we keep the intended
   // value in syncedCookieFallback and notify the parent to persist it.
-  if (!cookieName || typeof cookieName !== 'string' || typeof cookieValue !== 'string') return
+  if (
+    !cookieName ||
+    typeof cookieName !== 'string' ||
+    typeof cookieValue !== 'string'
+  )
+    return
 
   const expiryDate = new Date()
   expiryDate.setMonth(expiryDate.getMonth() + 6)
@@ -164,8 +177,8 @@ export function setCookieWithThirdPartyFallback(cookieName, cookieValue) {
           type: `eturnity_${consentBridgeAppType}_cookie_fallback`,
           payload: {
             cookieName,
-            cookieValue
-          }
+            cookieValue,
+          },
         },
         parentCookieSyncOrigin
       )
@@ -193,7 +206,7 @@ export function deleteCookieWithThirdPartyFallback(cookieName) {
     window.parent.postMessage(
       {
         type: `eturnity_${consentBridgeAppType}_cookie_delete`,
-        payload: { cookieName }
+        payload: { cookieName },
       },
       parentCookieSyncOrigin
     )
@@ -207,10 +220,7 @@ export function saveCookieConsent(categories) {
   const cookieData = {
     categories,
     timestamp: new Date().toISOString(),
-    consent_given: true
+    consent_given: true,
   }
-  setCookieWithThirdPartyFallback(
-    'cookieConsent',
-    JSON.stringify(cookieData)
-  )
+  setCookieWithThirdPartyFallback('cookieConsent', JSON.stringify(cookieData))
 }

package/src/helpers/dateTimeFormatting.js

@@ -11,7 +11,6 @@ export const toLocaleDate = ({
     month: 'numeric',
     day: 'numeric',
   }
-
   return new Intl.DateTimeFormat(localeLC, options).format(Date.parse(value))
 }