fix(cta): cause ctas to only respond to relevant video events (#12169)

* fix(cta): cause ctas to only respond to relevant video events * fix(cta): only add href where needed * fix(cta): avoid change to link-list-item-cta --------- Co-authored-by: Andy Blum <[email protected]>
carbon-design-system · Dec 18, 2024 · 2720e55 · 2720e55
1 parent 62fcdba
commit 2720e55
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/packages/web-components/src/components/cta/button-cta.ts b/packages/web-components/src/components/cta/button-cta.ts
@@ -78,6 +78,12 @@ class C4DButtonCTA extends VideoCTAMixin(CTAMixin(C4DButtonGroupItem)) {
   @property({ reflect: true, attribute: 'cta-type' })
   ctaType = CTA_TYPE.REGULAR;
 
+  /**
+   * Link `href`.
+   */
+  @property({ attribute: 'href' })
+  href?: string;
+
   /**
    * The formatter for the video caption, composed with the video name and the video duration.
    * Should be changed upon the locale the UI is rendered with.

diff --git a/packages/web-components/src/components/cta/cta.ts b/packages/web-components/src/components/cta/cta.ts
@@ -20,6 +20,7 @@ import {
   formatVideoDuration,
 } from '@carbon/ibmdotcom-utilities/es/utilities/formatVideoCaption/formatVideoCaption.js';
 import { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
+import { CTA_TYPE } from './defs';
 
 const { stablePrefix: c4dPrefix } = settings;
 
@@ -55,6 +56,9 @@ class C4DCTAHead extends HostListenerMixin(StableSelectorMixin(LitElement)) {
   @property({ reflect: true })
   thumbnail;
 
+  @property({ attribute: 'href' })
+  href?: string;
+
   updated() {
     // transpose attributes from parent cta handler to desired cta style
     Array.from(this.attributes).forEach((e) => {
@@ -79,13 +83,17 @@ class C4DCTAHead extends HostListenerMixin(StableSelectorMixin(LitElement)) {
   // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
   private _handleVideoTitleUpdate = async (event: FocusEvent) => {
     if (event) {
-      const { videoDuration, videoName } = event.detail as any;
+      const { videoDuration, videoName, videoId } = event.detail as any;
       const formattedVideoDuration = formatVideoDuration({
         duration: !videoDuration ? videoDuration : videoDuration * 1000,
       });
       this.videoDuration ? null : (this.videoDuration = formattedVideoDuration);
-
-      if (this.ctaStyle !== 'card' && this.ctaStyle !== 'feature') {
+      if (
+        this.ctaStyle !== 'card' &&
+        this.ctaStyle !== 'feature' &&
+        this.ctaType === CTA_TYPE.VIDEO &&
+        (this as any).href === videoId
+      ) {
         const heading = formatVideoCaption({
           duration: formattedVideoDuration,
           name: videoName,