WS-1883 - Bring Article Links Block up to component standards

cypress/e2e/specialFeatures/atiAnalytics/helpers/index.js

@@ -26,7 +26,7 @@ const RECENT_AUDIO_EPISODES = 'episodes-audio';
 const PODCAST_LINKS = 'third-party';
 const LATEST_MEDIA = 'latest';
 const RECOMMENDATIONS = 'midarticle-mostread';
-const SCROLLABLE_PROMO = 'edoj';
+const ARTICLE_LINKS_BLOCK = 'edoj';
 const BILLBOARD = 'billboard';
 const SOCIAL_EMBED = 'social-consent-banner';
 const LIVE_MEDIA = 'live-header-media';
@@ -52,7 +52,7 @@ export const COMPONENTS = {
   RELATED_CONTENT,
   RELATED_TOPICS,
   SCROLLABLE_NAVIGATION,
-  SCROLLABLE_PROMO,
+  ARTICLE_LINKS_BLOCK,
   SHARE,
   SOCIAL_EMBED,
   TOP_STORIES,

scripts/bundleSize/bundleSizeConfig.js

@@ -9,5 +9,5 @@
 
 export const VARIANCE = 5;
 
-export const MIN_SIZE = 922;
+export const MIN_SIZE = 921;
 export const MAX_SIZE = 1292;

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

@@ -0,0 +1,70 @@
+import { OPERA_MINI_CLASSNAME } from '#app/lib/utilities/addOperaMiniClassScript';
+import pixelsToRem from '#app/utilities/pixelsToRem';
+import { css, Theme } from '@emotion/react';
+
+export default {
+  link: ({ fontSizes, fontVariants, isDarkUi, palette }: Theme) =>
+    css({
+      ...fontSizes.pica,
+      ...fontVariants.serifBold,
+      display: 'inline-block',
+      verticalAlign: 'middle',
+      textDecoration: 'none',
+      overflowX: 'hidden',
+      overflowY: 'hidden',
+      WebkitLineClamp: 4,
+      WebkitBoxOrient: 'vertical',
+      color: isDarkUi ? palette.GREY_10 : palette.GREY_8,
+
+      '&:hover, &:focus': {
+        textDecoration: 'underline',
+      },
+
+      '&:visited': {
+        color: palette.GREY_6,
+      },
+
+      '&::before': {
+        bottom: 0,
+        content: '""',
+        left: 0,
+        overflow: 'hidden',
+        position: 'absolute',
+        right: 0,
+        top: 0,
+        zIndex: 1,
+      },
+    }),
+  promoBox: ({ isDarkUi, mq, palette, spacings }: Theme) =>
+    css({
+      position: 'relative',
+      backgroundColor: isDarkUi ? palette.GREY_3 : palette.WHITE,
+      padding: `${spacings.DOUBLE}rem`,
+      paddingInlineEnd: `${pixelsToRem(38)}rem`,
+      height: 'auto',
+      display: 'block',
+      width: '100%',
+      [`.${OPERA_MINI_CLASSNAME} &`]: {
+        position: 'relative',
+        backgroundColor: isDarkUi ? palette.GREY_3 : palette.WHITE,
+        padding: `${spacings.DOUBLE}rem`,
+        marginBottom: `${spacings.DOUBLE}rem`,
+        width: `calc(100% - ${spacings.FULL}rem)`,
+        [mq.GROUP_2_MIN_WIDTH]: {
+          width: `calc(50% - ${spacings.DOUBLE}rem)`,
+        },
+      },
+    }),
+  timestamp: ({ isDarkUi, palette, spacings }: Theme) =>
+    css({
+      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.test.tsx

@@ -0,0 +1,45 @@
+import { render } from '../../react-testing-library-with-providers';
+import { PromoSingleBlock, oneLinkWithTimestamp } from '../helpers/fixtureData';
+import Promo from '.';
+import { ServiceContextProvider } from '../../../contexts/ServiceContext';
+
+const ArticleLinksBlock = ({ block }) => (
+  <ServiceContextProvider service="pidgin">
+    <Promo block={block} />
+  </ServiceContextProvider>
+);
+
+describe('Article Links Block', () => {
+  it('should render a link', () => {
+    const { queryByRole } = render(
+      <ArticleLinksBlock block={PromoSingleBlock} />,
+    );
+    expect(queryByRole('link')).toBeInTheDocument();
+  });
+
+  it('should extract and render the correct title', () => {
+    const { getByText } = render(
+      <ArticleLinksBlock block={PromoSingleBlock} />,
+    );
+    expect(
+      getByText(
+        'This is a very long headline. I am creating this for a test purpose. I love creating these type of tests. I really do not know what to write.',
+      ),
+    ).toBeTruthy();
+  });
+
+  it('should extract and render the correct href', () => {
+    const { queryByRole } = render(
+      <ArticleLinksBlock block={PromoSingleBlock} />,
+    );
+    const link = queryByRole('link') as HTMLAnchorElement;
+    expect(link?.href).toEqual('https://www.bbc.com/mundo');
+  });
+
+  it('should render timestamp if timestamp is available', () => {
+    const { container } = render(
+      <ArticleLinksBlock block={oneLinkWithTimestamp[0]} />,
+    );
+    expect(container.getElementsByTagName('time')[0]).toBeInTheDocument();
+  });
+});

src/app/components/ArticleLinksBlock/Promo/index.tsx

@@ -0,0 +1,56 @@
+import { use } from 'react';
+import filterForBlockType from '#lib/utilities/blockHandlers';
+import PromoTimestamp from '#components/Promo/timestamp';
+import { OptimoBlock } from '#app/models/types/optimo';
+import useClickTrackerHandler from '#app/hooks/useClickTrackerHandler';
+import { Chevron, ChevronOrientation } from '#app/components/icons';
+import { ServiceContext } from '../../../contexts/ServiceContext';
+import styles from './index.styles';
+
+interface PromoProps {
+  block: OptimoBlock;
+  clickTracker?: ReturnType<typeof useClickTrackerHandler>;
+}
+
+const Promo = ({ block, clickTracker }: PromoProps) => {
+  const { serviceDatetimeLocale, dir } = use(ServiceContext);
+
+  const textBlock = filterForBlockType(
+    (block?.model as { blocks?: Record<string, unknown> })?.blocks || {},
+    'text',
+  );
+  const aresLinkBlock = filterForBlockType(
+    (block?.model as { blocks?: Record<string, unknown> })?.blocks || {},
+    'aresLink',
+  );
+  const timestamp =
+    aresLinkBlock?.model?.blocks?.[0]?.model?.timestamp ?? undefined;
+
+  const href =
+    textBlock?.model?.blocks?.[0]?.model?.blocks?.[0]?.model?.locator ?? '';
+  const title =
+    textBlock?.model?.blocks?.[0]?.model?.blocks?.[0]?.model?.text ?? '';
+
+  return (
+    <div css={styles.promoBox}>
+      <a css={styles.link} href={href} {...clickTracker}>
+        {title}
+        <Chevron
+          dir={dir}
+          css={styles.chevron}
+          orientation={ChevronOrientation.FORWARD}
+        />
+      </a>
+      {timestamp && (
+        <PromoTimestamp
+          css={styles.timestamp}
+          serviceDatetimeLocale={serviceDatetimeLocale}
+        >
+          {timestamp}
+        </PromoTimestamp>
+      )}
+    </div>
+  );
+};
+
+export default Promo;

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

@@ -0,0 +1,60 @@
+import { OPERA_MINI_CLASSNAME } from '#app/lib/utilities/addOperaMiniClassScript';
+import pixelsToRem from '#app/utilities/pixelsToRem';
+import { css, Theme } from '@emotion/react';
+
+export default {
+  promo: ({ spacings }: Theme) =>
+    css({
+      '& ul': {
+        listStyle: 'none',
+        paddingInlineStart: '0',
+        margin: '0',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: `${spacings.FULL}rem`,
+        width: '100%',
+      },
+      [`.${OPERA_MINI_CLASSNAME} &`]: {
+        listStyle: 'none',
+        paddingInlineStart: '0',
+        margin: '0',
+      },
+    }),
+  list: ({ mq, spacings }: Theme) =>
+    css({
+      display: 'flex',
+      flexShrink: 0,
+      marginInline: `${spacings.FULL}rem`,
+      ':last-of-type': {
+        marginBottom: `${spacings.TRIPLE}rem`,
+      },
+      [mq.FORCED_COLOURS]: {
+        border: `solid ${pixelsToRem(3)}rem transparent`,
+      },
+
+      [mq.GROUP_2_MIN_WIDTH]: {
+        marginInline: `${spacings.DOUBLE}rem`,
+      },
+
+      [mq.GROUP_3_MIN_WIDTH]: {
+        marginInline: `${spacings.DOUBLE}rem`,
+      },
+
+      [mq.GROUP_4_MIN_WIDTH]: {
+        marginInline: 0,
+      },
+      [`.${OPERA_MINI_CLASSNAME} &`]: {
+        [mq.GROUP_0_MAX_WIDTH]: {
+          marginInline: `${spacings.FULL}rem`,
+        },
+
+        [mq.GROUP_2_MIN_WIDTH]: {
+          marginInline: `${spacings.DOUBLE}rem`,
+        },
+
+        [mq.GROUP_4_MIN_WIDTH]: {
+          marginInline: 0,
+        },
+      },
+    }),
+};

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

@@ -0,0 +1,35 @@
+import { OptimoBlock } from '#app/models/types/optimo';
+import { ViewTracker } from '#app/lib/analyticsUtils/types';
+import useClickTrackerHandler from '#app/hooks/useClickTrackerHandler';
+import Promo from '../Promo';
+import styles from './index.styles';
+
+interface PromoListProps {
+  blocks: OptimoBlock[];
+  viewTracker?: ViewTracker;
+  clickTracker?: ReturnType<typeof useClickTrackerHandler>;
+}
+
+const PromoList = ({ blocks, viewTracker, clickTracker }: PromoListProps) => {
+  const listBlocks = blocks.slice(0, 3);
+
+  return (
+    <div css={[styles.promo]} {...viewTracker}>
+      <ul>
+        {listBlocks.map((block, index) => {
+          return (
+            <li
+              css={styles.list}
+              // eslint-disable-next-line react/no-array-index-key
+              key={index}
+            >
+              <Promo block={block} clickTracker={clickTracker} />
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};
+
+export default PromoList;