GoForward and GoBack components

[davidtheclark]

We have some unnecessary variation in links/buttons where the intention is to make you feel like you're going forward or back. This would be a super simple component, but probably worth standardizing.

In most places we use a right chevron after the text to indicate "Take me to the next thing". In some places we use a right arrow. I don't know of very many places where we have the "Take me back" action, but I think when we do we use an arrow. Sometimes the text is bold, sometimes it's not.

Here's what I propose:

• We use a chevron for both forward and back, since that's the most widespread usage right now, suggesting that it's favored by the most people.
• By default we bold the text so it looks & feels like a text button. I guess we could make it unboldable, too, with a prop.
• Small and large sizes.

[davidtheclark]

To be clear, I have almost no feelings about this, just want a standard version that we can use by default.

[lshig]

👋 I'm going to pick this up.

If there's no objection, I'm going to update ChevronousText before creating a GoLink. (It's open for a better name.)

I think it'd be valuable for ChevronousText to have a boolean iconBefore prop but by default have a chevron-right icon. In the GoLink component, I plan to use the updated ChevronousText component and give it the option to be bolded/unbolded or dark/light. This is also open for discussion, but I see GoLink wrapped by an <a /> tag, which may take the user straight to the URL or open a new tab.

This is part of the Accounts team's effort to consolidate our components and abstract them out to the shared libraries of components. For example we're looking to switch out the following Forward and Back components:

cc: @angel

[davidtheclark]

ChevronousText does only one thing, really: it puts the icon after text and connects the icon to the last word of the text so that there is no possibility the icon will end up orphaned on another line. So it's only particularly useful for text that might be multiline and will include icons inline with the text. I think that's not the case for GoLinks (those should live on their own, outside of paragraphs, and be single lines) — so maybe IconText is more useful precedent for GoLink (rather than ChevronousText)?

[lshig]

It'd be ideal if they were always single lined texts, but in the past this was not always so due to marketing content, design layout (sidebars), font-size (medium, large), and device size (like mobile view). I'm in favor of having a robust and semi-flexible ChevronousText and/or IconText that can handle the icon being before/after the text, multiline, and prevent text wrap if the word next to it just so happens to be really long. This may be way in the future, but this would be beneficial for content that may need to be translated in other languages.