Merge branch 'latest' into WSTEAM1-1567-LIVE-LARGE-BREAKPOINT

.eslintrc.js

@@ -60,6 +60,12 @@ module.exports = {
     'linebreak-style': process.platform === 'win32' ? 'off' : ['error', 'unix'],
     'react-hooks/rules-of-hooks': 'error',
     'react-hooks/exhaustive-deps': 'warn',
+    'import/no-import-module-exports': [
+      'error',
+      {
+        exceptions: ['**/*/startServer.js'],
+      },
+    ],
     'import/no-extraneous-dependencies': [
       'off',
       {
@@ -97,6 +103,14 @@ module.exports = {
         // adds support for type, interface and enum declarations https://typescript-eslint.io/rules/no-use-before-define/#how-to-use
         'no-use-before-define': 'off',
         '@typescript-eslint/no-use-before-define': ['error'],
+        '@typescript-eslint/no-unused-vars': [
+          'warn',
+          {
+            argsIgnorePattern: '^_',
+            varsIgnorePattern: '^_',
+            caughtErrorsIgnorePattern: '^_',
+          },
+        ],
         'react/require-default-props': 'off',
         'react/no-unused-prop-types': 'off',
       },

.github/dependabot.yml

@@ -15,9 +15,6 @@ updates:
         update-types: ['version-update:semver-major']
       - dependency-name: '@typescript-eslint/eslint-plugin'
         update-types: ['version-update:semver-major']
-      # https://jira.dev.bbc.co.uk/browse/WSTEAMA-1545 - Upgrade eslint-config-airbnb to the latest version
-      - dependency-name: eslint-config-airbnb
-        update-types: ['version-update:semver-major']
       # https://jira.dev.bbc.co.uk/browse/NEWSWORLDSERVICE-2186: Latest version of Emotion contains a memory leak that needs resolved: https://github.com/emotion-js/emotion/issues/3221
       - dependency-name: '@emotion/*'
       # Opera Mini unsupported packages

cypress/support/helpers/ampOnlyServices.js

@@ -1,2 +1,2 @@
 const ampOnlyServices = ['news', 'sport', 'newsround'];
-export { ampOnlyServices as default };
+export default ampOnlyServices;

package.json

@@ -213,7 +213,7 @@
     "cypress-terminal-report": "7.1.0",
     "depcheck": "1.4.7",
     "eslint": "7.32.0",
-    "eslint-config-airbnb": "18.2.1",
+    "eslint-config-airbnb": "19.0.4",
     "eslint-config-prettier": "10.0.1",
     "eslint-import-resolver-alias": "1.1.2",
     "eslint-plugin-cypress": "4.1.0",

src/app/components/ATIAnalytics/params/index.ts

@@ -121,7 +121,7 @@ type BuilderFunction = {
 };
 
 type PageTypeHandlers = {
-  [key in PageTypes]: BuilderFunction;
+  [_key in PageTypes]: BuilderFunction;
 };
 
 const isMigrated = (pageType: PageTypes) =>

src/app/components/Ad/Amp/AdSlot/index.tsx

@@ -68,8 +68,8 @@ interface DeviceSettings {
 }
 
 const slotConfigurations: {
-  [slot in SlotType]: {
-    [device in Device]?: DeviceSettings;
+  [_slot in SlotType]: {
+    [_device in Device]?: DeviceSettings;
   };
 } = {
   leaderboard: {

src/app/components/Billboard/index.styles.ts

@@ -5,6 +5,7 @@ export default {
   link: ({ palette }: Theme) =>
     css({
       textDecoration: 'none',
+      display: 'block',
       color: palette.WHITE,
       cursor: 'pointer',
       '&:hover, &:focus': {

src/app/components/Billboard/index.tsx

@@ -53,12 +53,7 @@ const Billboard = forwardRef(
             />
             <div css={styles.textContainer}>
               <Heading level={2} size="paragon" css={styles.heading} id={id}>
-                <a
-                  href={link}
-                  css={styles.link}
-                  className="focusIndicatorDisplayBlock"
-                  onClick={clickTrackerHandler}
-                >
+                <a href={link} css={styles.link} onClick={clickTrackerHandler}>
                   {showLiveLabel ? (
                     <div data-testid="billboard-live-label">
                       <LivePulse

src/app/components/ChartbeatAnalytics/utils/index.ts

@@ -33,7 +33,7 @@ export const chartbeatUID = 50924;
 export const useCanonical = true;
 export const chartbeatSource = '//static.chartbeat.com/js/chartbeat.js';
 
-const capitalize = (s: string) => s?.charAt(0).toUpperCase() + s?.slice(1);
+const capitalize = (s = '') => `${s?.charAt(0).toUpperCase()}${s?.slice(1)}`;
 
 const buildSectionArr = (service: Services, value: string, type: string) => [
   `${capitalize(service)} - ${value}`,

src/app/components/Curation/CurationPromo/index.tsx

@@ -55,11 +55,7 @@ const CurationPromo = ({
       </Promo.Image>
       <Promo.Heading as={`h${headingLevel}`}>
         {isMedia ? (
-          <Promo.A
-            href={link}
-            aria-labelledby={id}
-            className="focusIndicatorDisplayBlock"
-          >
+          <Promo.A href={link} aria-labelledby={id}>
             <span id={id} role="text">
               <VisuallyHiddenText data-testid="visually-hidden-text">
                 {typeTranslated}
@@ -71,7 +67,7 @@ const CurationPromo = ({
             </span>
           </Promo.A>
         ) : (
-          <Promo.A href={link} className="focusIndicatorDisplayBlock">
+          <Promo.A href={link}>
             {isLive ? <LiveLabel>{title}</LiveLabel> : title}
           </Promo.A>
         )}

src/app/components/Curation/HierarchicalGrid/index.tsx

@@ -107,11 +107,7 @@ const HiearchicalGrid = ({
                   })}
                 >
                   {isMedia ? (
-                    <Promo.A
-                      href={promo.link}
-                      aria-labelledby={promo.id}
-                      className="focusIndicatorDisplayBlock"
-                    >
+                    <Promo.A href={promo.link} aria-labelledby={promo.id}>
                       <span id={promo.id} role="text">
                         <VisuallyHiddenText data-testid="visually-hidden-text">
                           {typeTranslated}
@@ -125,10 +121,7 @@ const HiearchicalGrid = ({
                       </span>
                     </Promo.A>
                   ) : (
-                    <Promo.A
-                      href={promo.link}
-                      className="focusIndicatorDisplayBlock"
-                    >
+                    <Promo.A href={promo.link}>
                       {isLive ? (
                         <LiveLabel
                           {...(isFirstPromo && {

src/app/components/EmbedConsentBanner/ConsentBanner.tsx

@@ -16,10 +16,10 @@ import { ConsentBannerProviders, getEventTrackingData } from '.';
 
 type BannerUrls = {
   cookiesUrl: {
-    [key in ConsentBannerProviders]: string;
+    [_key in ConsentBannerProviders]: string;
   };
   privacyUrl: {
-    [key in ConsentBannerProviders]: string;
+    [_key in ConsentBannerProviders]: string;
   };
 };
 

src/app/components/Fragment/index.test.tsx

@@ -1,33 +1,33 @@
 import React from 'react';
-import Fragment from '.';
+import FragmentComponent from '.';
 import { render } from '../react-testing-library-with-providers';
 
 describe('Fragment', () => {
   it('with no attributes', () => {
-    const { getByText } = render(<Fragment text="HELLOWORLD" />);
+    const { getByText } = render(<FragmentComponent text="HELLOWORLD" />);
 
     expect(getByText('HELLOWORLD').textContent).toEqual('HELLOWORLD');
   });
 
   it('with bold attributes', () => {
     const { container } = render(
-      <Fragment text="BOLD TEXT" attributes={['bold']} />,
+      <FragmentComponent text="BOLD TEXT" attributes={['bold']} />,
     );
 
     expect(container.querySelector('b')?.textContent).toEqual('BOLD TEXT');
   });
 
   it('with italic attributes', () => {
     const { container } = render(
-      <Fragment text="ITALIC TEXT" attributes={['italic']} />,
+      <FragmentComponent text="ITALIC TEXT" attributes={['italic']} />,
     );
 
     expect(container.querySelector('i')?.textContent).toEqual('ITALIC TEXT');
   });
 
   it('with unknown attributes', () => {
     const { container } = render(
-      <Fragment
+      <FragmentComponent
         text="BOLD WITH UNKNOWN TEXT"
         attributes={['bold', 'unknown']}
       />,
@@ -40,7 +40,7 @@ describe('Fragment', () => {
 
   it('with italic attributes in Farsi', () => {
     const { container } = render(
-      <Fragment
+      <FragmentComponent
         text="ITALIC WITH PERSIAN TEXT"
         attributes={['italic', 'unknown']}
       />,
@@ -54,7 +54,7 @@ describe('Fragment', () => {
   });
 
   it('should emit a null when provided with no content', () => {
-    const { container } = render(<Fragment text="" />);
+    const { container } = render(<FragmentComponent text="" />);
 
     expect(container.querySelector('div')).toBe(null);
   });

src/app/components/Fragment/index.tsx

@@ -1,7 +1,6 @@
 /** @jsxRuntime classic */
 /** @jsx  jsx  */
-/* @jsxFrag React.Fragment */
-import React, { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 import { jsx } from '@emotion/react';
 import styles from './index.style';
 
@@ -25,14 +24,17 @@ const Fragment = ({ text, attributes = [] }: FragmentProps) => {
     These components are nested inside each other as children as the array is iterated through.
     The text string is passed in as the initial value, so it is the first child or the returned value if there are no attributes.
   */
-  return attributes.reduce(
-    (previousAttribute, attribute) => {
-      const Attribute =
-        attributeComponents[attribute as keyof typeof attributeComponents] ||
-        fallbackAttributeComponent; // If attribute is unknown, will use a fallback component that just returns the passed children
-      return <Attribute>{previousAttribute}</Attribute>;
-    },
-    <>{text}</>,
+  return (
+    attributes.reduce(
+      // @ts-expect-error attribute will be of type string
+      (previousAttribute, attribute) => {
+        const Attribute =
+          attributeComponents[attribute as keyof typeof attributeComponents] ||
+          fallbackAttributeComponent; // If attribute is unknown, will use a fallback component that just returns the passed children
+        return <Attribute>{previousAttribute}</Attribute>;
+      },
+      text,
+    ) || ''
   );
 };
 

src/app/components/LiveHeaderMedia/index.tsx

@@ -113,30 +113,26 @@ const LiveHeaderMedia = ({
   };
 
   const description = (
-    <>
-      <Text
-        size="pica"
-        fontVariant="sansBold"
-        as="span"
-        css={[
-          styles.mediaDescription,
-          showMedia
-            ? styles.closeMediaDescription
-            : styles.openMediaDescription,
-        ]}
-        className="hoverStylesText"
-      >
-        {showMedia && <VisuallyHiddenText>{closeVideo}, </VisuallyHiddenText>}
-        <Text size="pica" fontVariant="sansBold" as="span">
-          {short}
-          {!titleHasPunctuation && ','}
-        </Text>
-        <Text size="pica" fontVariant="sansRegular" as="span">
-          {' '}
-          {networkName}
-        </Text>
+    <Text
+      size="pica"
+      fontVariant="sansBold"
+      as="span"
+      css={[
+        styles.mediaDescription,
+        showMedia ? styles.closeMediaDescription : styles.openMediaDescription,
+      ]}
+      className="hoverStylesText"
+    >
+      {showMedia && <VisuallyHiddenText>{closeVideo}, </VisuallyHiddenText>}
+      <Text size="pica" fontVariant="sansBold" as="span">
+        {short}
+        {!titleHasPunctuation && ','}
       </Text>
-    </>
+      <Text size="pica" fontVariant="sansRegular" as="span">
+        {' '}
+        {networkName}
+      </Text>
+    </Text>
   );
 
   return (

src/app/components/LiveRegion/LiveRegionContext/index.tsx

@@ -2,6 +2,7 @@ import React, {
   PropsWithChildren,
   createContext,
   useContext,
+  useMemo,
   useState,
 } from 'react';
 
@@ -19,13 +20,16 @@ export const LiveRegionContextProvider = ({ children }: PropsWithChildren) => {
     setLiveRegionItem(item);
   };
 
+  const memoisedLiveRegion = useMemo(
+    () => ({
+      liveRegionItem,
+      replaceLiveRegionWith,
+    }),
+    [liveRegionItem],
+  );
+
   return (
-    <LiveRegionContext.Provider
-      value={{
-        liveRegionItem,
-        replaceLiveRegionWith,
-      }}
-    >
+    <LiveRegionContext.Provider value={memoisedLiveRegion}>
       {children}
     </LiveRegionContext.Provider>
   );

src/app/components/MediaLoader/configs/clipMedia.ts

@@ -30,7 +30,7 @@ export default ({
     'clipMedia',
   );
 
-  const { images, video, type } = clipMediaBlock?.model;
+  const { images, video, type } = clipMediaBlock?.model || {};
 
   const { source, urlTemplate: locator } = images?.[1] ?? {};
 

src/app/components/MediaLoader/configs/index.ts

@@ -25,7 +25,7 @@ const BLOCK_TYPES = [
 
 const blockTypeMapping: Record<
   (typeof BLOCK_TYPES)[number],
-  (arg0: ConfigBuilderProps) => ConfigBuilderReturnProps
+  (_arg0: ConfigBuilderProps) => ConfigBuilderReturnProps
 > = {
   aresMedia,
   clipMedia,

src/app/components/Metadata/index.tsx

@@ -167,6 +167,7 @@ const MetadataContainer = ({
       {isoLang &&
         !isEnglishService &&
         alternateLinksWsSites.map(renderAlternateLinks)}
+      {/* eslint-disable-next-line react/no-invalid-html-attribute */}
       {linkToAmpPage && <link rel="amphtml" href={ampLink} />}
       {renderAppleItunesApp({
         iTunesAppId,

src/app/components/MostRead/Amp/__snapshots__/index.test.tsx.snap

@@ -164,7 +164,7 @@ exports[`AmpMostRead should render as expected 1`] = `
   color: #222222;
   -webkit-text-decoration: none;
   text-decoration: none;
-  margin-bottom: 0.5rem;
+  display: inline-block;
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
@@ -265,7 +265,7 @@ exports[`AmpMostRead should render as expected 1`] = `
               dir="ltr"
             >
               <a
-                class="focusIndicatorDisplayTableCell emotion-7"
+                class="emotion-7"
                 href="{{href}}"
               >
                 {{title}}