USWDS - Button: define default type in JSON

[mahoneycm]

Summary

Specifies type in usa-button.json to fix html component code

Breaking change

This is not a breaking change.

Change log PR

uswds/uswds-site#2093

Related issue

Closes #5246

Preview link

Button: storybook →
Demo USWDS site with correct button type showing →

Problem statement

Our html component code for usa-button would display an empty type attribute for usa-button

<button type="" class="usa-button usa-button--base">Default</button>

Expected:

<button type="button" class="usa-button usa-button--base">Default</button>

Solution

Add the default type attribute to the usa-button json file so that webpack correctly fills the variable in the twig file.

Before, this value was being set by storybook controls, which do not seem to make their way to the html templates once they're built.

Testing and review

1. Visit the button preview and make sure storybook type controls are working as expected
2. Visit html-templates/usa-button.html and check for correct type attribute
3. Check other button variants for the same

View change on site

1. Visit test site repo button component page
2. Check component code and make sure the correct button type is showing

Note

This seems to be the most direct way to populate this field, but it does override the defaultValue field within the storybook controls.

If you change defaultValue within usa-button.stories.js, the default button story will always default to type="button" while the other variants will change to the set value. This can still be changed using the radio buttons though!

Currently, the defaultValue is button so the desired preview is still maintained. I just wanted to flag it in case!

Before opening this PR, make sure you’ve done whichever of these applies to you:

• Confirm that this code follows the 18F Front End Coding Style Guide and Accessibility Guide.
• Run git pull origin [base branch] to pull in the most recent updates from your base and check for merge conflicts. (Often, the base branch is develop).
• Run npm test and confirm that all tests pass.

[mejiaj]

Thanks for fixing this! Alternatively we can use the | default() filter in twig.

[amyleadem]

This looks good! Confirmed that type now appears in usa-button.html and that there are no empty button types in html-templates.