diff --git a/.storybook/themes/news.scss b/.storybook/themes/news.scss index bdf9f9bac1..a6c1927122 100644 --- 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,7 +1961,7 @@ ) ), "medium-promo-label": ( - "margin-left": var(--global-spacing-2), + "margin-inline-start": var(--global-spacing-2), "color": var(--global-white), "display": none ), @@ -1957,7 +1969,7 @@ "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 index f1a77a3f66..d851820966 100644 --- 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 {}} />; }; + +export const rightToLeft = () => { + const updatedCustomFields = { + ...allCustomFields, + showOverline: true, + showHeadline: true, + showImage: true, + showDescription: true, + showByline: true, + showDate: true, + }; + return ( +
+ +
+ ); +}; diff --git a/blocks/extra-large-promo-block/themes/news.json b/blocks/extra-large-promo-block/themes/news.json index b7a4e81bd2..622494dcd4 100644 --- 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,24 +58,27 @@ "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)" } } @@ -80,7 +86,7 @@ "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 index c540326ad9..c24e142986 100644 --- 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 ( +
+ +
+ ); +}; diff --git a/blocks/large-promo-block/themes/news.json b/blocks/large-promo-block/themes/news.json index 0de18c964e..9dba31b436 100644 --- 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 index 54d536305c..70df5b5bbe 100644 --- 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 ( +
+ +
+ ); +}; diff --git a/blocks/medium-promo-block/themes/news.json b/blocks/medium-promo-block/themes/news.json index 3d27fb3cd1..0bfd044a42 100644 --- a/blocks/medium-promo-block/themes/news.json +++ b/blocks/medium-promo-block/themes/news.json @@ -4,28 +4,31 @@ "default": { "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%" + "inline-size": "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" @@ -38,13 +41,13 @@ "display": "block" }, "media-item": { - "float": "left", + "float": "inline-start", "margin": 0, - "max-width": "33%" + "max-inline-size": "33%" }, "paragraph": { "display": "block", - "width": "auto" + "inline-size": "auto" } } } @@ -56,7 +59,7 @@ "components": { "heading": { "color": "var(--text-color)", - "width": "68%" + "inline-size": "68%" }, "link-hover": { "color": "var(--text-color-subtle)" @@ -66,14 +69,14 @@ "desktop": { "components": { "attribution": { - "margin-left": "calc(33% + var(--global-spacing-6))" + "margin-inline-start": "calc(33% + var(--global-spacing-6))" }, "heading": { - "margin-left": "calc(33% + var(--global-spacing-6))", - "width": "auto" + "margin-inline-start": "calc(33% + var(--global-spacing-6))", + "inline-size": "auto" }, "paragraph": { - "margin-left": "calc(33% + var(--global-spacing-6))" + "margin-inline-start": "calc(33% + var(--global-spacing-6))" } } } @@ -83,19 +86,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-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)" } } }, @@ -105,7 +111,7 @@ "medium-promo-label": { "styles": { "default": { - "margin-left": "var(--global-spacing-2)", + "margin-inline-start": "var(--global-spacing-2)", "color": "var(--global-white)", "display": "none" }, diff --git a/blocks/small-promo-block/index.story.jsx b/blocks/small-promo-block/index.story.jsx index 0324df92b4..af29c7fa52 100644 --- a/blocks/small-promo-block/index.story.jsx +++ b/blocks/small-promo-block/index.story.jsx @@ -111,3 +111,17 @@ export const imageBelow = () => { return ; }; + +export const rightToLeft = () => { + const customFields = { + ...sampleData, + showHeadline: true, + showImage: true, + }; + + return ( +
+ +
+ ); +};