From e6209d1c46007b4fef631cc9144a703e4e5e0c69 Mon Sep 17 00:00:00 2001 From: Carlos Miqueo Date: Mon, 20 Oct 2025 23:34:14 -0700 Subject: [PATCH 01/12] Adds option to caas configurator to center the video play button --- libs/blocks/caas-config/caas-config.js | 2 +- libs/blocks/caas/utils.js | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/libs/blocks/caas-config/caas-config.js b/libs/blocks/caas-config/caas-config.js index 95d59684411..e0b691dc0d7 100644 --- a/libs/blocks/caas-config/caas-config.js +++ b/libs/blocks/caas-config/caas-config.js @@ -149,7 +149,6 @@ const defaultOptions = { OR: 'OR', }, layoutType: { - // '1up': '1up', '2up': '2up', '3up': '3up', '4up': '4up', @@ -387,6 +386,7 @@ const UiPanel = () => { <${Input} label="Show Different CTA for Live Events" prop="dynamicCTAForLiveEvents" type="checkbox" /> <${Input} label="Hide Date for On-Demand Content" prop="hideDateInterval" type="checkbox" /> <${Input} label="Hide Card Banners" prop="disableBanners" type="checkbox" /> + <${Input} label="Use Center Video Play Button" prop="useCenterVideoPlay" type="checkbox" /> <${Input} label="Use Overlay Links" prop="useOverlayLinks" type="checkbox" /> <${Input} label="Use Light Text" prop="useLightText" type="checkbox" /> <${Select} label="Card Style" prop="cardStyle" options=${defaultOptions.cardStyle} /> diff --git a/libs/blocks/caas/utils.js b/libs/blocks/caas/utils.js index 472f4f2f99e..bfdf08d178a 100644 --- a/libs/blocks/caas/utils.js +++ b/libs/blocks/caas/utils.js @@ -765,6 +765,7 @@ export const getConfig = async (originalState, strs = {}) => { setCardBorders: state.setCardBorders, showFooterDivider: state.showFooterDivider, useOverlayLinks: state.useOverlayLinks, + useCenterVideoPlay: state.useCenterVideoPlay, partialLoadWithBackgroundFetch: { enabled: state.partialLoadEnabled, partialLoadCount: state.partialLoadCount, @@ -915,7 +916,7 @@ export const getConfig = async (originalState, strs = {}) => { linkTransformer: pageConfig.caasLinkTransformer || stageMapToCaasTransforms(pageConfig), headers: caasRequestHeaders, }; - + console.log(config); return config; }; @@ -1034,6 +1035,7 @@ export const defaultState = { totalCardsToShow: 10, useLightText: false, useOverlayLinks: false, + useCenterVideoPlay: false, collectionButtonStyle: 'primary', userInfo: [], }; From 928c844ea408f349174ac0c133ec9bcbb0aa7398 Mon Sep 17 00:00:00 2001 From: Carlos Miqueo Date: Tue, 21 Oct 2025 08:51:23 -0700 Subject: [PATCH 02/12] removes console log message --- libs/blocks/caas/utils.js | 1 - 1 file changed, 1 deletion(-) diff --git a/libs/blocks/caas/utils.js b/libs/blocks/caas/utils.js index bfdf08d178a..d8a35e32f5d 100644 --- a/libs/blocks/caas/utils.js +++ b/libs/blocks/caas/utils.js @@ -916,7 +916,6 @@ export const getConfig = async (originalState, strs = {}) => { linkTransformer: pageConfig.caasLinkTransformer || stageMapToCaasTransforms(pageConfig), headers: caasRequestHeaders, }; - console.log(config); return config; }; From 8bceb6bc93f9ed2b5a06045aa1f58ed5375c73c2 Mon Sep 17 00:00:00 2001 From: Carlos Miqueo Date: Tue, 21 Oct 2025 08:51:59 -0700 Subject: [PATCH 03/12] removes console log message --- libs/blocks/caas/utils.js | 1 + 1 file changed, 1 insertion(+) diff --git a/libs/blocks/caas/utils.js b/libs/blocks/caas/utils.js index d8a35e32f5d..57c4b52b84e 100644 --- a/libs/blocks/caas/utils.js +++ b/libs/blocks/caas/utils.js @@ -916,6 +916,7 @@ export const getConfig = async (originalState, strs = {}) => { linkTransformer: pageConfig.caasLinkTransformer || stageMapToCaasTransforms(pageConfig), headers: caasRequestHeaders, }; + return config; }; From cbf8b0e98e285f219d0d7950dee353092c61736a Mon Sep 17 00:00:00 2001 From: Carlos Miqueo Date: Tue, 21 Oct 2025 09:11:25 -0700 Subject: [PATCH 04/12] updates tests --- test/blocks/caas/utils.test.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/test/blocks/caas/utils.test.js b/test/blocks/caas/utils.test.js index dc8be38b786..1c87e59d9ce 100644 --- a/test/blocks/caas/utils.test.js +++ b/test/blocks/caas/utils.test.js @@ -198,6 +198,7 @@ describe('getConfig', () => { showCardBadges: false, showFooterDivider: false, useOverlayLinks: false, + useCenterVideoPlay: false, additionalRequestParams: {}, dynamicCTAForLiveEvents: false, banner: { @@ -470,6 +471,7 @@ describe('getConfig', () => { showCardBadges: false, showFooterDivider: false, useOverlayLinks: false, + useCenterVideoPlay: false, additionalRequestParams: {}, dynamicCTAForLiveEvents: false, banner: { @@ -838,6 +840,7 @@ describe('getFloodgateCaasConfig', () => { showCardBadges: false, showFooterDivider: false, useOverlayLinks: false, + useCenterVideoPlay: false, additionalRequestParams: {}, dynamicCTAForLiveEvents: false, banner: { From eb68ca8f543b2c070141a0d1ed4c6fba608c507b Mon Sep 17 00:00:00 2001 From: Carlos Miqueo Date: Tue, 21 Oct 2025 09:21:40 -0700 Subject: [PATCH 05/12] updates tests - part II --- test/blocks/caas/mocks/utils.js | 1 + 1 file changed, 1 insertion(+) diff --git a/test/blocks/caas/mocks/utils.js b/test/blocks/caas/mocks/utils.js index 18e9688152c..083f33543ec 100644 --- a/test/blocks/caas/mocks/utils.js +++ b/test/blocks/caas/mocks/utils.js @@ -92,5 +92,6 @@ export const parseEncodedConfig = stub().returns({ totalCardsToShow: 10, useLightText: false, useOverlayLinks: false, + useCenterVideoPlay: false, userInfo: [], }); From 579314aee0c2d2157a19616640741d0603ea50bc Mon Sep 17 00:00:00 2001 From: Carlos Miqueo Date: Tue, 21 Oct 2025 11:14:39 -0700 Subject: [PATCH 06/12] updates tests - part III --- test/blocks/caas-config/expectedConfigs/defaultConfig.js | 1 + 1 file changed, 1 insertion(+) diff --git a/test/blocks/caas-config/expectedConfigs/defaultConfig.js b/test/blocks/caas-config/expectedConfigs/defaultConfig.js index ad331de0a15..a421dd39f59 100644 --- a/test/blocks/caas-config/expectedConfigs/defaultConfig.js +++ b/test/blocks/caas-config/expectedConfigs/defaultConfig.js @@ -35,6 +35,7 @@ const defaultConfig = { setCardBorders: false, showCardBadges: false, showFooterDivider: false, + useCenterVideoPlay: false, useOverlayLinks: false, banner: { register: { description: 'Sign Up', url: '#registration' }, From 2028c7a94a8b7030cb6d2445811a25d8d7d13df2 Mon Sep 17 00:00:00 2001 From: Carlos Miqueo Date: Mon, 1 Dec 2025 10:07:50 -0800 Subject: [PATCH 07/12] Initial test commit --- libs/blocks/caas-config/caas-config.css | 7 +++++++ libs/blocks/caas-config/caas-config.js | 21 +++++++++++++++++---- 2 files changed, 24 insertions(+), 4 deletions(-) diff --git a/libs/blocks/caas-config/caas-config.css b/libs/blocks/caas-config/caas-config.css index 5c55501eb0c..c17cc759cde 100644 --- a/libs/blocks/caas-config/caas-config.css +++ b/libs/blocks/caas-config/caas-config.css @@ -149,3 +149,10 @@ dd.content .sort-options > .field { transform: rotate(180deg); display: inline-block; } + + +/* TEMP CODE */ +dd.content .carousel-options .field { + padding-left: 20px; + max-width: calc(var(--field-max-size) - 20px); +} \ No newline at end of file diff --git a/libs/blocks/caas-config/caas-config.js b/libs/blocks/caas-config/caas-config.js index e0b691dc0d7..4d2ef1a2c5f 100644 --- a/libs/blocks/caas-config/caas-config.js +++ b/libs/blocks/caas-config/caas-config.js @@ -159,8 +159,10 @@ const defaultOptions = { 'over-background': 'Over Background', }, paginationAnimationStyle: { - paged: 'Paged', - incremental: 'Incremental', + pagedModern: 'Paged (Modern)', + incrementalModern: 'Incremental (Modern)', + paged: 'Paged (Classic)', + incremental: 'Incremental (Classic)', }, paginationType: { paginator: 'Paginator', @@ -378,6 +380,16 @@ const UiPanel = () => { `; + const carouselOptions = html` +
+ <${Select} + label="Carousel Controls Options" + prop="paginationAnimationStyle" + options=${defaultOptions.paginationAnimationStyle} + /> +
+ `; + return html` <${Input} label="Show Total Count" prop="showTotalResults" type="checkbox" /> <${Input} label="Show Card Borders" prop="setCardBorders" type="checkbox" /> @@ -393,6 +405,7 @@ const UiPanel = () => { ${state.cardStyle === 'blade-card' && bladeCardOptions} <${Select} options=${defaultOptions.cardTitleAccessibilityLevel} prop="cardTitleAccessibilityLevel" label="Card Accessibility Title Level" /> <${Select} label="Layout" prop="container" options=${defaultOptions.container} /> + ${state.container === 'carousel' && carouselOptions} <${Select} label="Layout Type" prop="layoutType" options=${defaultOptions.layoutType} /> <${Select} label="Grid Gap (Gutter)" prop="gutter" options=${defaultOptions.gutter} /> <${Select} label="Theme" prop="theme" options=${defaultOptions.theme} /> @@ -684,11 +697,11 @@ const PaginationPanel = () => { prop="paginationType" options=${defaultOptions.paginationType} /> - <${Select} + <${Input} label="Use Theme 3" prop="paginationUseTheme3" type="checkbox" /> `; From bfb2c115c02e9dcead8c6e25e8892abd93b255b4 Mon Sep 17 00:00:00 2001 From: Carlos Miqueo Date: Thu, 4 Dec 2025 10:58:14 -0800 Subject: [PATCH 08/12] updates carousel width --- libs/blocks/caas-config/caas-config.css | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/libs/blocks/caas-config/caas-config.css b/libs/blocks/caas-config/caas-config.css index c17cc759cde..7d3090fb299 100644 --- a/libs/blocks/caas-config/caas-config.css +++ b/libs/blocks/caas-config/caas-config.css @@ -150,9 +150,19 @@ dd.content .sort-options > .field { display: inline-block; } - -/* TEMP CODE */ +/* TEMP CODE FOR MODERN CAROUSEL */ +/* Indent carousel options */ dd.content .carousel-options .field { padding-left: 20px; max-width: calc(var(--field-max-size) - 20px); -} \ No newline at end of file +} + +.consonant-Wrapper--carousel { + .consonant-Wrapper-inner:has(.modern-carousel) { + width: 100%; + } + .caas-config .consonant-Wrapper--carousel { + width: 100%; + margin: 0; + } +} From 12d9094d8ac295bdc29e97535dfcc4b3753168ec Mon Sep 17 00:00:00 2001 From: Carlos Miqueo Date: Wed, 17 Dec 2025 10:19:12 -0800 Subject: [PATCH 09/12] MWPW-185469: Adds new CasS caousel controls options --- libs/blocks/caas-config/caas-config.js | 9 +++++---- libs/blocks/caas/caas.css | 4 ++++ libs/blocks/caas/utils.js | 11 ++++++++--- 3 files changed, 17 insertions(+), 7 deletions(-) diff --git a/libs/blocks/caas-config/caas-config.js b/libs/blocks/caas-config/caas-config.js index 4d2ef1a2c5f..a98bae7cdfe 100644 --- a/libs/blocks/caas-config/caas-config.js +++ b/libs/blocks/caas-config/caas-config.js @@ -159,10 +159,10 @@ const defaultOptions = { 'over-background': 'Over Background', }, paginationAnimationStyle: { - pagedModern: 'Paged (Modern)', - incrementalModern: 'Incremental (Modern)', - paged: 'Paged (Classic)', - incremental: 'Incremental (Classic)', + pagedModern: 'Modern (Paged)', + incrementalModern: 'Modern (Incremental)', + paged: 'Classic (Paged)', + incremental: 'Classic (Incremental)', }, paginationType: { paginator: 'Paginator', @@ -387,6 +387,7 @@ const UiPanel = () => { prop="paginationAnimationStyle" options=${defaultOptions.paginationAnimationStyle} /> + <${Input} label="Light background (Modern only)" prop="useLightControls" type="checkbox" /> `; diff --git a/libs/blocks/caas/caas.css b/libs/blocks/caas/caas.css index 93573268938..df226bae8f2 100644 --- a/libs/blocks/caas/caas.css +++ b/libs/blocks/caas/caas.css @@ -571,3 +571,7 @@ color: #eee; padding-top: 10px; border-top: solid 2px #000; } + +.content-panel .consonant-Wrapper--carousel { + margin: 0; +} \ No newline at end of file diff --git a/libs/blocks/caas/utils.js b/libs/blocks/caas/utils.js index 57c4b52b84e..9c83bf76211 100644 --- a/libs/blocks/caas/utils.js +++ b/libs/blocks/caas/utils.js @@ -709,13 +709,19 @@ export const getConfig = async (originalState, strs = {}) => { const langFirst = state.langFirst ? `&langFirst=${state.langFirst}` : ''; + const navigationStyle = state.container === 'carousel' + && state.paginationAnimationStyle.includes('Modern') + && state.useLightControls + ? `${state.paginationAnimationStyle}-light` + : state.paginationAnimationStyle; + const config = { collection: { mode: state.theme, layout: { type: state.layoutType, gutter: state.gutter, - container: state.container, + container: state.container, }, button: { style: state.collectionBtnStyle }, resultsPerPage: state.resultsPerPage, @@ -851,7 +857,7 @@ export const getConfig = async (originalState, strs = {}) => { options: getSortOptions(state, strs), }, pagination: { - animationStyle: state.paginationAnimationStyle, + animationStyle: navigationStyle, enabled: state.paginationEnabled, resultsQuantityShown: state.paginationQuantityShown, loadMoreButton: { @@ -916,7 +922,6 @@ export const getConfig = async (originalState, strs = {}) => { linkTransformer: pageConfig.caasLinkTransformer || stageMapToCaasTransforms(pageConfig), headers: caasRequestHeaders, }; - return config; }; From 4fc86e2b728a4da4480e3ca2f1a05a523aaf7271 Mon Sep 17 00:00:00 2001 From: Carlos Miqueo Date: Fri, 19 Dec 2025 11:15:08 -0800 Subject: [PATCH 10/12] Updates css --- libs/blocks/caas-config/caas-config.css | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/libs/blocks/caas-config/caas-config.css b/libs/blocks/caas-config/caas-config.css index 7d3090fb299..f03574fcee2 100644 --- a/libs/blocks/caas-config/caas-config.css +++ b/libs/blocks/caas-config/caas-config.css @@ -150,19 +150,13 @@ dd.content .sort-options > .field { display: inline-block; } -/* TEMP CODE FOR MODERN CAROUSEL */ /* Indent carousel options */ dd.content .carousel-options .field { padding-left: 20px; max-width: calc(var(--field-max-size) - 20px); } -.consonant-Wrapper--carousel { - .consonant-Wrapper-inner:has(.modern-carousel) { - width: 100%; - } - .caas-config .consonant-Wrapper--carousel { - width: 100%; - margin: 0; - } +.caas-config .consonant-Wrapper--carousel { + width: 100%; + margin: 0; } From d4b67c0f2cca80a346d589491d256a7950618a63 Mon Sep 17 00:00:00 2001 From: Carlos Miqueo Date: Fri, 19 Dec 2025 15:21:21 -0800 Subject: [PATCH 11/12] Removes unused element --- libs/blocks/caas-config/caas-config.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/libs/blocks/caas-config/caas-config.js b/libs/blocks/caas-config/caas-config.js index a98bae7cdfe..ae920a35059 100644 --- a/libs/blocks/caas-config/caas-config.js +++ b/libs/blocks/caas-config/caas-config.js @@ -698,11 +698,6 @@ const PaginationPanel = () => { prop="paginationType" options=${defaultOptions.paginationType} /> - <${Input} label="Use Theme 3" prop="paginationUseTheme3" type="checkbox" /> `; From 58c1ca49cd18886a3e519fc700f707b5029c4af5 Mon Sep 17 00:00:00 2001 From: Carlos Miqueo Date: Mon, 22 Dec 2025 09:31:38 -0800 Subject: [PATCH 12/12] fixes linting errors --- libs/blocks/caas/utils.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/libs/blocks/caas/utils.js b/libs/blocks/caas/utils.js index 193a24ca715..4ec7d1ee359 100644 --- a/libs/blocks/caas/utils.js +++ b/libs/blocks/caas/utils.js @@ -843,11 +843,11 @@ export const getConfig = async (originalState, strs = {}) => { const langFirst = state.langFirst ? `&langFirst=${state.langFirst}` : ''; - const navigationStyle = state.container === 'carousel' - && state.paginationAnimationStyle.includes('Modern') - && state.useLightControls - ? `${state.paginationAnimationStyle}-light` - : state.paginationAnimationStyle; + const navigationStyle = state.container === 'carousel' + && state.paginationAnimationStyle.includes('Modern') + && state.useLightControls + ? `${state.paginationAnimationStyle}-light` + : state.paginationAnimationStyle; const config = { collection: { @@ -855,7 +855,7 @@ export const getConfig = async (originalState, strs = {}) => { layout: { type: state.layoutType, gutter: state.gutter, - container: state.container, + container: state.container, }, button: { style: state.collectionBtnStyle }, resultsPerPage: state.resultsPerPage,