Hidden: Refactor the component to use the new getBreakpointsDeclarations util function and add missing stories and tests

[broccolinisoup]

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

Hidden component is being used in PageHeader and working as expected. After improving the way we manage the responsive visibility on PageHeader via getBreakpointDeclarations utility function to reduce the layout shift in SSR - I applied the same strategy to Hidden component. I refactored it to use the getBreakpointDeclarations function rather than useResponsiveHook as this is something can be achieved with CSS as well.

I also wrote unit tests, added docs and stories.

Screenshots

No visual changes. All examples are available on storybook and docs.

Merge checklist

• Added/updated tests
• Added/updated documentation
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

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: 1f9bae0

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	88.93 KB (0%)
dist/browser.umd.js	89.54 KB (0%)

[broccolinisoup]

Here you go @broccolinisoup. This is from the preview deployment.

@mperrotti Oh right!! This is on the new canvas! Sorry I missed that. Actually, this is a bug (more like an uncovered case) in UnderlineNav! (In that example, I used UnderlineNav for the navigation). It is a coincidence that I am synchronously working on it.

[broccolinisoup]

@joshblack just renamed a few things to reduce confusion around breakpoints/ranges and refactored PageHeader and getBreakpointsDeclarations function to use the media queries from a shared place (src/utils/layout.ts). (commit)

I'd like to merge this to move forward with the accessibility eng review for PageHeader - but please let me know if you have any concern - happy to address them in a following PR if they are not blocking here - thanks so much again for your suggestions 🙏🏻 PR still shows the feedback you left (requested changes) as blocking for merge. If all look good to you, could I please get ✅ as well? 🙌🏻 Thanks!!

[joshblack]

🎉