@financial-times/o-header - npm Package Compare versions

Comparing version 11.2.0 to 12.0.0

CHANGELOG.md

 # Changelog
+## [12.0.0](https://github.com/Financial-Times/origami/compare/o-header-v11.2.0...o-header-v12.0.0) (2024-05-21)
+
+
+### ⚠ BREAKING CHANGES
+
+* Change the My Account & myFT header link locations
+
+### Features
+
+* Change the My Account & myFT header link locations ([7e9d2c8](https://github.com/Financial-Times/origami/commit/7e9d2c8a156b95270aeca49cae9c02df95a67350))
+
 ## [11.2.0](https://github.com/Financial-Times/origami/compare/o-header-v11.1.1...o-header-v11.2.0) (2024-03-18)
@@ -3,0 +14,0 @@

MIGRATION.md

 # Migration Guide
 
+## Migrating from v11 to v12
+
+o-header v12 includes markup changes in the top right menu, which are included in the top.tsx template within this component. Update your markup as described below or [use o-header's tsx template](https://github.com/Financial-Times/origami/tree/main/components/o-header/src/tsx).
+
+### Removal of the myFT link
+
+The myFT logo link is no longer required in the top right of the header as the myFT link is now part of the navigation in the row below.
+
+The following markup can be removed all together from all header types.
+
+```html
+<a
+	className="o-header__top-icon-link o-header__top-icon-link--myft"
+	id="o-header-top-link-myft"
+	href="/myft"
+	aria-label="My F T"
+>
+	<span className="o-header__visually-hidden">myFT</span>
+</a>
+```
+
+### Add the My Account & Sign in link
+
+In the same location of where the myFT logo link was removed we need to add a new link for accessing the users My Account or prompting them to Sign in.
+
+```html
+<a
+	className="o-header__top-myaccount"
+	href="/myaccount"
+>
+	<span>My Account</span>
+</a>
+```
+
+> [!NOTE]
+> This same markup is used for both the My Account and Sign in links. Your templates will need to be responsible for swapping the anchor text within the `<span>` and the `href` value
+
+
+When this is being used in the sticky header a `tabIndex` attribute should be added with a value of `-1`. This ensures that the link is not included in keyboard navigation.
+
+```html
+<a
+	className="o-header__top-myaccount"
+	href="/myaccount"
+	tabIndex="-1"
+>
+	<span>My Account</span>
+</a>
+```
+
+
 ## Migrating from v10 to v11
@@ -4,0 +55,0 @@

package.json

 {
   "name": "@financial-times/o-header",
-  "version": "11.2.0",
+  "version": "12.0.0",
   "description": "Responsive Financial Times page header with primary and secondary navigation, a drop down mega menu, and a collapsible drawer",
@@ -5,0 +5,0 @@ "keywords": [

src/tsx/Props.ts

@@ -11,2 +11,4 @@ export type TNavMenuKeys =
 	| 'navbar-right-anon'
+	| 'navbar-top-right'
+	| 'navbar-top-right-anon'
 	| 'navbar-simple'
@@ -23,2 +25,4 @@ | 'user';
 	| 'navbar-right-anon'
+	| 'navbar-top-right'
+	| 'navbar-top-right-anon'
 	| 'navbar-simple'
@@ -25,0 +29,0 @@ | 'user';

No alert changes

Improved metrics

Total package byte prevSize

253851

increased by0.36%

Worsened metrics

Lines of code

4802

decreased by-0.95%

No dependency changes