Skip to content

Timeline: tag event stories with taxonomy data-* attributes (all five surfaces) #8216

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
janmaarten-a11y wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

Timeline: tag event stories with taxonomy data-* attributes (all five surfaces) #8216

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
04f26fc
Timeline: tag License Compliance event stories with taxonomy data-* a…
janmaarten-a11y Jul 22, 2026
620253e
Timeline: tag Code Scanning, Dependabot, Secret Scanning, and Issues …
janmaarten-a11y Jul 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 46 additions & 15 deletions packages/react/src/Timeline/Timeline.code-scanning.features.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import {
UserActor,
VariantSection,
} from './internal/timelineStoryHelpers'
import {CODE_SCANNING_TAXONOMY, actorTypeForLogin, toEventDataAttributes, type CodeScanningEventType} from './taxonomy'
import classes from './Timeline.code-scanning.features.stories.module.css'

/**
Expand Down Expand Up @@ -172,6 +173,26 @@ const ConfigPill = ({category}: {category: string}) => (
*/
const SubRow = ({children}: {children: React.ReactNode}) => <div className={classes.SubRow}>{children}</div>

/**
* Per-row taxonomy `data-*` attributes (Phase 3 tagging, github/primer#6664,
* epic #6654). Projects a Code Scanning leaf event type through the shared
* `toEventDataAttributes` serializer from the taxonomy module (primer/react#8180),
* mirroring the License Compliance pilot (primer/react#8216). `category` and
* `visibility` are derived FROM `CODE_SCANNING_TAXONOMY` so the story never
* hand-maintains them. Pass the row's rendered `UserActor` login for USER events
* (resolves `data-actor-type` via `actorTypeForLogin`); omit it for SYSTEM rows
* so `data-actor-type` is left off entirely. Spread the result onto each
* `Timeline.Item`.
*/
const codeScanningAttrs = (type: CodeScanningEventType, login?: string) =>
toEventDataAttributes({
scope: 'code-scanning',
type,
category: CODE_SCANNING_TAXONOMY[type].category,
visibility: CODE_SCANNING_TAXONOMY[type].visibility,
actorType: login ? actorTypeForLogin(login) : undefined,
})

