diff --git a/packages/react/src/Timeline/Timeline.dependabot.features.stories.module.css b/packages/react/src/Timeline/Timeline.dependabot.features.stories.module.css index b4d38a5b048..cee5efca4f7 100644 --- a/packages/react/src/Timeline/Timeline.dependabot.features.stories.module.css +++ b/packages/react/src/Timeline/Timeline.dependabot.features.stories.module.css @@ -35,22 +35,6 @@ text-decoration: none; } -/* Optional dismissal/auto sub-content row. Live ERB renders a - `
` (small, indented block - below the event) holding a `note` octicon + the comment text. */ -.NoteComment { - margin-top: var(--base-size-8); - padding-left: var(--base-size-4); - font-size: var(--text-body-size-small); - color: var(--fgColor-muted); -} - -.NoteIcon { - vertical-align: middle; - margin-right: var(--base-size-4); - color: var(--fgColor-muted); -} - /* Colored badge icons for the Dismissal Request / Review / Cancelled events. Their live ERB renders `with_badge(color: :X, icon: …)` with NO `bg:` — in Primer `color:` tints the ICON on the DEFAULT badge background (it is NOT a diff --git a/packages/react/src/Timeline/Timeline.dependabot.features.stories.tsx b/packages/react/src/Timeline/Timeline.dependabot.features.stories.tsx index d485f49ddda..a02d6b8a7c4 100644 --- a/packages/react/src/Timeline/Timeline.dependabot.features.stories.tsx +++ b/packages/react/src/Timeline/Timeline.dependabot.features.stories.tsx @@ -1,5 +1,4 @@ import type {Meta} from '@storybook/react-vite' -import type React from 'react' import type {ComponentProps} from '../utils/types' import {FeatureFlags} from '../FeatureFlags' import Timeline from './Timeline' @@ -18,7 +17,15 @@ import Label from '../Label' import Link from '../Link' import Octicon from '../Octicon' import classes from './Timeline.dependabot.features.stories.module.css' -import {BoldLink, Examples, InlineAvatar, MutedTime, VariantSection} from './internal/timelineStoryHelpers' +import { + BoldLink, + EventSubRow, + Examples, + InlineAvatar, + MutedTime, + UserActor, + VariantSection, +} from './internal/timelineStoryHelpers' /** * Dependabot alert Timeline event examples (Phase 2 of github/primer#6663). @@ -69,7 +76,6 @@ import {BoldLink, Examples, InlineAvatar, MutedTime, VariantSection} from './int // Live ERB uses the bundled `modules/site/dependabot-icon.png`; this is the // public dependabot[bot] avatar (square Dependabot logo) for Storybook. const DEPENDABOT_AVATAR = 'https://avatars.githubusercontent.com/u/27347476?v=4' -const MONALISA_AVATAR = 'https://avatars.githubusercontent.com/u/583231?v=4' /** * Dependabot actor — `DependabotAlerts::TimelineItems::ActorComponent` in @@ -91,21 +97,6 @@ const DependabotActor = () => ( ) -/** - * User actor — `ActorComponent` regular-user branch (`linked_avatar_for(actor, - * 20)` + `profile_link(... "text-bold")`): a CIRCLE 20px avatar + bold profile - * link, no `(bot)` tag. Used by user-authored events (manual Dismissed, manual - * Reopened, Dismissal Cancelled). - */ -const UserActor = () => ( - <> - - - monalisa - - -) - /** * Push-pill — `PushLinkComponent`: a `` wrapping a `Primer::Beta::Link` * (`bg: :accent, px: 2, py: 1, border_radius: 3`) → SUBTLE light-blue rounded @@ -120,19 +111,6 @@ const PushPill = ({sha}: {sha: string}) => ( ) -/** - * Optional sub-content row rendered below a dismissal/auto event — the live ERB - * renders a `
` with a `note` - * octicon and the comment text. Rendered here as a small muted block inside the - * event body. - */ -const NoteComment = ({children}: {children: React.ReactNode}) => ( -
- - {children} -
-) - export default { title: 'Components/Timeline/Events/Dependabot', component: Timeline, @@ -296,7 +274,7 @@ export const EventFixed = () => ( * `Timeline.Badge` (no variant), NOT the neutral-emphasis hook. * * Manual reasons are `RepositoryVulnerabilityAlert::DISMISS_REASONS` downcased. - * The optional comment renders as a small indented sub-row (note octicon + text). + * The optional comment renders as a small sub-row (note octicon + text). */ export const EventDismissed = () => ( @@ -308,10 +286,12 @@ export const EventDismissed = () => ( - + {'dismissed this as risk is tolerable '} - This dependency is only used in our test tooling, so the risk is acceptable. + + This dependency is only used in our test tooling, so the risk is acceptable. + @@ -325,7 +305,7 @@ export const EventDismissed = () => ( - + {'dismissed this as fix started '} @@ -341,7 +321,7 @@ export const EventDismissed = () => ( - + {'dismissed this as no bandwidth to fix this '} @@ -357,7 +337,7 @@ export const EventDismissed = () => ( - + {'dismissed this as vulnerable code is not actually used '} @@ -373,7 +353,7 @@ export const EventDismissed = () => ( - + {'dismissed this as inaccurate '} @@ -392,13 +372,13 @@ export const EventDismissed = () => ( {'dismissed this due to an alert rule '} - + {'Rule created and '} low-severity-dev-deps {' was applied'} - + @@ -457,7 +437,7 @@ export const EventReopened = () => ( - + {'reopened this '} @@ -524,12 +504,12 @@ export const EventReopened = () => ( {'reopened this '} - + {'Rule disabled: '} low-severity-dev-deps - + @@ -558,7 +538,7 @@ export const EventReopened = () => ( * `bg: :X_emphasis` and so use solid `variant`s). So these four render as a bare * `` (default gray circle) with the icon color set via a * `.BadgeIcon*` class — the same structure as the muted Dismissed badge. - * Optional review/resolution notes render via the shared `NoteComment` sub-row. + * Optional review/resolution notes render via the shared `EventSubRow` sub-row. */ export const EventDismissalRequest = () => ( @@ -576,10 +556,12 @@ export const EventDismissalRequest = () => ( - + {'requested to dismiss this as '} Tolerable risk - This dependency is only used in our test tooling, so the risk is acceptable. + + This dependency is only used in our test tooling, so the risk is acceptable. +