fix(carousel): apply same height function to heading used in dds-card-cta

packages/web-components/src/components/carousel/__stories__/carousel.stories.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2021
+ * Copyright IBM Corp. 2020, 2022
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -20,6 +20,7 @@ import styles from './carousel.stories.scss';
 import readme from './README.stories.mdx';
 
 import imgLg2x1 from '../../../../../storybook-images/assets/720/fpo--2x1--720x360--005.jpg';
+import imgLg4x3 from '../../../../../storybook-images/assets/720/fpo--4x3--720x540--004.jpg';
 
 const hrefDefault = 'https://www.ibm.com/standards/carbon';
 const headingDefault = 'Lorem ipsum dolor sit amet';
@@ -64,10 +65,9 @@ const CardWithLongHeading = ({
   </dds-card>
 `;
 
-const CardWithVideo = ({ copy = copyDefault, heading = headingDefault, href = hrefDefault } = {}) => html`
+const CardWithVideo = ({ copy = copyDefault, href = hrefDefault } = {}) => html`
   <dds-video-cta-container>
     <dds-card-cta cta-type="video" href="${href}">
-      <dds-card-heading>${heading}</dds-card-heading>
       ${copy}
       <dds-card-cta-footer href="${href}">
         ${ArrowRight20({ slot: 'icon' })}
@@ -116,6 +116,19 @@ export const CardsWithVideos = ({ parameters }) => {
   `;
 };
 
+export const CardsWithMedia = ({ parameters }) => {
+  const { cardSize } = parameters?.props?.Carousel ?? {};
+  const classes = classMap({
+    [cardSize]: cardSize,
+  });
+  return html`
+    <dds-carousel class="${classes}">
+      ${Card({ image: imgLg4x3 })} ${CardWithVideo({ href: '0_ibuqxqbe' })} ${Card({ image: imgLg4x3 })}
+      ${CardWithVideo({ href: '1_9h94wo6b' })} ${Card({ image: imgLg4x3 })} ${CardWithVideo({ href: '0_ibuqxqbe' })}
+    </dds-carousel>
+  `;
+};
+
 CardsWithImages.story = {
   name: 'Cards with images',
 };
@@ -130,6 +143,13 @@ CardsWithVideos.story = {
   },
 };
 
+CardsWithMedia.story = {
+  name: 'Cards with Media',
+  parameters: {
+    ...readme.parameters,
+  },
+};
+
 export default {
   title: 'Components/Carousel',
   decorators: [

packages/web-components/src/components/carousel/carousel.ts

@@ -199,6 +199,19 @@ class DDSCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) {
     }
   };
 
+  /**
+   * Handles card with video heading and applies the set same height function.
+   *
+   * @param event The event.
+   */
+  @HostListener(`document:eventVideoTitleUpdated`)
+  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
+  private _handleVideoTitleUpdate = async (event: FocusEvent) => {
+    if (event) {
+      this._setSameHeight();
+    }
+  };
+
   /**
    * Handles `click` event on the next button.
    */
@@ -255,7 +268,12 @@ class DDSCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) {
 
     this._childItems = (event.target as HTMLSlotElement)
       .assignedNodes()
-      .filter(elem => (elem as HTMLElement).matches?.((this.constructor as typeof DDSCarousel).selectorItem));
+      .filter(elem =>
+        (elem as HTMLElement).matches !== undefined
+          ? (elem as HTMLElement).matches((this.constructor as typeof DDSCarousel).selectorItem) ||
+            (elem as HTMLElement).matches((this.constructor as typeof DDSCarousel).selectorItemVideoCTAContainer)
+          : false
+      );
 
     // retrieve item heading, eyebrows, and footers to set same height
     if (this._childItems) {
@@ -272,6 +290,15 @@ class DDSCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) {
         this._childItemHeadings.push(
           (e as HTMLElement).querySelector((this.constructor as typeof DDSCarousel).selectorItemHeading)
         );
+
+        this._childItemHeadings.push(
+          (e as HTMLElement)
+            .querySelector((this.constructor as typeof DDSCarousel).selectorItemCardCTA)
+            ?.shadowRoot?.querySelector((this.constructor as typeof DDSCarousel).selectorItemHeading)
+        );
+
+        this._childItemHeadings = this._childItemHeadings.filter(heading => heading);
+
         this._childItemFooters.push(
           (e as HTMLElement).querySelector((this.constructor as typeof DDSCarousel).selectorItemFooter)
         );
@@ -487,13 +514,34 @@ class DDSCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) {
     return `--${ddsPrefix}--carousel--page-size`;
   }
 
+  /**
+   * The name of the custom event fired when the video title is updated
+   */
+  static get eventVideoTitleUpdated() {
+    return `${ddsPrefix}-card-cta-video-title-updated`;
+  }
+
   /**
    * The selector for the card component
    */
   static get selectorItem() {
     return `${ddsPrefix}-card`;
   }
 
+  /**
+   * The selector for the card cta
+   */
+  static get selectorItemCardCTA() {
+    return `${ddsPrefix}-card-cta`;
+  }
+
+  /**
+   * The selector for the video cta container
+   */
+  static get selectorItemVideoCTAContainer() {
+    return `${ddsPrefix}-video-cta-container`;
+  }
+
   /**
    * A selector that will return the card item's eyebrow
    */

packages/web-components/src/components/cta/card-cta.ts

@@ -47,6 +47,13 @@ class DDSCardCTA extends VideoCTAMixin(CTAMixin(DDSCard)) {
       return super._renderHeading();
     }
     const caption = formatVideoCaptionInEffect({ name: videoName });
+
+    this.dispatchEvent(
+      new CustomEvent((this.constructor as typeof DDSCardCTA).eventVideoTitleUpdated, {
+        bubbles: true,
+        composed: true,
+      })
+    );
     return html`
       <slot name="heading"></slot><dds-card-heading>${caption}</dds-card-heading>
     `;
@@ -172,6 +179,13 @@ class DDSCardCTA extends VideoCTAMixin(CTAMixin(DDSCard)) {
     return `${ddsPrefix}--card-cta`;
   }
 
+  /**
+   * The name of the custom event fired when the video title is updated
+   */
+  static get eventVideoTitleUpdated() {
+    return `${ddsPrefix}-card-cta-video-title-updated`;
+  }
+
   /**
    * A selector that will return the child footer.
    */