[Hero] Allow hero headings to be <h1>, <h2>, etc. instead of unstyled headings wrapped in <p> tags

[billhimmelsbach]

A little bit of a nuanced issue here that affects accessibility. Right now, if I wanted the heading of a hero to be a <h1> instead of a <p> tag, I could pass in the full node instead of the text:

Instead of this: heading={My super cool heading!} Do this: heading={<h1>My super cool heading!</h1>}

The problem with that is that then the heading still renders inside of a <p> tag, which isn't great, but also the stylings of the heading wouldn't get applied to the heading but instead get applied to the enclosing <p> tag.

So this PR instead allows the headingLevel to create a heading with the heading content directly, instead of being wrapped in a <p> tag. This lets you set the heading to be an <h1> or other heading level a little easier, which we'll want for accessibility and also matches the markdown of the DS a little better by removing the enclosing <p> tag. I've also done something similar for the subheading but also it defaults to being a <p> tag.

I used createElement to do this because it's the easiest to implement with Typescript.

Current behavior

• hard to make accessible heroes with the correct styling and markup

Expected behavior

• easy to make accessible heroes