Skip to content

Commit

Permalink
fix(text-link): manage underline with classname
Browse files Browse the repository at this point in the history
Powerplex committed Sep 19, 2023

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 0071d7f commit a0a881d
Showing 4 changed files with 31 additions and 33 deletions.
1 change: 0 additions & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

20 changes: 10 additions & 10 deletions packages/components/text-link/src/TextLink.doc.mdx
Original file line number Diff line number Diff line change
@@ -55,6 +55,16 @@ Simply use css classes to set a difference size if necessary.

<Canvas of={stories.Sizes} />

## Advanced Usage

### Icons

You can use Spark’s `Icon` component inside of the `TextLink` to display an icon.

This can be useful to showcase external links, download links, etc.

<Canvas of={stories.Icons} />

### Underline

By default `TextLink` shows an underline. It can be disabled to only be shown when hovering/focusing the link instead.
@@ -76,16 +86,6 @@ By default `TextLink` shows an underline. It can be disabled to only be shown wh

<Canvas of={stories.Underline} />

## Advanced Usage

### Icons

You can use Spark’s `Icon` component inside of the `TextLink` to display an icon.

This can be useful to showcase external links, download links, etc.

<Canvas of={stories.Icons} />

## Accessibility

Adheres to the [Link WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/link/).
29 changes: 15 additions & 14 deletions packages/components/text-link/src/TextLink.stories.tsx
Original file line number Diff line number Diff line change
@@ -111,25 +111,12 @@ export const Sizes: StoryFn = _args => {
)
}

export const Underline: StoryFn = _args => {
return (
<div className="flex flex-col gap-md">
<TextLink underline href="/?path=/docs/getting-started--docs" target="_blank">
Default link with underline
</TextLink>
<TextLink underline={false} href="/?path=/docs/getting-started--docs" target="_blank">
Link with underline disabled
</TextLink>
</div>
)
}

export const Icons: StoryFn = _args => {
return (
<div className="flex flex-col gap-md">
<p>
External{' '}
<TextLink href="https://en.wikipedia.org/wiki/Kitten" target="_blank">
<TextLink href="https://en.wikipedia.org/wiki/Kitten" target="_blank" className="gap-sm">
link
<Icon>
<LinkSVG />
@@ -140,3 +127,17 @@ export const Icons: StoryFn = _args => {
</div>
)
}

export const Underline: StoryFn = _args => {
return (
<div className="flex flex-col gap-md">
<TextLink
className="!no-underline hover:underline focus:underline"
href="/?path=/docs/getting-started--docs"
target="_blank"
>
Link with underline disabled
</TextLink>
</div>
)
}
14 changes: 6 additions & 8 deletions packages/components/text-link/src/TextLink.tsx
Original file line number Diff line number Diff line change
@@ -4,7 +4,10 @@ import React, { forwardRef } from 'react'
export type TextLinkProps = React.HTMLProps<HTMLAnchorElement> & StylesProps

const textLinkStyles = cva(
['inline-flex gap-sm items-center font-bold', 'focus-visible:u-ring focus-visible:outline-none'],
[
'inline-flex items-center font-bold underline',
'focus-visible:u-ring focus-visible:outline-none',
],
{
variants: {
intent: {
@@ -19,24 +22,19 @@ const textLinkStyles = cva(
info: 'text-info hover:text-info-hovered',
neutral: 'text-neutral hover:text-neutral-hovered',
},
underline: {
true: 'underline',
false: 'hover:underline focus:underline',
},
},
defaultVariants: {
intent: 'current',
underline: true,
},
}
)

export type StylesProps = VariantProps<typeof textLinkStyles>

export const TextLink = forwardRef<HTMLAnchorElement, TextLinkProps>(
({ children, className, intent = 'current', underline = true, ...props }, ref) => {
({ children, className, intent = 'current', ...props }, ref) => {
return (
<a className={textLinkStyles({ className, intent, underline })} ref={ref} {...props}>
<a className={textLinkStyles({ className, intent })} ref={ref} {...props}>
{children}
</a>
)

0 comments on commit a0a881d

Please sign in to comment.