diff --git a/.storybook/themes/news.scss b/.storybook/themes/news.scss index bd36297b6e..e67a89ba88 100644 --- a/.storybook/themes/news.scss +++ b/.storybook/themes/news.scss @@ -667,22 +667,22 @@ ) ), "card-list": ( - "box-shadow": var(--global-box-shadow-1), - "border-radius": 0 var(--border-radius) var(--border-radius) 0, "background-color": var(--background-color), - "padding": var(--global-spacing-4) 0, + "border-end-end-radius": var(--border-radius), + "border-end-start-radius": 0, + "border-start-end-radius": var(--border-radius), + "border-start-start-radius": 0, + "box-shadow": var(--global-box-shadow-1), + "padding-block-end": var(--global-spacing-4), + "padding-block-start": var(--global-spacing-4) , + "padding-inline-end": 0, + "padding-inline-start": 0, "components": ( "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) ), - "stack": ( - "gap": var(--global-spacing-4) - ), - "separator": ( - "padding": 0 var(--global-spacing-2) - ), "image": ( "transition": opacity 0.4s ease ), @@ -695,18 +695,30 @@ ), "link-hover": ( "color": var(--text-color-subtle) + ), + "separator": ( + "padding-block-end": 0, + "padding-block-start": 0, + "padding-inline-end": var(--global-spacing-2), + "padding-inline-start": var(--global-spacing-2) + ), + "stack": ( + "gap": var(--global-spacing-4) ) ) ), "card-list-list": ( - "padding": 0 var(--global-spacing-4) + "padding-block-end": 0, + "padding-block-start": 0, + "padding-inline-end": var(--global-spacing-4), + "padding-inline-start": var(--global-spacing-4) ), "card-list-main-item-image-link": ( "components": ( "image": ( - "max-height": 40vh, - "object-fit": cover, - "width": 100% + "inline-size": 100%, + "max-block-size": 40vh, + "object-fit": cover ) ) ), @@ -734,15 +746,18 @@ ) ), "card-list-secondary-item-heading-link": ( - "width": 100% + "inline-size": 100% ), "card-list-secondary-item-image-link": ( - "max-width": 105px + "max-inline-size": 105px ), "card-list-title": ( - "padding": 0 var(--global-spacing-4), "font-size": var(--heading-level-5-font-size), - "line-height": var(--heading-level-5-line-height) + "line-height": var(--heading-level-5-line-height), + "padding-block-end": 0, + "padding-block-start": 0, + "padding-inline-end": var(--global-spacing-4), + "padding-inline-start": var(--global-spacing-4) ), "checkout": ( "font-family": var(--font-family-primary), @@ -2055,7 +2070,7 @@ ) ), "numbered-list-item-image": ( - "max-width": 25% + "max-inline-size": 25% ), "numbered-list-items": ( "gap": var(--global-spacing-4) @@ -2818,25 +2833,31 @@ ), "top-table-list-large-icon-label": ( "align-items": center, - "padding": var(--global-spacing-2), "background-color": var(--color-primary), - "border": 0, + "border-block-end": 0, + "border-block-start": 0, + "border-inline-end": 0, + "border-inline-start": 0, "border-radius": var(--global-spacing-2), - "bottom": var(--global-spacing-2), - "margin-left": var(--global-spacing-2), + "insert-block-end": var(--global-spacing-2), + "margin-inline-start": var(--global-spacing-2), + "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), "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) ) ) ), "top-table-list-large-label": ( - "margin-left": var(--global-spacing-2), - "color": var(--global-white) + "color": var(--global-white), + "margin-inline-start": var(--global-spacing-2) ), "top-table-list-large-text": ( "gap": 0, @@ -2853,11 +2874,14 @@ "font-size": var(--body-font-size), "line-height": var(--body-line-height) ), + "separator": ( + "margin-block-end":0, + "margin-block-start": 0, + "margin-inline-end": var(--global-spacing-2), + "margin-inline-start":var(--global-spacing-2) + ), "stack": ( "gap": var(--global-spacing-4) - ), - "separator": ( - "margin": 0 var(--global-spacing-2) 0 var(--global-spacing-2) ) ) ), @@ -2865,31 +2889,37 @@ "components": ( "attribution": ( "display": block, - "margin-top": var(--global-spacing-4) + "margin-block-start": var(--global-spacing-4) ), "divider": ( "clear": both, - "margin-top": var(--global-spacing-5) - ), - "media-item": ( - "float": right, - "margin": 0 0 var(--global-spacing-5) 0, - "max-width": 100px + "margin-block-start": var(--global-spacing-5) ), "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) + ), + "link": ( + "position": relative + ), + "media-item": ( + "float": inline-end, + "margin-block-end":var(--global-spacing-5), + "margin-block-start": 0, + "margin-inline-end": 0, + "margin-inline-start": 0, + "max-inline-size": 100px ), "paragraph": ( "display": block ), "separator": ( - "padding": 0 var(--global-spacing-2) - ), - "link": ( - "position": relative + "padding-block-end": 0, + "padding-block-start": 0, + "padding-inline-end": var(--global-spacing-2), + "padding-inline-start": var(--global-spacing-2) ) ) ), @@ -2900,31 +2930,37 @@ ), "top-table-list-medium-icon-label": ( "align-items": center, - "padding": var(--global-spacing-2), "background-color": var(--color-primary), - "border": 0, + "border-block-end": 0, + "border-block-start": 0, + "border-inline-end": 0, + "border-inline-start": 0, "border-radius": var(--global-spacing-2), - "bottom": var(--global-spacing-2), + "inline-block-end": var(--global-spacing-2), "margin-left": var(--global-spacing-2), + "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) "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) ) ) ), "top-table-list-medium-label": ( - "margin-left": var(--global-spacing-2), "color": var(--global-white), - "display": none + "display": none, + "margin-inline-start": var(--global-spacing-2) ), "top-table-list-medium-show-image": ( "components": ( "heading": ( - "width": 68% + "inline-size": 68% ) ) ), @@ -2972,15 +3008,18 @@ "top-table-list-xl": ( "components": ( "heading": ( - "align-self": left, - "justify-content": left + "align-self": start, + "justify-content": start ), "overline": ( "display": flex, - "justify-content": left + "justify-content": start ), "separator": ( - "padding": 0 var(--global-spacing-2) + "padding-block-end": 0, + "padding-block-start": 0, + "padding-inline-end": var(--global-spacing-2), + "padding-inline-start": var(--global-spacing-2) ), "stack": ( "gap": var(--global-spacing-4) @@ -3974,8 +4013,8 @@ "display": block ), "media-item": ( - "float": left, - "max-width": 33% + "float": inline-start, + "max-inline-size": 33% ), "paragraph": ( "display": block @@ -3991,14 +4030,14 @@ "top-table-list-medium-show-image": ( "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 + "inline-size": auto, + "margin-inline-start": calc(33% + var(--global-spacing-6)) ), "paragraph": ( - "margin-left": calc(33% + var(--global-spacing-6)) + "margin-inline-start": calc(33% + var(--global-spacing-6)) ) ) ), diff --git a/blocks/card-list-block/index.story.jsx b/blocks/card-list-block/index.story.jsx index f1c82f97f8..1cced45ca4 100644 --- a/blocks/card-list-block/index.story.jsx +++ b/blocks/card-list-block/index.story.jsx @@ -51,3 +51,15 @@ export const titleAndNoContentRenderingNothing = () => { return ; }; + +export const withRtl = () => { + const customFields = { + ...sampleData, + }; + + return ( +
+ +
+ ); +}; diff --git a/blocks/card-list-block/themes/news.json b/blocks/card-list-block/themes/news.json index 458327c2cb..715756bed3 100644 --- a/blocks/card-list-block/themes/news.json +++ b/blocks/card-list-block/themes/news.json @@ -2,22 +2,22 @@ "card-list": { "styles": { "default": { - "box-shadow": "var(--global-box-shadow-1)", - "border-radius": "0 var(--border-radius) var(--border-radius) 0", "background-color": "var(--background-color)", - "padding": "var(--global-spacing-4) 0", + "border-end-end-radius": "var(--border-radius)", + "border-end-start-radius": "0", + "border-start-end-radius": "var(--border-radius)", + "border-start-start-radius": "0", + "box-shadow": "var(--global-box-shadow-1)", + "padding-block-end": "var(--global-spacing-4) ", + "padding-block-start": "var(--global-spacing-4) ", + "padding-inline-end": 0, + "padding-inline-start": 0, "components": { "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)" }, - "stack": { - "gap": "var(--global-spacing-4)" - }, - "separator": { - "padding": "0 var(--global-spacing-2)" - }, "image": { "transition": "opacity 0.4s ease" }, @@ -30,6 +30,15 @@ }, "link-hover": { "color": "var(--text-color-subtle)" + }, + "separator": { + "padding-block-end": "0", + "padding-block-start": "0", + "paddinginline-end": "var(--global-spacing-2)", + "padding-inline-start": "var(--global-spacing-2)" + }, + "stack": { + "gap": "var(--global-spacing-4)" } } }, @@ -39,7 +48,10 @@ "card-list-list": { "styles": { "default": { - "padding": "0 var(--global-spacing-4)" + "padding-block-end": "0", + "padding-block-start": "0", + "padding-inline-end": "var(--global-spacing-4)", + "padding-inline-start": "var(--global-spacing-4)" }, "desktop": {} } @@ -49,9 +61,9 @@ "default": { "components": { "image": { - "max-height": "40vh", - "object-fit": "cover", - "width": "100%" + "inline-size": "100%", + "max-block-size": "40vh", + "object-fit": "cover" } } }, @@ -94,7 +106,7 @@ "card-list-secondary-item-heading-link": { "styles": { "default": { - "width": "100%" + "inline-size": "100%" }, "desktop": {} } @@ -102,7 +114,7 @@ "card-list-secondary-item-image-link": { "styles": { "default": { - "max-width": "105px" + "max-inline-size": "105px" }, "desktop": {} } @@ -110,9 +122,12 @@ "card-list-title": { "styles": { "default": { - "padding": "0 var(--global-spacing-4)", "font-size": "var(--heading-level-5-font-size)", - "line-height": "var(--heading-level-5-line-height)" + "line-height": "var(--heading-level-5-line-height)", + "padding-block-end": "0", + "padding-block-start": "0", + "padding-inline-end": "var(--global-spacing-4)", + "padding-inline-start": "var(--global-spacing-4)" }, "desktop": {} } diff --git a/blocks/numbered-list-block/index.story.jsx b/blocks/numbered-list-block/index.story.jsx index 6568e82d2f..fda2ac6eab 100644 --- a/blocks/numbered-list-block/index.story.jsx +++ b/blocks/numbered-list-block/index.story.jsx @@ -71,3 +71,17 @@ export const noImageNoHeadline = () => { return ; }; + +export const withRtl = () => { + const customFields = { + ...sampleData, + showHeadline: true, + showImage: true, + }; + + return ( +
+ +
+ ); +}; diff --git a/blocks/numbered-list-block/themes/news.json b/blocks/numbered-list-block/themes/news.json index bde6129eed..964e3369f3 100644 --- a/blocks/numbered-list-block/themes/news.json +++ b/blocks/numbered-list-block/themes/news.json @@ -48,7 +48,7 @@ "numbered-list-item-image": { "styles": { "default": { - "max-width": "25%" + "max-inline-size": "25%" }, "desktop": {} } diff --git a/blocks/simple-list-block/index.story.jsx b/blocks/simple-list-block/index.story.jsx index 0c042de5b3..fe1ebe12b1 100644 --- a/blocks/simple-list-block/index.story.jsx +++ b/blocks/simple-list-block/index.story.jsx @@ -71,3 +71,17 @@ export const noImageNoHeadline = () => { return ; }; + +export const withRtl = () => { + const customFields = { + ...sampleData, + showHeadline: true, + showImage: true, + }; + + return ( +
+ +
+ ); +}; diff --git a/blocks/top-table-list-block/index.story.jsx b/blocks/top-table-list-block/index.story.jsx index 6e8f16cea2..8df5b1bfa7 100644 --- a/blocks/top-table-list-block/index.story.jsx +++ b/blocks/top-table-list-block/index.story.jsx @@ -257,3 +257,17 @@ export const fourSmallStoriesPerRowNoBorder = () => ( }} /> ); + +export const withRtl = () => ( +
+ +
+); diff --git a/blocks/top-table-list-block/themes/news.json b/blocks/top-table-list-block/themes/news.json index 21bad4fd6a..fc24a34c8a 100644 --- a/blocks/top-table-list-block/themes/news.json +++ b/blocks/top-table-list-block/themes/news.json @@ -62,19 +62,25 @@ "styles": { "default": { "align-items": "center", - "padding": "var(--global-spacing-2)", "background-color": "var(--color-primary)", - "border": 0, + "border-block-end": 0, + "border-block-start": 0, + "border-inline-end": 0, + "border-inline-start": 0, "border-radius": "var(--global-spacing-2)", - "bottom": "var(--global-spacing-2)", - "margin-left": "var(--global-spacing-2)", + "insert-block-end": "var(--global-spacing-2)", + "margin-inline-start": "var(--global-spacing-2)", + "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)", "position": "absolute", "z-index": 1, "components": { "icon": { + "block-size": "var(--global-spacing-4)", "fill": "var(--global-white)", - "height": "var(--global-spacing-4)", - "width": "var(--global-spacing-4)" + "inline-size": "var(--global-spacing-4)" } } }, @@ -84,8 +90,8 @@ "top-table-list-large-label": { "styles": { "default": { - "margin-left": "var(--global-spacing-2)", - "color": "var(--global-white)" + "color": "var(--global-white)", + "margin-inline-start": "var(--global-spacing-2)" }, "desktop": {} } @@ -107,11 +113,14 @@ "font-size": "var(--body-font-size)", "line-height": "var(--body-line-height)" }, + "separator": { + "margin-block-end": "0", + "margin-block-start": "0", + "margin-inline-end": "var(--global-spacing-2)", + "margin-inline-start": "var(--global-spacing-2)" + }, "stack": { "gap": "var(--global-spacing-4)" - }, - "separator": { - "margin": "0 var(--global-spacing-2) 0 var(--global-spacing-2)" } } }, @@ -131,31 +140,37 @@ "components": { "attribution": { "display": "block", - "margin-top": "var(--global-spacing-4)" + "margin-block-start": "var(--global-spacing-4)" }, "divider": { "clear": "both", - "margin-top": "var(--global-spacing-5)" + "margin-block-start": "var(--global-spacing-5)" }, "media-item": { - "float": "right", - "margin": "0 0 var(--global-spacing-5) 0", - "max-width": "100px" + "float": "inline-end", + "margin-block-end": "var(--global-spacing-5)", + "margin-block-start": "0", + "margin-inline-end": "0", + "margin-inline-start": "0", + "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)" + "line-block-start": "var(--heading-level-5-line-height)", + "margin-block-end": "var(--global-spacing-4)" + }, + "link": { + "position": "relative" }, "paragraph": { "display": "block" }, "separator": { - "padding": "0 var(--global-spacing-2)" - }, - "link": { - "position": "relative" + "padding-block-end": "0", + "padding-block-start": "0", + "padding-inline-end": "var(--global-spacing-2)", + "padding-inline-start": "var(--global-spacing-2)" } } }, @@ -165,8 +180,8 @@ "display": "block" }, "media-item": { - "float": "left", - "max-width": "33%" + "float": "inline-start", + "max-inline-size": "33%" }, "paragraph": { "display": "block" @@ -178,9 +193,9 @@ "top-table-list-medium-container": { "styles": { "default": { + "gap": "var(--global-spacing-8)", "grid-template-columns": "1fr", - "grid-template-rows": "auto", - "gap": "var(--global-spacing-8)" + "grid-template-rows": "auto" }, "desktop": { "gap": "var(--global-spacing-5)" @@ -191,19 +206,25 @@ "styles": { "default": { "align-items": "center", - "padding": "var(--global-spacing-2)", "background-color": "var(--color-primary)", - "border": 0, + "border-block-end": 0, + "border-block-start": 0, + "border-inline-end": 0, + "border-inline-start": 0, "border-radius": "var(--global-spacing-2)", - "bottom": "var(--global-spacing-2)", - "margin-left": "var(--global-spacing-2)", + "insert-block-end": "var(--global-spacing-2)", + "margin-inline-start": "var(--global-spacing-2)", + "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)", "position": "absolute", "z-index": 1, "components": { "icon": { + "block-size": "var(--global-spacing-4)", "fill": "var(--global-white)", - "height": "var(--global-spacing-4)", - "width": "var(--global-spacing-4)" + "inline-size": "var(--global-spacing-4)" } } }, @@ -213,9 +234,9 @@ "top-table-list-medium-label": { "styles": { "default": { - "margin-left": "var(--global-spacing-2)", "color": "var(--global-white)", - "display": "none" + "display": "none", + "margin-inline-start": "var(--global-spacing-2)" }, "desktop": { "display": "inline" @@ -227,21 +248,21 @@ "default": { "components": { "heading": { - "width": "68%" + "inline-size": "68%" } } }, "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" + "inline-size": "auto", + "margin-inline-start": "calc(33% + var(--global-spacing-6))" }, "paragraph": { - "margin-left": "calc(33% + var(--global-spacing-6))" + "margin-inline-start": "calc(33% + var(--global-spacing-6))" } } } @@ -366,15 +387,18 @@ "default": { "components": { "heading": { - "align-self": "left", - "justify-content": "left" + "align-self": "start", + "justify-content": "start" }, "overline": { "display": "flex", - "justify-content": "left" + "justify-content": "start" }, "separator": { - "padding": "0 var(--global-spacing-2)" + "padding-block-end": "0", + "padding-block-start": "0", + "padding-inline-end": "var(--global-spacing-2)", + "padding-inline-start": "var(--global-spacing-2)" }, "stack": { "gap": "var(--global-spacing-4)"