From 6aec24bd2efa8547947623adcb364314957c3fb1 Mon Sep 17 00:00:00 2001
From: David Featherston <david.featherstone@dpc.vic.gov.au>
Date: Sun, 30 Jul 2023 13:41:17 +1000
Subject: [PATCH] feat(@dpc-sdp/ripple-ui-core): event updates, add withOptions
 helper

---
 .../campaign-banner/RplPrimaryCampaign.vue    |  6 +++++-
 .../campaign-banner/RplSecondaryCampaign.vue  |  6 +++++-
 .../src/components/chip/RplChip.vue           |  7 +++++--
 .../components/header/RplHeaderActions.vue    |  1 +
 .../src/components/header/RplHeaderLinks.vue  |  2 ++
 .../src/components/header/RplHeroHeader.vue   |  9 ++++++++-
 .../src/components/list/RplList.vue           |  5 +++--
 .../media-gallery/RplMediaGallery.vue         |  6 +++---
 .../media-gallery/RplMediaGalleryContent.vue  | 14 +++++---------
 .../components/primary-nav/RplPrimaryNav.vue  |  3 ++-
 .../mega-menu/RplPrimaryNavMegaMenu.vue       | 11 +++++++----
 .../components/nav-bar/RplPrimaryNavBar.vue   |  7 +++++--
 .../related-links/RplRelatedLinks.vue         |  2 +-
 .../social-share/RplSocialShareLink.vue       |  3 +--
 .../vertical-nav/RplVerticalNav.vue           | 16 +++++++++++++++-
 .../vertical-nav/RplVerticalNavChildList.vue  | 19 +++++++++++++++++++
 .../vertical-nav/RplVerticalNavLink.vue       | 16 ++++++----------
 .../src/composables/useRippleEvent.ts         |  9 ++++++++-
 18 files changed, 101 insertions(+), 41 deletions(-)

diff --git a/packages/ripple-ui-core/src/components/campaign-banner/RplPrimaryCampaign.vue b/packages/ripple-ui-core/src/components/campaign-banner/RplPrimaryCampaign.vue
index b6d2564555..20f53e4694 100644
--- a/packages/ripple-ui-core/src/components/campaign-banner/RplPrimaryCampaign.vue
+++ b/packages/ripple-ui-core/src/components/campaign-banner/RplPrimaryCampaign.vue
@@ -24,7 +24,10 @@ const emit = defineEmits<{
   (e: 'navigate', payload: rplEventPayload & { action: 'click' }): void
 }>()
 
