Skip to content

Commit

Permalink
[Themes 1212] Added logical properties for numbered-list, card-list, …
Browse files Browse the repository at this point in the history 
…top-table-list and simple-list blocks (#1830)

* Impolemented logical properties

* added logical properties

* Implemented logical properties

* added story for RTL

---------

Co-authored-by: Malavika Koppula <[email protected]>
  • Loading branch information
@malavikakoppula
malavikakoppula and Malavika Koppula authored Dec 12, 2023
1 parent 7dab7a7 commit 909d590
Show file tree
Hide file tree
Showing 8 changed files with 252 additions and 120 deletions.
157 changes: 98 additions & 59 deletions .storybook/themes/news.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
),
Expand All @@ -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
)
)
),
Expand Down Expand Up @@ -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),
Expand Down Expand Up @@ -2055,7 +2070,7 @@
)
),
"numbered-list-item-image": (
"max-width": 25%
"max-inline-size": 25%
),
"numbered-list-items": (
"gap": var(--global-spacing-4)
Expand Down Expand Up @@ -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,
Expand All @@ -2853,43 +2874,52 @@
"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)
)
)
),
"top-table-list-medium": (
"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)
)
)
),
Expand All @@ -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%
)
)
),
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -3974,8 +4013,8 @@
"display": block
),
"media-item": (
"float": left,
"max-width": 33%
"float": inline-start,
"max-inline-size": 33%
),
"paragraph": (
"display": block
Expand All @@ -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))
)
)
),
Expand Down
12 changes: 12 additions & 0 deletions blocks/card-list-block/index.story.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,3 +51,15 @@ export const titleAndNoContentRenderingNothing = () => {

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

export const withRtl = () => {
const customFields = {
...sampleData,
};

return (
<div dir="rtl">
<CardList {...props} customFields={customFields} />
</div>
);
};
Loading

0 comments on commit 909d590

Please sign in to comment.