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