Add Timeline comment-card Storybook stories (Issues surface)

[janmaarten-a11y]

Part of github/primer#6663 (Phase 2).

Adds Storybook Features stories that recreate GitHub's timeline comment cards using Primer React. These are the comment events of the Issues surface. They complement the badge-row Issue events (#8070) and the Dependabot alert events (#8071). The stories here are the Issue-sourced (React) comment versions — the PR-sourced (ERB) comment version will come later with the future PR surface.

What's included

A new packages/react/src/Timeline/Timeline.comments.features.stories.tsx (+ co-located CSS module) under the title Components/Timeline/Events/Issues, so the comment stories nest beside the badge-row Issue stories. The five variants are all built on a small, file-local CommentCard helper (not exported), so each story stays a short <CommentCard … />:

• CommentStandard — a standard user comment (circle avatar, Author badge, reactions row)
• CommentBot — a GitHub App bot comment (square avatar, bot label)
• CommentCopilot — a Copilot comment (square avatar, AI label, name renders as "Copilot")
• CommentDependabot — a Dependabot comment (square avatar, bot label)
• CommentViaApp — a user comment posted via a GitHub App (the "– with {app}" timestamp suffix)

Deferred (not in this PR): threaded review replies, embedded-in-thread comments, and minimized/collapsed states. The CommentCard helper already has an isReply prop wired (drops the container border/caret/gutter avatar) so those can be added later without reshaping the helper.

Source of truth

Recreated from the live React components in github-ui packages/commenting (ActivityHeader, CommentAuthorAssociation, CommentSubjectAuthor, IssueComment). Key denotations were verified against live, not invented:

• Actor labels are lowercase bot / AI — from LABELS.authorLabel(isBot, isCopilot) (bot for bots/Dependabot, AI for Copilot, name shown as "Copilot"). Not "Bot"/"Copilot".
• Author badge is the subject-author badge (CommentSubjectAuthor, LABELS.commentAuthor), shown when the commenter opened the issue — distinct from association values (Member/Owner/Collaborator/Contributor).
• via-app suffix is the literal "– with {app}" appended to the timestamp line, with the app name as an inline (underlined) link.

Avatar shape decision

• Users → circle, Copilot, generic bots, and Dependabot → square.
• This is faithful to github.com, where bot/app accounts (github-actions, Dependabot) have square avatars by account type — the square shape is set upstream of the comment component, so the live rendered result is square. The React ActivityHeader only forces square={isCopilot}, which avoids overriding an already-square bot avatar; it does not make bots render circular in production.
• Square also keeps Dependabot consistent with the Dependabot badge-row surface (Add Timeline Dependabot Features stories (Phase 2 Dependabot surface) #8071).
• This rationale is captured as inline comments on the CommentBot/CommentDependabot variants so it isn't accidentally "fixed" back to circle.

Faithfulness note

There is no Primer "Comment" primitive, so the card shell, header bar, speech-bubble caret, and reaction pills are composed from Primer primitives (Avatar, Link, Label, RelativeTime, IconButton) plus a scoped CSS module. This surface is intentionally a recognizable GitHub comment card, less pixel-faithful than the badge-row surfaces.

Slots

Uses Timeline.Item + Timeline.Avatar for the gutter/rail (the comment uses the gutter avatar, no Timeline.Badge). A file-scoped primer_react_timeline_list_semantics decorator renders every story in the future-state list-semantics DOM (<ol>/<li>; refs #7910).

Storybook-only

Like the other Phase 2 event surfaces, 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.

Changelog

New

• Storybook Features stories for Timeline comment cards on the Issues surface (Timeline.comments.features.stories.tsx): CommentStandard, CommentBot, CommentCopilot, CommentDependabot, CommentViaApp.

Changed

• N/A

Removed

• N/A

Rollout strategy

• Patch release
• Minor release
• Major release
• None; Storybook-only stories — no changes to the published package, so a skip changeset label is applied.

Testing & Reviewing

• prettier, eslint, and stylelint are clean on the new files; 0 new TypeScript errors.
• The a11y in-text-link rule is applied (author link bold; timestamp and inline body/app links underlined), so the high-contrast axe check should pass.
• Review in Storybook under Components → Timeline → Events → Issues (the Comment* stories).

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: e9fc3b5

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