[Themes 1211] Logical properties on manual-promo blocks (#1834)

* added story with RTL * Added story of RTL * Implemented logical properties * Implemented logical properties * replaced below and right with logical properties --------- Co-authored-by: Malavika Koppula <[email protected]>
WPMedia · Dec 11, 2023 · a020553 · a020553
1 parent fdcb11f
commit a020553
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 29 deletions.
diff --git a/.storybook/themes/news.scss b/.storybook/themes/news.scss
@@ -1856,7 +1856,7 @@
 				"medium-manual-promo": (
 					"clear": both,
 					"display": table,
-					"width": 100%,
+					"inline-size": 100%,
 					"components": (
 						"attribution": (
 							"color": var(--text-color),
@@ -1868,14 +1868,14 @@
 							"font-size": var(--heading-level-5-font-size),
 							"font-weight": var(--heading-level-5-font-weight),
 							"line-height": var(--heading-level-5-line-height),
-							"margin-bottom": var(--global-spacing-4)
+							"margin-block-end": var(--global-spacing-4)
 						),
 						"link-hover": (
 							"color": var(--text-color-subtle)
 						),
 						"media-item": (
-							"float": right,
-							"max-width": 100px
+							"float": inline-end,
+							"max-inline-size": 100px
 						),
 						"paragraph": (
 							"display": inline,
@@ -1894,7 +1894,7 @@
 				"medium-manual-promo-show-image": (
 					"components": (
 						"heading": (
-							"width": 68%
+							"inline-size": 68%
 						)
 					)
 				),
@@ -3692,9 +3692,12 @@
 				"medium-manual-promo": (
 					"components": (
 						"media-item": (
-							"float": left,
-							"margin": 0,
-							"max-width": 33%
+							"float": inline-start,
+							"margin-block-end": 0,
+							"margin-block-start": 0,
+							"margin-inline-end": 0,
+							"margin-inline-start": 0,
+							"max-inline-size": 33%
 						),
 						"paragraph": (
 							"display": block
@@ -3703,12 +3706,12 @@
 				),
 				"medium-manual-promo-show-image": (
 					"components": (
-						"paragraph": (
-							"margin-left": calc(33% + var(--global-spacing-6))
-						),
 						"heading": (
-							"margin-left": calc(33% + var(--global-spacing-6)),
-							"width": auto
+							"inline-size": auto,
+							"margin-inline-start": calc(33% + var(--global-spacing-6))
+						),
+						"paragraph": (
+							"margin-inline-start": calc(33% + var(--global-spacing-6))
 						)
 					)
 				),

diff --git a/blocks/extra-large-manual-promo-block/index.story.jsx b/blocks/extra-large-manual-promo-block/index.story.jsx
@@ -119,3 +119,18 @@ export const overlineAndDescription = () => {
 
 	return <ExtraLargeManualPromo customFields={updatedCustomFields} />;
 };
+
+export const withRtl = () => {
+	const updatedCustomFields = {
+		...allCustomFields,
+		showOverline: true,
+		showHeadline: true,
+		showImage: true,
+		showDescription: true,
+	};
+	return (
+		<div dir="rtl">
+			<ExtraLargeManualPromo customFields={updatedCustomFields} />
+		</div>
+	);
+};
diff --git a/blocks/large-manual-promo-block/index.story.jsx b/blocks/large-manual-promo-block/index.story.jsx
@@ -167,3 +167,19 @@ export const onlyDescription = () => {
 
 	return <LargeManualPromo customFields={customFields} />;
 };
+
+export const withRtl = () => {
+	const customFields = {
+		...sampleData,
+		showOverline: true,
+		showHeadline: true,
+		showImage: true,
+		showDescription: true,
+	};
+
+	return (
+		<div dir="rtl">
+			<LargeManualPromo customFields={customFields} />
+		</div>
+	);
+};
diff --git a/blocks/medium-manual-promo-block/index.story.jsx b/blocks/medium-manual-promo-block/index.story.jsx
@@ -161,3 +161,18 @@ export const twoPromos = () => {
 		</>
 	);
 };
+
+export const withRtl = () => {
+	const customFields = {
+		...sampleData,
+		showHeadline: true,
+		showImage: true,
+		showDescription: true,
+	};
+
+	return (
+		<div dir="rtl">
+			<MediumManualPromo customFields={customFields} />
+		</div>
+	);
+};
diff --git a/blocks/medium-manual-promo-block/themes/news.json b/blocks/medium-manual-promo-block/themes/news.json
@@ -4,7 +4,7 @@
 			"default": {
 				"clear": "both",
 				"display": "table",
-				"width": "100%",
+				"inline-size": "100%",
 				"components": {
 					"attribution": {
 						"color": "var(--text-color)",
@@ -16,14 +16,14 @@
 						"font-size": "var(--heading-level-5-font-size)",
 						"font-weight": "var(--heading-level-5-font-weight)",
 						"line-height": "var(--heading-level-5-line-height)",
-						"margin-bottom": "var(--global-spacing-4)"
+						"margin-block-end": "var(--global-spacing-4)"
 					},
 					"link-hover": {
 						"color": "var(--text-color-subtle)"
 					},
 					"media-item": {
-						"float": "right",
-						"max-width": "100px"
+						"float": "inline-end",
+						"max-inline-size": "100px"
 					},
 					"paragraph": {
 						"display": "inline",
@@ -35,9 +35,12 @@
 			"desktop": {
 				"components": {
 					"media-item": {
-						"float": "left",
-						"margin": 0,
-						"max-width": "33%"
+						"float": "inline-start",
+						"margin-block-end": 0,
+						"margin-block-start": 0,
+						"margin-inline-end": 0,
+						"margin-inline-start": 0,
+						"max-inline-size": "33%"
 					},
 					"paragraph": {
 						"display": "block"
@@ -51,18 +54,18 @@
 			"default": {
 				"components": {
 					"heading": {
-						"width": "68%"
+						"inline-size": "68%"
 					}
 				}
 			},
 			"desktop": {
 				"components": {
-					"paragraph": {
-						"margin-left": "calc(33% + var(--global-spacing-6))"
-					},
 					"heading": {
-						"margin-left": "calc(33% + var(--global-spacing-6))",
-						"width": "auto"
+						"inline-size": "auto",
+						"margin-inline-start": "calc(33% + var(--global-spacing-6))"
+					},
+					"paragraph": {
+						"margin-inline-start": "calc(33% + var(--global-spacing-6))"
 					}
 				}
 			}

diff --git a/blocks/small-manual-promo-block/features/small-manual-promo/default.test.jsx b/blocks/small-manual-promo-block/features/small-manual-promo/default.test.jsx
@@ -57,12 +57,12 @@ describe("the small manual promo feature", () => {
 
 	it("should have one image when showImage is true", () => {
 		render(<SmallManualPromo customFields={customFields} />);
-		expect(screen.queryByRole("img", { hidden: true })).not.toBeNull();
+		expect(screen.getByRole("img", { hidden: true })).not.toBeNull();
 	});
 
 	it("should use fallback image", () => {
 		render(<SmallManualPromo customFields={{ ...customFields, imageId: null }} />);
-		expect(screen.queryByRole("img", { hidden: true })).not.toBeNull();
+		expect(screen.getByRole("img", { hidden: true })).not.toBeNull();
 	});
 
 	it("should have no image when showImage is false", () => {
@@ -124,7 +124,7 @@ describe("the small manual promo feature", () => {
 			imageId: null,
 		};
 		render(<SmallManualPromo 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", () => {

diff --git a/blocks/small-manual-promo-block/index.story.jsx b/blocks/small-manual-promo-block/index.story.jsx
@@ -106,3 +106,17 @@ export const imageBelow = () => {
 
 	return <SmallManualPromo customFields={customFields} />;
 };
+
+export const withRtl = () => {
+	const customFields = {
+		...sampleData,
+		showHeadline: true,
+		showImage: true,
+	};
+
+	return (
+		<div dir="rtl">
+			<SmallManualPromo customFields={customFields} />
+		</div>
+	);
+};