Timeline: add Secret Scanning event stories (Phase 2)

[janmaarten-a11y]

Summary

Adds Storybook Features stories that recreate GitHub's live Secret Scanning alert timeline events using the Primer Timeline component and its compositional slots. This is the Secret Scanning surface — the first Security surface — of Phase 2 of the Timeline events effort (github/primer#6663). The Issues surface (#8070), Issue comment cards (#8072), and the Dependabot alert surface (#8071) already landed; Code Scanning and License Compliance will follow as separate Security surfaces.

Unlike Dependabot (which is server-rendered ERB), Secret Scanning is fully React and its live timeline already composes Primer React Timeline + Timeline.Badge variant=, so the events map cleanly — the badge colors, icons, and actor treatments translate almost one-to-one.

All examples live in a single new file, Timeline.secret-scanning.features.stories.tsx (+ a .module.css), exported under the title Components/Timeline/Events/Secret Scanning — one story export per event group.

The 7 event groups (29 variants total)

Group	Variants	Badge(s)	Actor
EventCreated	1 — Created	shield on solid success (green)	GitHub (system)
EventResolution	8 — 7 closed reasons + Reopened	shield-check on solid done (revoked) / bare shield-slash (other 6) / sync on solid success (reopened)	User
EventBypass	3 — Bypassed / requested / approved	bare alert / comment / check-circle	User
EventValidityChange	6 — active/inactive/unknown × automated/manual	alert on solid danger (active) / bare skip (inactive) / alert on solid attention (unknown)	GitHub (automated) / User (manual)
EventReport	1 — Reported	bare shield-check	User
EventClosureRequest	5 — requested (reviewer + requester views) / approved / denied / cancelled	bare comment / check-circle / x / skip	User
EventAssignment	5 — self-assigned / assigned other / removed own / unassigned other / assigned+unassigned	bare person	User (+ assignee avatars)

Source of truth

These stories were recreated from the live React implementation in github/github-ui, package packages/secret-scanning-alerts/. The authoritative dispatch is the switch (event.type) in components/show/AlertTimeline.tsx; per-event copy/badges/actors were read directly from it and its helpers (helper.ts, components/shared/UserComponent.tsx, components/show/closures/ClosureRequestReviewButtons.tsx) and translated faithfully into Primer React. There is no ERB secret-scanning timeline — the migration to React is complete.

We verified the live render path rather than trusting the Figma audit blindly. The notable resolutions:

