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

[proeung]

Related Ticket(s)

#8247

Description

• This PR addresses the alignment issue seen when there's a mixture of <dds-card> and <dds-card-cta> within the <dds-carousel> component.

Changelog

New

• Add a new SB variant called Carousel > Cards with Media - https://ibmdotcom-webcomponents.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/8336/index.html?path=/story/components-carousel--cards-with-media

Removed

• Removed <dds-card-heading> from CardsWithVideos as the card heading should be coming from the Mediacenter/Kaltura because this is the content usage when displaying a card with a video button.

[ibmdotcom-bot]

Deploy preview created for package Web Components:
https://ibmdotcom-webcomponents.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/8336/index.html

Built with commit: 905be0f6482b3c9e6efad195f35b32f79e5402df

[ibmdotcom-bot]

Deploy preview created for package Web Components HTML Test Application:
https://ibmdotcom-web-components-html-test-upstream.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/8336/index.html

Built with commit: 905be0f6482b3c9e6efad195f35b32f79e5402df

[ibmdotcom-bot]

Deploy preview created for package Web Components (React wrapper):
https://ibmdotcom-web-components-react.s3-web.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/8336/index.html

Built with commit: 905be0f6482b3c9e6efad195f35b32f79e5402df

[ibmdotcom-bot]

Deploy preview created for package React:
https://ibmdotcom-react.s3.us-south.cloud-object-storage.appdomain.cloud/deploy-previews/8336/index.html

Built with commit: 905be0f6482b3c9e6efad195f35b32f79e5402df

[ibmdotcom-bot]

Deploy preview created for package NextJS Test Application:
https://ibmdotcom-nextjs-test-upstream.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/8336/index.html

Built with commit: 54c87cdc4de081a5b3dade2dfa187f8470ee7895

[ibmdotcom-bot]

Deploy preview created for package "Web Components (Codesandbox Examples)":
https://webcomponents-codesandbox.s3-web.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/8336/index.html

Built with commit: bb7e3a760e8437d6dc5b99cdadcb729ae35c8dfc

[ibmdotcom-bot]

Deploy preview created for package "React (Codesandbox Examples)":
https://react-codesandbox.s3-web.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/8336/index.html

Built with commit: bb7e3a760e8437d6dc5b99cdadcb729ae35c8dfc

[IgnacioBecerra]

@proeung Looking good upon resize, but at first render it looks a bit off:

This probably happens due to the max height being applied from the other regular cards before the tallest title (from the video API) comes through. Maybe we could add setTimeout or something that will trigger once the video titles come through that will retrigger the sameHeight function.

[kennylam]

LGTM thanks @proeung!