Merge branch 'latest' into revert-11261-revert-11122-remove-nodefetch

.storybook/main.ts

@@ -80,7 +80,6 @@ const storybookConfig: StorybookConfig = {
        * side replacement. This mimics the behaviour of the client side
        * bundle generation in webpack.config.client.js
        */
-      // @ts-expect-error -  webpack plugin not typed
       new webpack.NormalModuleReplacementPlugin(
         /(.*)logger.node(\.*)/,
         resource => {

.storybook/preview.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { Global } from '@emotion/react';
-import isChromatic from 'chromatic';
+import isChromatic from 'chromatic/isChromatic';
 import { forceVisible } from 'react-lazyload';
 import { Preview } from '@storybook/react';
 import GlobalStyles from '../src/app/legacy/psammead/psammead-styles/src/global-styles';
@@ -12,6 +12,7 @@ import { UserContextProvider } from '../src/app/contexts/UserContext';
 import { EventTrackingContextProvider } from '../src/app/contexts/EventTrackingContext';
 import withServicesDecorator from './withServicesDecorator';
 import pageDataFixture from '../data/news/articles/c0g992jmmkko.json';
+import { RequestContextProvider } from '../src/app/contexts/RequestContext';
 
 const REITH_SERIF_REGULAR = {
   '@font-face': {
@@ -491,7 +492,18 @@ const preview: Preview = {
             title: 'ukrainian-ru-UA',
           },
         ],
-        // Should "Container size" be shown, or just the "circlehollow" icon
+        dynamicTitle: true,
+      },
+    },
+    isLite: {
+      description: 'Toggle Lite mode',
+      defaultValue: false,
+      toolbar: {
+        icon: 'lightning',
+        items: [
+          { value: false, title: 'Lite mode OFF' },
+          { value: true, title: 'Lite mode ON' },
+        ],
         dynamicTitle: true,
       },
     },
@@ -628,20 +640,25 @@ const preview: Preview = {
       );
     },
     (Story, context) => (
-      <ThemeProvider service={context.globals.service.service}>
+      <ThemeProvider
+        service={context.globals.service.service}
+        variant={context.globals.service.variant}
+      >
         <ToggleContextProvider toggles={{}}>
           <ServiceContextProvider
             service={context.globals.service.service}
             variant={context.globals.service.variant}
           >
-            <EventTrackingContextProvider
-              // @ts-expect-error - mock data for Storybook
-              pageData={pageDataFixture}
-            >
-              <UserContextProvider>
-                <Story />
-              </UserContextProvider>
-            </EventTrackingContextProvider>
+            <RequestContextProvider isLite={context.globals.isLite}>
+              <EventTrackingContextProvider
+                // @ts-expect-error - mock data for Storybook
+                pageData={pageDataFixture}
+              >
+                <UserContextProvider>
+                  <Story />
+                </UserContextProvider>
+              </EventTrackingContextProvider>
+            </RequestContextProvider>
           </ServiceContextProvider>
         </ToggleContextProvider>
       </ThemeProvider>

.storybook/withServicesDecorator/index.tsx

@@ -48,8 +48,9 @@ export default (overrideProps?: { defaultService?: Services }) =>
     {
       globals: {
         service: { service: selectedService },
+        isLite,
       },
-    } = { globals: { service: { service: DEFAULT_SERVICE } } },
+    } = { globals: { service: { service: DEFAULT_SERVICE }, isLite: false } },
   ) => {
     const defaultServiceOverride = overrideProps?.defaultService;
     const serviceToUse = defaultServiceOverride || selectedService;
@@ -81,6 +82,7 @@ export default (overrideProps?: { defaultService?: Services }) =>
       variant: variant || 'default',
       selectedService: serviceToUse,
       timezone,
+      isLite,
     };
 
     return (

cypress/support/config/settings.js

@@ -6993,7 +6993,7 @@ module.exports = () => ({
           },
           test: {
             paths: ['/thai/23124008'],
-            enabled: true,
+            enabled: false,
           },
           local: {
             paths: ['/thai/international-23252825'],

src/app/components/ATIAnalytics/canonical/index.tsx

@@ -1,5 +1,6 @@
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState, Fragment } from 'react';
 import { getEnvConfig } from '#app/lib/utilities/getEnvConfig';
+import { RequestContext } from '#app/contexts/RequestContext';
 import sendBeacon from '../../../lib/analyticsUtils/sendBeacon';
 import { ATIAnalyticsProps } from '../types';
 
@@ -8,22 +9,31 @@ const getNoJsATIPageViewUrl = (atiPageViewUrl: string) =>
     ? atiPageViewUrl.replace('x8=[simorgh]', 'x8=[simorgh-nojs]')
     : `${atiPageViewUrl}&x8=[simorgh-nojs]`;
 
-const renderNoScriptTrackingPixel = (atiPageViewUrl: string) => (
-  <noscript>
-    <img
-      height="1px"
-      width="1px"
-      alt=""
-      // This should probably have been a styled component. But the author is
-      // lazy and didn't want to write a fuzzy matcher for the unit AND e2e
-      // tests (you can't predict the class names chosen by emotion)
-      style={{ position: 'absolute' }}
-      src={getNoJsATIPageViewUrl(atiPageViewUrl)}
-    />
-  </noscript>
-);
+const renderNoScriptTrackingPixel = (
+  atiPageViewUrl: string,
+  isLite: boolean,
+) => {
+  const ImgPixelWrapper = isLite ? Fragment : 'noscript';
+
+  return (
+    <ImgPixelWrapper>
+      <img
+        height="1px"
+        width="1px"
+        alt=""
+        // This should probably have been a styled component. But the author is
+        // lazy and didn't want to write a fuzzy matcher for the unit AND e2e
+        // tests (you can't predict the class names chosen by emotion)
+        style={{ position: 'absolute' }}
+        src={getNoJsATIPageViewUrl(atiPageViewUrl)}
+      />
+    </ImgPixelWrapper>
+  );
+};
 
 const CanonicalATIAnalytics = ({ pageviewParams }: ATIAnalyticsProps) => {
+  const { isLite } = useContext(RequestContext);
+
   const [atiPageViewUrl] = useState(
     getEnvConfig().SIMORGH_ATI_BASE_URL + pageviewParams,
   );
@@ -32,7 +42,7 @@ const CanonicalATIAnalytics = ({ pageviewParams }: ATIAnalyticsProps) => {
     sendBeacon(atiPageViewUrl);
   }, [atiPageViewUrl]);
 
-  return renderNoScriptTrackingPixel(atiPageViewUrl);
+  return renderNoScriptTrackingPixel(atiPageViewUrl, isLite);
 };
 
 export default CanonicalATIAnalytics;

src/app/components/Ad/index.tsx

@@ -7,9 +7,11 @@ import { AdProps } from './types';
 import AdBootstrapJs from './Canonical/AdBootstrapJs';
 
 const AdContainer = ({ slotType, className, adcampaign }: AdProps) => {
-  const { isAmp, showAdsBasedOnLocation } = useContext(RequestContext);
+  const { isAmp, isLite, showAdsBasedOnLocation } = useContext(RequestContext);
   const { enabled: adsEnabled } = useToggle('ads');
 
+  if (isLite) return null;
+
   // Ads component will only be displayed if ads toggle is true and if showAdsBasedOnLocation is true
   if ([adsEnabled, showAdsBasedOnLocation].every(Boolean)) {
     const Ad = isAmp ? AmpAd : CanonicalAd;

src/app/components/Curation/CurationGrid/index.styles.tsx

@@ -1,11 +1,26 @@
 import { css, Theme } from '@emotion/react';
 
 const styles = {
-  list: css({
-    listStyleType: 'none',
-    padding: 0,
-    margin: 0,
-  }),
+  list: ({ isLite }: Theme) =>
+    css({
+      listStyleType: 'none',
+      padding: 0,
+      margin: 0,
+
+      ...(isLite && {
+        li: {
+          '.promo-text': {
+            width: '100%',
+            paddingInlineStart: 0,
+          },
+
+          '[class*="ChildWrapper" i]': {
+            position: 'relative',
+          },
+        },
+      }),
+    }),
+
   item: ({ spacings, mq, palette }: Theme) =>
     css({
       '.promo-image': {

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

@@ -33,7 +33,7 @@ const styles = {
         },
       },
     }),
-  list: ({ mq, spacings }: Theme) =>
+  list: ({ mq, spacings, isLite }: Theme) =>
     css({
       padding: 0,
       margin: `0 0 ${spacings.QUINTUPLE}rem`,
@@ -46,6 +46,34 @@ const styles = {
       [mq.GROUP_4_MIN_WIDTH]: {
         gridTemplateColumns: 'repeat(4, 1fr)',
       },
+
+      ...(isLite && {
+        gridTemplateColumns: 'unset',
+
+        [mq.GROUP_3_MIN_WIDTH]: {
+          gridTemplateColumns: 'unset',
+        },
+        [mq.GROUP_4_MIN_WIDTH]: {
+          gridTemplateColumns: 'unset',
+        },
+
+        li: {
+          gridColumn: 'unset',
+          gridRow: 'unset',
+          paddingTop: 0,
+
+          '&::before': {
+            display: 'none',
+          },
+          '.promo-image': {
+            display: 'none',
+          },
+          '.promo-text': {
+            width: '100%',
+            paddingInlineStart: 0,
+          },
+        },
+      }),
     }),
 };
 

src/app/components/Image/index.tsx

@@ -60,8 +60,11 @@ const Image = ({
   children,
   fetchpriority,
 }: PropsWithChildren<Props>) => {
-  const { pageType } = useContext(RequestContext);
+  const { pageType, isLite } = useContext(RequestContext);
   const [isLoaded, setIsLoaded] = useState(false);
+
+  if (isLite) return null;
+
   const showPlaceholder = placeholder && !isLoaded;
   const hasDimensions = width && height;
   const hasFixedAspectRatio = !!aspectRatio || !!hasDimensions;

src/app/components/ImageWithCaption/index.tsx

@@ -53,11 +53,10 @@ const ImageWithCaption = ({
   shouldPreload,
 }: Props) => {
   const { service } = useContext(ServiceContext);
-  const { isAmp } = useContext(RequestContext);
+  const { isAmp, isLite } = useContext(RequestContext);
 
-  if (!blocks) {
-    return null;
-  }
+  if (isLite) return null;
+  if (!blocks) return null;
 
   const rawImageBlock = filterForBlockType(blocks, 'rawImage');
   const altTextBlock = filterForBlockType(blocks, 'altText');

src/app/components/LegacyLivePageMediaPlayer/index.tsx

@@ -5,9 +5,10 @@ import { MediaBlock } from '../MediaLoader/types';
 import { GridItemMediumNoMargin } from '../../legacy/components/Grid';
 
 const LegacyLivePageMediaPlayer = ({ blocks, className }: Props) => {
-  const { id } = useContext(RequestContext);
+  const { id, isLite } = useContext(RequestContext);
 
   if (!id) return null;
+  if (isLite) return null;
 
   return (
     <GridItemMediumNoMargin

src/app/components/MediaLoader/index.tsx

@@ -156,9 +156,12 @@ const MediaLoader = ({ blocks, className }: Props) => {
     statsDestination,
     service,
     isAmp,
+    isLite,
     showAdsBasedOnLocation,
   } = useContext(RequestContext);
 
+  if (isLite) return null;
+
   const producer = getProducerFromServiceName(service);
 
   const config = buildConfig({

src/app/components/PageLayoutWrapper/index.tsx

@@ -56,7 +56,7 @@ const PageLayoutWrapper = ({
   status,
 }: PropsWithChildren<Props>) => {
   const { service } = useContext(ServiceContext);
-  const { isAmp, variant } = useContext(RequestContext);
+  const { isLite, isAmp, variant } = useContext(RequestContext);
 
   const scriptSwitchId = pathOr('', ['scriptSwitchId'], pageData);
   const renderScriptSwitch = pathOr(true, ['renderScriptSwitch'], pageData);
@@ -81,7 +81,10 @@ const PageLayoutWrapper = ({
   }
   const serviceFonts = fontFacesLazy(service);
   const fontJs =
-    isAmp || !serviceFonts.length || process.env.JEST_WORKER_ID !== undefined
+    isLite ||
+    isAmp ||
+    !serviceFonts.length ||
+    process.env.JEST_WORKER_ID !== undefined
       ? ''
       : `
   				if ("FileReader" in window && "Promise" in window && "fetch" in window) {

src/app/components/ThemeProvider/withThemeProvider.tsx

@@ -281,14 +281,17 @@ const withThemeProvider = ({
     brandSVG,
     gridWidths,
     isDarkUi: false,
+    isLite: false,
   };
 
   const ThemeProvider: React.FC<Props> = ({ children }) => {
-    const { isAmp, pageType, derivedPageType } = useContext(RequestContext);
+    const { isAmp, isLite, pageType, derivedPageType } =
+      useContext(RequestContext);
 
     const theme = {
       ...themeConfig,
       isDarkUi: isDarkUiPage(pageType, derivedPageType),
+      isLite,
     };
 
     return (

src/app/contexts/RequestContext/getMetaUrls/index.ts

@@ -1,11 +1,11 @@
-import { AMP_REGEX, TLD_REGEX } from '../../../lib/regex.const';
+import { AMP_REGEX, TLD_REGEX, LITE_REGEX } from '../../../lib/regex.const';
 
 const getAmpUrl = (url: string) => `${url}.amp`;
 
 const getCanonicalUrl = (origin: string, pathname: string) => {
   const canonicalUrl = `${origin}${pathname}`;
 
-  return canonicalUrl.replace(AMP_REGEX, '');
+  return canonicalUrl.replace(AMP_REGEX, '').replace(LITE_REGEX, '');
 };
 
 const getUkCanonicalUrl = (url: string) => {

src/app/contexts/RequestContext/index.test.tsx

@@ -72,7 +72,9 @@ const expectedOutput = {
   derivedPageType: null,
   isAmp: true,
   isNextJs: false,
+  isApp: false,
   isCaf: false,
+  isLite: false,
   platform: 'amp',
   variant: 'simp',
   timeOnServer: null,
@@ -191,6 +193,22 @@ describe('RequestContext', () => {
       });
     });
 
+    it('should be "lite" when isAmp is false and isApp is false and isLite is true', () => {
+      render(
+        <RequestContextProvider {...input} isAmp={false} isApp={false} isLite>
+          <Component />
+        </RequestContextProvider>,
+      );
+
+      expect(React.useContext).toHaveReturnedWith({
+        ...expectedOutput,
+        isAmp: false,
+        isApp: false,
+        isLite: true,
+        platform: 'canonical',
+      });
+    });
+
     it('should return a PS statsDestination when isAmp is true and outside the UK', () => {
       (getOriginContext.default as jest.Mock).mockReturnValue({
         origin: 'origin',