Skip to content

Timeline: tag event stories with taxonomy data-* attributes (helper, all five surfaces, gap fixes) #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

Open
janmaarten-a11y wants to merge 7 commits into
base: main
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c4db91c
Timeline: tag License Compliance event stories with taxonomy data-* a…
janmaarten-a11y Jul 22, 2026
c9f61cc
Timeline: tag Code Scanning, Dependabot, Secret Scanning, and Issues …
janmaarten-a11y Jul 22, 2026
1135a78
refactor(Timeline): stage data-* helper in taxonomy/eventDataAttribut…
janmaarten-a11y Jul 24, 2026
e5e13b9
feat(Timeline): add SS reported leaf, classify GitHub actor as bot, d…
janmaarten-a11y Jul 24, 2026
574ac1a
Merge branch 'main' into janmaarten-a11y-timeline-lc-taxonomy-data-attrs
janmaarten-a11y Aug 4, 2026
92981fa
Restore Converted from draft issue story row (untagged)
janmaarten-a11y Aug 5, 2026
b250250
Potential fix for pull request finding
janmaarten-a11y Aug 5, 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
52 changes: 37 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 {eventDataAttributesFor} from './taxonomy'
import classes from './Timeline.code-scanning.features.stories.module.css'

/**
Expand Down Expand Up @@ -172,6 +173,17 @@ 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). Each `Timeline.Item` below projects its Code Scanning leaf event
* type through the shared `eventDataAttributesFor('code-scanning', <leaf>,
* login?)` helper (`./taxonomy`, primer/react#8180), mirroring the License
* Compliance pilot (primer/react#8216). `category` and `visibility` are derived
* FROM the catalog so the story never hand-maintains them. Pass the row's
* rendered `UserActor` login for USER events (resolves `data-actor-type`); omit
* it for SYSTEM rows so `data-actor-type` is left off entirely.
*/

export default {
title: 'Components/Timeline/Events/Code Scanning',
component: Timeline,
Expand Down Expand Up @@ -219,7 +231,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 {...eventDataAttributesFor('code-scanning', 'detected')}>
<Timeline.Badge>
<Octicon icon={ShieldIcon} />
</Timeline.Badge>
Expand Down Expand Up @@ -253,7 +265,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 {...eventDataAttributesFor('code-scanning', 'appeared')}>
<Timeline.Badge>
<Octicon icon={GitBranchIcon} />
</Timeline.Badge>
Expand Down Expand Up @@ -283,7 +295,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 {...eventDataAttributesFor('code-scanning', 'reappeared')}>
<Timeline.Badge>
<Octicon icon={ShieldIcon} />
</Timeline.Badge>
Expand Down Expand Up @@ -314,13 +326,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 {...eventDataAttributesFor('code-scanning', 'fixed')}>
<Timeline.Badge variant="done">
<Octicon icon={ShieldCheckIcon} />
</Timeline.Badge>
Expand All @@ -335,7 +354,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 {...eventDataAttributesFor('code-scanning', 'fixed')}>
<Timeline.Badge>
<Octicon icon={CheckIcon} />
</Timeline.Badge>
Expand All @@ -348,9 +367,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 {...eventDataAttributesFor('code-scanning', 'closed')}>
<Timeline.Badge variant="done">
<Octicon icon={ShieldCheckIcon} />
</Timeline.Badge>
Expand All @@ -366,7 +388,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 {...eventDataAttributesFor('code-scanning', 'closed')}>
<Timeline.Badge>
<Octicon icon={CheckIcon} />
</Timeline.Badge>
Expand Down Expand Up @@ -398,7 +420,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 {...eventDataAttributesFor('code-scanning', 'closed', 'monalisa')}>
<Timeline.Badge variant="danger">
<Octicon icon={ShieldXIcon} />
</Timeline.Badge>
Expand All @@ -415,7 +437,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 {...eventDataAttributesFor('code-scanning', 'closed', 'monalisa')}>
<Timeline.Badge variant="danger">
<Octicon icon={ShieldXIcon} />
</Timeline.Badge>
Expand All @@ -431,7 +453,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 {...eventDataAttributesFor('code-scanning', 'closed', 'monalisa')}>
<Timeline.Badge variant="danger">
<Octicon icon={ShieldXIcon} />
</Timeline.Badge>
Expand All @@ -448,7 +470,7 @@ export const EventClosedByUser = () => (
`resolution == :NO_RESOLUTION`. */}
<VariantSection label="Closed (no resolution)">
<Timeline aria-label="Code scanning alert timeline">
<Timeline.Item>
<Timeline.Item {...eventDataAttributesFor('code-scanning', 'closed', 'monalisa')}>
<Timeline.Badge variant="danger">
<Octicon icon={ShieldXIcon} />
</Timeline.Badge>
Expand All @@ -475,7 +497,7 @@ export const EventReopened = () => (
<Examples>
<VariantSection label="Reopened">
<Timeline aria-label="Code scanning alert timeline">
<Timeline.Item>
<Timeline.Item {...eventDataAttributesFor('code-scanning', 'reopened', 'monalisa')}>
<Timeline.Badge variant="success">
<Octicon icon={DotFillIcon} />
</Timeline.Badge>
Expand Down Expand Up @@ -510,7 +532,7 @@ export const EventDismissalRequested = () => (
<Examples>
<VariantSection label="Requested to dismiss">
<Timeline aria-label="Code scanning alert timeline">
<Timeline.Item>
<Timeline.Item {...eventDataAttributesFor('code-scanning', 'dismissal_requested', 'monalisa')}>
<Timeline.Badge>
<Octicon icon={CommentIcon} />
</Timeline.Badge>
Expand Down Expand Up @@ -550,7 +572,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 {...eventDataAttributesFor('code-scanning', 'dismissal_reviewed', 'monalisa')}>
<Timeline.Badge>
<Octicon icon={CheckIcon} />
</Timeline.Badge>
Expand All @@ -567,7 +589,7 @@ export const EventDismissalReviewed = () => (
{/* Denied — x icon */}
<VariantSection label="Denied dismissal">
<Timeline aria-label="Code scanning alert timeline">
<Timeline.Item>
<Timeline.Item {...eventDataAttributesFor('code-scanning', 'dismissal_reviewed', 'monalisa')}>
<Timeline.Badge>
<Octicon icon={XIcon} />
</Timeline.Badge>
Expand Down
Loading
Loading