Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 5f5aa0b

Browse files
mikesurowiecmikesurowiec
authored
BumpLink component (#21033)
* create BumpLink component, re-org components/ui
1 parent 0fa0e1f commit 5f5aa0b

12 files changed

Lines changed: 91 additions & 62 deletions

File tree

‎components/landing/ArticleList.tsx‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { Link } from 'components/Link'
55
import { ArrowRightIcon } from '@primer/octicons-react'
66
import { FeaturedLink } from 'components/context/ProductLandingContext'
77
import { TruncateLines } from 'components/TruncateLines'
8+
import { BumpLink } from 'components/ui/BumpLink'
89

910
type Props = {
1011
title?: string
@@ -45,18 +46,26 @@ export const ArticleList = ({
4546
{articles.map((link) => {
4647
return (
4748
<li key={link.href} className={cx(variant === 'compact' && 'border-top')}>
48-
<Link href={link.href} className="Bump-link--hover no-underline d-block py-3">
49-
<h4 className="link-with-intro-title">
50-
<span dangerouslySetInnerHTML={{ __html: link.title }} />
51-
<span className="Bump-link-symbol">→</span>
52-
</h4>
49+
<BumpLink
50+
as={Link}
51+
href={link.href}
52+
className="py-3"
53+
title={
54+
<h4 data-testid="link-with-intro-title">
55+
<span dangerouslySetInnerHTML={{ __html: link.title }} />
56+
</h4>
57+
}
58+
>
5359
{!link.hideIntro && link.intro && (
5460
<TruncateLines
5561
as="p"
5662
maxLines={variant === 'spaced' ? 6 : 2}
57-
className="link-with-intro-intro color-text-secondary mb-0 mt-1"
63+
className="color-text-secondary mb-0 mt-1"
5864
>
59-
<span dangerouslySetInnerHTML={{ __html: link.intro }} />
65+
<span
66+
data-testid="link-with-intro-intro"
67+
dangerouslySetInnerHTML={{ __html: link.intro }}
68+
/>
6069
</TruncateLines>
6170
)}
6271
{link.date && (
@@ -67,7 +76,7 @@ export const ArticleList = ({
6776
{dayjs(link.date).format('MMMM DD')}
6877
</time>
6978
)}
70-
</Link>
79+
</BumpLink>
7180
</li>
7281
)
7382
})}

‎components/landing/TableOfContents.tsx‎

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useRouter } from 'next/router'
22
import cx from 'classnames'
33

44
import { Link } from 'components/Link'
5+
import { BumpLink } from 'components/ui/BumpLink'
56
import type { TocItem } from 'components/context/ProductLandingContext'
67

78
type Props = {
@@ -39,30 +40,23 @@ export const TableOfContents = (props: Props) => {
3940
}
4041
return (
4142
<li key={childItem.fullPath} className="f4 mt-1">
42-
<Link
43-
href={childItem.fullPath}
44-
className="Bump-link--hover no-underline py-1 color-border-primary"
45-
>
46-
{childItem.title}
47-
</Link>
43+
<Link href={childItem.fullPath}>{childItem.title}</Link>
4844
</li>
4945
)
5046
})}
5147
</ul>
5248
)}
5349
</li>
5450
) : (
55-
<li key={href} className={cx('mb-5', isActive && 'color-auto-gray-4')}>
56-
<Link
57-
href={href}
58-
className="Bump-link--hover no-underline d-block py-1 border-bottom color-border-primary"
59-
>
60-
<h2 className="h4">
61-
{title}
62-
<span className="Bump-link-symbol">→</span>
63-
</h2>
64-
</Link>
65-
{intro && <p className="f4 mt-3" dangerouslySetInnerHTML={{ __html: intro }} />}
51+
<li key={href} className={cx('mb-3 border-bottom pb-2', isActive && 'color-auto-gray-4')}>
52+
<BumpLink as={Link} href={href} title={<h2 className="h4">{title}</h2>}>
53+
{intro && (
54+
<p
55+
className="f4 color-text-secondary"
56+
dangerouslySetInnerHTML={{ __html: intro }}
57+
/>
58+
)}
59+
</BumpLink>
6660
</li>
6761
)
6862
})}

‎components/ui/BumpLink/BumpLink.module.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.container:hover .symbol {
2+
opacity: 1;
3+
transform: translateX(3px);
4+
}
5+
6+
.symbol {
7+
display: inline-block;
8+
transform: translateX(0);
9+
color: inherit;
10+
opacity: 0;
11+
transition: 200ms;
12+
transform: translateX(0);
13+
}

‎components/ui/BumpLink/BumpLink.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { cloneElement, ReactNode, ReactElement, ElementType } from 'react'
2+
import cx from 'classnames'
3+
4+
import styles from './BumpLink.module.scss'
5+
6+
type Props = {
7+
children?: ReactNode
8+
title: ReactElement<any> | string
9+
href: string
10+
as?: ElementType<{ className?: string; href: string }>
11+
className?: string
12+
}
13+
export const BumpLink = ({ as, children, href, title, className }: Props) => {
14+
const Component = as || 'a'
15+
16+
const symbol = <span className={styles.symbol}>→</span>
17+
let extendedTitle: ReactNode
18+
if (typeof title === 'string') {
19+
extendedTitle = (
20+
<span className="h4">
21+
{title} {symbol}
22+
</span>
23+
)
24+
} else {
25+
extendedTitle = cloneElement(title, title.props, title.props.children, symbol)
26+
}
27+
28+
return (
29+
<Component
30+
data-testid="bump-link"
31+
className={cx(styles.container, 'no-underline d-block py-1', className)}
32+
href={href}
33+
>
34+
{extendedTitle}
35+
36+
{children}
37+
</Component>
38+
)
39+
}

‎components/ui/BumpLink/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { BumpLink } from './BumpLink'

components/ui/Callout.module.scss renamed to components/ui/Callout/Callout.module.scss

File renamed without changes.

components/ui/Callout.tsx renamed to components/ui/Callout/Callout.tsx

File renamed without changes.

‎components/ui/Callout/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { Callout } from './Callout'

‎stylesheets/bump-link.scss‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎stylesheets/index.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ $marketing-font-path: "/assets/fonts/inter/";
1010
@import "font-mktg.scss";
1111

1212
@import "alerts.scss";
13-
@import "bump-link.scss";
1413
@import "code.scss";
1514
@import "extended-markdown.scss";
1615
@import "font-mktg.scss";

0 commit comments

Comments
 (0)