• The REVOCATION event type is dead code. TimelineEventType.Revocation = 'REVOCATION' exists in the enum but has no case in the switch, so it renders nothing — it is intentionally not built.
• The 7 closed resolution reasons come from live resolutionText() (revoked, false positive, won't fix, used in tests, pattern deleted, pattern edited, ignored by configuration). Only revoked gets the special purple done / shield-check badge; the other six use the bare default badge with shield-slash. Reasons render as bold text, not links.
• Report is attributed to the user, not the GitHub system actor — the Report case does not pass isGitHubActor (a point the audit flagged as uncertain).
• The closure-request right-controls are "Review request" (primary) and "Cancel request" (invisible) — confirmed from ClosureRequestReviewButtons.tsx. They are driven by two independent, viewer-specific payload flags (show_closure_request_review_buttons for reviewers, show_closure_request_cancel_button for the requester), so they are mutually exclusive per viewer; both are shown as separate variants.
• The system "GitHub" actor (MarkGithubIcon + bold "GitHub", no avatar) is used by Creation unconditionally and by automated validity changes (!event.actor); manual validity changes and every other event use the user actor.

Slots used (Phase 1 slots)

• Inline actor avatar in Timeline.Body for these badge-row events — a 16px circle user avatar + bold login (UserActor, mirroring live UserComponent), or the system GitHubActor (MarkGithubIcon + bold "GitHub", no avatar). Badge-row events do not use the gutter Timeline.Avatar.
• Timeline.Actions (right-controls slot, added in Add Timeline.Actions sub-component #7886) for the closure-request "Review request" / "Cancel request" buttons.
• Timeline.Break is rendered immediately before the Reopened resolution variant, mirroring the live sibling-selector placement.
• A shared, file-local comment sub-row helper (CommentSubRow: 12px muted comment icon + small text) renders the optional resolution.comment / requester / reviewer comment under Resolution closures and the delegated-closure events.

Badge note

Events whose live code passes a solid variant (success / done / danger / attention) use Timeline.Badge variant= directly. Events whose live code passes variant={undefined} (all the "gray" events) render as a bare Timeline.Badge — a muted icon on a borderless circle with no solid fill — matching the Dependabot precedent (#8071), not the Issues --timelineBadge-bgColor solid-gray hook. None of the secret-scanning gray events is a solid-gray badge.

Accessibility

Secret Scanning renders no in-text links — the live UserComponent renders the login as a bold text-bold span (hovercard attrs only, not a profile link), and resolution reasons are bold text. So the axe link-in-text-block high-contrast rule (which required the inline/bold treatment on the Dependabot surface) is never exercised here. The header doc notes that any future in-text link must still use inline/bold.

Scope & conventions

• Each variant is wrapped in a story-only <section> with a small caption <h3> above the event, so the event row itself renders exactly as it would in product (the caption never sits inside Timeline.Body).
• Every story is wrapped in a file-scoped FeatureFlags decorator enabling primer_react_timeline_list_semantics (the future-state <ol>/<li> DOM; refs Timeline: Use list semantics for screen reader navigation #7910).
• The feature-gated delegated groups (delegated bypass, delegated closure) carry a brief inline note that they only render when the org feature is enabled.
• Storybook-only by design. These are intentionally not wired into components-json / the primer.style docs page (not added to Timeline.docs.json or build.ts) — individual timeline events are not consumer-facing components.
• The future event-category data-* filtering taxonomy (github/primer#6663) is intentionally deferred; the hook location is documented in the file header.

Changelog

New

• Timeline.secret-scanning.features.stories.tsx and Timeline.secret-scanning.features.stories.module.css — Storybook Features stories recreating the Secret Scanning alert timeline events (7 groups, 29 variants).

Changed

• None.

Removed

• None.

Rollout strategy

• None; if selected, include a brief description as to why

Stories-only change — no consumer-facing package code is added or modified, so no changeset is needed (the skip changeset label is applied).

Testing & Reviewing

• prettier, eslint, and stylelint all clean; type-check passes with 0 new errors (the pre-existing @primer/doc-gen baseline error in script/components-json/build.ts is unchanged).
• Every group was verified against the live AlertTimeline.tsx switch and its helpers; where the Figma audit was uncertain (dead REVOCATION, closure-reason set, Report attribution, Review/Cancel buttons), the live code won.
• Browse the stories under Components/Timeline/Events/Secret Scanning in Storybook to review each group.

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github-ui

[changeset-bot]

⚠️ No Changeset found

Latest commit: b348170

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[Copilot]

Pull request overview

Adds a new Storybook “Features” surface under Components/Timeline/Events/Secret Scanning that recreates GitHub’s Secret Scanning alert timeline event rows using Primer React Timeline and its Phase 1 compositional slots (inline actor treatment + optional Timeline.Actions).

Changes:

• Added Timeline.secret-scanning.features.stories.tsx with 7 event-group story exports (Created, Resolution, Bypass, Validity change, Report, Delegated closure request, Assignment).
• Added a co-located CSS module to provide story-only scaffolding (variant sections/labels) and to mirror GitHub’s inline actor and sub-row styling.

Show a summary per file

File	Description
packages/react/src/Timeline/Timeline.secret-scanning.features.stories.tsx	Introduces Secret Scanning timeline event stories and helpers (actors, timestamp, comment sub-row), including Timeline.Actions variants for delegated closure requests.
packages/react/src/Timeline/Timeline.secret-scanning.features.stories.module.css	Adds story scaffolding and shared styles for inline actors, comment sub-rows, and muted timestamps.

Review details

• Files reviewed: 2/2 changed files
• Comments generated: 2
• Review effort level: Low