{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "how-it-works-timeline", "title": "How It Works — Vertical Timeline", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/how-it-works-timeline/how-it-works-timeline.component.ts", "content": "// Vertical numbered timeline with a continuous rail, per-stage status badge, outcome\n// bullets, and a paired detail card — for onboarding or implementation narratives that\n// need more room than a three-up row. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport { Check, Clock, LucideAngularModule } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport {\n UiTimelineComponent,\n UiTimelineContentComponent,\n UiTimelineDescriptionComponent,\n UiTimelineHeaderComponent,\n UiTimelineItemComponent,\n UiTimelineMediaComponent,\n UiTimelineTitleComponent,\n} from '@/ui/timeline/timeline.component'\n\nexport interface TimelineStage {\n title: string\n status: string\n done: boolean\n body: string\n outcomes: string[]\n}\n\nconst stages: TimelineStage[] = [\n {\n title: 'Kickoff & access',\n status: 'Week 1',\n done: true,\n body: 'A shared channel, a named engineer, and read-only credentials. Nothing is provisioned until scope is signed off.',\n outcomes: ['Workspace provisioned', 'SSO connected', 'Data contract agreed'],\n },\n {\n title: 'Model your data',\n status: 'Week 2',\n done: true,\n body: 'We mirror your warehouse schema and reconcile it against last quarter’s numbers before anything is published.',\n outcomes: ['Schema mirrored', 'Historical backfill', 'Reconciliation signed off'],\n },\n {\n title: 'Pilot with one team',\n status: 'Week 3–4',\n done: false,\n body: 'A single team runs their real reporting cycle on it. We fix what they hit before anyone else sees it.',\n outcomes: ['Pilot cohort live', 'Feedback loop open', 'Runbook drafted'],\n },\n {\n title: 'Roll out & hand over',\n status: 'Week 5',\n done: false,\n body: 'Permissions, alerting, and the runbook move to your team. Support stays on call through the first close.',\n outcomes: ['Org-wide access', 'Alerting configured', 'Ownership transferred'],\n },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-how-it-works-timeline, [ui-how-it-works-timeline]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiSeparatorComponent,\n UiTimelineComponent,\n UiTimelineContentComponent,\n UiTimelineDescriptionComponent,\n UiTimelineHeaderComponent,\n UiTimelineItemComponent,\n UiTimelineMediaComponent,\n UiTimelineTitleComponent,\n ],\n template: `\n
\n
\n
\n Implementation\n

\n From kickoff to hand-over in five weeks\n

\n

\n The same plan we run for every rollout. No phase starts before the one above it is signed off.\n

\n
\n\n \n @for (stage of allStages; track stage.title; let index = $index) {\n \n \n @if (stage.done) {\n \n } @else {\n {{ pad(index + 1) }}\n }\n \n\n \n \n {{ stage.title }}\n \n \n {{ stage.status }}\n \n \n\n \n {{ stage.body }}\n \n\n
\n
\n

\n What you have at the end\n

\n
\n
\n
    \n @for (outcome of stage.outcomes; track outcome) {\n
  • \n \n {{ outcome }}\n
    • \n }\n
\n
\n
\n \n \n }\n \n\n \n
\n \n \n
\n
\n
\n `,\n})\nexport class UiHowItWorksTimelineComponent {\n protected readonly Check = Check\n protected readonly Clock = Clock\n protected readonly allStages = stages\n\n @Input('class') className?: string\n\n get rootClass(): string {\n return cn('bg-background', this.className)\n }\n\n pad(n: number): string {\n return String(n).padStart(2, '0')\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/how-it-works-timeline/how-it-works-timeline.component.ts" }, { "path": "packages/registry-angular/blocks/how-it-works-timeline/index.ts", "content": "export { UiHowItWorksTimelineComponent, type TimelineStage } from './how-it-works-timeline.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/how-it-works-timeline/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/timeline.json" ], "description": "Vertical numbered timeline with a continuous rail, per-stage status badge, outcome bullets, and a paired detail card — for onboarding or implementation narratives that need more room than a three-up row.", "categories": [ "marketing" ] }