Themes 1184 (#1838)

* updated promos to use logical properties * updated storybook for promos * Added RTL stories for storybook promos
WPMedia · Dec 8, 2023 · fdcb11f · fdcb11f
1 parent a731182
commit fdcb11f
Show file tree

Hide file tree

Showing 8 changed files with 151 additions and 57 deletions.
diff --git a/.storybook/themes/news.scss b/.storybook/themes/news.scss
@@ -1620,19 +1620,22 @@
 				),
 				"large-promo-icon-label": (
 					"align-items": center,
-					"padding": var(--global-spacing-2),
+					"padding-block-start": var(--global-spacing-2),
+					"padding-inline-end": var(--global-spacing-2),
+					"padding-block-end": var(--global-spacing-2),
+					"padding-inline-start": var(--global-spacing-2),
 					"background-color": var(--color-primary),
 					"border": 0,
 					"border-radius": var(--global-spacing-2),
-					"bottom": var(--global-spacing-2),
-					"margin-left": var(--global-spacing-2),
+					"inset-block-end": var(--global-spacing-2),
+					"margin-inline-start": var(--global-spacing-2),
 					"position": absolute,
 					"z-index": 1,
 					"components": (
 						"icon": (
 							"fill": var(--global-white),
-							"height": var(--global-spacing-4),
-							"width": var(--global-spacing-4)
+							"block-size": var(--global-spacing-4),
+							"inline-size": var(--global-spacing-4)
 						)
 					)
 				),
@@ -1644,7 +1647,7 @@
 					)
 				),
 				"large-promo-label": (
-					"margin-left": var(--global-spacing-2),
+					"margin-inline-start": var(--global-spacing-2),
 					"color": var(--global-white)
 				),
 				"large-promo-text": (
@@ -1671,7 +1674,10 @@
 							"gap": var(--global-spacing-4)
 						),
 						"separator": (
-							"margin": 0 var(--global-spacing-2) 0 var(--global-spacing-2)
+							"margin-block-start": 0,
+							"margin-block-end": 0,
+							"margin-inline-end": var(--global-spacing-2),
+							"margin-inline-start": var(--global-spacing-2)
 						)
 					)
 				),
@@ -1895,28 +1901,31 @@
 				"medium-promo": (
 					"clear": both,
 					"display": table,
-					"width": 100%,
+					"inline-size": 100%,
 					"components": (
 						"attribution": (
 							"display": block,
-							"margin-top": var(--global-spacing-4)
+							"margin-block-start": var(--global-spacing-4)
 						),
 						"media-item": (
-							"float": right,
-							"max-width": 100px
+							"float": inline-end,
+							"max-inline-size": 100px
 						),
 						"heading": (
 							"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)
 						),
 						"paragraph": (
 							"display": block,
 							"width": 100%
 						),
 						"separator": (
-							"padding": 0 var(--global-spacing-2)
+							"padding-block-start": 0,
+							"padding-block-end": 0,
+							"padding-inline-end": var(--global-spacing-2),
+							"padding-inline-start": var(--global-spacing-2)
 						),
 						"link": (
 							"position": relative
@@ -1925,19 +1934,22 @@
 				),
 				"medium-promo-icon-label": (
 					"align-items": center,
-					"padding": var(--global-spacing-2),
+					"padding-block-start": var(--global-spacing-2),
+					"padding-block-end": var(--global-spacing-2),
+					"padding-inline-start": var(--global-spacing-2),
+					"padding-inline-end": var(--global-spacing-2),
 					"background-color": var(--color-primary),
 					"border": 0,
 					"border-radius": var(--global-spacing-2),
-					"bottom": var(--global-spacing-2),
-					"margin-left": var(--global-spacing-2),
+					"inset-block-end": var(--global-spacing-2),
+					"margin-inline-start": var(--global-spacing-2),
 					"position": absolute,
 					"z-index": 1,
 					"components": (
 						"icon": (
 							"fill": var(--global-white),
-							"height": var(--global-spacing-4),
-							"width": var(--global-spacing-4)
+							"block-size": var(--global-spacing-4),
+							"inline-size": var(--global-spacing-4)
 						)
 					)
 				),
@@ -1949,15 +1961,15 @@
 					)
 				),
 				"medium-promo-label": (
-					"margin-left": var(--global-spacing-2),
+					"margin-inline-start": var(--global-spacing-2),
 					"color": var(--global-white),
 					"display": none
 				),
 				"medium-promo-show-image": (
 					"components": (
 						"heading": (
 							"color": var(--text-color),
-							"width": 68%
+							"inline-size": 68%
 						),
 						"link-hover": (
 							"color": var(--text-color-subtle)
@@ -4028,7 +4040,7 @@
 					)
 				),
 				"xl-promo-icon-label": (
-					"margin-left": var(--global-spacing-2),
+					"margin-inline-start": var(--global-spacing-2),
 					"color": var(--global-white)
 				)
 			),

diff --git a/blocks/extra-large-promo-block/index.story.jsx b/blocks/extra-large-promo-block/index.story.jsx
@@ -171,3 +171,20 @@ export const withVideoLabelAndImage = () => {
 
 	return <ExtraLargePromoPresentation {...updatedCustomFields} searchableField={() => {}} />;
 };
