From 22ceeab718c1ffb64a1d79ee0b195ef0b6680f6e Mon Sep 17 00:00:00 2001 From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com> Date: Thu, 21 Dec 2023 11:36:12 +0530 Subject: [PATCH 1/3] fix(CTA): image duplication issue fix --- .../components/cta/__stories__/cta.stories.ts | 42 ++++++++++++++----- 1 file changed, 32 insertions(+), 10 deletions(-) diff --git a/packages/web-components/src/components/cta/__stories__/cta.stories.ts b/packages/web-components/src/components/cta/__stories__/cta.stories.ts index ccfdbacc7c8..0b78f3013a5 100644 --- a/packages/web-components/src/components/cta/__stories__/cta.stories.ts +++ b/packages/web-components/src/components/cta/__stories__/cta.stories.ts @@ -99,10 +99,28 @@ export const Default = (args) => { : ((childCta as HTMLElement).innerText = customVideoTitle); } } + if (ctaType !== 'video') { + const childCta = document.querySelector('c4d-cta')?.shadowRoot!.children[0]; + const headingComponent = + childCta?.shadowRoot?.querySelector('c4d-card-heading') || + childCta?.querySelector('c4d-card-heading'); + headingComponent && !duration + ? (duration = headingComponent!.textContent!.match(/\((.*)\)/)?.pop()) + : null; + if (headingComponent?.textContent) { + duration + ? (headingComponent!.textContent = `${heading} (${duration})`) + : (headingComponent!.textContent = heading); + } + } const childCta = document.querySelector('c4d-cta')?.shadowRoot!.children[0]; childCta?.setAttribute('href', href); - + const childCtaRoot = document.querySelector('c4d-cta')?.shadowRoot; + const ctaFeatured = childCtaRoot?.querySelector('c4d-feature-cta'); + const c4dImage = ctaFeatured?.querySelectorAll('c4d-image') || []; + const c4dHeading = ctaFeatured?.querySelectorAll('c4d-card-heading') || []; + console.log(c4dImage); return html` ${ctaStyle === 'button' ? html` @@ -153,18 +171,22 @@ export const Default = (args) => { : ''} ${ctaStyle === 'feature' ? html` - ${ctaType !== 'video' + ${(c4dHeading?.length < 1) ? html ` + ${ctaType !== 'video' ? html` ${heading} ` : ''} - ${ctaType !== CTA_TYPE.VIDEO || customThumbnail - ? html` - - - ` + ` : ''} + ${(c4dImage?.length < 1) ? html ` + ${ctaType !== CTA_TYPE.VIDEO || customThumbnail + ? html` + + + ` : ''} + ` : ''} Date: Fri, 5 Jan 2024 19:08:50 +0530 Subject: [PATCH 2/3] fix(cta): remove log statement --- .../web-components/src/components/cta/__stories__/cta.stories.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/web-components/src/components/cta/__stories__/cta.stories.ts b/packages/web-components/src/components/cta/__stories__/cta.stories.ts index 47470ef819e..a5f423c5460 100644 --- a/packages/web-components/src/components/cta/__stories__/cta.stories.ts +++ b/packages/web-components/src/components/cta/__stories__/cta.stories.ts @@ -120,7 +120,6 @@ export const Default = (args) => { const ctaFeatured = childCtaRoot?.querySelector('c4d-feature-cta'); const c4dImage = ctaFeatured?.querySelectorAll('c4d-image') || []; const c4dHeading = ctaFeatured?.querySelectorAll('c4d-card-heading') || []; - console.log(c4dImage); return html` ${ctaStyle === 'button' ? html` From c651c148e3d1cfe1f88ebe08e064d98ee35bc167 Mon Sep 17 00:00:00 2001 From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com> Date: Wed, 10 Jan 2024 12:06:45 +0530 Subject: [PATCH 3/3] fix(CTA): format cta.stories --- .../components/cta/__stories__/cta.stories.ts | 54 ++++++++++--------- 1 file changed, 30 insertions(+), 24 deletions(-) diff --git a/packages/web-components/src/components/cta/__stories__/cta.stories.ts b/packages/web-components/src/components/cta/__stories__/cta.stories.ts index a5f423c5460..a48d08423bc 100644 --- a/packages/web-components/src/components/cta/__stories__/cta.stories.ts +++ b/packages/web-components/src/components/cta/__stories__/cta.stories.ts @@ -102,16 +102,16 @@ export const Default = (args) => { if (ctaType !== 'video') { const childCta = document.querySelector('c4d-cta')?.shadowRoot!.children[0]; const headingComponent = - childCta?.shadowRoot?.querySelector('c4d-card-heading') || - childCta?.querySelector('c4d-card-heading'); - headingComponent && !duration - ? (duration = headingComponent!.textContent!.match(/\((.*)\)/)?.pop()) - : null; - if (headingComponent?.textContent) { - duration - ? (headingComponent!.textContent = `${heading} (${duration})`) - : (headingComponent!.textContent = heading); - } + childCta?.shadowRoot?.querySelector('c4d-card-heading') || + childCta?.querySelector('c4d-card-heading'); + headingComponent && !duration + ? (duration = headingComponent!.textContent!.match(/\((.*)\)/)?.pop()) + : null; + if (headingComponent?.textContent) { + duration + ? (headingComponent!.textContent = `${heading} (${duration})`) + : (headingComponent!.textContent = heading); + } } const childCta = document.querySelector('c4d-cta')?.shadowRoot!.children[0]; @@ -170,22 +170,28 @@ export const Default = (args) => { : ''} ${ctaStyle === 'feature' ? html` - ${(c4dHeading?.length < 1) ? html ` - ${ctaType !== 'video' - ? html` ${heading} ` + ${c4dHeading?.length < 1 + ? html` + ${ctaType !== 'video' + ? html` + ${heading} + ` + : ''} + ` : ''} - ` : ''} - ${(c4dImage?.length < 1) ? html ` - ${ctaType !== CTA_TYPE.VIDEO || customThumbnail - ? html` - - - ` + ${c4dImage?.length < 1 + ? html` + ${ctaType !== CTA_TYPE.VIDEO || customThumbnail + ? html` + + + ` + : ''} + ` : ''} - ` : ''}