Skip to content

Commit 03da100

Browse files
rseseCopilot
rsese
and
Copilot
authored
landing page carousel component (#57177)
Co-authored-by: GitHub Copilot <[email protected]>
1 parent 9b0d2be commit 03da100

File tree

10 files changed

+366
-23
lines changed

10 files changed

+366
-23
lines changed

‎src/fixtures/fixtures/content/get-started/carousel/category-one/article-one.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
title: Carousel Article One
3+
intro: 'This is the first test article for the carousel component.'
4+
versions:
5+
fpt: '*'
6+
ghes: '*'
7+
ghec: '*'
8+
layout: inline
9+
---
10+
11+
This is the content of the first test article for the LandingCarousel component. It demonstrates how the carousel displays multiple articles in a responsive layout.

‎src/fixtures/fixtures/content/get-started/carousel/category-one/article-two.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
title: Carousel Article Two
3+
intro: 'This is the second test article for the carousel component.'
4+
versions:
5+
fpt: '*'
6+
ghes: '*'
7+
ghec: '*'
8+
layout: inline
9+
---
10+
11+
This is the content of the second test article for the LandingCarousel component. It helps test the navigation and pagination features.

‎src/fixtures/fixtures/content/get-started/carousel/category-one/index.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
title: Category One
3+
intro: 'First category of test articles.'
4+
versions:
5+
fpt: '*'
6+
ghes: '*'
7+
ghec: '*'
8+
children:
9+
- /article-one
10+
- /article-two
11+
---
12+
13+
This is the first category of test articles.

‎src/fixtures/fixtures/content/get-started/carousel/category-two/article-three.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
title: Carousel Article Three
3+
intro: 'This is the third test article for the carousel component.'
4+
versions:
5+
fpt: '*'
6+
ghes: '*'
7+
ghec: '*'
8+
layout: inline
9+
---
10+
11+
This is the content of the third test article for the LandingCarousel component. It allows testing of responsive behavior across different screen sizes.

‎src/fixtures/fixtures/content/get-started/carousel/category-two/index.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
title: Category Two
3+
intro: 'Second category of test articles.'
4+
versions:
5+
fpt: '*'
6+
ghes: '*'
7+
ghec: '*'
8+
children:
9+
- /article-three
10+
---
11+
12+
This is the second category of test articles.

‎src/fixtures/fixtures/content/get-started/carousel/index.md

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
title: Carousel Test Category
3+
intro: 'A test category page for testing the LandingCarousel component.'
4+
versions:
5+
fpt: '*'
6+
ghes: '*'
7+
ghec: '*'
8+
layout: category-landing
9+
recommended:
10+
- /category-one/article-one
11+
- /category-one/article-two
12+
- /category-two/article-three
13+
spotlight:
14+
- article: /category-one/article-one
15+
image: /assets/images/placeholder.png
16+
- article: /category-one/article-two
17+
image: /assets/images/placeholder.png
18+
- article: /category-two/article-three
19+
image: /assets/images/placeholder.png
20+
children:
21+
- /category-one
22+
- /category-two
23+
---
24+
25+
This is a test category page for the LandingCarousel component.

‎src/fixtures/fixtures/content/get-started/index.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ children:
2828
- /versioning
2929
- /learning-about-github
3030
- /empty-categories
31+
- /carousel
3132
communityRedirect:
3233
name: Provide HubGit Feedback
3334
href: 'https://hubgit.com/orgs/community/discussions/categories/get-started'

‎src/fixtures/tests/playwright-rendering.spec.ts

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -997,3 +997,54 @@ test('open search, Ask AI returns 400 error and shows general search results', a
997997
await expect(searchResults).toBeVisible()
998998
await expect(aiSection).toBeVisible()
999999
})
1000+
1001+
test.describe('LandingCarousel component', () => {
1002+
test('displays carousel on test page', async ({ page }) => {
1003+
await page.goto('/get-started/carousel?feature=discovery-landing')
1004+
1005+
const carousel = page.locator('[data-testid="landing-carousel"]')
1006+
await expect(carousel).toBeVisible()
1007+
1008+
// Check that article cards are present
1009+
const items = page.locator('[data-testid="carousel-items"]')
1010+
const cards = items.locator('div')
1011+
await expect(cards.first()).toBeVisible()
1012+
1013+
// Verify cards have real titles (not "Unknown Article" when article not found)
1014+
const firstCardTitle = cards.first().locator('h3')
1015+
await expect(firstCardTitle).toBeVisible()
1016+
await expect(firstCardTitle).not.toHaveText('Unknown Article')
1017+
})
1018+
1019+
test('navigation works on desktop', async ({ page }) => {
1020+
await page.setViewportSize({ width: 1200, height: 800 })
1021+
await page.goto('/get-started/carousel?feature=discovery-landing')
1022+
1023+
const carousel = page.locator('[data-testid="landing-carousel"]')
1024+
await expect(carousel).toBeVisible()
1025+
1026+
// Should show 3 cards on desktop
1027+
const cards = carousel.locator('a')
1028+
await expect(cards).toHaveCount(3)
1029+
1030+
// Check for navigation buttons if there are more than 3 articles
1031+
const nextButton = carousel.getByRole('button', { name: 'Next articles' })
1032+
if (await nextButton.isVisible()) {
1033+
const prevButton = carousel.getByRole('button', { name: 'Previous articles' })
1034+
await expect(prevButton).toBeDisabled() // Should be disabled on first page
1035+
await expect(nextButton).toBeEnabled()
1036+
}
1037+
})
1038+
1039+
test('responsive behavior on mobile', async ({ page }) => {
1040+
await page.setViewportSize({ width: 375, height: 667 })
1041+
await page.goto('/get-started/carousel?feature=discovery-landing')
1042+
1043+
const carousel = page.locator('[data-testid="landing-carousel"]')
1044+
await expect(carousel).toBeVisible()
1045+
1046+
// Should show 1 card on mobile
1047+
const cards = carousel.locator('a')
1048+
await expect(cards).toHaveCount(1)
1049+
})
1050+
})

