From f519dd70cbb115f97f2523d6d4e5a11b0c1c27ec Mon Sep 17 00:00:00 2001 From: Malavika Koppula Date: Fri, 23 Aug 2024 13:43:23 -0400 Subject: [PATCH 1/5] Added editableContent to heading --- blocks/large-promo-block/features/large-promo/default.jsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/blocks/large-promo-block/features/large-promo/default.jsx b/blocks/large-promo-block/features/large-promo/default.jsx index 45b716349..b3d0506d4 100644 --- a/blocks/large-promo-block/features/large-promo/default.jsx +++ b/blocks/large-promo-block/features/large-promo/default.jsx @@ -49,6 +49,7 @@ export const LargePromoPresentation = ({ contentUrl, displayDate, editableDescription, + editableHeading, embedMarkup, labelIconName, labelIconText, @@ -116,7 +117,7 @@ export const LargePromoPresentation = ({ {contentHeading || contentDescription || contentAuthors || contentDate ? ( {contentHeading ? ( - + { } const { editableContent, searchableField } = useEditableContent(); + const editable = true; const { registerSuccessEvent } = useComponentContext(); const { dateLocalization: { language, timeZone, dateTimeFormat } = { @@ -298,6 +300,9 @@ const LargePromoItem = ({ customFields, arcSite }) => { : ""; const phrases = usePhrases(); + const editableHeading = + content?.headlines && editable ? editableContent(content, "headlines.basic") : {}; + const editableDescription = content?.description ? editableContent(content, "description.basic") : {}; @@ -380,6 +385,7 @@ const LargePromoItem = ({ customFields, arcSite }) => { contentUrl={contentUrl} displayDate={displayDate} editableDescription={editableDescription} + editableHeading={editableHeading} embedMarkup={embedMarkup} labelIconName={labelIconName} labelIconText={labelIconText} From 24f17d32b9f20a0bade582a38125463bc7df2c55 Mon Sep 17 00:00:00 2001 From: Malavika Koppula Date: Mon, 26 Aug 2024 19:52:57 -0400 Subject: [PATCH 2/5] Fixed tests --- .../features/large-promo/default.test.jsx | 63 ++++++++++--------- 1 file changed, 32 insertions(+), 31 deletions(-) diff --git a/blocks/large-promo-block/features/large-promo/default.test.jsx b/blocks/large-promo-block/features/large-promo/default.test.jsx index 5d9dbc67f..95558c7bc 100644 --- a/blocks/large-promo-block/features/large-promo/default.test.jsx +++ b/blocks/large-promo-block/features/large-promo/default.test.jsx @@ -112,7 +112,7 @@ describe("Large Promo", () => { }; isServerSide.mockReturnValue(true); const { container } = render(); - expect(container.firstChild).toBe(null); + expect(container.innerHTML).toBe(''); }); it("should render complete promo", () => { @@ -130,11 +130,11 @@ describe("Large Promo", () => { />, ); - expect(screen.queryByText(largePromoMock.label.basic.text)).not.toBeNull(); - expect(screen.queryByText(largePromoMock.headlines.basic)).not.toBeNull(); - expect(screen.queryByText(largePromoMock.description.basic)).not.toBeNull(); - expect(screen.queryByText("December 02, 2019 at 6:58PM UTC")).not.toBeNull(); - expect(screen.queryByRole("img")).not.toBeNull(); + expect(screen.getByText(largePromoMock.label.basic.text)).not.toBeNull(); + expect(screen.getByText(largePromoMock.headlines.basic)).not.toBeNull(); + expect(screen.getByText(largePromoMock.description.basic)).not.toBeNull(); + expect(screen.getByText("December 02, 2019 at 6:58PM UTC")).not.toBeNull(); + expect(screen.getByAltText("Baby panda born at the zoo")).not.toBeNull(); }); it("should not render overline", () => { @@ -152,10 +152,10 @@ describe("Large Promo", () => { />, ); expect(screen.queryByText(largePromoMock.label.basic.text)).toBeNull(); - expect(screen.queryByText(largePromoMock.headlines.basic)).not.toBeNull(); - expect(screen.queryByText(largePromoMock.description.basic)).not.toBeNull(); - expect(screen.queryByText("December 02, 2019 at 6:58PM UTC")).not.toBeNull(); - expect(screen.queryByRole("img")).not.toBeNull(); + expect(screen.getByText(largePromoMock.headlines.basic)).not.toBeNull(); + expect(screen.getByText(largePromoMock.description.basic)).not.toBeNull(); + expect(screen.getByText("December 02, 2019 at 6:58PM UTC")).not.toBeNull(); + expect(screen.getByRole("img")).not.toBeNull(); }); it("should not render date when disabled", () => { @@ -173,10 +173,10 @@ describe("Large Promo", () => { />, ); expect(screen.queryByText(largePromoMock.label.basic.text)).toBeNull(); - expect(screen.queryByText(largePromoMock.headlines.basic)).not.toBeNull(); - expect(screen.queryByText(largePromoMock.description.basic)).not.toBeNull(); + expect(screen.getByText(largePromoMock.headlines.basic)).not.toBeNull(); + expect(screen.getByText(largePromoMock.description.basic)).not.toBeNull(); expect(screen.queryByText("December 02, 2019 at 6:58PM UTC")).toBeNull(); - expect(screen.queryByRole("img")).not.toBeNull(); + expect(screen.getByRole("img")).not.toBeNull(); }); it("should not render date when null", () => { @@ -218,11 +218,11 @@ describe("Large Promo", () => { }} />, ); - expect(screen.queryByText(largePromoMock.label.basic.text)).not.toBeNull(); - expect(screen.queryByText(largePromoMock.headlines.basic)).not.toBeNull(); - expect(screen.queryByText(largePromoMock.description.basic)).not.toBeNull(); - expect(screen.queryByText("December 02, 2019 at 6:58PM UTC")).not.toBeNull(); - expect(screen.queryByRole("img")).not.toBeNull(); + expect(screen.getByText(largePromoMock.label.basic.text)).not.toBeNull(); + expect(screen.getByText(largePromoMock.headlines.basic)).not.toBeNull(); + expect(screen.getByText(largePromoMock.description.basic)).not.toBeNull(); + expect(screen.getByText("December 02, 2019 at 6:58PM UTC")).not.toBeNull(); + expect(screen.getByRole("img")).not.toBeNull(); }); it("should not render headline", () => { @@ -239,11 +239,11 @@ describe("Large Promo", () => { }} />, ); - expect(screen.queryByText(largePromoMock.label.basic.text)).not.toBeNull(); + expect(screen.getByText(largePromoMock.label.basic.text)).not.toBeNull(); expect(screen.queryByText(largePromoMock.headlines.basic)).toBeNull(); - expect(screen.queryByText(largePromoMock.description.basic)).not.toBeNull(); - expect(screen.queryByText("December 02, 2019 at 6:58PM UTC")).not.toBeNull(); - expect(screen.queryByRole("img")).not.toBeNull(); + expect(screen.getByText(largePromoMock.description.basic)).not.toBeNull(); + expect(screen.getByText("December 02, 2019 at 6:58PM UTC")).not.toBeNull(); + expect(screen.getByRole("img")).not.toBeNull(); }); it("should not render description", () => { @@ -260,11 +260,11 @@ describe("Large Promo", () => { }} />, ); - expect(screen.queryByText(largePromoMock.label.basic.text)).not.toBeNull(); - expect(screen.queryByText(largePromoMock.headlines.basic)).not.toBeNull(); + expect(screen.getByText(largePromoMock.label.basic.text)).not.toBeNull(); + expect(screen.getByText(largePromoMock.headlines.basic)).not.toBeNull(); expect(screen.queryByText(largePromoMock.description.basic)).toBeNull(); - expect(screen.queryByText("December 02, 2019 at 6:58PM UTC")).not.toBeNull(); - expect(screen.queryByRole("img")).not.toBeNull(); + expect(screen.getByText("December 02, 2019 at 6:58PM UTC")).not.toBeNull(); + expect(screen.getByRole("img")).not.toBeNull(); }); it("should only render Image", () => { @@ -281,7 +281,7 @@ describe("Large Promo", () => { expect(screen.queryByText(largePromoMock.headlines.basic)).toBeNull(); expect(screen.queryByText(largePromoMock.description.basic)).toBeNull(); expect(screen.queryByText("December 02, 2019 at 6:58PM UTC")).toBeNull(); - expect(screen.queryByRole("img")).not.toBeNull(); + expect(screen.getByRole("img")).not.toBeNull(); }); it('should not render Image if "showImage" is false', () => { @@ -366,15 +366,15 @@ describe("Large Promo", () => { />, ); expect(screen.queryByText(largePromoMock.label.basic.text)).toBeNull(); - expect(screen.queryByText("global.sponsored-content")).not.toBeNull(); - expect(screen.queryByText(largePromoMock.headlines.basic)).not.toBeNull(); + expect(screen.getByText("global.sponsored-content")).not.toBeNull(); + expect(screen.getByText(largePromoMock.headlines.basic)).not.toBeNull(); expect(screen.queryByText(largePromoMock.description.basic)).toBeNull(); }); it("should render image icon label", () => { useContent.mockReturnValueOnce(largePromoMock); - const { container } = render( + render( { }} />, ); - expect(container.querySelector(".b-large-promo__icon_label")).not.toBeNull(); + const img = screen.getByAltText("Baby panda born at the zoo"); + expect(img).not.toBeNull(); }); // it("should render video player media when 'playVideoInPlace' prop is passed", () => { From bc0e2a4236b3743f71ac35de9ad5a2b698d61de3 Mon Sep 17 00:00:00 2001 From: Malavika Koppula Date: Fri, 13 Sep 2024 16:34:22 -0400 Subject: [PATCH 3/5] Removed editable --- blocks/large-promo-block/features/large-promo/default.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/blocks/large-promo-block/features/large-promo/default.jsx b/blocks/large-promo-block/features/large-promo/default.jsx index b3d0506d4..3313cfa9e 100644 --- a/blocks/large-promo-block/features/large-promo/default.jsx +++ b/blocks/large-promo-block/features/large-promo/default.jsx @@ -283,7 +283,6 @@ const LargePromoItem = ({ customFields, arcSite }) => { } const { editableContent, searchableField } = useEditableContent(); - const editable = true; const { registerSuccessEvent } = useComponentContext(); const { dateLocalization: { language, timeZone, dateTimeFormat } = { @@ -301,7 +300,7 @@ const LargePromoItem = ({ customFields, arcSite }) => { const phrases = usePhrases(); const editableHeading = - content?.headlines && editable ? editableContent(content, "headlines.basic") : {}; + content?.headlines ? editableContent(content, "headlines.basic") : {}; const editableDescription = content?.description ? editableContent(content, "description.basic") From a706a512ea86aefb350433b01b6df44a7d0ef245 Mon Sep 17 00:00:00 2001 From: Malavika Koppula Date: Wed, 18 Sep 2024 11:44:29 -0400 Subject: [PATCH 4/5] Added editingContent to overline --- blocks/large-promo-block/features/large-promo/default.jsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/blocks/large-promo-block/features/large-promo/default.jsx b/blocks/large-promo-block/features/large-promo/default.jsx index 3313cfa9e..d9bad35fc 100644 --- a/blocks/large-promo-block/features/large-promo/default.jsx +++ b/blocks/large-promo-block/features/large-promo/default.jsx @@ -50,6 +50,7 @@ export const LargePromoPresentation = ({ displayDate, editableDescription, editableHeading, + editableOverline, embedMarkup, labelIconName, labelIconText, @@ -112,7 +113,7 @@ export const LargePromoPresentation = ({ contentDate ? ( {contentOverline ? ( - {contentOverline} + {contentOverline} ) : null} {contentHeading || contentDescription || contentAuthors || contentDate ? ( @@ -299,6 +300,9 @@ const LargePromoItem = ({ customFields, arcSite }) => { : ""; const phrases = usePhrases(); + const editableOverline = + content?.label?.basic?.text ? editableContent(content, "label.basic.text") : {}; + const editableHeading = content?.headlines ? editableContent(content, "headlines.basic") : {}; @@ -385,6 +389,7 @@ const LargePromoItem = ({ customFields, arcSite }) => { displayDate={displayDate} editableDescription={editableDescription} editableHeading={editableHeading} + editableOverline={editableOverline} embedMarkup={embedMarkup} labelIconName={labelIconName} labelIconText={labelIconText} From cbd8b64fa30eb826afb03910bf4ca418674ab874 Mon Sep 17 00:00:00 2001 From: Blake Anderson Date: Fri, 1 Nov 2024 16:09:17 -0400 Subject: [PATCH 5/5] updated overline --- .../features/large-promo/default.jsx | 33 +++++++++++++++---- 1 file changed, 27 insertions(+), 6 deletions(-) diff --git a/blocks/large-promo-block/features/large-promo/default.jsx b/blocks/large-promo-block/features/large-promo/default.jsx index d9bad35fc..6e28a563f 100644 --- a/blocks/large-promo-block/features/large-promo/default.jsx +++ b/blocks/large-promo-block/features/large-promo/default.jsx @@ -113,7 +113,13 @@ export const LargePromoPresentation = ({ contentDate ? ( {contentOverline ? ( - {contentOverline} + + {contentOverline} + ) : null} {contentHeading || contentDescription || contentAuthors || contentDate ? ( @@ -300,11 +306,7 @@ const LargePromoItem = ({ customFields, arcSite }) => { : ""; const phrases = usePhrases(); - const editableOverline = - content?.label?.basic?.text ? editableContent(content, "label.basic.text") : {}; - - const editableHeading = - content?.headlines ? editableContent(content, "headlines.basic") : {}; + const editableHeading = content?.headlines ? editableContent(content, "headlines.basic") : {}; const editableDescription = content?.description ? editableContent(content, "description.basic") @@ -336,6 +338,25 @@ const LargePromoItem = ({ customFields, arcSite }) => { content?.websites?.[arcSite]?.website_section || {}; let [overlineText, overlineURL] = [sectionText, sectionUrl]; + const shouldUseLabel = !!labelDisplay; + + let editableOverline = content?.websites?.[arcSite]?.website_section?.name + ? editableContent(content, `websites.${[arcSite]}.website_section.name`) + : {}; + + if (content?.owner?.sponsored) { + overlineText = content?.label?.basic?.text || phrases.t("global.sponsored-content"); + overlineURL = null; + editableOverline = content?.label?.basic?.text + ? editableContent(content, "label.basic.text") + : {}; + } else if (shouldUseLabel) { + [overlineText, overlineURL] = [labelText, labelUrl]; + editableOverline = content?.label?.basic?.text + ? editableContent(content, "label.basic.text") + : {}; + } + if (content?.owner?.sponsored) { overlineText = content?.label?.basic?.text || phrases.t("global.sponsored-content"); overlineURL = null;