Skip to content

Commit 0fcf4b6

Browse files
rsesersese
authored
make journey track cards clickable with hover effect (#58544)
1 parent c77a233 commit 0fcf4b6

File tree

2 files changed

+80
-75
lines changed

2 files changed

+80
-75
lines changed

‎src/landings/components/journey/JourneyLearningTracks.module.scss‎

Lines changed: 48 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
.learningTracks {
1+
.journeyTracks {
2+
margin-bottom: 1rem;
3+
margin-left: 1rem;
4+
}
5+
6+
.trackCard {
27
border: 1px solid
38
var(--borderColor-default, var(--color-border-default, #d1d9e0));
49
border-radius: 12px;
5-
padding: 1.5rem;
6-
padding-bottom: 0.75rem;
7-
margin-bottom: 1rem;
8-
margin-left: 1rem;
910
box-shadow:
1011
0px 1px 3px 0px rgba(31, 35, 40, 0.08),
1112
0px 1px 0px 0px rgba(31, 35, 40, 0.06);
@@ -15,6 +16,24 @@
1516
--bgColor-default,
1617
var(--color-canvas-default, #ffffff)
1718
);
19+
transition: all 0.2s ease-in-out;
20+
21+
// journey card hover effect only when the card is not expanded
22+
&:not([open]):hover {
23+
box-shadow:
24+
0 0.25rem 0.5rem 0 rgba(31, 35, 40, 0.12),
25+
0 0.125rem 0.25rem 0 rgba(31, 35, 40, 0.08);
26+
transform: translateY(-2px);
27+
background-color: var(--bgColor-muted, var(--color-canvas-subtle));
28+
}
29+
}
30+
31+
.trackSummary {
32+
list-style: none;
33+
cursor: pointer;
34+
display: block;
35+
position: relative;
36+
padding: 1.5rem 1.5rem 1.75rem 1.5rem;
1837
}
1938

2039
.trackHeader {
@@ -26,25 +45,25 @@
2645
gap: 0.5rem;
2746
}
2847

29-
.anchorLink {
30-
color: var(--fgColor-default, var(--color-fg-default, #1f2328));
31-
text-decoration: none;
32-
}
33-
3448
.trackDescription {
35-
margin: 0 0 1rem 0;
36-
color: var(--fgColor-muted, var(--color-fg-muted, #656d76));
49+
margin: 0;
50+
padding-right: 2rem;
51+
52+
p {
53+
margin: 0;
54+
color: var(--fgColor-muted, var(--color-fg-muted, #656d76));
55+
}
3756
}
3857

3958
.expandButton {
40-
top: 0;
41-
right: 0;
59+
top: 1.5rem;
60+
right: 1.5rem;
4261
}
4362

4463
.trackGuides {
45-
margin-top: 1rem;
46-
margin-bottom: 1rem;
47-
padding-left: 0;
64+
margin-top: 0;
65+
margin-bottom: 0;
66+
padding: 0 1.5rem 0.75rem 1.5rem;
4867
list-style: none;
4968
counter-reset: guide-counter;
5069
}
@@ -76,11 +95,6 @@
7695
line-height: 1;
7796
}
7897

79-
.guideLink {
80-
color: var(--fgColor-accent, var(--color-accent-fg, #0969da));
81-
text-decoration: none;
82-
}
83-
8498
/* Hide only the timeline line that extends below the last badge, preserve everything else */
8599
.timelineContainer :global(.Timeline-Item:last-child::before) {
86100
background: linear-gradient(
@@ -189,21 +203,20 @@
189203
}
190204

191205
.mobileItem .mobileTile {
192-
border: 1px solid
193-
var(--borderColor-default, var(--color-border-default, #d1d9e0));
194-
border-radius: 12px;
195-
padding: 1rem;
196206
margin-top: 0.5rem;
197207
text-align: left;
198-
box-shadow:
199-
0px 1px 3px 0px rgba(31, 35, 40, 0.08),
200-
0px 1px 0px 0px rgba(31, 35, 40, 0.06);
201-
position: relative;
202-
z-index: 3;
203-
background-color: var(
204-
--bgColor-default,
205-
var(--color-canvas-default, #ffffff)
206-
);
208+
209+
.trackCard {
210+
z-index: 3;
211+
}
212+
213+
.trackSummary {
214+
padding: 1rem 1rem 1.75rem 1rem;
215+
}
216+
217+
.trackGuides {
218+
padding: 0 1rem 0.75rem 1rem;
219+
}
207220
}
208221

209222
/* Desktop: show Timeline component */

‎src/landings/components/journey/JourneyLearningTracks.tsx‎

Lines changed: 32 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* filepath: /workspaces/docs-internal/src/landings/components/journey/JourneyLearningTracks.tsx */
22
import { ChevronDownIcon, ChevronUpIcon } from '@primer/octicons-react'
3-
import { Button, Details, Timeline, Token, useDetails } from '@primer/react'
3+
import { Details, Timeline, Token, useDetails } from '@primer/react'
44
import { Link } from '@/frame/components/Link'
55
import { JourneyTrack } from '@/journeys/lib/journey-path-resolver'
66
import styles from './JourneyLearningTracks.module.scss'
@@ -14,40 +14,38 @@ export const JourneyLearningTracks = ({ tracks }: JourneyLearningTracksProps) =>
1414
return null
1515
}
1616

17-
const renderTrackContent = (track: JourneyTrack, trackIndex: number) => {
17+
const renderTrackContent = (track: JourneyTrack) => {
1818
const { getDetailsProps, open } = useDetails({})
1919

2020
return (
21-
<>
22-
<div className={styles.trackHeader}>
23-
<h3 className="h4 text-bold">{track.title}</h3>
24-
<Token text={`${track.guides?.length || 0} articles`} />
25-
</div>
26-
<p className={styles.trackDescription}>{track.description}</p>
27-
<Details {...getDetailsProps()}>
28-
<Button
29-
as="summary"
30-
variant="invisible"
31-
className={`position-absolute ${styles.expandButton}`}
32-
aria-label={
33-
open
34-
? `Collapse article list ${trackIndex + 1}`
35-
: `Expand article list ${trackIndex + 1}`
36-
}
37-
>
21+
<Details
22+
{...getDetailsProps()}
23+
id={`track-${track.id}`}
24+
className={styles.trackCard}
25+
data-testid="journey-track"
26+
>
27+
<summary className={styles.trackSummary}>
28+
<div className={styles.trackHeader}>
29+
<h3 className="h4 text-bold">{track.title}</h3>
30+
<Token text={`${track.guides?.length || 0} articles`} />
31+
</div>
32+
<div className={styles.trackDescription}>
33+
<p>{track.description}</p>
34+
</div>
35+
<div className={`position-absolute ${styles.expandButton}`}>
3836
{open ? <ChevronUpIcon /> : <ChevronDownIcon />}
39-
</Button>
40-
<ol className={styles.trackGuides} data-testid="journey-articles">
41-
{(track.guides || []).map((article: { href: string; title: string }) => (
42-
<li key={article.title}>
43-
<Link href={article.href} className={`text-semibold ${styles.guideLink}`}>
44-
{article.title}
45-
</Link>
46-
</li>
47-
))}
48-
</ol>
49-
</Details>
50-
</>
37+
</div>
38+
</summary>
39+
<ol className={styles.trackGuides} data-testid="journey-articles">
40+
{(track.guides || []).map((article: { href: string; title: string }) => (
41+
<li key={article.title}>
42+
<Link href={article.href} className="text-semibold">
43+
{article.title}
44+
</Link>
45+
</li>
46+
))}
47+
</ol>
48+
</Details>
5149
)
5250
}
5351

@@ -60,10 +58,8 @@ export const JourneyLearningTracks = ({ tracks }: JourneyLearningTracksProps) =>
6058
return (
6159
<Timeline.Item key={track.id}>
6260
<Timeline.Badge className={styles.timelineBadge}>{trackIndex + 1}</Timeline.Badge>
63-
<Timeline.Body className={styles.learningTracks}>
64-
<div className="position-relative" data-testid="journey-track">
65-
{renderTrackContent(track, trackIndex)}
66-
</div>
61+
<Timeline.Body className={styles.journeyTracks}>
62+
{renderTrackContent(track)}
6763
</Timeline.Body>
6864
</Timeline.Item>
6965
)
@@ -76,11 +72,7 @@ export const JourneyLearningTracks = ({ tracks }: JourneyLearningTracksProps) =>
7672
{tracks.map((track, trackIndex) => (
7773
<div key={track.id} className={styles.mobileItem}>
7874
<div className={styles.mobileBadge}>{trackIndex + 1}</div>
79-
<div className={styles.mobileTile}>
80-
<div className="position-relative" data-testid="journey-track">
81-
{renderTrackContent(track, trackIndex)}
82-
</div>
83-
</div>
75+
<div className={styles.mobileTile}>{renderTrackContent(track)}</div>
8476
{trackIndex < tracks.length - 1 && <div className={styles.mobileConnector} />}
8577
</div>
8678
))}

0 commit comments

Comments
 (0)