Timeline: add Code Scanning event stories (Phase 2)

[janmaarten-a11y]

Summary

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

Like Dependabot (and unlike Secret Scanning, which is fully React), Code Scanning is server-rendered ERB — there is no React timeline anywhere in github/github-ui. So these events were translated faithfully from the live ERB ViewComponents into Primer React, the same approach used for the Dependabot surface (#8071).

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

The 6 event groups (15 variants total)

Group	Variants	Badge(s)	Actor
EventDetected	3 — First detected / Appeared in branch / Reappeared	bare shield / bare git-branch (default gray)	none (system)
EventFixed	4 — Fixed × (current/other ref) + Config-deleted × (current/other ref)	shield-check on solid done (purple, selected ref) / bare check (other ref)	none (system)
EventClosedByUser	4 — false positive / used in tests / won't fix / no resolution	shield-x on solid danger (red)	User
EventReopened	1 — Reopened	dot-fill on solid success (green)	User
EventDismissalRequested	1 — Requested to dismiss	bare comment (default gray)	User
EventDismissalReviewed	2 — Approved / Denied	bare check / bare x (default gray)	User

Source of truth

These stories were recreated from the live ERB implementation in github/github. The authoritative dispatch is the case timeline_event.type in app/components/code_scanning/timeline_component.html.erb; per-event copy, badges, and actors were read directly from it, the shared timeline_item_component.html.erb, and the helpers (code_scanning_helper.rb, timeline_component.rb) and translated faithfully into Primer React. There is no React Code Scanning timeline — this surface is server-rendered.

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

• The 3 closure reasons come from live alert_closure_reasons in code_scanning_helper.rb — False positive, Used in tests, Won't fix — and alert_closure_reason_description downcases them, so they render as "false positive" / "used in tests" / "won't fix". Closed-by-user bolds the reason; the :NO_RESOLUTION path (just "closed this") is also built.
• The Fixed / Config-deleted badge is conditional. When the event's ref is the currently selected ref (ref_name_bytes == @selected_ref) the badge is shield-check on solid done (purple); otherwise it is a plain check on the bare default badge. Both branches are shown for each of the two events.
• System events render with NO actor — the entire Detected family plus Fixed/Config-deleted use bold body text only (item.with_body(font_weight: :bold)), no avatar or link.
• The two dismissal events are feature-gated on delegated_dismissal_enabled?, and the "Review request" button is further gated on timeline_event.show_dismissal_actions — both gates are noted inline. The button label "Review request" was confirmed from dismissal_review_dialog_component.html.erb (a Primer::Alpha::Dialog show-button, scheme: :primary, size: :small).

Slots

• No-actor system events (Detected, Fixed, Config-deleted) render as bold body text; user events use a UserActor helper — a circle avatar + bold login profile link.
• Timeline.Actions (right-controls slot, added in Add Timeline.Actions sub-component #7886) carries the right-aligned tool-version Label (scheme: :secondary, on any row carrying a tool_version) and the Dismissal "Review request" button.

Badge note

Gray/default events render as a bare Timeline.Badge (no solid fill, no --timelineBadge-bgColor hook) — the whole Detected group, Fixed/Config-deleted on a non-selected ref, and both Dismissal events. Only Fixed-on-selected-ref (purple/done), Closed-by-user (red/danger), and Reopened (green/success) are solid variant= badges — matching the live with_badge(bg:) model, where only events that pass an explicit background: get a solid color.

Scope & conventions

• Storybook-only by design — not added to Timeline.docs.json or build.ts. Individual timeline events are not consumer-facing components.
• File-scoped future-state list-semantics decorator (primer_react_timeline_list_semantics, refs Timeline: Use list semantics for screen reader navigation #7910) so every story renders in the <ol>/<li> DOM the timeline will ship.
• Per-variant <section><h3 caption> scaffolding above each row so variants stay scannable like a Figma component set, without polluting Timeline.Body.
• Deferred data-* event-category taxonomy (still open in github/primer#6663) — intentionally not baked in yet.
• Simplifications: the commit-card / path / workflow-run sub-rows are composed as small in-body blocks (the Dependabot / Secret Scanning precedent) rather than the full repos/scanning/commit ERB partials — noted in-code.

Accessibility

The UserActor profile link is bold — the bold weight is the non-color differentiator that satisfies the axe link-in-text-block rule (WCAG 1.4.1) in high-contrast themes, matching the live text-bold profile link and the Issues / Dependabot precedent.

Changelog

Stories-only change — no consumer-facing component or API change, so no changeset (the skip changeset label is applied).

Rollout

No rollout concerns — adds Storybook examples only; ships no runtime code.

Testing

• prettier — clean
• eslint — clean
• stylelint — clean
• tsc — 0 new type errors (the only repo tsc error is pre-existing in script/components-json/build.ts)

Merge checklist

• Stories render under Components/Timeline/Events/Code Scanning
• All 6 event groups translated and verified against the live ERB
• prettier / eslint / stylelint clean, 0 new tsc errors
• skip changeset + component: Timeline labels applied
• Review of copy / badge / actor fidelity

[changeset-bot]

⚠️ No Changeset found

Latest commit: 9b8a258

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 set of Storybook “Features” stories for Code Scanning alert timeline events, demonstrating how to compose GitHub-like timeline rows using Primer React Timeline slots (including Timeline.Actions) and a co-located CSS Module for faithful styling.

Changes:

• Added Timeline.code-scanning.features.stories.tsx implementing Code Scanning event-group stories (Detected, Fixed/Config-deleted, Closed by user, Reopened, Dismissal requested/reviewed) with shared helpers.
• Added Timeline.code-scanning.features.stories.module.css to style story-only scaffolding and GitHub-like sub-row/link treatments.

Show a summary per file

File	Description
packages/react/src/Timeline/Timeline.code-scanning.features.stories.tsx	New Storybook feature stories for Code Scanning timeline events, including helper components and per-variant scaffolding.
packages/react/src/Timeline/Timeline.code-scanning.features.stories.module.css	CSS Module supporting realistic layout, sub-rows, and link/badge-related styling for the Code Scanning stories.

Review details

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