MWPW-153580: Add Opt-In Feature for CaaS Badge Display

libs/blocks/caas-config/caas-config.js

@@ -364,6 +364,7 @@ const UiPanel = () => html`
   <${Input} label="Use Overlay Links" prop="useOverlayLinks" type="checkbox" />
   <${Input} label="Show total card count at top" prop="showTotalResults" type="checkbox" />
   <${Input} label="Hide date for on-demand content" prop="hideDateInterval" type="checkbox" />
+  <${Input} label="Enable showing card badges (by default hidden)" prop="showCardBadges" type="checkbox" />
   <${Select} label="Card Style" prop="cardStyle" options=${defaultOptions.cardStyle} />
   <${Select} options=${defaultOptions.cardTitleAccessibilityLevel} prop="cardTitleAccessibilityLevel" label="Card Accessibility Title Level" />
   <${Select} label="Layout" prop="container" options=${defaultOptions.container} />

libs/blocks/caas/utils.js

@@ -580,6 +580,7 @@ export const getConfig = async (originalState, strs = {}) => {
       }&size=${state.collectionSize || state.totalCardsToShow}${localesQueryParam}${debug}${flatFile}`,
       fallbackEndpoint: state.fallbackEndpoint,
       totalCardsToShow: state.totalCardsToShow,
