Fix focus state on neutral header

[SriHV]

What is the context of this PR?

#3204...
Three issues are addressed in this PR:

• Text in focus state is black instead of white in header.
• Single line is displayed in focus state instead of a double line when navigating through menu items.
• ONS logo is now displayed in focus state

After conversations with Dina and Joe following things were changed:

• The background color of the neutral header is now white instead of black.
• The color of the logo links is now black.
• The focus state of the logo is consistent with the other header examples.
• The focus state of the links is now black.
• The area around the header title and navigation menu has a grey background (--ons-color-grey-75), and the text color is white.
• The focus state of the menu items is now white with an underline in black.Hover state underline is white.

How to review this PR

Go to 'components/header/example-header-neutral-for-multicoloured-logo' and focus each element to check the changes above mentioned and compare this with the original 'example-header-neutral-for-multicoloured-logo'

Checklist

This needs to be completed by the person raising the PR.

• I have selected the correct Assignee
• I have linked the correct Issue

[netlify]

✅ Deploy Preview for ons-design-system-preview ready!

Name	Link
🔨 Latest commit	de9bb00
🔍 Latest deploy log	https://app.netlify.com/sites/ons-design-system-preview/deploys/6694e2569856450008050b19
😎 Deploy Preview	https://deploy-preview-3220--ons-design-system-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[rmccar]

The logo looks good but I think we need a bit more information on the other things. I'm not sure the hover line in the header links should be white. Also the sub navigation now no longer shows if it is being hovered and there isn't much differentiation between one that is selected and hovered. Is this ok? Also to me I think the hover line should be closer to the text and not be shown if the item is selected but that doesn't solve the issue in the difference between just selected and hovered and selected. Think this needs some design discussion.

[alessioventuriniAND]

I am happy to approve based on the fact that you still need to get this reviewed by Design :)

[SriHV]

Had a chat with Joe, white line on the hover needs more investigation along with usage of neutral header. He said he will follow up with Dina on this and let me know again. He is fine with changes made in sub navigation menu items focus, hover and click.

[rmccar]

Are these dark blue links supposed to still be dark blue?

Sri's Comment:
I've checked the links in the original neutral header, there are dark blue links here too. Shall I discuss this with Dina?

[rmccar]

I don't think you have either your husky hooks set up and/or the EditorConfig plugin in your vscode because your css isn't formatted

Sri's comment:
This is done. Can you check it now

[alessioventuriniAND]

Is this the expected behaviour?

Can you also confirm if you had your latest work reviewed by Dina or Joe?

Screen.Recording.2024-06-14.at.11.28.28.mov

Sri's Comment:

Yes, Dina asked these changes.

• White underline for menu items has been made consistent with the design system's navigational items.
• There is a double underline when focused and hovered

[SriHV]

Is this account button meant to be black? shouldn't it be white?

I have used existing class .ghost-dark here. If we require background colour white when its active, I will have to add a new class for this. Shall I do that?

[rmccar]

Is this account button meant to be black? shouldn't it be white?

I have used existing class .ghost-dark here. If we require background colour white when its active, I will have to add a new class for this. Shall I do that?

Looking at the other versions of the menu button they don't have a change this big. The other ones seem to just have a small adjustment to the colour because its selected. I would check with Joe and Dina but I don't think this should be black. To match other menu buttons I think it should be a very light grey or maybe white

[SriHV]

Is this account button meant to be black? shouldn't it be white?

I have used existing class .ghost-dark here. If we require background colour white when its active, I will have to add a new class for this. Shall I do that?

Looking at the other versions of the menu button they don't have a change this big. The other ones seem to just have a small adjustment to the colour because its selected. I would check with Joe and Dina but I don't think this should be black. To match other menu buttons I think it should be a very light grey or maybe white

I checked with Dina. She told to make account button similar to the menu button here. I will create a new class for this

[rmccar]

When the new menu button is open the text changes to blue

[rmccar]

Just wanted to ask the question because the design has changed quite a bit since the ticket was written but do we still want the green in the logo? Because we usually use either an all black logo or a colour logo which is green and blue. Might need to check this with the designers

[rmccar]

I think we should rename the example from example-header-neutral-for-multicoloured-logo to example-header-neutral