DS-590 page header + notifications design

[mikemai2awesome]

Jira

https://pegadigitalit.atlassian.net/browse/DS-590

Summary

Adds user notifications to Page Header component.

Details

1. Related-sites nav and user nav are breaking changes. New data needs to be passed to create the new design.
2. Page Header's nav-li template has new props: counter, signifier_only, signifier_before.
3. Minor letter spacing tweak to xsmall headlines.
4. Updated Page Header docs.

How to test

Run the branch locally and check all the demos under Page Header.

[danielamorse]

@mikemai2awesome in the logged-in demo the Notifications menu is inside a <div> directly inside a <ul>. We're missing the <li>.

When I add the missing wrapper template (@bolt-components-page-header/page-header-nav-li.twig), I see extra padding around the Notifications content that wasn't there before.

Can you take a look at this? Let me know if you want me to push my docs-site edits.

[mikemai2awesome]

@danielamorse I just fixed it.

[remydenton]

I don't quite understand how the old content maps to the new. Specifically, how does this

Become this?

[remydenton]

Approved! As discussed in standup, the answer to my previous question is that the content changes significantly. The plan is to hard-code those links so that they can be easily synchronized across sites.