Merge branch 'arc-themes-release-version-2.1.3' into THEMES-1212

WPMedia · Dec 5, 2023 · b432896 · b432896
2 parents dcd772c + 4bf04a2
commit b432896
Show file tree

Hide file tree

Showing 15 changed files with 2,253 additions and 1,623 deletions.
diff --git a/.storybook/themes/commerce.scss b/.storybook/themes/commerce.scss
diff --git a/.storybook/themes/news.scss b/.storybook/themes/news.scss
diff --git a/blocks/alert-bar-block/index.story.jsx b/blocks/alert-bar-block/index.story.jsx
@@ -63,3 +63,17 @@ export const headlineWithReallyLongText = () => (
 		url={linkUrl}
 	/>
 );
+
+export const rightToLeft = () => (
+	<div dir="rtl">
+		<AlertBarPresentational
+			alertRef={null}
+			arcSite="story-book"
+			barAriaLabel="Alert bar"
+			closeAriaLabel="Close"
+			hideAlertHandler={null}
+			linkText={headlineText}
+			url={linkUrl}
+		/>
+	</div>
+);
diff --git a/blocks/alert-bar-block/themes/commerce.json b/blocks/alert-bar-block/themes/commerce.json
@@ -17,8 +17,8 @@
 						"flex": "0 0 auto"
 					},
 					"button-large": {
-						"margin-bottom": "var(--global-spacing-1)",
-						"margin-top": "var(--global-spacing-1)",
+						"margin-block-end": "var(--global-spacing-1)",
+						"margin-block-start": "var(--global-spacing-1)",
 						"filter": "drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.0))"
 					},
 					"link": {
@@ -27,10 +27,10 @@
 						"font-family": "var(--font-family-primary)",
 						"font-size": "var(--body-font-size-small)",
 						"font-weight": "var(--global-font-weight-7)",
-						"padding-bottom": "var(--global-spacing-5)",
-						"padding-left": "var(--global-spacing-4)",
-						"padding-right": "var(--global-spacing-5)",
-						"padding-top": "var(--global-spacing-5)",
+						"padding-block-end": "var(--global-spacing-5)",
+						"padding-block-start": "var(--global-spacing-5)",
+						"padding-inline-end": "var(--global-spacing-5)",
+						"padding-inline-start": "var(--global-spacing-4)",
 						"text-decoration": "none"
 					},
 					"link-hover": {

diff --git a/blocks/alert-bar-block/themes/news.json b/blocks/alert-bar-block/themes/news.json
@@ -17,8 +17,8 @@
 						"flex": "0 0 auto"
 					},
 					"button-large": {
-						"margin-bottom": "var(--global-spacing-1)",
-						"margin-top": "var(--global-spacing-1)",
+						"margin-block-end": "var(--global-spacing-1)",
+						"margin-block-start": "var(--global-spacing-1)",
 						"filter": "drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.0))"
 					},
 					"link": {
@@ -27,10 +27,10 @@
 						"font-family": "var(--font-family-primary)",
 						"font-size": "var(--body-font-size-small)",
 						"font-weight": "var(--global-font-weight-7)",
-						"padding-bottom": "var(--global-spacing-5)",
-						"padding-left": "var(--global-spacing-4)",
-						"padding-right": "var(--global-spacing-5)",
-						"padding-top": "var(--global-spacing-5)",
+						"padding-block-end": "var(--global-spacing-5)",
+						"padding-block-start": "var(--global-spacing-5)",
+						"padding-inline-end": "var(--global-spacing-5)",
+						"padding-inline-start": "var(--global-spacing-4)",
 						"text-decoration": "none"
 					},
 					"link-hover": {

diff --git a/blocks/footer-block/index.story.mdx b/blocks/footer-block/index.story.mdx
@@ -54,3 +54,20 @@ const CustomFooterBlock = () => (
 		</footer>
 	</Story>
 </Preview>
+
+** Right to Left **
+
+<Preview>
+	<Story name="Right to Left">
+		<footer dir="rtl">
+			<Footer
+				customFields={{
+					navigationConfig: {
+						contentService: "footer-service",
+						contentConfiguration: {},
+					},
+				}}
+			/>
+		</footer>
+	</Story>
+</Preview>
diff --git a/blocks/footer-block/themes/news.json b/blocks/footer-block/themes/news.json
@@ -2,21 +2,27 @@
 	"footer": {
 		"styles": {
 			"default": {
-				"width": "var(--content-scale-width)",
+				"inline-size": "var(--content-scale-width)",
 				"gap": "var(--global-spacing-6)",
-				"margin": "0 auto",
-				"max-width": "calc(var(--content-max-width) * 1px)",
+				"margin-block-end": "0",
+				"margin-block-start": "0",
+				"margin-inline-end": "auto",
+				"margin-inline-start": "auto",
+				"max-inline-size": "calc(var(--content-max-width) * 1px)",
 				"components": {
 					"image": {
-						"margin": "auto",
-						"max-height": "var(--global-spacing-7)"
+						"margin-block-end": "auto",
+						"margin-block-start": "auto",
+						"margin-inline-end": "auto",
+						"margin-inline-start": "auto",
+						"max-block-size": "var(--global-spacing-7)"
 					}
 				}
 			},
 			"desktop": {
 				"components": {
 					"image": {
-						"max-height": "var(--global-spacing-10)"
+						"max-block-size": "var(--global-spacing-10)"
 					}
 				}
 			}
@@ -71,20 +77,26 @@
 	"footer-social-links": {
 		"styles": {
 			"default": {
-				"border": "1px solid var(--color-primary)",
+				"border-block-end": "1px solid var(--color-primary)",
+				"border-block-start": "1px solid var(--color-primary)",
+				"border-inline-end": "1px solid var(--color-primary)",
+				"border-inline-start": "1px solid var(--color-primary)",
 				"border-radius": "var(--border-radius)",
-				"margin": "var(--global-spacing-2) auto",
-				"width": "fit-content",
+				"margin-block-end": "var(--global-spacing-2)",
+				"margin-block-start": "var(--global-spacing-2)",
+				"margin-inline-end": "auto",
+				"margin-inline-start": "auto",
+				"inline-size": "fit-content",
 				"components": {
 					"icon": {
 						"fill": "var(--color-primary)"
 					},
 					"link": {
-						"border-right": "1px solid var(--color-primary)",
-						"padding-top": "var(--global-spacing-2)",
-						"padding-right": "var(--global-spacing-2)",
-						"padding-bottom": "var(--global-spacing-2)",
-						"padding-left": "var(--global-spacing-2)"
+						"border-inline-end": "1px solid var(--color-primary)",
+						"padding-block-end": "var(--global-spacing-2)",
+						"padding-block-start": "var(--global-spacing-2)",
+						"padding-inline-end": "var(--global-spacing-2)",
+						"padding-inline-start": "var(--global-spacing-2)"
 					}
 				}
 			},
@@ -106,12 +118,12 @@
 	"footer-social-links-container": {
 		"styles": {
 			"default": {
-				"border-bottom": "1px solid var(--global-neutral-4)",
-				"width": "100%"
+				"border-block-end": "1px solid var(--global-neutral-4)",
+				"inline-size": "100%"
 			},
 			"desktop": {
-				"border-bottom": "none",
-				"width": "max-content"
+				"border-block-end": "none",
+				"inline-size": "max-content"
 			}
 		}
 	},
@@ -120,7 +132,7 @@
 			"default": {
 				"components": {
 					"link": {
-						"border-right": "none"
+						"border-inline-end": "none"
 					}
 				}
 			},
@@ -130,23 +142,23 @@
 	"footer-top-container": {
 		"styles": {
 			"default": {
-				"border-top": "1px solid var(--global-neutral-4)",
-				"border-bottom": "none",
+				"border-block-start": "1px solid var(--global-neutral-4)",
+				"border-block-end": "none",
 				"display": "grid",
 				"grid-template-columns": "100%",
 				"grid-template-rows": "auto auto",
 				"grid-auto-flow": "column",
 				"gap": "var(--global-spacing-6)",
 				"justify-content": "center",
-				"width": "100%",
+				"inline-size": "100%",
 				"components": {
 					"paragraph": {
 						"justify-self": "center"
 					}
 				}
 			},
 			"desktop": {
-				"border-bottom": "1px solid var(--global-neutral-4)",
+				"border-block-end": "1px solid var(--global-neutral-4)",
 				"grid-auto-flow": "column",
 				"grid-template-columns": "1fr auto 1fr",
 				"grid-template-rows": "auto",

diff --git a/blocks/lead-art-block/index.story.jsx b/blocks/lead-art-block/index.story.jsx
@@ -255,3 +255,17 @@ export const video = () => {
 	};
 	return <LeadArt content={globalContent} customFields={{ playthrough: false }} />;
 };
+
+export const rightToLeft = () => {
+	const globalContent = {
+		arcSite: "story-book",
+		promo_items: {
+			lead_art: leadArtGallery,
+		},
+	};
+	return (
+		<div dir="rtl">
+			<LeadArt content={globalContent} customFields={{}} />
+		</div>
+	);
+};