Use source 8 (#508)

* Use source 8 * cssOverrides * fix foundations * changeset * Fix epic * epic line-height * more line-height
guardian · Sep 23, 2024 · f6e1b38 · f6e1b38
1 parent f59a1db
commit f6e1b38
Show file tree

Hide file tree

Showing 13 changed files with 81 additions and 49 deletions.
diff --git a/.changeset/perfect-dolls-jump.md b/.changeset/perfect-dolls-jump.md
@@ -0,0 +1,5 @@
+---
+'@guardian/braze-components': major
+---
+
+Upgrade to source 8
diff --git a/package.json b/package.json
@@ -45,7 +45,7 @@
     "@guardian/grid-client": "^1.1.1",
     "@guardian/libs": "^16.0.0",
     "@guardian/node-riffraff-artifact": "^0.3.2",
-    "@guardian/source": "^6.0.0",
+    "@guardian/source": "^8.0.0",
     "@rollup/plugin-alias": "^3.1.1",
     "@rollup/plugin-babel": "^5.1.0",
     "@rollup/plugin-commonjs": "^14.0.0",
@@ -96,7 +96,7 @@
   "peerDependencies": {
     "@emotion/react": "^11.1.2",
     "@guardian/libs": "^16.0.0",
-    "@guardian/source": ">= 1.0.1 < 7",
+    "@guardian/source": "^8.0.0",
     "react": "17.0.2 || 18.2.0"
   },
   "publishConfig": {

diff --git a/src/AppBanner/index.tsx b/src/AppBanner/index.tsx
@@ -90,7 +90,7 @@ export const AppBanner = (props: Props): ReactElement | null => {
 
                     <Button
                         onClick={(e) => onCloseClick(e, 0)}
-                        css={localStyles.primaryButton}
+                        cssOverrides={localStyles.primaryButton}
                         theme={overrridenReaderRevenueTheme}
                     >
                         {'Ok, got it'}

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,22 @@ 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};
+        line-height: 1.4;
         margin: 0;
     `,
     imageCaptionBold: css`
-        ${body.medium({ fontWeight: 'bold' })}
+        ${textEgyptianBold17};
+        line-height: 1.4;
     `,
     imageCaptionItalic: css`
-        ${body.medium({ fontStyle: 'italic' })}
+        ${textEgyptianItalic17};
+        line-height: 1.4;
     `,
 };
 

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,
+    headlineBold20,
+} from '@guardian/source/foundations';
 import { PrimaryCtaButton } from '../components/PrimaryCtaButton';
 import { ReminderCtaButton } from '../components/ReminderCtaButton';
 import { COMPONENT_NAME, canRender, parseParagraphs } from './canRender';
@@ -33,7 +41,8 @@ const styles = {
         background-color: #f6f6f6;
         display: flex;
         flex-direction: column;
-        ${body.medium()}
+        ${textEgyptian17};
+        line-height: 1.4;
 
         b,
         strong {
@@ -46,12 +55,12 @@ const styles = {
         ${linkStyles}
     `,
     heading: css`
-        ${headline.xxsmall({ fontWeight: 'bold' })}
+        ${headlineBold20};
         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>;
@@ -18,7 +18,7 @@ type SignUpButtonProps = {
 
 const SignUpButton = ({ buttonStyles, newsletterCta, onClick }: SignUpButtonProps) => (
     <ThemeProvider theme={buttonThemeBrandAlt}>
-        <Button css={buttonStyles.button} onClick={onClick}>
+        <Button cssOverrides={buttonStyles.button} onClick={onClick}>
             {newsletterCta}
         </Button>
     </ThemeProvider>
@@ -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/PrimaryCtaButton.tsx b/src/components/PrimaryCtaButton.tsx
@@ -70,7 +70,7 @@ export const PrimaryCtaButton = ({
                         target="_blank"
                         rel="noopener noreferrer"
                         priority={'primary'}
-                        css={styles.contributionButtonOverrides}
+                        cssOverrides={styles.contributionButtonOverrides}
                         onClick={onClick}
                     >
                         {buttonText}

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,8 @@ const getButtonStyles = (styles: ReminderButtonColorStyles) => {
             margin: ${space[1]}px ${space[2]}px ${space[1]}px 0;
         `,
         thankYouText: css`
-            ${body.medium({ fontWeight: 'bold' })};
+            ${textEgyptianBold17};
+            line-height: 1.4;
             margin-top: ${space[3]}px;
         `,
         remindMeButtonOverrides: css`
@@ -51,7 +52,8 @@ const getButtonStyles = (styles: ReminderButtonColorStyles) => {
         `,
         smallPrint: css`
             margin-top: ${space[2]}px;
-            ${body.small()};
+            ${textEgyptian15};
+            line-height: 1.4;
         `,
     };
 };
@@ -68,7 +70,7 @@ const RemindMeButton = ({ buttonStyles, ctaText, onClick }: RemindMeButtonProps)
             <LinkButton
                 onClick={() => onClick()}
                 priority="tertiary"
-                css={buttonStyles.remindMeButtonOverrides}
+                cssOverrides={buttonStyles.remindMeButtonOverrides}
                 theme={{ borderTertiary: 'currentColor' }}
             >
                 {ctaText}

diff --git a/yarn.lock b/yarn.lock
@@ -3045,10 +3045,10 @@
     yaml "^1.7.2"
     yargs "^15.4.1"
 
-"@guardian/source@^6.0.0":
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/@guardian/source/-/source-6.1.0.tgz#9c4e289a4529002e4f3252577a28c237457e52ae"
-  integrity sha512-Vez2zPyOa6SLNUSQ6XOIwFPGOcgRrg9MgRQTvG9ERUsYamuDFC3WiGi5U3tMll23WEekKSshd8jDZsAyWz5u5w==
+"@guardian/source@^8.0.0":
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/@guardian/source/-/source-8.0.0.tgz#99468fc96d8cb27669aaaa3355fa18a201208b1e"
+  integrity sha512-P6OTmCWsSWkT20M5uRAPoKonsz3nikOj308mUEiFDO2vpx1oyG2V6KP0YBlDxoSzw7EW6KbM9Ptat6VNd55cEw==
   dependencies:
     mini-svg-data-uri "1.4.4"