From 491abec97572cc8e56f0fae96507771a6aaa9580 Mon Sep 17 00:00:00 2001 From: malavikakoppula <83021791+malavikakoppula@users.noreply.github.com> Date: Tue, 5 Dec 2023 14:41:18 -0500 Subject: [PATCH] [THEMES-1374] Implemented logical properties for search-results list and results-list (#1828) * Implemented logical properties * Added rtl story --------- Co-authored-by: Malavika Koppula --- .storybook/themes/news.scss | 109 ++++++++++-------- blocks/results-list-block/index.story.jsx | 19 +++ blocks/results-list-block/themes/news.json | 54 +++++---- .../search-results-list-block/index.story.jsx | 23 ++++ .../themes/news.json | 57 +++++---- 5 files changed, 167 insertions(+), 95 deletions(-) diff --git a/.storybook/themes/news.scss b/.storybook/themes/news.scss index 22531d9ef1..d523a7b324 100644 --- a/.storybook/themes/news.scss +++ b/.storybook/themes/news.scss @@ -2188,36 +2188,39 @@ "results-list": ( "components": ( "attribution": ( - "margin-top": var(--global-spacing-4) - ), - "media-item": ( - "float": right, - "max-width": 100px + "margin-block-start": var(--global-spacing-4) ), - "overline": ( - "font-size": var(--body-font-size) + "button": ( + "gap": var(--global-spacing-6) ), "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) ), - "button": ( - "gap": var(--global-spacing-6) + "media-item": ( + "float": inline-end, + "max-inline-size": 100px + ), + "overline": ( + "font-size": var(--body-font-size) ), "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) ) ) ), "results-list-see-more": ( - "margin-top": var(--global-spacing-2) + "margin-block-size": var(--global-spacing-2) ), "results-list-show-image": ( "components": ( "heading": ( - "width": 68% + "inline-size": 68% ), "overline": ( "font-size": var(--body-font-size) @@ -2350,10 +2353,10 @@ ), "icon": ( "align-self": center, + "block-size": var(--global-spacing-5), "grid-area": icon, - "height": var(--global-spacing-5), + "inline-size": var(--global-spacing-5), "justify-self": center, - "width": var(--global-spacing-5), "z-index": 1 ), "input": ( @@ -2363,16 +2366,19 @@ "input-input": ( "font-family": var(--font-family-primary), "font-weight": var(--global-font-weight-7), - "padding-inline-start": var(--global-spacing-7), - "width": 100% + "inline-size": 100%, + "padding-inline-start": var(--global-spacing-7) ) ) ), "search-results-list-results": ( "components": ( "button": ( - "margin": var(--global-spacing-2) auto 0, - "width": auto + "inline-size": auto, + "margin-block-end": 0, + "margin-block-start": var(--global-spacing-2), + "margin-inline-end": auto, + "margin-inline-start": auto ) ) ), @@ -2380,17 +2386,20 @@ "components": ( "attribution": ( "display": block, - "margin-top": var(--global-spacing-4) + "margin-block-start": var(--global-spacing-4) ), "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": right, - "max-width": 100px + "float": inline-end, + "max-inline-size": 100px ), "overline": ( "font-weight": var(--heading-level-4-font-weight), @@ -2401,17 +2410,17 @@ "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) ) ) ), "search-results-list-results-item-show-image": ( "components": ( "heading": ( - "width": 68% + "inline-size": 68% ), "overline": ( "font-size": var(--body-font-size) @@ -3705,9 +3714,12 @@ "results-list": ( "components": ( "media-item": ( - "float": left, - "margin": 0, - "max-width": 33% + "float": inline-start, + "margin-block-top": 0, + "margin-block-end": 0, + "margin-inline-start": 0, + "margin-inline-end": 0, + "max-inline-size": 33% ), "overline": ( "font-size": var(--global-font-size-7) @@ -3718,18 +3730,18 @@ "components": ( "attribution": ( "display": block, - "margin-left": calc(33% + var(--global-spacing-6)) + "margin-inline-end": calc(33% + var(--global-spacing-6)) ), "heading": ( - "margin-left": calc(33% + var(--global-spacing-6)), - "width": auto - ), - "paragraph": ( - "margin-left": calc(33% + var(--global-spacing-6)) + "margin-inline-end": calc(33% + var(--global-spacing-6)), + "inline-size": auto ), "overline": ( - "margin-left": var(--global-spacing-6), + "margin-inline-end": var(--global-spacing-6), "font-size": var(--global-font-size-7) + ), + "paragraph": ( + "margin-inline-end": calc(33% + var(--global-spacing-6)) ) ) ), @@ -3771,9 +3783,12 @@ "display": block ), "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 @@ -3783,18 +3798,18 @@ "search-results-list-results-item-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)) ), "overline": ( - "margin-left": var(--global-spacing-6), - "font-size": var(--heading-level-5-font-size) + "font-size": var(--heading-level-5-font-size), + "margin-inline-start": 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/results-list-block/index.story.jsx b/blocks/results-list-block/index.story.jsx index fdddf3b4d2..1b6bf89f73 100644 --- a/blocks/results-list-block/index.story.jsx +++ b/blocks/results-list-block/index.story.jsx @@ -102,3 +102,22 @@ export const withLazyLoadDisabledAndBylineDateHeadlineImage = () => { return ; }; + +export const withRTL = () => { + const data = { + ...sampleData, + lazyLoad: true, + showByline: true, + showDate: true, + showDescription: true, + showHeadline: true, + showImage: true, + showItemOverline: true, + }; + + return ( +
+ +
+ ); +}; diff --git a/blocks/results-list-block/themes/news.json b/blocks/results-list-block/themes/news.json index e65fefc892..47eaf0807d 100644 --- a/blocks/results-list-block/themes/news.json +++ b/blocks/results-list-block/themes/news.json @@ -4,35 +4,41 @@ "default": { "components": { "attribution": { - "margin-top": "var(--global-spacing-4)" + "margin-block-start": "var(--global-spacing-4)" }, - "media-item": { - "float": "right", - "max-width": "100px" - }, - "overline": { - "font-size": "var(--body-font-size)" + "button": { + "gap": "var(--global-spacing-6)" }, "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)" }, - "button": { - "gap": "var(--global-spacing-6)" + "media-item": { + "float": "inline-end", + "max-inline-size": "100px" + }, + "overline": { + "font-size": "var(--body-font-size)" }, "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)" } } }, "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%" }, "overline": { "font-size": "var(--global-font-size-7)" @@ -44,7 +50,7 @@ "results-list-see-more": { "styles": { "default": { - "margin-top": "var(--global-spacing-2)" + "margin-block-start": "var(--global-spacing-2)" }, "desktop": {} } @@ -54,7 +60,7 @@ "default": { "components": { "heading": { - "width": "68%" + "inline-size": "68%" }, "overline": { "font-size": "var(--body-font-size)" @@ -65,18 +71,18 @@ "components": { "attribution": { "display": "block", - "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" - }, - "paragraph": { - "margin-left": "calc(33% + var(--global-spacing-6))" + "inline-size": "auto", + "margin-inline-start": "calc(33% + var(--global-spacing-6))" }, "overline": { - "margin-left": "var(--global-spacing-6)", - "font-size": "var(--global-font-size-7)" + "font-size": "var(--global-font-size-7)", + "margin-inline-start": "var(--global-spacing-6)" + }, + "paragraph": { + "margin-inline-start": "calc(33% + var(--global-spacing-6))" } } } diff --git a/blocks/search-results-list-block/index.story.jsx b/blocks/search-results-list-block/index.story.jsx index b5b2ea158f..e1afc53ccd 100644 --- a/blocks/search-results-list-block/index.story.jsx +++ b/blocks/search-results-list-block/index.story.jsx @@ -91,3 +91,26 @@ export const allFields = () => { return ; }; + +export const withRTL = () => { + const customFields = { + globalContent, + itemContentConfig: {}, + listContentConfig: { + contentService: null, + contentConfigValues: { + offset: 0, + size: 17, + }, + }, + inheritGlobalContent: true, + showHeadline: true, + showImage: true, + showDescription: true, + showByline: true, + showDate: true, + imageRatio: "16:9", + }; + + return
; +}; diff --git a/blocks/search-results-list-block/themes/news.json b/blocks/search-results-list-block/themes/news.json index 6ff45e6c08..c0805cc772 100644 --- a/blocks/search-results-list-block/themes/news.json +++ b/blocks/search-results-list-block/themes/news.json @@ -35,10 +35,10 @@ }, "icon": { "align-self": "center", + "block-size": "var(--global-spacing-5)", "grid-area": "icon", - "height": "var(--global-spacing-5)", + "inline-size": "var(--global-spacing-5)", "justify-self": "center", - "width": "var(--global-spacing-5)", "z-index": 1 }, "input": { @@ -48,8 +48,8 @@ "input-input": { "font-family": "var(--font-family-primary)", "font-weight": "var(--global-font-weight-7)", - "padding-inline-start": "var(--global-spacing-7)", - "width": "100%" + "inline-size": "100%", + "padding-inline-start": "var(--global-spacing-7)" } } }, @@ -61,8 +61,11 @@ "default": { "components": { "button": { - "margin": "var(--global-spacing-2) auto 0", - "width": "auto" + "inline-size": "auto", + "margin-block-end": "0", + "margin-block-start": "var(--global-spacing-2) ", + "margin-inline-end": "auto", + "margin-inline-start": "auto" } } }, @@ -75,17 +78,20 @@ "components": { "attribution": { "display": "block", - "margin-top": "var(--global-spacing-4)" + "margin-block-start": "var(--global-spacing-4)" }, "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": "right", - "max-width": "100px" + "float": "inline-end", + "max-inline-size": "100px" }, "overline": { "font-weight": "var(--heading-level-4-font-weight)", @@ -96,10 +102,10 @@ "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)" } } }, @@ -109,9 +115,12 @@ "display": "block" }, "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" @@ -125,7 +134,7 @@ "default": { "components": { "heading": { - "width": "68%" + "inline-size": "68%" }, "overline": { "font-size": "var(--body-font-size)" @@ -135,18 +144,18 @@ "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))" }, "overline": { - "margin-left": "var(--global-spacing-6)", - "font-size": "var(--heading-level-5-font-size)" + "font-size": "var(--heading-level-5-font-size)", + "margin-inline-start": "var(--global-spacing-6)" }, "paragraph": { - "margin-left": "calc(33% + var(--global-spacing-6))" + "margin-inline-start": "calc(33% + var(--global-spacing-6))" } } }