Add schedule event type filters

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 (
+    <div className="event-filter" aria-label={getLiteral('schedule:filter-label')}>
+      <span className="event-filter__label">
+        {getLiteral('schedule:filter-label')}
+      </span>
+      <div className="event-filter__options">
+        <button
+          type="button"
+          className="event-filter__option"
+          data-active={selectedType === 'all' ? true : undefined}
+          aria-pressed={selectedType === 'all'}
+          onClick={() => onSelectType('all')}
+        >
+          {getLiteral('schedule:filter-all')}
+          <span className="event-filter__count">{totalEvents}</span>
+        </button>
+        {eventTypes.map((type) => (
+          <button
+            key={type.value}
+            type="button"
+            className="event-filter__option"
+            data-active={selectedType === type.value ? true : undefined}
+            aria-pressed={selectedType === type.value}
+            onClick={() => onSelectType(type.value)}
+          >
+            {TYPES[type.value].label}
+            <span className="event-filter__count">{type.count}</span>
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default EventFilter

components/event-filter/event-filter.scss

@@ -0,0 +1,61 @@
+.event-filter {
+  display: flex;
+  flex-direction: column;
+  gap: spacing(1);
+  margin-top: spacing(3);
+
+  &__label {
+    @extend %subtitle-2;
+    color: $white-80;
+  }
+
+  &__options {
+    display: flex;
+    flex-wrap: wrap;
+    gap: spacing(1);
+  }
+
+  &__option {
+    display: inline-flex;
+    align-items: center;
+    gap: spacing(1);
+    padding: spacing(1) spacing(1.5);
+    border: 1px solid $white-40;
+    border-radius: 27px;
+    background: transparent;
+    color: $white-80;
+    @extend %subtitle-2;
+    cursor: pointer;
+    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+
+    &:hover,
+    &:focus-visible,
+    &[data-active] {
+      background: $white;
+      border-color: $white;
+      color: $purple;
+    }
+
+    &:focus-visible {
+      outline: 2px solid $green;
+      outline-offset: 2px;
+    }
+  }
+
+  &__count {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.5em;
+    padding: 0 spacing(0.5);
+    border-radius: 999px;
+    background: $white-20;
+    font-size: 0.75rem;
+  }
+
+  &__option[data-active] &__count,
+  &__option:hover &__count,
+  &__option:focus-visible &__count {
+    background: rgba($purple, 0.12);
+  }
+}

components/events-list/EventsList.jsx

@@ -1,3 +1,4 @@
+import { useMemo, useState } from 'react'
 import md from 'markdown-it'
 import clsx from 'clsx'
 
@@ -9,13 +10,36 @@ import { getLiteral } from '../../common/i18n'
 import * as ROUTES from '../../common/routes'
 
 import DateTimeChip from '../date-time-chip/DateTimeChip'
+import EventFilter from '../event-filter/EventFilter'
+import TYPES from '../event-type-chip/types'
 import EventTypeChip from '../event-type-chip/EventTypeChip'
 import PlayLink from '../play-link/PlayLink'
 import Chip from '../chip/Chip'
 const EventsList = ({ events }) => {
   const dateLabel = (event) =>
     `${event.formattedDate.date} to ${event.formattedDate.endDate}`
 
+  const [selectedType, setSelectedType] = useState('all')
+
+  const eventTypeOptions = useMemo(() => {
+    const counts = events.reduce((acc, event) => {
+      acc[event.type] = (acc[event.type] || 0) + 1
+      return acc
+    }, {})
+
+    return Object.keys(TYPES)
+      .filter((type) => counts[type])
+      .map((type) => ({
+        value: type,
+        count: counts[type],
+      }))
+  }, [events])
+
+  const filteredEvents =
+    selectedType === 'all'
+      ? events
+      : events.filter((event) => event.type === selectedType)
+
   return (
     <section className="events-list">
       <div className="events-list__header">
@@ -50,15 +74,22 @@ const EventsList = ({ events }) => {
               {getLiteral('schedule:ics-download')}
             </a>
           </div>
+          <EventFilter
+            eventTypes={eventTypeOptions}
+            selectedType={selectedType}
+            onSelectType={setSelectedType}
+            totalEvents={events.length}
+          />
         </div>
       </div>
 
       <div className="events-list__grid">
-        {events.map((event, index) => (
+        {filteredEvents.map((event, index) => (
           <div
             key={event.slug}
             className={clsx('events-list__card', {
-              'same-date': index > 0 && event.date === events[index - 1].date,
+              'same-date':
+                index > 0 && event.date === filteredEvents[index - 1].date,
             })}
           >
             <div className="events-list__date">
@@ -112,7 +143,7 @@ const EventsList = ({ events }) => {
         ))}
       </div>
 
-      {events.length === 0 && (
+      {events.length === 0 ? (
         <p className="events-list__empty">
           {getLiteral('schedule:empty-no-events')}{' '}
           <a
@@ -123,7 +154,13 @@ const EventsList = ({ events }) => {
             {getLiteral('schedule:empty-host-link')}
           </a>
         </p>
-      )}
+      ) : null}
+
+      {events.length > 0 && filteredEvents.length === 0 ? (
+        <p className="events-list__empty">
+          {getLiteral('schedule:empty-no-matches')}
+        </p>
+      ) : null}
     </section>
   )
 }

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.",

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';
+@import '../components/section-divider/section-divider';

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(<EventsList events={events} />)
+
+    expect(screen.getByRole('button', { name: /All event types 2/i })).toBeTruthy()
+    expect(screen.getByRole('button', { name: /Meetup 1/i })).toBeTruthy()
+    expect(screen.getByRole('button', { name: /Workshop 1/i })).toBeTruthy()
+    expect(screen.getByText('Maintainer meetup')).toBeTruthy()
+    expect(screen.getByText('Maintainer workshop')).toBeTruthy()
+
+    fireEvent.click(screen.getByRole('button', { name: /Meetup 1/i }))
+
+    expect(screen.getByText('Maintainer meetup')).toBeTruthy()
+    expect(screen.queryByText('Maintainer workshop')).toBeNull()
+
+    fireEvent.click(screen.getByRole('button', { name: /Workshop 1/i }))
+
+    expect(screen.queryByText('Maintainer meetup')).toBeNull()
+    expect(screen.getByText('Maintainer workshop')).toBeTruthy()
+
+    fireEvent.click(screen.getByRole('button', { name: /All event types 2/i }))
+
+    expect(screen.getByText('Maintainer meetup')).toBeTruthy()
+    expect(screen.getByText('Maintainer workshop')).toBeTruthy()
+  })
+})