‎src/landings/components/shared/LandingCarousel.module.scss

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
.carousel {
2+
margin-top: 3rem;
3+
}
4+
5+
.header {
6+
display: flex;
7+
flex-direction: column;
8+
gap: 1rem;
9+
margin-bottom: 1.5rem;
10+
11+
@media (min-width: 768px) {
12+
flex-direction: row;
13+
justify-content: space-between;
14+
align-items: center;
15+
}
16+
}
17+
18+
.heading {
19+
font-size: 1.5rem;
20+
font-weight: 600;
21+
margin: 0;
22+
color: var(--fgColor-default);
23+
}
24+
25+
.navigation {
26+
display: flex;
27+
justify-content: flex-start;
28+
gap: 1rem;
29+
30+
@media (min-width: 768px) {
31+
justify-content: flex-end;
32+
}
33+
}
34+
35+
.navButton {
36+
min-width: 32px !important;
37+
padding: 6px !important;
38+
border-radius: 6px !important;
39+
40+
&:disabled {
41+
cursor: not-allowed !important;
42+
opacity: 0.5 !important;
43+
}
44+
}
45+
46+
.itemsGrid {
47+
display: grid;
48+
gap: 1.5rem;
49+
grid-template-columns: 1fr;
50+
51+
@media (min-width: 768px) {
52+
grid-template-columns: repeat(2, 1fr);
53+
}
54+
55+
@media (min-width: 1012px) {
56+
grid-template-columns: repeat(3, 1fr);
57+
}
58+
}
59+
60+
.articleCard {
61+
display: flex;
62+
flex-direction: column;
63+
padding: 24px;
64+
min-height: 120px; /* Ensures consistent card heights */
65+
box-shadow:
66+
0px 1px 3px 0px rgba(31, 35, 40, 0.08),
67+
0px 1px 0px 0px rgba(31, 35, 40, 0.06);
68+
}
69+
70+
.articleTitle {
71+
margin: 0 0 0.5rem 0;
72+
font-size: 1.1rem;
73+
}
74+
75+
.articleLink {
76+
color: var(--fgColor-accent);
77+
text-decoration: none;
78+
79+
&:hover {
80+
text-decoration: underline;
81+
}
82+
}
83+
84+
.articleDescription {
85+
margin: 0;
86+
color: var(--fgColor-muted);
87+
font-size: 0.9rem;
88+
line-height: 1.4;
89+
}
90+
91+
.pagination {
92+
display: flex;
93+
justify-content: center;
94+
margin-top: 1rem;
95+
font-size: 0.8rem;
96+
color: var(--fgColor-muted);
97+
}

0 commit comments

Comments
 (0)