feat(@dpc-sdp/ripple-ui-core): event updates from dataLayer spec

dpc-sdp · Jul 23, 2023 · 0da1e86 · 0da1e86
1 parent 549bb35
commit 0da1e86
Show file tree

Hide file tree

Showing 19 changed files with 142 additions and 54 deletions.
diff --git a/packages/ripple-ui-core/src/components/data-table/RplDataTable.vue b/packages/ripple-ui-core/src/components/data-table/RplDataTable.vue
@@ -13,7 +13,7 @@ interface Props {
   columns: Array<string>
   headingType?: HeadingType
   items: Array<Array<string>>
-  offset: number
+  offset?: number
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -82,6 +82,7 @@ const mappedItems = computed(() => {
           :content="mappedItems.hidden?.[index]?.[0]"
           :vertical-header="headingType.vertical"
           :offset="offset"
+          :caption="caption"
           :index="index"
         ></RplDataTableRow>
         <tfoot v-if="footer">

diff --git a/packages/ripple-ui-core/src/components/data-table/RplDataTableRow.vue b/packages/ripple-ui-core/src/components/data-table/RplDataTableRow.vue
@@ -13,19 +13,21 @@ interface Props {
   items: Array<string>
   verticalHeader?: boolean
   offset: number
+  caption?: string
   index: number
 }
 
 const props = withDefaults(defineProps<Props>(), {
   content: '',
   items: () => [],
   verticalHeader: true,
+  caption: undefined,
   offset: 1
 })
 
 const emit = defineEmits<{
   (
-    e: 'toggleRow',
+    e: 'expandRow',
     payload: rplEventPayload & { action: 'open' | 'close' }
   ): void
 }>()
@@ -46,11 +48,12 @@ const toggleLabel = computed(() => (state.enabled ? 'Less info' : 'More info'))
 
 const handleClick = () => {
   emitRplEvent(
-    'toggleRow',
+    'expandRow',
     {
       action: !state.enabled ? 'open' : 'close',
       text: toggleLabel.value,
       label: props.items[0],
+      name: props.caption,
       index: props.index + 1
     },
     { global: true }

diff --git a/packages/ripple-ui-core/src/components/footer/RplFooter.vue b/packages/ripple-ui-core/src/components/footer/RplFooter.vue
@@ -152,6 +152,7 @@ const handleClick = (link) => {
             v-for="(navSection, i) in nav"
             :id="`rpl-footer-nav-${i}`"
             :key="i"
+            :index="i"
             :section="navSection"
           />
         </template>
@@ -173,6 +174,7 @@ const handleClick = (link) => {
               v-for="(navSection, i) in col"
               :id="`rpl-footer-nav-${colIndex}${i}`"
               :key="i"
+              :index="colIndex"
               :section="navSection"
               :is-expandable="isExpandable"
             />

diff --git a/packages/ripple-ui-core/src/components/footer/RplNavSection.vue b/packages/ripple-ui-core/src/components/footer/RplNavSection.vue
@@ -23,10 +23,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const emit = defineEmits<{
-  (
-    e: 'toggleNav',
-    payload: rplEventPayload & { action: 'open' | 'close' }
-  ): void
+  (e: 'expand', payload: rplEventPayload & { action: 'open' | 'close' }): void
   (e: 'navigate', payload: rplEventPayload & { action: 'click' }): void
 }>()
 
@@ -57,12 +54,12 @@ const handleToggle = () => {
   isExpanded.value = !isExpanded.value
 
   emitRplEvent(
-    'toggleNav',
+    'expand',
     {
       id: toggleProps.value.id,
       action: isExpanded.value ? 'open' : 'close',
       text: props.section.text,
-      index: props.index
+      index: props?.index + 1
     },
     { global: true }
   )
@@ -74,7 +71,7 @@ const handleClick = (event) => {
     {
       ...event,
       label: props.section.text,
-      index: props.index
+      index: props?.index + 1
     },
     { global: true }
   )

diff --git a/packages/ripple-ui-core/src/components/header/RplHeaderActions.vue b/packages/ripple-ui-core/src/components/header/RplHeaderActions.vue
@@ -20,22 +20,18 @@ withDefaults(defineProps<Props>(), {
 })
 
 const emit = defineEmits<{
-  (e: 'navigate', payload: rplEventPayload & { action: 'click' }): void
+  (e: 'itemClick', payload: rplEventPayload & { action: 'click' }): void
 }>()
 
 const { emitRplEvent } = useRippleEvent('rpl-header', emit)
 
-const handleClick = (item) => {
-  emitRplEvent(
-    'navigate',
-    {
-      action: 'click',
-      text: item.text,
-      value: item.url,
-      type: 'hero'
-    },
-    { global: true }
-  )
+const handleClick = (item, type: string) => {
+  emitRplEvent('itemClick', {
+    action: 'click',
+    text: item.text,
+    value: item.url,
+    elementType: type
+  })
 }
 </script>
 
@@ -46,7 +42,7 @@ const handleClick = (item) => {
       :url="primary.url"
       class="rpl-header-actions__primary"
       el="a"
-      @click="() => handleClick(primary)"
+      @click="() => handleClick(primary, 'button')"
     >
       {{ primary.text }}
     </RplButton>
@@ -61,7 +57,7 @@ const handleClick = (item) => {
         v-if="secondary"
         :url="secondary.url"
         class="rpl-header-actions__secondary-link rpl-header__icon-link"
-        @click="() => handleClick(secondary)"
+        @click="() => handleClick(secondary, 'link')"
       >
         <span>{{ secondary.text }}</span
         ><RplIcon name="icon-arrow-right" size="xs" />

diff --git a/packages/ripple-ui-core/src/components/header/RplHeaderLinks.vue b/packages/ripple-ui-core/src/components/header/RplHeaderLinks.vue
@@ -34,14 +34,14 @@ const handleClick = (item) => {
     action: 'click',
     value: item.url,
     text: item.text,
-    label: props?.title
+    elementType: props.type
   })
 }
 
 const handleListClick = (event) => {
   emitRplEvent('itemClick', {
     ...event,
-    label: props?.title
+    elementType: props.type
   })
 }
 </script>

diff --git a/packages/ripple-ui-core/src/components/header/RplHeroHeader.vue b/packages/ripple-ui-core/src/components/header/RplHeroHeader.vue
@@ -85,6 +85,7 @@ const handleClick = (event) => {
     'navigate',
     {
       ...event,
+      label: props?.title,
       type: 'hero'
     },
     { global: true }
@@ -124,7 +125,11 @@ const handleClick = (event) => {
       <slot></slot>
     </p>
     <template v-if="(primaryAction || secondaryAction) && !background" #lower>
-      <RplHeaderActions :primary="primaryAction" :secondary="secondaryAction" />
+      <RplHeaderActions
+        :primary="primaryAction"
+        :secondary="secondaryAction"
+        @item-click="handleClick"
+      />
     </template>
     <template v-if="links && !background" #aside>
       <RplHeaderLinks

diff --git a/packages/ripple-ui-core/src/components/header/RplIntroHeader.vue b/packages/ripple-ui-core/src/components/header/RplIntroHeader.vue
@@ -16,7 +16,7 @@ interface Props {
   iconName?: (typeof RplIconNames)[number]
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   content: undefined,
   links: undefined,
   iconName: undefined
@@ -33,6 +33,7 @@ const handleClick = (event) => {
     'navigate',
     {
       ...event,
+      label: props?.title,
       type: 'intro'
     },
     { global: true }

diff --git a/packages/ripple-ui-core/src/components/media-embed/RplMediaEmbed.vue b/packages/ripple-ui-core/src/components/media-embed/RplMediaEmbed.vue
@@ -139,7 +139,8 @@ const toggleFullscreen = (event) => {
     {
       action: isFullScreenOpen.value ? 'enter' : 'exit',
       text: event?.label || fullscreenContentLabel.value,
-      label: props.title
+      label: props.title,
+      type: props.type
     },
     { global: true }
   )
@@ -153,7 +154,8 @@ const toggleData = () => {
     {
       action: isDataContentOpen.value ? 'open' : 'close',
       text: dataContentLabel.value,
-      label: props.title
+      label: props.title,
+      type: props.type
     },
     { global: true }
   )
@@ -165,7 +167,8 @@ const handleTranscript = () => {
     {
       action: 'click',
       text: transcriptContentLabel.value,
-      label: props.title
+      label: props.title,
+      type: props.type
     },
     { global: true }
   )
@@ -178,7 +181,8 @@ const handleDownload = () => {
       action: 'download',
       text: downloadContentLabel.value,
       label: props.title,
-      value: props?.downloadUrl
+      value: props?.downloadUrl,
+      type: props.type
     },
     { global: true }
   )

diff --git a/packages/ripple-ui-core/src/components/primary-nav/RplPrimaryNav.vue b/packages/ripple-ui-core/src/components/primary-nav/RplPrimaryNav.vue
@@ -44,7 +44,6 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<{
   (e: 'toggleMenu', payload: rplEventPayload & { action: 'open' | 'close' })
-  (e: 'toggleNavItem', payload: rplEventPayload & { action: 'open' | 'close' })
   (e: 'toggleSearch', payload: rplEventPayload & { action: 'open' | 'close' })
 }>()
 
@@ -139,16 +138,6 @@ const toggleNavItem = (
   } else if (level == 2) {
     activeNavItems.value.level3 = undefined
   }
-
-  emitRplEvent(
-    'toggleNavItem',
-    {
-      text: item.text,
-      value: `level-${level}`,
-      action: activeNavItems.value['level' + level] ? 'open' : 'close'
-    },
-    { global: true }
-  )
 }
 
 const toggleMobileMenu = () => {

diff --git a/.../ripple-ui-core/src/components/primary-nav/components/mega-menu/RplPrimaryNavMegaMenu.vue b/.../ripple-ui-core/src/components/primary-nav/components/mega-menu/RplPrimaryNavMegaMenu.vue
@@ -8,6 +8,7 @@ import {
   IRplPrimaryNavActiveItems,
   RplPrimaryNavToggleItemOptions
 } from '../../constants'
+import { rplEventPayload, useRippleEvent } from '@dpc-sdp/ripple-ui-core'
 
 interface Props {
   items: IRplPrimaryNavItem[]
@@ -18,6 +19,12 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {})
 
+const emit = defineEmits<{
+  (e: 'clickBackButton', payload: rplEventPayload & { action: 'click' }): void
+}>()
+
+const { emitRplEvent } = useRippleEvent('rpl-primary-nav', emit)
+
 const slots = useSlots()
 
 const currentLevel = computed(() => {
@@ -41,6 +48,16 @@ const hasUserActions = computed(() => {
 })
 
 const backButtonHandler = () => {
+  emitRplEvent(
+    'clickBackButton',
+    {
+      action: 'click',
+      text: props.activeNavItems['level' + (currentLevel.value - 2)]?.text,
+      index: currentLevel.value - 1
+    },
+    { global: true }
+  )
+
   // Go back to level 3
   if (currentLevel.value == 4 && props.activeNavItems.level3) {
     props.toggleItem(3, props.activeNavItems.level3)

diff --git a/...e-ui-core/src/components/primary-nav/components/mega-menu/RplPrimaryNavMegaMenuAction.vue b/...e-ui-core/src/components/primary-nav/components/mega-menu/RplPrimaryNavMegaMenuAction.vue
@@ -31,17 +31,21 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<{
   (e: 'navigate', payload: rplEventPayload & { action: 'click' }): void
+  (
+    e: 'toggleMenuItem',
+    payload: rplEventPayload & { action: 'open' | 'close' }
+  ): void
 }>()
 
+const { emitRplEvent } = useRippleEvent('rpl-primary-nav', emit)
+
 const action = ref(null)
 
 const { setFocus, navCollapsed } = usePrimaryNavFocus(
   action,
   `list:${props.level}:${props.item.id}`
 )
 
-const { emitRplEvent } = useRippleEvent('rpl-primary-nav', emit)
-
 const clickHandler = (item: IRplPrimaryNavItem) => {
   if (props.type == 'toggle' && props.level != 4) {
     props.toggleItem(props.level, item)
@@ -54,7 +58,18 @@ const clickHandler = (item: IRplPrimaryNavItem) => {
         action: 'click',
         value: props.item.url,
         text: props.item.text,
-        type: 'nav'
+        index: props.level
+      },
+      { global: true }
+    )
+  } else {
+    emitRplEvent(
+      'toggleMenuItem',
+      {
+        action: isActive.value ? 'open' : 'close',
+        value: props.item.url,
+        text: props.item.text,
+        index: props.level
       },
       { global: true }
     )