Merge pull request #1039 from Financial-Times/o-header-updates

Update My Account header styles to latest o-header
Financial-Times · May 22, 2024 · 1c6c370 · 1c6c370
2 parents e1dc6cc + 83de1bd
commit 1c6c370
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 46 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -101,7 +101,7 @@ exports[`dotcom-ui-header/src/components/MainHeader renders ASK FT button 1`] =
             Subscribe
           </a>
           <a
-            className="o-header__top-link ft-header__top-link--myaccount"
+            className="o-header__top-myaccount"
             data-trackable="My Account"
             href="/myaccount"
             id="o-header-top-link-myaccount"
@@ -1945,7 +1945,7 @@ exports[`dotcom-ui-header/src/components/MainHeader renders a right aligned subn
             Subscribe
           </a>
           <a
-            className="o-header__top-link ft-header__top-link--myaccount"
+            className="o-header__top-myaccount"
             data-trackable="My Account"
             href="/myaccount"
             id="o-header-top-link-myaccount"
@@ -3784,7 +3784,7 @@ exports[`dotcom-ui-header/src/components/MainHeader renders as a logged in user
             Subscribe
           </a>
           <a
-            className="o-header__top-link ft-header__top-link--myaccount"
+            className="o-header__top-myaccount"
             data-trackable="My Account"
             href="/myaccount"
             id="o-header-top-link-myaccount"
@@ -5628,7 +5628,7 @@ exports[`dotcom-ui-header/src/components/MainHeader renders as an anonymous user
             Subscribe
           </a>
           <a
-            className="o-header__top-link ft-header__top-link--myaccount"
+            className="o-header__top-myaccount"
             data-trackable="Sign In"
             href="/login?location=#"
             id="o-header-top-link-signin"

diff --git a/packages/dotcom-ui-header/src/components/top/partials.tsx b/packages/dotcom-ui-header/src/components/top/partials.tsx
@@ -41,7 +41,7 @@ const SearchIcon = () => (
 )
 
 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
@@ -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%;
 }