Skip to content

Commit

Permalink
Merge branch 'arc-themes-release-version-2.5.2' into THEMES-2015
Browse files Browse the repository at this point in the history
  • Loading branch information
@blakeganderson
blakeganderson authored Nov 1, 2024
2 parents 0b11a0e + 026e20b commit fc23847
Show file tree
Hide file tree
Showing 6 changed files with 121 additions and 53 deletions.
4 changes: 2 additions & 2 deletions .prettierrc
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"useTabs": true,
"printWidth": 100,
experimentalTernaries: false,
}
"experimentalTernaries": false
}
35 changes: 33 additions & 2 deletions blocks/large-promo-block/features/large-promo/default.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,8 @@ export const LargePromoPresentation = ({
contentUrl,
displayDate,
editableDescription,
editableHeading,
editableOverline,
embedMarkup,
labelIconName,
labelIconText,
Expand Down Expand Up @@ -111,12 +113,18 @@ export const LargePromoPresentation = ({
contentDate ? (
<Stack className={`${BLOCK_CLASS_NAME}__text`}>
{contentOverline ? (
<Overline href={contentOverlineURL}>{contentOverline}</Overline>
<Overline
href={contentOverlineURL}
{...editableOverline}
suppressContentEditableWarning
>
{contentOverline}
</Overline>
) : null}
{contentHeading || contentDescription || contentAuthors || contentDate ? (
<Stack>
{contentHeading ? (
<Heading>
<Heading {...editableHeading} suppressContentEditableWarning>
<Conditional
component={Link}
condition={contentUrl}
Expand Down Expand Up @@ -298,6 +306,8 @@ const LargePromoItem = ({ customFields, arcSite }) => {
: "";
const phrases = usePhrases();

const editableHeading = content?.headlines ? editableContent(content, "headlines.basic") : {};

const editableDescription = content?.description
? editableContent(content, "description.basic")
: {};
Expand Down Expand Up @@ -328,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;
Expand Down Expand Up @@ -380,6 +409,8 @@ const LargePromoItem = ({ customFields, arcSite }) => {
contentUrl={contentUrl}
displayDate={displayDate}
editableDescription={editableDescription}
editableHeading={editableHeading}
editableOverline={editableOverline}
embedMarkup={embedMarkup}
labelIconName={labelIconName}
labelIconText={labelIconText}
Expand Down
63 changes: 32 additions & 31 deletions blocks/large-promo-block/features/large-promo/default.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ describe("Large Promo", () => {
};
isServerSide.mockReturnValue(true);
const { container } = render(<LargePromo customFields={updatedConfig} />);
expect(container.firstChild).toBe(null);
expect(container.innerHTML).toBe('');
});

it("should render complete promo", () => {
Expand All @@ -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", () => {
Expand All @@ -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", () => {
Expand All @@ -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", () => {
Expand Down Expand Up @@ -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", () => {
Expand All @@ -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", () => {
Expand All @@ -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", () => {
Expand All @@ -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', () => {
Expand Down Expand Up @@ -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(
<LargePromo
customFields={{
showImage: true,
Expand All @@ -384,7 +384,8 @@ describe("Large Promo", () => {
}}
/>,
);
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", () => {
Expand Down
16 changes: 13 additions & 3 deletions blocks/medium-promo-block/features/medium-promo/default.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ const BLOCK_CLASS_NAME = "b-medium-promo";
const MediumPromo = ({ customFields }) => {
const { registerSuccessEvent } = useComponentContext();
const { arcSite, isAdmin } = useFusionContext();
const { searchableField } = useEditableContent();
const { editableContent, searchableField } = useEditableContent();
const {
dateLocalization: { language, timeZone, dateTimeFormat } = {
language: "en",
Expand Down Expand Up @@ -163,7 +163,13 @@ const MediumPromo = ({ customFields }) => {

const hasAuthors = showByline ? content?.credits?.by && content?.credits?.by?.length : null;
const contentDescription = showDescription ? content?.description?.basic : null;
const editableDescription = content?.description
? editableContent(content, "description.basic")
: {};
const contentHeading = showHeadline ? content?.headlines?.basic : null;
const editableHeading = content?.headlines?.basic
? editableContent(content, "headlines.basic")
: {};
const contentUrl = content?.websites?.[arcSite]?.website_url;

const contentDate = content?.display_date;
Expand Down Expand Up @@ -237,7 +243,7 @@ const MediumPromo = ({ customFields }) => {
) : null}

{contentHeading ? (
<Heading>
<Heading suppressContentEditableWarning {...editableHeading}>
<Conditional
component={Link}
condition={contentUrl}
Expand All @@ -249,7 +255,11 @@ const MediumPromo = ({ customFields }) => {
</Heading>
) : null}

{showDescription ? <Paragraph>{contentDescription}</Paragraph> : null}
{showDescription ? (
<Paragraph suppressContentEditableWarning {...editableDescription}>
{contentDescription}
</Paragraph>
) : null}
{hasAuthors || showDate ? (
<Attribution>
<Join separator={Separator}>
Expand Down
49 changes: 36 additions & 13 deletions blocks/medium-promo-block/features/medium-promo/default.test.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from "react";
import "@testing-library/jest-dom";
import { render, screen } from "@testing-library/react";
import { useContent } from "fusion:content";

Expand Down Expand Up @@ -27,18 +28,18 @@ describe("the medium promo feature", () => {
jest.clearAllMocks();
});

it("should return null if lazyLoad on the server and not in the admin", () => {
it("should not render if lazyLoad on the server and not in the admin", () => {
const config = {
lazyLoad: true,
};
const { container } = render(<MediumPromo customFields={config} />);
expect(container.firstChild).toBe(null);
render(<MediumPromo customFields={config} />);
expect(screen.queryByRole("article")).not.toBeInTheDocument();
});

it("should return null if none of the show... flags are true", () => {
it("should not render if none of the show... flags are true", () => {
const config = {};
const { container } = render(<MediumPromo customFields={config} />);
expect(container.firstChild).toBeNull();
render(<MediumPromo customFields={config} />);
expect(screen.queryByRole("article")).not.toBeInTheDocument();
});

it("should display a headline if showHeadline is true", () => {
Expand All @@ -47,7 +48,27 @@ describe("the medium promo feature", () => {
};
render(<MediumPromo customFields={config} />);

expect(screen.queryByRole("heading", { name: config.headline })).not.toBeNull();
expect(screen.getByRole("heading", { name: mockData.headlines.basic })).not.toBeNull();
});

it("should headline be an editable field", () => {
const config = {
showHeadline: true,
};
render(<MediumPromo customFields={config} />);

expect(screen.queryByRole("heading", { name: mockData.headlines.basic })).toHaveAttribute(
"contenteditable",
);
});

it("should description be an editable field", () => {
const config = {
showDescription: true,
};
render(<MediumPromo customFields={config} />);

expect(screen.queryByText(mockData.description.basic)).toHaveAttribute("contenteditable");
});

it("should display an image if showImage is true", () => {
Expand All @@ -57,7 +78,7 @@ describe("the medium promo feature", () => {
showImage: true,
};
render(<MediumPromo customFields={config} />);
expect(screen.queryByRole("img", { name: config.headline })).not.toBeNull();
expect(screen.getByRole("img", { name: config.headline })).not.toBeNull();
});

it("should make a blank call to the signing-service if the image is from PhotoCenter and has an Auth value", () => {
Expand Down Expand Up @@ -108,7 +129,7 @@ describe("the medium promo feature", () => {
showImage: true,
};
render(<MediumPromo customFields={config} />);
expect(screen.queryByRole("img", { name: config.headline })).not.toBeNull();
expect(screen.getByRole("img", { name: config.headline })).not.toBeNull();
});

it("should display a description if showDescription is true", () => {
Expand All @@ -117,17 +138,19 @@ describe("the medium promo feature", () => {
};
render(<MediumPromo customFields={config} />);
expect(
screen.queryByText("Why does August seem hotter? Maybe it comes from weariness."),
screen.getByText("Why does August seem hotter? Maybe it comes from weariness."),
).not.toBeNull();
});

it("should display a byline if showByline is true", () => {
const config = {
showByline: true,
};
const { getByText } = render(<MediumPromo customFields={config} />);
render(<MediumPromo customFields={config} />);
expect(
getByText("global.by-text Example Author1, Example Author2, global.and-text Example Author3"),
screen.getByText(
"global.by-text Example Author1, Example Author2, global.and-text Example Author3",
),
).not.toBeNull();
});

Expand All @@ -136,6 +159,6 @@ describe("the medium promo feature", () => {
showDate: true,
};
render(<MediumPromo customFields={config} />);
expect(screen.queryByText("January 30, 2020", { exact: false })).not.toBeNull();
expect(screen.getByText("January 30, 2020", { exact: false })).not.toBeNull();
});
});
Loading

0 comments on commit fc23847

Please sign in to comment.