Skip to content

Commit fb7879d

Browse files
janmaarten-a11yCopilot
janmaarten-a11y
and
Copilot
committed
Timeline: Dependabot stories use shared internal helpers (UserActor, EventSubRow)
Swap the Dependabot Timeline story's local UserActor and NoteComment helpers for the shared ones from ./internal/timelineStoryHelpers (added in #8140). Storybook-only, no consumer-facing change. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
1 parent e25a1a9 commit fb7879d

2 files changed

Lines changed: 31 additions & 65 deletions

File tree

‎packages/react/src/Timeline/Timeline.dependabot.features.stories.module.css‎

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -35,22 +35,6 @@
3535
text-decoration: none;
3636
}
3737

38-
/* Optional dismissal/auto sub-content row. Live ERB renders a
39-
`<div class="TimelineItem tmp-pl-5 pt-0 f6 d-block">` (small, indented block
40-
below the event) holding a `note` octicon + the comment text. */
41-
.NoteComment {
42-
margin-top: var(--base-size-8);
43-
padding-left: var(--base-size-4);
44-
font-size: var(--text-body-size-small);
45-
color: var(--fgColor-muted);
46-
}
47-
48-
.NoteIcon {
49-
vertical-align: middle;
50-
margin-right: var(--base-size-4);
51-
color: var(--fgColor-muted);
52-
}
53-
5438
/* Colored badge icons for the Dismissal Request / Review / Cancelled events.
5539
Their live ERB renders `with_badge(color: :X, icon: …)` with NO `bg:` — in
5640
Primer `color:` tints the ICON on the DEFAULT badge background (it is NOT a

‎packages/react/src/Timeline/Timeline.dependabot.features.stories.tsx‎

Lines changed: 31 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import type {Meta} from '@storybook/react-vite'
2-
import type React from 'react'
32
import type {ComponentProps} from '../utils/types'
43
import {FeatureFlags} from '../FeatureFlags'
54
import Timeline from './Timeline'
@@ -18,7 +17,15 @@ import Label from '../Label'
1817
import Link from '../Link'
1918
import Octicon from '../Octicon'
2019
import classes from './Timeline.dependabot.features.stories.module.css'
21-
import {BoldLink, Examples, InlineAvatar, MutedTime, VariantSection} from './internal/timelineStoryHelpers'
20+
import {
21+
BoldLink,
22+
EventSubRow,
23+
Examples,
24+
InlineAvatar,
25+
MutedTime,
26+
UserActor,
27+
VariantSection,
28+
} from './internal/timelineStoryHelpers'
2229

2330
/**
2431
* Dependabot alert Timeline event examples (Phase 2 of github/primer#6663).
@@ -69,7 +76,6 @@ import {BoldLink, Examples, InlineAvatar, MutedTime, VariantSection} from './int
6976
// Live ERB uses the bundled `modules/site/dependabot-icon.png`; this is the
7077
// public dependabot[bot] avatar (square Dependabot logo) for Storybook.
7178
const DEPENDABOT_AVATAR = 'https://avatars.githubusercontent.com/u/27347476?v=4'
72-
const MONALISA_AVATAR = 'https://avatars.githubusercontent.com/u/583231?v=4'
7379

7480
/**
7581
* Dependabot actor — `DependabotAlerts::TimelineItems::ActorComponent` in
@@ -91,21 +97,6 @@ const DependabotActor = () => (
9197
</>
9298
)
9399

94-
/**
95-
* User actor — `ActorComponent` regular-user branch (`linked_avatar_for(actor,
96-
* 20)` + `profile_link(... "text-bold")`): a CIRCLE 20px avatar + bold profile
97-
* link, no `(bot)` tag. Used by user-authored events (manual Dismissed, manual
98-
* Reopened, Dismissal Cancelled).
99-
*/
100-
const UserActor = () => (
101-
<>
102-
<InlineAvatar src={MONALISA_AVATAR} />
103-
<BoldLink href="#" muted>
104-
monalisa
105-
</BoldLink>
106-
</>
107-
)
108-
109100
/**
110101
* Push-pill — `PushLinkComponent`: a `<code>` wrapping a `Primer::Beta::Link`
111102
* (`bg: :accent, px: 2, py: 1, border_radius: 3`) → SUBTLE light-blue rounded
@@ -120,19 +111,6 @@ const PushPill = ({sha}: {sha: string}) => (
120111
</code>
121112
)
122113

123-
/**
124-
* Optional sub-content row rendered below a dismissal/auto event — the live ERB
125-
* renders a `<div class="TimelineItem tmp-pl-5 pt-0 f6 d-block">` with a `note`
126-
* octicon and the comment text. Rendered here as a small muted block inside the
127-
* event body.
128-
*/
129-
const NoteComment = ({children}: {children: React.ReactNode}) => (
130-
<div className={classes.NoteComment}>
131-
<Octicon icon={NoteIcon} size={16} className={classes.NoteIcon} />
132-
{children}
133-
</div>
134-
)
135-
136114
export default {
137115
title: 'Components/Timeline/Events/Dependabot',
138116
component: Timeline,
@@ -308,10 +286,12 @@ export const EventDismissed = () => (
308286
<Octicon icon={ShieldSlashIcon} />
309287
</Timeline.Badge>
310288
<Timeline.Body>
311-
<UserActor />
289+
<UserActor href="#" muted />
312290
{'dismissed this as risk is tolerable '}
313291
<MutedTime date={new Date('2022-08-02T14:10:00Z')} />
314-
<NoteComment>This dependency is only used in our test tooling, so the risk is acceptable.</NoteComment>
292+
<EventSubRow icon={NoteIcon}>
293+
This dependency is only used in our test tooling, so the risk is acceptable.
294+
</EventSubRow>
315295
</Timeline.Body>
316296
</Timeline.Item>
317297
</Timeline>
@@ -325,7 +305,7 @@ export const EventDismissed = () => (
325305
<Octicon icon={ShieldSlashIcon} />
326306
</Timeline.Badge>
327307
<Timeline.Body>
328-
<UserActor />
308+
<UserActor href="#" muted />
329309
{'dismissed this as fix started '}
330310
<MutedTime date={new Date('2022-08-02T14:10:00Z')} />
331311
</Timeline.Body>
@@ -341,7 +321,7 @@ export const EventDismissed = () => (
341321
<Octicon icon={ShieldSlashIcon} />
342322
</Timeline.Badge>
343323
<Timeline.Body>
344-
<UserActor />
324+
<UserActor href="#" muted />
345325
{'dismissed this as no bandwidth to fix this '}
346326
<MutedTime date={new Date('2022-08-02T14:10:00Z')} />
347327
</Timeline.Body>
@@ -357,7 +337,7 @@ export const EventDismissed = () => (
357337
<Octicon icon={ShieldSlashIcon} />
358338
</Timeline.Badge>
359339
<Timeline.Body>
360-
<UserActor />
340+
<UserActor href="#" muted />
361341
{'dismissed this as vulnerable code is not actually used '}
362342
<MutedTime date={new Date('2022-08-02T14:10:00Z')} />
363343
</Timeline.Body>
@@ -373,7 +353,7 @@ export const EventDismissed = () => (
373353
<Octicon icon={ShieldSlashIcon} />
374354
</Timeline.Badge>
375355
<Timeline.Body>
376-
<UserActor />
356+
<UserActor href="#" muted />
377357
{'dismissed this as inaccurate '}
378358
<MutedTime date={new Date('2022-08-02T14:10:00Z')} />
379359
</Timeline.Body>
@@ -392,13 +372,13 @@ export const EventDismissed = () => (
392372
<DependabotActor />
393373
{'dismissed this due to an alert rule '}
394374
<MutedTime date={new Date('2022-08-03T08:00:00Z')} />
395-
<NoteComment>
375+
<EventSubRow icon={NoteIcon}>
396376
{'Rule created and '}
397377
<Link href="#" inline>
398378
low-severity-dev-deps
399379
</Link>
400380
{' was applied'}
401-
</NoteComment>
381+
</EventSubRow>
402382
</Timeline.Body>
403383
</Timeline.Item>
404384
</Timeline>
@@ -457,7 +437,7 @@ export const EventReopened = () => (
457437
<Octicon icon={SyncIcon} />
458438
</Timeline.Badge>
459439
<Timeline.Body>
460-
<UserActor />
440+
<UserActor href="#" muted />
461441
{'reopened this '}
462442
<MutedTime date={new Date('2022-08-04T10:15:00Z')} />
463443
</Timeline.Body>
@@ -524,12 +504,12 @@ export const EventReopened = () => (
524504
<DependabotActor />
525505
{'reopened this '}
526506
<MutedTime date={new Date('2022-08-06T09:45:00Z')} />
527-
<NoteComment>
507+
<EventSubRow icon={NoteIcon}>
528508
{'Rule disabled: '}
529509
<Link href="#" inline>
530510
low-severity-dev-deps
531511
</Link>
532-
</NoteComment>
512+
</EventSubRow>
533513
</Timeline.Body>
534514
</Timeline.Item>
535515
</Timeline>
@@ -558,7 +538,7 @@ export const EventReopened = () => (
558538
* `bg: :X_emphasis` and so use solid `variant`s). So these four render as a bare
559539
* `<Timeline.Badge>` (default gray circle) with the icon color set via a
560540
* `.BadgeIcon*` class — the same structure as the muted Dismissed badge.
561-
* Optional review/resolution notes render via the shared `NoteComment` sub-row.
541+
* Optional review/resolution notes render via the shared `EventSubRow` sub-row.
562542
*/
563543
export const EventDismissalRequest = () => (
564544
<Examples>
@@ -576,10 +556,12 @@ export const EventDismissalRequest = () => (
576556
<Octicon icon={CommentIcon} className={classes.BadgeIconAttention} />
577557
</Timeline.Badge>
578558
<Timeline.Body>
579-
<UserActor />
559+
<UserActor href="#" muted />
580560
{'requested to dismiss this as '}
581561
<strong>Tolerable risk</strong> <MutedTime date={new Date('2022-08-07T13:20:00Z')} />
582-
<NoteComment>This dependency is only used in our test tooling, so the risk is acceptable.</NoteComment>
562+
<EventSubRow icon={NoteIcon}>
563+
This dependency is only used in our test tooling, so the risk is acceptable.
564+
</EventSubRow>
583565
</Timeline.Body>
584566
<Timeline.Actions>
585567
<Button variant="primary" size="small">
@@ -598,10 +580,10 @@ export const EventDismissalRequest = () => (
598580
<Octicon icon={CheckIcon} className={classes.BadgeIconSuccess} />
599581
</Timeline.Badge>
600582
<Timeline.Body>
601-
<UserActor />
583+
<UserActor href="#" muted />
602584
{'approved dismissal '}
603585
<MutedTime date={new Date('2022-08-08T10:05:00Z')} />
604-
<NoteComment>Confirmed this dependency is dev-only — approving the dismissal.</NoteComment>
586+
<EventSubRow icon={NoteIcon}>Confirmed this dependency is dev-only — approving the dismissal.</EventSubRow>
605587
</Timeline.Body>
606588
</Timeline.Item>
607589
</Timeline>
@@ -615,7 +597,7 @@ export const EventDismissalRequest = () => (
615597
<Octicon icon={XIcon} className={classes.BadgeIconDanger} />
616598
</Timeline.Badge>
617599
<Timeline.Body>
618-
<UserActor />
600+
<UserActor href="#" muted />
619601
{'denied dismissal '}
620602
<MutedTime date={new Date('2022-08-08T15:40:00Z')} />
621603
</Timeline.Body>
@@ -633,7 +615,7 @@ export const EventDismissalRequest = () => (
633615
<Octicon icon={XIcon} className={classes.BadgeIconMuted} />
634616
</Timeline.Badge>
635617
<Timeline.Body>
636-
<UserActor />
618+
<UserActor href="#" muted />
637619
{'cancelled their dismissal request '}
638620
<MutedTime date={new Date('2022-08-09T09:00:00Z')} />
639621
</Timeline.Body>

0 commit comments

Comments
 (0)