export default {
title: 'Components/Timeline/Events/Code Scanning',
component: Timeline,
Expand Down Expand Up @@ -219,7 +240,7 @@ export const EventDetected = () => (
sub-row, and a right-aligned tool-version Label (Timeline.Actions). */}
<VariantSection label="First detected in commit">
<Timeline aria-label="Code scanning alert timeline">
<Timeline.Item>
<Timeline.Item {...codeScanningAttrs('detected')}>
<Timeline.Badge>
<Octicon icon={ShieldIcon} />
</Timeline.Badge>
Expand Down Expand Up @@ -253,7 +274,7 @@ export const EventDetected = () => (
card — `show_timeline_commit?` is false for this event). */}
<VariantSection label="Appeared in branch">
<Timeline aria-label="Code scanning alert timeline">
<Timeline.Item>
<Timeline.Item {...codeScanningAttrs('appeared')}>
<Timeline.Badge>
<Octicon icon={GitBranchIcon} />
</Timeline.Badge>
Expand Down Expand Up @@ -283,7 +304,7 @@ export const EventDetected = () => (
{category}" pill (rendered when the alert has more than one category). */}
<VariantSection label="Reappeared in branch">
<Timeline aria-label="Code scanning alert timeline">
<Timeline.Item>
<Timeline.Item {...codeScanningAttrs('reappeared')}>
<Timeline.Badge>
<Octicon icon={ShieldIcon} />
</Timeline.Badge>
Expand Down Expand Up @@ -314,13 +335,20 @@ export const EventDetected = () => (
* Config-deleted renders the analysis category as an inline subtle mono pill
* (`MonoPill`); when the category is empty the live ERB substitutes "API
* Upload".
*
* TAXONOMY (github/primer#6664): the two "Fixed in branch" rows are the
* ALERT_CLOSED_BECAME_FIXED wire event and carry `data-event-type="fixed"`. The
* two "Configuration deleted" rows are visually grouped under Fixed here, but the
* taxonomy catalog folds their ALERT_CLOSED_BECAME_OUTDATED wire event into
* `closed` (a SYSTEM closure), so those rows carry `data-event-type="closed"`.
* Both are system events with no actor, so neither emits `data-actor-type`.
*/
export const EventFixed = () => (
<RealisticTimeline>
{/* Fixed — selected ref → SOLID purple shield-check */}
<VariantSection label="Fixed in branch (current ref)">
<Timeline aria-label="Code scanning alert timeline">
<Timeline.Item>
<Timeline.Item {...codeScanningAttrs('fixed')}>
<Timeline.Badge variant="done">
<Octicon icon={ShieldCheckIcon} />
</Timeline.Badge>
Expand All @@ -335,7 +363,7 @@ export const EventFixed = () => (
{/* Fixed — non-selected ref → bare default check */}
<VariantSection label="Fixed in branch (other ref)">
<Timeline aria-label="Code scanning alert timeline">
<Timeline.Item>
<Timeline.Item {...codeScanningAttrs('fixed')}>
<Timeline.Badge>
<Octicon icon={CheckIcon} />
</Timeline.Badge>
Expand All @@ -348,9 +376,12 @@ export const EventFixed = () => (
</VariantSection>

{/* Config deleted — selected ref → SOLID purple shield-check */}
{/* Config-deletion is the ALERT_CLOSED_BECAME_OUTDATED wire event, which the
taxonomy folds into `closed` (system closure), not `fixed` — so this row
carries data-event-type="closed" despite its visual "Fixed" grouping. */}
<VariantSection label="Configuration deleted (current ref)">
<Timeline aria-label="Code scanning alert timeline">
<Timeline.Item>
<Timeline.Item {...codeScanningAttrs('closed')}>
<Timeline.Badge variant="done">
<Octicon icon={ShieldCheckIcon} />
</Timeline.Badge>
Expand All @@ -366,7 +397,7 @@ export const EventFixed = () => (
{/* Config deleted — non-selected ref → bare default check */}
<VariantSection label="Configuration deleted (other ref)">
<Timeline aria-label="Code scanning alert timeline">
<Timeline.Item>
<Timeline.Item {...codeScanningAttrs('closed')}>
<Timeline.Badge>
<Octicon icon={CheckIcon} />
</Timeline.Badge>
Expand Down Expand Up @@ -398,7 +429,7 @@ export const EventClosedByUser = () => (
{/* Closed as false positive — with a resolution-note sub-row */}
<VariantSection label="Closed as false positive">
<Timeline aria-label="Code scanning alert timeline">
<Timeline.Item>
<Timeline.Item {...codeScanningAttrs('closed', 'monalisa')}>
<Timeline.Badge variant="danger">
<Octicon icon={ShieldXIcon} />
</Timeline.Badge>
Expand All @@ -415,7 +446,7 @@ export const EventClosedByUser = () => (
{/* Closed as used in tests */}
<VariantSection label="Closed as used in tests">
<Timeline aria-label="Code scanning alert timeline">
<Timeline.Item>
<Timeline.Item {...codeScanningAttrs('closed', 'monalisa')}>
<Timeline.Badge variant="danger">
<Octicon icon={ShieldXIcon} />
</Timeline.Badge>
Expand All @@ -431,7 +462,7 @@ export const EventClosedByUser = () => (
{/* Closed as won't fix */}
<VariantSection label="Closed as won't fix">
<Timeline aria-label="Code scanning alert timeline">
<Timeline.Item>
<Timeline.Item {...codeScanningAttrs('closed', 'monalisa')}>
<Timeline.Badge variant="danger">
<Octicon icon={ShieldXIcon} />
</Timeline.Badge>
Expand All @@ -448,7 +479,7 @@ export const EventClosedByUser = () => (
`resolution == :NO_RESOLUTION`. */}
<VariantSection label="Closed (no resolution)">
<Timeline aria-label="Code scanning alert timeline">
<Timeline.Item>
<Timeline.Item {...codeScanningAttrs('closed', 'monalisa')}>
<Timeline.Badge variant="danger">
<Octicon icon={ShieldXIcon} />
</Timeline.Badge>
Expand All @@ -475,7 +506,7 @@ export const EventReopened = () => (
<Examples>
<VariantSection label="Reopened">
<Timeline aria-label="Code scanning alert timeline">
<Timeline.Item>
<Timeline.Item {...codeScanningAttrs('reopened', 'monalisa')}>
<Timeline.Badge variant="success">
<Octicon icon={DotFillIcon} />
</Timeline.Badge>
Expand Down Expand Up @@ -510,7 +541,7 @@ export const EventDismissalRequested = () => (
<Examples>
<VariantSection label="Requested to dismiss">
<Timeline aria-label="Code scanning alert timeline">
<Timeline.Item>
<Timeline.Item {...codeScanningAttrs('dismissal_requested', 'monalisa')}>
<Timeline.Badge>
<Octicon icon={CommentIcon} />
</Timeline.Badge>
Expand Down Expand Up @@ -550,7 +581,7 @@ export const EventDismissalReviewed = () => (
{/* Approved — check icon + reviewer-comment sub-row */}
<VariantSection label="Approved dismissal">
<Timeline aria-label="Code scanning alert timeline">
<Timeline.Item>
<Timeline.Item {...codeScanningAttrs('dismissal_reviewed', 'monalisa')}>
<Timeline.Badge>
<Octicon icon={CheckIcon} />
</Timeline.Badge>
Expand All @@ -567,7 +598,7 @@ export const EventDismissalReviewed = () => (
{/* Denied — x icon */}
<VariantSection label="Denied dismissal">
<Timeline aria-label="Code scanning alert timeline">
<Timeline.Item>
<Timeline.Item {...codeScanningAttrs('dismissal_reviewed', 'monalisa')}>
<Timeline.Badge>
<Octicon icon={XIcon} />
</Timeline.Badge>
Expand Down
Loading
Loading