comparing 2.5.1 to 2.5.2 (DO NOT MERGE)

.github/workflows/stylelint-pr.yml

@@ -43,3 +43,4 @@ jobs:
           filter_mode: "diff_context"
           stylelint_config: ".stylelintrc.json"
           stylelint_input: "**/*.scss"
+          format: "json"

.prettierrc

@@ -1,5 +1,5 @@
 {
 	"useTabs": true,
 	"printWidth": 100,
-	experimentalTernaries: false,
-}
+	"experimentalTernaries": false
+}

blocks/extra-large-promo-block/features/extra-large-promo/default.jsx

@@ -39,9 +39,12 @@ const getType = (type, content) => (content?.type === type ? content : undefined
 
 export const ExtraLargePromoPresentation = ({
 	hasOverline,
+	editableOverline,
 	contentHeading,
+	editableHeading,
 	showImage,
 	contentDescription,
+	editableDescription,
 	hasDate,
 	shouldLazyLoad,
 	overlineUrl,
@@ -61,7 +64,11 @@ export const ExtraLargePromoPresentation = ({
 	hasOverline || contentHeading || showImage || contentDescription || contentAuthors || hasDate ? (
 		<LazyLoad enabled={shouldLazyLoad}>
 			<article className={BLOCK_CLASS_NAME}>
-				{hasOverline ? <Overline href={overlineUrl}>{overlineText}</Overline> : null}
+				{hasOverline ? (
+					<Overline href={overlineUrl} suppressContentEditableWarning {...editableOverline}>
+						{overlineText}
+					</Overline>
+				) : null}
 				{contentHeading ||
 				showImage ||
 				contentDescription ||
@@ -71,7 +78,7 @@ export const ExtraLargePromoPresentation = ({
 					<Stack>
 						{contentHeading ? (
 							<HeadingSection>
-								<Heading>
+								<Heading suppressContentEditableWarning {...editableHeading}>
 									<Conditional component={Link} condition={contentUrl} href={contentUrl}>
 										{contentHeading}
 									</Conditional>
@@ -112,7 +119,11 @@ export const ExtraLargePromoPresentation = ({
 								)}
 							</MediaItem>
 						) : null}
-						{contentDescription ? <Paragraph>{contentDescription}</Paragraph> : null}
+						{contentDescription ? (
+							<Paragraph suppressContentEditableWarning {...editableDescription}>
+								{contentDescription}
+							</Paragraph>
+						) : null}
 						{contentAuthors || hasDate ? (
 							<Attribution>
 								<Join separator={Separator}>
@@ -136,7 +147,7 @@ export const ExtraLargePromoPresentation = ({
 
 const ExtraLargePromo = ({ customFields }) => {
 	const { arcSite, isAdmin } = useFusionContext();
-	const { searchableField } = useEditableContent();
+	const { editableContent, searchableField } = useEditableContent();
 	const {
 		dateLocalization: { language, timeZone, dateTimeFormat } = {
 			language: "en",
@@ -290,17 +301,32 @@ const ExtraLargePromo = ({ customFields }) => {
 
 	// Default to websites object data
 	let [overlineText, overlineUrl] = [sectionText, sectionUrl];
+	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")
+			: {};
 	}
 
 	const hasOverline = showOverline && overlineText;
 	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 embedMarkup = playVideoInPlace && getVideoFromANS(content);
 	const contentAuthors =
@@ -351,9 +377,12 @@ const ExtraLargePromo = ({ customFields }) => {
 	return (
 		<ExtraLargePromoPresentation
 			hasOverline={hasOverline}
+			editableOverline={editableOverline}
 			contentHeading={contentHeading}
+			editableHeading={editableHeading}
 			showImage={showImage}
 			contentDescription={contentDescription}
+			editableDescription={editableDescription}
 			hasDate={hasDate}
 			shouldLazyLoad={shouldLazyLoad}
 			overlineUrl={overlineUrl}

blocks/extra-large-promo-block/features/extra-large-promo/default.test.jsx

@@ -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";
 
@@ -27,30 +28,71 @@ describe("the extra large promo feature", () => {
 		const config = {
 			lazyLoad: true,
 		};
-		const { container } = render(<ExtraLargePromo customFields={config} />);
-		expect(container.firstChild).toBe(null);
+		render(<ExtraLargePromo customFields={config} />);
+		expect(screen.queryByTestId("extra-large-promo")).toBeNull();
 	});
 
 	it("should return null if no show flag is true", () => {
 		const config = {};
-		const { container } = render(<ExtraLargePromo customFields={config} />);
-		expect(container.firstChild).toBeNull();
+		render(<ExtraLargePromo customFields={config} />);
+		expect(screen.queryByTestId("extra-large-promo")).toBeNull();
 	});
 
 	it("should return an overline if showOverline is true", () => {
 		const config = {
 			showOverline: true,
 		};
 		render(<ExtraLargePromo customFields={config} />);
-		expect(screen.queryByRole("link", { name: "Premium" })).not.toBeNull();
+		expect(screen.getByRole("link", { name: "Premium" })).not.toBeNull();
+	});
+
+	it("should overline text be an editable field", () => {
+		const arcSite = "dagen"; // using default website
+
+		const config = {
+			showOverline: true,
+		};
+		render(<ExtraLargePromo customFields={config} />);
+
+		let overline = mockData?.websites[arcSite]?.website_section?.name;
+
+		if (mockData.owner?.sponsored) {
+			overline = mockData.label.basic.text;
+		} else if (mockData?.label?.basic?.display) {
+			overline = mockData?.label?.basic?.text;
+		}
+
+		if (overline) {
+			expect(screen.getByText(overline)).toHaveAttribute("contenteditable", "true");
+		}
 	});
 
 	it("should return a headline if showHeadline is true", () => {
 		const config = {
 			showHeadline: true,
 		};
 		render(<ExtraLargePromo customFields={config} />);
-		expect(screen.queryByRole("heading", { name: config.headline })).not.toBeNull();
+		expect(screen.getByRole("heading", { name: config.headline })).not.toBeNull();
+	});
+
+	it("should headline be an editable field", () => {
+		const config = {
+			showHeadline: true,
+		};
+		render(<ExtraLargePromo customFields={config} />);
+
+		expect(screen.getByRole("heading", { name: mockData.headlines.basic })).toHaveAttribute(
+			"contenteditable",
+		);
+	});
+
+	it("should description be an editable field", () => {
+		const config = {
+			showDescription: true,
+		};
+		render(<ExtraLargePromo customFields={config} />);
+
+		expect(screen.getByText(mockData.description.basic)).toHaveAttribute("contenteditable");
 	});
 
 	it("should return a image if showImage is true", () => {
@@ -65,7 +107,7 @@ describe("the extra large promo feature", () => {
 			}),
 		};
 		render(<ExtraLargePromo customFields={config} />);
-		expect(screen.queryByRole("img", { name: config.headline })).not.toBeNull();
+		expect(screen.getByRole("img", { name: config.headline })).not.toBeNull();
 	});
 
 	it("should return a fallback image if showImage is true and imageUrl is not valid", () => {
@@ -74,7 +116,7 @@ describe("the extra large promo feature", () => {
 			showImage: true,
 		};
 		render(<ExtraLargePromo 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", () => {
@@ -125,26 +167,28 @@ describe("the extra large promo feature", () => {
 		};
 		render(<ExtraLargePromo 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 return a byline if showByline is true", () => {
 		const config = {
 			showByline: true,
 		};
-		const { getByText } = render(<ExtraLargePromo customFields={config} />);
+		render(<ExtraLargePromo customFields={config} />);
 		expect(
-			getByText("global.by-text Example Author1, Example Author2, global.and-text Example Author3"),
-		).not.toBeNull();
+			screen.getByText(
+				"global.by-text Example Author1, Example Author2, global.and-text Example Author3",
+			),
+		).toBeInTheDocument();
 	});
 
 	it("should return a byline if showDate is true", () => {
 		const config = {
 			showDate: true,
 		};
 		render(<ExtraLargePromo customFields={config} />);
-		expect(screen.queryByText("January 30, 2020", { exact: false })).not.toBeNull();
+		expect(screen.getByText("January 30, 2020", { exact: false })).not.toBeNull();
 	});
 
 	it("should returned a sponsored overline if it's sponsored content", () => {
@@ -153,7 +197,7 @@ describe("the extra large promo feature", () => {
 			showOverline: true,
 		};
 		render(<ExtraLargePromo customFields={config} />);
-		expect(screen.queryByText("Sponsored")).not.toBeNull();
+		expect(screen.getByText("Sponsored")).not.toBeNull();
 	});
 
 	it("should return a video if playVideoInPlace is true and video content available", () => {
@@ -163,6 +207,6 @@ describe("the extra large promo feature", () => {
 			showImage: true,
 		};
 		render(<ExtraLargePromo customFields={config} />);
-		expect(screen.queryByText("video embed")).not.toBeNull();
+		expect(screen.getByText("video embed")).not.toBeNull();
 	});
 });

blocks/gallery-block/README.md

@@ -15,9 +15,9 @@ The Gallery block shows a carousel with images and captions. It is used to displ
 
 This is set in the `blocks.json`.
 
-| **Prop**              | **Required** | **Type** | **Description**                                                                                                                     |
-| --------------------- | ------------ | -------- | ----------------------------------------------------------------------------------------------------------------------------------- |
-| **galleryCubeClicks** | no           | integer  | If present sets the interval at which ads will be shown between gallery images. The click count do not take into account direction. |
+| **Prop**              | **Required** | **Type** | **Description**                                                                                                                       |
+| --------------------- | ------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| **galleryCubeClicks** | no           | integer  | If present sets the interval at which ads will be shown between gallery images. The click count does not take into account direction. |
 
 ## ANS Schema
 

blocks/gallery-block/themes/news.json

@@ -48,7 +48,7 @@
 				"overflow": "auto",
 				"components": {
 					"image": {
-						"block-size": "auto",
+						"block-size": "100%",
 						"max-block-size": "100%",
 						"max-inline-size": "100%",
 						"object-fit": "contain"

blocks/identity-block/components/form-password-confirm/index.jsx

@@ -19,6 +19,12 @@ const FormPasswordConfirm = ({
 }) => {
 	const [password, setPassword] = useState("");
 
+	const escapeForHtmlPattern = (value) =>{
+		const specialChars = /[.*+?^${}()|[\]\\]/g;
+		const newValue = value.replace(specialChars, '\\$&');
+		return newValue;
+	};
+
 	const fieldParameters = {
 		...(autoComplete ? { autoComplete } : {}),
 		...(placeholder ? { placeholder } : {}),
@@ -55,7 +61,7 @@ const FormPasswordConfirm = ({
 				name={`${name}-confirmation`}
 				required
 				type="password"
-				validationPattern={`^${password}$`}
+				validationPattern={escapeForHtmlPattern(password)}
 				className={className}
 			/>
 		</>

blocks/identity-block/components/social-sign-on/_children/AppleSignIn.jsx

@@ -9,7 +9,7 @@ function AppleSignIn({ customButtons, socialSignOnIn, className, oidcClients = [
 	const phrases = usePhrases();
 	const { Identity } = useIdentity();
 
-	const appleOIDCClient = oidcClients.find((oidcClient) => {
+	const appleOIDCClient = oidcClients && oidcClients.find((oidcClient) => {
 		const parsedClientId = oidcClient.clientId.split(';')[0];
 
 		return oidcClient.protocol === 'Apple' && parsedClientId === appleClientId;

blocks/identity-block/utils/validate-password-pattern.js

@@ -1,4 +1,9 @@
-const SPECIAL_CHARACTERS_ALLOWED = "@$!%*?&";
+const SPECIAL_CHARACTERS_ALLOWED =
+	".@$!%*+?&#<=>^:;,-" + 
+	"\\/\\(\\)\\{\\}\\[\\]\\|\\`\\\\" + 
+	"~_" + 
+	'"' + 
+	"'";
 
 // positive lookahead (?= )
 // with a non-capturing group within (?: )
@@ -12,7 +17,7 @@ const validatePasswordPattern = (
 	pwMinLength,
 	pwPwNumbers,
 	pwSpecialCharacters,
-	pwUppercase
+	pwUppercase,
 ) =>
 	`(?=(?:.*[a-z]){${pwLowercase},})(?=(?:.*[A-Z]){${pwUppercase},})(?=(?:.*\\d){${pwPwNumbers},})(?=(?:.*[${SPECIAL_CHARACTERS_ALLOWED}]){${pwSpecialCharacters},}).{${pwMinLength},}`;
 

blocks/identity-block/utils/validate-password-pattern.test.js

@@ -111,8 +111,9 @@ describe("Validate Password", () => {
 	it("Takes matching special characters", () => {
 		const pattern = new RegExp(validatePasswordPattern(0, 1, 0, 7, 0));
 
-		expect(pattern.test("@$!%*?&")).toBe(true);
-		expect(pattern.test("---------")).toBe(false);
-		expect(pattern.test("^^^^^^^^^^^^^^^^^^^^^^^")).toBe(false);
+		expect(pattern.test("@$!%*?&")).toBe(true); 
+		expect(pattern.test("---")).toBe(false);
+		expect(pattern.test("---------")).toBe(true);
+		expect(pattern.test("^^^^^^^^^^^^^^^^^^^^^^^")).toBe(true);
 	});
 });