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