[WEB-3869] Remove the Meganav Account Panel dropdown

[aralovelace]

Jira Ticket Link / Motivation

WEB-3869

Summary of changes

remove the content under the Account dropdown.
Created MeganavItemsSignedIn in the storybook for testing preview for this component

How do you manually test this?

• Go to storybook page
• Go to Core -> `MeganavItemsSignedIn
• the preview of this component should be displayed

Screenshot:

Screenshot in the Voltaire local

Reviewer Tasks (optional)

Merge/Deploy Checklist

• Written automated tests for implemented features/fixed bugs
• Rebased and squashed commits
• Commits have clear descriptions of their changes
• Checked for any performance regressions

Frontend Checklist

• No frontend changes in this PR
• Added before/after screenshots for changes
• Tested on different platforms/browsers with Browserstack
• Compared with the initial design / our brand guidelines
• Checked the code for accessibility issues (VoiceOver User Guide)?

[aralovelace]

hi @jamiehenson this is now ready for review. its works in the local and screenshot added in the description

[kennethkalmer]

Looks good! One small request to make storybook experience a bit better

[kennethkalmer]

I would make absUrl an "identity" function, ie have it return whatever is provided as the argument, because it took me a while to figure out why the button in storybook goes to this URL and not the one in account.links.dashboard.href

[jamiehenson]

Thanks for providing a screenshot on how it looks in situ in Voltaire - I think with this in mind we should adjust the padding/margin between the account name (i.e. Free Account) and the search icon, so that it's the same size as the gap between the search icon and the Dashboard button

[jamiehenson]

We should relocate this story to be a story within the existing Meganav.stories.tsx file, I think - this sits better when considering Storybook as both a development and a documentation resource.

[jamiehenson]

Also, a wrapper around the component that imposes a maximum width would help to present this component in a way which is more visually recognisable to the actual Meganav (the flex behaviour means that the account name is way over on the left, when it should be next to it - a wrapper with a constrained width would help here).

Take a look at some of the other stories within this repo for examples of how render: () => <>code here<> works in stories, that allows you to render the component whilst also modifying how it's presented.

[aralovelace]

@jamiehenson I agree with your comment, I did some updates

• I removed the MeganavItemsSignedIn.stories
• updated Meganav.stories.tsx by adding MeganavSignedIn component so the Default component will always be not logged-in and the MeganavSignedIn will always be SignedIn version. I updated the HTTP request with some dummy default values since the API seems not working yet?

[aralovelace]

Thanks for providing a screenshot on how it looks in situ in Voltaire - I think with this in mind we should adjust the padding/margin between the account name (i.e. Free Account) and the search icon, so that it's the same size as the gap between the search icon and the Dashboard button

Thanks for noticing this bit @jamiehenson I removed the margin right and it looks the same gap now -

[jamiehenson]

Changes look great! 🙌 Only thing I would change is MeganavSignedin to SignedIn in the Meganav story so that it comes up as "Signed In" in the Storybook navigator - it's a bit cleaner.

already updated