[copilot] Front end build for new topic discovery component

src/app/components/TopicDiscovery/README.md

@@ -0,0 +1,71 @@
+# TopicDiscovery
+
+A tabbed content discovery component for article pages that surfaces closely related content based on topic-tag recommendations returned by the BFF (currently using fixture).
+This component is intended to help readers continue exploring relevant content without manually searching, while enabling product teams to validate whether topic-based recommendations improve engagement and session depth.
+
+## Overview
+
+`TopicDiscovery` renders a topic-based recommendation module using BFF-provided data. Each topic is displayed as a tab, and selecting a tab reveals up to 4 associated content promos.
+
+The component is:
+
+- **Frontend-only**
+- **Canonical-only** (not supported on AMP or lite)
+- Designed for **experiment-based rollout**
+- Instrumented for **analytics tracking**
+- Built with **responsive** and **keyboard-accessible** behaviour in mind
+
+## Features
+
+- Renders only when valid topic discovery data is available
+- Displays recommendations grouped into tabs by topic
+- Supports:
+  - `article`
+  - `video`
+  - `audio`
+- Shows the latest 4 items per topic (as provided by the BFF)
+- Includes horizontally scrollable tabs with arrow controls
+- Supports keyboard navigation across tabs
+- Tracks:
+  - component impressions
+  - promo clicks
+  - tab interactions (via click handler where required)
+- Reuses existing `CurationGrid` promo rendering patterns
+
+## Usage
+
+Minimal topicDiscovery shape:
+
+```json
+{
+  "topics": [
+    {
+      "topicId": "env",
+      "topicName": "Environment",
+      "items": [
+        {
+          "id": "item-1",
+          "title": "Climate action update",
+          "link": "/news/articles/item-1",
+          "imageUrl": "https://ichef.test.bbci.co.uk/images/ic/{width}xn/p01wjx8g.jpg",
+          "imageAlt": "Wind turbines",
+          "type": "article",
+          "description": "Short summary",
+          "firstPublished": 1600000000000
+        }
+      ]
+    }
+  ]
+}
+```
+
+Example usage:
+
+```tsx
+import TopicDiscovery from '#app/components/TopicDiscovery';
+
+<TopicDiscovery
+  topicDiscovery={topicDiscoveryData}
+  headingText="Explore related topics"
+/>;
+```

src/app/components/TopicDiscovery/ScrollableTabs/index.styles.ts

@@ -0,0 +1,153 @@
+import { css, Theme } from '@emotion/react';
+import pixelsToRem from '#app/utilities/pixelsToRem';
+
+const styles = {
+  wrapper: ({ palette, spacings }: Theme) =>
+    css({
+      display: 'flex',
+      alignItems: 'center',
+      gap: `${spacings.HALF}rem`,
+      borderBottom: `${pixelsToRem(1)}rem solid ${palette.GREY_5}`,
+    }),
+
+  tabList: () =>
+    css({
+      display: 'flex',
+      overflowX: 'auto',
+      scrollBehavior: 'auto',
+      scrollbarWidth: 'none',
+      msOverflowStyle: 'none',
+      '&::-webkit-scrollbar': {
+        display: 'none',
+      },
+    }),
+
+  tab: ({ palette, spacings, fontSizes, fontVariants, mq }: Theme) =>
+    css({
+      ...fontVariants.sansBold,
+      ...fontSizes.pica,
+      position: 'relative',
+      whiteSpace: 'nowrap',
+      background: 'none',
+      border: 'none',
+      padding: `${pixelsToRem(12)}rem ${spacings.FULL}rem`,
+      cursor: 'pointer',
+      color: palette.GREY_10,
+
+      [mq.FORCED_COLOURS]: {
+        forcedColorAdjust: 'none',
+        color: 'ButtonText',
+        fill: 'ButtonText',
+      },
+
+      '&:hover': {
+        '&::after': {
+          content: '""',
+          position: 'absolute',
+          left: 0,
+          bottom: 0,
+          width: '100%',
+          height: `${spacings.HALF}rem`,
+          background: palette.POSTBOX,
+          zIndex: 2,
+        },
+      },
+      '[type=button]&:focus-visible': {
+        outlineOffset: `${pixelsToRem(-3)}rem`,
+        boxShadow: 'none',
+      },
+    }),
+
+  tabActive: ({ spacings, palette }: Theme) =>
+    css({
+      '&::after': {
+        content: '""',
+        position: 'absolute',
+        left: 0,
+        bottom: 0,
+        width: '100%',
+        height: `${spacings.HALF}rem`,
+        background: palette.POSTBOX,
+        zIndex: 1,
+      },
+    }),
+
+  scrollButton: ({ palette, spacings }: Theme) =>
+    css({
+      position: 'relative',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: `${pixelsToRem(44)}rem`,
+      height: `${pixelsToRem(44)}rem`,
+      background: 'none',
+      border: 'none',
+      cursor: 'pointer',
+      padding: 0,
+      color: palette.GREY_10,
+      '& svg': {
+        width: `${spacings.DOUBLE}rem`,
+        height: `${spacings.DOUBLE}rem`,
+        fill: 'currentcolor',
+      },
+      '&:disabled': {
+        cursor: 'default',
+        color: `${palette.GREY_5}`,
+      },
+      '[type=button]&:focus-visible': {
+        outlineOffset: `${pixelsToRem(-3)}rem`,
+        boxShadow: 'none',
+      },
+    }),
+
+  scrollButtonWrapper: () =>
+    css({
+      position: 'relative',
+      flexShrink: 0,
+      display: 'flex',
+      alignItems: 'center',
+    }),
+
+  scrollButtonWrapperHidden: () =>
+    css({
+      display: 'none',
+    }),
+
+  scrollButtonFadeStart: ({ palette, spacings }: Theme) =>
+    css({
+      position: 'absolute',
+      top: 0,
+      height: '100%',
+      width: `${spacings.TRIPLE}rem`,
+      pointerEvents: 'none',
+      zIndex: 1,
+      "[dir='ltr'] &": {
+        right: `-${spacings.TRIPLE}rem`,
+        background: `linear-gradient(to right, ${palette.GREY_2}, ${palette.GREY_2}00)`,
+      },
+      "[dir='rtl'] &": {
+        left: `-${spacings.TRIPLE}rem`,
+        background: `linear-gradient(to right, ${palette.GREY_2}00, ${palette.GREY_2})`,
+      },
+    }),
+
+  scrollButtonFadeEnd: ({ palette, spacings }: Theme) =>
+    css({
+      position: 'absolute',
+      top: 0,
+      height: '100%',
+      width: `${spacings.TRIPLE}rem`,
+      pointerEvents: 'none',
+      zIndex: 1,
+      "[dir='ltr'] &": {
+        left: `-${spacings.TRIPLE}rem`,
+        background: `linear-gradient(to right, ${palette.GREY_2}00, ${palette.GREY_2})`,
+      },
+      "[dir='rtl'] &": {
+        right: `-${spacings.TRIPLE}rem`,
+        background: `linear-gradient(to right, ${palette.GREY_2}, ${palette.GREY_2}00)`,
+      },
+    }),
+};
+
+export default styles;

