diff --git a/.eslintrc.js b/.eslintrc.js index 3cf7754d17..42de94190c 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -9,7 +9,7 @@ module.exports = { Atomics: "readonly", SharedArrayBuffer: "readonly", Fusion: "readonly", - history: "readonly" + history: "readonly", }, ignorePatterns: [ "**/features/ad-taboola/default.jsx", diff --git a/.prettierrc b/.prettierrc index cb96cd087e..f7b00e9724 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,4 +1,5 @@ { "useTabs": true, - "printWidth": 100 + "printWidth": 100, + experimentalTernaries: false, } diff --git a/blocks/card-list-block/features/card-list/default.jsx b/blocks/card-list-block/features/card-list/default.jsx index 0eae4bd4c2..f027b09867 100644 --- a/blocks/card-list-block/features/card-list/default.jsx +++ b/blocks/card-list-block/features/card-list/default.jsx @@ -144,7 +144,12 @@ const CardListItems = (props) => { const sourceContent = contentElements[offsetOverride]; - const displayDate = localizeDateTime(sourceContent.display_date, dateTimeFormat, language, timeZone); + const displayDate = localizeDateTime( + sourceContent.display_date, + dateTimeFormat, + language, + timeZone, + ); /* Author Formatting */ const bylineNodes = formatAuthors(sourceContent?.credits?.by, phrases.t("global.and-text")); @@ -178,9 +183,7 @@ const CardListItems = (props) => { ? { ansImage, aspectRatio: "4:3", - resizedOptions: { - ...getFocalFromANS(ansImage), - }, + resizedOptions: getFocalFromANS(ansImage), responsiveImages: [377, 754, 1508], width: 377, } @@ -238,9 +241,7 @@ const CardListItems = (props) => { ? { ansImage: itemAnsImage, aspectRatio: "3:2", - resizedOptions: { - ...getFocalFromANS(itemAnsImage), - }, + resizedOptions: getFocalFromANS(itemAnsImage), responsiveImages: [105, 210, 420], width: 105, } diff --git a/blocks/extra-large-manual-promo-block/features/extra-large-manual-promo/default.jsx b/blocks/extra-large-manual-promo-block/features/extra-large-manual-promo/default.jsx index f668997989..a681b087ee 100644 --- a/blocks/extra-large-manual-promo-block/features/extra-large-manual-promo/default.jsx +++ b/blocks/extra-large-manual-promo-block/features/extra-large-manual-promo/default.jsx @@ -55,9 +55,9 @@ const ExtraLargeManualPromo = ({ customFields }) => { resizedImage || !imageURL ? {} : { - source: "signing-service", - query: { id: manualImageId || imageURL }, - } + source: "signing-service", + query: { id: manualImageId || imageURL }, + }, ); if (imageAuth && !resizedAuth) { resizedAuth = JSON.parse(imageAuth); @@ -74,25 +74,23 @@ const ExtraLargeManualPromo = ({ customFields }) => { _id: resizedImage ? imageId : manualImageId, url: imageURL, auth: resizedAuth, - focal_point: imageFocalPoint ? JSON.parse(imageFocalPoint) : undefined - } + focal_point: imageFocalPoint ? JSON.parse(imageFocalPoint) : undefined, + }; const alt = headline || description || null; const imageParams = imageURL && resizedAuth ? { - ansImage, - alt, - aspectRatio: imageRatio, - resizedOptions: { - ...getFocalFromANS(ansImage) - }, - responsiveImages: [200, 400, 600, 800, 1200], - width: 600, - } + alt, + ansImage, + aspectRatio: imageRatio, + resizedOptions: getFocalFromANS(ansImage), + responsiveImages: [200, 400, 600, 800, 1200], + width: 600, + } : { - src: fallbackImage, - alt, - }; + alt, + src: fallbackImage, + }; const availableDescription = showDescription ? description : null; const availableHeadline = showHeadline ? headline : null; @@ -126,7 +124,7 @@ const ExtraLargeManualPromo = ({ customFields }) => { imageURL: "url", imageId: "_id", imageAuth: "auth", - imageFocalPoint: "focal_point" + imageFocalPoint: "focal_point", })} suppressContentEditableWarning > diff --git a/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx b/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx index 6a73997dfc..1d683f78d3 100644 --- a/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx +++ b/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx @@ -169,7 +169,7 @@ const ExtraLargePromo = ({ customFields }) => { ? { feature: "extra-large-promo", ...itemContentConfig.contentConfigValues, - } + } : null, filter: `{ _id @@ -312,24 +312,22 @@ const ExtraLargePromo = ({ customFields }) => { showImage && (imageOverrideURL || ansImage ? { + alt: content?.headlines?.basic || "", ansImage: imageOverrideURL ? { - _id: resizedImage ? imageOverrideId : manualImageId, - url: imageOverrideURL, - auth: resizedAuth || {}, - } + _id: resizedImage ? imageOverrideId : manualImageId, + url: imageOverrideURL, + auth: resizedAuth || {}, + } : ansImage, - alt: content?.headlines?.basic || "", aspectRatio: imageRatio, - resizedOptions: { - ...getFocalFromANS(ansImage), - }, + resizedOptions: getFocalFromANS(ansImage), responsiveImages: [400, 600, 800, 1200], width: 800, - } + } : { src: fallbackImage, - }); + }); const videoOrGalleryContentType = getType("video", content) || getType("gallery", content) || diff --git a/blocks/hero-block/features/hero/default.jsx b/blocks/hero-block/features/hero/default.jsx index 77646ff04a..84e9f0f87c 100644 --- a/blocks/hero-block/features/hero/default.jsx +++ b/blocks/hero-block/features/hero/default.jsx @@ -45,20 +45,16 @@ function Hero({ customFields }) { const { arcSite } = useFusionContext(); const { searchableField } = useEditableContent(); const { fallbackImage, resizerURL } = getProperties(arcSite); - const imageId = imageDesktopURL - ? getManualImageID(imageDesktopURL) - : desktopImgId; + const imageId = imageDesktopURL ? getManualImageID(imageDesktopURL) : desktopImgId; - const imageMobileId = imageMobileURL - ? getManualImageID(imageMobileURL) - : imgMobileId; + const imageMobileId = imageMobileURL ? getManualImageID(imageMobileURL) : imgMobileId; let desktopAuth = useContent( !imageDesktopAuth && imageId ? { source: "signing-service", query: { id: imageId }, - } - : {} + } + : {}, ); if (!desktopAuth || (desktopAuth && !Object.keys(desktopAuth).length)) { @@ -74,8 +70,8 @@ function Hero({ customFields }) { ? { source: "signing-service", query: { id: imageMobileId }, - } - : {} + } + : {}, ); if (mobileAuth?.hash) { mobileAuth[RESIZER_TOKEN_VERSION] = mobileAuth.hash; @@ -93,41 +89,42 @@ function Hero({ customFields }) { const desktopImageParams = imageId && imageDesktopURL ? { - src: imageANSToImageSrc({ - _id: imageId, - url: imageDesktopURL, - }), + alt, + height: 800, resizedOptions: { auth: desktopAuth || {}, smart: true, }, - width: 1200, - height: 800, resizerURL, - } + src: imageANSToImageSrc({ + _id: imageId, + url: imageDesktopURL, + }), + width: 1200, + } : { src: fallbackImage, - }; + }; const mobileImageParams = imageMobileId && imageMobileURL ? { + alt, ansImage: { _id: imageMobileId, url: imageMobileURL, auth: mobileAuth || {}, }, - alt, + height: 400, resizedOptions: { smart: true, }, - width: 320, - height: 400, resizerURL, - } + width: 320, + } : { - src: fallbackImage, alt: imageMobileAlt, - }; + src: fallbackImage, + }; const HeadingWrapper = headline ? HeadingSection : Fragment; return (
diff --git a/blocks/large-manual-promo-block/features/large-manual-promo/default.jsx b/blocks/large-manual-promo-block/features/large-manual-promo/default.jsx index 3cd8ccd07b..19acc3aa64 100644 --- a/blocks/large-manual-promo-block/features/large-manual-promo/default.jsx +++ b/blocks/large-manual-promo-block/features/large-manual-promo/default.jsx @@ -65,9 +65,9 @@ const LargeManualPromo = ({ customFields }) => { resizedImage || !imageURL ? {} : { - source: "signing-service", - query: { id: manualImageId || imageURL }, - } + source: "signing-service", + query: { id: manualImageId || imageURL }, + }, ); if (imageAuth && !resizedAuth) { resizedAuth = JSON.parse(imageAuth); @@ -83,26 +83,24 @@ const LargeManualPromo = ({ customFields }) => { _id: resizedImage ? imageId : manualImageId, url: imageURL, auth: resizedAuth, - focal_point: imageFocalPoint ? JSON.parse(imageFocalPoint) : undefined - } + focal_point: imageFocalPoint ? JSON.parse(imageFocalPoint) : undefined, + }; const alt = headline || description || null; const imageParams = imageURL && resizedAuth ? { - ansImage, - alt, - aspectRatio: imageRatio, - resizedOptions: { - ...getFocalFromANS(ansImage) - }, - responsiveImages: [200, 400, 600, 800, 1200], - width: 600, - } + alt, + ansImage, + aspectRatio: imageRatio, + resizedOptions: getFocalFromANS(ansImage), + responsiveImages: [200, 400, 600, 800, 1200], + width: 600, + } : { - src: fallbackImage, - alt, - }; + alt, + src: fallbackImage, + }; return ( @@ -132,7 +130,11 @@ const LargeManualPromo = ({ customFields }) => { ) : null} - + {showDescription || showHeadline ? ( {showHeadline && headline ? ( diff --git a/blocks/large-promo-block/features/large-promo/default.jsx b/blocks/large-promo-block/features/large-promo/default.jsx index fd9add3df9..45b716349f 100644 --- a/blocks/large-promo-block/features/large-promo/default.jsx +++ b/blocks/large-promo-block/features/large-promo/default.jsx @@ -179,7 +179,7 @@ const LargePromoItem = ({ customFields, arcSite }) => { "arc-site": arcSite, feature: "large-promo", ...customFields?.itemContentConfig?.contentConfigValues, - } + } : null, filter: `{ _id @@ -272,7 +272,7 @@ const LargePromoItem = ({ customFields, arcSite }) => { let resizedAuth = useContent( resizedImage || !imageOverrideURL ? {} - : { source: "signing-service", query: { id: manualImageId || imageOverrideURL } } + : { source: "signing-service", query: { id: manualImageId || imageOverrideURL } }, ); if (imageOverrideAuth && !resizedAuth) { resizedAuth = JSON.parse(imageOverrideAuth); @@ -292,12 +292,10 @@ const LargePromoItem = ({ customFields, arcSite }) => { fallbackImage, } = getProperties(arcSite); - const displayDate = content?.display_date && Date.parse(content?.display_date) ? localizeDateTime( - new Date(content?.display_date), - dateTimeFormat, - language, - timeZone - ) : ""; + const displayDate = + content?.display_date && Date.parse(content?.display_date) + ? localizeDateTime(new Date(content?.display_date), dateTimeFormat, language, timeZone) + : ""; const phrases = usePhrases(); const editableDescription = content?.description @@ -349,28 +347,26 @@ const LargePromoItem = ({ customFields, arcSite }) => { const contentUrl = content?.websites?.[arcSite]?.website_url; const embedMarkup = playVideoInPlace && getVideoFromANS(content); const ansImage = getImageFromANS(content); - const promoImageParams = + const promoImageParams = showImage && (imageOverrideURL || ansImage ? { + alt: content?.headlines?.basic || "", ansImage: imageOverrideURL ? { _id: resizedImage ? imageOverrideId : manualImageId, - url: imageOverrideURL, auth: resizedAuth || {}, - } + url: imageOverrideURL, + } : ansImage, - alt: content?.headlines?.basic || "", aspectRatio: imageRatio, - resizedOptions: { - ...getFocalFromANS(ansImage), - }, + resizedOptions: getFocalFromANS(ansImage), responsiveImages: [400, 600, 800, 1200], width: 377, - } + } : { src: fallbackImage, - }); + }); return ( { resizedImage || !imageURL ? {} : { - source: "signing-service", - query: { id: manualImageId || imageURL }, - } + source: "signing-service", + query: { id: manualImageId || imageURL }, + }, ); if (imageAuth && !resizedAuth) { resizedAuth = JSON.parse(imageAuth); @@ -69,25 +69,23 @@ const MediumManualPromo = ({ customFields }) => { _id: resizedImage ? imageId : manualImageId, url: imageURL, auth: resizedAuth, - focal_point: imageFocalPoint ? JSON.parse(imageFocalPoint) : undefined - } + focal_point: imageFocalPoint ? JSON.parse(imageFocalPoint) : undefined, + }; const alt = headline || description || null; const imageParams = imageURL && resizedAuth ? { - ansImage, - alt, - aspectRatio: imageRatio, - resizedOptions: { - ...getFocalFromANS(ansImage) - }, - responsiveImages: [200, 400, 600, 800, 1200], - width: 600, - } + alt, + ansImage, + aspectRatio: imageRatio, + resizedOptions: getFocalFromANS(ansImage), + responsiveImages: [200, 400, 600, 800, 1200], + width: 600, + } : { - src: fallbackImage, - alt, - }; + alt, + src: fallbackImage, + }; return ( @@ -101,7 +99,7 @@ const MediumManualPromo = ({ customFields }) => { imageURL: "url", imageId: "_id", imageAuth: "auth", - imageFocalPoint: "focal_point" + imageFocalPoint: "focal_point", })} suppressContentEditableWarning > diff --git a/blocks/medium-promo-block/features/medium-promo/default.jsx b/blocks/medium-promo-block/features/medium-promo/default.jsx index 3b5b1d9537..8607eed5c1 100644 --- a/blocks/medium-promo-block/features/medium-promo/default.jsx +++ b/blocks/medium-promo-block/features/medium-promo/default.jsx @@ -66,7 +66,7 @@ const MediumPromo = ({ customFields }) => { ? { feature: "medium-promo", ...customFields?.itemContentConfig?.contentConfigValues, - } + } : null, // does not need embed_html because no video section // does not need website section nor label because no overline @@ -147,7 +147,7 @@ const MediumPromo = ({ customFields }) => { let resizedAuth = useContent( resizedImage || !imageOverrideURL ? {} - : { source: "signing-service", query: { id: manualImageId || imageOverrideURL } } + : { source: "signing-service", query: { id: manualImageId || imageOverrideURL } }, ); if (imageOverrideAuth && !resizedAuth) { resizedAuth = JSON.parse(imageOverrideAuth); @@ -185,24 +185,22 @@ const MediumPromo = ({ customFields }) => { const imageParams = imageOverrideURL || ansImage ? { + alt: content?.headlines?.basic || "", ansImage: imageOverrideURL ? { _id: resizedImage ? imageOverrideId : manualImageId, url: imageOverrideURL, auth: resizedAuth || {}, - } + } : ansImage, - alt: content?.headlines?.basic || "", aspectRatio: imageRatio, - resizedOptions: { - ...getFocalFromANS(ansImage), - }, + resizedOptions: getFocalFromANS(ansImage), responsiveImages: [200, 400, 600, 800, 1200], width: 600, - } + } : { src: fallbackImage, - }; + }; return showHeadline || showImage || showDescription || showByline || showDate ? ( diff --git a/blocks/numbered-list-block/features/numbered-list/default.jsx b/blocks/numbered-list-block/features/numbered-list/default.jsx index 0198e2c5a2..2ef3bbec35 100644 --- a/blocks/numbered-list-block/features/numbered-list/default.jsx +++ b/blocks/numbered-list-block/features/numbered-list/default.jsx @@ -103,20 +103,21 @@ const NumberedList = (props) => { {contentElements.length ? contentElements.map((element, i) => { const { headlines: { basic: headlineText = "" } = {}, websites } = element; - const imageObj = getImageFromANS(element); - const imageProps = imageObj + const ansImage = getImageFromANS(element); + const imageProps = ansImage ? { - ansImage: imageObj, + ...(!showHeadline && element?.headlines?.basic !== "" + ? { alt: element?.headlines?.basic } + : {}), + ansImage, aspectRatio: "3:2", - resizedOptions: { - ...getFocalFromANS(imageObj), - }, + resizedOptions: getFocalFromANS(ansImage), responsiveImages: [137, 274, 548], width: 274, - } + } : { src: targetFallbackImage, - }; + }; if (!websites[arcSite]) { return null; @@ -144,7 +145,7 @@ const NumberedList = (props) => { ); - }) + }) : null} diff --git a/blocks/quilted-image-block/features/quilted-image/default.jsx b/blocks/quilted-image-block/features/quilted-image/default.jsx index 5316b9c4ce..cfc072de30 100644 --- a/blocks/quilted-image-block/features/quilted-image/default.jsx +++ b/blocks/quilted-image-block/features/quilted-image/default.jsx @@ -44,8 +44,8 @@ const ImageItem = ({ ? { source: "signing-service", query: { id: imageId }, - } - : {} + } + : {}, ); const imageAuthTokenObj = {}; @@ -56,23 +56,23 @@ const ImageItem = ({ const imageParams = imageId && imageURL ? { + alt: imageAlt, ansImage: { _id: imageId, - url: imageURL, auth: imageAuth ? JSON.parse(imageAuth) : imageAuthTokenObj, + url: imageURL, }, - alt: imageAlt, aspectRatio: ASPECT_RATIO_MAP[imageAspectRatio], resizedOptions: { smart: true, }, responsiveImages: [200, 400, 600, 800, 1000], width: 600, - } + } : { src: imageURL, alt: overlayText, - }; + }; if ((imageURL && itemAction && overlayText && buttonText) || isAdmin) { return ( diff --git a/blocks/results-list-block/features/results-list/results/result-item.jsx b/blocks/results-list-block/features/results-list/results/result-item.jsx index f31d6ac608..0dbdccdbe9 100644 --- a/blocks/results-list-block/features/results-list/results/result-item.jsx +++ b/blocks/results-list-block/features/results-list/results/result-item.jsx @@ -38,9 +38,9 @@ const ResultItem = React.memo( showHeadline, showImage, showItemOverline, - loading + loading, }, - ref + ref, ) => { const { description: { basic: descriptionText } = {}, @@ -77,7 +77,7 @@ const ResultItem = React.memo( } /* Author Formatting */ - const ansImage = getImageFromANS(element) + const ansImage = getImageFromANS(element); const hasAuthors = showByline ? credits?.by?.some((author) => author?.name !== "") : null; const contentHeading = showHeadline ? headlineText : null; const formattedDate = Date.parse(displayDate) @@ -86,13 +86,14 @@ const ResultItem = React.memo( const url = websites[arcSite].website_url; const imageParams = ansImage ? { + ...(!showHeadline && element?.headlines?.basic !== "" + ? { alt: element?.headlines?.basic } + : {}), ansImage, aspectRatio: imageRatio, loading, - resizedOptions: { - ...getFocalFromANS(ansImage), - }, - responsiveImages: [250, 500], + resizedOptions: getFocalFromANS(ansImage), + responsiveImages: [250, 500], sizes: [ { isDefault: true, @@ -104,11 +105,11 @@ const ResultItem = React.memo( }, ], width: 500, - } + } : { src: targetFallbackImage, - loading - }; + loading, + }; return showHeadline || showImage || showDescription || @@ -128,10 +129,7 @@ const ResultItem = React.memo( onClick={registerSuccessEvent} assistiveHidden > - {headlineText} + {headlineText} ) : null} @@ -172,8 +170,8 @@ const ResultItem = React.memo( ) : null}
) : null; - } - ) + }, + ), ); export default ResultItem; diff --git a/blocks/search-results-list-block/features/search-results-list/_children/search-result.jsx b/blocks/search-results-list-block/features/search-results-list/_children/search-result.jsx index 45e80d06d9..dff96dc5f7 100644 --- a/blocks/search-results-list-block/features/search-results-list/_children/search-result.jsx +++ b/blocks/search-results-list-block/features/search-results-list/_children/search-result.jsx @@ -58,11 +58,12 @@ const SearchResult = ({ arcSite, className, content, promoElements }) => { const imageParams = content && ansImage ? { + ...(!showHeadline && content?.headlines?.basic !== "" + ? { alt: content?.headlines?.basic } + : {}), ansImage, aspectRatio: imageRatio, - resizedOptions: { - ...getFocalFromANS(ansImage), - }, + resizedOptions: getFocalFromANS(ansImage), responsiveImages: [200, 400, 800], sizes: [ { @@ -75,10 +76,10 @@ const SearchResult = ({ arcSite, className, content, promoElements }) => { }, ], width: 500, - } + } : { src: fallbackImage, - }; + }; const displayDate = content?.display_date; const formattedDate = Date.parse(displayDate) diff --git a/blocks/simple-list-block/features/simple-list/default.jsx b/blocks/simple-list-block/features/simple-list/default.jsx index e84c3417e0..065e52e64b 100644 --- a/blocks/simple-list-block/features/simple-list/default.jsx +++ b/blocks/simple-list-block/features/simple-list/default.jsx @@ -133,25 +133,24 @@ const SimpleList = (props) => { {contentElements.map((element) => { const { headlines: { basic: headlineText = "" } = {}, websites } = element; - const image = getImageFromANS(element); - if (!websites[arcSite]) { return null; } const url = websites[arcSite].website_url; - const imageParams = image + + const ansImage = getImageFromANS(element); + const imageParams = ansImage ? { - ansImage: image, + ...(!showHeadline && headlineText !== "" ? { alt: headlineText } : {}), + ansImage, aspectRatio: "3:2", - resizedOptions: { - ...getFocalFromANS(image), - }, + resizedOptions: getFocalFromANS(ansImage), responsiveImages: [274, 548, 1096], width: 274, - } + } : { src: targetFallbackImage, - }; + }; return ( { const ImageDisplay = showImage ? ( @@ -57,13 +57,7 @@ const PromoImage = ({ ); }; -const PromoHeading = ({ - showHeadline, - headline, - linkURL, - newTab, - registerSuccessEvent -}) => +const PromoHeading = ({ showHeadline, headline, linkURL, newTab, registerSuccessEvent }) => showHeadline && headline ? ( {linkURL ? ( @@ -104,9 +98,9 @@ const SmallManualPromo = ({ customFields }) => { resizedImage || !imageURL ? {} : { - source: "signing-service", - query: { id: manualImageId || imageURL }, - } + source: "signing-service", + query: { id: manualImageId || imageURL }, + }, ); if (imageAuth && !resizedAuth) { resizedAuth = JSON.parse(imageAuth); @@ -123,26 +117,24 @@ const SmallManualPromo = ({ customFields }) => { _id: resizedImage ? imageId : manualImageId, url: imageURL, auth: resizedAuth, - focal_point: imageFocalPoint ? JSON.parse(imageFocalPoint) : undefined - } + focal_point: imageFocalPoint ? JSON.parse(imageFocalPoint) : undefined, + }; const alt = headline || null; const imageParams = imageURL && resizedAuth ? { - ansImage, - alt, - aspectRatio: imageRatio, - resizedOptions: { - ...getFocalFromANS(ansImage) - }, - responsiveImages: [200, 400, 600, 800, 1200], - width: 600, - } + alt, + ansImage, + aspectRatio: imageRatio, + resizedOptions: getFocalFromANS(ansImage), + responsiveImages: [200, 400, 600, 800, 1200], + width: 600, + } : { - src: fallbackImage, - alt, - }; + alt, + src: fallbackImage, + }; const containerClassNames = [ BLOCK_CLASS_NAME, diff --git a/blocks/small-promo-block/features/small-promo/default.jsx b/blocks/small-promo-block/features/small-promo/default.jsx index d5b4ac3693..7bc6e985dc 100644 --- a/blocks/small-promo-block/features/small-promo/default.jsx +++ b/blocks/small-promo-block/features/small-promo/default.jsx @@ -45,7 +45,7 @@ const SmallPromo = ({ customFields }) => { ? { feature: "small-promo", ...customFields.itemContentConfig.contentConfigValues, - } + } : null, // does not need embed_html because no video section // does not need website section nor label because no overline @@ -111,7 +111,7 @@ const SmallPromo = ({ customFields }) => { let resizedAuth = useContent( resizedImage || !imageOverrideURL ? {} - : { source: "signing-service", query: { id: manualImageId || imageOverrideURL } } + : { source: "signing-service", query: { id: manualImageId || imageOverrideURL } }, ); if (imageOverrideAuth && !resizedAuth) { resizedAuth = JSON.parse(imageOverrideAuth); @@ -131,50 +131,48 @@ const SmallPromo = ({ customFields }) => { const { fallbackImage } = getProperties(arcSite); const ansImage = getImageFromANS(content); - const imageParams = imageOverrideURL || ansImage - ? { - ansImage: imageOverrideURL - ? { - _id: resizedImage ? imageOverrideId : manualImageId, - url: imageOverrideURL, - auth: resizedAuth || {}, - } - : ansImage, - alt: content?.headlines?.basic || "", - aspectRatio: imageRatio, - resizedOptions: { - ...getFocalFromANS(ansImage), - }, - responsiveImages: [200, 400, 600, 800, 1200], - width: 600, - } - : { src: fallbackImage, }; + const imageParams = + imageOverrideURL || ansImage + ? { + alt: content?.headlines?.basic || "", + ansImage: imageOverrideURL + ? { + _id: resizedImage ? imageOverrideId : manualImageId, + url: imageOverrideURL, + auth: resizedAuth || {}, + } + : ansImage, + aspectRatio: imageRatio, + resizedOptions: getFocalFromANS(ansImage), + responsiveImages: [200, 400, 600, 800, 1200], + width: 600, + } + : { src: fallbackImage }; - const promoImage = showImage - ? ( - + - - - - - ) : null; + + + + ) : null; - const promoHeading = showHeadline && headline - ? ( + const promoHeading = + showHeadline && headline ? ( { {["below", "right"].includes(imagePosition) ? ( <> - { promoHeading } - { promoImage } + {promoHeading} + {promoImage} ) : ( <> - { promoImage } - { promoHeading } + {promoImage} + {promoHeading} )} diff --git a/blocks/top-table-list-block/features/top-table-list/_children/extra-large.jsx b/blocks/top-table-list-block/features/top-table-list/_children/extra-large.jsx index 7478111b6f..090ebc9506 100644 --- a/blocks/top-table-list-block/features/top-table-list/_children/extra-large.jsx +++ b/blocks/top-table-list-block/features/top-table-list/_children/extra-large.jsx @@ -93,18 +93,16 @@ const ExtraLarge = (props) => { const imageParams = element && ansImage ? { - ansImage, alt: element?.headlines?.basic || "", + ansImage, aspectRatio: imageRatioXL, - resizedOptions: { - ...getFocalFromANS(ansImage), - }, + resizedOptions: getFocalFromANS(ansImage), responsiveImages: [400, 600, 800, 1200], width: 800, - } + } : { src: fallbackImage, - }; + }; return hasOverline || contentHeading || diff --git a/blocks/top-table-list-block/features/top-table-list/_children/large.jsx b/blocks/top-table-list-block/features/top-table-list/_children/large.jsx index 27f6943e8f..810c587a81 100644 --- a/blocks/top-table-list-block/features/top-table-list/_children/large.jsx +++ b/blocks/top-table-list-block/features/top-table-list/_children/large.jsx @@ -27,7 +27,6 @@ import { Stack, usePhrases, Video, - } from "@wpmedia/arc-themes-components"; const BLOCK_CLASS_NAME = "b-top-table-list-large"; @@ -62,12 +61,9 @@ const Large = (props) => { }, } = getProperties(arcSite); - const displayDate = Date.parse(element?.display_date) ? localizeDateTime( - new Date(element?.display_date), - dateTimeFormat, - language, - timeZone - ) : ""; + const displayDate = Date.parse(element?.display_date) + ? localizeDateTime(new Date(element?.display_date), dateTimeFormat, language, timeZone) + : ""; const phrases = usePhrases(); const videoOrGalleryContent = @@ -118,18 +114,16 @@ const Large = (props) => { const imageParams = element && ansImage ? { - ansImage, alt: element?.headlines?.basic || "", + ansImage, aspectRatio: imageRatioLG, - resizedOptions: { - ...getFocalFromANS(ansImage), - }, + resizedOptions: getFocalFromANS(ansImage), responsiveImages: [400, 600, 800, 1200], width: 800, - } + } : { src: fallbackImage, - }; + }; return embedMarkup || contentOverline || diff --git a/blocks/top-table-list-block/features/top-table-list/_children/medium.jsx b/blocks/top-table-list-block/features/top-table-list/_children/medium.jsx index b0e3ed32fd..1269858c82 100644 --- a/blocks/top-table-list-block/features/top-table-list/_children/medium.jsx +++ b/blocks/top-table-list-block/features/top-table-list/_children/medium.jsx @@ -79,17 +79,16 @@ const Medium = (props) => { const imageParams = ANSImage ? { + alt: element?.headlines?.basic || "", ansImage: ANSImage, aspectRatio: imageRatioMD, - resizedOptions: { - ...getFocalFromANS(ANSImage), - }, + resizedOptions: getFocalFromANS(ANSImage), responsiveImages: [400, 600, 800, 1200], width: 800, - } + } : { src: fallbackImage, - }; + }; return showHeadlineMD || showImageMD || showDescriptionMD || showBylineMD || showDateMD ? ( diff --git a/blocks/top-table-list-block/features/top-table-list/_children/small.jsx b/blocks/top-table-list-block/features/top-table-list/_children/small.jsx index 9e288ea655..138cb5cf81 100644 --- a/blocks/top-table-list-block/features/top-table-list/_children/small.jsx +++ b/blocks/top-table-list-block/features/top-table-list/_children/small.jsx @@ -35,22 +35,21 @@ const Small = (props) => { const showBottomBorder = typeof showBottomBorderSM === "undefined" ? true : showBottomBorderSM; const linkURL = element?.websites?.[arcSite]?.website_url; - const ANSImage = getImageFromANS(element); + const ansImage = getImageFromANS(element); const headline = element?.headlines?.basic; - const imageParams = ANSImage + const imageParams = ansImage ? { - ansImage: ANSImage, + alt: element?.headlines?.basic || "", + ansImage, aspectRatio: imageRatioSM, - resizedOptions: { - ...getFocalFromANS(ANSImage), - }, + resizedOptions: getFocalFromANS(ansImage), responsiveImages: [400, 600, 800, 1200], width: 800, - } + } : { src: fallbackImage, - }; + }; const containerClassNames = [ BLOCK_CLASS_NAME, @@ -59,17 +58,16 @@ const Small = (props) => { .filter((classString) => classString) .join(" "); - const promoImage = showImageSM - ? ( - - - - - - ) : null; + const promoImage = showImageSM ? ( + + + + + + ) : null; - const promoHeading = showHeadlineSM && headline - ? ( + const promoHeading = + showHeadlineSM && headline ? ( {headline} @@ -82,13 +80,13 @@ const Small = (props) => { {["below", "right"].includes(imagePosition) ? ( <> - { promoHeading } - { promoImage } + {promoHeading} + {promoImage} ) : ( <> - { promoImage } - { promoHeading } + {promoImage} + {promoHeading} )} {showBottomBorder ? : null}