Support link underline preference

[mperrotti]

This was initiated by our need for underlined links in blocks of text, and supports dotcom's new user setting to render links with underlines. The link underline setting is currently being tested on dotcom behind a feature flag.

A new setting has been added to the Storybook toolbar that allows us to preview what a component would look like when the user has specified that they prefer link underlines.

Closes https://github.com/github/primer/issues/2536

Screenshots

User who turned link underlines on in their GitHub settings

Additional context about link underline settings

Issue: https://github.com/github/releases/issues/3340
Dotcom PR: https://github.com/github/github/pull/278701

Merge checklist

• Added/updated tests
• Added/updated documentation
• Changes are SSR compatible
• 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 contributing guidelines for more information on how we review PRs.

[changeset-bot]

🦋 Changeset detected

Latest commit: 90d5f19

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Minor

Not sure what this means? Click here to learn what changesets are.

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

[github-actions]

Uh oh! @mperrotti, the image you shared is missing helpful alt text. Check your pull request body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

[mperrotti]

There are cases where we want links in a single like of text to be underlined. Converting this to a draft until I update this PR to address those cases.

Examples:

[github-actions]

Uh oh! @mperrotti, the image you shared is missing helpful alt text. Check #3720 (comment).

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

[mperrotti]

Just ignore this PR until I mark it as "Ready for review".

We have more changes to make after talking with @ericwbailey about the feature-flagged user preferences for link underlines.

[github-actions]

Uh oh! @mperrotti, the image you shared is missing helpful alt text. Check your pull request body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

[github-actions]

Uh oh! @mperrotti, the image you shared is missing helpful alt text. Check your pull request body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

[mperrotti]

I'm questioning whether PRC even needs this component. It's very rare that we need to render a large block of prose in the apps that use Primer.

Reviewers - do you think we should add a Prose component?

[joshblack]

@mperrotti I'd be down to ship with the underline changes that you have with the custom property stuff and then see if we still need something like this in the future 👀 Like you said, it seems like underline behavior is more of a one-off thing.

[mperrotti]

Thanks @joshblack - I totally missed your comment last week. I'll take out the Prose stuff.