Skip to content

Commit 79a710d

Browse files
EbonsignoriEbonsignori
authored
Adapt journey pager into brand "UP NEXT" promo (#62216)
1 parent 54f5ed7 commit 79a710d

6 files changed

Lines changed: 137 additions & 82 deletions

File tree

‎data/ui.yml‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -367,10 +367,11 @@ product_landing:
367367
all_content: 'View all {{ title }} content'
368368

369369
journey_track_nav:
370-
prev_article: Previous
371370
next_article: Next
372371
more_articles: More articles →
373372
current_progress: 'Article {i} of {n}'
373+
up_next: Up next
374+
up_next_progress: 'Step {i} of {n} in {track}'
374375

375376
scroll_button:
376377
scroll_to_top: Scroll to top

‎src/automated-pipelines/components/AutomatedPage.tsx‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -73,28 +73,30 @@ export const AutomatedPage = ({ children, rawChildren, fullWidth }: Props) => {
7373
{articleContents}
7474
</ArticleInlineLayout>
7575
{isJourneyTrack ? (
76-
<div className="container-lg mt-4 px-3">
76+
<div className="width-full mt-4">
7777
<JourneyTrackNav context={currentJourneyTrack} />
7878
</div>
7979
) : null}
8080
</>
8181
) : (
82-
<div className="container-xl px-3 px-md-6 my-4">
83-
<ArticleGridLayout
84-
fullWidth={fullWidth}
85-
topper={<ArticleTitle>{title}</ArticleTitle>}
86-
intro={introProp}
87-
toc={toc}
88-
>
89-
{articleContents}
90-
</ArticleGridLayout>
82+
<>
83+
<div className="container-xl px-3 px-md-6 my-4">
84+
<ArticleGridLayout
85+
fullWidth={fullWidth}
86+
topper={<ArticleTitle>{title}</ArticleTitle>}
87+
intro={introProp}
88+
toc={toc}
89+
>
90+
{articleContents}
91+
</ArticleGridLayout>
92+
</div>
9193

9294
{isJourneyTrack ? (
93-
<div className="container-lg mt-4 px-3">
95+
<div className="width-full mt-4">
9496
<JourneyTrackNav context={currentJourneyTrack} />
9597
</div>
9698
) : null}
97-
</div>
99+
</>
98100
)}
99101
</DefaultLayout>
100102
)

‎src/fixtures/fixtures/data/ui.yml‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -367,10 +367,11 @@ product_landing:
367367
all_content: 'View all {{ title }} content'
368368

369369
journey_track_nav:
370-
prev_article: Previous
371370
next_article: Next
372371
more_articles: More articles →
373372
current_progress: 'Article {i} of {n}'
373+
up_next: Up next
374+
up_next_progress: 'Step {i} of {n} in {track}'
374375

375376
scroll_button:
376377
scroll_to_top: Scroll to top

‎src/frame/components/article/ArticlePage.tsx‎

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -114,33 +114,35 @@ export const ArticlePage = () => {
114114
{articleContents}
115115
</ArticleInlineLayout>
116116
{isJourneyTrack ? (
117-
<div className="container-lg mt-4 px-3">
117+
<div className="width-full mt-4">
118118
<JourneyTrackNav context={currentJourneyTrack} />
119119
</div>
120120
) : null}
121121
</>
122122
) : (
123-
<div className="container-xl px-3 px-md-6 my-4">
124-
<ArticleGridLayout
125-
supportPortalVaIframeProps={supportPortalVaIframeProps}
126-
topper={<ArticleTitle>{title}</ArticleTitle>}
127-
intro={
128-
<>
129-
{introProp}
130-
{introCalloutsProp}
131-
</>
132-
}
133-
toc={toc}
134-
>
135-
{articleContents}
136-
</ArticleGridLayout>
123+
<>
124+
<div className="container-xl px-3 px-md-6 my-4">
125+
<ArticleGridLayout
126+
supportPortalVaIframeProps={supportPortalVaIframeProps}
127+
topper={<ArticleTitle>{title}</ArticleTitle>}
128+
intro={
129+
<>
130+
{introProp}
131+
{introCalloutsProp}
132+
</>
133+
}
134+
toc={toc}
135+
>
136+
{articleContents}
137+
</ArticleGridLayout>
138+
</div>
137139

138140
{isJourneyTrack ? (
139-
<div className="container-lg mt-4 px-3">
141+
<div className="width-full mt-4">
140142
<JourneyTrackNav context={currentJourneyTrack} />
141143
</div>
142144
) : null}
143-
</div>
145+
</>
144146
)}
145147
</CodeTabsProvider>
146148
</SelectionProvider>