-const { emitRplEvent } = useRippleEvent('rpl-campaign-banner', emit)
+const { emitRplEvent, withOptions } = useRippleEvent(
+  'rpl-campaign-banner',
+  emit
+)
 
 const handleClick = () => {
   emitRplEvent(
@@ -34,6 +37,7 @@ const handleClick = () => {
       label: props.title,
       text: props.link?.text,
       value: props.link?.url,
+      options: withOptions(props, ['image', 'link']),
       type: 'primary'
     },
     { global: true }
diff --git a/packages/ripple-ui-core/src/components/campaign-banner/RplSecondaryCampaign.vue b/packages/ripple-ui-core/src/components/campaign-banner/RplSecondaryCampaign.vue
index 6793912412..d6e265e94e 100644
--- a/packages/ripple-ui-core/src/components/campaign-banner/RplSecondaryCampaign.vue
+++ b/packages/ripple-ui-core/src/components/campaign-banner/RplSecondaryCampaign.vue
@@ -24,7 +24,10 @@ const emit = defineEmits<{
   (e: 'navigate', payload: rplEventPayload & { action: 'click' }): void
 }>()
 
-const { emitRplEvent } = useRippleEvent('rpl-campaign-banner', emit)
+const { emitRplEvent, withOptions } = useRippleEvent(
+  'rpl-campaign-banner',
+  emit
+)
 
 const handleClick = () => {
   emitRplEvent(
@@ -34,6 +37,7 @@ const handleClick = () => {
       label: props.title,
       text: props.link?.text,
       value: props.link?.url,
+      options: withOptions(props, ['image', 'link']),
       type: 'secondary'
     },
     { global: true }
diff --git a/packages/ripple-ui-core/src/components/chip/RplChip.vue b/packages/ripple-ui-core/src/components/chip/RplChip.vue
index 068defdc2f..a41e775466 100644
--- a/packages/ripple-ui-core/src/components/chip/RplChip.vue
+++ b/packages/ripple-ui-core/src/components/chip/RplChip.vue
@@ -10,12 +10,14 @@ interface Props {
   variant?: (typeof RplChipVariants)[number]
   label?: string
   url?: string
+  index?: number
 }
 
 const props = withDefaults(defineProps<Props>(), {
   variant: 'default',
   label: '',
-  url: '#'
+  url: '#',
+  index: 0
 })
 
 const emit = defineEmits<{
@@ -30,7 +32,8 @@ const onClick = () => {
     {
       action: 'click',
       value: props.url,
-      text: props.label
+      text: props.label,
+      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
index ba4cf0c9b5..0f7a658913 100644
--- a/packages/ripple-ui-core/src/components/header/RplHeaderActions.vue
+++ b/packages/ripple-ui-core/src/components/header/RplHeaderActions.vue
@@ -30,6 +30,7 @@ const handleClick = (item, type: string) => {
     action: 'click',
     text: item.text,
     value: item.url,
+    section: 'actions',
     elementType: type
   })
 }
diff --git a/packages/ripple-ui-core/src/components/header/RplHeaderLinks.vue b/packages/ripple-ui-core/src/components/header/RplHeaderLinks.vue
index bfce3b387a..edeb9d14a1 100644
--- a/packages/ripple-ui-core/src/components/header/RplHeaderLinks.vue
+++ b/packages/ripple-ui-core/src/components/header/RplHeaderLinks.vue
@@ -34,6 +34,7 @@ const handleClick = (item) => {
     action: 'click',
     value: item.url,
     text: item.text,
+    section: 'links',
     elementType: props.type
   })
 }
@@ -41,6 +42,7 @@ const handleClick = (item) => {
 const handleListClick = (event) => {
   emitRplEvent('itemClick', {
     ...event,
+    section: 'links',
     elementType: props.type
   })
 }
diff --git a/packages/ripple-ui-core/src/components/header/RplHeroHeader.vue b/packages/ripple-ui-core/src/components/header/RplHeroHeader.vue
index c299b120fe..5ac60cd36f 100644
--- a/packages/ripple-ui-core/src/components/header/RplHeroHeader.vue
+++ b/packages/ripple-ui-core/src/components/header/RplHeroHeader.vue
@@ -78,7 +78,7 @@ const contentClasses = computed(() => ({
 
 const slots = useSlots()
 const defaultSlotIsEmpty = useEmptySlotCheck(slots.default)
-const { emitRplEvent } = useRippleEvent('rpl-header', emit)
+const { emitRplEvent, withOptions } = useRippleEvent('rpl-header', emit)
 
 const handleClick = (event) => {
   emitRplEvent(
@@ -86,6 +86,13 @@ const handleClick = (event) => {
     {
       ...event,
       label: props?.title,
+      theme: props?.theme,
+      options: withOptions(props, [
+        'background',
+        'primaryAction',
+        'secondaryAction',
+        'links'
+      ]),
       type: 'hero'
     },
     { global: true }
diff --git a/packages/ripple-ui-core/src/components/list/RplList.vue b/packages/ripple-ui-core/src/components/list/RplList.vue
index de434f24d0..c1de839ad9 100644
--- a/packages/ripple-ui-core/src/components/list/RplList.vue
+++ b/packages/ripple-ui-core/src/components/list/RplList.vue
@@ -42,11 +42,12 @@ const shouldRenderChildren = computed(() => {
   return true
 })
 
-const handleClick = (item) => {
+const handleClick = (item: IRplListItemArray, index: number) => {
   emitRplEvent('itemClick', {
     action: 'click',
     value: item.url,
     text: item.text,
+    index: index + 1,
     type: item?.type
   })
 }
@@ -68,7 +69,7 @@ const handleClick = (item) => {
         v-if="item.url"
         :url="item.url"
         class="rpl-list__link"
-        @click="() => handleClick(item)"
+        @click="() => handleClick(item, index)"
       >
         <RplListContent
           :icon-name="item?.icon"
diff --git a/packages/ripple-ui-core/src/components/media-gallery/RplMediaGallery.vue b/packages/ripple-ui-core/src/components/media-gallery/RplMediaGallery.vue
index 4e7c5673c5..de8b2e7cc1 100644
--- a/packages/ripple-ui-core/src/components/media-gallery/RplMediaGallery.vue
+++ b/packages/ripple-ui-core/src/components/media-gallery/RplMediaGallery.vue
@@ -75,7 +75,7 @@ const handleChange = ({ type, action, text, value }) => {
   )
 }
 
-const toggleModal = (event) => {
+const toggleModal = ({ text }) => {
   showModal.value = !showModal.value
 
   if (showModal.value) {
@@ -87,8 +87,8 @@ const toggleModal = (event) => {
     'viewFullscreen',
     {
       action: showModal.value ? 'enter' : 'exit',
-      text: event?.text,
-      label: event?.name || props.items[activeImageSlide.value].title,
+      text,
+      label: props.items[activeModalImageSlide.value]?.title,
       index: activeImageSlide.value + 1
     },
     { global: true }
diff --git a/packages/ripple-ui-core/src/components/media-gallery/RplMediaGalleryContent.vue b/packages/ripple-ui-core/src/components/media-gallery/RplMediaGalleryContent.vue
index ce9d5d4ffd..0bd59b307d 100644
--- a/packages/ripple-ui-core/src/components/media-gallery/RplMediaGalleryContent.vue
+++ b/packages/ripple-ui-core/src/components/media-gallery/RplMediaGalleryContent.vue
@@ -31,15 +31,11 @@ const { emitRplEvent } = useRippleEvent('rpl-media-gallery', emit)
 const fullScreenLabel = computed(() => `View '${props.title}' fullscreen`)
 
 const onFullScreen = () => {
-  emitRplEvent(
-    'fullscreen',
-    {
-      action: 'click',
-      text: fullScreenLabel.value,
-      name: props.title
-    },
-    { global: true }
-  )
+  emitRplEvent('fullscreen', {
+    action: 'click',
+    text: fullScreenLabel.value,
+    name: props.title
+  })
 }
 </script>
 
diff --git a/packages/ripple-ui-core/src/components/primary-nav/RplPrimaryNav.vue b/packages/ripple-ui-core/src/components/primary-nav/RplPrimaryNav.vue
index ab54910a04..95466fac49 100644
--- a/packages/ripple-ui-core/src/components/primary-nav/RplPrimaryNav.vue
+++ b/packages/ripple-ui-core/src/components/primary-nav/RplPrimaryNav.vue
@@ -140,7 +140,7 @@ const toggleNavItem = (
   }
 }
 
-const toggleMobileMenu = () => {
+const toggleMobileMenu = (text) => {
   // Make search inactive
   isSearchActive.value = false
 
@@ -150,6 +150,7 @@ const toggleMobileMenu = () => {
   emitRplEvent(
     'toggleMenu',
     {
+      text,
       action: isMegaNavActive.value ? 'open' : 'close'
     },
     { global: true }
diff --git a/packages/ripple-ui-core/src/components/primary-nav/components/mega-menu/RplPrimaryNavMegaMenu.vue b/packages/ripple-ui-core/src/components/primary-nav/components/mega-menu/RplPrimaryNavMegaMenu.vue
index 165d6d9f61..5ff3b2a476 100644
--- a/packages/ripple-ui-core/src/components/primary-nav/components/mega-menu/RplPrimaryNavMegaMenu.vue
+++ b/packages/ripple-ui-core/src/components/primary-nav/components/mega-menu/RplPrimaryNavMegaMenu.vue
@@ -27,6 +27,8 @@ const { emitRplEvent } = useRippleEvent('rpl-primary-nav', emit)
 
 const slots = useSlots()
 
+const mainMenuBackLabel = 'Main menu'
+
 const currentLevel = computed(() => {
   if (!props.activeNavItems.level1) {
     return 1
@@ -47,12 +49,13 @@ const hasUserActions = computed(() => {
   return slots.userAction && slots?.userAction()[0].children?.length
 })
 
-const backButtonHandler = () => {
+const backButtonHandler = (label: string) => {
   emitRplEvent(
     'clickBackButton',
     {
       action: 'click',
-      text: props.activeNavItems['level' + (currentLevel.value - 2)]?.text,
+      text:
+        label || props.activeNavItems['level' + (currentLevel.value - 2)]?.text,
       index: currentLevel.value - 1
     },
     { global: true }
@@ -127,8 +130,8 @@ const backButtonHandler = () => {
           <div class="rpl-primary-nav__mega-menu-column">
             <!-- Back button - Only visible on mobile -->
             <RplPrimaryNavBackButton
-              label="Main menu"
-              @click="backButtonHandler()"
+              :label="mainMenuBackLabel"
+              @click="backButtonHandler(mainMenuBackLabel)"
             />
 
             <!-- Section title - Mobile - Level 2 -->
diff --git a/packages/ripple-ui-core/src/components/primary-nav/components/nav-bar/RplPrimaryNavBar.vue b/packages/ripple-ui-core/src/components/primary-nav/components/nav-bar/RplPrimaryNavBar.vue
index 819a39060a..2c29eb1dc2 100644
--- a/packages/ripple-ui-core/src/components/primary-nav/components/nav-bar/RplPrimaryNavBar.vue
+++ b/packages/ripple-ui-core/src/components/primary-nav/components/nav-bar/RplPrimaryNavBar.vue
@@ -37,6 +37,8 @@ const emit = defineEmits<{
 
 const { emitRplEvent } = useRippleEvent('rpl-primary-nav', emit)
 
+const mobileToggleLabel = 'Menu'
+
 const isItemActive = (item: IRplPrimaryNavItem) =>
   props.activeNavItems.level1?.id == item.id
 
@@ -119,9 +121,10 @@ const handleToggleItem = (level: number, item) => {
           href="/"
           :active="isMegaNavActive"
           focusKey="menu:toggle"
-          @click="toggleMobileMenu()"
+          @click="toggleMobileMenu(mobileToggleLabel)"
         >
-          <span>Menu</span>&NoBreak;<span
+          <span>{{ mobileToggleLabel }}</span
+          >&NoBreak;<span
             class="rpl-primary-nav__nav-bar-icon rpl-primary-nav__nav-bar-icon--large rpl-u-margin-l-2"
             ><RplIcon name="icon-chevron-down" size="xs"></RplIcon>
           </span>
diff --git a/packages/ripple-ui-core/src/components/related-links/RplRelatedLinks.vue b/packages/ripple-ui-core/src/components/related-links/RplRelatedLinks.vue
index 5c131b5842..35c269f74c 100644
--- a/packages/ripple-ui-core/src/components/related-links/RplRelatedLinks.vue
+++ b/packages/ripple-ui-core/src/components/related-links/RplRelatedLinks.vue
@@ -27,7 +27,7 @@ const handleClick = (event) => {
     'navigate',
     {
       ...event,
-      label: props.title
+      name: props.title
     },
     { global: true }
   )
diff --git a/packages/ripple-ui-core/src/components/social-share/RplSocialShareLink.vue b/packages/ripple-ui-core/src/components/social-share/RplSocialShareLink.vue
index c75d5a043e..2ed711602b 100644
--- a/packages/ripple-ui-core/src/components/social-share/RplSocialShareLink.vue
+++ b/packages/ripple-ui-core/src/components/social-share/RplSocialShareLink.vue
@@ -44,8 +44,7 @@ const handleClick = () => {
     {
       action: 'share',
       text: props.network,
-      label: props?.label,
-      value: props.url
+      label: props?.label
     },
     { global: true }
   )
diff --git a/packages/ripple-ui-core/src/components/vertical-nav/RplVerticalNav.vue b/packages/ripple-ui-core/src/components/vertical-nav/RplVerticalNav.vue
index d8fb54699b..2af5682fb9 100644
--- a/packages/ripple-ui-core/src/components/vertical-nav/RplVerticalNav.vue
+++ b/packages/ripple-ui-core/src/components/vertical-nav/RplVerticalNav.vue
@@ -23,6 +23,7 @@ const emit = defineEmits<{
     e: 'toggleMenuItem',
     payload: rplEventPayload & { action: 'open' | 'close' }
   ): void
+  (e: 'navigate', payload: rplEventPayload & { action: 'click' }): void
 }>()
 
 const { emitRplEvent } = useRippleEvent('rpl-vertical-nav', emit)
@@ -80,7 +81,18 @@ const handleToggle = (item: IRplVerticalNavItem) => {
       id: toggleID(item.id),
       action: isItemExpanded(item.id) ? 'open' : 'close',
       text: item.text,
-      label: props?.title
+      name: props?.title
+    },
+    { global: true }
+  )
+}
+
+const handleClick = (event) => {
+  emitRplEvent(
+    'navigate',
+    {
+      ...event,
+      name: props?.title
     },
     { global: true }
   )
@@ -122,6 +134,7 @@ const handleToggle = (item: IRplVerticalNavItem) => {
             :items="item.items"
             :level="2"
             :is-expanded="isItemExpanded(item.id)"
+            @item-click="handleClick"
           />
         </RplExpandable>
 
@@ -130,6 +143,7 @@ const handleToggle = (item: IRplVerticalNavItem) => {
           :text="item.text"
           :href="item.url"
           :active="item?.active && !item.items?.some((i) => i.active)"
+          @item-click="handleClick"
         />
       </li>
     </ul>
diff --git a/packages/ripple-ui-core/src/components/vertical-nav/RplVerticalNavChildList.vue b/packages/ripple-ui-core/src/components/vertical-nav/RplVerticalNavChildList.vue
index bf6ec1ab1a..9d9c8ec1b2 100644
--- a/packages/ripple-ui-core/src/components/vertical-nav/RplVerticalNavChildList.vue
+++ b/packages/ripple-ui-core/src/components/vertical-nav/RplVerticalNavChildList.vue
@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import { IRplVerticalNavItem } from './constants'
 import RplVerticalNavLink from './RplVerticalNavLink.vue'
+import {
+  useRippleEvent,
+  rplEventPayload
+} from '../../composables/useRippleEvent'
 
 interface Props {
   items: IRplVerticalNavItem[]
@@ -9,6 +13,19 @@ interface Props {
 }
 
 const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  (e: 'itemClick', payload: rplEventPayload & { action: 'click' }): void
+}>()
+
+const { emitRplEvent } = useRippleEvent('rpl-vertical-nav', emit)
+
+const handleClick = (event) => {
+  emitRplEvent('itemClick', {
+    index: props.level,
+    ...event
+  })
+}
 </script>
 
 <template>
@@ -30,6 +47,7 @@ const props = defineProps<Props>()
         :active="item?.active && !item.items?.some((i) => i.active)"
         :show-child-icon="props.level > 2"
         :tabindex="props.isExpanded ? '0' : '-1'"
+        @item-click="(event) => handleClick(event)"
       />
 
       <RplVerticalNavChildList
@@ -37,6 +55,7 @@ const props = defineProps<Props>()
         :items="item.items"
         :level="props.level + 1"
         :is-expanded="props.isExpanded"
+        @item-click="handleClick"
       />
     </li>
   </ul>
diff --git a/packages/ripple-ui-core/src/components/vertical-nav/RplVerticalNavLink.vue b/packages/ripple-ui-core/src/components/vertical-nav/RplVerticalNavLink.vue
index 9db68ac2f6..9967584106 100644
--- a/packages/ripple-ui-core/src/components/vertical-nav/RplVerticalNavLink.vue
+++ b/packages/ripple-ui-core/src/components/vertical-nav/RplVerticalNavLink.vue
@@ -17,21 +17,17 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const emit = defineEmits<{
-  (e: 'navigate', payload: rplEventPayload & { action: 'click' }): void
+  (e: 'itemClick', payload: rplEventPayload & { action: 'click' }): void
 }>()
 
 const { emitRplEvent } = useRippleEvent('rpl-vertical-nav', emit)
 
 const handleClick = () => {
-  emitRplEvent(
-    'navigate',
-    {
-      action: 'click',
-      text: props.text,
-      value: props.href
-    },
-    { global: true }
-  )
+  emitRplEvent('itemClick', {
+    action: 'click',
+    text: props.text,
+    value: props.href
+  })
 }
 </script>
 
diff --git a/packages/ripple-ui-core/src/composables/useRippleEvent.ts b/packages/ripple-ui-core/src/composables/useRippleEvent.ts
index 6dcb54a20e..1a43a1cb66 100644
--- a/packages/ripple-ui-core/src/composables/useRippleEvent.ts
+++ b/packages/ripple-ui-core/src/composables/useRippleEvent.ts
@@ -9,6 +9,9 @@ export type rplEventPayload = {
   value?: any
   index?: number
   type?: string
+  section?: string
+  theme?: string[]
+  options?: string[]
   elementType?: string
   contextId?: string
   contextName?: string
@@ -39,5 +42,9 @@ export function useRippleEvent(namespace: string, emit?: any) {
     }
   }
 
-  return { emitRplEvent }
+  const withOptions = (props: any, using: string[]) => {
+    return Object.keys(props).filter((key) => using.includes(key) && props[key])
+  }
+
+  return { emitRplEvent, withOptions }
 }