Bump @guardian/* packages (#474)

* chore(deps): bump @guardian/* packages this results in a major dependency change, due to the fact that these change the peer dependencies range. * refactor: use new Button theme props https://github.com/guardian/csnx/blob/main/libs/%40guardian/source-react-components/CHANGELOG.md#2100 * fix(Button): apply border colour from text
guardian · Apr 23, 2024 · 7438b21 · 7438b21
1 parent 4a0ef96
commit 7438b21
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 48 deletions.
diff --git a/.changeset/honest-tomatoes-type.md b/.changeset/honest-tomatoes-type.md
@@ -0,0 +1,9 @@
+---
+'@guardian/braze-components': major
+---
+
+- Bumps `@guardian/source-react-components` to [`v22.1.0`](https://github.com/guardian/csnx/releases/tag/%40guardian%2Fsource-react-components%4022.1.0)
+- Bumps `@guardian/source-react-components-development-kitchen` to [`v19.0.0`](https://github.com/guardian/csnx/releases/tag/%40guardian%2Fsource-react-components-development-kitchen%4019.0.0)
+
+This is a major change [as per our recommendations](https://github.com/guardian/recommendations/blob/main/npm-packages.md#changes-to-peerdependencies-ranges-are-breaking), and consumers should
+ensure that they provide a compatible version of the package.
diff --git a/package.json b/package.json
@@ -48,8 +48,8 @@
     "@guardian/libs": "^16.0.0",
     "@guardian/node-riffraff-artifact": "^0.3.2",
     "@guardian/source-foundations": "^14.1.2",
-    "@guardian/source-react-components": "^18.0.0",
-    "@guardian/source-react-components-development-kitchen": "^16.0.0",
+    "@guardian/source-react-components": "22.1.0",
+    "@guardian/source-react-components-development-kitchen": "19.0.0",
     "@rollup/plugin-alias": "^3.1.1",
     "@rollup/plugin-babel": "^5.1.0",
     "@rollup/plugin-commonjs": "^14.0.0",
@@ -102,8 +102,8 @@
     "@emotion/react": "^11.1.2",
     "@guardian/libs": "^16.0.0",
     "@guardian/source-foundations": "^14.1.2",
-    "@guardian/source-react-components": "^18.0.0",
-    "@guardian/source-react-components-development-kitchen": "^16.0.0",
+    "@guardian/source-react-components": "^22.1.0",
+    "@guardian/source-react-components-development-kitchen": "^19.0.0",
     "react": "17.0.2 || 18.2.0"
   },
   "np": {

diff --git a/src/AppBanner/index.tsx b/src/AppBanner/index.tsx
@@ -1,7 +1,6 @@
 import React, { useState, ReactElement } from 'react';
 import { css } from '@emotion/react';
-import { ThemeProvider } from '@emotion/react';
-import { Button, buttonThemeReaderRevenueBrandAlt } from '@guardian/source-react-components';
+import { Button, themeButtonReaderRevenueBrandAlt } from '@guardian/source-react-components';
 import { space, from, until } from '@guardian/source-foundations';
 import type { TrackClick } from '../utils/tracking';
 
@@ -22,7 +21,7 @@ export type BrazeMessageProps = {
     imageUrl?: string;
 };
 
-import type { ButtonTheme } from '@guardian/source-react-components';
+import type { ThemeButton } from '@guardian/source-react-components';
 
 export type Props = {
     brazeMessageProps: BrazeMessageProps;
@@ -46,18 +45,14 @@ export const AppBanner = (props: Props): ReactElement | null => {
     // This is to keep button colors the same as before
     // https://github.com/guardian/braze-components/pull/123
     // Probably should be removed later
-    const overrridenReaderRevenueTheme: { button: ButtonTheme } = {
-        button: {
-            ...buttonThemeReaderRevenueBrandAlt.button,
-            backgroundPrimary: 'rgb(51, 51, 51)',
-            backgroundPrimaryHover: 'black',
-        },
+    const overrridenReaderRevenueTheme: Partial<ThemeButton> = {
+        ...themeButtonReaderRevenueBrandAlt,
+        backgroundPrimary: 'rgb(51, 51, 51)',
+        backgroundPrimaryHover: 'black',
     };
-    const notInterestedTheme: { button: ButtonTheme } = {
-        button: {
-            ...buttonThemeReaderRevenueBrandAlt.button,
-            textSubdued: 'rgb(51, 51, 51)',
-        },
+    const notInterestedTheme: Partial<ThemeButton> = {
+        ...themeButtonReaderRevenueBrandAlt,
+        textSubdued: 'rgb(51, 51, 51)',
     };
 
     if (!showBanner) {
@@ -93,27 +88,28 @@ export const AppBanner = (props: Props): ReactElement | null => {
                         </span>
                     </p>
 
-                    <ThemeProvider theme={overrridenReaderRevenueTheme}>
-                        <Button onClick={(e) => onCloseClick(e, 0)} css={localStyles.primaryButton}>
-                            {'Ok, got it'}
-                        </Button>
-                    </ThemeProvider>
-                    <ThemeProvider theme={notInterestedTheme}>
-                        <Button
-                            onClick={(e) => onCloseClick(e, 0)}
-                            priority="subdued"
-                            cssOverrides={css`
-                                text-decoration: none;
-                                text-underline-offset: inherit;
-
-                                &:hover {
-                                    text-decoration: underline;
-                                }
-                            `}
-                        >
-                            {"I'm not interested"}
-                        </Button>
-                    </ThemeProvider>
+                    <Button
+                        onClick={(e) => onCloseClick(e, 0)}
+                        css={localStyles.primaryButton}
+                        theme={overrridenReaderRevenueTheme}
+                    >
+                        {'Ok, got it'}
+                    </Button>
+                    <Button
+                        onClick={(e) => onCloseClick(e, 0)}
+                        priority="subdued"
+                        theme={notInterestedTheme}
+                        cssOverrides={css`
+                            text-decoration: none;
+                            text-underline-offset: inherit;
+
+                            &:hover {
+                                text-decoration: underline;
+                            }
+                        `}
+                    >
+                        {"I'm not interested"}
+                    </Button>
                 </div>
                 <div css={styles.bottomRightComponent}>
                     <div css={localStyles.image}>

diff --git a/src/components/ReminderCtaButton.tsx b/src/components/ReminderCtaButton.tsx
@@ -69,6 +69,7 @@ const RemindMeButton = ({ buttonStyles, ctaText, onClick }: RemindMeButtonProps)
                 onClick={() => onClick()}
                 priority="tertiary"
                 css={buttonStyles.remindMeButtonOverrides}
+                theme={{ borderTertiary: 'currentColor' }}
             >
                 {ctaText}
             </LinkButton>

diff --git a/yarn.lock b/yarn.lock
@@ -2890,15 +2890,15 @@
   dependencies:
     mini-svg-data-uri "1.4.4"
 
-"@guardian/source-react-components-development-kitchen@^16.0.0":
-  version "16.0.0"
-  resolved "https://registry.yarnpkg.com/@guardian/source-react-components-development-kitchen/-/source-react-components-development-kitchen-16.0.0.tgz#cd394cec864484ec18d27b2d4700dbf68339b20c"
-  integrity sha512-wJgQgPJIuahWS3nvHYhIsb0U/nsmmWyL2F6ID+so8Ft39/gEiyssPK/agqqWA0i/zUyttv5Fn3+Hk0tijau5+A==
-
-"@guardian/source-react-components@^18.0.0":
-  version "18.0.0"
-  resolved "https://registry.yarnpkg.com/@guardian/source-react-components/-/source-react-components-18.0.0.tgz#ed18cd7196a1988f9254442a1db507381a66f0a1"
-  integrity sha512-7mt6RDmViRdUKUlU8OaswIsYnR+yFEt5iYbRhmXB+A0XjiTeLYP8EHKmazISRlGXTZjjG701WgY5witaShI1YA==
+"@guardian/source-react-components-development-kitchen@19.0.0":
+  version "19.0.0"
+  resolved "https://registry.yarnpkg.com/@guardian/source-react-components-development-kitchen/-/source-react-components-development-kitchen-19.0.0.tgz#e8b2741bc17a3f535b9c4e2b1cfa968ff223d8d4"
+  integrity sha512-YPqsLlwbuXNcD6dkUuzCCp/ytkwY7HH8ZozuuxlLhdwMFywFuvLRuCAp0q36gEBzcmuEU3eGjSIE823AKK9pfA==
+
+"@guardian/source-react-components@22.1.0":
+  version "22.1.0"
+  resolved "https://registry.yarnpkg.com/@guardian/source-react-components/-/source-react-components-22.1.0.tgz#8239eb1009b37e5c541a6f3629744296b84a862f"
+  integrity sha512-2oNhJsd4eaQRuHsOeQLkFZ3y4KAaA7BnG/qQES1SbPSx+e+MA8Z2UZu/9v/SEkGIleffkKKSeftP1TGQr4zJwQ==
 
 "@hapi/hoek@^9.0.0":
   version "9.2.0"