+
+export const rightToLeft = () => {
+	const updatedCustomFields = {
+		...allCustomFields,
+		showOverline: true,
+		showHeadline: true,
+		showImage: true,
+		showDescription: true,
+		showByline: true,
+		showDate: true,
+	};
+	return (
+		<div dir="rtl">
+			<Promo customFields={updatedCustomFields} />
+		</div>
+	);
+};
diff --git a/blocks/extra-large-promo-block/themes/news.json b/blocks/extra-large-promo-block/themes/news.json
@@ -22,7 +22,10 @@
 						"color": "var(--text-color-subtle)"
 					},
 					"separator": {
-						"padding": "0 var(--global-spacing-2)"
+						"padding-block-start": "0",
+						"padding-block-end": "0",
+						"padding-inline-start": "var(--global-spacing-2)",
+						"padding-inline-end": "var(--global-spacing-2)"
 					},
 					"stack": {
 						"gap": "var(--global-spacing-4)"
@@ -55,32 +58,35 @@
 		"styles": {
 			"default": {
 				"align-items": "center",
-				"padding": "var(--global-spacing-2)",
+				"padding-block-start": "var(--global-spacing-2)",
+				"padding-inline-end": "var(--global-spacing-2)",
+				"padding-block-end": "var(--global-spacing-2)",
+				"padding-inline-start": "var(--global-spacing-2)",
 				"background-color": "var(--color-primary)",
 				"border": 0,
 				"border-radius": "var(--global-spacing-2)",
-				"bottom": "var(--global-spacing-2)",
-				"margin-left": "var(--global-spacing-2)",
+				"inset-block-end": "var(--global-spacing-2)",
+				"margin-inline-start": "var(--global-spacing-2)",
 				"position": "absolute",
 				"z-index": 1,
 				"components": {
 					"icon": {
 						"fill": "var(--global-white)",
-						"height": "var(--global-spacing-4)",
-						"width": "var(--global-spacing-4)"
+						"block-size": "var(--global-spacing-4)",
+						"inline-size": "var(--global-spacing-4)"
 					}
 				}
 			},
 			"desktop": {
-				"margin-left": "var(--global-spacing-2)",
+				"margin-inline-start": "var(--global-spacing-2)",
 				"color": "var(--global-white)"
 			}
 		}
 	},
 	"xl-promo-label": {
 		"styles": {
 			"default": {
-				"margin-left": "var(--global-spacing-2)",
+				"margin-inline-start": "var(--global-spacing-2)",
 				"color": "var(--global-white)"
 			},
 			"desktop": {}

diff --git a/blocks/large-promo-block/index.story.jsx b/blocks/large-promo-block/index.story.jsx
@@ -223,3 +223,20 @@ export const playVideoInPlaceOfImage = () => (
 		viewportPercentage={60}
 	/>
 );
+
+export const rightToLeft = () => {
+	const updatedCustomFields = {
+		...allCustomFields,
+		showOverline: true,
+		showHeadline: true,
+		showImage: true,
+		showDescription: true,
+		showByline: true,
+		showDate: true,
+	};
+	return (
+		<div dir="rtl">
+			<Promo customFields={updatedCustomFields} />
+		</div>
+	);
+};
diff --git a/blocks/large-promo-block/themes/news.json b/blocks/large-promo-block/themes/news.json
@@ -26,19 +26,22 @@
 		"styles": {
 			"default": {
 				"align-items": "center",
-				"padding": "var(--global-spacing-2)",
+				"padding-block-start": "var(--global-spacing-2)",
+				"padding-block-end": "var(--global-spacing-2)",
+				"padding-inline-end": "var(--global-spacing-2)",
+				"padding-inline-start": "var(--global-spacing-2)",
 				"background-color": "var(--color-primary)",
 				"border": 0,
 				"border-radius": "var(--global-spacing-2)",
-				"bottom": "var(--global-spacing-2)",
-				"margin-left": "var(--global-spacing-2)",
+				"inset-block-end": "var(--global-spacing-2)",
+				"margin-inline-start": "var(--global-spacing-2)",
 				"position": "absolute",
 				"z-index": 1,
 				"components": {
 					"icon": {
 						"fill": "var(--global-white)",
-						"height": "var(--global-spacing-4)",
-						"width": "var(--global-spacing-4)"
+						"block-size": "var(--global-spacing-4)",
+						"inline-size": "var(--global-spacing-4)"
 					}
 				}
 			},
@@ -48,7 +51,7 @@
 	"large-promo-label": {
 		"styles": {
 			"default": {
-				"margin-left": "var(--global-spacing-2)",
+				"margin-inline-start": "var(--global-spacing-2)",
 				"color": "var(--global-white)"
 			},
 			"desktop": {}
@@ -80,7 +83,10 @@
 						"gap": "var(--global-spacing-4)"
 					},
 					"separator": {
-						"margin": "0 var(--global-spacing-2) 0 var(--global-spacing-2)"
+						"margin-block-start": "0",
+						"margin-block-end": "0",
+						"margin-inline-end": "var(--global-spacing-2)",
+						"margin-inline-start": "var(--global-spacing-2)"
 					}
 				}
 			},

diff --git a/blocks/medium-promo-block/index.story.jsx b/blocks/medium-promo-block/index.story.jsx
@@ -217,3 +217,19 @@ export const twoPromos = () => {
 		</>
 	);
 };
+
+export const rightToLeft = () => {
+	const customFields = {
+		...sampleData,
+		showHeadline: true,
+		showImage: true,
+		showDescription: true,
+		showByline: true,
+		showDate: true,
+	};
+	return (
+		<div dir="rtl">
+			<MediumPromo customFields={customFields} />
+		</div>
+	);
+};