diff --git a/src/app/components/ArticleLinksBlock/Promo/index.styles.tsx b/src/app/components/ArticleLinksBlock/Promo/index.styles.tsx index 9b0706d6dcc..5238016e733 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 { @@ -20,23 +21,15 @@ 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`, - marginBottom: `${spacings.TRIPLE}rem`, + paddingInlineEnd: `${pixelsToRem(38)}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%', }), operaPromoBox: ({ isDarkUi, mq, palette, spacings }: Theme) => css({ @@ -54,4 +47,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 && ( + standardPromo: ({ spacings }: Theme) => css({ - listStyle: 'none', - paddingInlineStart: '0', - margin: '0', - display: 'flex', - overflowX: 'scroll', - scrollBehavior: 'auto', - WebkitOverflowScrolling: 'touch', - // Hide scrollbar - scrollbarWidth: 'none', - msOverflowStyle: 'none', - '&::-webkit-scrollbar': { - display: 'none', - }, - '& > li + li': { - marginInlineStart: `${spacings.FULL}rem`, - }, - [mq.GROUP_2_MIN_WIDTH]: { - '& > li:not(:first-of-type)': { - marginInlineStart: `${spacings.DOUBLE}rem`, - }, + '& ul': { + listStyle: 'none', + paddingInlineStart: '0', + margin: '0', + display: 'flex', + flexDirection: 'column', + gap: `${spacings.FULL}rem`, + // wordWrap: 'break-word', + // overflowWrap: 'break-word', + width: '100%', }, }), - operaScrollPromo: () => + operaPromo: () => css({ listStyle: 'none', paddingInlineStart: '0', @@ -36,49 +26,38 @@ export default { css({ display: 'flex', flexShrink: 0, + marginInline: `${spacings.HALF}rem`, + ':last-of-type': { + marginBottom: `${spacings.TRIPLE}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.FULL}rem`, }, [mq.GROUP_3_MIN_WIDTH]: { - '&:first-of-type': { - marginInlineStart: `${spacings.DOUBLE}rem`, - }, + marginInline: `${spacings.FULL}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, }, }), }; diff --git a/src/app/components/ArticleLinksBlock/PromoList/index.tsx b/src/app/components/ArticleLinksBlock/PromoList/index.tsx index 65f82131f93..67eeab46a31 100644 --- a/src/app/components/ArticleLinksBlock/PromoList/index.tsx +++ b/src/app/components/ArticleLinksBlock/PromoList/index.tsx @@ -16,14 +16,12 @@ const PromoList = ({ blocks, eventTrackingData }: PromoListProps) => { 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; return ( -
+
    {listBlocks.map((block, index) => { return ( 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', },