Heading update (new default level and updated docs)

[taylorcjohnson]

This draft pull request attempts to address the comments mentioned in issue #694:

1. Change Heading to default to h2 so users don't accidentally use multiple h1s
2. Update the docs to be clear on how to choose a different heading level

The Heading component now defaults to using an h2 instead of h1. It also includes prop type validation for the as prop. This may not be necessary, but it attempts to restrict the html elements to only h1-h6 (please let me know if this is inappropriate). The docs page was also updated to make sure the user is aware that the default heading value is h2. It also updates the component props to include the as prop (similar to the TabNav component).

Finally, I wanted to verify that this is a major version change and that package.json should be updated accordingly (version 17.0.0 as of this pull request).

Closes #694

Screenshots

Please provide before/after screenshots for any visual changes

Merge checklist

• Added or updated TypeScript definitions (index.d.ts) if necessary
• 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 contibuting guidelines for more infomation on how we review PRs.

[vercel]

This pull request is being automatically deployed with ZEIT Now (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/primer/primer-components/78y77mxo0
✅ Preview: https://primer-compone-git-fork-taylorcjohnson-taylorcjohnson-he-e9b24e.primer.now.sh

[emplums]

This is great @taylorcjohnson thanks for picking this one up! Would you mind updating the TypeScript type definitions to only allow h1-h6 as valid as values? Other than that this is ready to go! 🙌

[taylorcjohnson]

Thank you for taking a look @emplums! Apologies for missing the type definition 🤦‍♂️! I pushed an update, but would welcome extra review since I'm still new to TypeScript.

Additionally, it seems like I should update src/__tests__/Heading.js as well. The first test renders <h1> by default would now fail (Line 35).

There is also an invalid prop of i being used on line 97 to test the fontStyle prop - I could simply remove that expect block if i is definitely no longer a valid html element.

Update (4/1/2020): I updated the tests for this component. It checks to see if an <h2> is rendered by default and I removed the test that attempts to render a Heading as <i>.

[BinaryMuse]

Tested manually and merged into release branch. Thanks again!

[taylorcjohnson]

Thank you! Happy to help!