feat(@dpc-sdp/ripple-ui-core): event updates, add withOptions helper

dpc-sdp · Jul 30, 2023 · 6aec24b · 6aec24b
1 parent 9527e92
commit 6aec24b
Show file tree

Hide file tree

Showing 18 changed files with 101 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -34,13 +34,15 @@ const handleClick = (item) => {
     action: 'click',
     value: item.url,
     text: item.text,
+    section: 'links',
     elementType: props.type
   })
 }
 
 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
@@ -78,14 +78,21 @@ 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(
     'navigate',
     {
       ...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
@@ -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
@@ -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
@@ -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
@@ -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/.../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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,13 +47,15 @@ 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
         v-if="item.items"
         :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
@@ -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>