src/app/components/TopicDiscovery/ScrollableTabs/index.test.tsx

@@ -0,0 +1,123 @@
+import {
+  render,
+  screen,
+  fireEvent,
+} from '#app/components/react-testing-library-with-providers';
+import * as clickTrackerHook from '#app/hooks/useClickTrackerHandler';
+import ScrollableTabs from '.';
+
+const mockTabs = [
+  { id: 'tab-1', label: 'Comportamento' },
+  { id: 'tab-2', label: 'Mídia social' },
+  { id: 'tab-3', label: 'Psicologia' },
+];
+
+describe('ScrollableTabs', () => {
+  it('should render all tabs', () => {
+    render(
+      <ScrollableTabs
+        tabs={mockTabs}
+        activeTabId="tab-1"
+        onTabChange={jest.fn()}
+        labelledBy="heading-id"
+      />,
+    );
+
+    expect(
+      screen.getByRole('tab', { name: 'Comportamento' }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('tab', { name: 'Mídia social' }),
+    ).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: 'Psicologia' })).toBeInTheDocument();
+  });
+
+  it('should mark the active tab with aria-selected true', () => {
+    render(
+      <ScrollableTabs
+        tabs={mockTabs}
+        activeTabId="tab-2"
+        onTabChange={jest.fn()}
+        labelledBy="heading-id"
+      />,
+    );
+
+    expect(screen.getByRole('tab', { name: 'Mídia social' })).toHaveAttribute(
+      'aria-selected',
+      'true',
+    );
+    expect(screen.getByRole('tab', { name: 'Comportamento' })).toHaveAttribute(
+      'aria-selected',
+      'false',
+    );
+    expect(screen.getByRole('tab', { name: 'Psicologia' })).toHaveAttribute(
+      'aria-selected',
+      'false',
+    );
+  });
+
+  it('should call onTabChange when a tab is clicked', () => {
+    const onTabChange = jest.fn();
+
+    render(
+      <ScrollableTabs
+        tabs={mockTabs}
+        activeTabId="tab-1"
+        onTabChange={onTabChange}
+        labelledBy="heading-id"
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('tab', { name: 'Mídia social' }));
+    expect(onTabChange).toHaveBeenCalledWith('tab-2');
+  });
+
+  it('should call clickTrackerHandler onClick when a tab is clicked', () => {
+    const mockClickHandler = jest.fn();
+    jest
+      .spyOn(clickTrackerHook, 'default')
+      .mockReturnValue({ onClick: mockClickHandler });
+
+    render(
+      <ScrollableTabs
+        tabs={mockTabs}
+        activeTabId="tab-1"
+        onTabChange={jest.fn()}
+        labelledBy="heading-id"
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('tab', { name: 'Mídia social' }));
+    expect(mockClickHandler).toHaveBeenCalledTimes(1);
+  });
+
+  it('should render a tablist with the correct aria-labelledby', () => {
+    render(
+      <ScrollableTabs
+        tabs={mockTabs}
+        activeTabId="tab-1"
+        onTabChange={jest.fn()}
+        labelledBy="my-heading"
+      />,
+    );
+
+    expect(screen.getByRole('tablist')).toHaveAttribute(
+      'aria-labelledby',
+      'my-heading',
+    );
+  });
+
+  it('should render scroll buttons', () => {
+    render(
+      <ScrollableTabs
+        tabs={mockTabs}
+        activeTabId="tab-1"
+        onTabChange={jest.fn()}
+        labelledBy="heading-id"
+      />,
+    );
+
+    expect(screen.getByTestId('scroll-start')).toBeInTheDocument();
+    expect(screen.getByTestId('scroll-end')).toBeInTheDocument();
+  });
+});