Skip to content

Commit

Permalink
[THEMES-1374] Implemented logical properties for search-results list …
Browse files Browse the repository at this point in the history
…and results-list (#1828)

* Implemented logical properties

* Added rtl story

---------

Co-authored-by: Malavika Koppula <[email protected]>
  • Loading branch information
malavikakoppula and Malavika Koppula authored Dec 5, 2023
1 parent 4bf04a2 commit 491abec
Show file tree
Hide file tree
Showing 5 changed files with 167 additions and 95 deletions.
109 changes: 62 additions & 47 deletions .storybook/themes/news.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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": (
Expand All @@ -2363,34 +2366,40 @@
"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
)
)
),
"search-results-list-results-item": (
"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),
Expand All @@ -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)
Expand Down Expand Up @@ -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)
Expand All @@ -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))
)
)
),
Expand Down Expand Up @@ -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
Expand All @@ -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))
)
)
),
Expand Down
19 changes: 19 additions & 0 deletions blocks/results-list-block/index.story.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -102,3 +102,22 @@ export const withLazyLoadDisabledAndBylineDateHeadlineImage = () => {

return <ResultsListBlock customFields={data} />;
};

export const withRTL = () => {
const data = {
...sampleData,
lazyLoad: true,
showByline: true,
showDate: true,
showDescription: true,
showHeadline: true,
showImage: true,
showItemOverline: true,
};

return (
<div dir="rtl">
<ResultsListBlock customFields={data} />
</div>
);
};
54 changes: 30 additions & 24 deletions blocks/results-list-block/themes/news.json
Original file line number Diff line number Diff line change
Expand Up @@ -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)"
Expand All @@ -44,7 +50,7 @@
"results-list-see-more": {
"styles": {
"default": {
"margin-top": "var(--global-spacing-2)"
"margin-block-start": "var(--global-spacing-2)"
},
"desktop": {}
}
Expand All @@ -54,7 +60,7 @@
"default": {
"components": {
"heading": {
"width": "68%"
"inline-size": "68%"
},
"overline": {
"font-size": "var(--body-font-size)"
Expand All @@ -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))"
}
}
}
Expand Down
23 changes: 23 additions & 0 deletions blocks/search-results-list-block/index.story.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -91,3 +91,26 @@ export const allFields = () => {

return <SearchResultsList customFields={customFields} />;
};

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 <div dir="rtl"><SearchResultsList customFields={customFields} /></div>;
};
Loading

0 comments on commit 491abec

Please sign in to comment.