WS-1576: Remove script service params from psammead components

docs/Coding-Standards/Migrating-Legacy-Components.mdx

@@ -11,8 +11,13 @@ import {
   GEL_GROUP_5_SCREEN_WIDTH_MIN,
   GEL_GROUP_0_SCREEN_WIDTH_MAX,
 } from '../../src/app/legacy/psammead/gel-foundations/src/breakpoints';
-import * as spacings from '../../src/app/components/ThemeProvider/spacings'
-import {MARGIN_BELOW_400PX, MARGIN_ABOVE_400PX, GUTTER_BELOW_600PX, GUTTER_ABOVE_600PX} from '../../src/app/components/ThemeProvider/spacings'
+import * as spacings from '../../src/app/components/ThemeProvider/spacings';
+import {
+  MARGIN_BELOW_400PX,
+  MARGIN_ABOVE_400PX,
+  GUTTER_BELOW_600PX,
+  GUTTER_ABOVE_600PX,
+} from '../../src/app/components/ThemeProvider/spacings';
 
 <Meta title="Coding Standards/Migrating Legacy Components" />
 
@@ -166,63 +171,6 @@ import styles from './index.styles';
 <a css={styles.link} href={href}>Link Text Here</a>
 ```
 
-## Migrating `fontVariants` and `fontSizes`
-
-### Before
-
-`script` and `service` were passed as props to the styled component, and used to determine the font size based on script , and the font variant, based on `service`.
-
-**(index.jsx)**
-
-```jsx
-const StyledLink = styled.a`
-  /* Font Size */
-  ${({ script }) => script && getCanon(script)}
-  /* Font Variant */
-  ${({ service }) => getSerifMedium(service)}
-  ...otherProps
-`;
-```
-
-### After
-
-**(index.styles.ts)**
-
-```jsx
-
-import { css, Theme } from '@emotion/react';
-
-const styles = {
-  link: ({ fontSizes, fontVariants }: Theme) => css({
-    ...fontSizes.canon,
-    ...fontVariants.serifMedium
-    ...otherProps
-  }),
-};
-
-export const styles;
-```
-
-### Font Sizes Mappings
-
-<Markdown>
-  {`
-| Before                                                                                                                                                     | After                |
-| ---------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |
-| \`${({ script }) => script && getCanon(script)}\` <br /> **OR** <br />\`${({ script }) => getCanon(script)}\` <br /> **OR** <br /> \`${() => getCanon(script)}\` | \`...fontSizes.canon\` |
-`}
-</Markdown>
-
-### Font Variants Mappings
-
-<Markdown>
-  {`
-| Before                                                                                                | After                         |
-| ----------------------------------------------------------------------------------------------------- | ----------------------------- |
-| \`${({ service }) => getSerifMedium(service)}\` <br /> **OR** <br /> \`${() => getSerifMedium(service)}\` | \`...fontVariants.serifMedium\` |
-`}
-</Markdown>
-
 ## Migrating Media Queries
 
 ### Before

scripts/bundleSize/bundleSizeConfig.js

@@ -9,5 +9,5 @@
 
 export const VARIANCE = 5;
 
-export const MIN_SIZE = 916;
-export const MAX_SIZE = 1257;
+export const MIN_SIZE = 905;
+export const MAX_SIZE = 1245;

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

@@ -4,7 +4,6 @@ import { HOME_PAGE } from '#app/routes/utils/pageTypes';
 import AmpAd, { AMP_ACCESS_FETCH } from './index';
 import { render } from '../../react-testing-library-with-providers';
 import { ServiceContext } from '../../../contexts/ServiceContext';
