Thanks for setting this up, @mahoneycm. It's looking good. I had just a couple thoughts:

• It would be helpful to also have dropdown control that lets us include a button variant (like usa-button--accent-cool) in the modifiers.
• I think we should clearly label this as a test pattern (unless we decide to consider it differently). I added a few notes below.

@mahoneycm That’s a good point about the modifier control. I think the text box control type works well given the circumstances.

Everything is looking good in Storybook here. However, I noticed that after moving the JSON to the test-patterns directory I now get an error when I run the build:html command. I recently encountered this issue on another PR as well. Here is the error:

[webpack-cli] Failed to load '/Users/aleadem/Dev/github/uswds-workspace/uswds/webpack.twig.config.js' config
[webpack-cli] Error: ENOENT: no such file or directory, open './packages/usa-button/src/test/test-patterns/usa-button.json'

From what I've seen, it appears to happen when the test-patterns directory contains both a twig and a JSON file. Since the JSON is so simple here, I am wondering if it makes sense to just pass the data as args in stories.js or if we want to dive deeper into what is happening in the webpack config.

Looking good! Just a couple of small notes:

Looks good to me!

Thanks for addressing this issue.

Notes

Typically we use test stories to see a component within another context (like its behavior with other components or alongside other variants).

This is simply the same component, but in link form. It might make more sense to either:

1. Make it a regular story variant.
2. Make it a true test and add real buttons alongside.

Either could include a disclaimer that this is experimental or for prototyping.

Looks better as a story, thank you. Can you look into the build errors before approving?

ERROR in Conflict: Multiple assets emit different content to the same filename usa-button.html

ERROR in Conflict: Multiple assets emit different content to the same filename usa-button~accent-cool.html

ERROR in Conflict: Multiple assets emit different content to the same filename usa-button~accent-warm.html

ERROR in Conflict: Multiple assets emit different content to the same filename usa-button~base.html

ERROR in Conflict: Multiple assets emit different content to the same filename usa-button~big.html

ERROR in Conflict: Multiple assets emit different content to the same filename usa-button~outline-inverse.html

ERROR in Conflict: Multiple assets emit different content to the same filename usa-button~outline.html

ERROR in Conflict: Multiple assets emit different content to the same filename usa-button~secondary.html

ERROR in Conflict: Multiple assets emit different content to the same filename usa-button~unstyled.html

webpack 5.76.0 compiled with 9 errors in 4524 ms

https://app.circleci.com/pipelines/github/uswds/uswds/5592/workflows/24c8302a-f207-4ec9-b0dd-f9d05ce20126/jobs/10050

LGTM, thanks for the adjustments

Good conversation, good outcome