fix foundations

guardian · Sep 23, 2024 · 136c2f6 · 136c2f6
1 parent 221d14f
commit 136c2f6
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 39 deletions.
diff --git a/src/Epic/HeaderSection.tsx b/src/Epic/HeaderSection.tsx
@@ -1,6 +1,14 @@
 import React from 'react';
 import { css } from '@emotion/react';
-import { from, breakpoints, space, body, headline } from '@guardian/source/foundations';
+import {
+    from,
+    breakpoints,
+    space,
+    textEgyptian17,
+    textEgyptianBold17,
+    textEgyptianItalic17,
+    headlineBold42,
+} from '@guardian/source/foundations';
 
 const emptyImage = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
 
@@ -28,19 +36,19 @@ const headerStyles = {
         margin-right: ${space[4]}px;
     `,
     text: css`
-        ${headline.large({ fontWeight: 'bold' })};
+        ${headlineBold42};
         line-height: 1.35;
     `,
     imageCaptionContainer: css``,
     imageCaption: css`
-        ${body.medium()}
+        ${textEgyptian17};
         margin: 0;
     `,
     imageCaptionBold: css`
-        ${body.medium({ fontWeight: 'bold' })}
+        ${textEgyptianBold17};
     `,
     imageCaptionItalic: css`
-        ${body.medium({ fontStyle: 'italic' })}
+        ${textEgyptianItalic17};
     `,
 };
 

diff --git a/src/Epic/index.tsx b/src/Epic/index.tsx
@@ -1,6 +1,14 @@
 import { css, ThemeProvider } from '@emotion/react';
 import React from 'react';
-import { brand, news, brandAlt, space, body, headline } from '@guardian/source/foundations';
+import {
+    brand,
+    news,
+    brandAlt,
+    space,
+    textEgyptian17,
+    textEgyptianBold17,
+    headlineMediumItalic20,
+} from '@guardian/source/foundations';
 import { PrimaryCtaButton } from '../components/PrimaryCtaButton';
 import { ReminderCtaButton } from '../components/ReminderCtaButton';
 import { COMPONENT_NAME, canRender, parseParagraphs } from './canRender';
@@ -33,7 +41,7 @@ const styles = {
         background-color: #f6f6f6;
         display: flex;
         flex-direction: column;
-        ${body.medium()}
+        ${textEgyptian17};
 
         b,
         strong {
@@ -46,12 +54,12 @@ const styles = {
         ${linkStyles}
     `,
     heading: css`
-        ${headline.xxsmall({ fontWeight: 'bold' })}
+        ${headlineMediumItalic20};
         margin-top: 0;
         margin-bottom: ${space[3]}px;
     `,
     highlightText: css`
-        ${body.medium({ fontWeight: 'bold' })}
+        ${textEgyptianBold17};
         ${linkStyles}
         padding: 2px;
         background-color: ${brandAlt[400]};

diff --git a/src/NewsletterEpic/index.tsx b/src/NewsletterEpic/index.tsx
@@ -7,8 +7,8 @@ import {
     space,
     from,
     until,
-    body,
-    headline,
+    headlineBold28,
+    textEgyptian17,
 } from '@guardian/source/foundations';
 import { COMPONENT_NAME, canRender } from './canRender';
 import type { TrackClick } from '../utils/tracking';
@@ -97,20 +97,16 @@ const styles = {
         }
     `,
     heading: css`
-        ${headline.small({ fontWeight: 'bold' })};
+        ${headlineBold28};
         margin: 0;
         max-width: 100%;
 
-        ${from.mobileLandscape} {
-            ${headline.small({ fontWeight: 'bold' })};
-        }
-
         ${from.tablet} {
             max-width: 100%;
         }
     `,
     paragraph: css`
-        ${body.medium()}
+        ${textEgyptian17};
         line-height: 135%;
         margin: ${space[5]}px 0 ${space[5]}px;
         max-width: 100%;

diff --git a/src/StyleableBannerNewsletter/index.tsx b/src/StyleableBannerNewsletter/index.tsx
@@ -133,7 +133,15 @@ export { StyleableBannerNewsletter };
 // Styling
 // --------------------------------------------
 import { css } from '@emotion/react';
-import { neutral, space, from, until, body, headline } from '@guardian/source/foundations';
+import {
+    neutral,
+    space,
+    from,
+    until,
+    headlineBold28,
+    headlineBold34,
+    textEgyptian17,
+} from '@guardian/source/foundations';
 import { getColors } from '../styles/colorData';
 
 const imgHeight = '280';
@@ -222,21 +230,18 @@ export const getBannerNewsletterStyles = (
         `,
 
         heading: css`
-            ${headline.small({ fontWeight: 'bold' })};
+            ${headlineBold28};
             margin: 0;
             max-width: 100%;
             color: ${colors.styleHeader};
-            ${from.mobileLandscape} {
-                ${headline.small({ fontWeight: 'bold' })};
-            }
             ${from.tablet} {
-                ${headline.medium({ fontWeight: 'bold' })};
+                ${headlineBold34};
                 max-width: 100%;
             }
         `,
 
         paragraph: css`
-            ${body.medium()}
+            ${textEgyptian17};
             line-height: 135%;
             margin: ${space[5]}px 0 ${space[5]}px;
             max-width: 100%;

diff --git a/src/StyleableBannerWithLink/index.tsx b/src/StyleableBannerWithLink/index.tsx
@@ -155,7 +155,14 @@ export const StyleableBannerWithLink: React.FC<Props> = (props: Props) => {
 // Styling
 // --------------------------------------------
 import { css } from '@emotion/react';
-import { neutral, space, from, until, body, headline } from '@guardian/source/foundations';
+import {
+    neutral,
+    space,
+    from,
+    until,
+    headlineBold28,
+    textEgyptian17,
+} from '@guardian/source/foundations';
 import { getColors } from '../styles/colorData';
 
 export const defaultBannerWithLinkColors: BannerWithLinkBaseColorStyles = {
@@ -263,20 +270,17 @@ export const getBannerWithLinkStyles = (
         `,
 
         heading: css`
-            ${headline.small({ fontWeight: 'bold' })};
+            ${headlineBold28};
             margin: 0;
             max-width: 100%;
             color: ${colors.styleHeader};
-            ${from.mobileLandscape} {
-                ${headline.small({ fontWeight: 'bold' })};
-            }
             ${from.tablet} {
                 max-width: 100%;
             }
         `,
 
         paragraph: css`
-            ${body.medium()}
+            ${textEgyptian17};
             line-height: 135%;
             margin: ${space[5]}px 0 ${space[5]}px;
             max-width: 100%;
@@ -301,7 +305,7 @@ export const getBannerWithLinkStyles = (
         `,
 
         highlightContainer: css`
-            ${body.medium()}
+            ${textEgyptian17};
             margin-top: ${space[5]}px;
             margin-right: ${space[3]}px;
             max-width: 100%;

diff --git a/src/components/NewsletterCtaButton.tsx b/src/components/NewsletterCtaButton.tsx
@@ -8,7 +8,7 @@ import type { NewsletterSubscribeCallback } from '../types/dcrTypes';
 import type { InteractiveButtonStatus } from '../logic/types';
 import type { NewsletterButtonColorStyles } from '../styles/colorData';
 
-import { neutral, body } from '@guardian/source/foundations';
+import { neutral, textEgyptianBold17 } from '@guardian/source/foundations';
 
 type SignUpButtonProps = {
     buttonStyles: Record<string, SerializedStyles>;
@@ -123,11 +123,11 @@ const getButtonStyles = (styles: NewsletterButtonColorStyles) => {
             }
         `,
         thankYouText: css`
-            ${body.medium({ fontWeight: 'bold' })};
+            ${textEgyptianBold17};
             color: ${neutral[0]};
         `,
         errorText: css`
-            ${body.medium({ fontWeight: 'bold' })};
+            ${textEgyptianBold17};
             color: ${neutral[0]};
             margin-bottom: 16px;
         `,

diff --git a/src/components/NewsletterFrequencyBlock.tsx b/src/components/NewsletterFrequencyBlock.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { css } from '@emotion/react';
 import { SvgClock } from '@guardian/source/react-components';
-import { textSans } from '@guardian/source/foundations';
+import { textSans17 } from '@guardian/source/foundations';
 
 import type { NewsletterFrequencyColorStyles } from '../styles/colorData';
 
@@ -53,7 +53,7 @@ const getFrequencyStyles = (styles: NewsletterFrequencyColorStyles) => {
         `,
         text: css`
             color: ${styles.styleFrequencyText};
-            ${textSans.medium()}
+            ${textSans17};
             margin-left: 4px;
         `,
     };

diff --git a/src/components/ReminderCtaButton.tsx b/src/components/ReminderCtaButton.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { css, SerializedStyles, ThemeProvider } from '@emotion/react';
-import { body, space } from '@guardian/source/foundations';
+import { space, textEgyptian15, textEgyptianBold17 } from '@guardian/source/foundations';
 import { LinkButton } from '@guardian/source/react-components';
 
 import {
@@ -38,7 +38,7 @@ const getButtonStyles = (styles: ReminderButtonColorStyles) => {
             margin: ${space[1]}px ${space[2]}px ${space[1]}px 0;
         `,
         thankYouText: css`
-            ${body.medium({ fontWeight: 'bold' })};
+            ${textEgyptianBold17};
             margin-top: ${space[3]}px;
         `,
         remindMeButtonOverrides: css`
@@ -51,7 +51,7 @@ const getButtonStyles = (styles: ReminderButtonColorStyles) => {
         `,
         smallPrint: css`
             margin-top: ${space[2]}px;
-            ${body.small()};
+            ${textEgyptian15};
         `,
     };
 };