-import latinDiacritics from '../../ThemeProvider/fontScripts/latinWithDiacritics';
 import { SlotType } from '../types';
 
 const adJsonAttributes = (slotType: SlotType) => ({
@@ -34,7 +33,6 @@ const adWithContext = (slotType: SlotType, showAdPlaceholder = false) => (
       value={{
         service: 'afrique',
         dir: 'ltr',
-        script: latinDiacritics,
         // @ts-expect-error partial data required for testing
         translations: adTranslations,
         showAdPlaceholder,

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

@@ -5,7 +5,6 @@ import { ToggleContext } from '#contexts/ToggleContext';
 import { HOME_PAGE } from '#app/routes/utils/pageTypes';
 import { Helmet } from 'react-helmet';
 import { render } from '../react-testing-library-with-providers';
-import latinDiacritics from '../ThemeProvider/fontScripts/latinWithDiacritics';
 import {
   ServiceContext,
   ServiceContextProvider,
@@ -14,7 +13,6 @@ import AdContainer from './index';
 
 const context = {
   service: 'mundo',
-  script: latinDiacritics,
   dir: 'ltr',
   translations: {
     ads: {

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

@@ -3,8 +3,6 @@ import { OptimoBlock } from '#app/models/types/optimo';
 import { ServiceContext } from '#app/contexts/ServiceContext';
 import { ServiceConfig } from '#app/models/types/serviceConfig';
 import CaptionContainer from '.';
-import latin from '../ThemeProvider/fontScripts/latin';
-import arabic from '../ThemeProvider/fontScripts/arabic';
 import { render } from '../react-testing-library-with-providers';
 import captionBlock, {
   captionBlock3Paragraphs,
@@ -15,14 +13,12 @@ const newsServiceContextStub = {
   imageCaptionOffscreenText: 'Image caption, ',
   videoCaptionOffscreenText: 'Video caption, ',
   defaultCaptionOffscreenText: 'Caption, ',
-  script: latin,
   service: 'news',
 };
 const persianServiceContextStub = {
   imageCaptionOffscreenText: ' ، عنوان تصویر',
   videoCaptionOffscreenText: ' ، عنوان ویدئو',
   defaultCaptionOffscreenText: ' ، عنوان',
-  script: arabic,
   service: 'persian',
 };
 

src/app/components/LiveLabel/README.md

@@ -4,12 +4,12 @@ The `LiveLabel` applied compound component implements a span for use on live con
 
 ## Props
 
-| Argument          | Type    | Required | Default   | Example                 |
-| ----------------- | ------- | -------- | --------- | ----------------------- |
-| offScreenText     | string  | no       | `null`    | `'Watch Live'`          |
-| lang              | string  | no       | `'en-GB'` | `'en-GB'`               |
-| id                | string  | no       | `null`    | `'live-promo-1'`        |
-| children          | node    | no       | `null`    | `<span>Headline</span>` |
+| Argument      | Type   | Required | Default   | Example                 |
+| ------------- | ------ | -------- | --------- | ----------------------- |
+| offScreenText | string | no       | `null`    | `'Watch Live'`          |
+| lang          | string | no       | `'en-GB'` | `'en-GB'`               |
+| id            | string | no       | `null`    | `'live-promo-1'`        |
+| children      | node   | no       | `null`    | `<span>Headline</span>` |
 
 ## Usage
 
@@ -20,13 +20,10 @@ This example shows the default usage of the `LiveLabel` component, passing in th
 ```jsx
 import LiveLabel from '#app/components/LiveLabel';
 import { Headline, Link } from '#psammead/psammead-story-promo/src';
-import latin from '../../../components/ThemeProvider/fontScripts/latin';
 
-<Headline script={latin} service="pidgin">
+<Headline>
   <Link href="https://www.bbc.com/pidgin/live/1234567890">
-    <LiveLabel>
-      The headline of the live promo
-    </LiveLabel>
+    <LiveLabel>The headline of the live promo</LiveLabel>
   </Link>
 </Headline>;
 ```
@@ -35,11 +32,10 @@ import latin from '../../../components/ThemeProvider/fontScripts/latin';
 
 The `LiveLabel` component can be used to show a promo for a Live page.
 
-
 ### Accessibility notes
 
-The `LiveLabel` component retrieves the translation of the word or phrase for "Live" for the specified service. If the translation for "Live" is in English e.g. "LIVE", then screenreaders will often read this as "live", rhyming with "give", which is incorrect. In order for the word "live" to be pronounced correctly, the offscreen (or visually hidden) text needs to be in lower case e.g. "Live" (rhyming with "hive"), which most screenreaders _can_ pronounce correctly. 
+The `LiveLabel` component retrieves the translation of the word or phrase for "Live" for the specified service. If the translation for "Live" is in English e.g. "LIVE", then screenreaders will often read this as "live", rhyming with "give", which is incorrect. In order for the word "live" to be pronounced correctly, the offscreen (or visually hidden) text needs to be in lower case e.g. "Live" (rhyming with "hive"), which most screenreaders _can_ pronounce correctly.
 
 It is possible for alternative offscreen text to be provided to the `LiveLabel` component. In this case, and in the case above, whereby the label that is displayed is not exactly the same as the text which is read out to the screenreader, then the word or phrase for "LIVE" will be `aria-hidden` making it invisible to the screenreader. The alternate offscreen text will be visually hidden, but will be announced by the screenreader instead.
 
-If the `children` prop is provided to the `LiveLabel` component, then a comma and a space (", ") will be inserted into the offscreen text, which results in the screenreader pausing briefly after announcing the word or phrase for "Live". 
+If the `children` prop is provided to the `LiveLabel` component, then a comma and a space (", ") will be inserted into the offscreen text, which results in the screenreader pausing briefly after announcing the word or phrase for "Live".

src/app/components/MostRead/Canonical/LastUpdated/index.test.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { render } from '../../../react-testing-library-with-providers';
-import latin from '../../../ThemeProvider/fontScripts/latin';
 import LastUpdated from '.';
 
 describe('MostReadCanonical - LastUpdated', () => {
@@ -9,8 +8,6 @@ describe('MostReadCanonical - LastUpdated', () => {
       <LastUpdated
         timestamp={864691200}
         prefix="Last Updated:"
-        script={latin}
-        service="news"
         locale="en-gb"
         timezone="Europe/London"
       />,

src/app/components/MostRead/Canonical/LastUpdated/index.tsx

@@ -1,22 +1,16 @@
 import React from 'react';
 import Timestamp from '../../../../legacy/psammead/psammead-timestamp-container/src';
-import { Services } from '../../../../models/types/global';
-import { TypographyScript } from '../../../../models/types/theming';
 
 interface LastUpdatedProps {
   locale: string;
   prefix: string;
-  script: TypographyScript;
-  service: Services;
   timestamp: number | string;
   timezone: string;
 }
 
 const LastUpdated = ({
   locale,
   prefix,
-  script,
-  service,
   timestamp,
   timezone,
 }: LastUpdatedProps) => (
@@ -25,8 +19,6 @@ const LastUpdated = ({
     dateTimeFormat="YYYY-MM-DD"
     prefix={prefix}
     format="LL"
-    script={script}
-    service={service}
     locale={locale}
     timezone={timezone}
     padding={false}

src/app/components/MostRead/Canonical/index.tsx

@@ -9,7 +9,6 @@ import MostReadRank from './Rank';
 import LastUpdated from './LastUpdated';
 import { ColumnLayout, MostReadData, Size } from '../types';
 import { Direction } from '../../../models/types/global';
-import { TypographyScript } from '../../../models/types/theming';
 
 interface MostReadProps {
   columnLayout?: ColumnLayout;
@@ -26,7 +25,6 @@ const MostRead = ({
 }: MostReadProps) => {
   const {
     service,
-    script,
     dir,
     datetimeLocale,
     serviceDatetimeLocale,
@@ -55,7 +53,6 @@ const MostRead = ({
   const locale = serviceDatetimeLocale || datetimeLocale;
 
   const direction = dir as Direction;
-  const fontScript = script as TypographyScript;
 
   return (
     <MostReadList
@@ -94,8 +91,6 @@ const MostRead = ({
                 {shouldRenderLastUpdated(timestamp) && timestamp && (
                   <LastUpdated
                     prefix={lastUpdated}
-                    script={fontScript}
-                    service={service}
                     timestamp={timestamp}
                     locale={locale}
                     timezone={timezone}

src/app/components/MostRead/Label/index.test.tsx

@@ -1,15 +1,12 @@
 import React from 'react';
 import { render } from '../../react-testing-library-with-providers';
-import { ServiceContextProvider } from '../../../contexts/ServiceContext';
 import MostReadSectionLabel from '.';
 
 describe('MostReadSectionLabel assertion', () => {
   it('should render most-read section label with correct attributes', async () => {
-    const { container } = render(
-      <ServiceContextProvider service="persian">
-        <MostReadSectionLabel />
-      </ServiceContextProvider>,
-    );
+    const { container } = render(<MostReadSectionLabel />, {
+      service: 'persian',
+    });
     const label = container.getElementsByTagName('span')[2];
     expect(label).toHaveAttribute('id', 'Most-Read');
     expect(label.textContent).toEqual('مطالب پرخواننده');

src/app/components/MostRead/Label/index.tsx

@@ -24,17 +24,13 @@ const MostReadSectionLabel = ({
   overrideHeadingAs,
 }: MostReadSectionLabelProps) => {
   const {
-    service,
-    script,
     dir,
     mostRead: { header },
   } = use(ServiceContext);
   return (
     <SectionLabel
       css={styles.sectionLabel}
-      script={script}
       labelId="Most-Read"
-      service={service}
       dir={dir}
       mobileDivider={mobileDivider}
       backgroundColor={backgroundColor}

src/app/components/MostRead/utilities/testHelpers.tsx

@@ -3,27 +3,14 @@ import { ToggleContextProvider } from '#contexts/ToggleContext';
 import TEXT_VARIANTS from '#storybook/withServicesDecorator/text-variants';
 import Timestamp from '../../../legacy/psammead/psammead-timestamp/src';
 import { ServiceContextProvider } from '../../../contexts/ServiceContext';
-import latin from '../../ThemeProvider/fontScripts/latin';
 import { MostReadItemWrapper, MostReadLink } from '../Canonical/Item';
 import MostReadRank from '../Canonical/Rank';
 import { Services, Direction } from '../../../models/types/global';
-import { TypographyScript } from '../../../models/types/theming';
 import { MostReadBaseProps, MostReadData, Size } from '../types';
 
-const lastUpdated = ({
-  script,
-  service,
-}: {
-  script: TypographyScript;
-  service: Services;
-}) => (
+const lastUpdated = () => (
   // This will return the provided english translations
-  <Timestamp
-    datetime="2019-03-01T14:00+00:00"
-    script={script}
-    padding={false}
-    service={service}
-  >
+  <Timestamp datetime="2019-03-01T14:00+00:00" padding={false}>
     Last updated: 5th November 2016
   </Timestamp>
 );
@@ -49,9 +36,7 @@ export const getItem = ({
 }) => {
   const baseUrl = 'https://www.bbc.com';
   const { text, articlePath } = TEXT_VARIANTS[service];
-  const timestamp = withTimestamp
-    ? lastUpdated({ script: latin, service })
-    : null;
+  const timestamp = withTimestamp ? lastUpdated() : null;
 
   return {
     id: `${Math.floor(Math.random() * 100000) + 1}`,

src/app/components/PageLayoutWrapper/__snapshots__/index.test.tsx.snap

@@ -543,8 +543,8 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
   background-color: transparent;
   border: 0;
   float: left;
-  height: 2.75rem;
-  width: 2.75rem;
+  height: NaNrem;
+  width: NaNrem;
 }
 
 .emotion-35:hover,
@@ -573,8 +573,8 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
 
 @media (min-width: 20rem) {
   .emotion-35 {
-    height: 2.75rem;
-    width: 2.75rem;
+    height: NaNrem;
+    width: NaNrem;
   }
 }
 

src/app/components/Recommendations/index.tsx

@@ -17,8 +17,7 @@ const eventTrackingData = {
 };
 
 const Recommendations = ({ data }: { data: Recommendation[] }) => {
-  const { recommendations, mostRead, script, service, dir } =
-    use(ServiceContext);
+  const { recommendations, mostRead, dir } = use(ServiceContext);
 
   const viewTracker = useViewTracker(eventTrackingData);
 
@@ -67,12 +66,10 @@ const Recommendations = ({ data }: { data: Recommendation[] }) => {
       data-e2e={labelId}
       {...a11yAttributes}
     >
-      <SkipLinkWrapper service={service} {...skipLinkProps}>
+      <SkipLinkWrapper {...skipLinkProps}>
         {title ? (
           <SectionLabel
             css={styles.labelComponent}
-            script={script}
-            service={service}
             dir={dir}
             labelId={labelId}
             columnType="main"