From 081a0e666147ba3dbb8f4ed412076533682dc741 Mon Sep 17 00:00:00 2001 From: proeung Date: Fri, 18 Feb 2022 14:57:37 -0500 Subject: [PATCH 1/6] fix(carousel): apply same height to heading that's in card cta --- .../carousel/__stories__/carousel.stories.ts | 26 +++++++++++-- .../src/components/carousel/carousel.ts | 39 ++++++++++++++++++- 2 files changed, 61 insertions(+), 4 deletions(-) diff --git a/packages/web-components/src/components/carousel/__stories__/carousel.stories.ts b/packages/web-components/src/components/carousel/__stories__/carousel.stories.ts index b5943d52e0f..be406b98383 100644 --- a/packages/web-components/src/components/carousel/__stories__/carousel.stories.ts +++ b/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 = ({ `; -const CardWithVideo = ({ copy = copyDefault, heading = headingDefault, href = hrefDefault } = {}) => html` +const CardWithVideo = ({ copy = copyDefault, href = hrefDefault } = {}) => html` - ${heading} ${copy} ${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` + + ${Card({ image: imgLg4x3 })} ${CardWithVideo({ href: '0_ibuqxqbe' })} ${Card({ image: imgLg4x3 })} + ${CardWithVideo({ href: '1_9h94wo6b' })} ${Card({ image: imgLg4x3 })} ${CardWithVideo({ href: '0_ibuqxqbe' })} + + `; +}; + 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: [ diff --git a/packages/web-components/src/components/carousel/carousel.ts b/packages/web-components/src/components/carousel/carousel.ts index fa1e9affc3b..08641cb73c3 100644 --- a/packages/web-components/src/components/carousel/carousel.ts +++ b/packages/web-components/src/components/carousel/carousel.ts @@ -64,6 +64,11 @@ class DDSCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) { */ private _childItemHeadings: any[] = []; + /** + * Array to hold the card-heading elements within child items. + */ + private _childItemVideoHeadings: any[] = []; + /** * Array to hold the card-eyebrow elements within child items. */ @@ -255,7 +260,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 +282,15 @@ class DDSCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) { this._childItemHeadings.push( (e as HTMLElement).querySelector((this.constructor as typeof DDSCarousel).selectorItemHeading) ); + + this._childItemVideoHeadings.push( + (e as HTMLElement) + .querySelector((this.constructor as typeof DDSCarousel).selectorItemCardCTA) + ?.shadowRoot?.querySelector((this.constructor as typeof DDSCarousel).selectorItemHeading) + ); + + this._childItemVideoHeadings = this._childItemVideoHeadings.filter(e); + this._childItemFooters.push( (e as HTMLElement).querySelector((this.constructor as typeof DDSCarousel).selectorItemFooter) ); @@ -322,6 +341,10 @@ class DDSCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) { this._childItemHeadings.filter(item => item !== null), 'sm' ); + sameHeight( + this._childItemVideoHeadings.filter(item => item !== null), + 'sm' + ); sameHeight( this._childItemParagraphs.filter(item => item !== null), 'sm' @@ -494,6 +517,20 @@ class DDSCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) { 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 */ From f7e51e810457370b387fdb88fc9ab856194469d5 Mon Sep 17 00:00:00 2001 From: proeung Date: Fri, 18 Feb 2022 15:32:10 -0500 Subject: [PATCH 2/6] fix(carousel): returns only elements that exist --- packages/web-components/src/components/carousel/carousel.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web-components/src/components/carousel/carousel.ts b/packages/web-components/src/components/carousel/carousel.ts index 08641cb73c3..1f19e3af36e 100644 --- a/packages/web-components/src/components/carousel/carousel.ts +++ b/packages/web-components/src/components/carousel/carousel.ts @@ -289,7 +289,7 @@ class DDSCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) { ?.shadowRoot?.querySelector((this.constructor as typeof DDSCarousel).selectorItemHeading) ); - this._childItemVideoHeadings = this._childItemVideoHeadings.filter(e); + this._childItemVideoHeadings = this._childItemVideoHeadings.filter(heading => heading); this._childItemFooters.push( (e as HTMLElement).querySelector((this.constructor as typeof DDSCarousel).selectorItemFooter) From a233d365f907fc8e86ccda788cb796ab9090f6ac Mon Sep 17 00:00:00 2001 From: proeung Date: Wed, 23 Feb 2022 10:33:06 -0500 Subject: [PATCH 3/6] fix(carousel): add dispatch event to check video has been updated --- .../src/components/carousel/carousel.ts | 12 ++++++++++++ .../web-components/src/components/cta/card-cta.ts | 7 +++++++ 2 files changed, 19 insertions(+) diff --git a/packages/web-components/src/components/carousel/carousel.ts b/packages/web-components/src/components/carousel/carousel.ts index 1f19e3af36e..3e18d51bdf4 100644 --- a/packages/web-components/src/components/carousel/carousel.ts +++ b/packages/web-components/src/components/carousel/carousel.ts @@ -204,6 +204,18 @@ class DDSCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) { } }; + /** + * Handles card with video heading and applies the set same height function. + * + * @param event The event. + */ + @HostListener('document:video-updated') + private _handleVideoTitleUpdate = async ({ target }: FocusEvent) => { + if (target) { + this._setSameHeight(); + } + }; + /** * Handles `click` event on the next button. */ diff --git a/packages/web-components/src/components/cta/card-cta.ts b/packages/web-components/src/components/cta/card-cta.ts index dfe663854eb..dcb43847230 100644 --- a/packages/web-components/src/components/cta/card-cta.ts +++ b/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('video-updated', { + bubbles: true, + composed: true, + }) + ); return html` ${caption} `; From 3854ab59fa9e3ed791eedcfe7ebb2e2269bd5dd3 Mon Sep 17 00:00:00 2001 From: proeung Date: Wed, 23 Feb 2022 14:20:46 -0500 Subject: [PATCH 4/6] fix(carousel): add ts ignore and null check --- packages/web-components/src/components/carousel/carousel.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/web-components/src/components/carousel/carousel.ts b/packages/web-components/src/components/carousel/carousel.ts index 3e18d51bdf4..80e4a34e45e 100644 --- a/packages/web-components/src/components/carousel/carousel.ts +++ b/packages/web-components/src/components/carousel/carousel.ts @@ -210,8 +210,9 @@ class DDSCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) { * @param event The event. */ @HostListener('document:video-updated') - private _handleVideoTitleUpdate = async ({ target }: FocusEvent) => { - if (target) { + // @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(); } }; From a057f6519ec806c246f94e2dc6176f084c5afb0b Mon Sep 17 00:00:00 2001 From: proeung Date: Wed, 23 Feb 2022 17:42:16 -0500 Subject: [PATCH 5/6] fix(carousel): adjust event name based on feedback --- packages/web-components/src/components/carousel/carousel.ts | 2 +- packages/web-components/src/components/cta/card-cta.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/web-components/src/components/carousel/carousel.ts b/packages/web-components/src/components/carousel/carousel.ts index 80e4a34e45e..e26dc729c9f 100644 --- a/packages/web-components/src/components/carousel/carousel.ts +++ b/packages/web-components/src/components/carousel/carousel.ts @@ -209,7 +209,7 @@ class DDSCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) { * * @param event The event. */ - @HostListener('document:video-updated') + @HostListener(`document:${ddsPrefix}-card-cta-video-title-updated`) // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to private _handleVideoTitleUpdate = async (event: FocusEvent) => { if (event) { diff --git a/packages/web-components/src/components/cta/card-cta.ts b/packages/web-components/src/components/cta/card-cta.ts index dcb43847230..16348fb6a43 100644 --- a/packages/web-components/src/components/cta/card-cta.ts +++ b/packages/web-components/src/components/cta/card-cta.ts @@ -49,7 +49,7 @@ class DDSCardCTA extends VideoCTAMixin(CTAMixin(DDSCard)) { const caption = formatVideoCaptionInEffect({ name: videoName }); this.dispatchEvent( - new CustomEvent('video-updated', { + new CustomEvent(`${ddsPrefix}-card-cta-video-title-updated`, { bubbles: true, composed: true, }) From bb7e3a760e8437d6dc5b99cdadcb729ae35c8dfc Mon Sep 17 00:00:00 2001 From: IgnacioBecerra Date: Thu, 24 Feb 2022 13:42:39 -0800 Subject: [PATCH 6/6] fix(carousel): ensure card and video cta height are calculated --- .../src/components/carousel/carousel.ts | 22 +++++++++---------- .../src/components/cta/card-cta.ts | 9 +++++++- 2 files changed, 18 insertions(+), 13 deletions(-) diff --git a/packages/web-components/src/components/carousel/carousel.ts b/packages/web-components/src/components/carousel/carousel.ts index e26dc729c9f..546659a7b86 100644 --- a/packages/web-components/src/components/carousel/carousel.ts +++ b/packages/web-components/src/components/carousel/carousel.ts @@ -64,11 +64,6 @@ class DDSCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) { */ private _childItemHeadings: any[] = []; - /** - * Array to hold the card-heading elements within child items. - */ - private _childItemVideoHeadings: any[] = []; - /** * Array to hold the card-eyebrow elements within child items. */ @@ -209,7 +204,7 @@ class DDSCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) { * * @param event The event. */ - @HostListener(`document:${ddsPrefix}-card-cta-video-title-updated`) + @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) { @@ -296,13 +291,13 @@ class DDSCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) { (e as HTMLElement).querySelector((this.constructor as typeof DDSCarousel).selectorItemHeading) ); - this._childItemVideoHeadings.push( + this._childItemHeadings.push( (e as HTMLElement) .querySelector((this.constructor as typeof DDSCarousel).selectorItemCardCTA) ?.shadowRoot?.querySelector((this.constructor as typeof DDSCarousel).selectorItemHeading) ); - this._childItemVideoHeadings = this._childItemVideoHeadings.filter(heading => heading); + this._childItemHeadings = this._childItemHeadings.filter(heading => heading); this._childItemFooters.push( (e as HTMLElement).querySelector((this.constructor as typeof DDSCarousel).selectorItemFooter) @@ -354,10 +349,6 @@ class DDSCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) { this._childItemHeadings.filter(item => item !== null), 'sm' ); - sameHeight( - this._childItemVideoHeadings.filter(item => item !== null), - 'sm' - ); sameHeight( this._childItemParagraphs.filter(item => item !== null), 'sm' @@ -523,6 +514,13 @@ 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 */ diff --git a/packages/web-components/src/components/cta/card-cta.ts b/packages/web-components/src/components/cta/card-cta.ts index 16348fb6a43..f298132fc92 100644 --- a/packages/web-components/src/components/cta/card-cta.ts +++ b/packages/web-components/src/components/cta/card-cta.ts @@ -49,7 +49,7 @@ class DDSCardCTA extends VideoCTAMixin(CTAMixin(DDSCard)) { const caption = formatVideoCaptionInEffect({ name: videoName }); this.dispatchEvent( - new CustomEvent(`${ddsPrefix}-card-cta-video-title-updated`, { + new CustomEvent((this.constructor as typeof DDSCardCTA).eventVideoTitleUpdated, { bubbles: true, composed: true, }) @@ -179,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. */