diff --git a/components/event-filter/EventFilter.jsx b/components/event-filter/EventFilter.jsx new file mode 100644 index 00000000..2f0a8b9d --- /dev/null +++ b/components/event-filter/EventFilter.jsx @@ -0,0 +1,41 @@ +import { getLiteral } from '../../common/i18n' +import TYPES from '../event-type-chip/types' + +const EventFilter = ({ eventTypes, selectedType, onSelectType, totalEvents }) => { + if (eventTypes.length === 0) return null + + return ( +
{getLiteral('schedule:empty-no-events')}{' '} { {getLiteral('schedule:empty-host-link')}
- )} + ) : null} + + {events.length > 0 && filteredEvents.length === 0 ? ( ++ {getLiteral('schedule:empty-no-matches')} +
+ ) : null} ) } diff --git a/content/commons.json b/content/commons.json index eb935fae..9f37bbaa 100644 --- a/content/commons.json +++ b/content/commons.json @@ -82,6 +82,8 @@ "schedule:add-event": "Add your activity", "schedule:ics-download": "Subscribe to calendar", "schedule:ics-label": "Download .ics file with all Maintainer Month events", + "schedule:filter-label": "Filter by event type", + "schedule:filter-all": "All event types", "schedule:empty-no-events": "Events for Maintainer Month 2026 are coming soon! Want to host one?", "schedule:empty-host-link": "Submit your event here.", "schedule:empty-no-matches": "No events match the selected filters.", diff --git a/styles/styles.scss b/styles/styles.scss index 5c728747..3ef12d23 100644 --- a/styles/styles.scss +++ b/styles/styles.scss @@ -12,6 +12,7 @@ @import '../components/date-time-chip/date-time-chip'; @import '../components/event-detail/event-detail'; @import '../components/event-detail/event-detail-wrapper'; +@import '../components/event-filter/event-filter'; @import '../components/events-list/events-list'; @import '../components/footer/footer'; @import '../components/header/header'; @@ -37,4 +38,4 @@ @import '../components/play-link/play-link'; -@import '../components/section-divider/section-divider'; \ No newline at end of file +@import '../components/section-divider/section-divider'; diff --git a/tests/events-list.test.jsx b/tests/events-list.test.jsx new file mode 100644 index 00000000..173a52df --- /dev/null +++ b/tests/events-list.test.jsx @@ -0,0 +1,61 @@ +import { fireEvent, render, screen } from '@testing-library/react' + +import EventsList from '../components/events-list/EventsList' + +const baseEvent = { + formattedDate: { + date: 'May 14', + startTime: { utc: '7:00 pm', pt: '12:00 pm' }, + endTime: { utc: '8:00 pm', pt: '1:00 pm' }, + timeDisplay: 'specific', + }, + language: 'English', + location: 'Virtual', + userName: 'Maintainer Month', + userLink: 'https://github.com/github/maintainermonth', + link: '/schedule/test-event', + linkUrl: 'https://github.com/github/maintainermonth', + metaDesc: 'A test event.', +} + +const events = [ + { + ...baseEvent, + slug: 'meetup-event', + title: 'Maintainer meetup', + type: 'meetup', + }, + { + ...baseEvent, + slug: 'workshop-event', + title: 'Maintainer workshop', + type: 'workshop', + }, +] + +describe('EventsList filters', () => { + test('filters schedule cards by event type and restores all events', () => { + render(