refactor(Timeline): stage data-* helper in taxonomy/eventDataAttributes; consume in stories

Author: janmaarten-a11y

packages/react/src/Timeline/Timeline.code-scanning.features.stories.tsx

@@ -26,7 +26,7 @@ import {
   UserActor,
   VariantSection,
 } from './internal/timelineStoryHelpers'
-import {CODE_SCANNING_TAXONOMY, actorTypeForLogin, toEventDataAttributes, type CodeScanningEventType} from './taxonomy'
+import {eventDataAttributesFor} from './taxonomy'
 import classes from './Timeline.code-scanning.features.stories.module.css'
 
 /**
@@ -175,23 +175,14 @@ const SubRow = ({children}: {children: React.ReactNode}) => <div className={clas
 
 /**
  * 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`.
+ * 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.
  */
-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',
@@ -240,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 {...codeScanningAttrs('detected')}>
+        <Timeline.Item {...eventDataAttributesFor('code-scanning', 'detected')}>
           <Timeline.Badge>
             <Octicon icon={ShieldIcon} />
           </Timeline.Badge>
@@ -274,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 {...codeScanningAttrs('appeared')}>
+        <Timeline.Item {...eventDataAttributesFor('code-scanning', 'appeared')}>
           <Timeline.Badge>
             <Octicon icon={GitBranchIcon} />
           </Timeline.Badge>
@@ -304,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 {...codeScanningAttrs('reappeared')}>
+        <Timeline.Item {...eventDataAttributesFor('code-scanning', 'reappeared')}>
           <Timeline.Badge>
             <Octicon icon={ShieldIcon} />
           </Timeline.Badge>
@@ -348,7 +339,7 @@ export const EventFixed = () => (
     {/* Fixed — selected ref → SOLID purple shield-check */}
     <VariantSection label="Fixed in branch (current ref)">
       <Timeline aria-label="Code scanning alert timeline">
-        <Timeline.Item {...codeScanningAttrs('fixed')}>
+        <Timeline.Item {...eventDataAttributesFor('code-scanning', 'fixed')}>
           <Timeline.Badge variant="done">
             <Octicon icon={ShieldCheckIcon} />
           </Timeline.Badge>
@@ -363,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 {...codeScanningAttrs('fixed')}>
+        <Timeline.Item {...eventDataAttributesFor('code-scanning', 'fixed')}>
           <Timeline.Badge>
             <Octicon icon={CheckIcon} />
           </Timeline.Badge>
@@ -381,7 +372,7 @@ export const EventFixed = () => (
         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 {...codeScanningAttrs('closed')}>
+        <Timeline.Item {...eventDataAttributesFor('code-scanning', 'closed')}>
           <Timeline.Badge variant="done">
             <Octicon icon={ShieldCheckIcon} />
           </Timeline.Badge>
@@ -397,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 {...codeScanningAttrs('closed')}>
+        <Timeline.Item {...eventDataAttributesFor('code-scanning', 'closed')}>
           <Timeline.Badge>
             <Octicon icon={CheckIcon} />
           </Timeline.Badge>
@@ -429,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 {...codeScanningAttrs('closed', 'monalisa')}>
+        <Timeline.Item {...eventDataAttributesFor('code-scanning', 'closed', 'monalisa')}>
           <Timeline.Badge variant="danger">
             <Octicon icon={ShieldXIcon} />
           </Timeline.Badge>
@@ -446,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 {...codeScanningAttrs('closed', 'monalisa')}>
+        <Timeline.Item {...eventDataAttributesFor('code-scanning', 'closed', 'monalisa')}>
           <Timeline.Badge variant="danger">
             <Octicon icon={ShieldXIcon} />
           </Timeline.Badge>
@@ -462,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 {...codeScanningAttrs('closed', 'monalisa')}>
+        <Timeline.Item {...eventDataAttributesFor('code-scanning', 'closed', 'monalisa')}>
           <Timeline.Badge variant="danger">
             <Octicon icon={ShieldXIcon} />
           </Timeline.Badge>
@@ -479,7 +470,7 @@ export const EventClosedByUser = () => (
         `resolution == :NO_RESOLUTION`. */}
     <VariantSection label="Closed (no resolution)">
       <Timeline aria-label="Code scanning alert timeline">
-        <Timeline.Item {...codeScanningAttrs('closed', 'monalisa')}>
+        <Timeline.Item {...eventDataAttributesFor('code-scanning', 'closed', 'monalisa')}>
           <Timeline.Badge variant="danger">
             <Octicon icon={ShieldXIcon} />
           </Timeline.Badge>
@@ -506,7 +497,7 @@ export const EventReopened = () => (
   <Examples>
     <VariantSection label="Reopened">
       <Timeline aria-label="Code scanning alert timeline">
-        <Timeline.Item {...codeScanningAttrs('reopened', 'monalisa')}>
+        <Timeline.Item {...eventDataAttributesFor('code-scanning', 'reopened', 'monalisa')}>
           <Timeline.Badge variant="success">
             <Octicon icon={DotFillIcon} />
           </Timeline.Badge>
@@ -541,7 +532,7 @@ export const EventDismissalRequested = () => (
   <Examples>
     <VariantSection label="Requested to dismiss">
       <Timeline aria-label="Code scanning alert timeline">
-        <Timeline.Item {...codeScanningAttrs('dismissal_requested', 'monalisa')}>
+        <Timeline.Item {...eventDataAttributesFor('code-scanning', 'dismissal_requested', 'monalisa')}>
           <Timeline.Badge>
             <Octicon icon={CommentIcon} />
           </Timeline.Badge>
@@ -581,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 {...codeScanningAttrs('dismissal_reviewed', 'monalisa')}>
+        <Timeline.Item {...eventDataAttributesFor('code-scanning', 'dismissal_reviewed', 'monalisa')}>
           <Timeline.Badge>
             <Octicon icon={CheckIcon} />
           </Timeline.Badge>
@@ -598,7 +589,7 @@ export const EventDismissalReviewed = () => (
     {/* Denied — x icon */}
     <VariantSection label="Denied dismissal">
       <Timeline aria-label="Code scanning alert timeline">
-        <Timeline.Item {...codeScanningAttrs('dismissal_reviewed', 'monalisa')}>
+        <Timeline.Item {...eventDataAttributesFor('code-scanning', 'dismissal_reviewed', 'monalisa')}>
           <Timeline.Badge>
             <Octicon icon={XIcon} />
           </Timeline.Badge>