From 2df40a51635be9fb51fd30e5e80bc23975990ed9 Mon Sep 17 00:00:00 2001 From: Richard Bangay Date: Tue, 17 Dec 2024 10:24:33 +0000 Subject: [PATCH 1/9] Bump source-devlopment-kitchen version up to 2.0.0 on the journey to updating to a more recent version --- .../mma/cancel/CancellationReasonReview.tsx | 8 +++---- .../CancelAlternativeReview.tsx | 4 ++-- ...nsCancellationFlowFinancialSaveAttempt.tsx | 8 ++----- package.json | 6 ++--- yarn.lock | 24 +++++++++---------- 5 files changed, 23 insertions(+), 27 deletions(-) diff --git a/client/components/mma/cancel/CancellationReasonReview.tsx b/client/components/mma/cancel/CancellationReasonReview.tsx index 48e2d02af..6b6a0719b 100644 --- a/client/components/mma/cancel/CancellationReasonReview.tsx +++ b/client/components/mma/cancel/CancellationReasonReview.tsx @@ -3,8 +3,8 @@ import { palette, space, until } from '@guardian/source/foundations'; import { Button, InlineError, + Spinner, SvgArrowRightStraight, - SvgSpinner, } from '@guardian/source/react-components'; import type { ChangeEvent, FC } from 'react'; import { useContext, useEffect, useState } from 'react'; @@ -28,7 +28,7 @@ import { sans } from '../../../styles/fonts'; import { measure } from '../../../styles/typography'; import { useFetch } from '../../../utilities/hooks/useFetch'; import { GenericErrorScreen } from '../../shared/GenericErrorScreen'; -import { Spinner } from '../../shared/Spinner'; +import { Spinner as SpinnerWithMessage } from '../../shared/Spinner'; import { WithStandardTopMargin } from '../../shared/WithStandardTopMargin'; import type { DeliveryRecordDetail, @@ -363,7 +363,7 @@ const ConfirmCancellationAndReturnRow = ( icon={ showAlternativeBeforeCancelling === 'pending' ? ( - + ) : ( ) @@ -584,7 +584,7 @@ export const CancellationReasonReview = () => { {isLoading() ? ( !loadingHasFailed && ( - + ) ) : ( <> diff --git a/client/components/mma/cancel/cancellationSaves/CancelAlternativeReview.tsx b/client/components/mma/cancel/cancellationSaves/CancelAlternativeReview.tsx index d9d0c157a..a921f538f 100755 --- a/client/components/mma/cancel/cancellationSaves/CancelAlternativeReview.tsx +++ b/client/components/mma/cancel/cancellationSaves/CancelAlternativeReview.tsx @@ -10,7 +10,7 @@ import { textSans17, textSansBold17, } from '@guardian/source/foundations'; -import { Button, SvgSpinner } from '@guardian/source/react-components'; +import { Button, Spinner } from '@guardian/source/react-components'; import { ErrorSummary } from '@guardian/source-development-kitchen/react-components'; import { capitalize } from 'lodash'; import type { ReactElement } from 'react'; @@ -165,7 +165,7 @@ export const CancelAlternativeReview = () => { ['aria-disabled']?: true; } = {}; if (performingDiscountStatus === 'PENDING') { - confirmBtnIconProps.icon = ; + confirmBtnIconProps.icon = ; confirmBtnIconProps.iconSide = 'right'; confirmBtnIconProps.disabled = true; confirmBtnIconProps['aria-disabled'] = true; diff --git a/client/components/mma/cancel/contributions/ContributionsCancellationFlowFinancialSaveAttempt.tsx b/client/components/mma/cancel/contributions/ContributionsCancellationFlowFinancialSaveAttempt.tsx index 6fd427f37..4e03a722d 100644 --- a/client/components/mma/cancel/contributions/ContributionsCancellationFlowFinancialSaveAttempt.tsx +++ b/client/components/mma/cancel/contributions/ContributionsCancellationFlowFinancialSaveAttempt.tsx @@ -1,10 +1,6 @@ import { css } from '@emotion/react'; import { from, space } from '@guardian/source/foundations'; -import { - Button, - LinkButton, - SvgSpinner, -} from '@guardian/source/react-components'; +import { Button, LinkButton, Spinner } from '@guardian/source/react-components'; import * as Sentry from '@sentry/browser'; import { useContext, useEffect, useState } from 'react'; import { Navigate, useLocation, useNavigate } from 'react-router-dom'; @@ -238,7 +234,7 @@ export const ContributionsCancellationFlowFinancialSaveAttempt: React.FC< icon={ showAlternativeBeforeCancelling === 'pending' ? ( - + ) : undefined } iconSide="right" diff --git a/package.json b/package.json index 3701fdd22..3658b9238 100644 --- a/package.json +++ b/package.json @@ -146,9 +146,9 @@ "@guardian/ab-core": "2.0.0", "@guardian/ab-react": "2.0.1", "@guardian/commercial": "^23.7.5", - "@guardian/libs": "16.1.0", - "@guardian/source": "1.0.2", - "@guardian/source-development-kitchen": "1.0.0", + "@guardian/libs": "16.1.3", + "@guardian/source": "3.0.0", + "@guardian/source-development-kitchen": "2.0.0", "@okta/jwt-verifier": "^4.0.1", "@sentry/browser": "5.22.3", "@sentry/node": "5.22.3", diff --git a/yarn.lock b/yarn.lock index 1e36c58fd..c5333f1d2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3260,10 +3260,10 @@ eslint-plugin-eslint-comments "3.2.0" eslint-plugin-import "2.29.1" -"@guardian/libs@16.1.0": - version "16.1.0" - resolved "https://registry.yarnpkg.com/@guardian/libs/-/libs-16.1.0.tgz#70d986a312a04e609a89ef1a631f6a3000e322da" - integrity sha512-nb7r0C+UO4P6f0wH8sATtGYnGrfqCzOX4M1Pp2G+uj9c3tehMRSum4mgnqxSAVXN50LtkL2bwd4u3Ichk6670Q== +"@guardian/libs@16.1.3": + version "16.1.3" + resolved "https://registry.yarnpkg.com/@guardian/libs/-/libs-16.1.3.tgz#e40bfe7641ff84db0f4ac1f862cfbf9d047b61f5" + integrity sha512-n8iv8De6lGSGcIyagbK79gv5tK5o+bRbsWSsYH+v6ob2HNwjVSkwY+Ang+snQWp6DPed+iHvnQQK5pWXnXMfOA== "@guardian/libs@^18.0.0": version "18.0.2" @@ -3314,15 +3314,15 @@ resolved "https://registry.yarnpkg.com/@guardian/prettier/-/prettier-1.0.0.tgz#a5dd832e2ce31c6f723f0af77fe116b32b4695ff" integrity sha512-srnhPn3hcSv14mDotFQN0CfN3k8MaGsXdK8BXAG95QQxM69Ybi16o4/Xqe361fwDEp7m+9jf03sETcMi8WsDlA== -"@guardian/source-development-kitchen@1.0.0": - version "1.0.0" - resolved "https://registry.yarnpkg.com/@guardian/source-development-kitchen/-/source-development-kitchen-1.0.0.tgz#9ac7efe9b28cb33170ed97c67eba1c25dc10a227" - integrity sha512-nZYJuHici8Bja7bKs3GZY5UzNCnbWOq1OCYclC6rhvpkcXdrtP+zyqX6YwJKWMgEKg+aL/l595OubBdGenn7OA== +"@guardian/source-development-kitchen@2.0.0": + version "2.0.0" + resolved "https://registry.yarnpkg.com/@guardian/source-development-kitchen/-/source-development-kitchen-2.0.0.tgz#d191249f152f1ead84ccfd9c8f10479e535bdb53" + integrity sha512-c24K+zZlTVZtuSH425DbKPGU31ukR82yKdP8T8yqMzlrjd4fvh2J0EgruAf+o2kjZHD51pLxki/ypzd9asdVeA== -"@guardian/source@1.0.2": - version "1.0.2" - resolved "https://registry.yarnpkg.com/@guardian/source/-/source-1.0.2.tgz#d3910fa625694437fb425b19897376d85238cab4" - integrity sha512-BoGkx6tDcQwDxfQ5dYPzpmSqf2SFTgNPDG7bwLPeeL0F6Up5EK5yIlfNslOS8KSh6a4SNBOU52DedQ9mFQkQhA== +"@guardian/source@3.0.0": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@guardian/source/-/source-3.0.0.tgz#faf8f6f5977fe107793a56b7f4e3ae918d1cc80e" + integrity sha512-ocdnSojiVmPaDXnPSMo9FQbPgP00JzR74AftgCDqcLTo9uXgLmO0w9TADMHm48MhNsHqH1RDqgDdStd37Qbctw== dependencies: mini-svg-data-uri "1.4.4" From 3fa50bd68782a71b5d553ab0b2507ac903bcc3f4 Mon Sep 17 00:00:00 2001 From: Richard Bangay Date: Tue, 17 Dec 2024 14:58:14 +0000 Subject: [PATCH 2/9] bump source-development-kitchen from v3 to v4 --- package.json | 8 +++---- yarn.lock | 65 ++++++++++++++++++++++++++++++++++++++-------------- 2 files changed, 52 insertions(+), 21 deletions(-) diff --git a/package.json b/package.json index 3658b9238..af3bfa9a1 100644 --- a/package.json +++ b/package.json @@ -142,13 +142,13 @@ "whatwg-fetch": "2.0.4" }, "dependencies": { - "@emotion/react": "11.11.1", + "@emotion/react": "11.11.3", "@guardian/ab-core": "2.0.0", "@guardian/ab-react": "2.0.1", "@guardian/commercial": "^23.7.5", - "@guardian/libs": "16.1.3", - "@guardian/source": "3.0.0", - "@guardian/source-development-kitchen": "2.0.0", + "@guardian/libs": "17.0.0", + "@guardian/source": "4.0.0", + "@guardian/source-development-kitchen": "4.0.0", "@okta/jwt-verifier": "^4.0.1", "@sentry/browser": "5.22.3", "@sentry/node": "5.22.3", diff --git a/yarn.lock b/yarn.lock index c5333f1d2..5f06e2e86 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2989,6 +2989,11 @@ resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.1.tgz#4ffb0055f7ef676ebc3a5a91fb621393294e2f43" integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ== +"@emotion/hash@^0.9.2": + version "0.9.2" + resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.2.tgz#ff9221b9f58b4dfe61e619a7788734bd63f6898b" + integrity sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g== + "@emotion/jest@11.9.1": version "11.9.1" resolved "https://registry.yarnpkg.com/@emotion/jest/-/jest-11.9.1.tgz#65224814552eab6acb923504e597c6f6b67e90d6" @@ -3010,15 +3015,20 @@ resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17" integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA== -"@emotion/react@11.11.1": - version "11.11.1" - resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.11.1.tgz#b2c36afac95b184f73b08da8c214fdf861fa4157" - integrity sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA== +"@emotion/memoize@^0.9.0": + version "0.9.0" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.9.0.tgz#745969d649977776b43fc7648c556aaa462b4102" + integrity sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ== + +"@emotion/react@11.11.3": + version "11.11.3" + resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.11.3.tgz#96b855dc40a2a55f52a72f518a41db4f69c31a25" + integrity sha512-Cnn0kuq4DoONOMcnoVsTOR8E+AdnKFf//6kUWc4LCdnxj31pZWn7rIULd6Y7/Js1PiPHzn7SKCM9vB/jBni8eA== dependencies: "@babel/runtime" "^7.18.3" "@emotion/babel-plugin" "^11.11.0" "@emotion/cache" "^11.11.0" - "@emotion/serialize" "^1.1.2" + "@emotion/serialize" "^1.1.3" "@emotion/use-insertion-effect-with-fallbacks" "^1.0.1" "@emotion/utils" "^1.2.1" "@emotion/weak-memoize" "^0.3.1" @@ -3035,11 +3045,27 @@ "@emotion/utils" "^1.2.1" csstype "^3.0.2" +"@emotion/serialize@^1.1.3": + version "1.3.3" + resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.3.3.tgz#d291531005f17d704d0463a032fe679f376509e8" + integrity sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA== + dependencies: + "@emotion/hash" "^0.9.2" + "@emotion/memoize" "^0.9.0" + "@emotion/unitless" "^0.10.0" + "@emotion/utils" "^1.4.2" + csstype "^3.0.2" + "@emotion/sheet@^1.2.2": version "1.2.2" resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.2.tgz#d58e788ee27267a14342303e1abb3d508b6d0fec" integrity sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA== +"@emotion/unitless@^0.10.0": + version "0.10.0" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.10.0.tgz#2af2f7c7e5150f497bdabd848ce7b218a27cf745" + integrity sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg== + "@emotion/unitless@^0.8.1": version "0.8.1" resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.1.tgz#182b5a4704ef8ad91bde93f7a860a88fd92c79a3" @@ -3055,6 +3081,11 @@ resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.1.tgz#bbab58465738d31ae4cb3dbb6fc00a5991f755e4" integrity sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg== +"@emotion/utils@^1.4.2": + version "1.4.2" + resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.4.2.tgz#6df6c45881fcb1c412d6688a311a98b7f59c1b52" + integrity sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA== + "@emotion/weak-memoize@^0.3.1": version "0.3.1" resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz#d0fce5d07b0620caa282b5131c297bb60f9d87e6" @@ -3260,10 +3291,10 @@ eslint-plugin-eslint-comments "3.2.0" eslint-plugin-import "2.29.1" -"@guardian/libs@16.1.3": - version "16.1.3" - resolved "https://registry.yarnpkg.com/@guardian/libs/-/libs-16.1.3.tgz#e40bfe7641ff84db0f4ac1f862cfbf9d047b61f5" - integrity sha512-n8iv8De6lGSGcIyagbK79gv5tK5o+bRbsWSsYH+v6ob2HNwjVSkwY+Ang+snQWp6DPed+iHvnQQK5pWXnXMfOA== +"@guardian/libs@17.0.0": + version "17.0.0" + resolved "https://registry.yarnpkg.com/@guardian/libs/-/libs-17.0.0.tgz#cf33caf631bc9a375ef215236927cc74c07fde04" + integrity sha512-9/DshbBrF+0DyLuKiDIzRr9t/NYGuv5fDJVZwHs73H4AQBaC0er+9aKUjjRueDILKKefOaBVTerWm2Jw4YCmmQ== "@guardian/libs@^18.0.0": version "18.0.2" @@ -3314,15 +3345,15 @@ resolved "https://registry.yarnpkg.com/@guardian/prettier/-/prettier-1.0.0.tgz#a5dd832e2ce31c6f723f0af77fe116b32b4695ff" integrity sha512-srnhPn3hcSv14mDotFQN0CfN3k8MaGsXdK8BXAG95QQxM69Ybi16o4/Xqe361fwDEp7m+9jf03sETcMi8WsDlA== -"@guardian/source-development-kitchen@2.0.0": - version "2.0.0" - resolved "https://registry.yarnpkg.com/@guardian/source-development-kitchen/-/source-development-kitchen-2.0.0.tgz#d191249f152f1ead84ccfd9c8f10479e535bdb53" - integrity sha512-c24K+zZlTVZtuSH425DbKPGU31ukR82yKdP8T8yqMzlrjd4fvh2J0EgruAf+o2kjZHD51pLxki/ypzd9asdVeA== +"@guardian/source-development-kitchen@4.0.0": + version "4.0.0" + resolved "https://registry.yarnpkg.com/@guardian/source-development-kitchen/-/source-development-kitchen-4.0.0.tgz#8a4beb0de83d82475a5b366f3ded050b45681e9c" + integrity sha512-83HgSJjfTriPvJPkBx8XZPZA3X/btVQYGk5obo8xMD8Wi/xl38fk5F7c/WYPVA94MNkmXVZbgemTz2uzRlmI+Q== -"@guardian/source@3.0.0": - version "3.0.0" - resolved "https://registry.yarnpkg.com/@guardian/source/-/source-3.0.0.tgz#faf8f6f5977fe107793a56b7f4e3ae918d1cc80e" - integrity sha512-ocdnSojiVmPaDXnPSMo9FQbPgP00JzR74AftgCDqcLTo9uXgLmO0w9TADMHm48MhNsHqH1RDqgDdStd37Qbctw== +"@guardian/source@4.0.0": + version "4.0.0" + resolved "https://registry.yarnpkg.com/@guardian/source/-/source-4.0.0.tgz#a45e4412fbbbbd2c0cdb7d4ddc4986fae36c16e1" + integrity sha512-Ls3W0b/zktU/BF7A5S8qh0Z3vlrtmxsN6lUdh2n7MIUdbBvhP63AN2Po56DwdsUHQU6joMebzfHbCSzkm2xJww== dependencies: mini-svg-data-uri "1.4.4" From e7eb2b3a3a72a0e95090481891f75be8168a9015 Mon Sep 17 00:00:00 2001 From: Richard Bangay Date: Tue, 17 Dec 2024 15:24:23 +0000 Subject: [PATCH 3/9] update source-development-kitchen to v5 and source to v6 --- .../mma/shared/benefits/BenefitsCard.tsx | 7 +++++-- .../mma/shared/benefits/BenefitsSection.tsx | 4 ++-- package.json | 4 ++-- yarn.lock | 16 ++++++++-------- 4 files changed, 17 insertions(+), 14 deletions(-) diff --git a/client/components/mma/shared/benefits/BenefitsCard.tsx b/client/components/mma/shared/benefits/BenefitsCard.tsx index 86123a510..52a9ee62f 100644 --- a/client/components/mma/shared/benefits/BenefitsCard.tsx +++ b/client/components/mma/shared/benefits/BenefitsCard.tsx @@ -1,6 +1,9 @@ import { css } from '@emotion/react'; import { space, textSansBold17 } from '@guardian/source/foundations'; -import { SvgCrossRound, SvgTickRound } from '@guardian/source/react-components'; +import { + SvgCrossRoundFilled, + SvgTickRound, +} from '@guardian/source/react-components'; import type { ProductBenefit } from './BenefitsConfiguration'; import { benefitsCss, unavailableBenefitsCss } from './BenefitsStyles'; @@ -8,7 +11,7 @@ const UpgradeBenefit = ({ benefit }: { benefit: ProductBenefit }) => { return (
  • {benefit.isUnavailable ? ( - + ) : ( )} diff --git a/client/components/mma/shared/benefits/BenefitsSection.tsx b/client/components/mma/shared/benefits/BenefitsSection.tsx index 8c7383b8f..646b69731 100644 --- a/client/components/mma/shared/benefits/BenefitsSection.tsx +++ b/client/components/mma/shared/benefits/BenefitsSection.tsx @@ -2,7 +2,7 @@ import { css } from '@emotion/react'; import { textSans15 } from '@guardian/source/foundations'; import { Hide, - SvgCrossRound, + SvgCrossRoundFilled, SvgTickRound, } from '@guardian/source/react-components'; import type { ProductBenefit } from './BenefitsConfiguration'; @@ -23,7 +23,7 @@ const Benefit = ({ return (
  • {benefit.isUnavailable ? ( - diff --git a/package.json b/package.json index af3bfa9a1..81bba9705 100644 --- a/package.json +++ b/package.json @@ -147,8 +147,8 @@ "@guardian/ab-react": "2.0.1", "@guardian/commercial": "^23.7.5", "@guardian/libs": "17.0.0", - "@guardian/source": "4.0.0", - "@guardian/source-development-kitchen": "4.0.0", + "@guardian/source": "6.0.0", + "@guardian/source-development-kitchen": "5.0.0", "@okta/jwt-verifier": "^4.0.1", "@sentry/browser": "5.22.3", "@sentry/node": "5.22.3", diff --git a/yarn.lock b/yarn.lock index 5f06e2e86..40fca6714 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3345,15 +3345,15 @@ resolved "https://registry.yarnpkg.com/@guardian/prettier/-/prettier-1.0.0.tgz#a5dd832e2ce31c6f723f0af77fe116b32b4695ff" integrity sha512-srnhPn3hcSv14mDotFQN0CfN3k8MaGsXdK8BXAG95QQxM69Ybi16o4/Xqe361fwDEp7m+9jf03sETcMi8WsDlA== -"@guardian/source-development-kitchen@4.0.0": - version "4.0.0" - resolved "https://registry.yarnpkg.com/@guardian/source-development-kitchen/-/source-development-kitchen-4.0.0.tgz#8a4beb0de83d82475a5b366f3ded050b45681e9c" - integrity sha512-83HgSJjfTriPvJPkBx8XZPZA3X/btVQYGk5obo8xMD8Wi/xl38fk5F7c/WYPVA94MNkmXVZbgemTz2uzRlmI+Q== +"@guardian/source-development-kitchen@5.0.0": + version "5.0.0" + resolved "https://registry.yarnpkg.com/@guardian/source-development-kitchen/-/source-development-kitchen-5.0.0.tgz#1b6e5d32745da87ddde496850cf2c6396aeb24ef" + integrity sha512-trKVTK7tg6ytTtRUXWLfuCkt5qhpyI2EjOXnuOn8SBXkhq0JQLk+ok13vrYsvqjwDdrGLY1eCVLwQfDkmqdFfA== -"@guardian/source@4.0.0": - version "4.0.0" - resolved "https://registry.yarnpkg.com/@guardian/source/-/source-4.0.0.tgz#a45e4412fbbbbd2c0cdb7d4ddc4986fae36c16e1" - integrity sha512-Ls3W0b/zktU/BF7A5S8qh0Z3vlrtmxsN6lUdh2n7MIUdbBvhP63AN2Po56DwdsUHQU6joMebzfHbCSzkm2xJww== +"@guardian/source@6.0.0": + version "6.0.0" + resolved "https://registry.yarnpkg.com/@guardian/source/-/source-6.0.0.tgz#31cfe59c38462003404192e7345cf2ff4e0f6cf3" + integrity sha512-LsUXAo0d2hYQ1M/Nn9sLx6VEH1zMtr3rk0RG5r0T843d0ZWCTaP2gX3AOdD8S9XPESSWEH8/wxuQkPiCzI18nw== dependencies: mini-svg-data-uri "1.4.4" From ec3865320a7b2fbf1c3827b639f8837df9e1f676 Mon Sep 17 00:00:00 2001 From: Richard Bangay Date: Wed, 18 Dec 2024 10:11:23 +0000 Subject: [PATCH 4/9] upgrade chromatic --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 81bba9705..90c4f9bba 100644 --- a/package.json +++ b/package.json @@ -106,7 +106,7 @@ "babel-loader-exclude-node-modules-except": "1.2.1", "babel-plugin-lodash": "3.3.4", "babel-plugin-source-map-support": "2.1.1", - "chromatic": "6.4.1", + "chromatic": "11.20.2", "copy-webpack-plugin": "9.1.0", "core-js": "3.19.1", "cypress": "^13.16.1", diff --git a/yarn.lock b/yarn.lock index 40fca6714..2b3916c65 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7322,10 +7322,10 @@ chownr@^2.0.0: resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece" integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ== -chromatic@6.4.1: - version "6.4.1" - resolved "https://registry.yarnpkg.com/chromatic/-/chromatic-6.4.1.tgz#fd8fad82282be030f4e4697dd992bbcbcbe75dc9" - integrity sha512-i3WLhIORS8vu9OStJwPQ487/MYZiXT7byU5c9we1Vvfus/w1Kwbj/2n11EozokomGEw5o3VAeiRrZkTCXM8xew== +chromatic@11.20.2: + version "11.20.2" + resolved "https://registry.yarnpkg.com/chromatic/-/chromatic-11.20.2.tgz#10b309179cdc0b9195a5b68970366f9ebe67dfd1" + integrity sha512-c+M3HVl5Y60c7ipGTZTyeWzWubRW70YsJ7PPDpO1D735ib8+Lu3yGF90j61pvgkXGngpkTPHZyBw83lcu2JMxA== chromatic@^11.4.0: version "11.5.4" From a1ceb72dac5122ec81301eaf67ee6da4a4e167fa Mon Sep 17 00:00:00 2001 From: Richard Bangay Date: Thu, 19 Dec 2024 12:09:55 +0000 Subject: [PATCH 5/9] upgrade source-development-kitchen and source to version 7. Includes significant changes to the way fonts are handled in a lot of MMA --- .../components/helpCentre/HelpCentrePage.tsx | 2 +- .../helpCentre/HelpCentreStyles.tsx | 2 +- client/components/mma/MMAPage.tsx | 2 +- .../mma/cancel/CancellationReasonReview.tsx | 19 +- .../records/DeliveryRecordsProblemForm.tsx | 5 +- .../mma/holiday/HolidayDateChooser.tsx | 131 +++--- .../mma/holiday/HolidayQuestionsModal.tsx | 22 +- .../components/mma/holiday/HolidayReview.tsx | 60 +-- .../mma/holiday/HolidaysOverview.tsx | 101 +++-- .../components/mma/holiday/SummaryTable.tsx | 117 ++++-- client/components/mma/identity/DropMenu.tsx | 69 ++-- .../mma/identity/MarketingToggle.tsx | 1 - .../mma/identity/NewsletterPreference.tsx | 42 +- .../components/mma/identity/PageSection.tsx | 74 ++-- .../EmailSettingsSection.tsx | 63 +-- .../identity/publicProfile/AvatarSection.tsx | 38 +- .../components/mma/identity/sharedStyles.ts | 169 ++++---- .../paymentUpdate/card/FlexCardElement.tsx | 16 +- .../paymentUpdate/dd/DirectDebitInputForm.tsx | 64 +-- .../mma/paymentUpdate/dd/DirectDebitLegal.tsx | 49 +-- client/components/mma/shared/Buttons.tsx | 11 +- client/components/mma/shared/DateInput.tsx | 80 ++-- client/components/mma/shared/DatePicker.tsx | 139 ++++--- client/components/shared/Main.tsx | 60 +-- client/components/shared/footer/Footer.tsx | 7 +- client/components/shared/nav/LeftSideNav.tsx | 83 ++-- client/styles/fonts.ts | 377 ++++++------------ client/styles/global.ts | 9 +- package.json | 4 +- yarn.lock | 16 +- 30 files changed, 904 insertions(+), 928 deletions(-) diff --git a/client/components/helpCentre/HelpCentrePage.tsx b/client/components/helpCentre/HelpCentrePage.tsx index 85200abfd..38f36398d 100644 --- a/client/components/helpCentre/HelpCentrePage.tsx +++ b/client/components/helpCentre/HelpCentrePage.tsx @@ -1,8 +1,8 @@ import { css, Global } from '@emotion/react'; import { lazy, Suspense, useEffect, useState } from 'react'; import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom'; +import { fonts } from '@/client/styles/fonts'; import { initFeatureSwitchUrlParamOverride } from '../../../shared/featureSwitches'; -import { fonts } from '../../styles/fonts'; import { global } from '../../styles/global'; import { useAnalytics } from '../../utilities/hooks/useAnalytics'; import { useConsent } from '../../utilities/hooks/useConsent'; diff --git a/client/components/helpCentre/HelpCentreStyles.tsx b/client/components/helpCentre/HelpCentreStyles.tsx index 4d012eeb1..6f1be34e7 100644 --- a/client/components/helpCentre/HelpCentreStyles.tsx +++ b/client/components/helpCentre/HelpCentreStyles.tsx @@ -74,7 +74,7 @@ export const sectionTitleCss = ( transform: translateY(${isOpen ? '-10%' : '-50%'}) ${isOpen ? 'rotate(-45deg)' : 'rotate(135deg)'}; transition: transform 0.4s; - right: 0; + right: ${space[3]}px; ${from.desktop} { right: 17px; } diff --git a/client/components/mma/MMAPage.tsx b/client/components/mma/MMAPage.tsx index 681451fef..f44eb8d12 100644 --- a/client/components/mma/MMAPage.tsx +++ b/client/components/mma/MMAPage.tsx @@ -4,6 +4,7 @@ import { breakpoints, from, space } from '@guardian/source/foundations'; import type { ReactNode } from 'react'; import { lazy, Suspense, useEffect, useState } from 'react'; import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom'; +import { fonts } from '@/client/styles/fonts'; import { featureSwitches, initFeatureSwitchUrlParamOverride, @@ -16,7 +17,6 @@ import type { import { PRODUCT_TYPES } from '../../../shared/productTypes'; import { abSwitches } from '../../experiments/abSwitches'; import { tests } from '../../experiments/abTests'; -import { fonts } from '../../styles/fonts'; import { global } from '../../styles/global'; import { getCookie } from '../../utilities/cookies'; import { useAnalytics } from '../../utilities/hooks/useAnalytics'; diff --git a/client/components/mma/cancel/CancellationReasonReview.tsx b/client/components/mma/cancel/CancellationReasonReview.tsx index 6b6a0719b..fd72f639f 100644 --- a/client/components/mma/cancel/CancellationReasonReview.tsx +++ b/client/components/mma/cancel/CancellationReasonReview.tsx @@ -1,5 +1,10 @@ import { css } from '@emotion/react'; -import { palette, space, until } from '@guardian/source/foundations'; +import { + palette, + space, + textSans14, + until, +} from '@guardian/source/foundations'; import { Button, InlineError, @@ -24,7 +29,6 @@ import type { ProductTypeWithCancellationFlow, WithProductType, } from '../../../../shared/productTypes'; -import { sans } from '../../../styles/fonts'; import { measure } from '../../../styles/typography'; import { useFetch } from '../../../utilities/hooks/useFetch'; import { GenericErrorScreen } from '../../shared/GenericErrorScreen'; @@ -186,12 +190,11 @@ const FeedbackFormAndContactUs = (props: FeedbackFormProps) => { />
    You have {props.characterLimit - feedback.length}{' '} characters remaining diff --git a/client/components/mma/delivery/records/DeliveryRecordsProblemForm.tsx b/client/components/mma/delivery/records/DeliveryRecordsProblemForm.tsx index 2782816ad..253db66d0 100644 --- a/client/components/mma/delivery/records/DeliveryRecordsProblemForm.tsx +++ b/client/components/mma/delivery/records/DeliveryRecordsProblemForm.tsx @@ -3,9 +3,9 @@ import { from, palette, space, - textSans15, textSans17, textSansBold17, + textSansItalic15, } from '@guardian/source/foundations'; import { Button, Radio, RadioGroup } from '@guardian/source/react-components'; import { capitalize } from 'lodash'; @@ -189,8 +189,7 @@ export const DeliveryRecordProblemForm = ( Please specify {!deliveryProblemRadioOption.messageIsMandatory && diff --git a/client/components/mma/holiday/HolidayDateChooser.tsx b/client/components/mma/holiday/HolidayDateChooser.tsx index 17fa44b4b..6ae442681 100644 --- a/client/components/mma/holiday/HolidayDateChooser.tsx +++ b/client/components/mma/holiday/HolidayDateChooser.tsx @@ -1,5 +1,12 @@ import { css } from '@emotion/react'; -import { from, palette, space, until } from '@guardian/source/foundations'; +import { + from, + palette, + space, + textSans14, + textSansBold17, + until, +} from '@guardian/source/foundations'; import { Button, InlineError } from '@guardian/source/react-components'; import * as Sentry from '@sentry/browser'; import { startCase } from 'lodash'; @@ -15,7 +22,6 @@ import { parseDate, } from '../../../../shared/dates'; import { isProduct } from '../../../../shared/productResponse'; -import { sans } from '../../../styles/fonts'; import { trackEvent } from '../../../utilities/analytics'; import { GenericErrorScreen } from '../../shared/GenericErrorScreen'; import { InfoIcon } from '../shared/assets/InfoIcon'; @@ -47,43 +53,40 @@ import type { } from './HolidayStopsContainer'; import { HolidayStopsContext } from './HolidayStopsContainer'; -export const cancelLinkCss = css({ - marginRight: '20px', - fontFamily: sans, - fontWeight: 'bold', - textDecoration: 'underline', - fontSize: '16px', - color: `${palette.neutral['7']}`, -}); +export const cancelLinkCss = css` + margin-right: ${space[5]}px; + ${textSansBold17}; + textdecoration: underline; + color: ${palette.neutral['7']}; +`; -export const buttonBarCss = css({ - display: 'flex', - alignItems: 'center', - marginTop: '40px', - flexWrap: 'wrap', -}); +export const buttonBarCss = css` + display: flex; + align-items: center; + margin-top: 40px; + flex-wrap: wrap; +`; -const oneAtATimeStyles = css({ - fontFamily: sans, - fontSize: '14px', - marginBottom: '27px', -}); +const oneAtATimeStyles = css` + ${textSans14}; + margin-bottom: '27px'; +`; -const fixedButtonFooterCss = css({ - [until.mobileLandscape]: { - justifyContent: 'space-between', - }, - [until.phablet]: { - position: 'fixed', - zIndex: 998, - bottom: 0, - left: 0, - right: 0, - background: palette.neutral[100], - padding: '10px', - boxShadow: '0 0 5px' + palette.neutral[60], - }, -}); +const fixedButtonFooterCss = css` + ${until.mobileLandscape} { + justify-content: space-between; + } + ${until.phablet} { + position: fixed; + z-index: 998; + bottom: 0; + left: 0; + right: 0; + background: ${palette.neutral[100]}; + padding: 10px; + box-shadow: 0 0 5px ${palette.neutral[60]}; + } ; +`; export interface SharedHolidayDateChooserState { selectedRange: DateRange; @@ -381,16 +384,20 @@ export const HolidayDateChooser = (props: HolidayDateChooserProps) => { )}

    -
    +
    You can schedule one suspension at a time.
    {
    { />
    @@ -515,11 +522,11 @@ export const HolidayDateChooser = (props: HolidayDateChooserProps) => {
    {showReviewWarning && ( diff --git a/client/components/mma/holiday/HolidayQuestionsModal.tsx b/client/components/mma/holiday/HolidayQuestionsModal.tsx index 4e67c6f03..140711d9a 100644 --- a/client/components/mma/holiday/HolidayQuestionsModal.tsx +++ b/client/components/mma/holiday/HolidayQuestionsModal.tsx @@ -1,5 +1,6 @@ +import { css } from '@emotion/react'; +import { space, textSans14 } from '@guardian/source/foundations'; import type { HolidayStopFlowProperties } from '../../../../shared/productTypes'; -import { sans } from '../../../styles/fonts'; import { CallCentreNumbers } from '../../shared/CallCentreNumbers'; import { InfoIcon } from '../shared/assets/InfoIcon'; import { Modal } from './Modal'; @@ -17,13 +18,12 @@ export const HolidayQuestionsModal = (props: HolidayQuestionsModalProps) => ( title="We are here to help" instigator={ Questions? Check here @@ -74,7 +74,11 @@ export const HolidayQuestionsModal = (props: HolidayQuestionsModalProps) => (

    • How to contact us

    -
    +
    {/*TODO add email address*/}
    diff --git a/client/components/mma/holiday/HolidayReview.tsx b/client/components/mma/holiday/HolidayReview.tsx index a551f0bcb..942e5fd75 100644 --- a/client/components/mma/holiday/HolidayReview.tsx +++ b/client/components/mma/holiday/HolidayReview.tsx @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import { space, until } from '@guardian/source/foundations'; +import { space, textSans14, until } from '@guardian/source/foundations'; import { Button, Checkbox, @@ -11,7 +11,6 @@ import type { DateRange } from '../../../../shared/dates'; import { DATE_FNS_INPUT_FORMAT, dateString } from '../../../../shared/dates'; import type { ProductDetail } from '../../../../shared/productResponse'; import { MDA_TEST_USER_HEADER } from '../../../../shared/productResponse'; -import { sans } from '../../../styles/fonts'; import { fetchWithDefaultParameters } from '../../../utilities/fetch'; import { CallCentreNumbers } from '../../shared/CallCentreNumbers'; import { InfoIcon } from '../shared/assets/InfoIcon'; @@ -76,7 +75,12 @@ const getPerformCreateOrAmendFetcher = const getRenderCreateOrAmendError = (modificationKeyword: string) => () => ( -
    +

    Sorry, {modificationKeyword} your holiday suspension failed.

    @@ -124,7 +128,11 @@ export const HolidayReview = () => { annualIssueLimit={holidayStopsResponse.annualIssueLimit} holidayStopFlowProperties={productType.holidayStops} /> -
    +
    { {productType.holidayStops.explicitConfirmationRequired && ( <>
    { Tell me more @@ -187,7 +194,12 @@ export const HolidayReview = () => { )}
    {isExecuting ? ( -
    +
    {
    ) : (
    (
    -
    -

    {props.heading}

    +
    +

    + {props.heading} +

    {props.children}
    @@ -138,13 +156,12 @@ export const HolidaysOverview = () => {
    )}
    @@ -245,13 +262,13 @@ export const HolidaysOverview = () => {
    )}
    {productDetail.subscription.autoRenew && createSuspensionButton} @@ -288,17 +305,22 @@ export const HolidaysOverview = () => { )}
    -
    +
    {productDetail.subscription.autoRenew && createSuspensionButton} diff --git a/client/components/mma/holiday/SummaryTable.tsx b/client/components/mma/holiday/SummaryTable.tsx index 2ca96a581..e0f84d078 100644 --- a/client/components/mma/holiday/SummaryTable.tsx +++ b/client/components/mma/holiday/SummaryTable.tsx @@ -1,5 +1,11 @@ import { css } from '@emotion/react'; -import { from, palette, until } from '@guardian/source/foundations'; +import { + from, + palette, + space, + textSans17, + until, +} from '@guardian/source/foundations'; import type { DateRange } from '../../../../shared/dates'; import { DATE_FNS_LONG_OUTPUT_FORMAT, @@ -10,7 +16,6 @@ import { getMainPlan, isPaidSubscriptionPlan, } from '../../../../shared/productResponse'; -import { sans } from '../../../styles/fonts'; import { ExpanderButton } from '../../shared/ExpanderButton'; import { CollatedCredits } from './CollatedCredits'; import { ExistingHolidayStopActions } from './ExistingHolidayStopActions'; @@ -22,10 +27,10 @@ import type { MinimalHolidayStopRequest, } from './HolidayStopApi'; -const cellCss = css({ - padding: '8px 16px 8px 16px', - border: '1px solid ' + palette.neutral[86], -}); +const cellCss = css` + padding: ${space[2]}px ${space[4]}px; + border: 1px solid ${palette.neutral[86]}; +`; interface SummaryTableProps { data: HolidayStopRequest[] | SharedHolidayDateChooserState; @@ -88,9 +93,9 @@ const SummaryTableRow = (props: SummaryTableRowProps) => { ); - const withdrawnRelatedCSS = css({ - textDecoration: 'line-through', - }); + const withdrawnRelatedCSS = css` + text-decoration: line-through; + `; return props.asTD ? ( @@ -111,7 +116,9 @@ const SummaryTableRow = (props: SummaryTableRowProps) => { ) : (
    @@ -119,10 +126,10 @@ const SummaryTableRow = (props: SummaryTableRowProps) => { css={[ cellCss, props.withdrawnDate && withdrawnRelatedCSS, - { - backgroundColor: palette.neutral[97], - borderBottom: 0, - }, + css` + background-color: ${palette.neutral[97]}; + border-bottom: 0; + `, ]} > {dateRangeStr} @@ -130,7 +137,14 @@ const SummaryTableRow = (props: SummaryTableRowProps) => {
    {detailPart}
    -
    +
    {props.isOperatingOnNewHolidayStop ? ( <> Expected Credits @@ -166,42 +180,57 @@ export const SummaryTable = (props: SummaryTableProps) => { return (
    - - + {isOperatingOnNewHolidayStop ? ( ) : ( - + )} {holidayStopRequestsList.map( @@ -221,11 +250,11 @@ export const SummaryTable = (props: SummaryTableProps) => {
    Duration + + Duration + {props.alternateSuspendedColumnHeading || 'Suspended'} Expected CreditsActions + Actions +
    {holidayStopRequestsList.map((holidayStopRequest, index) => ( = (props) => { const { children, color, title } = props; @@ -60,7 +57,7 @@ export const DropMenu: FC = (props) => { aria-expanded={open} aria-controls={dropDownId} className={open ? 'open' : undefined} - css={[headerStyles, { color }]} + css={[headerStyles, css({ color })]} onKeyDown={(e) => { // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role // Space and Enter should toggle the dropdown. Enter is already handled implicitly by anchors. diff --git a/client/components/mma/identity/MarketingToggle.tsx b/client/components/mma/identity/MarketingToggle.tsx index 6c3c2974d..9901c2903 100644 --- a/client/components/mma/identity/MarketingToggle.tsx +++ b/client/components/mma/identity/MarketingToggle.tsx @@ -35,7 +35,6 @@ export const MarketingToggle: FC = (props) => {
    {}; } -const standardText = { - fontSize: '14px', - fontFamily: sans, -}; - const clockSVG = ( (

    {title}

    @@ -115,13 +109,11 @@ export const NewsletterPreference: FC = (props) => { return (
    (

    {title}

    @@ -24,11 +24,10 @@ const getTitle = (title: PageSectionProps['title']) => ( const getDescription = (description: PageSectionProps['description']) => (
    {description}
    @@ -36,14 +35,13 @@ const getDescription = (description: PageSectionProps['description']) => ( const getSubtext = (subtext: PageSectionProps['subtext']) => (

    {subtext}

    @@ -53,33 +51,33 @@ export const PageSection: FC = (props) => { const { children, description, title, subtext } = props; return (
    {title && getTitle(title)} {description && getDescription(description)} {subtext && getSubtext(subtext)}
    {children}
    diff --git a/client/components/mma/identity/emailAndMarketing/EmailSettingsSection.tsx b/client/components/mma/identity/emailAndMarketing/EmailSettingsSection.tsx index a456fc30a..99e41f359 100644 --- a/client/components/mma/identity/emailAndMarketing/EmailSettingsSection.tsx +++ b/client/components/mma/identity/emailAndMarketing/EmailSettingsSection.tsx @@ -1,6 +1,6 @@ -import { palette } from '@guardian/source/foundations'; +import { css } from '@emotion/react'; +import { palette, space, textSans14 } from '@guardian/source/foundations'; import type { FC } from 'react'; -import { sans } from '@/client/styles/fonts'; import { Button } from '../../shared/Buttons'; import { IdentityLocations } from '../IdentityLocations'; import { PageSection } from '../PageSection'; @@ -11,31 +11,30 @@ interface EmailSettingsSectionProps { email: string; } -const text = { - fontSize: '14px', - lineHeight: '18px', - fontFamily: sans, -}; -const linkCss = { - ...text, - color: palette.sport[300], - borderBottom: `1px solid ${palette.neutral[86]}`, - transition: 'border-color .15s ease-out', - '&:hover': { - borderBottom: `1px solid ${palette.sport[300]}`, +const text = css` + ${textSans14}; + lineheight: 18px; +`; +const linkCss = css` + ${text} + color: ${palette.sport[300]}; + border-bottom: 1px solid ${palette.neutral[86]}; + transition: border-color .15s ease-out; + :hover: { + border-bottom: 1px solid ${palette.sport[300]}; }, -}; +`; const successMessage = (
    You've been unsubscribed from all Guardian marketing newsletters and emails. @@ -48,16 +47,28 @@ export const EmailSettingsSection: FC = (props) => { const { actionHandler, email, removed } = props; return ( -

    +

    You are receiving newsletters, notifications and all other emails to {email}

    -

    +

    Change your email address

    -

    +

    Manage your Jobs alerts diff --git a/client/components/mma/identity/publicProfile/AvatarSection.tsx b/client/components/mma/identity/publicProfile/AvatarSection.tsx index dd78930b4..c9da0db31 100644 --- a/client/components/mma/identity/publicProfile/AvatarSection.tsx +++ b/client/components/mma/identity/publicProfile/AvatarSection.tsx @@ -1,10 +1,9 @@ import { css } from '@emotion/react'; -import { palette } from '@guardian/source/foundations'; +import { palette, textSans14 } from '@guardian/source/foundations'; import * as Sentry from '@sentry/browser'; import { Form, Formik } from 'formik'; import { useEffect } from 'react'; import type { ChangeEvent, FC } from 'react'; -import { sans } from '../../../../styles/fonts'; import { trackEvent } from '../../../../utilities/analytics'; import { Spinner } from '../../../shared/Spinner'; import { Button } from '../../shared/Buttons'; @@ -12,7 +11,7 @@ import * as AvatarAPI from '../idapi/avatar'; import { IdentityLocations } from '../IdentityLocations'; import { ErrorTypes } from '../models'; import { PageSection } from '../PageSection'; -import { errorMessageCss, labelCss, textSmall } from '../sharedStyles'; +import { errorMessageCss, labelCss } from '../sharedStyles'; import { getData, isErrored, @@ -25,12 +24,12 @@ interface AvatarSectionProps { userId: string; } -const imgCss = css({ - border: '0', - borderRadius: '50%', - height: '60px', - width: '60px', -}); +const imgCss = css` + border: 0; + borderradius: 50%; + height: 60px; + width: 60px; +`; // eslint-disable-next-line @typescript-eslint/no-explicit-any -- we're only assuming the argument object is an error object? const isEmptyAvatarError = (e: any): boolean => { @@ -120,18 +119,15 @@ export const AvatarSection: FC = (props) => { const avatarUploadSuccessNotice = () => (

    Thank you for uploading your avatar. It will be checked by Guardian moderators shortly. diff --git a/client/components/mma/identity/sharedStyles.ts b/client/components/mma/identity/sharedStyles.ts index 9ba9c87bb..9a2942c83 100644 --- a/client/components/mma/identity/sharedStyles.ts +++ b/client/components/mma/identity/sharedStyles.ts @@ -1,95 +1,100 @@ import { css } from '@emotion/react'; -import { palette } from '@guardian/source/foundations'; -import { sans } from '../../../styles/fonts'; +import { + palette, + space, + textSans14, + textSans15, +} from '@guardian/source/foundations'; -export const textSmall = css({ - fontSize: '14px', -}); +export const textSmall = css` + font-size: 14px; +`; -export const standardSansText = css({ - fontFamily: sans, - fontSize: '14px', - lineHeight: '1.333', -}); +export const standardSansText = css` + ${textSans15}; + line-height: 1.333; +`; -export const toggleDescriptionPadding = css({ - margin: '0', - padding: '2.88px 90px 0 0', -}); +export const toggleDescriptionPadding = css` + margin: 0; + padding: 2.88px 90px 0 0; +`; -const lightBorder = css({ - border: `1px solid ${palette.neutral[86]}`, -}); +const lightBorder = css` + border: 1px solid ${palette.neutral[86]}; +`; -const errorBorder = css({ - border: `1px solid ${palette.error[400]}`, -}); +const errorBorder = css` + border: 1px solid ${palette.error[400]}; +`; -export const aCss = css({ - color: palette.sport[300], - borderBottom: `1px solid ${palette.neutral[86]}`, - transition: 'border-color .15s ease-out', - '&:hover': { - borderBottom: `1px solid ${palette.sport[300]}`, - }, -}); +export const aCss = css` + color: ${palette.sport[300]}; + border-bottom: 1px solid ${palette.neutral[86]}; + transition: border-color 0.15s ease-out; + :hover { + border-bottom: 1px solid ${palette.sport[300]}; + } +`; -const inputCss = css({ - boxShadow: 'none', - boxSizing: 'border-box', - color: palette.neutral[7], - display: 'inline-block', - padding: '8px 8px 7px', - fontSize: '14px', - lineHeight: '1.4', - outline: 'none', - borderRadius: '0', - width: '100%', - marginTop: '4px', -}); +const inputCss = css` + ${textSans14}; + box-shadow: none; + box-sizing: border-box; + color: ${palette.neutral[7]}; + display: inline-block; + padding: ${space[2]}px ${space[2]}px 7px; + lineheight: 1.4; + outline: none; + border-radius: 0; + width: 100%; + margin-top: ${space[1]}px; +`; -const textareaCss = css({ - verticalAlign: 'top', - minHeight: '108px', - overflow: 'auto', - resize: 'vertical', - marginTop: '4px', -}); +const textareaCss = css` + vertical-align: top; + min-height: 108px; + overflow: auto; + resize: vertical; + margin-top: ${space[1]}px; +`; -const selectCss = css({ - font: 'inherit', - display: 'block', - marginTop: '4px', -}); +const selectCss = css` + font: inherit; + display: block; + margin-top: 4px; +`; -export const labelCss = css({ - margin: '5px 0 24px 0', - display: 'block', - width: '100%', - "& input:not([type='file']), & textarea": [inputCss, lightBorder], - "& input[type='file']": inputCss, - '& textarea': textareaCss, - '& select': selectCss, -}); +export const labelCss = css` + margin: 5px 0 24px 0; + display: block; + width: 100%; + & input:not([type='file']), & textarea: ${[inputCss, lightBorder]}; + & input[type='file']: ${inputCss}; + & textarea: ${textareaCss}; + & select: ${selectCss}; +`; -export const errorMessageCss = css({ - fontSize: '13px', - lineHeight: '18px', - backgroundColor: '#ffe1e1', - borderBottom: `1px solid ${palette.error[400]}`, - borderTop: `1px solid ${palette.error[400]}`, - color: palette.error[400], - marginTop: '6px', - padding: '7px 8px', -}); +export const errorMessageCss = css` + font-size: 14px; + line-height: 18px; + background-color: #ffe1e1; + border-bottom: 1px solid ${palette.error[400]}; + border-top: 1px solid ${palette.error[400]}; + color: ${palette.error[400]}; + margin-top: 6px; + padding: 7px 8px; +`; -export const formFieldErrorCss = css({ - "& input:not([type='file']), & textarea, & input": errorBorder, - '& p': [ - textSmall, - { - color: palette.error[400], - marginTop: '6px', - }, - ], -}); +export const formFieldErrorCss = css` + input:not([type='file']), + textarea, + input { + ${errorBorder} + } + p { + ${textSmall}; + color: ${palette.error[400]}; + margin-top: 6px; + } +`; diff --git a/client/components/mma/paymentUpdate/card/FlexCardElement.tsx b/client/components/mma/paymentUpdate/card/FlexCardElement.tsx index 0e26fae6a..3ebcf0126 100644 --- a/client/components/mma/paymentUpdate/card/FlexCardElement.tsx +++ b/client/components/mma/paymentUpdate/card/FlexCardElement.tsx @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import { from, space } from '@guardian/source/foundations'; +import { from, space, textSans17Object } from '@guardian/source/foundations'; import { CardCvcElement, CardExpiryElement, @@ -7,7 +7,6 @@ import { } from '@stripe/react-stripe-js'; import type { StripeElementBase } from '@stripe/stripe-js'; import type { Dispatch, SetStateAction } from 'react'; -import { sans } from '../../../../styles/fonts'; import { FieldWrapper } from '../FieldWrapper'; import { getLogos, PaymentMethod } from '../PaymentDetailUpdate'; @@ -24,8 +23,7 @@ interface FlexCardElementProps { const baseStyle = { base: { - fontSize: '17px', - fontFamily: sans, + ...{ textSans17Object }, '::placeholder': { color: '#c4c4c4', }, @@ -48,11 +46,11 @@ const numberCornerHint = () => ( export const FlexCardElement = (props: FlexCardElementProps) => ( <>
    { type="text" pattern="[0-9]{2}[\-\s]?[0-9]{2}[\-\s]?[0-9]{2}" title="Sort Code must contain 6 numbers (optionally separated by a - or space)" - css={{ ...bulletsStyling, ...inputBoxBaseStyle }} + css={css` + ${bulletsStyling}; + ${inputBoxBaseStyle} + `} placeholder="•• •• ••" name="Sort Code" required @@ -196,7 +197,10 @@ export const DirectDebitInputForm = (props: DirectDebitUpdateFormProps) => { data-qm-masking="blocklist" type="text" pattern="[0-9]{7,}" - css={{ ...bulletsStyling, ...inputBoxBaseStyle }} + css={css` + ${bulletsStyling}; + ${inputBoxBaseStyle} + `} placeholder="•••• ••••" name="Account Number" title="Account Number should typically be 8 digits" @@ -255,10 +259,10 @@ export const DirectDebitInputForm = (props: DirectDebitUpdateFormProps) => { {error ? (
    diff --git a/client/components/mma/paymentUpdate/dd/DirectDebitLegal.tsx b/client/components/mma/paymentUpdate/dd/DirectDebitLegal.tsx index e7f3a0562..65b0bf4bd 100644 --- a/client/components/mma/paymentUpdate/dd/DirectDebitLegal.tsx +++ b/client/components/mma/paymentUpdate/dd/DirectDebitLegal.tsx @@ -1,20 +1,19 @@ -import { palette } from '@guardian/source/foundations'; +import { css } from '@emotion/react'; +import { palette, textSans12 } from '@guardian/source/foundations'; import * as React from 'react'; -import { sans } from '../../../../styles/fonts'; -const hrefStyle = { - color: palette.neutral[46], - textDecoration: 'underline', - cursor: 'pointer', -}; +const hrefStyle = css` + color: ${palette.neutral[46]}; + text-decoration: underline; + cursor: pointer; +`; -const baseStyle = { - color: palette.neutral[46], - fontSize: '12px', - fontFamily: sans, - flexGrow: 1, - marginTop: '10px', -}; +const baseStyle = css` + color: ${palette.neutral[46]}; + ${textSans12}; + flex-grow: 1; + margin-top: 10px; +`; export class GoCardlessGuarantee extends React.Component< { inner?: true }, @@ -26,7 +25,11 @@ export class GoCardlessGuarantee extends React.Component< public render(): React.ReactNode { return ( -
    +
    Your payments are protected by the{' '}