WS-1884 - Update Article Links Block to reflect new UX designs

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`,
+    }),
 };

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) {
     <div css={promoBoxStyles}>
       <a css={styles.link} href={href} {...clickTrackerHandler}>
         {title}
+        <Chevron
+          dir={dir}
+          css={styles.chevron}
+          orientation={ChevronOrientation.FORWARD}
+        />
       </a>
       {timestamp && (
         <PromoTimestamp

src/app/components/ArticleLinksBlock/PromoList/index.styles.tsx

@@ -2,31 +2,21 @@ import pixelsToRem from '#app/utilities/pixelsToRem';
 import { css, Theme } from '@emotion/react';
 
 export default {
-  standardScrollPromo: ({ mq, spacings }: Theme) =>
+  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,
       },
     }),
 };

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 (
-    <div css={[scrollablePromoStyles, listStyles]} dir={dir}>
+    <div css={[promoStyles, listStyles]} dir={dir}>
       <ul>
         {listBlocks.map((block, index) => {
           return (

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',
       },