diff --git a/data/ui.yml b/data/ui.yml index 1e3986a0f4..ff8b52542c 100644 --- a/data/ui.yml +++ b/data/ui.yml @@ -258,6 +258,7 @@ footer: machine: Some of this content may be machine- or AI-translated. journey_landing: articles: '{{ number }} Articles' + articles_heading: Articles product_landing: article_grid: heading: Articles diff --git a/src/fixtures/fixtures/data/ui.yml b/src/fixtures/fixtures/data/ui.yml index 1e3986a0f4..ff8b52542c 100644 --- a/src/fixtures/fixtures/data/ui.yml +++ b/src/fixtures/fixtures/data/ui.yml @@ -258,6 +258,7 @@ footer: machine: Some of this content may be machine- or AI-translated. journey_landing: articles: '{{ number }} Articles' + articles_heading: Articles product_landing: article_grid: heading: Articles diff --git a/src/fixtures/tests/playwright-rendering.spec.ts b/src/fixtures/tests/playwright-rendering.spec.ts index bc775209b3..b45cecb735 100644 --- a/src/fixtures/tests/playwright-rendering.spec.ts +++ b/src/fixtures/tests/playwright-rendering.spec.ts @@ -1071,7 +1071,7 @@ test.describe('Journey Tracks', () => { // Verify track has proper structure const firstTrack = tracks.first() - await expect(firstTrack.locator('h3')).toBeVisible() // Track title + await expect(firstTrack.locator('h2')).toBeVisible() // Track title await expect(firstTrack.locator('p')).toBeVisible() // Track description }) diff --git a/src/landings/components/journey/JourneyLearningTracks.tsx b/src/landings/components/journey/JourneyLearningTracks.tsx index 20cbcc355b..dc9e456a9f 100644 --- a/src/landings/components/journey/JourneyLearningTracks.tsx +++ b/src/landings/components/journey/JourneyLearningTracks.tsx @@ -2,6 +2,7 @@ import { ChevronDownIcon, ChevronUpIcon } from '@primer/octicons-react' import { Details, Timeline, Token, useDetails } from '@primer/react' import { Link } from '@/frame/components/Link' +import { useTranslation } from '@/languages/components/useTranslation' import { JourneyTrack } from '@/journeys/lib/journey-path-resolver' import styles from './JourneyLearningTracks.module.scss' @@ -10,6 +11,8 @@ type JourneyLearningTracksProps = { } export const JourneyLearningTracks = ({ tracks }: JourneyLearningTracksProps) => { + const { t } = useTranslation('journey_landing') + if (!tracks || tracks.length === 0) { return null } @@ -26,7 +29,7 @@ export const JourneyLearningTracks = ({ tracks }: JourneyLearningTracksProps) => >
-

{track.title}

+

{track.title}

@@ -49,6 +52,29 @@ export const JourneyLearningTracks = ({ tracks }: JourneyLearningTracksProps) => ) } + // simple single journey + if (tracks.length === 1) { + const track = tracks[0] + + return ( +
+
+

{t('articles_heading')}

+
+
    + {(track.guides || []).map((article: { href: string; title: string }) => ( +
  1. + + {article.title} + +
  2. + ))} +
+
+ ) + } + + // more than one journey has timeline and mobile layout return (
{/* Desktop: Timeline component */}