feat: add underline prop to hyperlink

[zainab-amir]

Changes:

• Added a new prop to Hyperlink component that gives us an option to update the style of hyperlink.
  -- Some designs require no underline under hyperlink component.
• Added aria-label for spinner icon
  -- This is added to for accessibility because sometime stateful button has a pending state that doesn't have a text and only spinner is shown.

[coveralls]

Coverage decreased (-0.03%) to 90.281% when pulling 4a504ef on zamir/VAN-497/add_style_prop_for_hyperlink into 3ae0e3f on master.

[abutterworth]

These files are generated by code. If you want to specify a label on the loading icon you need to do it in your application. Paragon doesn't have localization built in yet.

[zainab-amir]

Currently if I don't provide any icon to Stateful button, it uses a default spinner. Is there a way to add aria-label to that?
Or will we need to explicitly add icon to stateful button and then add aria-label to it?

[abutterworth]

We could hardcode English in Paragon for now, but if you do add your label here please: https://github.com/edx/paragon/blob/master/src/StatefulButton/index.jsx#L51

[zainab-amir]

@abutterworth I made the changes you suggested ^ but this didn't fix the accessibility problem because the icon is not focusable for stateful buttons (running ARC toolkit gave error that I should not add aria-label to it). I have taken another route to achieving the same thing. Kindly see changes to StatefulButton component.

[abutterworth]

Here is the Design Documentation for links: https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=789%3A42

If you need the functionality you've added in this PR please take this path:

• Add a variant prop of values default, muted, or brand
• Add a boolean prop isInline (default: false or "standalone" in the design documentation) This default matches the way css handles links in Paragon today. a tags have no underline unless they exist as a direct descendent of a p tag (https://github.com/edx/paragon/blob/master/scss/core/_typography.scss#L38).

The props you add to hyperlink should add or remove css classes for styling links. Some of which we already have: https://github.com/edx/paragon/blob/master/scss/core/_typography.scss#L39 What's here probably needs some expanding or reworking. Here's a rough idea of what styles could become:

.link-default {}
.link-muted {}
.link-brand {}
.link-inline {}
.link-standalone {}

Since you're PR relates only to underlining you could choose to add just link-inline and link-standalone classes if you're time strapped.

Let me know if you have any questions or concerns.

[abutterworth]

See my comment above

[abutterworth]

It looks good.

Could you add examples of the different variants and isInline in the documentation site? This can be done by editing this README file: https://github.com/edx/paragon/blob/master/src/Hyperlink/README.md

[edx-semantic-release]

🎉 This PR is included in version 14.15.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