Timeline: add Secret Scanning event stories (Phase 2)

packages/react/src/Timeline/Timeline.secret-scanning.features.stories.module.css

@@ -0,0 +1,71 @@
+.RealisticTimeline {
+  /* GitHub renders the timeline at most 1012px wide in product surfaces. */
+  max-width: 1012px;
+}
+
+/* Story-only scaffolding: each variant is wrapped in its own <section> with a
+   small caption heading ABOVE the event, so the event row itself (badge +
+   inline actor + body) renders exactly as it would in product — the caption
+   never sits inside Timeline.Body. Variants stay scannable like a Figma
+   component set. Not part of the faithful event. */
+.Variant {
+  margin-bottom: var(--base-size-24);
+}
+
+.VariantLabel {
+  margin: 0 0 var(--base-size-4);
+  font-size: var(--text-body-size-small);
+  font-weight: var(--base-text-weight-semibold);
+  color: var(--fgColor-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+/* System "GitHub" actor — live `AlertTimeline.tsx` `TimelineItemBody` renders
+   `<MarkGithubIcon /> <span class="ml-1 text-bold">GitHub</span>` (no avatar)
+   when `isGitHubActor`. This class spaces the leading octicon. */
+.ActorIcon {
+  vertical-align: middle;
+  margin-right: var(--base-size-4);
+}
+
+/* Bold actor name, mirroring the live `text-bold` span. Shared by the system
+   "GitHub" label and the user `display_login` (live `UserComponent` renders the
+   login as bold TEXT, not a link). */
+.ActorName {
+  font-weight: var(--base-text-weight-semibold);
+  color: var(--fgColor-default);
+  margin-right: var(--base-size-4);
+}
+
+/* Inline user-actor avatar in the body. Live `UserComponent` renders a 16px
+   CIRCLE `GitHubAvatar` followed by the bold login. */
+.InlineAvatar {
+  vertical-align: middle;
+  margin-right: var(--base-size-4);
+}
+
+/* Optional comment sub-row. Live `TimelineItemBody` renders a small indented
+   block below the body: a 12px muted `CommentIcon` + f6 comment text. Driven by
+   `resolution.comment` / `exemption_request.requester_comment` /
+   `exemption_response.reviewer_comment`. */
+.CommentRow {
+  display: flex;
+  align-items: center;
+  margin-top: var(--base-size-4);
+  font-size: var(--text-body-size-small);
+  color: var(--fgColor-muted);
+}
+
+.CommentRowIcon {
+  margin-right: var(--base-size-4);
+  color: var(--fgColor-muted);
+}
+
+/* Muted relative timestamp. The live secret-scanning `TimelineItemBody` renders
+   a plain `RelativeTime` (no link wrapper) — muted text only, matching the
+   Dependabot timeline (and a deliberate difference from the Issues `Ago`
+   deep-link). */
+.Timestamp {
+  color: var(--fgColor-muted);
+}