‎src/journeys/components/JourneyTrackNav.module.scss‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
@import "@primer/css/support/variables/layout.scss";
2+
@import "@primer/css/support/mixins/layout.scss";
3+
4+
.upNext {
5+
display: flex;
6+
flex-direction: column;
7+
align-items: flex-start;
8+
gap: 16px;
9+
padding: 24px;
10+
border-top: 1px solid var(--color-border-muted);
11+
border-bottom: 1px solid var(--color-border-muted);
12+
background: linear-gradient(
13+
to bottom,
14+
var(--color-canvas-subtle),
15+
var(--color-canvas-default)
16+
);
17+
18+
@include breakpoint(md) {
19+
flex-direction: row;
20+
align-items: flex-end;
21+
justify-content: space-between;
22+
gap: 1rem;
23+
}
24+
}
25+
26+
.lead {
27+
display: flex;
28+
flex-direction: column;
29+
gap: 16px;
30+
}
31+
32+
.eyebrow {
33+
margin: 0;
34+
font-family: var(--brand-fontStack-monospace, "Mona Sans Mono", monospace);
35+
font-size: 12px;
36+
line-height: 1.5;
37+
letter-spacing: 0.15px;
38+
text-transform: uppercase;
39+
color: var(--brand-color-text-muted);
40+
}
41+
42+
.link {
43+
display: inline-flex;
44+
align-items: center;
45+
gap: 8px;
46+
color: var(--color-fg-default);
47+
48+
&:hover {
49+
text-decoration: none;
50+
51+
.title {
52+
text-decoration: underline;
53+
}
54+
}
55+
}
56+
57+
.title {
58+
font-family: var(--brand-fontStack-sansSerif, "Mona Sans", sans-serif);
59+
font-size: 14px;
60+
font-weight: 500;
61+
line-height: 14px;
62+
letter-spacing: 0.14px;
63+
}
64+
65+
.progress {
66+
margin: 0;
67+
font-family: var(--brand-fontStack-sansSerif, "Mona Sans", sans-serif);
68+
font-size: 14px;
69+
font-weight: 400;
70+
line-height: 1.5;
71+
letter-spacing: 0.14px;
72+
color: var(--brand-color-text-muted);
73+
white-space: nowrap;
74+
}

‎src/journeys/components/JourneyTrackNav.tsx‎

Lines changed: 26 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,41 @@
1+
import { ArrowRightIcon } from '@primer/octicons-react'
2+
13
import { Link } from '@/frame/components/Link'
24
import type { JourneyContext } from '@/journeys/lib/journey-path-resolver'
35
import { useTranslation } from '@/languages/components/useTranslation'
6+
import styles from './JourneyTrackNav.module.scss'
47

58
type Props = {
69
context: JourneyContext
710
}
811

912
export function JourneyTrackNav({ context }: Props) {
1013
const { t } = useTranslation('journey_track_nav')
11-
const { prevGuide, nextGuide, nextTrackFirstGuide } = context
14+
const { nextGuide, nextTrackFirstGuide, currentGuideIndex, numberOfGuides, trackTitle } = context
15+
16+
const upNext = nextGuide ?? nextTrackFirstGuide
17+
if (!upNext) return null
18+
19+
// In-track: show the next article's title. Crossing into a new track: show the
20+
// track's name so the reader knows they're moving on to a new track.
21+
const label = nextGuide ? nextGuide.title : nextTrackFirstGuide!.trackTitle
22+
23+
const progress = t('up_next_progress')
24+
.replace('{i}', `${currentGuideIndex + 1}`)
25+
.replace('{n}', `${numberOfGuides}`)
26+
.replace('{track}', trackTitle)
1227

1328
return (
14-
<div
15-
data-testid="journey-track-nav"
16-
className="py-3 px-4 rounded color-bg-default border d-flex flex-justify-between"
17-
>
18-
<span className="f5 d-flex flex-column">
19-
{prevGuide && (
20-
<>
21-
<span className="color-fg-default" aria-hidden="true">
22-
{t('prev_article')}
23-
</span>
24-
<Link
25-
href={prevGuide.href}
26-
className="text-bold color-fg"
27-
aria-label={`${t('prev_article')}: ${prevGuide.title}`}
28-
>
29-
{prevGuide.title}
30-
</Link>
31-
</>
32-
)}
33-
</span>
29+
<nav data-testid="journey-track-nav" aria-label={t('up_next')} className={styles.upNext}>
30+
<div className={styles.lead}>
31+
<p className={styles.eyebrow}>{t('up_next')}</p>
32+
<Link href={upNext.href} className={styles.link} aria-label={`${t('up_next')}: ${label}`}>
33+
<span className={styles.title}>{label}</span>
34+
<ArrowRightIcon size={16} />
35+
</Link>
36+
</div>
3437

35-
<span className="f5 d-flex flex-column flex-items-end">
36-
{nextGuide ? (
37-
<>
38-
<span className="color-fg-default" aria-hidden="true">
39-
{t('next_article')}
40-
</span>
41-
<Link
42-
href={nextGuide.href}
43-
className="text-bold color-fg text-right"
44-
aria-label={`${t('next_article')}: ${nextGuide.title}`}
45-
>
46-
{nextGuide.title}
47-
</Link>
48-
</>
49-
) : nextTrackFirstGuide ? (
50-
<>
51-
<span className="color-fg-default" aria-hidden="true">
52-
{t('next_article')}
53-
</span>
54-
<Link
55-
href={nextTrackFirstGuide.href}
56-
className="text-bold color-fg text-right"
57-
aria-label={`${t('next_article')}: ${nextTrackFirstGuide.trackTitle}`}
58-
>
59-
{nextTrackFirstGuide.trackTitle}
60-
</Link>
61-
</>
62-
) : null}
63-
</span>
64-
</div>
38+
<p className={styles.progress}>{progress}</p>
39+
</nav>
6540
)
6641
}

0 commit comments

Comments
 (0)