WSTEAM1-1300 - Article election banner

src/app/components/AmpIframe/index.tsx

@@ -11,6 +11,7 @@ type Props = {
   width: number;
   height: number;
   src: string;
+  title?: string;
 };
 
 type ampMetadata = {
@@ -19,6 +20,7 @@ type ampMetadata = {
     imageHeight: number;
     image: string;
     src: string;
+    title?: string;
   };
 };
 
@@ -38,6 +40,7 @@ const AmpIframeElement = ({
   width,
   height,
   src,
+  title,
 }: PropsWithChildren<Props>) => (
   <amp-iframe
     class={className}
@@ -47,19 +50,25 @@ const AmpIframeElement = ({
     sandbox="allow-scripts allow-same-origin allow-top-navigation-by-user-activation allow-forms"
     resizable=""
     src={src}
+    title={title}
   >
     {children}
   </amp-iframe>
 );
 
 const AmpIframe = ({
-  ampMetadata: { imageWidth, imageHeight, image, src },
+  ampMetadata: { imageWidth, imageHeight, image, src, title },
 }: ampMetadata) => {
   return (
     <>
       <AmpHead />
       <GridItemMedium gridColumnStart={undefined} gridSpan={undefined}>
-        <AmpIframeElement width={imageWidth} height={imageHeight} src={src}>
+        <AmpIframeElement
+          width={imageWidth}
+          height={imageHeight}
+          src={src}
+          title={title}
+        >
           {/* @ts-expect-error Property 'overflow' does not exist on type 'DivProps & { css?: Interpolation<Theme>; }'. */}
           <div overflow="" css={styles.overflow}>
             <button type="button" css={styles.button}>

src/app/components/react-testing-library-with-providers.tsx

@@ -16,6 +16,7 @@ interface Props extends PropsWithChildren {
   id?: string | null;
   isAmp?: boolean;
   isApp?: boolean;
+  isLite?: boolean;
   pageData?: object;
   atiData?: ATIData;
   bbcOrigin?: string | null;
@@ -40,6 +41,7 @@ const AllTheProviders: FC<Props> = ({
   id = null,
   isAmp = false,
   isApp = false,
+  isLite = false,
   bbcOrigin = 'https://www.test.bbc.com',
   pageType = 'article',
   derivedPageType,
@@ -67,6 +69,7 @@ const AllTheProviders: FC<Props> = ({
           pageType={pageType}
           isAmp={isAmp}
           isApp={isApp}
+          isLite={isLite}
           isNextJs={isNextJs}
           service={service}
           pathname={pathname}
@@ -97,6 +100,7 @@ const customRender = (
     id,
     isAmp,
     isApp,
+    isLite,
     bbcOrigin,
     pageData,
     pageType,
@@ -120,6 +124,7 @@ const customRender = (
         id={id}
         isAmp={isAmp}
         isApp={isApp}
+        isLite={isLite}
         bbcOrigin={bbcOrigin}
         pageData={pageData}
         atiData={atiData}

src/app/lib/config/toggles/__snapshots__/index.test.js.snap

@@ -55,6 +55,9 @@ exports[`Toggles Config when application environment is local should contain cor
   "ads": {
     "enabled": false,
   },
+  "articleElectionBanner": {
+    "enabled": true,
+  },
   "chartbeatAnalytics": {
     "enabled": true,
   },

src/app/lib/config/toggles/localConfig.js

@@ -3,6 +3,9 @@ export default {
   ads: {
     enabled: false,
   },
+  articleElectionBanner: {
+    enabled: true,
+  },
   chartbeatAnalytics: {
     enabled: true,
   },

src/app/pages/ArticlePage/ArticlePage.tsx

@@ -39,6 +39,8 @@ import CpsRecommendations from '#containers/CpsRecommendations';
 import InlinePodcastPromo from '#containers/PodcastPromo/Inline';
 import { Article, OptimoBylineBlock } from '#app/models/types/optimo';
 import ScrollablePromo from '#components/ScrollablePromo';
+import ElectionBanner from './ElectionBanner';
+
 import ImageWithCaption from '../../components/ImageWithCaption';
 import AdContainer from '../../components/Ad';
 import EmbedImages from '../../components/Embeds/EmbedImages';
@@ -99,7 +101,7 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
   const aboutTags = getAboutTags(pageData);
   const topics = pageData?.metadata?.topics ?? [];
   const blocks = pageData?.content?.model?.blocks ?? [];
-  const startsWithHeading = blocks?.[0]?.type === 'headline' ?? false;
+  const startsWithHeading = blocks?.[0]?.type === 'headline' || false;
 
   const bylineBlock = blocks.find(
     block => block.type === 'byline',
@@ -271,6 +273,7 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
       {allowAdvertising && (
         <AdContainer slotType="leaderboard" adcampaign={adcampaign} />
       )}
+      <ElectionBanner aboutTags={aboutTags} />
       <div css={styles.grid}>
         <div css={!isPGL ? styles.primaryColumn : styles.pglColumn}>
           <main css={styles.mainContent} role="main">

src/app/pages/ArticlePage/ElectionBanner/config.ts

@@ -0,0 +1,14 @@
+import { getEnvConfig } from '#app/lib/utilities/getEnvConfig';
+
+const IFRAME_BASE_URL = getEnvConfig().SIMORGH_INCLUDES_BASE_URL;
+
+export default {
+  iframeHeight: 324,
+  iframeSrc: `${IFRAME_BASE_URL}/include/vjafwest/1365-2024-us-presidential-election-banner/develop/{service}/app`,
+  iframeSrcAmp: `${IFRAME_BASE_URL}/include/vjafwest/1365-2024-us-presidential-election-banner/develop/{service}/app/amp`,
+  iframeTitle: 'US Election results',
+  thingIds: [
+    '647d5613-e0e2-4ef5-b0ce-b491de38bdbd', // https://www.bbc.co.uk/things/647d5613-e0e2-4ef5-b0ce-b491de38bdbd
+    '82857f8e-8134-462a-bb32-b7b14f4eab75', // https://www.bbc.co.uk/things/82857f8e-8134-462a-bb32-b7b14f4eab75
+  ],
+};

src/app/pages/ArticlePage/ElectionBanner/index.styles.ts

@@ -0,0 +1,40 @@
+import { css, Theme } from '@emotion/react';
+import pixelsToRem from '#app/utilities/pixelsToRem';
+import BANNER_CONFIG from './config';
+
+const IFRAME_STYLES = css({
+  border: 'none',
+  width: '100%',
+  height: `${pixelsToRem(BANNER_CONFIG.iframeHeight)}rem`,
+});
+
+export default {
+  electionBannerWrapper: ({ mq, spacings }: Theme) =>
+    css({
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      maxWidth: '63rem',
+      margin: '0 auto',
+
+      [mq.GROUP_3_MIN_WIDTH]: {
+        paddingTop: `${spacings.QUINTUPLE}rem`,
+      },
+    }),
+
+  electionBannerIframe: () => IFRAME_STYLES,
+
+  electionBannerWrapperAmp: ({ mq, spacings }: Theme) =>
+    css({
+      overflow: 'hidden',
+      maxWidth: '63rem',
+      margin: '0 auto',
+
+      [mq.GROUP_3_MIN_WIDTH]: {
+        paddingTop: `${spacings.QUINTUPLE}rem`,
+      },
+
+      '> div': { padding: '0' },
+      '& amp-iframe': IFRAME_STYLES,
+    }),
+};

src/app/pages/ArticlePage/ElectionBanner/index.test.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import { render } from '#app/components/react-testing-library-with-providers';
+import { Tag } from '#app/components/Metadata/types';
+import isLive from '#app/lib/utilities/isLive';
+import BANNER_CONFIG from './config';
+import ElectionBanner from '.';
+
+jest.mock('#app/lib/utilities/isLive', () =>
+  jest.fn().mockImplementation(() => false),
+);
+
+const mockAboutTags = [
+  { thingId: 'thing1' },
+  { thingId: BANNER_CONFIG.thingIds[0] },
+  { thingId: 'thing3' },
+  { thingId: BANNER_CONFIG.thingIds[1] },
+] as Tag[];
+
+const AMP_ELEMENT = 'election-banner-amp';
+const CANONICAL_ELEMENT = 'election-banner';
+
+describe('ElectionBanner', () => {
+  it('should not render ElectionBanner when isLite is true', () => {
+    const { queryByTestId } = render(
+      <ElectionBanner aboutTags={mockAboutTags} />,
+      { isLite: true },
+    );
+
+    expect(queryByTestId(CANONICAL_ELEMENT)).not.toBeInTheDocument();
+  });
+
+  describe.each(['canonical', 'amp'])('%s', platform => {
+    const isAmp = platform === 'amp';
+    const bannerElement = isAmp ? AMP_ELEMENT : CANONICAL_ELEMENT;
+
+    it('should render ElectionBanner when aboutTags contain the correct thingLabel', () => {
+      const { getByTestId } = render(
+        <ElectionBanner aboutTags={mockAboutTags} />,
+        {
+          toggles: { articleElectionBanner: { enabled: true } },
+          isAmp,
+        },
+      );
+
+      expect(getByTestId(bannerElement)).toBeInTheDocument();
+
+      const iframe = getByTestId(bannerElement).querySelector(
+        isAmp ? 'amp-iframe' : 'iframe',
+      );
+
+      expect(iframe).toHaveAttribute(
+        'src',
+        BANNER_CONFIG[isAmp ? 'iframeSrcAmp' : 'iframeSrc'].replace(
+          '{service}',
+          'news',
+        ),
+      );
+    });
+
+    it('should not render ElectionBanner when aboutTags do not contain the correct thingLabel', () => {
+      const { queryByTestId } = render(
+        <ElectionBanner aboutTags={[{ thingLabel: 'thing1' }] as Tag[]} />,
+        { isAmp },
+      );
+
+      expect(queryByTestId(bannerElement)).not.toBeInTheDocument();
+    });
+
+    it('should not render ElectionBanner when aboutTags is empty', () => {
+      const { queryByTestId } = render(<ElectionBanner aboutTags={[]} />, {
+        isAmp,
+      });
+
+      expect(queryByTestId(bannerElement)).not.toBeInTheDocument();
+    });
+
+    it('should not render ElectionBanner when toggle is disabled', () => {
+      const { queryByTestId } = render(
+        <ElectionBanner aboutTags={mockAboutTags} />,
+        {
+          toggles: { articleElectionBanner: { enabled: false } },
+          isAmp,
+        },
+      );
+
+      expect(queryByTestId(bannerElement)).not.toBeInTheDocument();
+    });
+
+    it('should not render ElectionBanner when isLive is true', () => {
+      (isLive as jest.Mock).mockImplementationOnce(() => true);
+
+      const { queryByTestId } = render(
+        <ElectionBanner aboutTags={mockAboutTags} />,
+        { isAmp },
+      );
+
+      expect(queryByTestId(bannerElement)).not.toBeInTheDocument();
+    });
+  });
+});

src/app/pages/ArticlePage/ElectionBanner/index.tsx

@@ -0,0 +1,68 @@
+/** @jsx jsx */
+
+import { jsx } from '@emotion/react';
+import { useContext } from 'react';
+import { RequestContext } from '#app/contexts/RequestContext';
+import AmpIframe from '#app/components/AmpIframe';
+import useToggle from '#app/hooks/useToggle';
+import { Tag } from '#app/components/Metadata/types';
+import isLive from '#app/lib/utilities/isLive';
+import { ServiceContext } from '#app/contexts/ServiceContext';
+import styles from './index.styles';
+import BANNER_CONFIG from './config';
+
+export default function ElectionBanner({ aboutTags }: { aboutTags: Tag[] }) {
+  const { service } = useContext(ServiceContext);
+  const { isAmp, isLite } = useContext(RequestContext);
+  const { enabled: electionBannerEnabled }: { enabled: boolean | null } =
+    useToggle('articleElectionBanner');
+
+  if (isLive()) return null; // TODO: Remove once going Live
+  if (isLite) return null;
+
+  const { iframeHeight, iframeSrc, iframeSrcAmp, iframeTitle, thingIds } =
+    BANNER_CONFIG;
+
+  const validAboutTag = aboutTags?.some(tag => thingIds.includes(tag.thingId));
+
+  const showBanner = validAboutTag && electionBannerEnabled;
+
+  if (!showBanner) return null;
+
+  if (isAmp) {
+    return (
+      <aside
+        role="complementary"
+        data-testid="election-banner-amp"
+        css={styles.electionBannerWrapperAmp}
+      >
+        <AmpIframe
+          ampMetadata={{
+            imageWidth: 1,
+            imageHeight: iframeHeight,
+            src: iframeSrcAmp.replace('{service}', service),
+            image:
+              'https://news.files.bbci.co.uk/include/vjassets/img/app-launcher.png',
+            title: iframeTitle,
+          }}
+        />
+      </aside>
+    );
+  }
+
+  return (
+    <aside
+      role="complementary"
+      data-testid="election-banner"
+      css={styles.electionBannerWrapper}
+    >
+      <iframe
+        title={iframeTitle}
+        src={iframeSrc.replace('{service}', service)}
+        scrolling="no"
+        css={styles.electionBannerIframe}
+        height={iframeHeight}
+      />
+    </aside>
+  );
+}