From 83de1bd1e706cd999c3c68694bdc994f74124613 Mon Sep 17 00:00:00 2001 From: Glynn Phillips Date: Wed, 22 May 2024 11:39:52 +0100 Subject: [PATCH] Update My Account header styles to latest o-header The styles needed for the new My Account / Sign in links are now in o-header so this change takes advantange of using those. --- package-lock.json | 8 ++--- packages/dotcom-ui-header/package.json | 2 +- .../__snapshots__/MainHeader.spec.tsx.snap | 8 ++--- .../src/components/top/partials.tsx | 2 +- packages/dotcom-ui-header/src/header.scss | 36 ------------------- 5 files changed, 10 insertions(+), 46 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6bebd5e64..bdac631f6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2675,9 +2675,9 @@ } }, "node_modules/@financial-times/o-header": { - "version": "11.1.1", - "resolved": "https://registry.npmjs.org/@financial-times/o-header/-/o-header-11.1.1.tgz", - "integrity": "sha512-5qjwoywMjLrKE7RqaCqPduAF4TcnMT7Uz+Cm72nFBsdkuHWC0d1pWvYCAPSdRupnqutzxzXFb4mu5SP0LRK/7Q==", + "version": "12.0.0", + "resolved": "https://registry.npmjs.org/@financial-times/o-header/-/o-header-12.0.0.tgz", + "integrity": "sha512-FRYJlaJvmJukO1yH1KnNETxT3RK5l+4lKUXtzvwT2N5Qr7PfqvtFKbALjlFZb35EfaA45bSVE9BOZF3DwazO3Q==", "dev": true, "engines": { "npm": ">7" @@ -34312,7 +34312,7 @@ }, "devDependencies": { "@financial-times/logo-images": "^1.10.1", - "@financial-times/o-header": "^11.0.4", + "@financial-times/o-header": "^12.0.0", "@svgr/core": "^5.0.0", "camelcase": "^6.0.0", "check-engine": "^1.10.1" diff --git a/packages/dotcom-ui-header/package.json b/packages/dotcom-ui-header/package.json index d0e8154b5..a9356eaa9 100644 --- a/packages/dotcom-ui-header/package.json +++ b/packages/dotcom-ui-header/package.json @@ -30,7 +30,7 @@ "@svgr/core": "^5.0.0", "camelcase": "^6.0.0", "check-engine": "^1.10.1", - "@financial-times/o-header": "^11.0.4" + "@financial-times/o-header": "^12.0.0" }, "peerDependencies": { "@financial-times/o-header": "^11.0.4", diff --git a/packages/dotcom-ui-header/src/__test__/components/__snapshots__/MainHeader.spec.tsx.snap b/packages/dotcom-ui-header/src/__test__/components/__snapshots__/MainHeader.spec.tsx.snap index 5e0a8f845..4351f2738 100644 --- a/packages/dotcom-ui-header/src/__test__/components/__snapshots__/MainHeader.spec.tsx.snap +++ b/packages/dotcom-ui-header/src/__test__/components/__snapshots__/MainHeader.spec.tsx.snap @@ -101,7 +101,7 @@ exports[`dotcom-ui-header/src/components/MainHeader renders ASK FT button 1`] = Subscribe ( ) const MyAccountLink = ({ item, signedIn }: { item: TNavMenuItem; signedIn: boolean }) => { - const classNames = 'o-header__top-link ft-header__top-link--myaccount' + const classNames = 'o-header__top-myaccount' const id = signedIn ? 'o-header-top-link-myaccount' : 'o-header-top-link-signin' return ( diff --git a/packages/dotcom-ui-header/src/header.scss b/packages/dotcom-ui-header/src/header.scss index 21a278c2f..212461c0a 100644 --- a/packages/dotcom-ui-header/src/header.scss +++ b/packages/dotcom-ui-header/src/header.scss @@ -28,42 +28,6 @@ display: none; } -// The styles below are part of an AB test -// If the test is successful these should be incorporated into o-header -.ft-header__top-link--myaccount { - @include oTypographySans(0); -} - - -.ft-header__top-link--myaccount span { - vertical-align: middle; - // Hide the myaccount/sign in text on smaller screens leaving the icon only - @include oGridRespondTo($until: 'M') { - @include oNormaliseVisuallyHidden; - } -} - -// Override the hover styles so the underline -// Is only under the text and not the icon -// And is closer to the text -.ft-header__top-link--myaccount::after { - width: calc(100% - 32px); - left: unset; - right: 0; - bottom: 8px; -} - -.ft-header__top-link--myaccount::before { - content: ''; - display: block; - @include oIconsContent( - $icon-name: 'user', - $color: oColorsByName('black'), - $size: 32 - ); - vertical-align: middle; -} - .o-header__drawer-search-term { width: 100%; }