+      showCardBadges: state.showCardBadges,
       cardStyle: state.cardStyle,
       showTotalResults: state.showTotalResults,
       i18n: {
@@ -818,6 +819,7 @@ export const defaultState = {
   secondaryTags: [],
   secondarySource: [],
   setCardBorders: false,
+  showCardBadges: false,
   showFooterDivider: false,
   showBookmarksFilter: false,
   showBookmarksOnCards: false,

test/blocks/caas-config/caas-config.test.html

@@ -312,7 +312,7 @@
         // The header is the part before the first / in the hash
         // Due to this we only compare the characters after the header value
 
-        const hashWithoutHeader = 'bNhD9Lzw7Wafb9qDb2ruLGPBm3diLHoqgGJMjiTDFUcmhvUrR/16Q+nacm/TecL74ZvivAKU0a7JgvuI/AT3vwEHlRfbXt4UAC6ZhLf2ajEEZ7b5AhSITYkIeHMjTpqodeq/JiiwH4zEaqC0VWh6g6P0FpjUFy67Zgi0GyyPRqQJ32kiye4yR2hBT/M36CSPBqT03JuZSgsk/lKiLkjvmoNngg5QxoaM2mpstntGI7PeFkEMpK7a9i9rpClwjpvRY6Yglx9fgXn8fMMugLTqRiU+/LJcv8P6nVlx2FFo+NDWO/ZBtL0QmJIDPut+74OOB4JmqNTjV+WZ4SOFEJv72aHKxEIq+EG/he7MlUEM3lfZwNLgCa9H5EXaQ8+Nx+EeratI2NvRyuXwERUf8KKm6k6Wu0MEHqPXdWKWIJ87aka3QdreA79IEhSpm2ZXUQWONORhzBHl6GsOJhcgROLjZyVwbRvd0Hry3wCpoo3Zg4/UlAVXAWg70liR0XTGY8wQvtBSZIDdAszh+nfo7g/YlXZ6qmpuhR0VgTrf567tYiBJBDW5KrXDNsFHz/7HwCDwC48YyujOYwam2Vy0yYIsABfY66P/vMHbdQEMhCSfmEeoIEagXcnhTwZb4auzImibWturGaWh7lxC5qwM1FNqmtj5YXaWPIQ4UqMTU5MlGtY3yG5k/AljWnGLbG3xXUwekmxrJN4+HEiu8Hw8akFiSUejenGk14tAHw36Hbpca+NtCeAQny2eNpr8aj5KsAteMFQ7QnoKT2IMcG7Mip6aD40u6PBMxukd91irqYcL0TfXPSUS3uVc773hy2Ytygm2ubPaplhl0II67OpU9EuQ4au3Byx+wR7wBvpDSuZ7cWiIwh2Di9Kn+XEu0V7yjOtSzAy3+Fayiag9VbfRkqSeDOM17cjxDn7vhn4F9Rtcl9PgPZbRh5xB6dGfSbkdkRPZpuVxeESlLFNl9i7cPxZXjBF6F60QiSricvPi2EAyFb1X48+UZbUQ0dQVyXN5nHXeLGLDr0eEo+LjJ4luGPm4zhQza+AO+82vdLTrV3dNCcEz1M4LStuieOFHeRyKqJGnuQHH8YjMWInjcRtfR2xA0eHw9ozPQbLU9jZqaPJSBmW5smuDRbWxOcXr++x/O+0/8SwgAAA==';
+        const hashWithoutHeader = 'bNhD9Fz47Wafb9kFva+8uYsCbdWMv+lAExZgcSYQpjkoO7VWK/ntB6u44b9I55FzOXPivAKU0a7JgvuI/AT3vwEHlRfbXt4UAC6ZhLf2ajEEZz32BCkUmxIQ8OJCnTVU79F6TFVkOxmM8oLZUaHmAorcXmNYULLtmC7YYTh6JThW400aS3WP01LqY4m/WTxgJTu25MTGWEkz+oURdlNwxB80GH6SMAR210dxs8YxGZL8vhBxSWbHtTdROV+AaMaXHTEcsGb4G9/r7gFkGbdGJTHz6Zbl8gfc/teKyo9Dyoalx1EO2WohMSACfdb93wccLwTNVa3Cqs83wkNyJTPzt0eRiIRR9Id7C92ZLoAY1lfZwNLgCa9H5EXaQ8+Nx+EeratI2Cnq5XD6CoiN+lFTdyVJX6OAD1PpuzFLEG2ftyFZouyrguzRBoYpRdil10JhjDsYcQZ6eRndiIXIEDm52M9eG0T2dB+stsAraqB3YWL7UQBWwlgO9JQmdKgZznuCFliIT5AZo5sevk74zaF/S5amquRk0KgJzquav72IhSgQ1mCm1wjXDRs3/x8Qj8AiMG8vozmAGo9peSWTAFgEK7Pug/7/DqLqBhkJqnBhHqCNEoF7I4c0OtsRXY0fWNDG3VTdOg+xdQOSuLtRQaJtkfbC6Sh+DHyhQiemRJxu7bWy/kfkjgGXNybe9wXc5dUCq1Ei+eTyUWOH9eNGAxJKMQvfmTNsjDn0w7HfodknA3xbCIzhZPms0fWk8SrIKXDNmOEB7Ck5iD3IUZkVOTQfHl3RJOKgC5/AzEaN71GetYptMmF5r/5x66zb3aueFSCb7Xp1gm6sz+5TiDDoQxxWe1BgJchxb8MHLH7BHvAG+kNK5nhQzEZhDMHEoVX+vJdrK76gO9exCi38Fq6jaQ1UbPdn16UAc8j05nqHP3U6YgX1E1yn0+A9ptG7nEHp0Z9JuR2RE9mm5XF4RKUoU2X2Lt+/HleEEXrnrekeUcDl58W0hGArfNufPd2o8I+JRVyDHnX7WceWIAbueKI5zEBdcfOLQxyWnkEEbf8B3fq27/ae6Oi0Ex1A/Iyhti+7lE+V9JGKXpJ47UJzKKMZCBI/baDpaG5wGj69ndAaarbansacm72dgphsLKHh0G5tTHKr//gcEWd70YggAAA==';
 
         const hash = copyTextArea.value.split('#')[1].trim();
 

test/blocks/caas-config/expectedConfigs/defaultConfig.js

@@ -26,6 +26,7 @@ const defaultConfig = {
     },
     detailsTextOption: 'default',
     setCardBorders: false,
+    showCardBadges: false,
     showFooterDivider: false,
     useOverlayLinks: false,
     banner: {

test/blocks/caas/utils.test.js

@@ -186,6 +186,7 @@ describe('getConfig', () => {
           titleHeadingLevel: 'h3',
         },
         setCardBorders: false,
+        showCardBadges: false,
         showFooterDivider: false,
         useOverlayLinks: false,
         additionalRequestParams: {},
@@ -448,6 +449,7 @@ describe('getConfig', () => {
           titleHeadingLevel: 'h3',
         },
         setCardBorders: false,
+        showCardBadges: false,
         showFooterDivider: false,
         useOverlayLinks: false,
         additionalRequestParams: {},
@@ -771,6 +773,7 @@ describe('getFloodgateCaasConfig', () => {
           titleHeadingLevel: 'h3',
         },
         setCardBorders: false,
+        showCardBadges: false,
         showFooterDivider: false,
         useOverlayLinks: false,
         additionalRequestParams: {},