INI: beginning of moving para to new place

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

@@ -6,6 +6,7 @@ export const getInlineLinkStyles = (palette: Theme['palette']) => ({
   color: palette.EBON,
   borderBottom: `${pixelsToRem(1)}rem solid ${palette.POSTBOX}`,
   textDecoration: 'none',
+  backgroundColor: 'red',
   '&:visited': {
     color: palette.METAL,
     borderBottom: `${pixelsToRem(1)}rem solid ${palette.METAL}`,

src/app/components/InlineLink/index.tsx

@@ -3,6 +3,7 @@
 import { useContext, FC, HTMLAttributes } from 'react';
 import { jsx, Theme } from '@emotion/react';
 import Url from 'url-parse';
+import useClickTrackerHandler from '#app/hooks/useClickTrackerHandler';
 
 import { FontVariant, GelFontSize } from '../../models/types/theming';
 import { ServiceContext } from '../../contexts/ServiceContext';
@@ -34,6 +35,10 @@ const InlineLink: FC<Props> = ({
   to,
   ...htmlAttributes
 }: Props) => {
+  const clickTrackerHandler = useClickTrackerHandler({
+    componentName: 'InlineLink',
+    advertiserID: to
+  });
   const { externalLinkText } = useContext(ServiceContext);
   const { hostname } = new Url(to);
   const isExternalLink =
@@ -49,11 +54,13 @@ const InlineLink: FC<Props> = ({
       size && fontSizes[size],
       fontVariant && fontVariants[fontVariant],
     ],
+    onClick: clickTrackerHandler,
     ...htmlAttributes,
   };
+  const href = linkProps.locator ? linkProps.locator : to;
 
   return (
-    <a {...linkProps} href={to}>
+    <a {...linkProps} href={href}>
       {text}
     </a>
   );

src/app/legacy/components/ErrorMain/index.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import InlineLink from '#psammead/psammead-inline-link/src';
-import Paragraph from '#psammead/psammead-paragraph/src';
 import { getSerifMedium } from '#psammead/psammead-styles/src/font-styles';
 import {
   getCanon,
@@ -10,6 +9,7 @@
 } from '#psammead/gel-foundations/src/typography';
 import idSanitiser from '#lib/utilities/idSanitiser';
 import Grid, { GelPageGrid } from '#components/Grid';
+import Text from '../../../components/Text';
 
 const StatusCode = styled.span`
   ${props => (props.script ? getParagon(props.script) : '')}
@@ -18,6 +18,7 @@
   font-family: ${GEL_FF_REITH_SANS};
   font-weight: 600;
   padding: 2.5rem 0 0.5rem 0;
+  margin: 0;
 `;
 
 const Heading = styled.h1`
@@ -31,8 +32,8 @@
   padding-bottom: 4rem;
 `;
 
-const CustomParagraph = styled(Paragraph)`
-  padding-top: 0.2rem;
+const StyledText = styled(Text)`
+  padding: 0.2rem 0 1.5rem;
 `;
 
 const ErrorMain = ({
@@ -86,22 +87,22 @@
       <Heading id="content" script={script} service={service} tabIndex="-1">
         {title}
       </Heading>
-      <CustomParagraph script={script} service={service}>
+      <StyledText as="p" size="bodyCopy">
         {message}
-      </CustomParagraph>
+      </StyledText>
       <ul>
         {solutions.map(text => (
-          <CustomParagraph
+          <StyledText size="bodyCopy" as="li" key={idSanitiser(text)}>
             script={script}
             service={service}
             as="li"
             key={idSanitiser(text)}
           >
             {text}
-          </CustomParagraph>
+          </StyledText>
         ))}
       </ul>
-      <CustomParagraph script={script} service={service}>
+      <StyledText as="p" size="bodyCopy">
         {callToActionFirst}
         <InlineLink
           href={callToActionLinkUrl}
@@ -110,7 +111,7 @@
           {callToActionLinkText}
         </InlineLink>
         {callToActionLast}
-      </CustomParagraph>
+      </StyledText>
     </Grid>
   </StyledGelPageGrid>
 );

src/app/legacy/containers/OnDemandParagraph/index.jsx

@@ -1,32 +1,26 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import styled from '@emotion/styled';
 import { GEL_SPACING } from '#psammead/gel-foundations/src/spacings';
 import { GEL_GROUP_3_SCREEN_WIDTH_MAX } from '#psammead/gel-foundations/src/breakpoints';
-import ParagraphComponent from '#psammead/psammead-paragraph/src';
-import { ServiceContext } from '../../../contexts/ServiceContext';
+import Paragraph from '../../../components/Paragraph';
 
-const StyledParagraphComponent = styled(ParagraphComponent)`
+const StyledParagraph = styled(Paragraph)`
   padding-bottom: 16px;
-  color: ${({ theme }) => !theme.isDarkUi && theme.palette.METAL};
+  color: ${({ theme }) =>
+    theme.isDarkUi ? theme.palette.GREY_2 : theme.palette.SHADOW};
   @media (max-width: ${GEL_GROUP_3_SCREEN_WIDTH_MAX}) {
     padding-bottom: ${GEL_SPACING};
   }
 `;
 
 const OnDemandParagraphContainer = ({ idAttr = null, text, testid = '' }) => {
-  const { script, service } = useContext(ServiceContext);
 
   if (!text) return null;
 
   return (
-    <StyledParagraphComponent
-      script={script}
-      service={service}
-      id={idAttr}
-      {...(testid && { 'data-testid': testid })}
-    >
+    <StyledParagraph id={idAttr} darkMode={darkMode}>
       {text}
-    </StyledParagraphComponent>
+    </StyledParagraph>
   );
 };
 

src/app/legacy/containers/Paragraph/index.jsx

@@ -1,41 +1,32 @@
-import React, { useContext } from 'react';
-import Paragraph from '#psammead/psammead-paragraph/src';
+import React from 'react';
 import styled from '@emotion/styled';
 import { GEL_GROUP_4_SCREEN_WIDTH_MIN } from '#psammead/gel-foundations/src/breakpoints';
-import { GEL_SPACING_QUIN } from '#psammead/gel-foundations/src/spacings';
+import {
+  GEL_SPACING_TRPL,
+  GEL_SPACING_QUIN,
+} from '#psammead/gel-foundations/src/spacings';
 import { GridItemMedium } from '#components/Grid';
-import { ServiceContext } from '../../../contexts/ServiceContext';
 import Blocks from '../Blocks';
 import fragment from '../Fragment';
-import InlineLink from '../InlineLink';
 import Inline from '../InlineContainer';
+import Paragraph from '../../../components/Paragraph';
+import InlineLink from '../../../components/InlineLink';
 
 const componentsToRender = { fragment, urlLink: InlineLink, inline: Inline };
 
 const StyledParagraph = styled(Paragraph)`
+  padding-bottom: ${GEL_SPACING_TRPL};
   @media (min-width: ${GEL_GROUP_4_SCREEN_WIDTH_MIN}) {
-    ${({ dir }) =>
-      dir === 'ltr'
-        ? `padding-right: ${GEL_SPACING_QUIN};`
-        : `padding-left: ${GEL_SPACING_QUIN};`}
+    padding-inline-end: ${GEL_SPACING_QUIN};
   }
 `;
 
-const ParagraphContainer = ({ blocks, className }) => {
-  const { script, service, dir } = useContext(ServiceContext);
-
-  return (
-    <GridItemMedium>
-      <StyledParagraph
-        script={script}
-        service={service}
-        dir={dir}
-        className={className}
-      >
-        <Blocks blocks={blocks} componentsToRender={componentsToRender} />
-      </StyledParagraph>
-    </GridItemMedium>
-  );
-};
+const ParagraphContainer = ({ blocks }) => (
+  <GridItemMedium>
+    <StyledParagraph>
+      <Blocks blocks={blocks} componentsToRender={componentsToRender} />
+    </StyledParagraph>
+  </GridItemMedium>
+);
 
 export default ParagraphContainer;

src/app/legacy/containers/Paragraph/index.test.jsx

@@ -2,9 +2,12 @@ import React, { useMemo } from 'react';
 import { v4 as uuid } from 'uuid';
 import { render } from '../../../components/react-testing-library-with-providers';
 import { ServiceContext } from '../../../contexts/ServiceContext';
+import ThemeProvider from '../../../components/ThemeProvider';
 import latin from '../../../components/ThemeProvider/fontScripts/latin';
 import ParagraphContainer from '.';
 
+jest.mock('../../../components/ThemeProvider');
+
 const fragmentBlock = (text, attributes = []) => ({
   type: 'fragment',
   id: uuid(),
@@ -71,7 +74,9 @@ const ParagraphContainerWithContext = ({ blocks }) => {
 
   return (
     <ServiceContext.Provider value={memoizedServiceContextValue}>
-      <ParagraphContainer blocks={blocks} />
+      <ThemeProvider service="news" variant="default">
+        <ParagraphContainer blocks={blocks} />
+      </ThemeProvider>
     </ServiceContext.Provider>
   );
 };

src/app/legacy/containers/Text/index.test.jsx

@@ -6,9 +6,12 @@ import {
 } from '#psammead/psammead-test-helpers/src';
 import { render } from '../../../components/react-testing-library-with-providers';
 import { ServiceContextProvider } from '../../../contexts/ServiceContext';
+import ThemeProvider from '../../../components/ThemeProvider';
 import TextContainer from './index';
 import { paragraphBlock, fragmentBlock } from './fixtures';
 
+jest.mock('../../../components/ThemeProvider');
+
 const defaultToggles = {
   eventTracking: {
     enabled: true,
@@ -76,7 +79,9 @@ describe('TextContainer', () => {
       const { container } = render(
         <ToggleContextProvider toggles={defaultToggles}>
           <ServiceContextProvider service="news">
-            <TextContainer {...data} />
+            <ThemeProvider service="news" variant="default">
+              <TextContainer {...data} />
+            </ThemeProvider>
           </ServiceContextProvider>
         </ToggleContextProvider>,
       );

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

@@ -90,28 +90,33 @@ const Context = ({
 
   return (
     <BrowserRouter>
-      <ThemeProvider service={service} variant="default">
-        <ToggleContextProvider
-          toggles={{
-            mostRead: {
-              enabled: mostReadToggledOn,
-            },
-            ads: {
-              enabled: adsToggledOn,
-            },
-            cpsRecommendations: {
-              enabled: true,
-            },
-            podcastPromo: { enabled: promo != null },
-          }}
+      <ToggleContextProvider
+        toggles={{
+          mostRead: {
+            enabled: mostReadToggledOn,
+          },
+          ads: {
+            enabled: adsToggledOn,
+          },
+        }}
+      >
+        <RequestContextProvider
+          bbcOrigin="https://www.test.bbc.co.uk"
+          id="c0000000000o"
+          isAmp={false}
+          pageType={ARTICLE_PAGE}
+          pathname="/pathname"
+          service={service}
+          statusCode={200}
+          showAdsBasedOnLocation={showAdsBasedOnLocation}
         >
-          <RequestContextProvider {...appInput}>
-            <ServiceContextProvider service={service}>
-              {children}
-            </ServiceContextProvider>
-          </RequestContextProvider>
-        </ToggleContextProvider>
-      </ThemeProvider>
+          <ServiceContextProvider service={service}>
+            <ThemeProvider service={service} variant="default">
+                {children}
+              </ThemeProvider>
+          </ServiceContextProvider>
+        </RequestContextProvider>
+      </ToggleContextProvider>
     </BrowserRouter>
   );
 };

src/app/pages/LiveRadioPage/LiveRadioPage.tsx

@@ -1,12 +1,12 @@
 import React, { useContext } from 'react';
 import { Headline } from '#psammead/psammead-headings/src';
-import Paragraph from '#psammead/psammead-paragraph/src';
 import RadioScheduleContainer from '#containers/RadioSchedule';
 import ComscoreAnalytics from '#containers/ComscoreAnalytics';
 import Grid, { GelPageGrid } from '#components/Grid';
 import MediaLoader from '#app/components/MediaLoader';
 import { ContentType } from '#app/components/ChartbeatAnalytics/types';
 import ATIAnalytics from '../../components/ATIAnalytics';
+import Paragraph from '../../components/Paragraph';
 import ChartbeatAnalytics from '../../components/ChartbeatAnalytics';
 import MetadataContainer from '../../components/Metadata';
 import { ServiceContext } from '../../contexts/ServiceContext';
@@ -90,9 +90,7 @@ const LiveRadioPage = ({ pageData }: { pageData: LiveRadioPageData }) => {
             {heading}
           </Headline>
           <Paragraph
-            // @ts-expect-error script is an object
-            script={script}
-            service={service}
+            css={({ spacings }) => ({ paddingBottom: `${spacings.TRIPLE}rem` })}
           >
             {bodySummary}
           </Paragraph>