PageHeader: Make default heading level h2

[broccolinisoup]

This PR changes the PageHeder.Title's default heading level to h2 as discussed here

Also added a feature story and docs to demonstrate the cases where components are used as a title instead of a typical text title and included a visually hidden title to set an example.

Closes https://github.com/github/primer/issues/1571

Screenshots

No visual changes.

Merge checklist

• Added/updated documentation
• Tested in Chrome

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

[changeset-bot]

🦋 Changeset detected

Latest commit: 6ab9078

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

size-limit report 📦

Path	Size
dist/browser.esm.js	94.58 KB (0%)
dist/browser.umd.js	95.15 KB (0%)

[TylerJDev]

Slightly off-topic, but within the docs under the as prop, we state "header" as the default value. I wonder if we'd want
"div" here?

[TylerJDev]

Overall looks good! I left some comments that might require some discussion, but other than that I think it looks good. Thanks for this too! 😁

[TylerJDev]

I noticed that in the preview for this example, the heading isn't actually hidden. Is this expected?

[broccolinisoup]

😬 No it is NOT EXPECTED 😅 I'll fix it

[broccolinisoup]

Slightly off-topic, but within the docs under the as prop, we state "header" as the default value. I wonder if we'd want
"div" here?

Oh good catch! On the code it is div but apparently I got it wrong on the docs. I'll update it.

[broccolinisoup]

@TylerJDev I pushed a commit to make the visually hidden titles visually hidden for real 😅 and fix the docs about the default as.

You can see in the storybook I used VisuallyHidden component whereas I added styles via sx prop on the primer.style docs. My motivation behind this was about the docs practicality. Primer.style docs examples should just work when people copy and paste the code snippets provided and given the fact that the VisuallyHidden component is an internal util component, I manually added its styles via sx prop. Let me know if you have any concern 🙌🏻

[TylerJDev]

@broccolinisoup - Looks great 🤩. Thank you again!