Link: export linkStyles to allow styling React Router Links

[hoorayimhelping]

In apps that use ReactRouter or a similar router to mimic <a> functionality, there are two unattractive ways to get links that look and feel like click-ui Links:

1. Wrap the click-ui Link in a ReactRouter Link, which will throw a validateDOMNesting warning about nesting an <a> inside an <a>. See screenshot below.
2. Duplicate the existing click-ui styles

The warning shows up in many of the e2e tests because many of them go to the main page of the app where these nested anchor tags are.

Screenshot of problem

(Application redacted; only console shown)

This PR fixes that by exporting the styles that click-ui Link uses.

Usage:

import styled from 'styled-components';
import { linkStyles, StyledLinkProps } from '@clickhouse/click-ui';

const CuiStyledLink = styled(Link)<StyledLinkProps>`
  ${linkStyles}
`;

<CuiStyledLink to={myHref}>Click me to go places</CuiStyledLink>

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
click-ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 11, 2024 9:41pm