feat(@dpc-sdp/ripple-ui-core): adding component events

dpc-sdp · Jul 5, 2023 · b0bb73c · b0bb73c
1 parent 35557b8
commit b0bb73c
Show file tree

Hide file tree

Showing 48 changed files with 1,162 additions and 178 deletions.
diff --git a/packages/ripple-ui-core/src/components/accordion/RplAccordion.vue b/packages/ripple-ui-core/src/components/accordion/RplAccordion.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-
 import RplIcon from '../icon/RplIcon.vue'
 import RplContent from '../content/RplContent.vue'
 import RplExpandable from '../expandable/RplExpandable.vue'
@@ -21,13 +20,11 @@ interface Props {
   id: string
   items: RplAccordionItem[]
   numbered?: boolean
-  title?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   items: () => [],
-  numbered: false,
-  title: undefined
+  numbered: false
 })
 
 const emit = defineEmits<{
@@ -59,16 +56,15 @@ const { isItemExpanded, isAllExpanded, toggleItem } = useExpandableState(
   props.items.length
 )
 
-const toggleID = (itemId) => `accordion-${props.id}-${itemId}-toggle`
+const itemID = (itemId) => `accordion-${props.id}-${itemId}`
 
 const toggleAll = () => {
   emitRplEvent(
     'toggleAll',
     {
-      id: props.id,
+      id: `accordion-${props.id}`,
       action: isAllExpanded() ? 'close' : 'open',
-      label: toggleAllLabel.value,
-      name: props.title
+      text: toggleAllLabel.value
     },
     { global: true }
   )
@@ -98,10 +94,9 @@ const toggleSingle = (item: RplAccordionItem) => {
   emitRplEvent(
     'toggleItem',
     {
-      id: toggleID(item.id),
+      id: itemID(item.id),
       action: isItemExpanded(item.id) ? 'close' : 'open',
-      label: item.title,
-      name: props.title
+      text: item.title
     },
     { global: true }
   )
@@ -121,7 +116,7 @@ const toggleAllLabel = computed(() => {
 </script>
 
 <template>
-  <div :id="id" class="rpl-accordion">
+  <div :id="`accordion-${id}`" class="rpl-accordion">
     <!-- Toggle all -->
     <div class="rpl-accordion__toggle-all-wrapper rpl-u-screen-only">
       <button
@@ -137,6 +132,7 @@ const toggleAllLabel = computed(() => {
     <component :is="numbered ? 'ol' : 'ul'" class="rpl-accordion__items">
       <li
         v-for="(item, index) in items"
+        :id="itemID(item.id)"
         :key="item.id"
         :class="{
           'rpl-accordion__item': true,
@@ -145,10 +141,10 @@ const toggleAllLabel = computed(() => {
       >
         <!-- Item toggle -->
         <button
-          :id="toggleID(item.id)"
+          :id="`${itemID(item.id)}-toggle`"
           class="rpl-accordion__item-toggle rpl-u-focusable-block"
           type="button"
-          :aria-controls="`accordion-${id}-${item.id}-content`"
+          :aria-controls="`${itemID(item.id)}-content`"
           :aria-expanded="isItemExpanded(item.id)"
           @click="toggleSingle(item)"
         >
@@ -178,8 +174,8 @@ const toggleAllLabel = computed(() => {
 
         <!-- Item content -->
         <RplExpandable
-          :id="`accordion-${id}-${item.id}-content`"
-          :aria-labelledby="`accordion-${id}-${item.id}-toggle`"
+          :id="`${itemID(item.id)}-content`"
+          :aria-labelledby="`${itemID(item.id)}-toggle`"
           :aria-hidden="isItemExpanded(item.id) === false ? 'true' : null"
           :expanded="isItemExpanded(item.id)"
           class="rpl-accordion__item-content"

diff --git a/packages/ripple-ui-core/src/components/alert/RplAlert.vue b/packages/ripple-ui-core/src/components/alert/RplAlert.vue
@@ -46,8 +46,8 @@ const onClose = () => {
     {
       id: props.alertId,
       action: 'close',
-      name: props.message,
-      label: closeLabel
+      label: props.message,
+      text: closeLabel
     },
     { global: true }
   )

diff --git a/packages/ripple-ui-core/src/components/breadcrumbs/RplBreadcrumbs.vue b/packages/ripple-ui-core/src/components/breadcrumbs/RplBreadcrumbs.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
 import RplTextLink from '../text-link/RplTextLink.vue'
+import {
+  useRippleEvent,
+  rplEventPayload
+} from '../../composables/useRippleEvent'
 
 interface IRplBreadcrumbsItem {
   text: string
@@ -15,6 +19,25 @@ const props = withDefaults(defineProps<Props>(), {
   items: () => [],
   besideQuickExit: false
 })
+
+const emit = defineEmits<{
+  (e: 'navigate', payload: rplEventPayload & { action: 'click' }): void
+}>()
+
+const { emitRplEvent } = useRippleEvent('rpl-breadcrumbs', emit)
+
+const handleClick = (item, index) => {
+  emitRplEvent(
+    'navigate',
+    {
+      action: 'click',
+      text: item.text,
+      value: item.url,
+      index: index + 1
+    },
+    { global: true }
+  )
+}
 </script>
 
 <template>
@@ -40,6 +63,7 @@ const props = withDefaults(defineProps<Props>(), {
           :url="item.url"
           :theme="false"
           class="rpl-breadcrumbs__item-link"
+          @click="() => handleClick(item, index)"
           >{{ item.text }}</RplTextLink
         >
         <span v-else class="rpl-breadcrumbs__item--current">{{

diff --git a/packages/ripple-ui-core/src/components/button/RplButton.vue b/packages/ripple-ui-core/src/components/button/RplButton.vue
@@ -8,12 +8,9 @@ import {
 } from './constants'
 import { RplIconNames } from '../icon/constants'
 import RplIcon from '../icon/RplIcon.vue'
-import { rplEventBus } from '../../index'
 import type { IRplFeatureFlags } from '@dpc-sdp/ripple-tide-api/types'
 import RplSpinner from '../spinner/RplSpinner.vue'
 
-rplEventBus.register('rpl-button/click')
-const emit = defineEmits(['click'])
 const featureFlags: IRplFeatureFlags = inject('featureFlags', {
   buttonTheme: 'default'
 })
@@ -62,11 +59,6 @@ const classes = computed(() => {
   }
 })
 
-const onClick = (payload?: any) => {
-  rplEventBus.emit('rpl-button/click', payload)
-  emit('click', payload)
-}
-
 const link: Ref = ref(null)
 
 defineExpose({ link })
@@ -83,7 +75,6 @@ const isAnchor = computed(() => props.el === 'a')
     :class="classes"
     :disabled="disabled"
     :aria-busy="busy"
-    @click="onClick"
   >
     <span v-if="busy" class="rpl-button__spinner"> <RplSpinner /></span>
     <span class="rpl-button__label rpl-type-label rpl-type-weight-bold">

diff --git a/packages/ripple-ui-core/src/components/campaign-banner/RplPrimaryCampaign.vue b/packages/ripple-ui-core/src/components/campaign-banner/RplPrimaryCampaign.vue
@@ -4,17 +4,41 @@ import RplImage from '../image/RplImage.vue'
 import RplButton from '../button/RplButton.vue'
 import { RplLink } from '../../lib/constants'
 import { IRplImageType } from '../image/constants'
+import {
+  useRippleEvent,
+  rplEventPayload
+} from '../../composables/useRippleEvent'
 
 interface Props {
   title: string
   image?: IRplImageType
   link?: RplLink
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   image: undefined,
   link: undefined
 })
+
+const emit = defineEmits<{
+  (e: 'navigate', payload: rplEventPayload & { action: 'click' }): void
+}>()
+
+const { emitRplEvent } = useRippleEvent('rpl-campaign-banner', emit)
+
+const handleClick = () => {
+  emitRplEvent(
+    'navigate',
+    {
+      action: 'click',
+      label: props.title,
+      text: props.link?.text,
+      value: props.link?.url,
+      type: 'primary'
+    },
+    { global: true }
+  )
+}
 </script>
 
 <template>
@@ -35,9 +59,9 @@ withDefaults(defineProps<Props>(), {
     </template>
     <slot></slot>
     <div v-if="link" class="rpl-campaign-banner__action">
-      <RplButton el="a" :url="link.url" data-cy="cta">{{
-        link.text
-      }}</RplButton>
+      <RplButton el="a" :url="link.url" data-cy="cta" @click="handleClick">
+        {{ link.text }}
+      </RplButton>
     </div>
     <template v-if="$slots.meta" #meta>
       <slot name="meta"></slot>

diff --git a/packages/ripple-ui-core/src/components/campaign-banner/RplSecondaryCampaign.vue b/packages/ripple-ui-core/src/components/campaign-banner/RplSecondaryCampaign.vue
@@ -4,17 +4,41 @@ import RplImage from '../image/RplImage.vue'
 import RplButton from '../button/RplButton.vue'
 import { RplLink } from '../../lib/constants'
 import { IRplImageType } from '../image/constants'
+import {
+  useRippleEvent,
+  rplEventPayload
+} from '../../composables/useRippleEvent'
 
 interface Props {
   title: string
   image?: IRplImageType
   link?: RplLink
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   image: undefined,
   link: undefined
 })
+
+const emit = defineEmits<{
+  (e: 'navigate', payload: rplEventPayload & { action: 'click' }): void
+}>()
+
+const { emitRplEvent } = useRippleEvent('rpl-campaign-banner', emit)
+
+const handleClick = () => {
+  emitRplEvent(
+    'navigate',
+    {
+      action: 'click',
+      label: props.title,
+      text: props.link?.text,
+      value: props.link?.url,
+      type: 'secondary'
+    },
+    { global: true }
+  )
+}
 </script>
 
 <template>
@@ -35,9 +59,15 @@ withDefaults(defineProps<Props>(), {
     </template>
     <slot></slot>
     <div class="rpl-campaign-banner__action">
-      <RplButton v-if="link" el="a" :url="link.url" data-cy="cta">{{
-        link.text
-      }}</RplButton>
+      <RplButton
+        v-if="link"
+        el="a"
+        :url="link.url"
+        data-cy="cta"
+        @click="handleClick"
+      >
+        {{ link.text }}
+      </RplButton>
     </div>
   </RplCampaignBanner>
 </template>
diff --git a/packages/ripple-ui-core/src/components/card-carousel/RplCardCarousel.vue b/packages/ripple-ui-core/src/components/card-carousel/RplCardCarousel.vue
@@ -5,6 +5,10 @@ import RplSlider from '../slider/RplSlider.vue'
 import { IRplCardCarouselItem } from './constants'
 import { RplSlidesPerView } from '../slider/constants'
 import { formatDate, formatDateRange } from '../../lib/helpers'
+import {
+  useRippleEvent,
+  rplEventPayload
+} from '../../composables/useRippleEvent'
 
 interface Props {
   perView?: RplSlidesPerView
@@ -14,11 +18,28 @@ interface Props {
 withDefaults(defineProps<Props>(), {
   perView: 1
 })
+
+const emit = defineEmits<{
+  (e: 'paginate', payload: rplEventPayload): void
+}>()
+
+const { emitRplEvent } = useRippleEvent('rpl-card-carousel', emit)
+
+const handleChange = ({ action, value }) => {
+  emitRplEvent(
+    'paginate',
+    {
+      action,
+      index: value + 1
+    },
+    { global: true }
+  )
+}
 </script>
 
 <template>
   <div class="rpl-card-carousel">
-    <RplSlider :per-view="perView">
+    <RplSlider :per-view="perView" @change="handleChange">
       <template v-for="(card, i) in items" :key="i">
         <RplPromoCard
           v-if="card.type === 'promo'"

diff --git a/packages/ripple-ui-core/src/components/card/RplAvatarCard.vue b/packages/ripple-ui-core/src/components/card/RplAvatarCard.vue
@@ -2,11 +2,14 @@
 import { computed } from 'vue'
 import { RplCardElements, RplCardTitleClasses } from './constants'
 import { useAccessibleContainer } from '../../composables/useAccessibleContainer'
-
 import RplCard from './RplCard.vue'
 import RplTextLink from '../text-link/RplTextLink.vue'
 import RplImage from '../image/RplImage.vue'
 import { IRplImageType } from '../image/constants'
+import {
+  useRippleEvent,
+  rplEventPayload
+} from '../../composables/useRippleEvent'
 
 interface Props {
   el?: (typeof RplCardElements)[number]
@@ -20,9 +23,28 @@ const props = withDefaults(defineProps<Props>(), {
   url: undefined
 })
 
+const emit = defineEmits<{
+  (e: 'navigate', payload: rplEventPayload & { action: 'click' }): void
+}>()
+
+const { emitRplEvent } = useRippleEvent('rpl-card', emit)
+
 const titleClasses = computed(() => RplCardTitleClasses)
 
 const { container, trigger } = useAccessibleContainer()
+
+const handleClick = () => {
+  emitRplEvent(
+    'navigate',
+    {
+      action: 'click',
+      value: props?.url,
+      text: props.title,
+      type: 'avatar'
+    },
+    { global: true }
+  )
+}
 </script>
 
 <template>
@@ -45,7 +67,9 @@ const { container, trigger } = useAccessibleContainer()
     </template>
     <template #title>
       <h3 :class="titleClasses" data-cy="title">
-        <RplTextLink ref="trigger" :url="url">{{ title }}</RplTextLink>
+        <RplTextLink ref="trigger" :url="url" @click="handleClick">
+          {{ title }}
+        </RplTextLink>
       </h3>
     </template>
     <slot></slot>