More storybook example/docs for dynamic/multi-state buttons

[khiga8]

Fixes: https://github.com/github/accessibility/issues/6266

Changelog

New

1. This PR newly adds the storybook/addon-blocks package. This allows me to provide more comprehensive documentation for a storybook example the storybook way ✨ .
2. I added a dedicated documentation page for multi-state buttons as a follow-up to an audit issue which revealed the need for accessibility guidance for multistate button patterns.

I've already proposed doc updates to Primer's interface guidelines. I don't think this is enough. I find additional value in having code examples with explanatory text, since the interface guidelines is more framework agnostic.

There is a need to provide additional documentation for nuanced examples alongside the code (Slack), but there isn't a standardized practice for doing that right now in storybook.

Initially I went down the route of directly adding text explanations to the storybook story, but utilizing storybook blocks and MDX feels a lot cleaner, and feels like the "storybook way". So, I am trying this storybook markdown out!

Check it out 🔍 :

• Before: Adding descriptions to the story
• After: Creating a dedicated mdx page inside storybook

📢 REVIEWERS: let me know if this approach doesn't make sense to you or if you have a different suggestion! Are there are any concerns with adding this package? :eyes:

Rollout strategy

• [ ] Patch release
• [ ] Minor release
• [ ] Major release; if selected, include a written rollout or migration plan
• [ ] None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

• [ ] Added/updated tests
• [x] Added/updated documentation
• [x] Added/updated previews (Storybook)
• [ ] Changes are SSR compatible
• [ ] Tested in Chrome
• [ ] Tested in Firefox
• [ ] Tested in Safari
• [ ] Tested in Edge
• [ ] (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 07badb2cd2eb562cfd65e384c70abadc3d6640a8

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[github-actions[bot]]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	87.98 KB (0%)
packages/react/dist/browser.umd.js	88.28 KB (0%)

[github-actions[bot]]

Hi! This pull request has been marked as stale because it has been open with no activity for 60 days. You can comment on the pull request or remove the stale label to keep it open. If you do nothing, this pull request will be closed in 7 days.

[khiga8]

Closing for now given Slack convo concerns on introducing blocks!