Discussion: `TextLink` component

Tasks

• Decide what our basic link style should look like - particularly the color (see comment re: contrast)
• Determine the props API for the TextLink component based on how we want to customize the style for specific use-cases
• Write the TextLink component
• Rewrite existing links in the app to use TextLink

Increasing Access

We want to keep the codebase clean and keep the design consistent.

Feature enhancement details

We have had many issue recently relating to the visibility of text links throughout the app. I would like to centralize the discussion here.

The recurring problem is that it's not clear to the user that a certain text is a clickable link. We can improve this by changing the default style of the link as well as adding hover styles to make it look more interactive.

I don't want us to add lots of specific CSS to specific component because this is difficult to maintain. I think this is a good opportunity for us to expand our library of reusable core UI components with a TextLink. We might not want to have the exact same styles everywhere, so we'll want to have some props which can control styles.

The goal of this issue is to discuss our API for the TextLink component and finalize what props we want.

Depending on the API that we choose, the code might look like any of these:

<TextLink href={url} underline="hover" color="always">anchor</TextLink>

<TextLink href={url} underline="hover" color="primary">anchor</TextLink>

<TextLink href={url} primary bold>anchor</TextLink>

^ This last one uses boolean props and is concise but probably more confusing.

Ideas for props:

• underline with values "always", "hover", "none" (what MUI uses)
• color with values "always", "hover", "none" to apply the theme primary accent color (pink or yellow)
• color with values "primary", "inherit", etc. to choose from multiple theme colors (what MUI uses)
• primary as a boolean flag to make it pink (this wouldn't allow for pink-on-hover behavior)
• bold with values "always", "hover", "none" ("hover"` shouldn't be used here, but keeps it consistent)
• bold as a boolean flag
• fontWeight with values "bold" or "inherit"
• display with values "inline" (default) and "block"

Specific related issues:

• #2734
• #2812
• #2940
• #2943

References / how others handle this:

• https://mui.com/material-ui/api/link/#props
• https://mui.com/joy-ui/api/link/#props
• https://polaris.shopify.com/components/navigation/link#props
• https://chakra-ui.com/docs/components/link/props
• https://orbit.kiwi/components/action/textlink/react/#props
• https://ant.design/components/typography#typographytext
• https://getbootstrap.com/docs/5.3/utilities/link/#colored-links
• https://react.carbondesignsystem.com/?path=/docs/components-link--overview#component-api
• https://atlassian.design/components/menu/link-item/props
• https://www.duetds.com/components/link/#properties
• https://react.fluentui.dev/?path=/docs/components-link--default
• https://baseweb.design/components/link/
• many more here: https://component.gallery/components/link/

No files or tests are named. Start by reviewing the linked contrast discussion and the related issues (#2734, #2812, #2940, and #2943), then inspect existing link patterns in the app. The work is done when the TextLink API and default styling are agreed, the component exists, and existing links use it.