From c62394566d10cfd4fde062b0d267e5eaa621d04f Mon Sep 17 00:00:00 2001 From: Louise Archibald Date: Tue, 30 Dec 2025 13:54:56 +0000 Subject: [PATCH 01/10] stack items --- src/app/components/ArticleLinksBlock/PromoList/index.styles.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/components/ArticleLinksBlock/PromoList/index.styles.tsx b/src/app/components/ArticleLinksBlock/PromoList/index.styles.tsx index e84e9380167..71be5e4d81b 100644 --- a/src/app/components/ArticleLinksBlock/PromoList/index.styles.tsx +++ b/src/app/components/ArticleLinksBlock/PromoList/index.styles.tsx @@ -8,6 +8,7 @@ export default { paddingInlineStart: '0', margin: '0', display: 'flex', + flexDirection: 'column', overflowX: 'scroll', scrollBehavior: 'auto', WebkitOverflowScrolling: 'touch', From db9137582dfebd63c48be356da0cc142d37d2577 Mon Sep 17 00:00:00 2001 From: Louise Archibald Date: Tue, 30 Dec 2025 14:20:38 +0000 Subject: [PATCH 02/10] remove first list item margins as no longer required --- .../ArticleLinksBlock/PromoList/index.styles.tsx | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/src/app/components/ArticleLinksBlock/PromoList/index.styles.tsx b/src/app/components/ArticleLinksBlock/PromoList/index.styles.tsx index 71be5e4d81b..703abd1bbd9 100644 --- a/src/app/components/ArticleLinksBlock/PromoList/index.styles.tsx +++ b/src/app/components/ArticleLinksBlock/PromoList/index.styles.tsx @@ -2,7 +2,7 @@ import pixelsToRem from '#app/utilities/pixelsToRem'; import { css, Theme } from '@emotion/react'; export default { - standardScrollPromo: ({ mq, spacings }: Theme) => + standardScrollPromo: () => css({ listStyle: 'none', paddingInlineStart: '0', @@ -18,14 +18,6 @@ export default { '&::-webkit-scrollbar': { display: 'none', }, - '& > li + li': { - marginInlineStart: `${spacings.FULL}rem`, - }, - [mq.GROUP_2_MIN_WIDTH]: { - '& > li:not(:first-of-type)': { - marginInlineStart: `${spacings.DOUBLE}rem`, - }, - }, }), operaScrollPromo: () => css({ From 8b7a53d50b696a3896245ffdb1fdec051ee96c1f Mon Sep 17 00:00:00 2001 From: Louise Archibald Date: Tue, 30 Dec 2025 14:40:51 +0000 Subject: [PATCH 03/10] change width and adjust margins between items --- .../ArticleLinksBlock/Promo/index.styles.tsx | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/src/app/components/ArticleLinksBlock/Promo/index.styles.tsx b/src/app/components/ArticleLinksBlock/Promo/index.styles.tsx index 9b0706d6dcc..7b113c8f7a7 100644 --- a/src/app/components/ArticleLinksBlock/Promo/index.styles.tsx +++ b/src/app/components/ArticleLinksBlock/Promo/index.styles.tsx @@ -1,3 +1,4 @@ +import pixelsToRem from '#app/utilities/pixelsToRem'; import { css, Theme } from '@emotion/react'; export default { @@ -25,18 +26,19 @@ export default { position: 'relative', backgroundColor: isDarkUi ? palette.GREY_3 : palette.WHITE, padding: `${spacings.DOUBLE}rem`, - marginBottom: `${spacings.TRIPLE}rem`, + marginBottom: `${spacings.FULL}rem`, height: 'auto', display: 'block', - [mq.GROUP_0_MAX_WIDTH]: { - width: `14.8125rem`, - }, - [mq.GROUP_3_MIN_WIDTH]: { - width: `11.125rem`, - }, - [mq.GROUP_4_MIN_WIDTH]: { - width: `12.6875rem`, - }, + width: '100%', + // [mq.GROUP_0_MAX_WIDTH]: { + // width: `14.8125rem`, + // }, + // [mq.GROUP_3_MIN_WIDTH]: { + // width: `11.125rem`, + // }, + // [mq.GROUP_4_MIN_WIDTH]: { + // width: '100%', + // }, }), operaPromoBox: ({ isDarkUi, mq, palette, spacings }: Theme) => css({ From 1cc5d47b5ff738287c42c10c95efb470e731b7ff Mon Sep 17 00:00:00 2001 From: Louise Archibald Date: Tue, 30 Dec 2025 15:57:51 +0000 Subject: [PATCH 04/10] implement chevron --- .../components/ArticleLinksBlock/Promo/index.styles.tsx | 8 ++++++++ src/app/components/ArticleLinksBlock/Promo/index.tsx | 8 +++++++- 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/src/app/components/ArticleLinksBlock/Promo/index.styles.tsx b/src/app/components/ArticleLinksBlock/Promo/index.styles.tsx index 7b113c8f7a7..ad2210b8f2d 100644 --- a/src/app/components/ArticleLinksBlock/Promo/index.styles.tsx +++ b/src/app/components/ArticleLinksBlock/Promo/index.styles.tsx @@ -26,6 +26,7 @@ export default { position: 'relative', backgroundColor: isDarkUi ? palette.GREY_3 : palette.WHITE, padding: `${spacings.DOUBLE}rem`, + paddingInlineEnd: `${pixelsToRem(38)}rem`, marginBottom: `${spacings.FULL}rem`, height: 'auto', display: 'block', @@ -56,4 +57,11 @@ export default { marginTop: `${spacings.FULL}rem`, color: isDarkUi ? palette.GREY_6 : undefined, }), + chevron: () => + css({ + position: 'absolute', + top: '50%', + transform: 'translateY(-50%)', + insetInlineEnd: `${pixelsToRem(12)}rem`, + }), }; diff --git a/src/app/components/ArticleLinksBlock/Promo/index.tsx b/src/app/components/ArticleLinksBlock/Promo/index.tsx index f6a172d6c9e..7230381d3a7 100644 --- a/src/app/components/ArticleLinksBlock/Promo/index.tsx +++ b/src/app/components/ArticleLinksBlock/Promo/index.tsx @@ -5,6 +5,7 @@ import PromoTimestamp from '#components/Promo/timestamp'; import { OptimoBlock } from '#app/models/types/optimo'; import { EventTrackingMetadata } from '#app/models/types/eventTracking'; import useClickTrackerHandler from '#app/hooks/useClickTrackerHandler'; +import { Chevron, ChevronOrientation } from '#app/components/icons'; import { ServiceContext } from '../../../contexts/ServiceContext'; import styles from './index.styles'; @@ -14,7 +15,7 @@ interface PromoProps { } function Promo({ block, eventTrackingData }: PromoProps) { - const { serviceDatetimeLocale } = use(ServiceContext); + const { serviceDatetimeLocale, dir } = use(ServiceContext); const clickTrackerHandler = useClickTrackerHandler(eventTrackingData); const textBlock = filterForBlockType( @@ -41,6 +42,11 @@ function Promo({ block, eventTrackingData }: PromoProps) {
{title} + {timestamp && ( Date: Tue, 30 Dec 2025 16:47:43 +0000 Subject: [PATCH 05/10] update margin properties at all breakpoints --- .../PromoList/index.styles.tsx | 28 +++++-------------- 1 file changed, 7 insertions(+), 21 deletions(-) diff --git a/src/app/components/ArticleLinksBlock/PromoList/index.styles.tsx b/src/app/components/ArticleLinksBlock/PromoList/index.styles.tsx index 703abd1bbd9..99c3314f9d3 100644 --- a/src/app/components/ArticleLinksBlock/PromoList/index.styles.tsx +++ b/src/app/components/ArticleLinksBlock/PromoList/index.styles.tsx @@ -29,49 +29,35 @@ export default { css({ display: 'flex', flexShrink: 0, + marginInline: `${spacings.FULL}rem`, [mq.FORCED_COLOURS]: { border: `solid ${pixelsToRem(3)}rem transparent`, }, - [mq.GROUP_0_MAX_WIDTH]: { - '&:first-of-type': { - marginInlineStart: `${spacings.FULL}rem`, - }, - '&:last-of-type': { - marginInlineEnd: `${spacings.FULL}rem`, - }, - }, - [mq.GROUP_2_MIN_WIDTH]: { - '&:first-of-type': { - marginInlineStart: `${spacings.DOUBLE}rem`, - }, + marginInline: `${spacings.DOUBLE}rem`, }, [mq.GROUP_3_MIN_WIDTH]: { - '&:first-of-type': { - marginInlineStart: `${spacings.DOUBLE}rem`, - }, + marginInline: `${spacings.DOUBLE}rem`, }, [mq.GROUP_4_MIN_WIDTH]: { - '&:first-of-type': { - marginInlineStart: 0, - }, + marginInline: 0, }, }), operaStyledList: ({ mq, spacings }: Theme) => css({ [mq.GROUP_0_MAX_WIDTH]: { - marginInlineStart: `${spacings.FULL}rem`, + marginInline: `${spacings.FULL}rem`, }, [mq.GROUP_2_MIN_WIDTH]: { - marginInlineStart: `${spacings.DOUBLE}rem`, + marginInline: `${spacings.DOUBLE}rem`, }, [mq.GROUP_4_MIN_WIDTH]: { - marginInlineStart: 0, + marginInline: 0, }, }), }; From 88254a53d4fa8301c0fc69d1642b9e8cc956e863 Mon Sep 17 00:00:00 2001 From: Louise Archibald Date: Tue, 30 Dec 2025 17:33:31 +0000 Subject: [PATCH 06/10] remove scrollable css and update variable names --- .../ArticleLinksBlock/Promo/index.styles.tsx | 13 ++----------- .../PromoList/index.styles.tsx | 17 ++++++----------- .../ArticleLinksBlock/PromoList/index.tsx | 6 ++---- 3 files changed, 10 insertions(+), 26 deletions(-) diff --git a/src/app/components/ArticleLinksBlock/Promo/index.styles.tsx b/src/app/components/ArticleLinksBlock/Promo/index.styles.tsx index ad2210b8f2d..40acd651b55 100644 --- a/src/app/components/ArticleLinksBlock/Promo/index.styles.tsx +++ b/src/app/components/ArticleLinksBlock/Promo/index.styles.tsx @@ -21,25 +21,16 @@ export default { color: palette.GREY_6, }, }), - promoBox: ({ isDarkUi, mq, palette, spacings }: Theme) => + promoBox: ({ isDarkUi, palette, spacings }: Theme) => css({ position: 'relative', backgroundColor: isDarkUi ? palette.GREY_3 : palette.WHITE, padding: `${spacings.DOUBLE}rem`, paddingInlineEnd: `${pixelsToRem(38)}rem`, - marginBottom: `${spacings.FULL}rem`, + gap: `${spacings.FULL}rem`, height: 'auto', display: 'block', width: '100%', - // [mq.GROUP_0_MAX_WIDTH]: { - // width: `14.8125rem`, - // }, - // [mq.GROUP_3_MIN_WIDTH]: { - // width: `11.125rem`, - // }, - // [mq.GROUP_4_MIN_WIDTH]: { - // width: '100%', - // }, }), operaPromoBox: ({ isDarkUi, mq, palette, spacings }: Theme) => css({ diff --git a/src/app/components/ArticleLinksBlock/PromoList/index.styles.tsx b/src/app/components/ArticleLinksBlock/PromoList/index.styles.tsx index 99c3314f9d3..b49fc6bae69 100644 --- a/src/app/components/ArticleLinksBlock/PromoList/index.styles.tsx +++ b/src/app/components/ArticleLinksBlock/PromoList/index.styles.tsx @@ -2,24 +2,16 @@ import pixelsToRem from '#app/utilities/pixelsToRem'; import { css, Theme } from '@emotion/react'; export default { - standardScrollPromo: () => + standardPromo: ({ spacings }: Theme) => css({ listStyle: 'none', paddingInlineStart: '0', margin: '0', display: 'flex', flexDirection: 'column', - overflowX: 'scroll', - scrollBehavior: 'auto', - WebkitOverflowScrolling: 'touch', - // Hide scrollbar - scrollbarWidth: 'none', - msOverflowStyle: 'none', - '&::-webkit-scrollbar': { - display: 'none', - }, + gap: `${spacings.FULL}rem`, }), - operaScrollPromo: () => + operaPromo: () => css({ listStyle: 'none', paddingInlineStart: '0', @@ -30,6 +22,9 @@ export default { display: 'flex', flexShrink: 0, marginInline: `${spacings.FULL}rem`, + ':last-of-type': { + marginBottom: `${spacings.TRIPLE}rem`, + }, [mq.FORCED_COLOURS]: { border: `solid ${pixelsToRem(3)}rem transparent`, }, diff --git a/src/app/components/ArticleLinksBlock/PromoList/index.tsx b/src/app/components/ArticleLinksBlock/PromoList/index.tsx index 94f2474fd39..176bd5e31af 100644 --- a/src/app/components/ArticleLinksBlock/PromoList/index.tsx +++ b/src/app/components/ArticleLinksBlock/PromoList/index.tsx @@ -20,9 +20,7 @@ const PromoList = ({ const isOperaMini = useOperaMiniDetection(); const listBlocks = blocks.slice(0, 3); - const scrollablePromoStyles = isOperaMini - ? styles.operaScrollPromo - : styles.standardScrollPromo; + const promoStyles = isOperaMini ? styles.operaPromo : styles.standardPromo; const listStyles = isOperaMini ? styles.operaStyledList : styles.list; @@ -34,7 +32,7 @@ const PromoList = ({ // // {...viewTracker} // // {...a11yAttributes} // > -
    +
      {listBlocks.map((block, index) => { return (
    • Date: Wed, 31 Dec 2025 12:13:19 +0000 Subject: [PATCH 07/10] name change --- src/app/components/ArticleLinksBlock/PromoList/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/ArticleLinksBlock/PromoList/index.tsx b/src/app/components/ArticleLinksBlock/PromoList/index.tsx index b1b4ca63fdf..dac46a2e665 100644 --- a/src/app/components/ArticleLinksBlock/PromoList/index.tsx +++ b/src/app/components/ArticleLinksBlock/PromoList/index.tsx @@ -26,7 +26,7 @@ const PromoList = ({ return (
      Date: Wed, 31 Dec 2025 13:05:43 +0000 Subject: [PATCH 08/10] resolving conflict --- src/app/components/ArticleLinksBlock/PromoList/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/ArticleLinksBlock/PromoList/index.tsx b/src/app/components/ArticleLinksBlock/PromoList/index.tsx index 313140f6544..67eeab46a31 100644 --- a/src/app/components/ArticleLinksBlock/PromoList/index.tsx +++ b/src/app/components/ArticleLinksBlock/PromoList/index.tsx @@ -21,7 +21,7 @@ const PromoList = ({ blocks, eventTrackingData }: PromoListProps) => { const listStyles = isOperaMini ? styles.operaStyledList : styles.list; return ( -
      +
        {listBlocks.map((block, index) => { return ( From 4fbf40179c48fd34c370bf0130531cda0cdcde15 Mon Sep 17 00:00:00 2001 From: Louise Archibald Date: Wed, 31 Dec 2025 13:24:26 +0000 Subject: [PATCH 09/10] fix styling error after merge --- .../ArticleLinksBlock/PromoList/index.styles.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/app/components/ArticleLinksBlock/PromoList/index.styles.tsx b/src/app/components/ArticleLinksBlock/PromoList/index.styles.tsx index b49fc6bae69..ce6581ba934 100644 --- a/src/app/components/ArticleLinksBlock/PromoList/index.styles.tsx +++ b/src/app/components/ArticleLinksBlock/PromoList/index.styles.tsx @@ -4,12 +4,14 @@ import { css, Theme } from '@emotion/react'; export default { standardPromo: ({ spacings }: Theme) => css({ - listStyle: 'none', - paddingInlineStart: '0', - margin: '0', - display: 'flex', - flexDirection: 'column', - gap: `${spacings.FULL}rem`, + '& ul': { + listStyle: 'none', + paddingInlineStart: '0', + margin: '0', + display: 'flex', + flexDirection: 'column', + gap: `${spacings.FULL}rem`, + }, }), operaPromo: () => css({ From 7947fa9b99f0030a50267cd675d93511282b7330 Mon Sep 17 00:00:00 2001 From: Louise Archibald Date: Wed, 31 Dec 2025 14:47:22 +0000 Subject: [PATCH 10/10] fix margin issue and delete leftover scroll css --- .../components/ArticleLinksBlock/Promo/index.styles.tsx | 1 - .../ArticleLinksBlock/PromoList/index.styles.tsx | 9 ++++++--- src/app/components/ArticleLinksBlock/index.styles.tsx | 9 ++------- 3 files changed, 8 insertions(+), 11 deletions(-) diff --git a/src/app/components/ArticleLinksBlock/Promo/index.styles.tsx b/src/app/components/ArticleLinksBlock/Promo/index.styles.tsx index 40acd651b55..5238016e733 100644 --- a/src/app/components/ArticleLinksBlock/Promo/index.styles.tsx +++ b/src/app/components/ArticleLinksBlock/Promo/index.styles.tsx @@ -27,7 +27,6 @@ export default { backgroundColor: isDarkUi ? palette.GREY_3 : palette.WHITE, padding: `${spacings.DOUBLE}rem`, paddingInlineEnd: `${pixelsToRem(38)}rem`, - gap: `${spacings.FULL}rem`, height: 'auto', display: 'block', width: '100%', diff --git a/src/app/components/ArticleLinksBlock/PromoList/index.styles.tsx b/src/app/components/ArticleLinksBlock/PromoList/index.styles.tsx index ce6581ba934..ac0c7f08f80 100644 --- a/src/app/components/ArticleLinksBlock/PromoList/index.styles.tsx +++ b/src/app/components/ArticleLinksBlock/PromoList/index.styles.tsx @@ -11,6 +11,9 @@ export default { display: 'flex', flexDirection: 'column', gap: `${spacings.FULL}rem`, + // wordWrap: 'break-word', + // overflowWrap: 'break-word', + width: '100%', }, }), operaPromo: () => @@ -23,7 +26,7 @@ export default { css({ display: 'flex', flexShrink: 0, - marginInline: `${spacings.FULL}rem`, + marginInline: `${spacings.HALF}rem`, ':last-of-type': { marginBottom: `${spacings.TRIPLE}rem`, }, @@ -32,11 +35,11 @@ export default { }, [mq.GROUP_2_MIN_WIDTH]: { - marginInline: `${spacings.DOUBLE}rem`, + marginInline: `${spacings.FULL}rem`, }, [mq.GROUP_3_MIN_WIDTH]: { - marginInline: `${spacings.DOUBLE}rem`, + marginInline: `${spacings.FULL}rem`, }, [mq.GROUP_4_MIN_WIDTH]: { diff --git a/src/app/components/ArticleLinksBlock/index.styles.tsx b/src/app/components/ArticleLinksBlock/index.styles.tsx index 9cd06e02cd8..510e65a7a26 100644 --- a/src/app/components/ArticleLinksBlock/index.styles.tsx +++ b/src/app/components/ArticleLinksBlock/index.styles.tsx @@ -10,11 +10,6 @@ export default { display: 'flex', overflowX: 'auto', width: '100vw', - '-ms-overflow-style': 'none', - scrollbarWidth: 'none', - '&::-webkit-scrollbar': { - display: 'none', - }, [mq.GROUP_2_MIN_WIDTH]: { padding: `0 ${spacings.DOUBLE}rem ${spacings.DOUBLE}rem`, margin: '0 -0.2rem', @@ -52,11 +47,11 @@ export default { }, [mq.GROUP_0_MAX_WIDTH]: { - marginInlineStart: `${spacings.FULL}rem`, + marginInline: `${spacings.FULL}rem`, margin: 0, }, [mq.GROUP_2_MIN_WIDTH]: { - marginInlineStart: `${spacings.DOUBLE}rem`, + marginInline: `${spacings.DOUBLE}rem`, padding: `0 ${spacings.DOUBLE}rem`, margin: '0 -0.2rem', },